@marimo-team/islands 0.23.7-dev2 → 0.23.7-dev3

package/dist/{code-visibility-BZocwq8O.js → code-visibility-Dk3LFszN.js}

@@ -25680,7 +25680,7 @@ ${_}`,
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.7-dev2");
+  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.7-dev3");
   showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime = require_compiler_runtime();

package/dist/main.js

@@ -26,7 +26,7 @@ import { $ as useCellActions, At as DeferredRequestRegistry, B as safeExtractSet
 import { __tla as __tla_1 } from "./chunk-5FQGJX7Z-CO1e63h_.js";
 import { o as useSize, s as Root$2, u as createLucideIcon } from "./dist-ESg7xyoD.js";
 import { A as SquareFunction, C as DEFAULT_COLOR_SCHEME, D as SCALE_TYPE_DESCRIPTIONS, E as EMPTY_VALUE$1, O as TIME_UNIT_DESCRIPTIONS, S as DEFAULT_AGGREGATION, T as DEFAULT_TIME_UNIT, _ as AGGREGATION_TYPE_DESCRIPTIONS, a as AGGREGATION_FNS$1, b as COLOR_SCHEMES, c as COLOR_BY_FIELDS, d as NONE_VALUE, f as SELECTABLE_DATA_TYPES, g as TIME_UNITS, h as STRING_AGGREGATION_FNS, i as convertDataTypeToSelectable, j as ChartColumn, k as escapeFieldName, l as COMBINED_TIME_UNITS, m as SORT_TYPES, n as createSpecWithoutData, o as BIN_AGGREGATION, p as SINGLE_TIME_UNITS, r as isFieldSet, s as CHART_TYPES, t as augmentSpecWithData, u as ChartType, v as AGGREGATION_TYPE_ICON, w as DEFAULT_MAX_BINS_FACET, x as COUNT_FIELD, y as CHART_TYPE_ICON } from "./spec-DSIuqd3f.js";
-import { $ as filtersToFilterGroup, A as contextAwarePanelOwner, At as Funnel, B as TableCell, Bt as ChevronLeft, C as prettifyRowCount, Ct as useOverflowDetection, D as ContextAwarePanelItem, Dt as EmotionCacheProvider, E as ComboboxItem, Et as HtmlOutput, F as Toggle, Ft as Code, G as generateColumns, H as TableHeader, I as Fill, It as ChevronsUpDown, J as ColumnChartContext, K as inferFieldTypes, L as Provider$1, Lt as ChevronsRight, M as isCellAwareAtom, N as SlotNames, Nt as Ellipsis, O as PANEL_TYPES, Ot as TextWrap, P as slotsController, Pt as Download, Q as usePrevious$1, R as Table, Rt as ChevronsLeft, S as prettifyRowColumnCount, St as LazyVegaEmbed, T as Combobox, Tt as Kbd, U as TableRow, V as TableHead, Vt as ArrowDownWideNarrow, W as NAMELESS_COLUMN_PREFIX, X as DelayMount, Y as ColumnChartSpecModel, Z as useIntersectionObserver, _ as downloadBlob, _t as TabsList, at as TOO_MANY_ROWS, b as Progress, bt as ChartInfoState, c as Slide, ct as Command, d as JsonOutput, dt as CommandItem, et as getPageIndexForRow, f as OutputArea, ft as CommandList, g as ADD_PRINTING_CLASS, gt as TabsContent, h as InstallPackageButton, ht as Tabs, it as SELECT_COLUMN_ID, j as contextAwarePanelType, jt as EyeOff, k as contextAwarePanelOpen, kt as GripHorizontal, l as RadioGroup, lt as CommandEmpty, m as DataTable, mt as Maps, n as marimoVersionAtom, nt as loadTableData, o as SLIDE_TYPE_OPTIONS_BY_VALUE, ot as toFieldTypes, p as OutputRenderer, pt as CommandSeparator, q as renderCellValue, r as showCodeInRunModeAtom, rt as INDEX_COLUMN_NAME, st as getMimeValues, t as useNotebookCodeAvailable, tt as loadTableAndRawData, u as RadioGroupItem, ut as CommandInput, v as downloadByURL, vt as TabsTrigger, w as useInternalStateWithSync, wt as RenderTextWithLinks, x as Filenames, xt as ChartLoadingState, y as downloadHTMLAsImage, yt as ChartErrorState, z as TableBody, zt as ChevronsDownUp, __tla as __tla_2 } from "./code-visibility-BZocwq8O.js";
+import { $ as filtersToFilterGroup, A as contextAwarePanelOwner, At as Funnel, B as TableCell, Bt as ChevronLeft, C as prettifyRowCount, Ct as useOverflowDetection, D as ContextAwarePanelItem, Dt as EmotionCacheProvider, E as ComboboxItem, Et as HtmlOutput, F as Toggle, Ft as Code, G as generateColumns, H as TableHeader, I as Fill, It as ChevronsUpDown, J as ColumnChartContext, K as inferFieldTypes, L as Provider$1, Lt as ChevronsRight, M as isCellAwareAtom, N as SlotNames, Nt as Ellipsis, O as PANEL_TYPES, Ot as TextWrap, P as slotsController, Pt as Download, Q as usePrevious$1, R as Table, Rt as ChevronsLeft, S as prettifyRowColumnCount, St as LazyVegaEmbed, T as Combobox, Tt as Kbd, U as TableRow, V as TableHead, Vt as ArrowDownWideNarrow, W as NAMELESS_COLUMN_PREFIX, X as DelayMount, Y as ColumnChartSpecModel, Z as useIntersectionObserver, _ as downloadBlob, _t as TabsList, at as TOO_MANY_ROWS, b as Progress, bt as ChartInfoState, c as Slide, ct as Command, d as JsonOutput, dt as CommandItem, et as getPageIndexForRow, f as OutputArea, ft as CommandList, g as ADD_PRINTING_CLASS, gt as TabsContent, h as InstallPackageButton, ht as Tabs, it as SELECT_COLUMN_ID, j as contextAwarePanelType, jt as EyeOff, k as contextAwarePanelOpen, kt as GripHorizontal, l as RadioGroup, lt as CommandEmpty, m as DataTable, mt as Maps, n as marimoVersionAtom, nt as loadTableData, o as SLIDE_TYPE_OPTIONS_BY_VALUE, ot as toFieldTypes, p as OutputRenderer, pt as CommandSeparator, q as renderCellValue, r as showCodeInRunModeAtom, rt as INDEX_COLUMN_NAME, st as getMimeValues, t as useNotebookCodeAvailable, tt as loadTableAndRawData, u as RadioGroupItem, ut as CommandInput, v as downloadByURL, vt as TabsTrigger, w as useInternalStateWithSync, wt as RenderTextWithLinks, x as Filenames, xt as ChartLoadingState, y as downloadHTMLAsImage, yt as ChartErrorState, z as TableBody, zt as ChevronsDownUp, __tla as __tla_2 } from "./code-visibility-Dk3LFszN.js";
 import { c as Calendar, i as createReducerAndAtoms, n as useOnUnmount, o as ToggleLeft, t as useOnMount } from "./useLifecycle-CjMjllqy.js";
 import { n as $fb18d541ea1ad717$export$ad991b66133851cf, r as $5a387cc49350e6db$export$722debc0e56fea39, t as $896ba0a80a8f4d36$export$85fd5fdf27bacc79 } from "./useDateFormatter-B3mCQMP3.js";
 import { t as Check } from "./check-CFM2mVDr.js";
@@ -35311,15 +35311,19 @@ ${c}
     constructor() {
       __publicField(this, "tagName", "marimo-mermaid");
       __publicField(this, "validator", object({
-        diagram: string()
+        diagram: string(),
+        theme: string().optional(),
+        theme_variables: record(string(), string()).optional()
       }));
     }
     render(e) {
       return (0, import_jsx_runtime.jsx)(LazyMermaid, {
-        diagram: e.data.diagram
+        diagram: e.data.diagram,
+        theme: e.data.theme,
+        themeVariables: e.data.theme_variables
       });
     }
-  }, LazyMermaid = (0, import_react.lazy)(() => import("./mermaid-DJ1NyBGw.js").then(async (m) => {
+  }, LazyMermaid = (0, import_react.lazy)(() => import("./mermaid-CEbzCxCc.js").then(async (m) => {
     await m.__tla;
     return m;
   })), import_compiler_runtime$20 = require_compiler_runtime();
@@ -44563,7 +44567,7 @@ ${c}
     if (l && l !== "slide") return l;
     if (c == null ? void 0 : c.has(e)) return "skip";
   }
-  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-CP9dWJEm.js"));
+  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-FAv_bXNy.js"));
   const SlidesLayoutPlugin = {
     type: "slides",
     name: "Slides",

package/dist/{mermaid-DJ1NyBGw.js → mermaid-CEbzCxCc.js}

@@ -1053,39 +1053,42 @@ ${e.themeCSS}`), e.fontFamily !== void 0 && (C += `
     }, () => "abcdefghijklmnopqrstuvwxyz"[Math.floor(Math.random() * 26)]).join("");
   }
   mermaid_default = (e) => {
-    let C = (0, import_compiler_runtime.c)(13), { diagram: w } = e, [T] = (0, import_react.useState)(_temp), D = useTheme().theme === "dark";
+    let C = (0, import_compiler_runtime.c)(15), { diagram: w, theme: T, themeVariables: D } = e, [k] = (0, import_react.useState)(_temp), j = useTheme().theme === "dark", M = T ?? (j ? "dark" : "forest");
     mermaid_default$1.initialize({
       ...DEFAULT_CONFIG,
-      theme: D ? "dark" : "forest",
-      darkMode: D
+      theme: M,
+      themeVariables: D,
+      darkMode: j
     });
-    let k;
-    C[0] === w ? k = C[1] : (k = w.trim(), C[0] = w, C[1] = k);
-    let j = k, M;
-    C[2] !== T || C[3] !== j ? (M = async () => (await mermaid_default$1.render(T, j, void 0).catch((e2) => {
-      var _a2;
-      throw (_a2 = document.getElementById(T)) == null ? void 0 : _a2.remove(), Logger.warn("Failed to render mermaid diagram", e2), e2;
-    })).svg, C[2] = T, C[3] = j, C[4] = M) : M = C[4];
     let N;
-    C[5] !== D || C[6] !== T || C[7] !== j ? (N = [
+    C[0] === w ? N = C[1] : (N = w.trim(), C[0] = w, C[1] = N);
+    let P = N, F;
+    C[2] !== k || C[3] !== P ? (F = async () => (await mermaid_default$1.render(k, P, void 0).catch((e2) => {
+      var _a2;
+      throw (_a2 = document.getElementById(k)) == null ? void 0 : _a2.remove(), Logger.warn("Failed to render mermaid diagram", e2), e2;
+    })).svg, C[2] = k, C[3] = P, C[4] = F) : F = C[4];
+    let I;
+    C[5] !== j || C[6] !== k || C[7] !== M || C[8] !== D || C[9] !== P ? (I = [
+      P,
+      k,
       j,
-      T,
+      M,
       D
-    ], C[5] = D, C[6] = T, C[7] = j, C[8] = N) : N = C[8];
-    let { data: P, error: F } = useAsyncData(M, N);
-    if (F) {
+    ], C[5] = j, C[6] = k, C[7] = M, C[8] = D, C[9] = P, C[10] = I) : I = C[10];
+    let { data: L, error: R } = useAsyncData(F, I);
+    if (R) {
       let e2;
-      return C[9] === F ? e2 = C[10] : (e2 = (0, import_jsx_runtime.jsx)(ErrorBanner, {
-        error: F
-      }), C[9] = F, C[10] = e2), e2;
+      return C[11] === R ? e2 = C[12] : (e2 = (0, import_jsx_runtime.jsx)(ErrorBanner, {
+        error: R
+      }), C[11] = R, C[12] = e2), e2;
     }
-    if (!P) return null;
-    let I;
-    return C[11] === P ? I = C[12] : (I = (0, import_jsx_runtime.jsx)("div", {
+    if (!L) return null;
+    let z;
+    return C[13] === L ? z = C[14] : (z = (0, import_jsx_runtime.jsx)("div", {
       dangerouslySetInnerHTML: {
-        __html: P
+        __html: L
       }
-    }), C[11] = P, C[12] = I), I;
+    }), C[13] = L, C[14] = z), z;
   };
   function _temp() {
     return randomAlpha();

package/dist/{reveal-component-CP9dWJEm.js → reveal-component-FAv_bXNy.js}

@@ -8,7 +8,7 @@ import { t as require_react } from "./react-DA-nE2FX.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import "./html-to-image-hMMPiNe_.js";
 import "./chunk-5FQGJX7Z-CO1e63h_.js";
-import { Ft as Code, Mt as Expand, a as DEFAULT_SLIDE_TYPE, c as Slide, i as DEFAULT_DECK_TRANSITION, jt as EyeOff, s as SlideSidebar, t as useNotebookCodeAvailable } from "./code-visibility-BZocwq8O.js";
+import { Ft as Code, Mt as Expand, a as DEFAULT_SLIDE_TYPE, c as Slide, i as DEFAULT_DECK_TRANSITION, jt as EyeOff, s as SlideSidebar, t as useNotebookCodeAvailable } from "./code-visibility-Dk3LFszN.js";
 import "./input-BAOe64zx.js";
 import "./toDate-CHtl9vts.js";
 import "./react-dom-BWRJ_g_k.js";

package/package.json

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

package/src/plugins/core/__test__/sanitize.test.ts

@@ -145,6 +145,14 @@ describe("sanitizeHtml", () => {
     );
   });
 
+  test("preserves marimo-mermaid with theme attributes", () => {
+    const html =
+      "<marimo-mermaid data-diagram='&quot;graph TD\\nA --&gt; B&quot;' data-theme='&quot;base&quot;' data-theme_variables='{&quot;primaryColor&quot;: &quot;#E8EEF5&quot;, &quot;lineColor&quot;: &quot;#475569&quot;}'></marimo-mermaid>";
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<marimo-mermaid data-diagram="&quot;graph TD\\nA --> B&quot;" data-theme="&quot;base&quot;" data-theme_variables="{&quot;primaryColor&quot;: &quot;#E8EEF5&quot;, &quot;lineColor&quot;: &quot;#475569&quot;}"></marimo-mermaid>"`,
+    );
+  });
+
   test("keeps style tags with FORCE_BODY", () => {
     const html = "<style>body { color: red; }</style><p>Text</p>";
     expect(sanitizeHtml(html)).toMatchInlineSnapshot(

package/src/plugins/layout/__test__/MermaidPlugin.test.ts

@@ -0,0 +1,50 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, test } from "vitest";
+import { MermaidPlugin } from "../mermaid/MermaidPlugin";
+
+describe("MermaidPlugin validator", () => {
+  test("accepts optional theme and theme_variables", () => {
+    const plugin = new MermaidPlugin();
+    const result = plugin.validator.safeParse({
+      diagram: "graph TD\nA --> B",
+      theme: "base",
+      theme_variables: {
+        primaryColor: "#E8EEF5",
+        lineColor: "#475569",
+      },
+    });
+
+    expect(result.success).toBe(true);
+    if (!result.success) {
+      return;
+    }
+
+    expect(result.data).toEqual({
+      diagram: "graph TD\nA --> B",
+      theme: "base",
+      theme_variables: {
+        primaryColor: "#E8EEF5",
+        lineColor: "#475569",
+      },
+    });
+  });
+
+  test("accepts any string as theme", () => {
+    const plugin = new MermaidPlugin();
+    const result = plugin.validator.safeParse({
+      diagram: "graph TD\nA --> B",
+      theme: "invalid",
+    });
+
+    expect(result.success).toBe(true);
+    if (!result.success) {
+      return;
+    }
+
+    expect(result.data).toEqual({
+      diagram: "graph TD\nA --> B",
+      theme: "invalid",
+    });
+  });
+});

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

@@ -9,6 +9,8 @@ import type {
 
 interface Data {
   diagram: string;
+  theme?: string;
+  theme_variables?: Record<string, string>;
 }
 
 export class MermaidPlugin implements IStatelessPlugin<Data> {
@@ -16,10 +18,18 @@ export class MermaidPlugin implements IStatelessPlugin<Data> {
 
   validator = z.object({
     diagram: z.string(),
+    theme: z.string().optional(),
+    theme_variables: z.record(z.string(), z.string()).optional(),
   });
 
   render(props: IStatelessPluginProps<Data>): JSX.Element {
-    return <LazyMermaid diagram={props.data.diagram} />;
+    return (
+      <LazyMermaid
+        diagram={props.data.diagram}
+        theme={props.data.theme}
+        themeVariables={props.data.theme_variables}
+      />
+    );
   }
 }
 

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

@@ -10,6 +10,8 @@ import { Logger } from "@/utils/Logger";
 
 interface Props {
   diagram: string;
+  theme?: string;
+  themeVariables?: Record<string, string>;
   config?: MermaidConfig;
 }
 
@@ -62,14 +64,16 @@ function randomAlpha() {
   ).join("");
 }
 
-const Mermaid: React.FC<Props> = ({ diagram }) => {
+const Mermaid: React.FC<Props> = ({ diagram, theme, themeVariables }) => {
   // oxlint-disable-next-line react/hook-use-state
   const [id] = useState(() => randomAlpha());
 
   const darkMode = useTheme().theme === "dark";
+  const resolvedTheme = theme ?? (darkMode ? "dark" : "forest");
   mermaid.initialize({
     ...DEFAULT_CONFIG,
-    theme: darkMode ? "dark" : "forest",
+    theme: resolvedTheme as MermaidConfig["theme"],
+    themeVariables,
     darkMode: darkMode,
   });
 
@@ -86,7 +90,7 @@ const Mermaid: React.FC<Props> = ({ diagram }) => {
       });
 
     return result.svg;
-  }, [trimmedDiagram, id, darkMode]);
+  }, [trimmedDiagram, id, darkMode, resolvedTheme, themeVariables]);
 
   if (error) {
     return <ErrorBanner error={error} />;