@marimo-team/islands 0.23.10-dev2 → 0.23.10-dev21

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,

package/src/components/storage/__tests__/storage-inspector.test.ts

@@ -0,0 +1,53 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import type { StorageEntry } from "@/core/storage/types";
+import { storageEntryKey } from "../storage-inspector";
+
+function makeEntry(
+  overrides: Partial<StorageEntry> & { path: string },
+): StorageEntry {
+  return {
+    kind: overrides.kind ?? "file",
+    lastModified: overrides.lastModified ?? null,
+    metadata: overrides.metadata ?? {},
+    path: overrides.path,
+    size: overrides.size ?? 0,
+  };
+}
+
+describe("storageEntryKey", () => {
+  it("prefers the backend id when present (e.g. Google Drive)", () => {
+    const entry = makeEntry({
+      path: "Data Resume.pdf",
+      metadata: { id: "drive-file-id-123" },
+    });
+    // Two files can share a path on Drive; the id keeps keys unique.
+    expect(storageEntryKey(entry, 0)).toBe("drive-file-id-123");
+    expect(storageEntryKey(entry, 4)).toBe("drive-file-id-123");
+  });
+
+  it("falls back to path + index when there is no id", () => {
+    const entry = makeEntry({ path: "Data Resume.pdf" });
+    expect(storageEntryKey(entry, 0)).toBe("Data Resume.pdf::0");
+    expect(storageEntryKey(entry, 4)).toBe("Data Resume.pdf::4");
+  });
+
+  it("keeps duplicate-path entries unique via the index fallback", () => {
+    const entries = [
+      makeEntry({ path: "Data Resume.pdf" }),
+      makeEntry({ path: "Data Resume.pdf" }),
+      makeEntry({ path: "Data Resume.pdf" }),
+    ];
+    const keys = entries.map((entry, index) => storageEntryKey(entry, index));
+    expect(new Set(keys).size).toBe(entries.length);
+  });
+
+  it("ignores a non-string or empty id", () => {
+    expect(
+      storageEntryKey(makeEntry({ path: "a.pdf", metadata: { id: "" } }), 2),
+    ).toBe("a.pdf::2");
+    expect(
+      storageEntryKey(makeEntry({ path: "a.pdf", metadata: { id: 5 } }), 2),
+    ).toBe("a.pdf::2");
+  });
+});

package/src/components/storage/storage-inspector.tsx

@@ -94,15 +94,31 @@ function displayName(path: string): string {
   return parts[parts.length - 1] || trimmed;
 }
 
+/**
+ * Stable, unique identity for an entry row. Prefer the
+ * backend's stable id when present and fall back to the list index
+ */
+export function storageEntryKey(entry: StorageEntry, index: number): string {
+  const id = entry.metadata?.id;
+  if (typeof id === "string" && id.length > 0) {
+    return id;
+  }
+  return `${entry.path}::${index}`;
+}
+
+interface SearchContext {
+  namespace: string;
+  searchValue: string;
+  entriesByPath: ReadonlyMap<StoragePathKey, StorageEntry[]>;
+}
+
 /**
  * Recursively check whether an entry (or any of its loaded descendants)
  * matches the search query.
  */
 function entryMatchesSearch(
   entry: StorageEntry,
-  namespace: string,
-  searchValue: string,
-  entriesByPath: ReadonlyMap<StoragePathKey, StorageEntry[]>,
+  { namespace, searchValue, entriesByPath }: SearchContext,
 ): boolean {
   const query = searchValue.toLowerCase();
 
@@ -115,7 +131,7 @@ function entryMatchesSearch(
     const children = entriesByPath.get(storagePathKey(namespace, entry.path));
     if (children) {
       return children.some((child) =>
-        entryMatchesSearch(child, namespace, searchValue, entriesByPath),
+        entryMatchesSearch(child, { namespace, searchValue, entriesByPath }),
       );
     }
   }
@@ -129,16 +145,12 @@ function entryMatchesSearch(
  */
 function filterEntries(
   entries: StorageEntry[],
-  namespace: string,
-  searchValue: string,
-  entriesByPath: ReadonlyMap<StoragePathKey, StorageEntry[]>,
+  context: SearchContext,
 ): StorageEntry[] {
-  if (!searchValue.trim()) {
+  if (!context.searchValue.trim()) {
     return entries;
   }
-  return entries.filter((entry) =>
-    entryMatchesSearch(entry, namespace, searchValue, entriesByPath),
-  );
+  return entries.filter((entry) => entryMatchesSearch(entry, context));
 }
 
 /**
@@ -204,35 +216,39 @@ const StorageEntryChildren: React.FC<{
     );
   }
 
-  const filtered = filterEntries(
-    children,
+  const filtered = filterEntries(children, {
     namespace,
     searchValue,
     entriesByPath,
-  );
+  });
 
   return (
     <>
-      {filtered.map((child) => (
-        <StorageEntryRow
-          key={child.path}
-          entry={child}
-          namespace={namespace}
-          protocol={protocol}
-          rootPath={rootPath}
-          backendType={backendType}
-          depth={depth}
-          locale={locale}
-          searchValue={searchValue}
-          onOpenFile={onOpenFile}
-        />
-      ))}
+      {filtered.map((child) => {
+        const rowKey = storageEntryKey(child, children.indexOf(child));
+        return (
+          <StorageEntryRow
+            key={rowKey}
+            rowKey={rowKey}
+            entry={child}
+            namespace={namespace}
+            protocol={protocol}
+            rootPath={rootPath}
+            backendType={backendType}
+            depth={depth}
+            locale={locale}
+            searchValue={searchValue}
+            onOpenFile={onOpenFile}
+          />
+        );
+      })}
     </>
   );
 };
 
 const StorageEntryRow: React.FC<{
   entry: StorageEntry;
+  rowKey: string;
   namespace: string;
   protocol: string;
   rootPath: string;
@@ -243,6 +259,7 @@ const StorageEntryRow: React.FC<{
   onOpenFile: (info: OpenFileInfo) => void;
 }> = ({
   entry,
+  rowKey,
   namespace,
   protocol,
   rootPath,
@@ -271,7 +288,7 @@ const StorageEntryRow: React.FC<{
     !!entriesByPath
       .get(storagePathKey(namespace, entry.path))
       ?.some((child) =>
-        entryMatchesSearch(child, namespace, searchValue, entriesByPath),
+        entryMatchesSearch(child, { namespace, searchValue, entriesByPath }),
       );
 
   // Folder is shown expanded by manual toggle OR by search auto-expand
@@ -312,7 +329,7 @@ const StorageEntryRow: React.FC<{
           isDir && "font-medium",
         )}
         style={indentStyle(depth)}
-        value={`${namespace}:${entry.path}`}
+        value={`${namespace}:${rowKey}`}
         onSelect={() => {
           if (isDir) {
             setIsExpanded(!effectiveExpanded);
@@ -458,12 +475,11 @@ const StorageNamespaceSection: React.FC<{
 
   // While loading, fall back to initial entries from the namespace notification
   const entries = isPending ? namespace.storageEntries : fetchedEntries;
-  const filtered = filterEntries(
-    entries,
-    namespaceName,
+  const filtered = filterEntries(entries, {
+    namespace: namespaceName,
     searchValue,
     entriesByPath,
-  );
+  });
 
   return (
     <>
@@ -525,20 +541,24 @@ const StorageNamespaceSection: React.FC<{
               No matches
             </div>
           )}
-          {filtered.map((entry) => (
-            <StorageEntryRow
-              key={entry.path}
-              entry={entry}
-              namespace={namespaceName}
-              protocol={namespace.protocol}
-              rootPath={namespace.rootPath}
-              backendType={namespace.backendType}
-              depth={1}
-              locale={locale}
-              searchValue={searchValue}
-              onOpenFile={onOpenFile}
-            />
-          ))}
+          {filtered.map((entry) => {
+            const rowKey = storageEntryKey(entry, entries.indexOf(entry));
+            return (
+              <StorageEntryRow
+                key={rowKey}
+                rowKey={rowKey}
+                entry={entry}
+                namespace={namespaceName}
+                protocol={namespace.protocol}
+                rootPath={namespace.rootPath}
+                backendType={namespace.backendType}
+                depth={1}
+                locale={locale}
+                searchValue={searchValue}
+                onOpenFile={onOpenFile}
+              />
+            );
+          })}
         </>
       )}
     </>

package/src/components/ui/__tests__/use-toast.test.ts

@@ -0,0 +1,75 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { toast, useToast } from "@/components/ui/use-toast";
+
+describe("toast once", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    const { result } = renderHook(() => useToast());
+    act(() => {
+      result.current.dismiss();
+      vi.runAllTimers();
+    });
+    vi.useRealTimers();
+  });
+
+  it("shows a once-toast a single time per session, even after removal", () => {
+    const { result } = renderHook(() => useToast());
+
+    act(() => {
+      toast({ id: "static-notebook", once: true, title: "Static notebook" });
+    });
+    expect(result.current.toasts).toHaveLength(1);
+
+    act(() => {
+      result.current.dismiss("static-notebook");
+      vi.advanceTimersByTime(10_000);
+    });
+    expect(result.current.toasts).toHaveLength(0);
+
+    act(() => {
+      toast({ id: "static-notebook", once: true, title: "Static notebook" });
+    });
+    expect(result.current.toasts).toHaveLength(0);
+  });
+
+  it("does not suppress normal (non-once) toasts", () => {
+    const { result } = renderHook(() => useToast());
+
+    act(() => {
+      toast({ id: "normal", title: "First" });
+    });
+    act(() => {
+      result.current.dismiss("normal");
+      vi.advanceTimersByTime(10_000);
+    });
+    expect(result.current.toasts).toHaveLength(0);
+
+    act(() => {
+      toast({ id: "normal", title: "First" });
+    });
+    expect(result.current.toasts).toHaveLength(1);
+  });
+
+  it("does not dedupe a once-toast without a stable id", () => {
+    const { result } = renderHook(() => useToast());
+
+    act(() => {
+      toast({ once: true, title: "No id" });
+    });
+    act(() => {
+      result.current.dismiss();
+      vi.advanceTimersByTime(10_000);
+    });
+    expect(result.current.toasts).toHaveLength(0);
+
+    act(() => {
+      toast({ once: true, title: "No id" });
+    });
+    expect(result.current.toasts).toHaveLength(1);
+  });
+});

package/src/components/ui/use-toast.ts

@@ -58,6 +58,10 @@ interface State {
 
 const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
 
+// Keys of toasts requested with `once: true`, suppressed after first show
+// for the lifetime of the page (i.e. one static-preview session).
+const shownOnceKeys = new Set<string>();
+
 const addToRemoveQueue = (toastId: string) => {
   if (toastTimeouts.has(toastId)) {
     return;
@@ -159,9 +163,18 @@ function dispatch(action: Action) {
 
 type Toast = Omit<ToasterToast, "id">;
 
-function toast({ id, ...props }: Toast & { id?: string }) {
+function toast({
+  id,
+  once,
+  ...props
+}: Toast & { id?: string; once?: boolean }) {
   const toastId = id || genId();
 
+  // `once` dedupe requires a caller-provided stable `id`. A generated id is
+  // unique per call, so it could never match (and would grow the set without
+  // bound); gate on `id` so `once` without one is simply a no-op.
+  const dedupeOnce = once === true && id !== undefined;
+
   const update = (props: Toast) =>
     dispatch({
       type: "UPDATE_TOAST",
@@ -183,19 +196,26 @@ function toast({ id, ...props }: Toast & { id?: string }) {
       },
     });
 
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id: toastId,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) {
-          dismiss();
-        }
+  const suppressed = dedupeOnce && shownOnceKeys.has(toastId);
+  if (dedupeOnce) {
+    shownOnceKeys.add(toastId);
+  }
+
+  if (!suppressed) {
+    dispatch({
+      type: "ADD_TOAST",
+      toast: {
+        ...props,
+        id: toastId,
+        open: true,
+        onOpenChange: (open) => {
+          if (!open) {
+            dismiss();
+          }
+        },
       },
-    },
-  });
+    });
+  }
 
   return {
     id: toastId,