@marimo-team/islands 0.23.16-dev76 → 0.23.16-dev8

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();
+}

package/src/core/network/types.ts

@@ -191,7 +191,9 @@ export interface EditRequests {
     request: FileMoveRequest,
   ) => Promise<FileMoveResponse>;
   sendUpdateFile: (request: FileUpdateRequest) => Promise<FileUpdateResponse>;
-  sendFileDetails: (request: { path: string }) => Promise<FileDetailsResponse>;
+  sendFileDetails: (
+    request: FileDetailsRequest,
+  ) => Promise<FileDetailsResponse>;
   // Homepage requests
   openTutorial: (request: OpenTutorialRequest) => Promise<MarimoFile>;
   getRecentFiles: () => Promise<RecentFilesResponse>;

package/src/css/admonition.css

@@ -1,32 +1,53 @@
 @reference "../css/globals.css";
 
+/*
+ * Flat, GitHub-style admonitions.
+ *
+ * Icons are lucide (https://lucide.dev/icons/) data URIs applied as masks so
+ * they render in currentColor.
+ */
+
 .admonition {
-  --admonition-bg: var(--blue-2);
-  --admonition-border: var(--blue-8);
   --admonition-heading-color: var(--blue-11);
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
 
   display: flex;
-  position: relative;
   flex-direction: column;
-  padding: 1rem;
-  padding-left: 3rem;
-  border-left: 4px solid;
+  padding: 0.5rem 1rem;
+  border-left: 0.25rem solid var(--admonition-heading-color);
   margin-bottom: 1rem;
-  background-color: var(--admonition-bg);
-  border-color: var(--admonition-border);
 
-  &::before {
-    position: absolute;
-    margin-top: 0.35rem;
-    margin-left: -2rem;
+  /* Tighten the gap between the title and body (md.css gives paragraphs a
+     1rem block margin; flex children don't collapse margins). */
+  & > .paragraph,
+  & > p {
+    margin-block: 0.375rem;
+  }
+
+  /* The paragraph right after the title hugs it, matching callouts, whose
+     body is nested in a wrapper and gets the md.css :first-child treatment. */
+  & > .admonition-title + .paragraph,
+  & > .admonition-title + p {
+    margin-block-start: 0;
   }
 }
 
 .admonition-title {
-  font-weight: bold;
+  display: block;
+  margin-bottom: 0.25rem;
+  font-weight: 600;
   color: var(--admonition-heading-color);
 
-  @apply tracking-wide;
+  &::before {
+    content: "";
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    margin-right: 0.5rem;
+    vertical-align: -0.125rem;
+    background-color: currentcolor;
+    mask: var(--admonition-icon) no-repeat center / contain;
+  }
 
   > .paragraph {
     margin: 0;
@@ -38,90 +59,50 @@
   }
 }
 
-/* Icons from https://lucide.dev/icons/ */
-
 .admonition.info,
 .admonition.note {
-  --admonition-bg: var(--blue-2);
-  --admonition-border: var(--blue-8);
   --admonition-heading-color: var(--blue-11);
-
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="admonition-icon lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="admonition-icon lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>')
-    );
-  }
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
 }
 
 .admonition.danger,
 .admonition.caution,
 .admonition.error {
-  --admonition-bg: var(--red-2);
-  --admonition-border: var(--red-8);
   --admonition-heading-color: var(--red-11);
-
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>')
-    );
-  }
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>');
 }
 
 .admonition.attention,
 .admonition.warning {
-  --admonition-bg: var(--yellow-2);
-  --admonition-border: var(--yellow-8);
   --admonition-heading-color: var(--yellow-11);
-
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>')
-    );
-  }
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>');
 }
 
 .admonition.hint {
-  --admonition-bg: var(--gray-2);
-  --admonition-border: var(--gray-8);
   --admonition-heading-color: var(--gray-11);
-
-  .dark & {
-    --admonition-bg: var(--gray-3);
-  }
-
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>')
-    );
-  }
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
 }
 
 .admonition.important {
-  --admonition-bg: var(--cyan-2);
-  --admonition-border: var(--cyan-8);
   --admonition-heading-color: var(--cyan-11);
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/></svg>');
+}
 
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/></svg>')
-    );
-  }
+.admonition.success {
+  --admonition-heading-color: var(--grass-11);
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>');
 }
 
 .admonition.tip {
-  --admonition-bg: var(--grass-2);
-  --admonition-border: var(--grass-8);
   --admonition-heading-color: var(--grass-11);
+  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>');
+}
 
-  &::before {
-    content: light-dark(
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>'),
-      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="60%" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>')
-    );
+/* Quiet, icon-less variant used by neutral callouts. */
+.admonition.neutral {
+  --admonition-heading-color: var(--gray-11);
+
+  .admonition-title::before {
+    content: none;
   }
 }

package/src/plugins/impl/FormPlugin.tsx

@@ -148,7 +148,7 @@ export const FormWrapper = <T,>({
           if (evt.key === "Enter" && (evt.ctrlKey || evt.metaKey)) {
             evt.preventDefault();
             evt.stopPropagation();
-            setValue(newValue);
+            formDiv.current?.requestSubmit();
           }
         }}
       >