@marimo-team/islands 0.23.17-dev5 → 0.23.17-dev50

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

@@ -19,11 +19,13 @@ const AVAILABLE: ExportAvailabilityResponse = {
       format: "ipynb",
       dependenciesAvailable: true,
       missingPackages: [],
+      missingSetup: [],
     },
     {
       format: "pdf",
       dependenciesAvailable: true,
       missingPackages: [],
+      missingSetup: [],
     },
   ],
 };
@@ -188,6 +190,7 @@ describe("getExportFormatStatus", () => {
                 format: "pdf",
                 dependenciesAvailable: false,
                 missingPackages: ["nbconvert[webpdf]"],
+                missingSetup: [],
               },
             ],
           },
@@ -202,6 +205,64 @@ describe("getExportFormatStatus", () => {
     });
   });
 
+  it("reports missing server setup", () => {
+    expect(
+      status("pdf", {
+        availability: {
+          status: "success",
+          data: {
+            source: "server",
+            formats: [
+              {
+                format: "pdf",
+                dependenciesAvailable: false,
+                missingPackages: [],
+                missingSetup: [
+                  {
+                    name: "playwright-chromium",
+                    command: "uv run playwright install chromium",
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      }),
+    ).toEqual({
+      available: false,
+      reason: {
+        type: "missing-setup",
+        requirements: [
+          {
+            name: "playwright-chromium",
+            command: "uv run playwright install chromium",
+          },
+        ],
+      },
+    });
+  });
+
+  it("fails open when an unavailable format has no requirements", () => {
+    expect(
+      status("pdf", {
+        availability: {
+          status: "success",
+          data: {
+            source: "server",
+            formats: [
+              {
+                format: "pdf",
+                dependenciesAvailable: false,
+                missingPackages: [],
+                missingSetup: [],
+              },
+            ],
+          },
+        },
+      }),
+    ).toEqual({ available: true, availabilityCheckFailed: true });
+  });
+
   it.each([
     ["html", true, undefined],
     ["markdown", true, undefined],

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

@@ -1,18 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import {
+  MARKDOWN_EXTENSIONS,
+  MARKDOWN_SUFFIXES,
+} from "@/core/network/markdown-export";
 import { Filenames } from "@/utils/filenames";
 import { shellQuote } from "@/utils/shell";
 import type { ExportFormat, ExportOptions, MarkdownFlavor } from "./state";
 
-const MARKDOWN_EXTENSIONS: Record<MarkdownFlavor, string> = {
-  pymdown: "md",
-  qmd: "qmd",
-  mystmd: "myst.md",
-  mdx: "mdx",
-};
-
-const MARKDOWN_SUFFIXES = [".myst.md", ".markdown", ".qmd", ".mdx", ".md"];
-
 function inferMarkdownFlavor(filename: string): MarkdownFlavor {
   if (filename.endsWith(".myst.md")) {
     return "mystmd";

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/chrome/wrapper/useOpenAiAssistant.ts

@@ -4,7 +4,7 @@ import { useSetAtom, useStore } from "jotai";
 import useEvent from "react-use-event-hook";
 import { agentSessionStateAtom } from "@/components/chat/acp/state";
 import { toast } from "@/components/ui/use-toast";
-import { useModelChange } from "@/core/ai/config";
+import { useAIConfigActions } from "@/core/ai/config";
 import { pendingAiPromptAtom } from "@/core/ai/state";
 import type { CopilotMode } from "@/core/ai/tools/registry";
 import { aiModelConfiguredAtom } from "@/core/config/config";
@@ -43,7 +43,7 @@ export function resolveAiPanelTab(
 export function useOpenAiAssistant() {
   const { openApplication } = useChromeActions();
   const { setAiPanelTab } = useAiPanelTab();
-  const { saveModeChange } = useModelChange();
+  const { saveModeChange } = useAIConfigActions();
   const setPendingPrompt = useSetAtom(pendingAiPromptAtom);
   const store = useStore();
 

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