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

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] : []}
       />
     </>
   );

package/src/core/i18n/__tests__/locale-provider.test.tsx

@@ -8,20 +8,9 @@ import {
   defaultUserConfig,
   parseUserConfig,
 } from "@/core/config/config-schema";
+import { FALLBACK_LOCALE } from "../locale";
 import { LocaleProvider } from "../locale-provider";
 
-// Mock navigator.language with a getter
-let mockNavigatorLanguage: string | undefined;
-
-Object.defineProperty(window, "navigator", {
-  value: {
-    get language() {
-      return mockNavigatorLanguage;
-    },
-  },
-  writable: true,
-});
-
 // Mock react-aria-components I18nProvider
 vi.mock("react-aria-components", () => ({
   I18nProvider: ({
@@ -37,143 +26,90 @@ vi.mock("react-aria-components", () => ({
   ),
 }));
 
+function renderWithLocale(configLocale: string | null | undefined) {
+  const store = createStore();
+  store.set(
+    userConfigAtom,
+    parseUserConfig({ display: { locale: configLocale } }),
+  );
+  return render(
+    <Provider store={store}>
+      <LocaleProvider>
+        <div>Test content</div>
+      </LocaleProvider>
+    </Provider>,
+  );
+}
+
 describe("LocaleProvider", () => {
   beforeEach(() => {
-    // Reset the mock before each test
-    mockNavigatorLanguage = undefined;
+    vi.stubGlobal("navigator", { language: undefined as string | undefined });
   });
 
   afterEach(() => {
     cleanup();
-    // Clear all mocks after each test
-    mockNavigatorLanguage = undefined;
+    vi.unstubAllGlobals();
     vi.clearAllMocks();
   });
 
-  it("should render I18nProvider without locale when locale is null", () => {
-    const store = createStore();
-    const config = parseUserConfig({ display: { locale: null } });
-    store.set(userConfigAtom, config);
-
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <LocaleProvider>
-          <div>Test content</div>
-        </LocaleProvider>
-      </Provider>,
-    );
-
-    const i18nProvider = getByTestId("i18n-provider");
-    expect(i18nProvider).toBeInTheDocument();
-    expect(i18nProvider.dataset.locale).toBe(undefined);
-    expect(i18nProvider).toHaveTextContent("Test content");
+  it("passes a valid configured locale through unchanged", () => {
+    const { getByTestId } = renderWithLocale("es-ES");
+    expect(getByTestId("i18n-provider").dataset.locale).toBe("es-ES");
   });
 
-  it("should render I18nProvider without locale when locale is undefined", () => {
-    const store = createStore();
-    const config = parseUserConfig({ display: { locale: undefined } });
-    store.set(userConfigAtom, config);
-
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <LocaleProvider>
-          <div>Test content</div>
-        </LocaleProvider>
-      </Provider>,
-    );
-
-    const i18nProvider = getByTestId("i18n-provider");
-    expect(i18nProvider).toBeInTheDocument();
-    expect(i18nProvider.dataset.locale).toBe(undefined);
-    expect(i18nProvider).toHaveTextContent("Test content");
+  it("prefers the browser locale when config is unset", () => {
+    vi.stubGlobal("navigator", { language: "de-DE" });
+    const { getByTestId } = renderWithLocale(null);
+    expect(getByTestId("i18n-provider").dataset.locale).toBe("de-DE");
   });
 
-  it("should render I18nProvider with locale when locale is provided", () => {
-    const store = createStore();
-    const testLocale = "es-ES";
-    const config = parseUserConfig({ display: { locale: testLocale } });
-    store.set(userConfigAtom, config);
-
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <LocaleProvider>
-          <div>Test content</div>
-        </LocaleProvider>
-      </Provider>,
-    );
+  it.each([null, undefined])(
+    "falls back to %s config + unusable browser locale",
+    (configLocale) => {
+      const { getByTestId } = renderWithLocale(configLocale);
+      expect(getByTestId("i18n-provider").dataset.locale).toBe(FALLBACK_LOCALE);
+    },
+  );
 
-    const i18nProvider = getByTestId("i18n-provider");
-    expect(i18nProvider).toBeInTheDocument();
-    expect(i18nProvider.dataset.locale).toBe(testLocale);
-    expect(i18nProvider).toHaveTextContent("Test content");
+  it("sanitizes a POSIX-tagged browser locale (issue #9938)", () => {
+    vi.stubGlobal("navigator", { language: "en-US@posix" });
+    const { getByTestId } = renderWithLocale(null);
+    expect(getByTestId("i18n-provider").dataset.locale).toBe("en-US");
   });
 
-  it("should render I18nProvider with different locale values", () => {
-    const testCases = ["en-US", "fr-FR", "de-DE", "ja-JP"];
-
-    testCases.forEach((locale) => {
-      const store = createStore();
-      const config = parseUserConfig({ display: { locale } });
-      store.set(userConfigAtom, config);
-
-      const { getByTestId } = render(
-        <Provider store={store}>
-          <LocaleProvider>
-            <div>Test content for {locale}</div>
-          </LocaleProvider>
-        </Provider>,
-      );
-
-      const i18nProvider = getByTestId("i18n-provider");
-      expect(i18nProvider.dataset.locale).toBe(locale);
-      expect(i18nProvider).toHaveTextContent(`Test content for ${locale}`);
-
-      // Clean up after each iteration
-      cleanup();
-    });
+  it("falls back to the browser locale when the configured locale is unusable", () => {
+    vi.stubGlobal("navigator", { language: "de-DE" });
+    const { getByTestId } = renderWithLocale("@@@");
+    expect(getByTestId("i18n-provider").dataset.locale).toBe("de-DE");
   });
 
-  it("should render children correctly", () => {
+  it("resolves a concrete locale for the default config", () => {
+    vi.stubGlobal("navigator", { language: "fr-FR" });
     const store = createStore();
-    const config = parseUserConfig({ display: { locale: "en-US" } });
-    store.set(userConfigAtom, config);
-
-    const { getByText, getByRole } = render(
+    store.set(userConfigAtom, defaultUserConfig());
+    const { getByTestId } = render(
       <Provider store={store}>
         <LocaleProvider>
-          <div>
-            <h1>Test Heading</h1>
-            <p>Test paragraph</p>
-            <button type="button">Test Button</button>
-          </div>
+          <div>Default config test</div>
         </LocaleProvider>
       </Provider>,
     );
-
-    expect(getByText("Test Heading")).toBeInTheDocument();
-    expect(getByText("Test paragraph")).toBeInTheDocument();
-    expect(getByRole("button", { name: "Test Button" })).toBeInTheDocument();
+    expect(getByTestId("i18n-provider").dataset.locale).toBe("fr-FR");
   });
 
-  it("should auto-detect locale when no locale is set in config", () => {
-    mockNavigatorLanguage = "de-DE";
-
+  it("renders children", () => {
     const store = createStore();
-    const config = defaultUserConfig();
-    store.set(userConfigAtom, config);
-
-    const { getByTestId } = render(
+    store.set(
+      userConfigAtom,
+      parseUserConfig({ display: { locale: "en-US" } }),
+    );
+    const { getByRole } = render(
       <Provider store={store}>
         <LocaleProvider>
-          <div>Test content</div>
+          <button type="button">Test Button</button>
         </LocaleProvider>
       </Provider>,
     );
-
-    const i18nProvider = getByTestId("i18n-provider");
-    expect(i18nProvider).toBeInTheDocument();
-    // When no locale is specified in config, it should use navigator.language
-    expect(i18nProvider.dataset.locale).toBe("de-DE");
-    expect(i18nProvider).toHaveTextContent("Test content");
+    expect(getByRole("button", { name: "Test Button" })).toBeInTheDocument();
   });
 });

package/src/core/i18n/__tests__/locale.test.ts

@@ -0,0 +1,113 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  browserLocale,
+  FALLBACK_LOCALE,
+  isValidLocale,
+  normalizeLocale,
+  safeLocale,
+} from "../locale";
+
+describe("isValidLocale", () => {
+  it("accepts valid BCP 47 tags", () => {
+    expect(isValidLocale("en-US")).toBe(true);
+    expect(isValidLocale("de-DE")).toBe(true);
+    expect(isValidLocale("en")).toBe(true);
+  });
+
+  it("rejects empty and modifier-tainted tags", () => {
+    expect(isValidLocale("")).toBe(false);
+    expect(isValidLocale("en-US@posix")).toBe(false);
+    expect(isValidLocale("en_US.UTF-8")).toBe(false);
+  });
+});
+
+describe("normalizeLocale", () => {
+  it("keeps valid tags unchanged, including script + region", () => {
+    expect(normalizeLocale("de-DE")).toBe("de-DE");
+    expect(normalizeLocale("zh-Hant-TW")).toBe("zh-Hant-TW");
+  });
+
+  it("strips POSIX @modifiers (issue #9938)", () => {
+    expect(normalizeLocale("en-US@posix")).toBe("en-US");
+    expect(normalizeLocale("de-DE@euro")).toBe("de-DE");
+    // ICU-style unicode extension keywords are also dropped.
+    expect(normalizeLocale("de@collation=phonebook")).toBe("de");
+  });
+
+  it("strips charset suffixes and maps underscores", () => {
+    expect(normalizeLocale("en_US.UTF-8")).toBe("en-US");
+    expect(normalizeLocale("en_US")).toBe("en-US");
+  });
+
+  it("falls back to the language subtag when the full tag is invalid", () => {
+    // `-toolongsubtag` / `-oed` are structurally invalid, so `Intl.Locale`
+    // rejects the whole tag but accepts the leading `en`.
+    expect(normalizeLocale("en-toolongsubtag")).toBe("en");
+    expect(normalizeLocale("en-GB-oed")).toBe("en");
+  });
+
+  it("returns null for empty or unrecoverable tags", () => {
+    expect(normalizeLocale(null)).toBeNull();
+    expect(normalizeLocale(undefined)).toBeNull();
+    expect(normalizeLocale("")).toBeNull();
+    expect(normalizeLocale("@@@")).toBeNull();
+    // POSIX `C` locale: single-letter tag is not a valid language subtag.
+    expect(normalizeLocale("C")).toBeNull();
+  });
+});
+
+describe("browserLocale", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("normalizes navigator.language", () => {
+    vi.stubGlobal("navigator", { language: "en-US@posix" });
+    expect(browserLocale()).toBe("en-US");
+  });
+
+  it("falls back when navigator.language is unusable", () => {
+    vi.stubGlobal("navigator", { language: "@@@" });
+    expect(browserLocale()).toBe(FALLBACK_LOCALE);
+  });
+
+  it("falls back when navigator is unavailable", () => {
+    vi.stubGlobal("navigator", undefined);
+    expect(browserLocale()).toBe(FALLBACK_LOCALE);
+  });
+});
+
+describe("safeLocale", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("prefers a valid configured locale", () => {
+    vi.stubGlobal("navigator", { language: "de-DE" });
+    expect(safeLocale("fr-FR")).toBe("fr-FR");
+  });
+
+  it("normalizes configured locales before use", () => {
+    vi.stubGlobal("navigator", { language: "de-DE" });
+    expect(safeLocale("en_US")).toBe("en-US");
+    expect(safeLocale("en-US@posix")).toBe("en-US");
+  });
+
+  it("falls back to the browser locale when config is unusable", () => {
+    vi.stubGlobal("navigator", { language: "de-DE" });
+    expect(safeLocale(null)).toBe("de-DE");
+    expect(safeLocale("@@@")).toBe("de-DE");
+  });
+
+  it("normalizes the browser locale on the fallback path", () => {
+    vi.stubGlobal("navigator", { language: "en-US@posix" });
+    expect(safeLocale(null)).toBe("en-US");
+  });
+
+  it("falls back to FALLBACK_LOCALE when nothing is usable", () => {
+    vi.stubGlobal("navigator", { language: "@@@" });
+    expect(safeLocale(null)).toBe(FALLBACK_LOCALE);
+  });
+});

package/src/core/i18n/locale-provider.tsx

@@ -4,6 +4,7 @@ import { useAtomValue } from "jotai";
 import type { ReactNode } from "react";
 import { I18nProvider } from "react-aria-components";
 import { localeAtom } from "@/core/config/config";
+import { safeLocale } from "./locale";
 
 interface LocaleProviderProps {
   children: ReactNode;
@@ -14,22 +15,3 @@ export const LocaleProvider = ({ children }: LocaleProviderProps) => {
 
   return <I18nProvider locale={safeLocale(locale)}>{children}</I18nProvider>;
 };
-
-function safeLocale(locale: string | null | undefined) {
-  if (!locale) {
-    return navigator.language;
-  }
-  if (isValidLocale(locale)) {
-    return locale;
-  }
-  return navigator.language;
-}
-
-function isValidLocale(locale: string) {
-  try {
-    new Intl.NumberFormat(locale);
-    return true;
-  } catch {
-    return false;
-  }
-}