@marimo-team/islands 0.23.9-dev44 → 0.23.9-dev46

package/package.json

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

package/src/components/editor/cell/code/cell-editor.tsx

@@ -65,6 +65,11 @@ export interface CellEditorProps
   hasOutput?: boolean;
   languageAdapter: LanguageAdapterType | undefined;
   showLanguageToggles?: boolean;
+  /**
+   * Override for the inline "Edit with AI" tooltip. Defaults to the user's
+   * `ai.inline_tooltip` config. Set to `false` to force-disable it.
+   */
+  inlineAiTooltip?: boolean;
   setLanguageAdapter: React.Dispatch<
     React.SetStateAction<LanguageAdapterType | undefined>
   >;
@@ -73,6 +78,12 @@ export interface CellEditorProps
   editorViewParentRef?: React.RefObject<HTMLDivElement | null>;
   showHiddenCode: (opts?: { focus?: boolean }) => void;
   outputArea?: "above" | "below";
+  /**
+   * CSS selector for the element that editor tooltips (completions, hover,
+   * signature help) are appended to. Useful for fullscreen/dialog containers;
+   * defaults to `#App`.
+   */
+  tooltipParentSelector?: string;
 }
 
 const CellEditorInternal = ({
@@ -94,7 +105,9 @@ const CellEditorInternal = ({
   languageAdapter,
   setLanguageAdapter,
   showLanguageToggles = true,
+  inlineAiTooltip,
   outputArea,
+  tooltipParentSelector,
 }: CellEditorProps) => {
   const [aiCompletionCell, setAiCompletionCell] = useAtom(aiCompletionCellAtom);
   const deleteCell = useDeleteCellCallback();
@@ -224,7 +237,9 @@ const CellEditorInternal = ({
       hotkeys: new OverridingHotkeyProvider(userConfig.keymap.overrides ?? {}),
       diagnosticsConfig: userConfig.diagnostics,
       displayConfig: userConfig.display,
-      inlineAiTooltip: userConfig.ai?.inline_tooltip ?? false,
+      inlineAiTooltip:
+        inlineAiTooltip ?? userConfig.ai?.inline_tooltip ?? false,
+      tooltipParentSelector,
     });
 
     extensions.push(
@@ -274,6 +289,8 @@ const CellEditorInternal = ({
     userConfig.display,
     userConfig.diagnostics,
     userConfig.ai?.inline_tooltip,
+    inlineAiTooltip,
+    tooltipParentSelector,
     aiFeaturesEnabled,
     theme,
     showPlaceholder,

package/src/components/editor/renderers/slides-layout/__tests__/compute-slide-cells.test.ts

@@ -26,8 +26,9 @@ const layoutOf = (entries: Array<[string, SlideConfig]>): SlidesLayout => ({
 describe("computeSlideCellsInfo", () => {
   it("returns empty results for empty input", () => {
     const result = computeSlideCellsInfo([], layoutOf([]));
-    expect(result.cellsWithOutput).toEqual([]);
+    expect(result.slideCells).toEqual([]);
     expect(result.skippedIds.size).toBe(0);
+    expect(result.noOutputIds.size).toBe(0);
     expect(result.slideTypes.size).toBe(0);
     expect(result.startCellIndex).toBe(0);
   });
@@ -62,22 +63,26 @@ describe("computeSlideCellsInfo", () => {
     expect(result.startCellIndex).toBe(0);
   });
 
-  it("filters out cells with no output", () => {
+  it("keeps cells with no output for the minimap", () => {
     const result = computeSlideCellsInfo(
       [cell("a"), cell("b", null), cell("c")],
       layoutOf([]),
     );
-    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a", "c"]);
+    expect(result.slideCells.map((c) => c.id)).toEqual(["a", "b", "c"]);
+    expect([...result.noOutputIds]).toEqual(["b"]);
+    expect([...result.skippedIds]).toEqual(["b"]);
   });
 
-  it("filters out cells whose output data is empty string", () => {
+  it("keeps cells whose output data is empty string for the minimap", () => {
     // Mirrors the editor contract: an explicit empty-string payload means the
-    // cell rendered nothing, so it should not occupy a slide.
+    // cell rendered nothing, so it should not occupy a reveal slide.
     const result = computeSlideCellsInfo(
       [cell("a"), cell("b", { data: "" }), cell("c")],
       layoutOf([]),
     );
-    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a", "c"]);
+    expect(result.slideCells.map((c) => c.id)).toEqual(["a", "b", "c"]);
+    expect([...result.noOutputIds]).toEqual(["b"]);
+    expect([...result.skippedIds]).toEqual(["b"]);
   });
 
   it("keeps cells whose output data is a non-empty value (including falsy ones)", () => {
@@ -91,7 +96,8 @@ describe("computeSlideCellsInfo", () => {
       ],
       layoutOf([]),
     );
-    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a", "b", "c"]);
+    expect(result.slideCells.map((c) => c.id)).toEqual(["a", "b", "c"]);
+    expect(result.noOutputIds.size).toBe(0);
   });
 
   it("populates slideTypes only for cells with an explicit type", () => {
@@ -121,14 +127,12 @@ describe("computeSlideCellsInfo", () => {
     expect([...result.skippedIds]).toEqual(["b", "c"]);
     // Skipped cells are still "visible" deck cells — they just aren't rendered
     // in reveal. The minimap relies on the full list plus skippedIds.
-    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a", "b", "c"]);
+    expect(result.slideCells.map((c) => c.id)).toEqual(["a", "b", "c"]);
     expect(result.slideTypes.get(cellId("b"))).toBe("skip");
   });
 
-  it("ignores layout entries for cells that have no output", () => {
-    // If a cell was skipped in the layout but no longer produces output (e.g.
-    // the user deleted its code), it should drop out of both maps — otherwise
-    // the skip set would reference ghosts.
+  it("preserves configured slide types for cells that have no output", () => {
+    // The missing output is transient runtime state, not persisted slide config.
     const result = computeSlideCellsInfo(
       [cell("a"), cell("b", null)],
       layoutOf([
@@ -136,16 +140,25 @@ describe("computeSlideCellsInfo", () => {
         ["b", { type: "skip" }],
       ]),
     );
-    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a"]);
-    expect(result.skippedIds.size).toBe(0);
-    expect(result.slideTypes.has(cellId("b"))).toBe(false);
+    expect(result.slideCells.map((c) => c.id)).toEqual(["a", "b"]);
+    expect([...result.noOutputIds]).toEqual(["b"]);
+    expect([...result.skippedIds]).toEqual(["b"]);
+    expect(result.slideTypes.get(cellId("b"))).toBe("skip");
+  });
+
+  it("skips no-output cells when computing the starting cell", () => {
+    const result = computeSlideCellsInfo(
+      [cell("a", null), cell("b", { data: "" }), cell("c")],
+      layoutOf([]),
+    );
+    expect(result.startCellIndex).toBe(2);
   });
 
-  it("preserves the input order of cells in cellsWithOutput", () => {
+  it("preserves the input order of cells in slideCells", () => {
     const result = computeSlideCellsInfo(
       [cell("c"), cell("a"), cell("b")],
       layoutOf([]),
     );
-    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["c", "a", "b"]);
+    expect(result.slideCells.map((c) => c.id)).toEqual(["c", "a", "b"]);
   });
 });

package/src/components/editor/renderers/slides-layout/compute-slide-cells.ts

@@ -9,32 +9,40 @@ export interface SlideCellLike {
 }
 
 export interface SlideCellsInfo<T extends SlideCellLike> {
-  cellsWithOutput: T[];
+  slideCells: T[];
   skippedIds: Set<CellId>;
+  noOutputIds: Set<CellId>;
   slideTypes: Map<CellId, SlideType>;
-  // Index of the first cell in `cellsWithOutput` that is not skipped
+  // Index of the first cell in `slideCells` that is not effectively skipped.
   startCellIndex: number;
 }
 
+export function hasRenderableOutput(cell: SlideCellLike): boolean {
+  return cell.output != null && cell.output.data !== "";
+}
+
 export function computeSlideCellsInfo<T extends SlideCellLike>(
   cells: readonly T[],
   layout: Pick<SlidesLayout, "cells">,
 ): SlideCellsInfo<T> {
-  const cellsWithOutput = cells.filter(
-    (cell) => cell.output != null && cell.output.data !== "",
-  );
+  const slideCells = [...cells];
   const skippedIds = new Set<CellId>();
+  const noOutputIds = new Set<CellId>();
   const slideTypes = new Map<CellId, SlideType>();
 
   let startCell: T | null = null;
   let startCellIndex = 0;
 
-  for (const [index, cell] of cellsWithOutput.entries()) {
+  for (const [index, cell] of slideCells.entries()) {
     const type = layout.cells.get(cell.id)?.type;
+    const hasOutput = hasRenderableOutput(cell);
     if (type) {
       slideTypes.set(cell.id, type);
     }
-    if (type === "skip") {
+    if (!hasOutput) {
+      noOutputIds.add(cell.id);
+    }
+    if (type === "skip" || !hasOutput) {
       skippedIds.add(cell.id);
     } else if (startCell === null) {
       startCell = cell;
@@ -42,8 +50,9 @@ export function computeSlideCellsInfo<T extends SlideCellLike>(
     }
   }
   return {
-    cellsWithOutput,
+    slideCells,
     skippedIds,
+    noOutputIds,
     slideTypes,
     startCellIndex,
   };

package/src/components/editor/renderers/slides-layout/slides-layout.tsx

@@ -30,19 +30,17 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   const isMultiColumn = numColumns > 1;
   const [activeCellId, setActiveCellId] = useState<CellId | null>(null);
 
-  const { cellsWithOutput, skippedIds, slideTypes, startCellIndex } = useMemo(
-    () => computeSlideCellsInfo(cells, layout),
-    [cells, layout],
-  );
+  const { slideCells, skippedIds, noOutputIds, slideTypes, startCellIndex } =
+    useMemo(() => computeSlideCellsInfo(cells, layout), [cells, layout]);
 
   const activeSlideIndex = activeCellId
-    ? cellsWithOutput.findIndex((c) => c.id === activeCellId)
+    ? slideCells.findIndex((c) => c.id === activeCellId)
     : startCellIndex;
   const resolvedIndex =
     activeSlideIndex === -1 ? startCellIndex : activeSlideIndex;
 
   const handleSlideChange = useEvent((index: number) => {
-    const cell = cellsWithOutput[index];
+    const cell = slideCells[index];
     if (cell) {
       setActiveCellId(cell.id);
     }
@@ -50,9 +48,10 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
 
   const slides = (
     <LazySlidesComponent
-      cellsWithOutput={cellsWithOutput}
+      slideCells={slideCells}
       layout={layout}
       setLayout={setLayout}
+      noOutputIds={noOutputIds}
       activeIndex={resolvedIndex}
       onSlideChange={handleSlideChange}
       configWidth={280}
@@ -85,13 +84,12 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   return (
     <div className="flex-1 pr-18 pb-2 flex flex-row gap-2 min-h-0">
       <SlidesMinimap
-        cells={cellsWithOutput}
+        cells={slideCells}
         thumbnailWidth={220}
         canReorder={!isMultiColumn}
-        activeCellId={
-          activeCellId ?? cellsWithOutput[startCellIndex]?.id ?? null
-        }
+        activeCellId={activeCellId ?? slideCells[startCellIndex]?.id ?? null}
         skippedIds={skippedIds}
+        noOutputIds={noOutputIds}
         slideTypes={slideTypes}
         onSlideClick={handleSlideChange}
       />

package/src/components/slides/minimap.tsx

@@ -66,6 +66,7 @@ interface SlideThumbnailCardProps extends React.HTMLAttributes<HTMLDivElement> {
   isActiveDragSource?: boolean;
   isOverlay?: boolean;
   isVisible?: boolean;
+  isNoOutput?: boolean;
   slideType?: SlideType;
   ref?: React.Ref<HTMLDivElement>;
 }
@@ -77,6 +78,7 @@ interface SlideThumbnailRowProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   dropIndicator?: DropPosition | null;
   isActiveDragSource?: boolean;
   isVisible?: boolean;
+  isNoOutput?: boolean;
   slideType?: SlideType;
   ref?: React.Ref<HTMLButtonElement>;
 }
@@ -86,15 +88,23 @@ interface SlidesMinimapProps {
   thumbnailWidth: number;
   canReorder: boolean;
   activeCellId: CellId | null;
-  // Set of cell ids that are marked `skip` in the slides layout.
+  // Set of cell ids that should be visually treated like skipped entries.
   skippedIds?: ReadonlySet<CellId>;
+  // Set of cell ids that currently have no rendered output.
+  noOutputIds?: ReadonlySet<CellId>;
   slideTypes?: ReadonlyMap<CellId, SlideType>;
   onSlideClick: (index: number) => void;
 }
 
+interface ThumbnailVisual {
+  label: string;
+  description: string;
+  Icon?: LucideIcon;
+}
+
 function getSlideTypeVisual(
   slideType: SlideType | undefined,
-): { label: string; description: string; Icon: LucideIcon } | null {
+): ThumbnailVisual | null {
   if (!slideType || slideType === "slide") {
     return null;
   }
@@ -102,8 +112,13 @@ function getSlideTypeVisual(
   return { label, description, Icon };
 }
 
+const NO_OUTPUT_VISUAL: ThumbnailVisual = {
+  label: "No output",
+  description: "Hidden because this cell has no output.",
+};
+
 const SLIDE_ASPECT_RATIO = 16 / 9;
-const SLIDE_BASE_WIDTH = 960;
+const SLIDE_BASE_WIDTH = 520;
 
 function computeThumbnailDimensions(width: number): ThumbnailDimensions {
   return {
@@ -196,6 +211,7 @@ export const SlidesMinimap = ({
   canReorder,
   activeCellId,
   skippedIds,
+  noOutputIds,
   slideTypes,
   onSlideClick,
 }: SlidesMinimapProps) => {
@@ -288,6 +304,7 @@ export const SlidesMinimap = ({
             dimensions={dimensions}
             isActiveSlide={cell.id === activeCellId}
             isVisible={visibleIds.has(cell.id)}
+            isNoOutput={noOutputIds?.has(cell.id)}
             slideType={resolveSlideType({
               cellId: cell.id,
               slideTypes,
@@ -325,6 +342,7 @@ export const SlidesMinimap = ({
               isActive={activeId === cell.id}
               isActiveSlide={cell.id === activeCellId}
               isVisible={visibleIds.has(cell.id)}
+              isNoOutput={noOutputIds?.has(cell.id)}
               slideType={resolveSlideType({
                 cellId: cell.id,
                 slideTypes,
@@ -347,6 +365,7 @@ export const SlidesMinimap = ({
             dimensions={dimensions}
             isOverlay={true}
             isActiveDragSource={true}
+            isNoOutput={noOutputIds?.has(activeCell.id)}
           />
         )}
       </DragOverlay>
@@ -378,6 +397,7 @@ interface SortableSlideThumbnailProps {
   isActive: boolean;
   isActiveSlide?: boolean;
   isVisible?: boolean;
+  isNoOutput?: boolean;
   slideType?: SlideType;
   onClick?: () => void;
 }
@@ -389,6 +409,7 @@ const SortableSlideThumbnail = ({
   isActive,
   isActiveSlide,
   isVisible,
+  isNoOutput,
   slideType,
   onClick,
 }: SortableSlideThumbnailProps) => {
@@ -405,6 +426,7 @@ const SortableSlideThumbnail = ({
       isActiveDragSource={isActive}
       isActiveSlide={isActiveSlide}
       isVisible={isVisible}
+      isNoOutput={isNoOutput}
       slideType={slideType}
       onClick={onClick}
       {...attributes}
@@ -422,6 +444,7 @@ const SlideThumbnailRow = ({
   isActiveSlide = false,
   isActiveDragSource = false,
   isVisible,
+  isNoOutput,
   slideType,
   onClick,
   ref,
@@ -462,6 +485,7 @@ const SlideThumbnailRow = ({
         isActiveSlide={isActiveSlide}
         isActiveDragSource={isActiveDragSource}
         isVisible={isVisible}
+        isNoOutput={isNoOutput}
         slideType={slideType}
       />
     </button>
@@ -477,13 +501,14 @@ const SlideThumbnailCard = ({
   isActiveDragSource = false,
   isOverlay = false,
   isVisible = false,
+  isNoOutput = false,
   slideType,
   ref,
   ...props
 }: SlideThumbnailCardProps) => {
   const { width, height, scale } = dimensions;
-  const visual = getSlideTypeVisual(slideType);
-  const isSkipped = slideType === "skip";
+  const visual = isNoOutput ? NO_OUTPUT_VISUAL : getSlideTypeVisual(slideType);
+  const isSkipped = isNoOutput || slideType === "skip";
 
   const outerStyle: React.CSSProperties = {
     width,
@@ -525,16 +550,20 @@ const SlideThumbnailCard = ({
             height: height / scale,
           }}
         >
-          <Slide cellId={cell.id} status={cell.status} output={cell.output} />
+          {isNoOutput ? (
+            <MiniCodePreview code={cell.code} />
+          ) : (
+            <Slide cellId={cell.id} status={cell.status} output={cell.output} />
+          )}
         </div>
       )}
       {isSkipped && (
         <div
-          className="absolute inset-0 bg-muted/60 pointer-events-none"
+          className="absolute inset-0 bg-muted/50 pointer-events-none"
           aria-hidden={true}
         />
       )}
-      {visual && (
+      {visual?.Icon && (
         <Tooltip
           content={
             <span className="text-xs opacity-80">{visual.description}</span>
@@ -550,7 +579,6 @@ const SlideThumbnailCard = ({
             aria-label={visual.label}
           >
             <visual.Icon className="h-3.5 w-3.5" />
-            {/* <span>{visual.label}</span> */}
           </span>
         </Tooltip>
       )}
@@ -558,6 +586,14 @@ const SlideThumbnailCard = ({
   );
 };
 
+const MiniCodePreview = ({ code }: { code: string }) => {
+  return (
+    <pre className="my-auto w-full overflow-hidden whitespace-pre-wrap wrap-break-word text-lg">
+      {code}
+    </pre>
+  );
+};
+
 function projectDropTarget(
   event: DragMoveEvent | DragOverEvent,
 ): ProjectedDropTarget | null {

package/src/components/slides/reveal-component.tsx

@@ -221,22 +221,50 @@ const SubslideView = ({
   );
 };
 
+const ParkedPreviewContent = ({
+  cell,
+  isNoOutputPreview,
+  isEditable,
+  codeShown,
+}: {
+  cell: RuntimeCell;
+  isNoOutputPreview: boolean;
+  isEditable: boolean;
+  codeShown: boolean;
+}) => {
+  if (isNoOutputPreview && isEditable) {
+    return <SlideCellView cell={cell} />;
+  }
+  if (isNoOutputPreview && codeShown) {
+    return <SlideCellReadOnlyView cell={cell} />;
+  }
+  return (
+    <CellOutputSlide
+      cellId={cell.id}
+      status={cell.status}
+      output={cell.output}
+    />
+  );
+};
+
 // There is an upstream react bug in dev mode (https://github.com/facebook/react/issues/34840)
 // Uncaught SecurityError: Failed to read a named property '$$typeof' from 'Window'
 // Happens with cells containing iframes / external content
 const RevealSlidesComponent = ({
-  cellsWithOutput,
+  slideCells,
   layout,
   setLayout,
+  noOutputIds,
   activeIndex,
   onSlideChange,
   mode,
   configWidth, // px
   isEditable = false,
 }: {
-  cellsWithOutput: RuntimeCell[];
+  slideCells: RuntimeCell[];
   layout: SlidesLayout;
   setLayout: (layout: SlidesLayout) => void;
+  noOutputIds: ReadonlySet<CellId>;
   activeIndex?: number;
   onSlideChange?: (index: number) => void;
   mode: AppMode;
@@ -255,42 +283,46 @@ const RevealSlidesComponent = ({
   );
 
   const [showCode, setShowCode] = useState(false);
-  const codeAvailable = useNotebookCodeAvailable(cellsWithOutput);
+  const codeAvailable = useNotebookCodeAvailable(slideCells);
   const codeToggleEnabled = !isIslands() && codeAvailable;
   const codeShown = codeToggleEnabled && showCode;
 
-  const activeCell =
-    activeIndex != null ? cellsWithOutput[activeIndex] : undefined;
+  const activeCell = activeIndex != null ? slideCells[activeIndex] : undefined;
   // Fall back to the first cell while the deck settles on an initial slide.
   // Still `undefined` when the deck is empty (handled below).
-  const activeConfigCell = activeCell ?? cellsWithOutput.at(0);
+  const activeConfigCell = activeCell ?? slideCells.at(0);
 
   const composition = useMemo(
     () =>
       composeSlides({
-        cells: cellsWithOutput,
+        cells: slideCells,
         getType: (cell) =>
-          layout.cells.get(cell.id)?.type ?? DEFAULT_SLIDE_TYPE,
+          noOutputIds.has(cell.id)
+            ? "skip"
+            : (layout.cells.get(cell.id)?.type ?? DEFAULT_SLIDE_TYPE),
       }),
-    [cellsWithOutput, layout.cells],
+    [slideCells, noOutputIds, layout.cells],
   );
 
-  // Skip cells aren't part of the composed deck. When one is selected in the
-  // minimap we render a preview over the deck and park reveal on a neighboring
-  // real slide; keyboard nav while parked is handled below.
-  const skippedPreviewCell =
-    activeCell && layout.cells.get(activeCell.id)?.type === "skip"
-      ? activeCell
-      : null;
+  // Skipped and output-less cells aren't part of the composed deck. When one is
+  // selected in the minimap we render a preview over the deck and park reveal on
+  // a neighboring real slide; keyboard nav while parked is handled below.
+  const activeCellSlideType = activeCell
+    ? layout.cells.get(activeCell.id)?.type
+    : undefined;
+  const isNoOutputPreview =
+    activeCell != null && noOutputIds.has(activeCell.id);
+  const isParkedPreview = activeCellSlideType === "skip" || isNoOutputPreview;
+  const parkedPreviewCell = isParkedPreview ? activeCell : null;
 
   const { cellToTarget, targetToCellIndex } = useMemo(
     () =>
       buildSlideIndices({
         composition,
-        cells: cellsWithOutput,
+        cells: slideCells,
         getId: (c) => c.id,
       }),
-    [composition, cellsWithOutput],
+    [composition, slideCells],
   );
 
   const deckTransition = layout.deck?.transition ?? DEFAULT_DECK_TRANSITION;
@@ -322,7 +354,7 @@ const RevealSlidesComponent = ({
   const navigateDeckToActiveCell = useEvent((deck: RevealApi) => {
     const target = resolveDeckNavigationTarget({
       activeIndex,
-      cells: cellsWithOutput,
+      cells: slideCells,
       cellToTarget,
       getId: (cell) => cell.id,
     });
@@ -340,7 +372,7 @@ const RevealSlidesComponent = ({
       return;
     }
     navigateDeckToActiveCell(deck);
-  }, [activeIndex, cellToTarget, cellsWithOutput, navigateDeckToActiveCell]);
+  }, [activeIndex, cellToTarget, slideCells, navigateDeckToActiveCell]);
 
   // Toggling code (re)mounts a CodeMirror editor on the active slide. Defer
   // the state update so the button/keypress paints first and the heavier mount
@@ -380,12 +412,12 @@ const RevealSlidesComponent = ({
     return { h: target.h, v: target.v };
   }, [activeCell, cellToTarget]);
 
-  // Forward the deck's current cell to the parent, except while a skipped
+  // Forward the deck's current cell to the parent, except while a parked
   // preview is parked: every reveal.js event during that window is an echo
   // of the programmatic park (possibly with transient indices), so ignoring
-  // them keeps `activeCellId` pinned on the skipped cell.
+  // them keeps `activeCellId` pinned on the minimap cell.
   const reportCurrentCell = useEvent(() => {
-    if (skippedPreviewCell != null) {
+    if (parkedPreviewCell != null) {
       return;
     }
     const deck = deckRef.current;
@@ -401,10 +433,10 @@ const RevealSlidesComponent = ({
     }
   });
 
-  // While parked on a skipped preview, step through minimap order instead of
+  // While parked on a preview, step through minimap order instead of
   // letting reveal.js advance from the parked slide the user can't see.
   const handleParkedNavKey = useEvent((event: KeyboardEvent) => {
-    if (!skippedPreviewCell || activeIndex == null) {
+    if (!parkedPreviewCell || activeIndex == null) {
       return;
     }
     if (Events.fromInput(event)) {
@@ -418,7 +450,7 @@ const RevealSlidesComponent = ({
     event.preventDefault();
     event.stopPropagation();
     const nextIndex = activeIndex + direction;
-    if (nextIndex < 0 || nextIndex >= cellsWithOutput.length) {
+    if (nextIndex < 0 || nextIndex >= slideCells.length) {
       return;
     }
     onSlideChange?.(nextIndex);
@@ -431,6 +463,10 @@ const RevealSlidesComponent = ({
 
   useEventListener(document, "keydown", handleParkedNavKey, { capture: true });
 
+  const parkedPreviewLabel = isNoOutputPreview
+    ? "Hidden as there is no output"
+    : "Skipped in presentation";
+
   const slideArea = (
     <div
       ref={containerRef}
@@ -480,21 +516,30 @@ const RevealSlidesComponent = ({
             );
           })}
         </Deck>
-        {skippedPreviewCell && (
+        {parkedPreviewCell && (
           <div
+            key={parkedPreviewCell.id}
             className="absolute inset-0 z-10 border rounded bg-background flex flex-col overflow-hidden"
-            aria-label="Skipped in presentation"
+            aria-label={parkedPreviewLabel}
           >
             <div className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-muted-foreground border-b bg-muted/40">
               <EyeOffIcon className="h-3.5 w-3.5" />
-              <span>Skipped in presentation</span>
+              <span>{parkedPreviewLabel}</span>
             </div>
             <div className="flex-1 overflow-auto flex">
-              <div className="mo-slide-content" style={{ margin: "auto 20px" }}>
-                <CellOutputSlide
-                  cellId={skippedPreviewCell.id}
-                  status={skippedPreviewCell.status}
-                  output={skippedPreviewCell.output}
+              <div
+                className={
+                  isNoOutputPreview && (isEditable || codeShown)
+                    ? "mo-slide-content flex flex-col gap-3"
+                    : "mo-slide-content"
+                }
+                style={{ margin: "auto 20px" }}
+              >
+                <ParkedPreviewContent
+                  cell={parkedPreviewCell}
+                  isNoOutputPreview={isNoOutputPreview}
+                  isEditable={isEditable}
+                  codeShown={codeShown}
                 />
               </div>
             </div>