@marimo-team/islands 0.23.5-dev1 → 0.23.5-dev11

package/package.json

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

package/src/components/data-table/export-actions.tsx

@@ -151,7 +151,21 @@ export const ExportMenu: React.FC<ExportActionProps> = (props) => {
     }
     const rawName = (result.filename ?? "").trim();
     const baseName = Filenames.withoutExtension(rawName) || "download";
-    downloadByURL(result.url, `${baseName}.${format}`);
+    const downloadName = `${baseName}.${format}`;
+    // Append ?download=1 so the server returns Content-Disposition: attachment.
+    // This forces a save even when <a download> is ignored — e.g., inside
+    // sandboxed iframes that lack `allow-downloads`. Skip for data: URLs
+    // (used in pyodide/wasm) since query params would corrupt the payload.
+    let downloadUrl = result.url;
+    if (!downloadUrl.startsWith("data:")) {
+      const separator = downloadUrl.includes("?") ? "&" : "?";
+      const params = new URLSearchParams({
+        download: "1",
+        filename: downloadName,
+      });
+      downloadUrl = `${downloadUrl}${separator}${params.toString()}`;
+    }
+    downloadByURL(downloadUrl, downloadName);
   };
 
   const handleClipboardCopy = async (

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 (