@marimo-team/islands 0.23.5-dev5 → 0.23.5-dev7

package/package.json

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

package/src/components/editor/file-tree/file-explorer.tsx

@@ -523,7 +523,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
           iconClassName="w-5 h-5"
         >
           {!node.data.isDirectory && (
-            <DropdownMenuItem onSelect={() => node.select()}>
+            <DropdownMenuItem
+              onSelect={() => node.select()}
+              data-testid="file-explorer-open-file-menu-item"
+            >
               <ViewIcon className={MENU_ITEM_ICON_CLASS} />
               Open file
             </DropdownMenuItem>
@@ -533,6 +536,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
               onSelect={() => {
                 openFile({ path: node.data.path });
               }}
+              data-testid="file-explorer-open-external-menu-item"
             >
               <ExternalLinkIcon className={MENU_ITEM_ICON_CLASS} />
               Open file in external editor
@@ -540,28 +544,44 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
           )}
           {node.data.isDirectory && (
             <>
-              <DropdownMenuItem onSelect={() => handleCreateNotebook()}>
+              <DropdownMenuItem
+                onSelect={() => handleCreateNotebook()}
+                data-testid="file-explorer-create-notebook-menu-item"
+              >
                 <MarimoPlusIcon className={MENU_ITEM_ICON_CLASS} />
                 Create notebook
               </DropdownMenuItem>
-              <DropdownMenuItem onSelect={() => handleCreateFile()}>
+              <DropdownMenuItem
+                onSelect={() => handleCreateFile()}
+                data-testid="file-explorer-create-file-menu-item"
+              >
                 <FilePlus2Icon className={MENU_ITEM_ICON_CLASS} />
                 Create file
               </DropdownMenuItem>
-              <DropdownMenuItem onSelect={() => handleCreateFolder()}>
+              <DropdownMenuItem
+                onSelect={() => handleCreateFolder()}
+                data-testid="file-explorer-create-folder-menu-item"
+              >
                 <FolderPlusIcon className={MENU_ITEM_ICON_CLASS} />
                 Create folder
               </DropdownMenuItem>
               <DropdownMenuSeparator />
             </>
           )}
-          <RenameMenuItem onSelect={() => node.edit()} />
-          <DuplicateMenuItem onSelect={handleDuplicate} />
+          <RenameMenuItem
+            onSelect={() => node.edit()}
+            testId="file-explorer-rename-menu-item"
+          />
+          <DuplicateMenuItem
+            onSelect={handleDuplicate}
+            testId="file-explorer-duplicate-menu-item"
+          />
           <DropdownMenuItem
             onSelect={async () => {
               await copyToClipboard(node.data.path);
               toast({ title: "Copied to clipboard" });
             }}
+            data-testid="file-explorer-copy-path-menu-item"
           >
             <ListTreeIcon className={MENU_ITEM_ICON_CLASS} />
             Copy path
@@ -574,6 +594,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
                 );
                 toast({ title: "Copied to clipboard" });
               }}
+              data-testid="file-explorer-copy-relative-path-menu-item"
             >
               <ListTreeIcon className={MENU_ITEM_ICON_CLASS} />
               Copy relative path
@@ -586,6 +607,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
               const pythonCode = PYTHON_CODE_FOR_FILE_TYPE[fileType](path);
               handleInsertCode(pythonCode);
             }}
+            data-testid="file-explorer-insert-snippet-menu-item"
           >
             <BetweenHorizontalStartIcon className={MENU_ITEM_ICON_CLASS} />
             Insert snippet for reading file
@@ -601,6 +623,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
               const pythonCode = PYTHON_CODE_FOR_FILE_TYPE[fileType](path);
               await copyToClipboard(pythonCode);
             }}
+            data-testid="file-explorer-copy-snippet-menu-item"
           >
             <BracesIcon className={MENU_ITEM_ICON_CLASS} />
             Copy snippet for reading file
@@ -608,7 +631,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
           {node.data.isMarimoFile && !isWasm() && (
             <>
               <DropdownMenuSeparator />
-              <DropdownMenuItem onSelect={handleOpenMarimoFile}>
+              <DropdownMenuItem
+                onSelect={handleOpenMarimoFile}
+                data-testid="file-explorer-open-notebook-menu-item"
+              >
                 <PlaySquareIcon className={MENU_ITEM_ICON_CLASS} />
                 Open notebook
               </DropdownMenuItem>
@@ -637,6 +663,7 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
                     );
                   }
                 }}
+                data-testid="file-explorer-download-menu-item"
               >
                 <DownloadIcon className={MENU_ITEM_ICON_CLASS} />
                 Download
@@ -644,7 +671,10 @@ const Node = ({ node, style, dragHandle }: NodeRendererProps<FileInfo>) => {
               <DropdownMenuSeparator />
             </>
           )}
-          <DeleteMenuItem onSelect={handleDeleteFile} />
+          <DeleteMenuItem
+            onSelect={handleDeleteFile}
+            testId="file-explorer-delete-menu-item"
+          />
         </FileActionsDropdown>
       </span>
     </div>

package/src/components/editor/file-tree/file-operations.tsx

@@ -219,12 +219,19 @@ export const RenameMenuItem = ({
   onSelect,
   disabled,
   title,
+  testId,
 }: {
   onSelect: (evt: Event) => void;
   disabled?: boolean;
   title?: string;
+  testId?: string;
 }) => (
-  <DropdownMenuItem onSelect={onSelect} disabled={disabled} title={title}>
+  <DropdownMenuItem
+    onSelect={onSelect}
+    disabled={disabled}
+    title={title}
+    data-testid={testId}
+  >
     <Edit3Icon className={MENU_ITEM_ICON_CLASS} />
     Rename
   </DropdownMenuItem>
@@ -234,12 +241,19 @@ export const DuplicateMenuItem = ({
   onSelect,
   disabled,
   title,
+  testId,
 }: {
   onSelect: (evt: Event) => void;
   disabled?: boolean;
   title?: string;
+  testId?: string;
 }) => (
-  <DropdownMenuItem onSelect={onSelect} disabled={disabled} title={title}>
+  <DropdownMenuItem
+    onSelect={onSelect}
+    disabled={disabled}
+    title={title}
+    data-testid={testId}
+  >
     <CopyIcon className={MENU_ITEM_ICON_CLASS} />
     Duplicate
   </DropdownMenuItem>
@@ -249,16 +263,19 @@ export const DeleteMenuItem = ({
   onSelect,
   disabled,
   title,
+  testId,
 }: {
   onSelect: (evt: Event) => void;
   disabled?: boolean;
   title?: string;
+  testId?: string;
 }) => (
   <DropdownMenuItem
     onSelect={onSelect}
     variant="danger"
     disabled={disabled}
     title={title}
+    data-testid={testId}
   >
     <Trash2Icon className={MENU_ITEM_ICON_CLASS} />
     Delete

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

@@ -48,7 +48,11 @@ import {
   useCellRuntime,
 } from "../../core/cells/cells";
 import { type CellId, SETUP_CELL_ID } from "../../core/cells/ids";
-import { isUninstantiated } from "../../core/cells/utils";
+import {
+  cellNeedsRun,
+  cellStatusClasses,
+  isUninstantiated,
+} from "../../core/cells/utils";
 import type { UserConfig } from "../../core/config/config-schema";
 import { isAppInteractionDisabled } from "../../core/websocket/connection-utils";
 import { useCellRenderCount } from "../../hooks/useCellRenderCount";
@@ -390,9 +394,6 @@ const EditableCellComponent = ({
 
   const [languageAdapter, setLanguageAdapter] = useState<LanguageAdapterType>();
 
-  const disabledOrAncestorDisabled =
-    cellData.config.disabled || cellRuntime.status === "disabled-transitively";
-
   const uninstantiated = isUninstantiated({
     executionTime: cellRuntime.runElapsedTimeMs ?? cellData.lastExecutionTime,
     status: cellRuntime.status,
@@ -401,10 +402,13 @@ const EditableCellComponent = ({
     stopped: cellRuntime.stopped,
   });
 
-  const needsRun =
-    cellData.edited ||
-    cellRuntime.interrupted ||
-    (cellRuntime.staleInputs && !disabledOrAncestorDisabled);
+  const needsRun = cellNeedsRun({
+    edited: cellData.edited,
+    interrupted: cellRuntime.interrupted,
+    staleInputs: cellRuntime.staleInputs,
+    disabled: cellData.config.disabled,
+    status: cellRuntime.status,
+  });
 
   const loading = outputIsLoading(cellRuntime.status);
 
@@ -532,11 +536,13 @@ const EditableCellComponent = ({
 
   const className = clsx("marimo-cell", "hover-actions-parent z-10", {
     interactive: true,
-    "needs-run": needsRun,
-    "has-error": cellRuntime.errored,
-    stopped: cellRuntime.stopped,
-    disabled: cellData.config.disabled,
-    stale: cellRuntime.status === "disabled-transitively",
+    ...cellStatusClasses({
+      needsRun,
+      errored: cellRuntime.errored,
+      stopped: cellRuntime.stopped,
+      disabled: cellData.config.disabled,
+      status: cellRuntime.status,
+    }),
     borderless:
       isMarkdownCodeHidden && hasOutput && !navigationProps["data-selected"],
   });
@@ -979,9 +985,6 @@ const SetupCellComponent = ({
   const setAiCompletionCell = useSetAtom(aiCompletionCellAtom);
   const runCell = useRunCell(cellId);
 
-  const disabledOrAncestorDisabled =
-    cellData.config.disabled || cellRuntime.status === "disabled-transitively";
-
   const uninstantiated = isUninstantiated({
     executionTime: cellRuntime.runElapsedTimeMs ?? cellData.lastExecutionTime,
     status: cellRuntime.status,
@@ -990,10 +993,13 @@ const SetupCellComponent = ({
     stopped: cellRuntime.stopped,
   });
 
-  const needsRun =
-    cellData.edited ||
-    cellRuntime.interrupted ||
-    (cellRuntime.staleInputs && !disabledOrAncestorDisabled);
+  const needsRun = cellNeedsRun({
+    edited: cellData.edited,
+    interrupted: cellRuntime.interrupted,
+    staleInputs: cellRuntime.staleInputs,
+    disabled: cellData.config.disabled,
+    status: cellRuntime.status,
+  });
   const loading =
     cellRuntime.status === "running" || cellRuntime.status === "queued";
 
@@ -1034,9 +1040,13 @@ const SetupCellComponent = ({
 
   const className = clsx("marimo-cell", "hover-actions-parent z-10", {
     interactive: true,
-    "needs-run": needsRun,
-    "has-error": cellRuntime.errored,
-    stopped: cellRuntime.stopped,
+    ...cellStatusClasses({
+      needsRun,
+      errored: cellRuntime.errored,
+      stopped: cellRuntime.stopped,
+      disabled: cellData.config.disabled,
+      status: cellRuntime.status,
+    }),
   });
 
   const handleRefactorWithAI: OnRefactorWithAI = useEvent(

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

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import React, { useMemo, useRef, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { useAtomValue } from "jotai";
 import { numColumnsAtom } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
@@ -8,7 +8,6 @@ import type { SlidesLayout } from "./types";
 import { computeSlideCellsInfo } from "./compute-slide-cells";
 import { SlidesMinimap } from "@/components/slides/minimap";
 import useEvent from "react-use-event-hook";
-import type { RevealApi } from "reveal.js";
 
 type Props = ICellRendererProps<SlidesLayout>;
 
@@ -26,7 +25,6 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   const numColumns = useAtomValue(numColumnsAtom);
   const isMultiColumn = numColumns > 1;
   const [activeCellId, setActiveCellId] = useState<CellId | null>(null);
-  const deckRef = useRef<RevealApi | null>(null);
 
   const { cellsWithOutput, skippedIds, slideTypes, startCellIndex } = useMemo(
     () => computeSlideCellsInfo(cells, layout),
@@ -53,9 +51,9 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
       setLayout={setLayout}
       activeIndex={resolvedIndex}
       onSlideChange={handleSlideChange}
-      deckRef={deckRef}
-      configWidth={250}
+      configWidth={300}
       mode={mode}
+      isEditable={mode !== "read"}
     />
   );
 

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

@@ -34,6 +34,7 @@ import { useResolvedMarimoConfig } from "@/core/config/config";
 import { CSSClasses, KnownQueryParams } from "@/core/constants";
 import type { MarimoError, OutputMessage } from "@/core/kernel/messages";
 import { kernelStateAtom } from "@/core/kernel/state";
+import { useNotebookCodeAvailable } from "@/core/meta/code-visibility";
 import { showCodeInRunModeAtom } from "@/core/meta/state";
 import { isErrorMime } from "@/core/mime";
 import { type AppMode, kioskModeAtom } from "@/core/mode";
@@ -83,23 +84,7 @@ const VerticalLayoutRenderer: React.FC<VerticalLayoutProps> = ({
       : showCodeByQueryParam === "true";
   });
 
-  const evaluateCanShowCode = () => {
-    const cellsHaveCode = cells.some((cell) => Boolean(cell.code));
-
-    if (kioskMode) {
-      return true;
-    }
-
-    // Only show code if in read mode and there is at least one cell with code
-
-    // If it is a static-notebook or wasm-read-only-notebook, code is always included,
-    // but it can be turned it off via a query parameter (include-code=false)
-
-    const includeCode = urlParams.get(KnownQueryParams.includeCode);
-    return mode === "read" && includeCode !== "false" && cellsHaveCode;
-  };
-
-  const canShowCode = evaluateCanShowCode();
+  const canShowCode = useNotebookCodeAvailable(cells);
 
   const renderCell = (cell: CellRuntimeState & CellData) => {
     return (

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

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import {
+  startTransition,
   useEffect,
   useMemo,
   useRef,
@@ -8,7 +9,7 @@ import {
   Fragment as ReactFragment,
 } from "react";
 import useEvent from "react-use-event-hook";
-import { ExpandIcon, EyeOffIcon } from "lucide-react";
+import { CodeIcon, ExpandIcon, EyeOffIcon } from "lucide-react";
 import { Deck, Fragment, Slide, Stack } from "@revealjs/react";
 import { Slide as CellOutputSlide } from "@/components/slides/slide";
 import { Button } from "@/components/ui/button";
@@ -34,6 +35,13 @@ import {
   DEFAULT_SLIDE_TYPE,
   SlideSidebar,
 } from "./slide-form";
+import {
+  SlideCellReadOnlyView,
+  SlideCellView,
+} from "@/components/slides/slide-cell-view";
+import { cn } from "@/utils/cn";
+import { isIslands } from "@/core/islands/utils";
+import { useNotebookCodeAvailable } from "@/core/meta/code-visibility";
 import type { AppMode } from "@/core/mode";
 
 const ASPECT_RATIO = 16 / 9;
@@ -118,21 +126,41 @@ function triggerResize(deck: RevealApi | null) {
 
 const SubslideView = ({
   subslide,
+  showCode,
+  isEditable,
 }: {
   subslide: ComposedSubslide<RuntimeCell>;
+  showCode: boolean;
+  isEditable: boolean;
 }) => (
   <Slide>
     <div className="h-full w-full overflow-auto flex">
-      <div className="mo-slide-content" style={{ margin: "auto 20px" }}>
+      <div
+        className={
+          showCode ? "mo-slide-content flex flex-col gap-3" : "mo-slide-content"
+        }
+        style={{
+          margin: "auto 20px",
+        }}
+      >
         {subslide.blocks.map((block, i) => {
-          const rendered = block.cells.map((cell) => (
-            <CellOutputSlide
-              key={cell.id}
-              cellId={cell.id}
-              status={cell.status}
-              output={cell.output}
-            />
-          ));
+          const rendered = block.cells.map((cell) => {
+            if (!showCode) {
+              return (
+                <CellOutputSlide
+                  key={cell.id}
+                  cellId={cell.id}
+                  status={cell.status}
+                  output={cell.output}
+                />
+              );
+            }
+            return isEditable ? (
+              <SlideCellView key={cell.id} cell={cell} />
+            ) : (
+              <SlideCellReadOnlyView key={cell.id} cell={cell} />
+            );
+          });
           if (block.isFragment) {
             return (
               <Fragment key={i} as="div">
@@ -147,27 +175,37 @@ const SubslideView = ({
   </Slide>
 );
 
+// 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,
   layout,
   setLayout,
   activeIndex,
   onSlideChange,
-  deckRef,
   mode,
   configWidth = 300, // px
+  isEditable = false,
 }: {
   cellsWithOutput: RuntimeCell[];
   layout: SlidesLayout;
   setLayout: (layout: SlidesLayout) => void;
   activeIndex?: number;
   onSlideChange?: (index: number) => void;
-  deckRef: React.RefObject<RevealApi | null>;
   mode: AppMode;
   configWidth?: number;
+  isEditable?: boolean;
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
+  const deckRef = useRef<RevealApi | null>(null);
   const { width, height } = useSlideDimensions(containerRef);
+
+  const [showCode, setShowCode] = useState(false);
+  const codeAvailable = useNotebookCodeAvailable(cellsWithOutput);
+  const codeToggleEnabled = !isIslands() && codeAvailable;
+  const codeShown = codeToggleEnabled && showCode;
+
   const activeCell =
     activeIndex != null ? cellsWithOutput[activeIndex] : undefined;
   // Fall back to the first cell while the deck settles on an initial slide.
@@ -217,11 +255,7 @@ const RevealSlidesComponent = ({
     [width, height, deckTransition],
   );
 
-  useEffect(() => {
-    const deck = deckRef.current;
-    if (deck == null) {
-      return;
-    }
+  const navigateDeckToActiveCell = useEvent((deck: RevealApi) => {
     const target = resolveDeckNavigationTarget({
       activeIndex,
       cells: cellsWithOutput,
@@ -234,7 +268,43 @@ const RevealSlidesComponent = ({
     }
     deck.slide(next.h, next.v, next.f);
     clearPreviousVerticalIndices(deck);
-  }, [activeIndex, cellToTarget, cellsWithOutput, deckRef]);
+  });
+
+  useEffect(() => {
+    const deck = deckRef.current;
+    if (deck == null) {
+      return;
+    }
+    navigateDeckToActiveCell(deck);
+  }, [activeIndex, cellToTarget, cellsWithOutput, 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
+  // can be interrupted by higher-priority work.
+  const toggleShowCode = useEvent(() => {
+    startTransition(() => setShowCode((value) => !value));
+  });
+
+  const handleDeckReady = useEvent((deck: RevealApi) => {
+    navigateDeckToActiveCell(deck);
+    if (codeToggleEnabled) {
+      deck.addKeyBinding(
+        { keyCode: 67, key: "C", description: "Toggle code editor" },
+        toggleShowCode,
+      );
+    }
+  });
+
+  const activeSubslide = useMemo(() => {
+    if (!activeCell) {
+      return null;
+    }
+    const target = cellToTarget.get(activeCell.id);
+    if (!target) {
+      return null;
+    }
+    return { h: target.h, v: target.v };
+  }, [activeCell, cellToTarget]);
 
   // Forward the deck's current cell to the parent, except while a skipped
   // preview is parked: every reveal.js event during that window is an echo
@@ -266,6 +336,7 @@ const RevealSlidesComponent = ({
     if (Events.fromInput(event)) {
       return;
     }
+
     const direction = classifyNavKey(event);
     if (direction === 0) {
       return;
@@ -279,6 +350,11 @@ const RevealSlidesComponent = ({
     onSlideChange?.(nextIndex);
   });
 
+  const handleSlideChange = useEvent(() => {
+    reportCurrentCell();
+    triggerResize(deckRef.current);
+  });
+
   useEventListener(document, "keydown", handleParkedNavKey, { capture: true });
 
   return (
@@ -292,23 +368,38 @@ const RevealSlidesComponent = ({
             deckRef={deckRef}
             className="aspect-video w-full overflow-hidden border rounded bg-background mo-slides-theme prose-slides"
             config={revealConfig}
-            onSlideChange={() => {
-              reportCurrentCell();
-              const deck = deckRef.current;
-              triggerResize(deck);
-            }}
+            onReady={handleDeckReady}
+            onSlideChange={handleSlideChange}
             onFragmentShown={reportCurrentCell}
             onFragmentHidden={reportCurrentCell}
           >
-            {composition.stacks.map((stack, i) => {
+            {composition.stacks.map((stack, h) => {
               if (stack.subslides.length === 1) {
-                return <SubslideView key={i} subslide={stack.subslides[0]} />;
+                const isActive =
+                  activeSubslide?.h === h && activeSubslide?.v === 0;
+                return (
+                  <SubslideView
+                    key={h}
+                    subslide={stack.subslides[0]}
+                    showCode={codeShown && isActive}
+                    isEditable={isEditable}
+                  />
+                );
               }
               return (
-                <Stack key={i}>
-                  {stack.subslides.map((sub, j) => (
-                    <SubslideView key={j} subslide={sub} />
-                  ))}
+                <Stack key={h}>
+                  {stack.subslides.map((sub, v) => {
+                    const isActive =
+                      activeSubslide?.h === h && activeSubslide?.v === v;
+                    return (
+                      <SubslideView
+                        key={v}
+                        subslide={sub}
+                        showCode={codeShown && isActive}
+                        isEditable={isEditable}
+                      />
+                    );
+                  })}
                 </Stack>
               );
             })}
@@ -336,24 +427,45 @@ const RevealSlidesComponent = ({
               </div>
             </div>
           )}
-          <Tooltip content="Fullscreen (F)">
-            <Button
-              data-testid="marimo-plugin-slides-fullscreen"
-              variant="ghost"
-              size="icon"
-              className="absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-70 text-muted-foreground transition-opacity h-7 w-7"
-              onClick={() => {
-                deckRef.current
-                  ?.getViewportElement()
-                  ?.requestFullscreen()
-                  .catch((error) => {
-                    Logger.error("Failed to request fullscreen", error);
-                  });
-              }}
-            >
-              <ExpandIcon className="h-4 w-4" />
-            </Button>
-          </Tooltip>
+          <div className="absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-70 text-muted-foreground transition-opacity">
+            {codeToggleEnabled && (
+              <Tooltip content={codeShown ? "Hide code (C)" : "Show code (C)"}>
+                <Button
+                  data-testid="marimo-plugin-slides-toggle-code"
+                  variant="ghost"
+                  size="icon"
+                  className={cn(
+                    "text-muted-foreground h-7 w-7",
+                    codeShown && "text-foreground bg-muted",
+                  )}
+                  aria-pressed={codeShown}
+                  aria-label={codeShown ? "Hide code" : "Show code"}
+                  onClick={toggleShowCode}
+                >
+                  <CodeIcon className="h-4 w-4" />
+                </Button>
+              </Tooltip>
+            )}
+            <Tooltip content="Fullscreen (F)">
+              <Button
+                data-testid="marimo-plugin-slides-fullscreen"
+                variant="ghost"
+                size="icon"
+                className="text-muted-foreground h-7 w-7"
+                aria-label="Enter fullscreen"
+                onClick={() => {
+                  deckRef.current
+                    ?.getViewportElement()
+                    ?.requestFullscreen()
+                    .catch((error) => {
+                      Logger.error("Failed to request fullscreen", error);
+                    });
+                }}
+              >
+                <ExpandIcon className="h-4 w-4" />
+              </Button>
+            </Tooltip>
+          </div>
         </div>
       </div>