@marimo-team/islands 0.23.10-dev18 → 0.23.10-dev20

package/dist/{useDateFormatter-BA4FCquG.js → useDateFormatter-BRcO_TGJ.js}

@@ -1,7 +1,7 @@
 import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-DA-nE2FX.js";
 import { u as createLucideIcon } from "./dist-C1BYNeCR.js";
-import { T as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./strings-Bu3vlb6W.js";
+import { E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./strings-GCJA9n6d.js";
 var ChartPie = createLucideIcon("chart-pie", [["path", {
   d: "M21 12c.552 0 1.005-.449.95-.998a10 10 0 0 0-8.953-8.951c-.55-.055-.998.398-.998.95v8a1 1 0 0 0 1 1z",
   key: "pzmjnu"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.10-dev18",
+  "version": "0.23.10-dev20",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/slides/__tests__/minimap-actions.test.tsx

@@ -0,0 +1,166 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import type { CellId } from "@/core/cells/ids";
+import type { CellData, CellRuntimeState } from "@/core/cells/types";
+import { MultiColumn } from "@/utils/id-tree";
+import { SlidesMinimap } from "../minimap";
+
+const A = cellId("a");
+const B = cellId("b");
+
+// Spies shared with the hoisted module mocks below.
+const { createNewCell, deleteCell, moveCellToIndex } = vi.hoisted(() => ({
+  createNewCell: vi.fn(),
+  deleteCell: vi.fn(),
+  moveCellToIndex: vi.fn(),
+}));
+
+vi.mock("@/core/cells/cells", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/core/cells/cells")>();
+  return {
+    ...actual,
+    useCellActions: () => ({ moveCellToIndex, createNewCell }),
+    useCellIds: () => MultiColumn.from([[A, B]]),
+  };
+});
+
+vi.mock("@/components/editor/cell/useDeleteCell", () => ({
+  useDeleteCellCallback: () => deleteCell,
+}));
+
+beforeAll(() => {
+  // jsdom doesn't implement these; radix menus poke at them.
+  global.HTMLElement.prototype.scrollIntoView = () => {
+    /* noop */
+  };
+  if (!global.HTMLElement.prototype.hasPointerCapture) {
+    global.HTMLElement.prototype.hasPointerCapture = () => false;
+  }
+  if (!global.HTMLElement.prototype.releasePointerCapture) {
+    global.HTMLElement.prototype.releasePointerCapture = () => {
+      /* noop */
+    };
+  }
+  global.IntersectionObserver ??= class {
+    observe() {
+      /* noop */
+    }
+    unobserve() {
+      /* noop */
+    }
+    disconnect() {
+      /* noop */
+    }
+    takeRecords() {
+      return [];
+    }
+    root = null;
+    rootMargin = "";
+    thresholds = [];
+  } as unknown as typeof IntersectionObserver;
+});
+
+// The minimap only reads `id`/`code`/`status`/`output`, so a minimal stub is
+// enough; the cast is confined to this helper.
+function makeCell(id: CellId): CellRuntimeState & CellData {
+  return {
+    id,
+    code: `print("${id}")`,
+    output: null,
+    status: "idle",
+  } as unknown as CellRuntimeState & CellData;
+}
+
+function renderMinimap() {
+  const onSlideClick = vi.fn();
+  const utils = render(
+    <TooltipProvider>
+      <SlidesMinimap
+        cells={[makeCell(A), makeCell(B)]}
+        thumbnailWidth={200}
+        canReorder={false}
+        activeCellId={null}
+        onSlideClick={onSlideClick}
+      />
+    </TooltipProvider>,
+  );
+  return { ...utils, onSlideClick };
+}
+
+const EMPTY_CELL = { code: "", autoFocus: false } as const;
+
+describe("SlidesMinimap insert lines", () => {
+  it("inserts a blank cell above the first row and below any row", () => {
+    renderMinimap();
+    // First row exposes both an above and a below line; later rows only below.
+    // DOM order: [A-above, A-below, B-below].
+    const inserts = screen.getAllByTestId("minimap-insert-cell");
+    expect(inserts).toHaveLength(3);
+
+    fireEvent.click(inserts[0]);
+    expect(createNewCell).toHaveBeenLastCalledWith({
+      cellId: A,
+      before: true,
+      ...EMPTY_CELL,
+    });
+
+    fireEvent.click(inserts[1]);
+    expect(createNewCell).toHaveBeenLastCalledWith({
+      cellId: A,
+      before: false,
+      ...EMPTY_CELL,
+    });
+
+    fireEvent.click(inserts[2]);
+    expect(createNewCell).toHaveBeenLastCalledWith({
+      cellId: B,
+      before: false,
+      ...EMPTY_CELL,
+    });
+  });
+});
+
+describe("SlidesMinimap context menu", () => {
+  const openRowMenu = (container: HTMLElement, id: CellId) => {
+    const row = container.querySelector<HTMLElement>(`[data-cell-id="${id}"]`);
+    expect(row).not.toBeNull();
+    fireEvent.contextMenu(row!);
+  };
+
+  it('"Add cell" inserts a blank cell below the row', () => {
+    const { container } = renderMinimap();
+    openRowMenu(container, A);
+    fireEvent.click(screen.getByText("Add cell"));
+    expect(createNewCell).toHaveBeenCalledWith({
+      cellId: A,
+      before: false,
+      ...EMPTY_CELL,
+    });
+  });
+
+  it('"Delete cell" deletes the row\'s cell', () => {
+    const { container } = renderMinimap();
+    openRowMenu(container, B);
+    fireEvent.click(screen.getByText("Delete cell"));
+    expect(deleteCell).toHaveBeenCalledWith({ cellId: B });
+  });
+});
+
+describe("SlidesMinimap keyboard activation", () => {
+  it("activates the row on Enter but ignores Space (reserved by reveal.js)", () => {
+    const { container, onSlideClick } = renderMinimap();
+    const row = container.querySelector<HTMLElement>(`[data-cell-id="${A}"]`);
+    expect(row).not.toBeNull();
+
+    fireEvent.keyDown(row!, { key: "Enter" });
+    expect(onSlideClick).toHaveBeenCalledWith(0);
+
+    onSlideClick.mockClear();
+    fireEvent.keyDown(row!, { key: " " });
+    expect(onSlideClick).not.toHaveBeenCalled();
+  });
+});

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,