@marimo-team/frontend 0.23.17-dev4 → 0.23.17-dev40

package/src/components/editor/actions/export-dialog/export-dialog.tsx

@@ -101,31 +101,35 @@ export const ExportDialog: React.FC<{
           })}
         </TabsList>
 
-        <TabsContent
-          value={format}
-          className="mt-0 min-h-0 min-w-0 overflow-y-auto px-4 py-3"
-        >
-          <div className="mb-3">
-            <h3 className="text-base font-semibold">{definition.label}</h3>
-            <p className="mt-0.5 text-sm text-muted-foreground">
-              {definition.description}
-            </p>
-          </div>
-
-          <FormatNotice
-            format={format}
-            formatLabel={definition.label}
-            status={status}
-          />
+        {/* One panel per tab so each trigger's aria-controls resolves. */}
+        {formats.map(({ format: candidate }) => (
+          <TabsContent
+            key={candidate}
+            value={candidate}
+            className="mt-0 min-h-0 min-w-0 overflow-y-auto px-4 py-3"
+          >
+            <div className="mb-3">
+              <h3 className="text-base font-semibold">{definition.label}</h3>
+              <p className="mt-0.5 text-sm text-muted-foreground">
+                {definition.description}
+              </p>
+            </div>
 
-          {usesBrowserPrint ? null : (
-            <FormatOptions
-              options={options}
-              updateOptions={updateOptions}
-              disabled={isExporting}
+            <FormatNotice
+              format={format}
+              formatLabel={definition.label}
+              status={status}
             />
-          )}
-        </TabsContent>
+
+            {usesBrowserPrint ? null : (
+              <FormatOptions
+                options={options}
+                updateOptions={updateOptions}
+                disabled={isExporting}
+              />
+            )}
+          </TabsContent>
+        ))}
       </Tabs>
 
       <footer className="min-w-0 border-t bg-muted/20 px-4 py-3">

package/src/components/editor/actions/export-dialog/format-notice.tsx

@@ -10,8 +10,18 @@ import type {
   ExportBlockReason,
   ExportFormat,
   ExportFormatStatus,
+  ExportSetupRequirement,
 } from "./state";
 
+const SETUP_REQUIREMENTS: Record<
+  ExportSetupRequirement["name"],
+  { description: string }
+> = {
+  "playwright-chromium": {
+    description: "PDF export requires Playwright Chromium.",
+  },
+};
+
 export function FormatStatusIcon({ status }: { status: ExportFormatStatus }) {
   if (status.available && !status.availabilityCheckFailed) {
     return null;
@@ -124,6 +134,24 @@ function ReasonNotice({
           where marimo is running to use this export.
         </Notice>
       );
+    case "missing-setup":
+      return (
+        <Notice>
+          <span className="block min-w-0">
+            {reason.requirements.map((requirement) => {
+              const details = SETUP_REQUIREMENTS[requirement.name];
+              return (
+                <span className="block" key={requirement.name}>
+                  {details.description}
+                  <code className="mt-1 block break-all font-mono">
+                    {requirement.command}
+                  </code>
+                </span>
+              );
+            })}
+          </span>
+        </Notice>
+      );
     case "wasm-runtime":
       return (
         <Notice>

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

@@ -15,6 +15,8 @@ export const EXPORT_FORMATS = [
 ] as const;
 
 export type ExportFormat = (typeof EXPORT_FORMATS)[number];
+export type ExportSetupRequirement =
+  ExportAvailabilityResponse["formats"][number]["missingSetup"][number];
 
 export const MARKDOWN_FLAVORS = ["pymdown", "qmd", "mystmd", "mdx"] as const;
 export const IPYNB_SORT_MODES = ["topological", "top-down"] as const;
@@ -185,6 +187,7 @@ export type ExportBlockReason =
   | { type: "checking-requirements" }
   | { type: "notebook-must-be-named" }
   | { type: "missing-packages"; packages: string[] }
+  | { type: "missing-setup"; requirements: ExportSetupRequirement[] }
   | { type: "wasm-runtime" };
 
 export interface ExportFormatStatus {
@@ -308,12 +311,27 @@ export function getExportFormatStatus({
     return { available: true, availabilityCheckFailed: true };
   }
   if (!serverStatus.dependenciesAvailable) {
+    if (serverStatus.missingPackages.length > 0) {
+      return {
+        available: false,
+        reason: {
+          type: "missing-packages",
+          packages: serverStatus.missingPackages,
+        },
+      };
+    }
+    if (serverStatus.missingSetup.length > 0) {
+      return {
+        available: false,
+        reason: {
+          type: "missing-setup",
+          requirements: serverStatus.missingSetup,
+        },
+      };
+    }
     return {
-      available: false,
-      reason: {
-        type: "missing-packages",
-        packages: serverStatus.missingPackages,
-      },
+      available: true,
+      availabilityCheckFailed: true,
     };
   }
 

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/actions/useConfigActions.tsx

@@ -141,6 +141,30 @@ export function useConfigActions() {
         });
       },
     },
+    {
+      label: "Config > Disable code lens",
+      hidden: !(config.display.code_lens ?? true),
+      handle: () => {
+        handleUserConfig({
+          display: {
+            ...config.display,
+            code_lens: false,
+          },
+        });
+      },
+    },
+    {
+      label: "Config > Enable code lens",
+      hidden: config.display.code_lens ?? true,
+      handle: () => {
+        handleUserConfig({
+          display: {
+            ...config.display,
+            code_lens: true,
+          },
+        });
+      },
+    },
     {
       label: "Config > Set cell output area: above",
       hidden: config.display.cell_output === "above",

package/src/components/editor/ai/add-cell-with-ai.tsx

@@ -51,6 +51,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { toast } from "@/components/ui/use-toast";
 import { AiModelId } from "@/core/ai/ids/ids";
+import { AI_SDK_UI_THROTTLE_MS } from "@/core/ai/constants";
 import { stagedAICellsAtom, useStagedCells } from "@/core/ai/staged-cells";
 import type { ToolNotebookContext } from "@/core/ai/tools/base";
 import { useCellActions } from "@/core/cells/cells";
@@ -117,8 +118,7 @@ export const AddCellWithAI: React.FC<{
   };
 
   const { sendMessage, stop, status, addToolOutput } = useChat({
-    // Throttle the messages and data updates to 100ms
-    experimental_throttle: 100,
+    throttle: AI_SDK_UI_THROTTLE_MS,
     transport: new StreamingChunkTransport(
       {
         api: runtimeManager.getAiURL("completion").toString(),

package/src/components/editor/ai/ai-completion-editor.tsx

@@ -27,6 +27,7 @@ import { Label } from "@/components/ui/label";
 import { Switch } from "@/components/ui/switch";
 import { Tooltip } from "@/components/ui/tooltip";
 import { toast } from "@/components/ui/use-toast";
+import { AI_SDK_UI_THROTTLE_MS } from "@/core/ai/constants";
 import { stripWrappingBackticks } from "@/core/ai/strip-wrapping-backticks";
 import { type AiCompletionCell, includeOtherCellsAtom } from "@/core/ai/state";
 import type { CellId } from "@/core/cells/ids";
@@ -124,8 +125,7 @@ export const AiCompletionEditor: React.FC<Props> = ({
     api: runtimeManager.getAiURL("completion").toString(),
     headers: runtimeManager.headers(),
     initialInput: initialPrompt,
-    // Throttle the messages and data updates to 100ms
-    experimental_throttle: 100,
+    throttle: AI_SDK_UI_THROTTLE_MS,
     body: {
       ...(Object.keys(completionBody).length > 0
         ? completionBody

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>;