@marimo-team/frontend 0.23.10-dev3 → 0.23.10-dev30

package/src/components/slides/__tests__/reveal-component.test.ts

@@ -0,0 +1,425 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import type { CellId } from "@/core/cells/ids";
+import type { RuntimeCell } from "@/core/cells/types";
+import type { SlideConfig } from "../../editor/renderers/slides-layout/types";
+import {
+  deckSlideType,
+  parkedRendersSource,
+  shouldShowCode,
+  useParkedPreview,
+} from "../reveal-component";
+
+const A = cellId("a");
+const B = cellId("b");
+
+const cells = (
+  ...entries: Array<[CellId, SlideConfig]>
+): ReadonlyMap<CellId, SlideConfig> => new Map(entries);
+
+// The hook only reads `cell.id`, so a minimal stub is enough. Cast is confined
+// to this test helper (see `@/__tests__/branded` for the same rationale).
+const cell = (id: CellId): RuntimeCell => ({ id }) as RuntimeCell;
+
+describe("shouldShowCode", () => {
+  it("is off when the code toggle is unavailable, regardless of config/override", () => {
+    expect(
+      shouldShowCode({
+        cells: cells([A, { showCode: true }]),
+        cellId: A,
+        showCodeOverrides: new Set([A]),
+        codeToggleEnabled: false,
+      }),
+    ).toBe(false);
+  });
+
+  it("is off when there is no active cell", () => {
+    expect(
+      shouldShowCode({
+        cells: cells([A, { showCode: true }]),
+        cellId: undefined,
+        showCodeOverrides: new Set(),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("follows the persisted config when there is no override", () => {
+    expect(
+      shouldShowCode({
+        cells: cells([A, { showCode: true }]),
+        cellId: A,
+        showCodeOverrides: new Set(),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(true);
+    // Missing config entry defaults to off.
+    expect(
+      shouldShowCode({
+        cells: cells(),
+        cellId: A,
+        showCodeOverrides: new Set(),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("shows code when either the config or the override is set (logical OR)", () => {
+    // Peek: config unset, override present -> shown.
+    expect(
+      shouldShowCode({
+        cells: cells(),
+        cellId: A,
+        showCodeOverrides: new Set([A]),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(true);
+    // Configured + override present -> still shown; the override never hides.
+    expect(
+      shouldShowCode({
+        cells: cells([A, { showCode: true }]),
+        cellId: A,
+        showCodeOverrides: new Set([A]),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(true);
+  });
+});
+
+describe("deckSlideType", () => {
+  const NONE_IDS: ReadonlySet<CellId> = new Set();
+
+  it("uses the configured type for a normal cell", () => {
+    expect(
+      deckSlideType({
+        cell: cell(A),
+        noOutputIds: NONE_IDS,
+        heldEditCellId: null,
+        slideConfigs: cells([A, { type: "fragment" }]),
+      }),
+    ).toBe("fragment");
+  });
+
+  it("defaults to a top-level slide when no type is configured", () => {
+    expect(
+      deckSlideType({
+        cell: cell(A),
+        noOutputIds: NONE_IDS,
+        heldEditCellId: null,
+        slideConfigs: cells(),
+      }),
+    ).toBe("slide");
+  });
+
+  it("drops output-less cells from the deck", () => {
+    expect(
+      deckSlideType({
+        cell: cell(A),
+        noOutputIds: new Set([A]),
+        heldEditCellId: null,
+        // Even an explicit type is overridden by the skip.
+        slideConfigs: cells([A, { type: "sub-slide" }]),
+      }),
+    ).toBe("skip");
+  });
+
+  it("drops the held-edit cell so it isn't mounted twice", () => {
+    expect(
+      deckSlideType({
+        cell: cell(A),
+        noOutputIds: NONE_IDS,
+        heldEditCellId: A,
+        slideConfigs: cells([A, { type: "slide" }]),
+      }),
+    ).toBe("skip");
+  });
+});
+
+describe("parkedRendersSource", () => {
+  it("follows `showCode` for a cell that has output", () => {
+    expect(
+      parkedRendersSource({
+        isNoOutputPreview: false,
+        isEditable: false,
+        showCode: true,
+      }),
+    ).toBe(true);
+    expect(
+      parkedRendersSource({
+        isNoOutputPreview: false,
+        isEditable: true,
+        showCode: false,
+      }),
+    ).toBe(false);
+  });
+
+  it("falls back to source for an editable no-output cell even when showCode is off", () => {
+    expect(
+      parkedRendersSource({
+        isNoOutputPreview: true,
+        isEditable: true,
+        showCode: false,
+      }),
+    ).toBe(true);
+  });
+
+  it("renders output for a read-only no-output cell with showCode off", () => {
+    expect(
+      parkedRendersSource({
+        isNoOutputPreview: true,
+        isEditable: false,
+        showCode: false,
+      }),
+    ).toBe(false);
+  });
+});
+
+describe("useParkedPreview", () => {
+  const NO_CONFIG = cells();
+  const NONE = new Set<CellId>();
+
+  it("is inert for a rendered cell with output", () => {
+    const { result } = renderHook(() =>
+      useParkedPreview({
+        activeCell: cell(A),
+        slideConfigs: NO_CONFIG,
+        noOutputIds: NONE,
+      }),
+    );
+    expect(result.current).toEqual({
+      parkedPreviewCell: null,
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("is inert when there is no active cell", () => {
+    const { result } = renderHook(() =>
+      useParkedPreview({
+        activeCell: undefined,
+        slideConfigs: NO_CONFIG,
+        noOutputIds: NONE,
+      }),
+    );
+    expect(result.current).toEqual({
+      parkedPreviewCell: null,
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("parks a skipped cell without flagging it as a no-output preview", () => {
+    const { result } = renderHook(() =>
+      useParkedPreview({
+        activeCell: cell(A),
+        slideConfigs: cells([A, { type: "skip" }]),
+        noOutputIds: NONE,
+      }),
+    );
+    expect(result.current).toEqual({
+      parkedPreviewCell: cell(A),
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("parks an output-less cell as a no-output preview", () => {
+    const { result } = renderHook(() =>
+      useParkedPreview({
+        activeCell: cell(A),
+        slideConfigs: NO_CONFIG,
+        noOutputIds: new Set([A]),
+      }),
+    );
+    expect(result.current).toEqual({
+      parkedPreviewCell: cell(A),
+      isHeldEdit: false,
+      isNoOutputPreview: true,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("holds the cell in the overlay once it gains output", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: NO_CONFIG,
+          noOutputIds: new Set([A]),
+        },
+      },
+    );
+    expect(result.current.isNoOutputPreview).toBe(true);
+    expect(result.current.isHeldEdit).toBe(false);
+
+    // Same cell, now with output: keep it parked so the editor isn't remounted.
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current).toEqual({
+      parkedPreviewCell: cell(A),
+      isHeldEdit: true,
+      isNoOutputPreview: false,
+      heldEditCellId: A,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("releases the hold when a different cell becomes active", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: NO_CONFIG,
+          noOutputIds: new Set([A]),
+        },
+      },
+    );
+    // Arm the hold, then let A gain output (held).
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current.isHeldEdit).toBe(true);
+
+    // Navigate to a rendered B: the hold on A is released.
+    rerender({
+      activeCell: cell(B),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current).toEqual({
+      parkedPreviewCell: null,
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("releases a skipped cell into the deck as soon as it is un-skipped", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: cells([A, { type: "skip" }]),
+          noOutputIds: NONE,
+        },
+      },
+    );
+    expect(result.current.parkedPreviewCell).toEqual(cell(A));
+
+    // Un-skip the still-active cell: it has output, so it must rejoin the deck
+    // immediately rather than staying held in the overlay until navigation.
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current).toEqual({
+      parkedPreviewCell: null,
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("shows the held editor by default and toggles it off without navigating", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: NO_CONFIG,
+          noOutputIds: new Set([A]),
+        },
+      },
+    );
+    // A gains output: held, with its editor shown by default.
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current.isHeldEdit).toBe(true);
+    expect(result.current.heldShowsCode).toBe(true);
+
+    // The `C` toggle hides the editor in place, no navigation required.
+    act(() => {
+      result.current.toggleHeldShowsCode();
+    });
+    expect(result.current.heldShowsCode).toBe(false);
+
+    // Toggling again brings it back.
+    act(() => {
+      result.current.toggleHeldShowsCode();
+    });
+    expect(result.current.heldShowsCode).toBe(true);
+  });
+
+  it("resets held code visibility when a new cell takes the held slot", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: NO_CONFIG,
+          noOutputIds: new Set([A]),
+        },
+      },
+    );
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    act(() => {
+      result.current.toggleHeldShowsCode();
+    });
+    expect(result.current.heldShowsCode).toBe(false);
+
+    // Move to a fresh output-less cell B, then let it gain output (held).
+    rerender({
+      activeCell: cell(B),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: new Set([B]),
+    });
+    rerender({
+      activeCell: cell(B),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current.heldEditCellId).toBe(B);
+    // The new cell starts with its editor visible again.
+    expect(result.current.heldShowsCode).toBe(true);
+  });
+});

package/src/components/slides/minimap.tsx

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { useDeleteCellCallback } from "@/components/editor/cell/useDeleteCell";
 import { useCellActions, useCellIds } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import type { CellColumnId } from "@/utils/id-tree";
@@ -31,9 +32,17 @@ import {
 } from "@dnd-kit/sortable";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { cn } from "@/utils/cn";
+import { Events } from "@/utils/events";
 import { Slide } from "./slide";
-import { InfoIcon, type LucideIcon } from "lucide-react";
+import { InfoIcon, type LucideIcon, PlusIcon, Trash2Icon } from "lucide-react";
 import { Tooltip } from "@/components/ui/tooltip";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
 import { Logger } from "@/utils/Logger";
 import { SLIDE_TYPE_OPTIONS_BY_VALUE } from "./slide-form";
 
@@ -71,7 +80,7 @@ interface SlideThumbnailCardProps extends React.HTMLAttributes<HTMLDivElement> {
   ref?: React.Ref<HTMLDivElement>;
 }
 
-interface SlideThumbnailRowProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+interface SlideThumbnailRowProps extends React.HTMLAttributes<HTMLDivElement> {
   cell: SlideCell;
   dimensions: ThumbnailDimensions;
   isActiveSlide?: boolean;
@@ -80,7 +89,10 @@ interface SlideThumbnailRowProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   isVisible?: boolean;
   isNoOutput?: boolean;
   slideType?: SlideType;
-  ref?: React.Ref<HTMLButtonElement>;
+  onInsertAbove?: () => void;
+  onInsertBelow?: () => void;
+  onDelete?: () => void;
+  ref?: React.Ref<HTMLDivElement>;
 }
 
 interface SlidesMinimapProps {
@@ -216,7 +228,8 @@ export const SlidesMinimap = ({
   onSlideClick,
 }: SlidesMinimapProps) => {
   const cellIds = useCellIds();
-  const { moveCellToIndex } = useCellActions();
+  const { moveCellToIndex, createNewCell } = useCellActions();
+  const deleteCell = useDeleteCellCallback();
   const containerRef = useRef<HTMLDivElement>(null);
   const visibleIds = useVisibleCellIds(containerRef);
   const [activeId, setActiveId] = useState<CellId | null>(null);
@@ -225,6 +238,10 @@ export const SlidesMinimap = ({
   );
   const dimensions = computeThumbnailDimensions(thumbnailWidth);
 
+  const insertCell = (cellId: CellId, before: boolean) => {
+    createNewCell({ cellId, before, code: "", autoFocus: false });
+  };
+
   useEffect(() => {
     if (!activeCellId || !containerRef.current) {
       return;
@@ -310,6 +327,11 @@ export const SlidesMinimap = ({
               slideTypes,
               skippedIds,
             })}
+            onInsertAbove={
+              index === 0 ? () => insertCell(cell.id, true) : undefined
+            }
+            onInsertBelow={() => insertCell(cell.id, false)}
+            onDelete={() => deleteCell({ cellId: cell.id })}
             onClick={() => onSlideClick(index)}
           />
         ))}
@@ -353,6 +375,11 @@ export const SlidesMinimap = ({
                   ? dropTarget.position
                   : null
               }
+              onInsertAbove={
+                index === 0 ? () => insertCell(cell.id, true) : undefined
+              }
+              onInsertBelow={() => insertCell(cell.id, false)}
+              onDelete={() => deleteCell({ cellId: cell.id })}
               onClick={() => onSlideClick(index)}
             />
           ))}
@@ -399,6 +426,9 @@ interface SortableSlideThumbnailProps {
   isVisible?: boolean;
   isNoOutput?: boolean;
   slideType?: SlideType;
+  onInsertAbove?: () => void;
+  onInsertBelow?: () => void;
+  onDelete?: () => void;
   onClick?: () => void;
 }
 
@@ -411,6 +441,9 @@ const SortableSlideThumbnail = ({
   isVisible,
   isNoOutput,
   slideType,
+  onInsertAbove,
+  onInsertBelow,
+  onDelete,
   onClick,
 }: SortableSlideThumbnailProps) => {
   const { attributes, listeners, setNodeRef } = useSortable({
@@ -428,6 +461,9 @@ const SortableSlideThumbnail = ({
       isVisible={isVisible}
       isNoOutput={isNoOutput}
       slideType={slideType}
+      onInsertAbove={onInsertAbove}
+      onInsertBelow={onInsertBelow}
+      onDelete={onDelete}
       onClick={onClick}
       {...attributes}
       {...listeners}
@@ -446,6 +482,9 @@ const SlideThumbnailRow = ({
   isVisible,
   isNoOutput,
   slideType,
+  onInsertAbove,
+  onInsertBelow,
+  onDelete,
   onClick,
   ref,
   ...props
@@ -456,10 +495,23 @@ const SlideThumbnailRow = ({
     ...style,
   };
 
-  return (
-    <button
+  // Space is ignored as Reveal.js listens for Space on `document` to advance
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.target === event.currentTarget && event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      event.currentTarget.click();
+    }
+  };
+
+  const row = (
+    <div
       ref={ref}
-      type="button"
+      // A real <button> can't host the nested insert <button>s (invalid HTML),
+      // so we keep button semantics via role + keyboard handling below.
+      // eslint-disable-next-line jsx-a11y/prefer-tag-over-role
+      role="button"
+      tabIndex={0}
       data-cell-id={cell.id}
       className={cn(
         "relative shrink-0 appearance-none text-left p-0 bg-transparent outline-none",
@@ -467,6 +519,7 @@ const SlideThumbnailRow = ({
       )}
       style={rowStyle}
       onClick={onClick}
+      onKeyDown={handleKeyDown}
       {...props}
     >
       {dropIndicator && (
@@ -479,6 +532,9 @@ const SlideThumbnailRow = ({
           )}
         />
       )}
+      {onInsertAbove && (
+        <InsertCellLine position="above" onInsert={onInsertAbove} />
+      )}
       <SlideThumbnailCard
         cell={cell}
         dimensions={dimensions}
@@ -488,7 +544,68 @@ const SlideThumbnailRow = ({
         isNoOutput={isNoOutput}
         slideType={slideType}
       />
-    </button>
+      {onInsertBelow && (
+        <InsertCellLine position="below" onInsert={onInsertBelow} />
+      )}
+    </div>
+  );
+
+  if (!onInsertBelow && !onDelete) {
+    return row;
+  }
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild={true}>{row}</ContextMenuTrigger>
+      <ContextMenuContent>
+        {onInsertBelow && (
+          <ContextMenuItem onSelect={onInsertBelow}>
+            <PlusIcon className="mr-2 h-3.5 w-3.5" />
+            Add cell
+          </ContextMenuItem>
+        )}
+        <ContextMenuSeparator />
+        {onDelete && (
+          <ContextMenuItem variant="danger" onSelect={onDelete}>
+            <Trash2Icon className="mr-2 h-3.5 w-3.5" />
+            Delete cell
+          </ContextMenuItem>
+        )}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+};
+
+const InsertCellLine = ({
+  position,
+  onInsert,
+}: {
+  position: "above" | "below";
+  onInsert: () => void;
+}) => {
+  return (
+    <Tooltip content="Add Python cell">
+      <button
+        type="button"
+        aria-label="Add Python cell"
+        data-testid="minimap-insert-cell"
+        className={cn(
+          "absolute left-0 right-0 z-30 flex h-3 items-center justify-center",
+          "opacity-0 transition-opacity hover:opacity-80 focus-visible:opacity-100 focus:outline-none",
+          position === "below"
+            ? "bottom-0 translate-y-1/2"
+            : "top-0 -translate-y-1/2",
+        )}
+        // Stop the pointer event from reaching the row's drag sensor / click.
+        onPointerDown={Events.stopPropagation()}
+        onClick={Events.stopPropagation(onInsert)}
+      >
+        <span className="absolute left-2 right-2 h-px rounded-full bg-blue-500" />
+        <span className="relative flex h-3 w-3 items-center justify-center rounded-full bg-blue-500 text-background shadow-xs">
+          <PlusIcon className="h-2 w-2" strokeWidth={3} />
+        </span>
+      </button>
+    </Tooltip>
   );
 };
 
@@ -529,10 +646,10 @@ const SlideThumbnailCard = ({
     <div
       ref={ref}
       className={cn(
-        "border-2 shrink-0 rounded-md relative select-none bg-background cursor-pointer active:cursor-grabbing overflow-hidden",
+        "border-2 shrink-0 rounded-md relative select-none bg-background cursor-pointer active:cursor-grabbing overflow-hidden transition-colors",
         isActiveSlide || isActiveDragSource || isOverlay
           ? "border-blue-500"
-          : "border-border",
+          : "border-border hover:border-blue-500/50",
         isActiveDragSource && !isOverlay && "opacity-35",
         isOverlay && "opacity-95 shadow-lg",
         className,