@marimo-team/islands 0.23.16-dev1 → 0.23.16-dev3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.16-dev1",
+  "version": "0.23.16-dev3",
   "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/output/CalloutOutput.tsx

@@ -1,17 +1,31 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { memo } from "react";
 import type { Intent } from "@/plugins/impl/common/intent";
-import { calloutStyles } from "./CalloutOutput.styles";
+import { cn } from "@/utils/cn";
 import { HtmlOutput } from "./HtmlOutput";
 
 interface Props {
   html: string;
   kind: Intent;
+  title?: string;
 }
 
-export const CalloutOutput: React.FC<Props> = memo(({ html, kind }) => {
+// Callouts share the flat admonition style of markdown admonitions
+// (css/admonition.css); each intent maps onto an admonition kind.
+const KIND_CLASS: Record<Intent, string> = {
+  neutral: "neutral",
+  info: "info",
+  warn: "warning",
+  success: "success",
+  danger: "danger",
+  // 'alert' is deprecated; render as danger
+  alert: "danger",
+};
+
+export const CalloutOutput: React.FC<Props> = memo(({ html, kind, title }) => {
   return (
-    <div className={calloutStyles({ kind })}>
+    <div className={cn("admonition", KIND_CLASS[kind])}>
+      {title && <span className="admonition-title">{title}</span>}
       <HtmlOutput html={html} alwaysSanitizeHtml={true} />
     </div>
   );

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;
-  }
-}

package/src/core/i18n/locale.ts

@@ -0,0 +1,71 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * Locale used when neither the configured locale nor the browser locale can be
+ * resolved to a valid BCP 47 tag.
+ */
+export const FALLBACK_LOCALE = "en-US";
+
+/**
+ * Whether a tag is accepted by `Intl` (and therefore by react-aria's
+ * `I18nProvider`, which constructs `Intl.Locale` internally).
+ */
+export function isValidLocale(locale: string): boolean {
+  if (!locale) {
+    return false;
+  }
+  try {
+    new Intl.Locale(locale);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Coerce a browser or config locale tag into a valid
+ * [BCP 47](https://www.rfc-editor.org/info/rfc5646) tag, or `null` if nothing
+ * usable can be recovered.
+ *
+ * Some environments report POSIX-style tags that `Intl` rejects with
+ * `RangeError: Incorrect locale information provided`, crashing anything that
+ * constructs an `Intl.*` formatter (see issue #9938). Known offenders:
+ * - POSIX modifiers, e.g. Chromium under Playwright reporting `en-US@posix`
+ * - charset suffixes, e.g. `en_US.UTF-8`
+ * - underscore separators, e.g. `en_US`
+ */
+export function normalizeLocale(tag: string | null | undefined): string | null {
+  if (!tag) {
+    return null;
+  }
+
+  const candidate = tag.split("@")[0].split(".")[0].trim().replaceAll("_", "-");
+
+  if (isValidLocale(candidate)) {
+    return candidate;
+  }
+
+  // Fall back to the language subtag alone (e.g. `en` from a mangled `en-XX`).
+  const language = candidate.split("-")[0];
+  if (isValidLocale(language)) {
+    return language;
+  }
+
+  return null;
+}
+
+/** Resolve the browser's locale to a safe BCP 47 tag.
+ * See https://github.com/marimo-team/marimo/issues/9938 */
+export function browserLocale(): string {
+  const language =
+    typeof navigator === "undefined" ? undefined : navigator.language;
+  return normalizeLocale(language) ?? FALLBACK_LOCALE;
+}
+
+/**
+ * Resolve a configured locale to a safe BCP 47 tag, preferring the config and
+ * falling back to the browser locale, then to {@link FALLBACK_LOCALE}.
+ */
+export function safeLocale(locale: string | null | undefined): string {
+  return normalizeLocale(locale) ?? browserLocale();
+}