@marimo-team/islands 0.23.17-dev1 → 0.23.17-dev13

package/src/components/editor/controls/__tests__/notebook-menu-dropdown.test.tsx

@@ -0,0 +1,187 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Provider } from "jotai";
+import type React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { ModalProvider } from "@/components/modal/ImperativeModal";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { layoutStateAtom } from "@/core/layout/layout";
+import { kioskModeAtom, viewStateAtom } from "@/core/mode";
+import { requestClientAtom } from "@/core/network/requests";
+import { filenameAtom } from "@/core/saving/file-state";
+import { store } from "@/core/state/jotai";
+import { isWasm } from "@/core/wasm/utils";
+import {
+  DEFAULT_EXPORT_OPTIONS,
+  exportOptionsAtom,
+  lastExportFormatAtom,
+} from "../../actions/export-dialog/state";
+import { NotebookMenuDropdown } from "../notebook-menu-dropdown";
+
+vi.mock("@/core/wasm/utils", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/core/wasm/utils")>();
+  return { ...actual, isWasm: vi.fn(() => false) };
+});
+
+function wrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <Provider store={store}>
+      <TooltipProvider>
+        <ModalProvider>{children}</ModalProvider>
+      </TooltipProvider>
+    </Provider>
+  );
+}
+
+function openNotebookMenu() {
+  fireEvent.pointerDown(screen.getByTestId("notebook-menu-dropdown"), {
+    button: 0,
+    ctrlKey: false,
+  });
+}
+
+async function openDownloadMenu() {
+  openNotebookMenu();
+  fireEvent.click(await screen.findByRole("menuitem", { name: "Download" }));
+}
+
+async function selectDownload(name: string | RegExp) {
+  await openDownloadMenu();
+  fireEvent.click(await screen.findByRole("menuitem", { name }));
+}
+
+describe("NotebookMenuDropdown", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+    store.set(requestClientAtom, MockRequestClient.create());
+    store.set(filenameAtom, "/project/notebook.py");
+    store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+    store.set(kioskModeAtom, false);
+    store.set(layoutStateAtom, {
+      selectedLayout: "vertical",
+      layoutData: {},
+    });
+    store.set(exportOptionsAtom, DEFAULT_EXPORT_OPTIONS);
+    store.set(lastExportFormatAtom, "html");
+    vi.mocked(isWasm).mockReturnValue(false);
+    vi.stubGlobal("PointerEvent", MouseEvent);
+    vi.stubGlobal("matchMedia", () => ({
+      matches: false,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    }));
+  });
+
+  afterEach(() => {
+    document.title = "";
+    vi.unstubAllGlobals();
+  });
+
+  it("returns focus to the notebook menu when the dialog closes", async () => {
+    render(<NotebookMenuDropdown />, { wrapper });
+    const menuButton = screen.getByTestId("notebook-menu-dropdown");
+
+    openNotebookMenu();
+    fireEvent.click(
+      await screen.findByRole("menuitem", {
+        name: "Export…",
+      }),
+    );
+    fireEvent.click(await screen.findByRole("button", { name: "Close" }));
+
+    await waitFor(() => expect(menuButton).toHaveFocus());
+  });
+
+  it("opens the HTML shortcut with code excluded", async () => {
+    render(<NotebookMenuDropdown />, { wrapper });
+
+    await selectDownload("Download as HTML (exclude code)");
+
+    expect(await screen.findByTestId("export-dialog")).toBeVisible();
+    expect(screen.getByTestId("export-format-html")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(
+      screen.getByRole("switch", { name: "Include code" }),
+    ).not.toBeChecked();
+  });
+
+  it("opens the slides PDF shortcut with the slides layout", async () => {
+    store.set(layoutStateAtom, {
+      selectedLayout: "slides",
+      layoutData: {},
+    });
+    render(<NotebookMenuDropdown />, { wrapper });
+
+    await openDownloadMenu();
+    fireEvent.click(
+      await screen.findByRole("menuitem", {
+        name: "Download as PDF",
+      }),
+    );
+    fireEvent.click(
+      await screen.findByRole("menuitem", {
+        name: /Slides Layout/,
+      }),
+    );
+
+    expect(await screen.findByTestId("export-dialog")).toBeVisible();
+    expect(screen.getByTestId("export-format-pdf")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(screen.getByRole("radio", { name: "Slides" })).toBeChecked();
+  });
+
+  it("hides the slides PDF shortcut in WebAssembly", async () => {
+    vi.mocked(isWasm).mockReturnValue(true);
+    store.set(layoutStateAtom, {
+      selectedLayout: "slides",
+      layoutData: {},
+    });
+    render(<NotebookMenuDropdown />, { wrapper });
+
+    await openDownloadMenu();
+    fireEvent.click(
+      await screen.findByRole("menuitem", {
+        name: "Download as PDF",
+      }),
+    );
+
+    expect(
+      screen.getByRole("menuitem", { name: "Document Layout" }),
+    ).toBeVisible();
+    expect(
+      screen.queryByRole("menuitem", { name: /Slides Layout/ }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("preselects each Python format from its download shortcut", async () => {
+    render(<NotebookMenuDropdown />, { wrapper });
+
+    await selectDownload("Download notebook source");
+
+    expect(await screen.findByTestId("export-dialog")).toBeVisible();
+    expect(screen.getByTestId("export-format-script")).toHaveAttribute(
+      "aria-selected",
+      "true",
+    );
+    expect(
+      screen.getByRole("radio", { name: "Notebook source" }),
+    ).toBeChecked();
+
+    fireEvent.click(screen.getByRole("button", { name: "Close" }));
+    await waitFor(() =>
+      expect(screen.queryByTestId("export-dialog")).not.toBeInTheDocument(),
+    );
+
+    await selectDownload("Download flat script");
+
+    expect(await screen.findByTestId("export-dialog")).toBeVisible();
+    expect(screen.getByRole("radio", { name: "Flat script" })).toBeChecked();
+  });
+});

package/src/components/editor/controls/notebook-menu-dropdown.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { MenuIcon } from "lucide-react";
-import React from "react";
+import React, { useRef } from "react";
 import { useLocale } from "react-aria";
 import { Button } from "@/components/editor/inputs/Inputs";
 import {
@@ -33,7 +33,8 @@ export const NotebookMenuDropdown: React.FC<Props> = ({
   disabled = false,
   tooltip = "Actions",
 }) => {
-  const actions = useNotebookActions();
+  const exportDialogReturnFocusRef = useRef<HTMLButtonElement>(null);
+  const actions = useNotebookActions({ exportDialogReturnFocusRef });
   const { locale } = useLocale();
   // Create tooltip content with keyboard shortcut decoration
   const tooltipContent = (
@@ -50,6 +51,7 @@ export const NotebookMenuDropdown: React.FC<Props> = ({
 
   const button = (
     <Button
+      ref={exportDialogReturnFocusRef}
       aria-label="Config"
       shape="circle"
       size="small"

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

@@ -44,6 +44,94 @@ describe("read-file snippet", () => {
     `);
   });
 
+  it("huggingface backend (dataset)", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          backendType: "huggingface",
+          entry: {
+            path: "datasets/scikit-learn/Fish/Fish.csv",
+            kind: "file",
+            size: 100,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toMatchInlineSnapshot(`
+      "from huggingface_hub import hf_hub_download
+
+      local_path = hf_hub_download(
+          repo_id="scikit-learn/Fish",
+          filename="Fish.csv",
+          repo_type="dataset",
+      )
+
+      with open(local_path, "rb") as f:
+          _data = f.read()
+      _data"
+    `);
+  });
+
+  it("huggingface backend (model)", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          backendType: "huggingface",
+          entry: {
+            path: "google-bert/bert-base-uncased/config.json",
+            kind: "file",
+            size: 100,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toMatchInlineSnapshot(`
+      "from huggingface_hub import hf_hub_download
+
+      local_path = hf_hub_download(
+          repo_id="google-bert/bert-base-uncased",
+          filename="config.json",
+          repo_type="model",
+      )
+
+      with open(local_path, "rb") as f:
+          _data = f.read()
+      _data"
+    `);
+  });
+
+  it("huggingface backend returns null for unparsable paths", () => {
+    expect(
+      readSnippet.getCode(
+        makeCtx({
+          backendType: "huggingface",
+          entry: {
+            path: "buckets/my-bucket/file.csv",
+            kind: "file",
+            size: 100,
+            lastModified: null,
+          },
+        }),
+      ),
+    ).toBeNull();
+  });
+
+  it("huggingface backend does not misparse a dataset/space root as a model repo", () => {
+    // These paths are missing a filename segment, so they aren't valid
+    // dataset/space repo files. They must not fall through and be treated
+    // as the model repo "datasets/scikit-learn" or "spaces/gradio".
+    for (const path of ["datasets/scikit-learn/Fish", "spaces/gradio/demo"]) {
+      expect(
+        readSnippet.getCode(
+          makeCtx({
+            backendType: "huggingface",
+            entry: { path, kind: "file", size: 100, lastModified: null },
+          }),
+        ),
+      ).toBeNull();
+    }
+  });
+
   it("returns null for directories", () => {
     expect(
       readSnippet.getCode(

package/src/components/storage/components.tsx

@@ -9,6 +9,7 @@ import CoreweaveDarkIcon from "@marimo-team/llm-info/icons/coreweave-dark.svg?in
 import { DatabaseZapIcon, GlobeIcon, HardDriveIcon } from "lucide-react";
 import GoogleCloudIcon from "@/components/databases/icons/google-cloud-storage.svg?inline";
 import GoogleDriveIcon from "@/components/databases/icons/google-drive.svg?inline";
+import HuggingfaceIcon from "@/components/databases/icons/huggingface.svg?inline";
 import { GitHubIcon } from "@/components/icons/github";
 import type { KnownStorageProtocol } from "@/core/storage/types";
 import { useTheme } from "@/theme/useTheme";
@@ -28,6 +29,7 @@ const PROTOCOL_ICONS: Record<KnownStorageProtocol, IconEntry> = {
   file: HardDriveIcon,
   "in-memory": DatabaseZapIcon,
   gdrive: { src: GoogleDriveIcon },
+  hf: { src: HuggingfaceIcon },
   github: GitHubIcon,
 };
 

package/src/components/storage/storage-snippets.ts

@@ -27,6 +27,50 @@ function escapeForPythonString(value: string): string {
   return JSON.stringify(value).slice(1, -1);
 }
 
+interface ParsedHfRepoPath {
+  repoType: "model" | "dataset" | "space";
+  repoId: string;
+  filename: string;
+}
+
+// Namespaced prefixes are reserved: they can never be the first segment of a
+// model repo id, so a path like "datasets/org" that is missing a filename
+// must not fall through and be misparsed as the model repo "datasets/org".
+const RESERVED_PREFIXES = new Set(["datasets", "spaces", "buckets"]);
+
+function parseHfRepoPath(path: string): ParsedHfRepoPath | null {
+  const parts = path.split("/").filter(Boolean);
+  if (parts[0] === "datasets" && parts.length >= 4) {
+    return {
+      repoType: "dataset",
+      repoId: `${parts[1]}/${parts[2]}`,
+      filename: parts.slice(3).join("/"),
+    };
+  }
+  if (parts[0] === "spaces" && parts.length >= 4) {
+    return {
+      repoType: "space",
+      repoId: `${parts[1]}/${parts[2]}`,
+      filename: parts.slice(3).join("/"),
+    };
+  }
+  if (parts.length >= 3 && !RESERVED_PREFIXES.has(parts[0])) {
+    return {
+      repoType: "model",
+      repoId: `${parts[0]}/${parts[1]}`,
+      filename: parts.slice(2).join("/"),
+    };
+  }
+  return null;
+}
+
+function hfHubDownloadSnippet(parsed: ParsedHfRepoPath): string {
+  const repoId = escapeForPythonString(parsed.repoId);
+  const filename = escapeForPythonString(parsed.filename);
+  const repoType = escapeForPythonString(parsed.repoType);
+  return `from huggingface_hub import hf_hub_download\n\nlocal_path = hf_hub_download(\n    repo_id="${repoId}",\n    filename="${filename}",\n    repo_type="${repoType}",\n)`;
+}
+
 export const STORAGE_SNIPPETS: StorageSnippet[] = [
   {
     id: "read-file",
@@ -37,6 +81,13 @@ export const STORAGE_SNIPPETS: StorageSnippet[] = [
         return null;
       }
       const path = escapeForPythonString(ctx.entry.path);
+      if (ctx.backendType === "huggingface") {
+        const parsed = parseHfRepoPath(ctx.entry.path);
+        if (!parsed) {
+          return null;
+        }
+        return `${hfHubDownloadSnippet(parsed)}\n\nwith open(local_path, "rb") as f:\n    _data = f.read()\n_data`;
+      }
       if (ctx.backendType === "obstore") {
         return `_data = ${ctx.variableName}.get("${path}").bytes()\n_data`;
       }
@@ -52,6 +103,13 @@ export const STORAGE_SNIPPETS: StorageSnippet[] = [
         return null;
       }
       const path = escapeForPythonString(ctx.entry.path);
+      if (ctx.backendType === "huggingface") {
+        const parsed = parseHfRepoPath(ctx.entry.path);
+        if (!parsed) {
+          return null;
+        }
+        return `${hfHubDownloadSnippet(parsed)}\nlocal_path`;
+      }
       if (ctx.backendType === "obstore") {
         if (NOT_SIGNABLE_PROTOCOLS.has(ctx.protocol)) {
           return null;

package/src/core/__tests__/mode.test.ts

@@ -0,0 +1,85 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { CellId } from "@/core/cells/ids";
+import { runDuringPresentMode, viewStateAtom } from "@/core/mode";
+import { store } from "@/core/state/jotai";
+
+const requestAnimationFrameMock = vi.fn((callback: FrameRequestCallback) => {
+  callback(0);
+  return 0;
+});
+
+async function runAfterRender(fn: () => void | Promise<void>): Promise<void> {
+  const result = runDuringPresentMode(fn);
+  await vi.runAllTimersAsync();
+  return result;
+}
+
+describe("runDuringPresentMode", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.stubGlobal("requestAnimationFrame", requestAnimationFrameMock);
+    requestAnimationFrameMock.mockClear();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it("runs in present mode and restores the captured view state", async () => {
+    const state = { mode: "edit" as const, cellAnchor: CellId.create() };
+    store.set(viewStateAtom, state);
+
+    await runAfterRender(() => {
+      expect(store.get(viewStateAtom)).toEqual({
+        ...state,
+        mode: "present",
+      });
+    });
+
+    expect(store.get(viewStateAtom)).toEqual(state);
+    expect(requestAnimationFrameMock).toHaveBeenCalledTimes(2);
+  });
+
+  it("restores the captured view state when the callback rejects", async () => {
+    const state = { mode: "edit" as const, cellAnchor: CellId.create() };
+    const error = new Error("capture failed");
+    store.set(viewStateAtom, state);
+
+    const result = runDuringPresentMode(() => Promise.reject(error));
+    const rejection = expect(result).rejects.toBe(error);
+    await vi.runAllTimersAsync();
+    await rejection;
+
+    expect(store.get(viewStateAtom)).toEqual(state);
+  });
+
+  it("runs directly when already in present mode", async () => {
+    const state = { mode: "present" as const, cellAnchor: CellId.create() };
+    store.set(viewStateAtom, state);
+
+    await runDuringPresentMode(() => {
+      expect(store.get(viewStateAtom)).toEqual(state);
+    });
+
+    expect(store.get(viewStateAtom)).toEqual(state);
+    expect(requestAnimationFrameMock).not.toHaveBeenCalled();
+  });
+
+  it.each(["read", "home", "gallery"] as const)(
+    "runs directly without changing %s mode",
+    async (mode) => {
+      const state = { mode, cellAnchor: CellId.create() };
+      store.set(viewStateAtom, state);
+
+      await runDuringPresentMode(() => {
+        expect(store.get(viewStateAtom)).toEqual(state);
+      });
+
+      expect(store.get(viewStateAtom)).toEqual(state);
+      expect(requestAnimationFrameMock).not.toHaveBeenCalled();
+    },
+  );
+});

package/src/core/dom/outline.ts

@@ -63,13 +63,36 @@ function getOutline(html: string): Outline | null {
   return { items };
 }
 
+function toXPathStringLiteral(value: string): string {
+  if (!value.includes('"')) {
+    return `"${value}"`;
+  }
+  if (!value.includes("'")) {
+    return `'${value}'`;
+  }
+
+  const segments = value.split('"');
+  const literals: string[] = [];
+  for (const [index, segment] of segments.entries()) {
+    if (segment) {
+      literals.push(`"${segment}"`);
+    }
+    if (index < segments.length - 1) {
+      literals.push(`'"'`);
+    }
+  }
+  return `concat(${literals.join(", ")})`;
+}
+
 export function headingToIdentifier(heading: Element): OutlineItem["by"] {
   const id = heading.id;
   if (id) {
     return { id };
   }
-  const name = heading.textContent;
-  return { path: `//${heading.tagName}[contains(., "${name}")]` };
+  const name = heading.textContent ?? "";
+  return {
+    path: `//${heading.tagName}[contains(., ${toXPathStringLiteral(name)})]`,
+  };
 }
 
 export function mergeOutlines(outlines: (Outline | null)[]): Outline {

package/src/core/mode.ts

@@ -55,20 +55,22 @@ export async function runDuringPresentMode(
   fn: () => void | Promise<void>,
 ): Promise<void> {
   const state = store.get(viewStateAtom);
-  if (state.mode === "present") {
+  if (state.mode !== "edit") {
     await fn();
     return;
   }
 
   store.set(viewStateAtom, { ...state, mode: "present" });
-  // Wait 100ms to allow the page to render
-  await new Promise((resolve) => setTimeout(resolve, 100));
-  // Wait 2 frames
-  await new Promise((resolve) => requestAnimationFrame(resolve));
-  await new Promise((resolve) => requestAnimationFrame(resolve));
-  await fn();
-  store.set(viewStateAtom, { ...state, mode: "edit" });
-  return undefined;
+  try {
+    // Wait 100ms to allow the page to render
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    // Wait 2 frames
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await fn();
+  } finally {
+    store.set(viewStateAtom, state);
+  }
 }
 
 export const viewStateAtom = atom<ViewState>({

package/src/core/network/__tests__/requests-lazy.test.ts

@@ -84,6 +84,7 @@ describe("createLazyRequests", () => {
           format: "ipynb",
           dependenciesAvailable: false,
           missingPackages: ["nbformat"],
+          missingSetup: [],
         },
       ],
     };

package/src/core/storage/types.ts

@@ -61,5 +61,6 @@ export type KnownStorageProtocol =
   | "http"
   | "file"
   | "gdrive"
+  | "hf"
   | "in-memory"
   | "github";

package/src/utils/__tests__/download.test.tsx

@@ -390,8 +390,9 @@ describe("downloadHTMLAsImage", () => {
   it("should download image without prepare function", async () => {
     vi.mocked(toPng).mockResolvedValue(mockDataUrl);
 
-    await downloadHTMLAsImage({ element: mockElement, filename: "test" });
-
+    expect(
+      await downloadHTMLAsImage({ element: mockElement, filename: "test" }),
+    ).toBe(true);
     expect(toPng).toHaveBeenCalledWith(
       mockElement,
       expect.objectContaining({
@@ -452,8 +453,9 @@ describe("downloadHTMLAsImage", () => {
   it("should show error toast on failure", async () => {
     vi.mocked(toPng).mockRejectedValue(new Error("Failed"));
 
-    await downloadHTMLAsImage({ element: mockElement, filename: "test" });
-
+    expect(
+      await downloadHTMLAsImage({ element: mockElement, filename: "test" }),
+    ).toBe(false);
     expect(toast).toHaveBeenCalledWith({
       title: "Failed to download as PNG",
       description: "Failed",

package/src/utils/download.ts

@@ -140,7 +140,7 @@ export async function downloadHTMLAsImage(opts: {
   element: HTMLElement;
   filename: string;
   prepare?: (element: HTMLElement) => () => void;
-}) {
+}): Promise<boolean> {
   const { element, filename, prepare } = opts;
 
   // Capture current scroll position
@@ -156,6 +156,7 @@ export async function downloadHTMLAsImage(opts: {
     // Get screenshot
     const dataUrl = await toPng(element);
     downloadByURL(dataUrl, Filenames.toPNG(filename));
+    return true;
   } catch (error) {
     Logger.error("Error downloading as PNG", error);
     toast({
@@ -163,6 +164,7 @@ export async function downloadHTMLAsImage(opts: {
       description: prettyError(error),
       variant: "danger",
     });
+    return false;
   } finally {
     cleanup?.();
     if (document.body.classList.contains("printing")) {

package/src/utils/shell.ts

@@ -0,0 +1,17 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * Quote one argument for a POSIX shell command.
+ *
+ * Mirrors Python's `shlex.quote` so copied commands cannot interpret argument
+ * contents as shell syntax.
+ */
+export function shellQuote(value: string): string {
+  if (value === "") {
+    return "''";
+  }
+  if (/^[\w@%+=:,./-]+$/.test(value)) {
+    return value;
+  }
+  return `'${value.replaceAll("'", `'"'"'`)}'`;
+}