@marimo-team/islands 0.24.1-dev2 → 0.24.1-dev20

package/dist/{toDate-BGM7kFtQ.js → toDate-CjUYDkFI.js}

@@ -54,8 +54,8 @@ const viewStateAtom = atom({
   cellAnchor: null
 }), initialModeAtom = atom(void 0), kioskModeAtom = atom(false);
 function useInstallAllowed() {
-  let { mode: e } = useAtomValue(viewStateAtom);
-  return e !== "read";
+  let { mode: e } = useAtomValue(viewStateAtom), S = useAtomValue(kioskModeAtom), C = new URLSearchParams(window.location.search).get(KnownQueryParams.kiosk) === "true";
+  return e !== "read" && !S && !C;
 }
 const WebSocketState = {
   NOT_STARTED: "NOT_STARTED",

package/dist/{vega-component-CJug-VdR.js → vega-component-CioKuDut.js}

@@ -2,7 +2,7 @@ import { o as __toESM } from "./chunk-Bfp04NdC.js";
 import { g as Logger, h as cn, m as Events } from "./button-Dr2uAwhT.js";
 import { t as require_react } from "./react-DhGsCS90.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-DsR6imPN.js";
-import { c as asRemoteURL, w as CircleQuestionMark } from "./toDate-BGM7kFtQ.js";
+import { c as asRemoteURL, w as CircleQuestionMark } from "./toDate-CjUYDkFI.js";
 import "./react-dom-CmENFV8Q.js";
 import { t as require_jsx_runtime } from "./jsx-runtime-Dp_oQwaf.js";
 import "./zod-BFY2SnzC.js";
@@ -12,7 +12,7 @@ import { t as debounce_default } from "./debounce-D784bpms.js";
 import { A as useEvent_default, n as useTheme } from "./useTheme-BzEXeAR5.js";
 import { s as uniq } from "./arrays-C56grfjL.js";
 import { t as Objects } from "./objects-UzwQd5gx.js";
-import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-HSfYlcA8.js";
+import { a as isValid, i as AlertTitle, n as Alert, t as arrow } from "./formats-Dz0QNUEa.js";
 import { A as getContainerWidth, n as formats } from "./vega-loader.browser-CGb-2Kwi.js";
 import { a as tooltipHandler, n as vegaLoadData } from "./loader-DTnbNSVZ.js";
 import { t as j } from "./react-vega-zyfTF9SY.js";

package/package.json

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

package/src/__mocks__/requests.ts

@@ -100,6 +100,10 @@ export const MockRequestClient = {
           },
         ],
       }),
+      installExportRequirements: vi.fn().mockResolvedValue({
+        source: "server",
+        formats: [],
+      }),
       exportAsHTML: vi.fn().mockResolvedValue({
         contents: "",
         filename: "notebook.html",

package/src/components/app-config/optional-features.test.ts

@@ -0,0 +1,78 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { isPackageRequirementInstalled } from "./optional-features";
+
+describe("isPackageRequirementInstalled", () => {
+  const installedPackages = [
+    { name: "mcp", version: "2.0.0" },
+    { name: "polars", version: "1.8.2" },
+  ];
+
+  it("requires the package to be installed", () => {
+    expect(
+      isPackageRequirementInstalled({ name: "missing" }, installedPackages),
+    ).toBe(false);
+  });
+
+  it("accepts an installed package without a minimum version", () => {
+    expect(
+      isPackageRequirementInstalled({ name: "polars" }, installedPackages),
+    ).toBe(true);
+  });
+
+  it("rejects an installed package below the minimum version", () => {
+    expect(
+      isPackageRequirementInstalled(
+        { name: "mcp", minVersion: "2.1.0" },
+        installedPackages,
+      ),
+    ).toBe(false);
+  });
+
+  it.each(["2.0.0rc1", "2.0.0.dev1", "2.0.0-beta1"])(
+    "rejects the prerelease version %s",
+    (version) => {
+      expect(
+        isPackageRequirementInstalled({ name: "mcp", minVersion: "2.0.0" }, [
+          { name: "mcp", version },
+        ]),
+      ).toBe(false);
+    },
+  );
+
+  it.each(["2.1.0rc1", "3.0.0rc1"])(
+    "accepts the later prerelease version %s",
+    (version) => {
+      expect(
+        isPackageRequirementInstalled({ name: "mcp", minVersion: "2.0.0" }, [
+          { name: "mcp", version },
+        ]),
+      ).toBe(true);
+    },
+  );
+
+  it("accepts an installed package at or above the minimum version", () => {
+    expect(
+      isPackageRequirementInstalled(
+        { name: "mcp", minVersion: "2.0.0" },
+        installedPackages,
+      ),
+    ).toBe(true);
+    expect(
+      isPackageRequirementInstalled(
+        { name: "mcp", minVersion: "1.9.0" },
+        installedPackages,
+      ),
+    ).toBe(true);
+  });
+
+  it("normalizes extras in the requirement name", () => {
+    expect(
+      isPackageRequirementInstalled(
+        { name: "polars[pyarrow]" },
+        installedPackages,
+      ),
+    ).toBe(true);
+  });
+});

package/src/components/app-config/optional-features.tsx

@@ -20,6 +20,7 @@ import { isWasm } from "@/core/wasm/utils";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { cn } from "@/utils/cn";
+import { semverSort } from "@/utils/versions";
 import { SettingSubtitle } from "./common";
 
 interface Package {
@@ -27,6 +28,35 @@ interface Package {
   minVersion?: string;
 }
 
+interface InstalledPackage {
+  name: string;
+  version: string;
+}
+
+const PEP_440_PRERELEASE =
+  /^((?:\d+!)?\d+(?:\.\d+)*)(?:[-_.]?(?:a|b|c|rc|alpha|beta|pre|preview|dev)\d*)/i;
+
+export function isPackageRequirementInstalled(
+  requirement: Package,
+  installedPackages: InstalledPackage[],
+): boolean {
+  const packageName = requirement.name.split("[")[0];
+  const installedPackage = installedPackages.find(
+    (pkg) => pkg.name === packageName,
+  );
+  if (!installedPackage) {
+    return false;
+  }
+  if (!requirement.minVersion) {
+    return true;
+  }
+  const prerelease = installedPackage.version.match(PEP_440_PRERELEASE);
+  if (prerelease) {
+    return semverSort(prerelease[1], requirement.minVersion) > 0;
+  }
+  return semverSort(installedPackage.version, requirement.minVersion) >= 0;
+}
+
 interface OptionalFeature {
   id: string;
   /**
@@ -77,8 +107,8 @@ const OPTIONAL_DEPENDENCIES: OptionalFeature[] = [
   },
   {
     id: "mcp",
-    packagesRequired: [{ name: "mcp", minVersion: "1" }],
-    additionalPackageInstalls: [{ name: "pydantic", minVersion: "2" }],
+    packagesRequired: [{ name: "mcp", minVersion: "2.0.0" }],
+    additionalPackageInstalls: [],
     description: "Connect to MCP servers",
   },
   {
@@ -123,9 +153,6 @@ export const OptionalFeatures: React.FC = () => {
   }
 
   const installedPackages = data?.packages || [];
-  const installedPackageNames = new Set(
-    installedPackages.map((pkg) => pkg.name),
-  );
 
   return (
     <div className="flex-1 flex flex-col overflow-hidden gap-2">
@@ -149,7 +176,7 @@ export const OptionalFeatures: React.FC = () => {
         <TableBody>
           {OPTIONAL_DEPENDENCIES.map((dep) => {
             const isInstalled = dep.packagesRequired.every((pkg) =>
-              installedPackageNames.has(pkg.name.split("[")[0]),
+              isPackageRequirementInstalled(pkg, installedPackages),
             );
             const packageSpec = dep.packagesRequired
               .map((pkg) => pkg.name)

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

@@ -13,12 +13,16 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { Dialog } from "@/components/ui/dialog";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { viewStateAtom } from "@/core/mode";
+import { kioskModeAtom, viewStateAtom } from "@/core/mode";
 import { requestClientAtom } from "@/core/network/requests";
+import { createErrorToastingRequests } from "@/core/network/requests-toasting";
+import type { ExportAvailabilityResponse } from "@/core/network/types";
 import { filenameAtom } from "@/core/saving/file-state";
 import { store } from "@/core/state/jotai";
 import { isWasm } from "@/core/wasm/utils";
 import * as copyModule from "@/utils/copy";
+import { Deferred } from "@/utils/Deferred";
+import { HTTPError } from "@/utils/errors";
 import { ExportDialog } from "../export-dialog";
 import {
   DEFAULT_EXPORT_OPTIONS,
@@ -27,14 +31,22 @@ import {
   lastExportFormatAtom,
 } from "../state";
 
-const { exportNotebookMock } = vi.hoisted(() => ({
+const { exportNotebookMock, toastMock } = vi.hoisted(() => ({
   exportNotebookMock: vi.fn().mockResolvedValue(undefined),
+  toastMock: vi.fn(() => ({
+    dismiss: vi.fn(),
+    update: vi.fn(),
+  })),
 }));
 
 vi.mock("@/utils/copy", () => ({
   copyToClipboard: vi.fn().mockResolvedValue(undefined),
 }));
 
+vi.mock("@/components/ui/use-toast", () => ({
+  toast: toastMock,
+}));
+
 vi.mock("@/core/wasm/utils", async (importOriginal) => {
   const actual = await importOriginal<typeof import("@/core/wasm/utils")>();
   return { ...actual, isWasm: vi.fn(() => false) };
@@ -67,6 +79,32 @@ async function waitForExportEnabled() {
   );
 }
 
+type FormatAvailability = ExportAvailabilityResponse["formats"][number];
+
+function formatAvailability(
+  format: FormatAvailability["format"],
+  overrides: Partial<Omit<FormatAvailability, "format">> = {},
+): FormatAvailability {
+  return {
+    format,
+    dependenciesAvailable: true,
+    missingPackages: [],
+    missingSetup: [],
+    ...overrides,
+  };
+}
+
+function serverAvailability(
+  ...formats: FormatAvailability[]
+): ExportAvailabilityResponse {
+  return { source: "server", formats };
+}
+
+const PLAYWRIGHT_SETUP = {
+  name: "playwright-chromium",
+  command: "uv run playwright install chromium",
+} as const;
+
 describe("ExportDialog", () => {
   beforeEach(() => {
     vi.clearAllMocks();
@@ -74,8 +112,10 @@ describe("ExportDialog", () => {
     store.set(requestClientAtom, MockRequestClient.create());
     store.set(filenameAtom, "/project/notebook.py");
     store.set(viewStateAtom, { mode: "edit", cellAnchor: null });
+    store.set(kioskModeAtom, false);
     store.set(exportOptionsAtom, DEFAULT_EXPORT_OPTIONS);
     store.set(lastExportFormatAtom, "html");
+    window.history.replaceState(null, "", "/");
     vi.mocked(isWasm).mockReturnValue(false);
     vi.stubGlobal("matchMedia", () => ({
       matches: false,
@@ -248,54 +288,80 @@ describe("ExportDialog", () => {
     expect(tablist).toHaveAttribute("aria-orientation", "vertical");
   });
 
-  it("keeps unavailable formats visible and names missing packages", async () => {
+  it("installs missing packages and applies refreshed availability", async () => {
+    const install = new Deferred<ExportAvailabilityResponse>();
+    const installExportRequirements = vi.fn(() => install.promise);
+    const getExportAvailability = vi.fn().mockResolvedValue(
+      serverAvailability(
+        formatAvailability("ipynb", {
+          dependenciesAvailable: false,
+          missingPackages: ["nbformat"],
+        }),
+        formatAvailability("pdf", {
+          dependenciesAvailable: false,
+          missingPackages: ["nbconvert[webpdf]", "nbformat"],
+        }),
+      ),
+    );
     store.set(
       requestClientAtom,
       MockRequestClient.create({
-        getExportAvailability: vi.fn().mockResolvedValue({
-          source: "server",
-          formats: [
-            {
-              format: "pdf",
-              dependenciesAvailable: false,
-              missingPackages: ["nbconvert[webpdf]"],
-              missingSetup: [],
-            },
-          ],
-        }),
+        getExportAvailability,
+        installExportRequirements,
       }),
     );
 
     renderDialog("pdf");
 
-    expect(await screen.findByText("nbconvert[webpdf]")).toBeVisible();
-    expect(
-      screen.getByText(/where marimo is running to use this export/),
-    ).toBeVisible();
+    const packages = await screen.findByText("nbconvert[webpdf], nbformat");
+    expect(packages.parentElement).toHaveTextContent(
+      "PDF export requires nbconvert[webpdf], nbformat.",
+    );
     expect(screen.getByTestId("export-submit")).toBeDisabled();
     expect(screen.getByTestId("export-format-pdf")).toBeVisible();
+
+    const installButton = screen.getByRole("button", { name: "Install" });
+    const pdfTab = screen.getByTestId("export-format-pdf");
+    const htmlTab = screen.getByTestId("export-format-html");
+
+    fireEvent.click(installButton);
+
+    await waitFor(() =>
+      expect(installExportRequirements).toHaveBeenCalledWith({ format: "pdf" }),
+    );
+    expect(installButton).toHaveAttribute("aria-busy", "true");
+    expect(htmlTab).toBeDisabled();
+
+    fireEvent.click(installButton);
+    fireEvent.click(htmlTab);
+    expect(installExportRequirements).toHaveBeenCalledOnce();
+    expect(pdfTab).toHaveAttribute("data-state", "active");
+
+    install.resolve(
+      serverAvailability(
+        formatAvailability("ipynb"),
+        formatAvailability("pdf"),
+      ),
+    );
+    await waitForExportEnabled();
+    expect(getExportAvailability).toHaveBeenCalledOnce();
+
+    fireEvent.click(screen.getByTestId("export-format-ipynb"));
+    expect(screen.getByTestId("export-submit")).toBeEnabled();
   });
 
   it("explains missing Playwright Chromium setup", async () => {
     store.set(
       requestClientAtom,
       MockRequestClient.create({
-        getExportAvailability: vi.fn().mockResolvedValue({
-          source: "server",
-          formats: [
-            {
-              format: "pdf",
+        getExportAvailability: vi.fn().mockResolvedValue(
+          serverAvailability(
+            formatAvailability("pdf", {
               dependenciesAvailable: false,
-              missingPackages: [],
-              missingSetup: [
-                {
-                  name: "playwright-chromium",
-                  command: "uv run playwright install chromium",
-                },
-              ],
-            },
-          ],
-        }),
+              missingSetup: [PLAYWRIGHT_SETUP],
+            }),
+          ),
+        ),
       }),
     );
 
@@ -305,9 +371,115 @@ describe("ExportDialog", () => {
       await screen.findByText("PDF export requires Playwright Chromium."),
     ).toBeVisible();
     expect(
-      screen.getByText("uv run playwright install chromium"),
+      screen.queryByText("uv run playwright install chromium"),
+    ).not.toBeInTheDocument();
+    expect(screen.getByTestId("export-submit")).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Install" })).toBeVisible();
+  });
+
+  it.each([
+    ["read mode", "read", false, false],
+    ["connected kiosk mode", "edit", true, false],
+    ["pre-connection kiosk mode", "edit", false, true],
+  ] as const)(
+    "shows the setup command when installation is not allowed in %s",
+    async (_label, mode, kioskMode, kioskRequested) => {
+      store.set(viewStateAtom, { mode, cellAnchor: null });
+      store.set(kioskModeAtom, kioskMode);
+      if (kioskRequested) {
+        window.history.replaceState(null, "", "/?kiosk=true");
+      }
+      store.set(
+        requestClientAtom,
+        MockRequestClient.create({
+          getExportAvailability: vi.fn().mockResolvedValue(
+            serverAvailability(
+              formatAvailability("pdf", {
+                dependenciesAvailable: false,
+                missingSetup: [PLAYWRIGHT_SETUP],
+              }),
+            ),
+          ),
+        }),
+      );
+
+      renderDialog("pdf");
+
+      expect(
+        await screen.findByText("PDF export requires Playwright Chromium."),
+      ).toBeVisible();
+      expect(
+        screen.getByText("uv run playwright install chromium"),
+      ).toBeVisible();
+      expect(
+        screen.queryByRole("button", { name: "Install" }),
+      ).not.toBeInTheDocument();
+    },
+  );
+
+  it("allows requirement installation when kiosk is false", async () => {
+    window.history.replaceState(null, "", "/?kiosk=false");
+    store.set(
+      requestClientAtom,
+      MockRequestClient.create({
+        getExportAvailability: vi.fn().mockResolvedValue(
+          serverAvailability(
+            formatAvailability("pdf", {
+              dependenciesAvailable: false,
+              missingSetup: [PLAYWRIGHT_SETUP],
+            }),
+          ),
+        ),
+      }),
+    );
+
+    renderDialog("pdf");
+
+    expect(
+      await screen.findByRole("button", { name: "Install" }),
     ).toBeVisible();
+  });
+
+  it("restores the install action when installation fails", async () => {
+    const error = new HTTPError(500, "Server Error", {
+      detail: "Playwright Chromium installation failed. Check the server logs.",
+    });
+    const installExportRequirements = vi.fn().mockRejectedValue(error);
+    const getExportAvailability = vi.fn().mockResolvedValue(
+      serverAvailability(
+        formatAvailability("pdf", {
+          dependenciesAvailable: false,
+          missingPackages: ["nbconvert[webpdf]"],
+        }),
+      ),
+    );
+    store.set(
+      requestClientAtom,
+      createErrorToastingRequests(
+        MockRequestClient.create({
+          getExportAvailability,
+          installExportRequirements,
+        }),
+      ),
+    );
+
+    renderDialog("pdf");
+
+    const install = await screen.findByRole("button", { name: "Install" });
+    fireEvent.click(install);
+
+    await waitFor(() =>
+      expect(toastMock).toHaveBeenCalledWith({
+        title: "Failed to install export requirements",
+        description:
+          "Playwright Chromium installation failed. Check the server logs.",
+        variant: "danger",
+      }),
+    );
+    expect(install).toBeEnabled();
+    expect(install).toHaveAttribute("aria-busy", "false");
     expect(screen.getByTestId("export-submit")).toBeDisabled();
+    expect(getExportAvailability).toHaveBeenCalledOnce();
   });
 
   it("announces requirement checks as status updates", () => {

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

@@ -28,13 +28,17 @@ export const ExportDialog: React.FC<{
   const {
     dialogRef,
     isExporting,
+    isInstalling,
+    canInstall,
     formats,
     options,
     selected,
     selectFormat,
     updateOptions,
+    installRequirements,
     submit,
   } = useExportDialog({ initialFormat, onClose });
+  const isBusy = isExporting || isInstalling;
   const desktopLayout = useMediaQuery(DESKTOP_LAYOUT_QUERY);
   const {
     format,
@@ -86,7 +90,7 @@ export const ExportDialog: React.FC<{
               <TabsTrigger
                 key={candidate}
                 value={candidate}
-                disabled={isExporting}
+                disabled={isBusy}
                 className="min-w-0 justify-start gap-2 px-2.5 py-2 text-xs data-[state=active]:shadow-xs sm:w-full sm:text-sm"
                 data-testid={`export-format-${candidate}`}
               >
@@ -119,13 +123,15 @@ export const ExportDialog: React.FC<{
               format={format}
               formatLabel={definition.label}
               status={status}
+              onInstall={canInstall ? installRequirements : undefined}
+              isInstalling={isInstalling}
             />
 
             {usesBrowserPrint ? null : (
               <FormatOptions
                 options={options}
                 updateOptions={updateOptions}
-                disabled={isExporting}
+                disabled={isBusy}
               />
             )}
           </TabsContent>
@@ -173,7 +179,7 @@ export const ExportDialog: React.FC<{
           ) : null}
           <Button
             type="button"
-            disabled={!status.available || isExporting}
+            disabled={!status.available || isBusy}
             aria-busy={isExporting}
             onClick={submit}
             className={cn(