@marimo-team/islands 0.23.16-dev2 → 0.23.16-dev4

package/dist/{reveal-component-BDdfO6U_.js → reveal-component-CdkMQff0.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { dt as kioskModeAtom, ht as outputIsStale } from "./html-to-image-DDENewl2.js";
 import "./chunk-5FQGJX7Z-B9WoXK1R.js";
 import { u as createLucideIcon } from "./dist-B96tMAst.js";
-import { a as DEFAULT_DECK_VERTICAL_ALIGN, c as SlideSidebar, cn as Expand, ct as Panel, dn as Code, i as DEFAULT_DECK_TRANSITION, l as Slide, lt as PanelGroup, o as DEFAULT_SLIDE_TYPE, sn as EyeOff, t as useNotebookCodeAvailable, ut as PanelResizeHandle } from "./code-visibility-mgBayy67.js";
+import { a as DEFAULT_DECK_VERTICAL_ALIGN, c as SlideSidebar, cn as EyeOff, ct as Panel, fn as Code, i as DEFAULT_DECK_TRANSITION, l as Slide, ln as Expand, lt as PanelGroup, o as DEFAULT_SLIDE_TYPE, t as useNotebookCodeAvailable, ut as PanelResizeHandle } from "./code-visibility-Bmrvzgy9.js";
 import { X as useDebouncedCallback } from "./input-DStQIuqD.js";
 import "./toDate-B3IRfHhw.js";
 import "./react-dom-BTJzcVJ9.js";
@@ -7310,7 +7310,7 @@ var ParkedPreviewContent = (e5) => {
     output: c,
     stale: u
   }), t[5] = n.id, t[6] = n.output, t[7] = n.status, t[8] = u, t[9] = f) : f = t[9], f;
-}, reveal_component_default = ({ slideCells: e5, layout: o, setLayout: s, noOutputIds: l, activeIndex: u, onSlideChange: f, mode: co, configWidth: lo, isEditable: fo = false }) => {
+}, reveal_component_default = ({ slideCells: e5, layout: o, setLayout: s, noOutputIds: l, activeIndex: u, onSlideChange: f, mode: co, configWidth: lo, isEditable: po = false }) => {
   var _a2, _b2, _c;
   let go = (0, import_react.useRef)(null), _o = (0, import_react.useRef)(null), { width: Co, height: wo } = useSlideDimensions(go), Eo = useFullScreenElement() != null, Do = useAtomValue(kioskModeAtom), Oo = (0, import_react.useMemo)(() => Do ? [] : [ce], [Do]), [ko, Ao] = (0, import_react.useState)(() => /* @__PURE__ */ new Set()), jo = useNotebookCodeAvailable(e5), Mo = !isIslands() && jo, No = u == null ? void 0 : e5[u], Po = No ?? e5.at(0), { parkedPreviewCell: Fo, isHeldEdit: Io, isNoOutputPreview: Lo, heldEditCellId: Ro, heldShowsCode: zo, toggleHeldShowsCode: Bo } = useParkedPreview({
     activeCell: No,
@@ -7414,7 +7414,7 @@ var ParkedPreviewContent = (e5) => {
   useEventListener(document, "keydown", is, { capture: true });
   let os = Io ? null : Lo ? "Hidden as there is no output" : "Skipped in presentation", ss = Io ? zo : Vo(Fo == null ? void 0 : Fo.id), cs = parkedRendersSource({
     isNoOutputPreview: Lo,
-    isEditable: fo,
+    isEditable: po,
     showCode: ss
   }), ls = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     ref: go,
@@ -7438,13 +7438,13 @@ var ParkedPreviewContent = (e5) => {
           children: Go.stacks.map((e6, t) => e6.subslides.length === 1 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SubslideView, {
             subslide: e6.subslides[0],
             resolveShowCode: Vo,
-            isEditable: fo,
+            isEditable: po,
             slideConfigs: o.cells,
             contentStyle: Yo
           }, t) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ne, { children: e6.subslides.map((e7, t2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SubslideView, {
             subslide: e7,
             resolveShowCode: Vo,
-            isEditable: fo,
+            isEditable: po,
             slideConfigs: o.cells,
             contentStyle: Yo
           }, t2)) }, t))
@@ -7463,7 +7463,7 @@ var ParkedPreviewContent = (e5) => {
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ParkedPreviewContent, {
                 cell: Fo,
                 isNoOutputPreview: Lo,
-                isEditable: fo,
+                isEditable: po,
                 showCode: ss
               })
             })

package/package.json

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

package/src/components/data-table/column-formatting/feature.ts

@@ -9,6 +9,7 @@ import {
   type TableFeature,
   type Updater,
 } from "@tanstack/react-table";
+import { browserLocale } from "@/core/i18n/locale";
 import type { DataType } from "@/core/kernel/messages";
 import { logNever } from "@/utils/assertNever";
 import {
@@ -40,7 +41,7 @@ export const ColumnFormattingFeature: TableFeature = {
     return {
       enableColumnFormatting: true,
       onColumnFormattingChange: makeStateUpdater("columnFormatting", table),
-      locale: navigator.language,
+      locale: browserLocale(),
     } as ColumnFormattingOptions;
   },
 

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

@@ -0,0 +1,27 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { getFileRenderMode } from "../file-render-mode";
+
+describe("getFileRenderMode", () => {
+  it.each([
+    ["text/plain", false, "text"],
+    ["text/x-rust", false, "text"],
+    ["application/json", false, "text"],
+    ["application/xml", false, "text"],
+    ["text/csv", false, "csv"],
+    ["image/png", true, "media"],
+    ["video/mp4", true, "media"],
+    ["application/pdf", true, "media"],
+    ["application/x-apple-diskimage", true, "unsupported"],
+    ["application/zip", true, "unsupported"],
+    ["application/octet-stream", false, "unsupported"],
+    [null, false, "text"],
+    [null, true, "unsupported"],
+  ] as const)(
+    "maps %s with isBase64=%s to %s",
+    (mimeType, isBase64, expected) => {
+      expect(getFileRenderMode(mimeType, isBase64)).toBe(expected);
+    },
+  );
+});

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

@@ -0,0 +1,150 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { Provider } from "jotai";
+import type React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { requestClientAtom } from "@/core/network/requests";
+import type { FileDetailsResponse, FileInfo } from "@/core/network/types";
+import { store } from "@/core/state/jotai";
+import { FileViewer, MAX_FILE_PREVIEW_BYTES } from "../file-viewer";
+
+vi.mock("@/plugins/impl/code/LazyAnyLanguageCodeMirror", () => ({
+  LazyAnyLanguageCodeMirror: ({
+    value,
+    onChange,
+  }: {
+    value?: string;
+    onChange?: (value: string) => void;
+  }) => (
+    <textarea
+      data-testid="code-editor"
+      value={value ?? ""}
+      onChange={(evt) => onChange?.(evt.target.value)}
+    />
+  ),
+}));
+
+vi.mock("@/core/wasm/utils", () => ({ isWasm: () => false }));
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <Provider store={store}>
+    <TooltipProvider>{children}</TooltipProvider>
+  </Provider>
+);
+
+const file: FileInfo = {
+  id: "/workspace/installer.dmg",
+  path: "/workspace/installer.dmg",
+  name: "installer.dmg",
+  isDirectory: false,
+  isMarimoFile: false,
+  size: 20 * 1024 * 1024,
+};
+
+function renderViewer(response: FileDetailsResponse) {
+  const client = MockRequestClient.create({
+    sendFileDetails: vi.fn().mockResolvedValue(response),
+  });
+  store.set(requestClientAtom, client);
+  render(<FileViewer file={file} onOpenNotebook={vi.fn()} />, { wrapper });
+  return client;
+}
+
+describe("FileViewer bounded previews", () => {
+  beforeEach(() => {
+    store.set(requestClientAtom, null);
+  });
+
+  it("requests a bounded preview and shows oversized metadata", async () => {
+    const client = renderViewer({
+      file,
+      contents: null,
+      mimeType: "application/x-apple-diskimage",
+      isBase64: false,
+      isTooLarge: true,
+    });
+
+    expect(await screen.findByText(/too large to preview/i)).toBeVisible();
+    expect(screen.getByText("20 MB")).toBeVisible();
+    expect(screen.getByRole("button", { name: /download/i })).toBeVisible();
+    expect(screen.queryByTestId("code-editor")).not.toBeInTheDocument();
+    expect(client.sendFileDetails).toHaveBeenCalledWith({
+      path: file.path,
+      maxBytes: MAX_FILE_PREVIEW_BYTES,
+    });
+  });
+
+  it("shows unsupported metadata with a download action, not base64 text", async () => {
+    renderViewer({
+      file: { ...file, size: 4 },
+      contents: "AAEC",
+      mimeType: "application/x-apple-diskimage",
+      isBase64: true,
+      isTooLarge: false,
+    });
+
+    expect(await screen.findByText(/cannot be previewed/i)).toBeVisible();
+    expect(screen.getByRole("button", { name: /download/i })).toBeVisible();
+    expect(screen.queryByTestId("code-editor")).not.toBeInTheDocument();
+  });
+
+  it("continues to render small text files", async () => {
+    renderViewer({
+      file: { ...file, name: "notes.txt", size: 5 },
+      contents: "hello",
+      mimeType: "text/plain",
+      isBase64: false,
+      isTooLarge: false,
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("code-editor")).toBeInTheDocument();
+    });
+    expect(screen.queryByText(/too large to preview/i)).not.toBeInTheDocument();
+  });
+
+  it("preserves edits to an initially empty text file across remount", async () => {
+    const emptyFile: FileInfo = {
+      id: "/workspace/empty.txt",
+      path: "/workspace/empty.txt",
+      name: "empty.txt",
+      isDirectory: false,
+      isMarimoFile: false,
+      size: 0,
+    };
+    const response: FileDetailsResponse = {
+      file: emptyFile,
+      contents: "",
+      mimeType: "text/plain",
+      isBase64: false,
+      isTooLarge: false,
+    };
+    const client = MockRequestClient.create({
+      sendFileDetails: vi.fn().mockResolvedValue(response),
+    });
+    store.set(requestClientAtom, client);
+
+    const { unmount } = render(
+      <FileViewer file={emptyFile} onOpenNotebook={vi.fn()} />,
+      { wrapper },
+    );
+
+    const editor =
+      await screen.findByTestId<HTMLTextAreaElement>("code-editor");
+    fireEvent.change(editor, { target: { value: "draft" } });
+    unmount();
+
+    render(<FileViewer file={emptyFile} onOpenNotebook={vi.fn()} />, {
+      wrapper,
+    });
+
+    const reopened =
+      await screen.findByTestId<HTMLTextAreaElement>("code-editor");
+    await waitFor(() => {
+      expect(reopened.value).toBe("draft");
+    });
+  });
+});

package/src/components/editor/file-tree/file-preview-metadata.tsx

@@ -0,0 +1,51 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { DownloadIcon } from "lucide-react";
+import { useLocale } from "react-aria";
+import { Button } from "@/components/ui/button";
+import type { FileInfo } from "@/core/network/types";
+import { formatBytes } from "@/utils/formatting";
+
+interface Props {
+  file: FileInfo;
+  mimeType: string;
+  message: string;
+  onDownload?: () => void;
+}
+
+export const FilePreviewMetadata = ({
+  file,
+  mimeType,
+  message,
+  onDownload,
+}: Props) => {
+  const { locale } = useLocale();
+  return (
+    <div className="p-4 text-sm">
+      <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-2">
+        <span className="text-muted-foreground font-medium">Path</span>
+        <span className="font-mono text-xs break-all">{file.path}</span>
+        <span className="text-muted-foreground font-medium">Type</span>
+        <span>{mimeType}</span>
+        {file.size != null && (
+          <>
+            <span className="text-muted-foreground font-medium">Size</span>
+            <span>{formatBytes(file.size, locale)}</span>
+          </>
+        )}
+      </div>
+      <div className="mt-4 text-muted-foreground italic">{message}</div>
+      {onDownload && (
+        <Button
+          variant="outline"
+          size="sm"
+          className="mt-4"
+          onClick={onDownload}
+        >
+          <DownloadIcon className="h-3.5 w-3.5 mr-2" />
+          Download
+        </Button>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,32 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { isMediaMime, MIME_TO_LANGUAGE } from "./renderers";
+
+export type FileRenderMode = "text" | "csv" | "media" | "unsupported";
+
+export function getFileRenderMode(
+  mimeType: string | null | undefined,
+  isBase64: boolean | undefined,
+): FileRenderMode {
+  const mime = mimeType || "text/plain";
+
+  if (isMediaMime(mime)) {
+    return "media";
+  }
+  if (isBase64) {
+    return "unsupported";
+  }
+  if (mime === "text/csv") {
+    return "csv";
+  }
+  if (
+    mime.startsWith("text/") ||
+    (mime !== "default" && mime in MIME_TO_LANGUAGE)
+  ) {
+    return "text";
+  }
+  if (mimeType == null) {
+    return "text";
+  }
+  return "unsupported";
+}

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

@@ -25,11 +25,11 @@ import { copyToClipboard } from "@/utils/copy";
 import type { Base64String } from "@/utils/json/base64";
 import { downloadFile } from "./download";
 import { FilePreviewHeader } from "./file-header";
-import {
-  FileContentRenderer,
-  isMediaMime,
-  MIME_TO_LANGUAGE,
-} from "./renderers";
+import { FilePreviewMetadata } from "./file-preview-metadata";
+import { getFileRenderMode } from "./file-render-mode";
+import { FileContentRenderer } from "./renderers";
+
+export const MAX_FILE_PREVIEW_BYTES = 10 * 1024 * 1024;
 
 interface Props {
   file: FileInfo;
@@ -50,9 +50,15 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
 
   const { data, isPending, error, setData, refetch } =
     useAsyncData(async () => {
-      const details = await sendFileDetails({ path: file.path });
-      const contents = details.contents || "";
-      setInternalValue(unsavedContentsForFile.get(file.path) || contents);
+      const details = await sendFileDetails({
+        path: file.path,
+        maxBytes: MAX_FILE_PREVIEW_BYTES,
+      });
+      const mode = getFileRenderMode(details.mimeType, details.isBase64);
+      if (!details.isTooLarge && mode === "text") {
+        const contents = details.contents || "";
+        setInternalValue(unsavedContentsForFile.get(file.path) ?? contents);
+      }
       return details;
     }, [file.path]);
 
@@ -72,13 +78,19 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
     );
   };
 
-  // On file change or unmount, save the unsaved contents
+  // On file change or unmount, save the unsaved contents. Only editable text
+  // previews participate in editor state; oversized and non-text responses
+  // carry no draft to preserve.
   // We use a ref for internalValue so we don't call this effect on each keystroke
   const internalValueRef = useRef<string>(internalValue);
   internalValueRef.current = internalValue;
   useEffect(() => {
     return () => {
-      if (!data?.contents) {
+      if (
+        data?.contents == null ||
+        data.isTooLarge ||
+        getFileRenderMode(data.mimeType, data.isBase64) !== "text"
+      ) {
         return;
       }
       const draft = internalValueRef.current;
@@ -88,7 +100,13 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
         unsavedContentsForFile.set(file.path, draft);
       }
     };
-  }, [file.path, data?.contents]);
+  }, [
+    file.path,
+    data?.contents,
+    data?.isTooLarge,
+    data?.mimeType,
+    data?.isBase64,
+  ]);
 
   if (error) {
     return <ErrorBanner error={error} />;
@@ -99,7 +117,10 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
   }
 
   const mimeType = data.mimeType || "text/plain";
-  const isEditable = mimeType in MIME_TO_LANGUAGE;
+  const renderMode = getFileRenderMode(data.mimeType, data.isBase64);
+  const isText = renderMode === "text";
+  const isCsv = renderMode === "csv";
+  const isMedia = renderMode === "media";
   const isActiveNotebook =
     currentNotebookFilename &&
     data.file.isMarimoFile &&
@@ -108,22 +129,27 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
       // but this is an okay heuristic for now.
       file.path.endsWith(`/${currentNotebookFilename}`));
 
-  if (!data.contents && !isEditable) {
-    // Show details instead of contents
-    return (
-      <div className="grid grid-cols-2 gap-2 p-6">
-        <div className="font-bold text-muted-foreground">Name</div>
-        <div>{data.file.name}</div>
-        <div className="font-bold text-muted-foreground">Type</div>
-        <div>{mimeType}</div>
-      </div>
-    );
-  }
-
   const handleDownload = async () => {
     await downloadFile(file.path, data.file.name);
   };
 
+  const saveKeymapExtension = keymap.of([
+    {
+      key: hotkeys.getHotkey("global.save").key,
+      stopPropagation: true,
+      run: () => {
+        if (internalValue !== data.contents) {
+          void handleSaveFile();
+          return true;
+        }
+        return false;
+      },
+    },
+  ]);
+
+  // Defined before the metadata-only returns so refresh, download, and
+  // open-notebook stay available while edit-only copy/save are withheld from
+  // non-text previews.
   const header = (
     <FilePreviewHeader
       filename={data.file.name}
@@ -142,7 +168,7 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
               </Button>
             </Tooltip>
           )}
-          {!isMediaMime(mimeType) && (
+          {isText && (
             <>
               <Tooltip content="Copy contents to clipboard">
                 <Button
@@ -172,8 +198,23 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
     />
   );
 
-  const isMedia = isMediaMime(mimeType);
-  const isText = !isMedia && mimeType !== "text/csv";
+  if (data.isTooLarge || renderMode === "unsupported") {
+    return (
+      <>
+        {header}
+        <FilePreviewMetadata
+          file={data.file}
+          mimeType={mimeType}
+          message={
+            data.isTooLarge
+              ? "File is too large to preview."
+              : "This file type cannot be previewed."
+          }
+          onDownload={disableFileDownloads ? undefined : handleDownload}
+        />
+      </>
+    );
+  }
 
   const warningBanner = isText && isActiveNotebook && (
     <Alert variant="warning" className="rounded-none">
@@ -192,35 +233,20 @@ export const FileViewer: React.FC<Props> = ({ file, onOpenNotebook }) => {
       <FileContentRenderer
         mimeType={mimeType}
         contents={
-          isMedia
-            ? undefined
-            : isText
-              ? internalValue
-              : (data.contents ?? undefined)
+          isText
+            ? internalValue
+            : isCsv
+              ? (data.contents ?? undefined)
+              : undefined
         }
         mediaSource={
-          isMedia
+          isMedia && data.contents
             ? { base64: data.contents as Base64String, mime: mimeType }
             : undefined
         }
         readOnly={!isText}
-        onChange={setInternalValue}
-        extensions={[
-          // Command S for save
-          keymap.of([
-            {
-              key: hotkeys.getHotkey("global.save").key,
-              stopPropagation: true,
-              run: () => {
-                if (internalValue !== data.contents) {
-                  handleSaveFile();
-                  return true;
-                }
-                return false;
-              },
-            },
-          ]),
-        ]}
+        onChange={isText ? setInternalValue : undefined}
+        extensions={isText ? [saveKeymapExtension] : []}
       />
     </>
   );