@marimo-team/islands 0.24.1-dev50 → 0.24.1-dev51

package/dist/{common-DuhsfU8I.js → common-DTAGJQCY.js}

@@ -31787,7 +31787,7 @@ function ZG() {
 		return i.warn("Failed to get version from mount config"), null;
 	}
 }
-var QG = ZG() || "0.24.1-dev50", $G = Ti(QG), eK = Ti(!0);
+var QG = ZG() || "0.24.1-dev51", $G = Ti(QG), eK = Ti(!0);
 Ti(null);
 //#endregion
 //#region src/core/meta/code-visibility.ts

package/dist/main.js

@@ -6,7 +6,7 @@ import { n as x, r as S, t as C } from "./copy-DgAphl4k.js";
 import { $t as w, At as T, B as E, C as D, Cn as O, Ct as k, Dn as A, Dt as j, En as M, Et as N, F as P, Ft as F, G as I, Gn as L, Gt as ee, H as te, Hn as R, Ht as ne, I as z, In as re, J as ie, Jn as ae, K as oe, Kn as se, Kt as ce, L as le, Ln as ue, Mn as de, Nn as fe, On as pe, Ot as me, P as he, Pn as ge, Pt as _e, Q as ve, Qn as ye, R as be, Rt as xe, Sn as Se, St as Ce, Tt as we, U as Te, Un as Ee, Ut as De, Vt as Oe, W as ke, Wn as Ae, X as je, Y as Me, Yn as Ne, Yt as Pe, Zn as Fe, _ as Ie, _n as Le, _t as Re, a as ze, an as Be, b as Ve, bn as He, bt as Ue, ct as We, en as Ge, g as Ke, gt as qe, hn as Je, i as Ye, in as Xe, it as Ze, j as Qe, jn as $e, jt as et, k as tt, mn as nt, n as rt, nn as it, nt as at, o as ot, ot as st, pn as ct, q as lt, rn as ut, rt as dt, st as ft, tn as pt, un as mt, v as ht, vt as gt, xn as _t, xt as vt, y as yt, yn as bt, yt as xt, z as St, zn as Ct } from "./html-to-image-hKcfSWj_.js";
 import { o as wt, s as Tt, u as Et } from "./dist-DTSuOdDc.js";
 import { D as Dt, E as Ot, O as kt, S as At, T as jt, _ as Mt, a as Nt, c as Pt, d as Ft, f as It, g as Lt, h as Rt, i as zt, l as Bt, m as Vt, n as Ht, o as Ut, p as Wt, r as Gt, s as Kt, t as qt, u as Jt, v as Yt, w as Xt, x as Zt, y as Qt } from "./spec-DqUrBQpS.js";
-import { $ as $t, $t as en, A as tn, At as nn, B as rn, Bt as an, C as on, Ct as sn, D as cn, Dt as ln, E as un, Et as dn, F as fn, Ft as pn, G as mn, Gt as hn, H as gn, Ht as _n, I as vn, It as yn, Jt as bn, K as xn, Kt as Sn, L as Cn, Lt as wn, M as Tn, Mt as En, N as Dn, Nt as On, O as kn, Ot as An, P as jn, Pt as Mn, Q as Nn, Qt as Pn, R as Fn, Rt as In, S as Ln, St as Rn, T as zn, Tt as Bn, U as Vn, Ut as Hn, V as Un, Vt as Wn, W as Gn, Wt as Kn, Xt as qn, Yt as Jn, Z as Yn, Zt as Xn, _ as Zn, an as Qn, at as $n, b as er, bt as tr, c as nr, cn as rr, ct as ir, d as ar, dn as or, dt as sr, en as cr, et as lr, f as ur, fn as dr, ft as fr, g as pr, gt as mr, h as hr, ht as gr, i as _r, it as vr, j as yr, jt as br, k as xr, kt as Sr, ln as Cr, lt as wr, m as Tr, mt as Er, n as Dr, nn as Or, nt as kr, on as Ar, ot as jr, p as Mr, pn as Nr, pt as Pr, q as Fr, qt as Ir, r as Lr, rn as Rr, rt as zr, sn as Br, st as Vr, t as Hr, tn as Ur, tt as Wr, u as Gr, un as Kr, ut as qr, v as Jr, w as Yr, wt as Xr, x as Zr, xt as Qr, y as $r, yt as ei, z as ti, zt as ni } from "./common-DuhsfU8I.js";
+import { $ as $t, $t as en, A as tn, At as nn, B as rn, Bt as an, C as on, Ct as sn, D as cn, Dt as ln, E as un, Et as dn, F as fn, Ft as pn, G as mn, Gt as hn, H as gn, Ht as _n, I as vn, It as yn, Jt as bn, K as xn, Kt as Sn, L as Cn, Lt as wn, M as Tn, Mt as En, N as Dn, Nt as On, O as kn, Ot as An, P as jn, Pt as Mn, Q as Nn, Qt as Pn, R as Fn, Rt as In, S as Ln, St as Rn, T as zn, Tt as Bn, U as Vn, Ut as Hn, V as Un, Vt as Wn, W as Gn, Wt as Kn, Xt as qn, Yt as Jn, Z as Yn, Zt as Xn, _ as Zn, an as Qn, at as $n, b as er, bt as tr, c as nr, cn as rr, ct as ir, d as ar, dn as or, dt as sr, en as cr, et as lr, f as ur, fn as dr, ft as fr, g as pr, gt as mr, h as hr, ht as gr, i as _r, it as vr, j as yr, jt as br, k as xr, kt as Sr, ln as Cr, lt as wr, m as Tr, mt as Er, n as Dr, nn as Or, nt as kr, on as Ar, ot as jr, p as Mr, pn as Nr, pt as Pr, q as Fr, qt as Ir, r as Lr, rn as Rr, rt as zr, sn as Br, st as Vr, t as Hr, tn as Ur, tt as Wr, u as Gr, un as Kr, ut as qr, v as Jr, w as Yr, wt as Xr, x as Zr, xt as Qr, y as $r, yt as ei, z as ti, zt as ni } from "./common-DTAGJQCY.js";
 import { c as ri, i as ii, n as ai, o as oi, t as si } from "./useLifecycle-D-zb2Ha5.js";
 import { t as ci } from "./check-DIJJHY-E.js";
 import { A as li, C as ui, D as di, E as fi, F as pi, I as mi, M as hi, N as gi, P as _i, R as vi, S as yi, a as bi, b as xi, c as Si, i as Ci, j as wi, l as Ti, n as Ei, o as Di, r as Oi, s as ki, t as Ai, w as ji, x as Mi } from "./select-Bakm9EUs.js";
@@ -35256,7 +35256,7 @@ function Gq(e) {
 }
 //#endregion
 //#region src/components/editor/renderers/slides-layout/slides-layout.tsx
-var Kq = q.lazy(() => import("./reveal-component-AVl0irhz.js")), qq = (e) => {
+var Kq = q.lazy(() => import("./reveal-component-DJp2KMep.js")), qq = (e) => {
 	let t = (0, Y.c)(33), { layout: n, setLayout: r, cells: i, mode: a } = e, o = Nm(k), s = a === "read" || o, c = Nm(lt) > 1, [l, u] = (0, q.useState)(null), d;
 	t[0] !== i || t[1] !== n ? (d = UU(i, n), t[0] = i, t[1] = n, t[2] = d) : d = t[2];
 	let { slideCells: f, skippedIds: p, noOutputIds: m, slideTypes: h, startCellIndex: g } = d, _;

package/dist/{reveal-component-AVl0irhz.js → reveal-component-DJp2KMep.js}

@@ -4,7 +4,7 @@ import { t as o } from "./react-DMWcHin-.js";
 import { t as s } from "./compiler-runtime-CAH9RLw2.js";
 import { Ct as c, rt as l } from "./html-to-image-hKcfSWj_.js";
 import { u } from "./dist-DTSuOdDc.js";
-import { J as d, X as f, Y as p, in as m, l as h, n as g, rn as _, sn as v, t as y, u as b } from "./common-DuhsfU8I.js";
+import { J as d, X as f, Y as p, in as m, l as h, n as g, rn as _, sn as v, t as y, u as b } from "./common-DTAGJQCY.js";
 import { R as x } from "./select-Bakm9EUs.js";
 import { X as S } from "./dropdown-menu-DEu759Oe.js";
 import { t as C } from "./jsx-runtime-CpoKNRgu.js";

package/package.json

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

package/src/components/editor/file-tree/__tests__/file-render-mode.test.ts

@@ -8,7 +8,10 @@ describe("getFileRenderMode", () => {
     ["text/plain", false, "text"],
     ["text/x-rust", false, "text"],
     ["application/json", false, "text"],
+    ["application/toml", false, "text"],
+    ["application/x-toml", false, "text"],
     ["application/xml", false, "text"],
+    ["text/x-toml", false, "text"],
     ["text/csv", false, "csv"],
     ["image/png", true, "media"],
     ["video/mp4", true, "media"],

package/src/components/editor/file-tree/__tests__/file-viewer.test.tsx

@@ -15,13 +15,19 @@ vi.mock("@/plugins/impl/code/LazyAnyLanguageCodeMirror", () => ({
   LazyAnyLanguageCodeMirror: ({
     value,
     onChange,
+    language,
+    readOnly,
   }: {
     value?: string;
     onChange?: (value: string) => void;
+    language?: string;
+    readOnly?: boolean;
   }) => (
     <textarea
       data-testid="code-editor"
+      data-language={language}
       value={value ?? ""}
+      readOnly={readOnly}
       onChange={(evt) => onChange?.(evt.target.value)}
     />
   ),
@@ -106,6 +112,21 @@ describe("FileViewer bounded previews", () => {
     expect(screen.queryByText(/too large to preview/i)).not.toBeInTheDocument();
   });
 
+  it("renders TOML files as editable TOML", async () => {
+    renderViewer({
+      file: { ...file, name: "pyproject.toml", size: 20 },
+      contents: '[project]\nname = "demo"',
+      mimeType: "application/toml",
+      isBase64: false,
+      isTooLarge: false,
+    });
+
+    const editor =
+      await screen.findByTestId<HTMLTextAreaElement>("code-editor");
+    expect(editor).toHaveAttribute("data-language", "toml");
+    expect(editor).not.toHaveAttribute("readonly");
+  });
+
   it("preserves edits to an initially empty text file across remount", async () => {
     const emptyFile: FileInfo = {
       id: "/workspace/empty.txt",

package/src/components/editor/file-tree/__tests__/renderers.test.tsx

@@ -0,0 +1,129 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { buildMediaSource, FileContentRenderer } from "../renderers";
+
+vi.mock("@/plugins/impl/code/LazyAnyLanguageCodeMirror", () => ({
+  LazyAnyLanguageCodeMirror: ({
+    value,
+    language,
+    readOnly,
+    onChange,
+  }: {
+    value?: string;
+    language?: string;
+    readOnly?: boolean;
+    onChange?: (value: string) => void;
+  }) => (
+    <textarea
+      data-testid="code-editor"
+      data-language={language}
+      value={value}
+      readOnly={readOnly}
+      onChange={(event) => onChange?.(event.target.value)}
+    />
+  ),
+}));
+
+vi.mock("@/theme/useTheme", () => ({
+  useTheme: () => ({ theme: "light" }),
+}));
+
+describe("buildMediaSource", () => {
+  it("returns base64 source for binary media", () => {
+    expect(
+      buildMediaSource({
+        contents: "aGVsbG8=",
+        mimeType: "image/png",
+        isBase64: true,
+      }),
+    ).toEqual({
+      base64: "aGVsbG8=",
+      mime: "image/png",
+    });
+  });
+
+  it("returns UTF-8 data URL for text-based media", () => {
+    const svg = '<svg xmlns="http://www.w3.org/2000/svg"></svg>';
+    expect(
+      buildMediaSource({
+        contents: svg,
+        mimeType: "image/svg+xml",
+        isBase64: false,
+      }),
+    ).toEqual({
+      url: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`,
+    });
+  });
+});
+
+describe("FileContentRenderer", () => {
+  it("renders editable TOML with syntax highlighting", () => {
+    const onChange = vi.fn();
+    render(
+      <FileContentRenderer
+        mimeType="application/toml"
+        contents={'name = "demo"'}
+        readOnly={false}
+        onChange={onChange}
+      />,
+    );
+
+    const editor = screen.getByTestId<HTMLTextAreaElement>("code-editor");
+    expect(editor).toHaveAttribute("data-language", "toml");
+    expect(editor).not.toHaveAttribute("readonly");
+
+    fireEvent.change(editor, { target: { value: 'name = "updated"' } });
+    expect(onChange).toHaveBeenCalledWith('name = "updated"');
+  });
+
+  it.each(["application/toml", "application/x-toml", "text/x-toml"])(
+    "renders %s as read-only TOML by default",
+    (mimeType) => {
+      render(
+        <FileContentRenderer mimeType={mimeType} contents={'name = "demo"'} />,
+      );
+
+      const editor = screen.getByTestId<HTMLTextAreaElement>("code-editor");
+      expect(editor).toHaveAttribute("data-language", "toml");
+      expect(editor).toHaveAttribute("readonly");
+    },
+  );
+
+  it.each([
+    "application/octet-stream",
+    "text/plain",
+    "text/plain; charset=utf-8",
+  ])("uses the filename when a provider returns %s", (mimeType) => {
+    render(
+      <FileContentRenderer
+        mimeType={mimeType}
+        filename="pyproject.TOML"
+        contents={'name = "demo"'}
+      />,
+    );
+
+    expect(screen.getByTestId("code-editor")).toHaveAttribute(
+      "data-language",
+      "toml",
+    );
+  });
+
+  it.each(["file.constructor", "file.__proto__"])(
+    "ignores inherited extension-map property in %s",
+    (filename) => {
+      render(
+        <FileContentRenderer
+          mimeType="text/plain"
+          filename={filename}
+          contents="text"
+        />,
+      );
+
+      expect(screen.getByTestId("code-editor")).toHaveAttribute(
+        "data-language",
+        "markdown",
+      );
+    },
+  );
+});

package/src/components/editor/file-tree/file-viewer.tsx

@@ -240,6 +240,7 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
       {warningBanner}
       <FileContentRenderer
         mimeType={mimeType}
+        filename={data.file.name}
         contents={
           isText
             ? internalValue

package/src/components/editor/file-tree/renderers.tsx

@@ -16,6 +16,7 @@ import { useTheme } from "@/theme/useTheme";
 import { Arrays } from "@/utils/arrays";
 import { type Base64String, base64ToDataURL } from "@/utils/json/base64";
 import { Objects } from "@/utils/objects";
+import { Paths } from "@/utils/paths";
 
 const PAGE_SIZE = 25;
 
@@ -38,13 +39,36 @@ export const MIME_TO_LANGUAGE: Record<string, string> = {
   "text/css": "css",
   "text/x-python": "python",
   "application/json": "json",
+  "application/toml": "toml",
+  "application/x-toml": "toml",
   "application/xml": "xml",
+  "text/x-toml": "toml",
   "text/x-yaml": "yaml",
   "text/csv": "markdown",
   "text/plain": "markdown",
   default: "markdown",
 };
 
+const EXTENSION_TO_LANGUAGE: Record<string, string> = {
+  toml: "toml",
+};
+
+const GENERIC_MIME_TYPES = new Set(["application/octet-stream", "text/plain"]);
+
+function resolveLanguage(mimeType: string, filename?: string): string {
+  const normalizedMimeType = mimeType.split(";", 1)[0].trim().toLowerCase();
+  if (GENERIC_MIME_TYPES.has(normalizedMimeType) && filename) {
+    const extension = Paths.extension(filename).toLowerCase();
+    const language = Object.hasOwn(EXTENSION_TO_LANGUAGE, extension)
+      ? EXTENSION_TO_LANGUAGE[extension]
+      : undefined;
+    if (language) {
+      return language;
+    }
+  }
+  return MIME_TO_LANGUAGE[normalizedMimeType] || MIME_TO_LANGUAGE.default;
+}
+
 /**
  * Media viewer props: provide either a direct `url` or `base64` + `mime`.
  * When `url` is set it takes precedence.
@@ -167,6 +191,7 @@ export const MediaRenderer: React.FC<MediaSource & { mimeType: string }> = ({
  */
 export const FileContentRenderer: React.FC<{
   mimeType: string;
+  filename?: string;
   /** Text content for text/CSV files. */
   contents?: string;
   /** Media source for image/audio/video/PDF files. */
@@ -177,6 +202,7 @@ export const FileContentRenderer: React.FC<{
   extensions?: Extension[];
 }> = ({
   mimeType,
+  filename,
   contents,
   mediaSource,
   readOnly = true,
@@ -202,7 +228,7 @@ export const FileContentRenderer: React.FC<{
   }
 
   if (contents != null) {
-    const language = MIME_TO_LANGUAGE[mimeType] || MIME_TO_LANGUAGE.default;
+    const language = resolveLanguage(mimeType, filename);
     return (
       <div className="flex-1 overflow-auto">
         <Suspense>

package/src/components/storage/__tests__/storage-file-viewer.test.tsx

@@ -0,0 +1,84 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { DownloadStorage } from "@/core/storage/request-registry";
+import { StorageFileViewer } from "../storage-file-viewer";
+
+vi.mock("@/components/editor/cell/useAddCell", () => ({
+  useAddCodeToNewCell: () => vi.fn(),
+}));
+
+vi.mock("@/plugins/impl/code/LazyAnyLanguageCodeMirror", () => ({
+  LazyAnyLanguageCodeMirror: ({
+    value,
+    language,
+    readOnly,
+  }: {
+    value?: string;
+    language?: string;
+    readOnly?: boolean;
+  }) => (
+    <textarea
+      data-testid="code-editor"
+      data-language={language}
+      value={value}
+      readOnly={readOnly}
+    />
+  ),
+}));
+
+vi.mock("@/theme/useTheme", () => ({
+  useTheme: () => ({ theme: "light" }),
+}));
+
+describe("StorageFileViewer", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("renders TOML from generic storage metadata as read-only TOML", async () => {
+    const request = vi.spyOn(DownloadStorage, "request").mockResolvedValue({
+      request_id: "request-id",
+      url: "https://example.com/pyproject.toml?signature=secret",
+    });
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue({
+        ok: true,
+        text: async () => '[project]\nname = "demo"',
+      }),
+    );
+
+    render(
+      <TooltipProvider>
+        <StorageFileViewer
+          entry={{
+            path: "config/pyproject.toml",
+            kind: "file",
+            size: 24,
+            lastModified: null,
+            mimeType: null,
+          }}
+          namespace="files"
+          protocol="s3"
+          backendType="fsspec"
+          onBack={vi.fn()}
+        />
+      </TooltipProvider>,
+    );
+
+    const editor =
+      await screen.findByTestId<HTMLTextAreaElement>("code-editor");
+    expect(editor).toHaveAttribute("data-language", "toml");
+    expect(editor).toHaveAttribute("readonly");
+    expect(editor).toHaveValue('[project]\nname = "demo"');
+    expect(request).toHaveBeenCalledWith({
+      namespace: "files",
+      path: "config/pyproject.toml",
+      preview: true,
+    });
+  });
+});

package/src/components/storage/storage-file-viewer.tsx

@@ -237,6 +237,7 @@ export const StorageFileViewer: React.FC<Props> = ({
         {renderMetadata({})}
         <FileContentRenderer
           mimeType={mime}
+          filename={name}
           contents={preview.type === "text" ? preview.content : undefined}
           mediaSource={
             preview.type === "media" ? { url: preview.url } : undefined

package/src/components/editor/file-tree/__tests__/renderers.test.ts

@@ -1,31 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-import { describe, expect, it } from "vitest";
-import { buildMediaSource } from "../renderers";
-
-describe("buildMediaSource", () => {
-  it("returns base64 source for binary media", () => {
-    expect(
-      buildMediaSource({
-        contents: "aGVsbG8=",
-        mimeType: "image/png",
-        isBase64: true,
-      }),
-    ).toEqual({
-      base64: "aGVsbG8=",
-      mime: "image/png",
-    });
-  });
-
-  it("returns UTF-8 data URL for text-based media", () => {
-    const svg = '<svg xmlns="http://www.w3.org/2000/svg"></svg>';
-    expect(
-      buildMediaSource({
-        contents: svg,
-        mimeType: "image/svg+xml",
-        isBase64: false,
-      }),
-    ).toEqual({
-      url: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`,
-    });
-  });
-});