@marimo-team/islands 0.23.17-dev3 → 0.23.17-dev30

package/src/components/editor/actions/export-dialog/use-export-dialog.ts

@@ -1,13 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import { useAtom } from "jotai";
 import { useEffect, useRef, useState } from "react";
 import { toast } from "@/components/ui/use-toast";
 import {
   updateCellOutputsWithScreenshots,
   useEnrichCellOutputs,
 } from "@/core/export/hooks";
-import { runDuringPresentMode, viewStateAtom } from "@/core/mode";
+import { runDuringPresentMode } from "@/core/mode";
 import { useRequestClient } from "@/core/network/requests";
 import type { ExportAvailabilityResponse } from "@/core/network/types";
 import { useFilename } from "@/core/saving/filename";
@@ -21,6 +21,7 @@ import {
   withLoadingToast,
 } from "@/utils/download";
 import { Filenames } from "@/utils/filenames";
+import { Logger } from "@/utils/Logger";
 import { Paths } from "@/utils/paths";
 import { getExportCommand } from "./export-command";
 import { exportNotebook } from "./export-notebook";
@@ -277,8 +278,6 @@ function useExportDialogAction({
 }) {
   const requests = useRequestClient();
   const takeScreenshots = useEnrichCellOutputs();
-  const viewState = useAtomValue(viewStateAtom);
-  const setViewState = useSetAtom(viewStateAtom);
   const [isExporting, setIsExporting] = useState(false);
   const dialogRef = useRef<HTMLDivElement>(null);
   const mountedRef = useRef(true);
@@ -302,15 +301,7 @@ function useExportDialogAction({
   const capturePNG = async () => {
     const capture = () =>
       captureCurrentAppView(dialogRef.current?.parentElement ?? null);
-    if (viewState.mode !== "edit") {
-      await capture();
-      return;
-    }
-    try {
-      await runDuringPresentMode(capture);
-    } finally {
-      setViewState(viewState);
-    }
+    await runDuringPresentMode(capture);
   };
 
   const submit = async () => {
@@ -342,8 +333,9 @@ function useExportDialogAction({
       if (mountedRef.current) {
         onClose();
       }
-    } catch {
-      // Request and capture helpers report actionable errors to the user.
+    } catch (error) {
+      // Most helpers toast actionable errors, but not all (e.g. updateCellOutputs).
+      Logger.error("Export failed", error);
     } finally {
       if (mountedRef.current) {
         setIsExporting(false);

package/src/components/editor/chrome/panels/outline/__tests__/useActiveOutline.test.ts

@@ -0,0 +1,26 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { describe, expect, it } from "vitest";
+import { parseOutline } from "@/core/dom/outline";
+import { findOutlineElements } from "../useActiveOutline";
+
+describe("findOutlineElements", () => {
+  it.each([
+    "Design from the portfolio",
+    'Decorative Art of "Spanish California"',
+    `The painter's "Study"`,
+  ])("finds an id-less heading named %s", (name) => {
+    const html = `<h3>${name}</h3>`;
+    document.body.innerHTML = html;
+
+    const outline = parseOutline({
+      mimetype: "text/html",
+      timestamp: 0,
+      channel: "output",
+      data: html,
+    });
+
+    expect(
+      findOutlineElements(outline?.items ?? []).map(([element]) => element),
+    ).toEqual([document.querySelector("h3")]);
+  });
+});

package/src/components/editor/code/__tests__/readonly-python-code.test.tsx

@@ -1,13 +1,61 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { fireEvent, render, screen } from "@testing-library/react";
-import { beforeAll, describe, expect, it } from "vitest";
+import { EditorView } from "@codemirror/view";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import {
+  afterAll,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { ReadonlyCode } from "../readonly-python-code";
 
+const themeState = vi.hoisted(() => ({
+  value: "light" as "light" | "dark",
+}));
+
+let originalRangeGetClientRects: PropertyDescriptor | undefined;
+
+vi.mock("@/theme/useTheme", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/theme/useTheme")>();
+  return {
+    ...actual,
+    useTheme: () => ({ theme: themeState.value }),
+  };
+});
+
 beforeAll(() => {
   SetupMocks.resizeObserver();
+  originalRangeGetClientRects = Object.getOwnPropertyDescriptor(
+    Range.prototype,
+    "getClientRects",
+  );
+  Object.defineProperty(Range.prototype, "getClientRects", {
+    configurable: true,
+    value: () => [],
+  });
+});
+
+afterAll(() => {
+  // Keep the shared JSDOM prototype unchanged for other test files.
+  if (originalRangeGetClientRects) {
+    Object.defineProperty(
+      Range.prototype,
+      "getClientRects",
+      originalRangeGetClientRects,
+    );
+  } else {
+    Reflect.deleteProperty(Range.prototype, "getClientRects");
+  }
+});
+
+beforeEach(() => {
+  themeState.value = "light";
 });
 
 /**
@@ -26,7 +74,71 @@ function isCollapsed(root: ParentNode) {
   return root.querySelector(".cm")?.classList.contains("opacity-20") ?? false;
 }
 
+function getEditorIdentity(view: EditorView) {
+  return {
+    doc: view.state.doc,
+    dom: view.dom,
+    contentDOM: view.contentDOM,
+    scrollDOM: view.scrollDOM,
+  };
+}
+
+function expectEditorIdentity(
+  view: EditorView,
+  identity: ReturnType<typeof getEditorIdentity>,
+) {
+  expect(view.state.doc).toBe(identity.doc);
+  expect(view.dom).toBe(identity.dom);
+  expect(view.contentDOM).toBe(identity.contentDOM);
+  expect(view.scrollDOM).toBe(identity.scrollDOM);
+}
+
 describe("ReadonlyCode", () => {
+  it("reconfigures the theme without replacing the editor", async () => {
+    let createdView: EditorView | undefined;
+    const onCreateEditor = (view: EditorView) => {
+      createdView = view;
+    };
+    const renderCode = (id: string) => (
+      <TooltipProvider>
+        <ReadonlyCode
+          id={id}
+          code={"line_1 = 1\nline_2 = 2\nline_3 = 3"}
+          showCopyCode={false}
+          onCreateEditor={onCreateEditor}
+        />
+      </TooltipProvider>
+    );
+
+    const { rerender } = render(renderCode("light"));
+    await waitFor(() => {
+      expect(createdView).toBeDefined();
+    });
+
+    const view = createdView;
+    if (!view) {
+      throw new Error("ReadonlyCode did not create an editor view");
+    }
+    const identity = getEditorIdentity(view);
+    expect(view.state.facet(EditorView.darkTheme)).toBe(false);
+
+    themeState.value = "dark";
+    rerender(renderCode("dark"));
+    await waitFor(() => {
+      expect(view.state.facet(EditorView.darkTheme)).toBe(true);
+    });
+    expect(createdView).toBe(view);
+    expectEditorIdentity(view, identity);
+
+    themeState.value = "light";
+    rerender(renderCode("light-again"));
+    await waitFor(() => {
+      expect(view.state.facet(EditorView.darkTheme)).toBe(false);
+    });
+    expect(createdView).toBe(view);
+    expectEditorIdentity(view, identity);
+  });
+
   it("starts collapsed when initiallyHideCode is true", () => {
     const { container } = renderReadonly({ initiallyHideCode: true });
     expect(isCollapsed(container)).toBe(true);

package/src/components/editor/connections/storage/__tests__/__snapshots__/as-code.test.ts.snap

@@ -154,6 +154,20 @@ _creds = json.loads(_credentials_json)
 fs = GoogleDriveFileSystem(creds=_creds, token="service_account", use_listings_cache=False, skip_instance_cache=True)"
 `;
 
+exports[`generateStorageCode > Hugging Face > default connection 1`] = `
+"from huggingface_hub import HfApi
+
+hf = HfApi()"
+`;
+
+exports[`generateStorageCode > Hugging Face > with token from secrets 1`] = `
+"from huggingface_hub import HfApi
+import os
+
+_token = os.environ.get("HF_TOKEN")
+hf = HfApi(token=_token)"
+`;
+
 exports[`generateStorageCode > S3 > basic connection with all fields 1`] = `
 "from obstore.store import S3Store
 

package/src/components/editor/connections/storage/__tests__/as-code.test.ts

@@ -309,6 +309,26 @@ describe("generateStorageCode", () => {
     });
   });
 
+  describe("Hugging Face", () => {
+    it("default connection", () => {
+      expect(
+        generateStorageCode({ type: "huggingface" }, { library: "fsspec" }),
+      ).toMatchSnapshot();
+    });
+
+    it("with token from secrets", () => {
+      expect(
+        generateStorageCode(
+          {
+            type: "huggingface",
+            token: prefixSecret("HF_TOKEN"),
+          },
+          { library: "fsspec" },
+        ),
+      ).toMatchSnapshot();
+    });
+  });
+
   describe("invalid cases", () => {
     it("throws for empty S3 bucket", () => {
       expect(() =>

package/src/components/editor/connections/storage/add-storage-form.tsx

@@ -17,6 +17,7 @@ import {
   CoreWeaveStorageSchema,
   GCSStorageSchema,
   GoogleDriveStorageSchema,
+  HuggingfaceStorageSchema,
   S3StorageSchema,
   type StorageConnection,
 } from "./schemas";
@@ -79,6 +80,15 @@ const STORAGE_PROVIDERS = [
       preferred: "fsspec",
     },
   },
+  {
+    name: "Hugging Face Hub",
+    schema: HuggingfaceStorageSchema,
+    protocol: "hf",
+    storageLibraries: {
+      libraries: ["huggingface_hub"],
+      preferred: "huggingface_hub",
+    },
+  },
 ] satisfies StorageProviderSchema[];
 
 const StorageProviderSelector: React.FC<{

package/src/components/editor/connections/storage/as-code.ts

@@ -10,7 +10,7 @@ import {
   StorageConnectionSchema,
 } from "./schemas";
 
-export type StorageLibrary = "obstore" | "fsspec";
+export type StorageLibrary = "obstore" | "fsspec" | "huggingface_hub";
 
 export interface StorageCodeOptions {
   library: StorageLibrary;
@@ -20,6 +20,7 @@ export interface StorageCodeOptions {
 export const StorageLibraryDisplayNames: Record<StorageLibrary, string> = {
   obstore: "obstore",
   fsspec: "fsspec",
+  huggingface_hub: "huggingface_hub",
 };
 
 class SecretContainer {
@@ -245,6 +246,20 @@ function generateGDriveCode(
   return { imports, code };
 }
 
+function generateHuggingfaceCode(
+  connection: Extract<StorageConnection, { type: "huggingface" }>,
+  secrets: SecretContainer,
+): { imports: Set<string>; code: string } {
+  const imports = new Set(["from huggingface_hub import HfApi"]);
+
+  if (!connection.token) {
+    return { imports, code: "hf = HfApi()" };
+  }
+
+  const token = secrets.print("token", connection.token);
+  return { imports, code: `hf = HfApi(token=${token})` };
+}
+
 export function generateStorageCode(
   connection: StorageConnection,
   options: StorageCodeOptions,
@@ -273,6 +288,9 @@ export function generateStorageCode(
         isEmbedded: options.isEmbedded,
       });
       break;
+    case "huggingface":
+      result = generateHuggingfaceCode(connection, secrets);
+      break;
     default:
       assertNever(connection);
   }

package/src/components/editor/connections/storage/schemas.ts

@@ -220,12 +220,31 @@ export const GoogleDriveStorageSchema = z
   })
   .describe(FieldOptions.of({ direction: "two-columns" }));
 
+export const HuggingfaceStorageSchema = z
+  .object({
+    type: z.literal("huggingface"),
+    token: z
+      .string()
+      .optional()
+      .describe(
+        FieldOptions.of({
+          label: "Access Token",
+          description:
+            "Leave empty to use the HF_TOKEN environment variable or cached login",
+          inputType: "password",
+          optionRegex: "(hf.?token|hugging.?face.?token|hub.?token)",
+        }),
+      ),
+  })
+  .describe(FieldOptions.of({ direction: "two-columns" }));
+
 export const StorageConnectionSchema = z.discriminatedUnion("type", [
   S3StorageSchema,
   GCSStorageSchema,
   AzureStorageSchema,
   CoreWeaveStorageSchema,
   GoogleDriveStorageSchema,
+  HuggingfaceStorageSchema,
 ]);
 
 export type StorageConnection = z.infer<typeof StorageConnectionSchema>;

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/codemirror/code-lens/__tests__/extension.test.ts

@@ -103,7 +103,7 @@ describe("codeLensBundle", () => {
 
   beforeEach(() => {
     vi.useFakeTimers();
-    mockFlags({ editor_code_lens: true, cache_panel: true });
+    mockFlags({ cache_panel: true });
     seedStore({});
   });
 
@@ -141,11 +141,6 @@ describe("codeLensBundle", () => {
     return [...v.dom.querySelectorAll<HTMLElement>(".mo-code-lens")];
   }
 
-  it("returns an empty extension when the flag is off", () => {
-    mockFlags({ editor_code_lens: false });
-    expect(codeLensBundle(cellId("cell1"))).toEqual([]);
-  });
-
   it("renders a lens at a dataframe declaration", async () => {
     seedStore({ tables: [DF_TABLE] });
     const v = await mount("df = load()\nx = 1");
@@ -293,7 +288,7 @@ describe("codeLensBundle", () => {
   );
 
   it("does not render cache lenses when the cache panel is disabled", async () => {
-    mockFlags({ editor_code_lens: true, cache_panel: false });
+    mockFlags({ cache_panel: false });
     const v = await mount("@mo.cache\ndef f():\n    return 1");
 
     expect(lenses(v)).toHaveLength(0);