@marimo-team/islands 0.19.12-dev1 → 0.20.0

package/src/plugins/impl/matrix.css

@@ -0,0 +1,45 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/* Left bracket — vertical line + corner ticks via ::before */
+td.bracket-l::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -4px;
+  width: 0;
+  border-left: 2px solid var(--foreground);
+  pointer-events: none;
+}
+td.bracket-l.bracket-t::before {
+  top: -1px;
+  width: 8px;
+  border-top: 2px solid var(--foreground);
+}
+td.bracket-l.bracket-b::before {
+  bottom: -1px;
+  width: 8px;
+  border-bottom: 2px solid var(--foreground);
+}
+
+/* Right bracket — vertical line + corner ticks via ::after */
+td.bracket-r::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -4px;
+  width: 0;
+  border-right: 2px solid var(--foreground);
+  pointer-events: none;
+}
+td.bracket-r.bracket-t::after {
+  top: -1px;
+  width: 8px;
+  border-top: 2px solid var(--foreground);
+}
+td.bracket-r.bracket-b::after {
+  bottom: -1px;
+  width: 8px;
+  border-bottom: 2px solid var(--foreground);
+}

package/src/plugins/layout/mermaid/mermaid.tsx

@@ -4,6 +4,7 @@ import type { MermaidConfig } from "mermaid";
 import mermaid from "mermaid";
 import React, { useState } from "react";
 import { useAsyncData } from "@/hooks/useAsyncData";
+import { ErrorBanner } from "@/plugins/impl/common/error-banner";
 import { useTheme } from "@/theme/useTheme";
 import { Logger } from "@/utils/Logger";
 
@@ -72,9 +73,12 @@ const Mermaid: React.FC<Props> = ({ diagram }) => {
     darkMode: darkMode,
   });
 
-  const { data: svg } = useAsyncData(async () => {
+  // Frontmatter does not work with newlines, so we trim the diagram to avoid these errors
+  const trimmedDiagram = diagram.trim();
+
+  const { data: svg, error } = useAsyncData(async () => {
     const result = await mermaid
-      .render(id, diagram, undefined)
+      .render(id, trimmedDiagram, undefined)
       .catch((error) => {
         document.getElementById(id)?.remove();
         Logger.warn("Failed to render mermaid diagram", error);
@@ -82,7 +86,11 @@ const Mermaid: React.FC<Props> = ({ diagram }) => {
       });
 
     return result.svg;
-  }, [diagram, id, darkMode]);
+  }, [trimmedDiagram, id, darkMode]);
+
+  if (error) {
+    return <ErrorBanner error={error} />;
+  }
 
   if (!svg) {
     return null;

package/src/plugins/plugins.ts

@@ -22,8 +22,10 @@ import { DataFramePlugin } from "./impl/data-frames/DataFramePlugin";
 import { FileBrowserPlugin } from "./impl/FileBrowserPlugin";
 import { FileUploadPlugin } from "./impl/FileUploadPlugin";
 import { FormPlugin } from "./impl/FormPlugin";
+import { MatrixPlugin } from "./impl/MatrixPlugin";
 import { MicrophonePlugin } from "./impl/MicrophonePlugin";
 import { MultiselectPlugin } from "./impl/MultiselectPlugin";
+import { MatplotlibPlugin } from "./impl/matplotlib/MatplotlibPlugin";
 import { NumberPlugin } from "./impl/NumberPlugin";
 import { PanelPlugin } from "./impl/panel/PanelPlugin";
 import { PlotlyPlugin } from "./impl/plotly/PlotlyPlugin";
@@ -67,6 +69,7 @@ export const UI_PLUGINS: IPlugin<any, unknown>[] = [
   new FileUploadPlugin(),
   FileBrowserPlugin,
   FormPlugin,
+  new MatrixPlugin(),
   new MicrophonePlugin(),
   new MultiselectPlugin(),
   new NumberPlugin(),
@@ -79,6 +82,7 @@ export const UI_PLUGINS: IPlugin<any, unknown>[] = [
   new TextAreaPlugin(),
   new TextInputPlugin(),
   new VegaPlugin(),
+  new MatplotlibPlugin(),
   new PlotlyPlugin(),
   ChatPlugin,
   DataExplorerPlugin,

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

@@ -17,9 +17,11 @@ vi.mock("html-to-image", () => ({
 
 // Mock the toast module
 const mockDismiss = vi.fn();
+const mockUpdate = vi.fn();
 vi.mock("@/components/ui/use-toast", () => ({
   toast: vi.fn(() => ({
     dismiss: mockDismiss,
+    update: mockUpdate,
   })),
 }));
 
@@ -113,6 +115,51 @@ describe("withLoadingToast", () => {
     );
   });
 
+  it("should update toast on finish when onFinish is provided", async () => {
+    await withLoadingToast("Uploading files...", async () => "done", {
+      title: "Upload complete",
+    });
+
+    expect(toast).toHaveBeenCalledTimes(1);
+    expect(mockUpdate).toHaveBeenCalledTimes(1);
+    expect(mockUpdate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Upload complete",
+        description: undefined,
+        duration: 1200,
+      }),
+    );
+    expect(mockDismiss).not.toHaveBeenCalled();
+  });
+
+  it("should allow onFinish to override duration", async () => {
+    await withLoadingToast("Uploading files...", async () => "done", {
+      title: "Upload complete",
+      duration: 2000,
+    });
+
+    expect(mockUpdate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        duration: 2000,
+      }),
+    );
+  });
+
+  it("should not update toast when the operation fails", async () => {
+    await expect(
+      withLoadingToast(
+        "Uploading files...",
+        async () => {
+          throw new Error("Upload failed");
+        },
+        { title: "Upload complete" },
+      ),
+    ).rejects.toThrow("Upload failed");
+
+    expect(toast).toHaveBeenCalledTimes(1);
+    expect(mockUpdate).not.toHaveBeenCalled();
+  });
+
   it("should wait for the async function to complete", async () => {
     const events: string[] = [];
 

package/src/utils/download.ts

@@ -13,6 +13,9 @@ import { Logger } from "./Logger";
 import { ProgressState } from "./progress";
 import { ToastProgress } from "./toast-progress";
 
+const FINISH_TOAST_DURATION_MS = 1200;
+type ToastConfig = Omit<Parameters<typeof toast>[0], "id">;
+
 /**
  * Show a loading toast while an async operation is in progress.
  * Automatically dismisses the toast when the operation completes or fails.
@@ -20,6 +23,7 @@ import { ToastProgress } from "./toast-progress";
 export async function withLoadingToast<T>(
   title: string,
   fn: (progress: ProgressState) => Promise<T>,
+  onFinish?: ToastConfig,
 ): Promise<T> {
   const progress = ProgressState.indeterminate();
   const loadingToast = toast({
@@ -29,7 +33,15 @@ export async function withLoadingToast<T>(
   });
   try {
     const result = await fn(progress);
-    loadingToast.dismiss();
+    if (onFinish) {
+      loadingToast.update({
+        duration: FINISH_TOAST_DURATION_MS,
+        description: undefined,
+        ...onFinish,
+      });
+    } else {
+      loadingToast.dismiss();
+    }
     return result;
   } catch (error) {
     loadingToast.dismiss();

package/src/utils/links.ts

@@ -7,5 +7,5 @@ import { asURL } from "./url";
  */
 export function openNotebook(path: string) {
   // There is no leading `/` in the path in order to work when marimo is at a subpath.
-  window.open(asURL(`?file=${path}`).toString(), "_blank");
+  window.open(asURL(`?file=${encodeURIComponent(path)}`).toString(), "_blank");
 }

package/src/utils/urls.ts

@@ -24,7 +24,7 @@ export function hasQueryParam(key: string, value?: string): boolean {
 export function newNotebookURL() {
   const sessionId = generateSessionId();
   const initializationId = `__new__${sessionId}`;
-  return asURL(`?file=${initializationId}`).toString();
+  return asURL(`?file=${encodeURIComponent(initializationId)}`).toString();
 }
 
 const urlRegex = /^(https?:\/\/\S+)$/;