@marimo-team/frontend 0.25.2-dev97 → 0.25.2

package/src/css/katex-css.test.ts

@@ -0,0 +1,166 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { readFile } from "node:fs/promises";
+import postcss from "postcss";
+import { beforeAll, describe, expect, it } from "vitest";
+import {
+  checkKatexCss,
+  generateKatexCss,
+  readUpstreamCss,
+  stylesheetPath,
+} from "../../scripts/katex-css";
+
+let upstream: string;
+let generated: string;
+
+beforeAll(async () => {
+  upstream = await readUpstreamCss();
+  generated = await generateKatexCss(upstream);
+});
+
+describe("copied KaTeX stylesheet", () => {
+  it("matches the installed package with only documented marimo overrides", async () => {
+    await expect(
+      checkKatexCss(upstream, await readFile(stylesheetPath, "utf8")),
+    ).resolves.toBeUndefined();
+  });
+
+  it.each(["added", "removed", "changed"])(
+    "detects %s upstream rule without a version change",
+    async (change) => {
+      const root = postcss.parse(upstream);
+      if (change === "added") {
+        root.append(
+          postcss.parse(
+            ".katex .upstream-drift-probe { display: inline-block; }",
+          ),
+        );
+      } else {
+        root.walkRules(".katex .mspace", (rule) => {
+          if (change === "removed") {
+            rule.remove();
+          } else {
+            rule.append(postcss.decl({ prop: "color", value: "red" }));
+          }
+        });
+      }
+      await expect(checkKatexCss(root.toString(), generated)).rejects.toThrow(
+        "pnpm sync-katex-css",
+      );
+      const regenerated = await generateKatexCss(root.toString());
+      await checkKatexCss(root.toString(), regenerated);
+    },
+  );
+
+  it.each(["added", "removed", "changed"])(
+    "detects %s local rule",
+    async (change) => {
+      const root = postcss.parse(generated);
+      if (change === "added") {
+        root.append(postcss.parse(".katex .unexpected { display: none; }"));
+      } else {
+        root.walkRules(".katex .mspace", (rule) => {
+          if (change === "removed") {
+            rule.remove();
+          } else {
+            rule.append(postcss.decl({ prop: "color", value: "red" }));
+          }
+        });
+      }
+      await expect(checkKatexCss(upstream, root.toString())).rejects.toThrow(
+        "pnpm sync-katex-css",
+      );
+    },
+  );
+
+  it("preserves math sizing, tag alignment, and equation counters without bundling font faces", () => {
+    const root = postcss.parse(generated);
+    const declarations = (selector: string) => {
+      const values: Record<string, string> = {};
+      root.walkRules(selector, (rule) => {
+        rule.walkDecls((decl) => {
+          values[decl.prop] = decl.value;
+        });
+      });
+      return values;
+    };
+    expect(declarations(".katex")).toEqual({
+      "font-family": '"KaTeX_Main", "Times New Roman", serif',
+      "font-size": "110%",
+      "font-style": "normal",
+      "line-height": "inherit",
+      position: "relative",
+      "text-indent": "0",
+      "text-rendering": "auto",
+    });
+    expect(
+      declarations(".katex-display > .katex > .katex-html > .katex-tag"),
+    ).toEqual({ position: "absolute", right: "0", "text-align": "right" });
+    expect(declarations("body,\n.katex-display")).toEqual({
+      "counter-reset": "katexEqnNo mmlEqnNo",
+    });
+    expect(declarations(".katex .angl")["border-right"]).toBe("0.049em solid");
+    const fontFaces: postcss.AtRule[] = [];
+    root.walkAtRules("font-face", (rule) => {
+      fontFaces.push(rule);
+    });
+    expect(fontFaces).toEqual([]);
+  });
+
+  it.each(["root", "media"])(
+    "preserves SVG rule order and %s scope when upstream adds a competing rule",
+    async (scope) => {
+      const root = postcss.parse(upstream);
+      const svgRules: postcss.Rule[] = [];
+      root.walkRules(".katex svg", (rule) => {
+        svgRules.push(rule);
+      });
+      const secondSvg = svgRules[1];
+      secondSvg.before(postcss.parse(".katex :is(svg) { stroke-width: 3; }"));
+      if (scope === "media") {
+        const media = postcss.atRule({ name: "media", params: "print" });
+        secondSvg.before(media);
+        media.append(secondSvg);
+      }
+
+      const svgCascade = (css: string) => {
+        const rules: {
+          selector: string;
+          scope: string;
+          strokeWidth: string | undefined;
+        }[] = [];
+        postcss.parse(css).walkRules((rule) => {
+          if (
+            rule.selector !== ".katex svg" &&
+            rule.selector !== ".katex :is(svg)"
+          ) {
+            return;
+          }
+          let strokeWidth: string | undefined;
+          rule.walkDecls("stroke-width", (decl) => {
+            strokeWidth = decl.value;
+          });
+          const parent = rule.parent;
+          rules.push({
+            selector: rule.selector,
+            scope:
+              parent?.type === "atrule"
+                ? `${parent.name} ${parent.params}`
+                : "root",
+            strokeWidth,
+          });
+        });
+        return rules;
+      };
+      const regenerated = await generateKatexCss(root.toString());
+      expect(svgCascade(regenerated)).toEqual(svgCascade(root.toString()));
+      await checkKatexCss(root.toString(), regenerated);
+    },
+  );
+
+  it("requires review when an overridden upstream declaration changes", async () => {
+    await expect(
+      generateKatexCss(upstream.replace("line-height:1.2", "line-height:1.3")),
+    ).rejects.toThrow("review overrides");
+  });
+});

package/src/css/katex.min.css

@@ -1,23 +1,20 @@
 /*
- * Adapted from https://cdn.jsdelivr.net/npm/katex@0.18.5/dist/katex.min.css
+ * Generated from the installed katex/dist/katex.min.css.
+ * Run `pnpm sync-katex-css` from the repository root or frontend to regenerate.
+ * Do not edit this file directly; update scripts/katex-css.ts for local overrides.
  *
- * KaTeX's class names change between versions (0.18 prefixed most of its
- * internal classes with `katex-`), so this file must be regenerated whenever
- * the `katex` package is bumped. Steps:
- *
- * 1. Copy the upstream katex.min.css for the installed version.
- * 2. Delete every `@font-face` block. The fonts are declared in katex-fonts.css.
- * 3. Keep the upstream `em` values. KaTeX sizes scripts, rules, and spacing
- *    relative to the surrounding math, which can differ from the root size.
- * 4. Run oxfmt to expand the file, then stylelint with --fix. Merge the two
- *    `.katex svg` rules stylelint flags as duplicates.
- * 5. Re-apply the marimo edits below:
- *    - `.katex`: `font-size: 110%`, `line-height: inherit` and
- *      `font-style: normal` in place of the upstream `font` shorthand, so math
- *      follows the surrounding text size and stays upright in blockquotes.
- *    - `.katex-tag` inside `.katex-display`: `text-align: right`.
- *    - `counter-reset` on `.katex-display` as well as `body`, so equation
- *      numbers restart for each display block.
+ * Documented marimo overrides:
+ * - Remove @font-face: font declarations live in katex-fonts.css.
+ * - Preserve em units so scripts, rules, and spacing scale with surrounding math.
+ * - Replace .katex's font shorthand with its font-family, font-size: 110%,
+ *   font-style: normal, and line-height: inherit to follow surrounding text size
+ *   and keep math upright in blockquotes.
+ * - Right-align display equation tags.
+ * - Reset equation counters on each display block as well as body.
+ * - Preserve duplicate SVG rules in their upstream order and scope, with a
+ *   targeted stylelint exemption so their cascade remains intact.
+ * Formatting and syntax normalization use oxfmt and stylelint; adjacent exact
+ * duplicate declarations left by vendor-prefix normalization are removed.
  */
 
 /* stylelint-disable unit-allowed-list -- KaTeX sizes are relative to the math. */
@@ -38,7 +35,7 @@
 }
 
 .katex .katex-version::after {
-  content: "0.18.5";
+  content: "0.18.7";
 }
 
 .katex .katex-mathml {
@@ -1002,6 +999,17 @@
 .katex svg {
   fill: currentcolor;
   stroke: currentcolor;
+  display: block;
+  height: inherit;
+  position: absolute;
+  width: 100%;
+}
+
+.katex svg path {
+  stroke: none;
+}
+/* stylelint-disable no-duplicate-selectors -- Preserve the upstream SVG cascade. */
+.katex svg {
   fill-rule: nonzero;
   fill-opacity: 1;
   stroke-width: 1;
@@ -1011,16 +1019,8 @@
   stroke-dasharray: none;
   stroke-dashoffset: 0;
   stroke-opacity: 1;
-  display: block;
-  height: inherit;
-  position: absolute;
-  width: 100%;
 }
-
-.katex svg path {
-  stroke: none;
-}
-
+/* stylelint-enable no-duplicate-selectors */
 .katex img {
   border-style: none;
   max-height: none;
@@ -1131,6 +1131,11 @@
   padding: 0 0.03889em;
 }
 
+.katex .reflectbox {
+  display: inline-block;
+  transform: scaleX(-1);
+}
+
 .katex .eqn-num::before {
   content: "(" counter(katexEqnNo) ")";
   counter-increment: katexEqnNo;

package/src/hooks/__tests__/useEventListener.test.tsx

@@ -2,7 +2,7 @@
 
 import { renderHook } from "@testing-library/react";
 import { useRef } from "react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
   type HTMLElementNotDerivedFromRef,
   isRefObject,
@@ -28,6 +28,50 @@ describe("isRefObject", () => {
   });
 });
 
+describe.each([1, 2])("with %i anchors named current", (count) => {
+  let iframe: HTMLIFrameElement;
+  let browserWindow: Window;
+
+  beforeEach(() => {
+    // An iframe preserves named properties hidden by Vitest's global window.
+    iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    if (!iframe.contentWindow) {
+      throw new Error("Expected an iframe window");
+    }
+    browserWindow = iframe.contentWindow;
+    const anchors = Array.from({ length: count }, () => {
+      const anchor = browserWindow.document.createElement("a");
+      anchor.id = "current";
+      return anchor;
+    });
+    browserWindow.document.body.append(...anchors);
+  });
+
+  afterEach(() => {
+    iframe.remove();
+  });
+
+  it("does not mistake window for a React ref", () => {
+    expect("current" in browserWindow).toBe(true);
+    expect(isRefObject(browserWindow)).toBe(false);
+  });
+
+  it("attaches and removes the listener on window", () => {
+    const listener = vi.fn();
+    const { unmount } = renderHook(() =>
+      useEventListener(browserWindow, "resize", listener),
+    );
+
+    browserWindow.dispatchEvent(new Event("resize"));
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    unmount();
+    browserWindow.dispatchEvent(new Event("resize"));
+    expect(listener).toHaveBeenCalledTimes(1);
+  });
+});
+
 describe("useEventListener", () => {
   beforeEach(() => {
     vi.clearAllMocks();

package/src/hooks/useEventListener.ts

@@ -13,7 +13,12 @@ export type HTMLElementNotDerivedFromRef<T = HTMLElement> = T & {
 };
 
 export function isRefObject<T>(target: unknown): target is RefObject<T | null> {
-  return target !== null && typeof target === "object" && "current" in target;
+  return (
+    target !== null &&
+    typeof target === "object" &&
+    !("addEventListener" in target) &&
+    "current" in target
+  );
 }
 
 export function useEventListener<K extends keyof DocumentEventMap>(

package/src/plugins/impl/NumberPlugin.tsx

@@ -4,6 +4,7 @@ import { z } from "zod";
 import { NumberField } from "@/components/ui/number-field";
 import { useDebounceControlledState } from "@/hooks/useDebounce";
 import { cn } from "@/utils/cn";
+import { clamp } from "@/utils/math";
 import type { IPlugin, IPluginProps, Setter } from "../types";
 import { Labeled } from "./common/labeled";
 
@@ -65,8 +66,16 @@ const NumberComponent = (props: NumberComponentProps): JSX.Element => {
     onChange: props.setValue,
   });
 
+  const clampToRange = (n: number) =>
+    clamp(n, props.start ?? -Infinity, props.stop ?? Infinity);
+
   const handleChange = (newValue: number) => {
-    onChange(withoutNaN(newValue));
+    const n = withoutNaN(newValue);
+    const next = n == null ? null : clampToRange(n);
+    // e.g. typing past `stop` while already at `stop`
+    if (next !== value) {
+      onChange(next);
+    }
   };
 
   return (
@@ -76,11 +85,19 @@ const NumberComponent = (props: NumberComponentProps): JSX.Element => {
         className={cn("min-w-[3em]", props.fullWidth && "w-full")}
         minValue={props.start ?? undefined}
         maxValue={props.stop ?? undefined}
-        // This needs to be `?? NaN` since `?? undefined` makes  uncontrolled component
+        // This needs to be `NaN` since `undefined` makes  uncontrolled component
         // and can lead to leaving the old value in forms (https://github.com/marimo-team/marimo/issues/7352)
         // We out NaNs later
-        value={value ?? Number.NaN}
+        value={value == null ? Number.NaN : clampToRange(value)}
         step={props.step}
+        // By default React Aria rounds every value to `start + n * step`, but
+        // `step` is only the stepper increment: users can enter any value in
+        // range (#9106). "validate" turns off that rounding (and the clamping,
+        // done above instead); its step validation is turned off so off-step
+        // values aren't flagged invalid or block `mo.ui.form` submission.
+        commitBehavior="validate"
+        validationBehavior="aria"
+        isInvalid={false}
         onChange={handleChange}
         id={id}
         aria-label={props.label || "Number input"}

package/src/plugins/impl/__tests__/NumberPlugin.test.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { act, render } from "@testing-library/react";
+import { act, fireEvent, render } from "@testing-library/react";
+import { useState } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { z } from "zod";
 import { initialModeAtom } from "@/core/mode";
@@ -474,4 +475,161 @@ describe("NumberPlugin", () => {
     );
     expect(numberField?.classList.contains("w-full")).toBe(true);
   });
+
+  describe("does not snap values to step (#9106)", () => {
+    // Feeds `setValue` back into `value`, as the kernel round-trip does.
+    const renderNumber = (
+      initialValue: number,
+      data: Pick<z.infer<NumberPlugin["validator"]>, "start" | "stop" | "step">,
+      { debounce = false } = {},
+    ) => {
+      const plugin = new NumberPlugin();
+      const setValue = vi.fn();
+      const Harness = () => {
+        const [value, setState] = useState<number | null>(initialValue);
+        return plugin.render({
+          host: document.createElement("div"),
+          value,
+          setValue: (next) => {
+            setValue(next);
+            setState(next);
+          },
+          data: {
+            ...data,
+            label: null,
+            debounce,
+            fullWidth: false,
+          },
+          functions: {},
+        });
+      };
+      const { getByRole } = render(<Harness />);
+      act(() => {
+        vi.advanceTimersByTime(0);
+      });
+      const input = getByRole("textbox", {
+        name: "Number input",
+      }) as HTMLInputElement;
+      return { input, setValue };
+    };
+
+    const typeAndCommit = (input: HTMLInputElement, text: string) => {
+      act(() => {
+        input.focus();
+      });
+      fireEvent.change(input, { target: { value: text } });
+      act(() => {
+        input.blur();
+      });
+    };
+
+    it.each([
+      { value: 2.23, start: 1.255_57, step: 0.001 },
+      { value: 2.233_45, start: 1, step: 0.001 },
+    ])(
+      "displays $value as-is with start=$start and step=$step",
+      ({ value, start, step }) => {
+        const { input } = renderNumber(value, { start, stop: 20, step });
+        expect(input.value).toBe(String(value));
+      },
+    );
+
+    it.each([
+      { typed: "2.3377", start: 1, step: 0.01 },
+      { typed: "2.23111", start: 1.222, step: 0.01 },
+    ])(
+      "keeps typed value $typed with start=$start and step=$step",
+      ({ typed, start, step }) => {
+        const { input, setValue } = renderNumber(2.233_45, {
+          start,
+          stop: 20,
+          step,
+        });
+        typeAndCommit(input, typed);
+        expect(setValue).toHaveBeenLastCalledWith(Number(typed));
+        expect(input.value).toBe(typed);
+        expect(input.getAttribute("aria-invalid")).not.toBe("true");
+        // React Aria sets a custom validity on this text input in native mode,
+        // which would block `mo.ui.form` submission.
+        expect(input.validity.valid).toBe(true);
+      },
+    );
+
+    it("clamps typed values to start and stop", () => {
+      const { input, setValue } = renderNumber(5, {
+        start: 2,
+        stop: 10,
+        step: 1,
+      });
+      typeAndCommit(input, "25");
+      expect(setValue).toHaveBeenLastCalledWith(10);
+      expect(input.value).toBe("10");
+      typeAndCommit(input, "1");
+      expect(setValue).toHaveBeenLastCalledWith(2);
+      expect(input.value).toBe("2");
+    });
+
+    it("shows the bound when typing past a bound it is already at", () => {
+      const { input, setValue } = renderNumber(10, {
+        start: 2,
+        stop: 10,
+        step: 1,
+      });
+      typeAndCommit(input, "50");
+      expect(setValue).not.toHaveBeenCalled();
+      expect(input.value).toBe("10");
+    });
+
+    it("increments and decrements by step", () => {
+      const { input, setValue } = renderNumber(5, {
+        start: 0,
+        stop: 10,
+        step: 0.5,
+      });
+      fireEvent.keyDown(input, { key: "ArrowUp" });
+      expect(setValue).toHaveBeenLastCalledWith(5.5);
+      expect(input.value).toBe("5.5");
+      fireEvent.keyDown(input, { key: "ArrowDown" });
+      expect(setValue).toHaveBeenLastCalledWith(5);
+      expect(input.value).toBe("5");
+    });
+
+    it.each([
+      { key: "ArrowUp", expected: 3 },
+      { key: "ArrowDown", expected: 2 },
+    ])(
+      "$key from an off-step value moves to the nearest step ($expected)",
+      ({ key, expected }) => {
+        const { input, setValue } = renderNumber(2.23, {
+          start: 0,
+          stop: 10,
+          step: 1,
+        });
+        fireEvent.keyDown(input, { key });
+        expect(setValue).toHaveBeenLastCalledWith(expected);
+        expect(input.value).toBe(String(expected));
+      },
+    );
+
+    it.each([
+      { typed: "2.3377", expected: 2.3377 },
+      { typed: "50", expected: 20 },
+    ])(
+      "commits typed $typed as $expected after the debounce delay",
+      ({ typed, expected }) => {
+        const { input, setValue } = renderNumber(
+          2.233_45,
+          { start: 1, stop: 20, step: 0.01 },
+          { debounce: true },
+        );
+        typeAndCommit(input, typed);
+        expect(setValue).not.toHaveBeenCalled();
+        act(() => {
+          vi.advanceTimersByTime(200);
+        });
+        expect(setValue).toHaveBeenLastCalledWith(expected);
+        expect(input.value).toBe(String(expected));
+      },
+    );
+  });
 });