@marimo-team/frontend 0.22.1-dev8 → 0.22.1

package/src/css/app/Cell.css

@@ -15,6 +15,7 @@
   border: 1px solid var(--gray-4);
 
   @apply divide-y divide-(--gray-5);
+
   &:hover {
     border-color: var(--gray-6);
   }
@@ -99,8 +100,8 @@
     /* Special case for particular components */
 
     .output-area:has(
-        > .output:only-child > marimo-ui-element:only-child > marimo-table
-      ) {
+      > .output:only-child > marimo-ui-element:only-child > marimo-table
+    ) {
       padding: 0 0 5px;
       max-height: none;
       overflow: hidden;
@@ -112,6 +113,7 @@
         margin-top: 0.25rem;
         border: none;
         border-radius: 0;
+        border-top-left-radius: 9px;
       }
 
       marimo-table::part(table-wrapper) {
@@ -385,6 +387,7 @@
     border-top-left-radius: 9px;
     border-top-right-radius: 9px;
   }
+
   div[data-ai-input-open="true"] .cm-editor {
     border-top-left-radius: 0;
     border-top-right-radius: 0;

package/src/css/globals.css

@@ -147,47 +147,49 @@
   --shadow-none: none;
   --shadow-xxs: 0px 0px 2px 0px var(--base-shadow-darker);
 
-  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
   --shadow-xs: 1px 1px 2px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
 
-  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
   --shadow-sm: 2px 2px 2px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
 
-  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
   --shadow-md: 4px 4px 4px 0px var(--base-shadow), 0 0px 4px 0px hsl(0deg 0% 60% / var(--base-shadow-opacity));
 
-  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
   --shadow-lg: 5px 6px 4px 0px var(--base-shadow), 0 0px 4px 0px hsl(0deg 0% 75% / var(--base-shadow-opacity));
 
-  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
   --shadow-xl: 8px 9px 4px 0px var(--base-shadow), 0 0px 6px 0px hsl(0deg 0% 85% / var(--base-shadow-opacity));
 
-  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
   --shadow-2xl: 10px 12px 10px 0px var(--base-shadow), 0 0px 8px 0px hsl(0deg 0% 90% / var(--base-shadow-opacity));
 
-  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
   --shadow-xs-solid: 1px 1px 0px 0px var(--base-shadow-darker), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
 
-  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
   --shadow-sm-solid: 2px 2px 0px 0px var(--base-shadow-darker), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
 
-  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
   --shadow-md-solid: 4px 4px 0px 0px var(--base-shadow-darker), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);
 
-  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
   --shadow-lg-solid: 5px 6px 0px 0px var(--base-shadow-darker), 0 0px 4px 0px hsl(0deg 0% 75% / 50%);
 
-  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
   --shadow-xl-solid: 7px 8px 0px 0px var(--base-shadow-darker), 0 0px 4px 0px hsl(0deg 0% 85% / 50%);
 
-  /* biome-ignore format: definition needs to be oneline or breaks variants */
+  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
   --shadow-2xl-solid: 10px 12px 0px 0px var(--base-shadow-darker), 0 0px 8px 0px hsl(0deg 0% 90% / 50%);
 
   /* Solid shadows with lighter shade color */
 
-  /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-sm-solid-shade: 2px 2px 0px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
+  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
+  --shadow-sm-solid-shade:
+    2px 2px 0px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
 
-  /* biome-ignore format: definition needs to be oneline or breaks variants */
-  --shadow-md-solid-shade: 4px 4px 0px 0px var(--base-shadow), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);
+  /* oxfmt-ignore: definition needs to be oneline or breaks variants */
+  --shadow-md-solid-shade:
+    4px 4px 0px 0px var(--base-shadow), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);
 }

package/src/custom.d.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 declare module "*.svg" {
   const content: string | undefined;
   export default content;

package/src/hooks/__tests__/useDuplicateShortcuts.test.ts

@@ -17,7 +17,7 @@ function createHotkeys(
   keys: Partial<Record<HotkeyAction, Hotkey>>,
 ): Record<HotkeyAction, Hotkey> {
   return new Proxy(keys as Record<HotkeyAction, Hotkey>, {
-    // biome-ignore lint: ok to have three arguments here (It's a web API)
+    // oxlint-ignore-next-line -- ok to have three arguments here (It's a web API)
     get(target, p, receiver) {
       const key = Reflect.get(target, p, receiver);
       if (key === "undefined") {
@@ -145,7 +145,7 @@ describe("findDuplicateShortcuts", () => {
     expect(result.duplicates).toHaveLength(2);
 
     // Check that both duplicate groups are detected
-    const duplicateKeys = result.duplicates.map((d) => d.key).sort();
+    const duplicateKeys = result.duplicates.map((d) => d.key).toSorted();
     expect(duplicateKeys).toEqual(["cmd-b", "cmd-enter"]);
 
     expect(result.hasDuplicate("cell.format")).toBe(true);
@@ -402,7 +402,7 @@ describe("findDuplicateShortcuts", () => {
       });
 
       const provider = new HotkeyProvider(hotkeys, { platform: "mac" });
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      // oxlint-disable-next-line typescript/no-explicit-any
       const result = findDuplicateShortcuts(provider, "NonExistent" as any);
 
       // Should still work normally and detect the duplicate

package/src/hooks/debug.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable react-hooks/rules-of-hooks */
+/* oxlint-disable react-hooks/rules-of-hooks */
 
 import { dequal } from "dequal";
 import { useEffect, useMemo, useRef } from "react";
@@ -21,7 +21,7 @@ export function useDebugMounting(name: string) {
     return () => {
       Logger.debug(`🐛 [${name}] unmounted. Renders: ${renders.current}`);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -111,6 +111,6 @@ export function useMemoDebugChanges<T>(
     previousDeps.current = deps;
 
     return fn();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 }

package/src/hooks/useDebounce.ts

@@ -78,7 +78,7 @@ export function useDebounceControlledState<T>(opts: {
   };
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 export function useDebouncedCallback<T extends (...args: any[]) => unknown>(
   callback: T,
   delay: number,

package/src/hooks/useEventListener.ts

@@ -57,7 +57,7 @@ export function useEventListener(
       return;
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // oxlint-disable-next-line typescript/no-explicit-any
     const eventListener = (event: any) => savedListener.current(event);
     target.addEventListener(type, eventListener, options);
 

package/src/hooks/useHotkey.ts

@@ -14,7 +14,7 @@ import { useEventListener } from "./useEventListener";
 
 type HotkeyHandler = (
   evt?: KeyboardEvent,
-  // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  // oxlint-disable-next-line typescript/no-invalid-void-type
 ) => boolean | void | undefined | Promise<void>;
 
 /**

package/src/hooks/useLifecycle.ts

@@ -5,7 +5,7 @@ import { type EffectCallback, useEffect } from "react";
  * Wrapper around useEffect that makes it clearer that the effect is run, just on mount.
  */
 export function useOnMount(effect: EffectCallback) {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
   useEffect(effect, []);
 }
 
@@ -13,7 +13,7 @@ export function useOnMount(effect: EffectCallback) {
  * Wrapper around useEffect that makes it clearer that the effect is run, just on unmount.
  */
 export function useOnUnmount(effect: EffectCallback) {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  // oxlint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     return effect();
   }, []);

package/src/hooks/useNonce.ts

@@ -2,7 +2,7 @@
 import { useCallback, useState } from "react";
 
 export function useNonce() {
-  // eslint-disable-next-line react/hook-use-state
+  // oxlint-disable-next-line react/hook-use-state
   const [, setNonce] = useState(0);
   return useCallback(() => {
     setNonce((n) => n + 1);

package/src/hooks/useResizeObserver.ts

@@ -28,10 +28,10 @@ export function useResizeObserver<T extends HTMLElement = HTMLElement>(
   options: UseResizeObserverOptions<T>,
 ): void {
   const { ref, box = "content-box", skip } = options;
-  // eslint-disable-next-line react/hook-use-state
+  // oxlint-disable-next-line react/hook-use-state
   const previousSize = useRef<Size>({ ...initialSize });
   const onResize = useRef<((size: Size) => void) | undefined>(undefined);
-  // eslint-disable-next-line react-hooks/react-compiler
+  // oxlint-disable-next-line react-hooks/react-compiler
   onResize.current = options.onResize;
 
   useEffect(() => {

package/src/main.tsx

@@ -8,7 +8,7 @@ declare global {
   }
 }
 
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+// oxlint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 const el = document.getElementById("root");
 if (el) {
   if (!window.__MARIMO_MOUNT_CONFIG__) {

package/src/plugins/core/BadPlugin.tsx

@@ -1,11 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@radix-ui/react-accordion";
+import { Accordion as AccordionPrimitive } from "radix-ui";
+
+const Accordion = AccordionPrimitive.Root;
+const AccordionContent = AccordionPrimitive.Content;
+const AccordionItem = AccordionPrimitive.Item;
+const AccordionTrigger = AccordionPrimitive.Trigger;
+
 import type { JSX } from "react";
 import { ZodError } from "zod";
 import { EmotionCacheProvider } from "@/components/editor/output/EmotionCacheProvider";

package/src/plugins/core/RenderHTML.tsx

@@ -47,7 +47,7 @@ const removeWrappingBodyTags: TransformFn = (
     if (isValidElement(reactNode) && "props" in reactNode) {
       const props = reactNode.props as { children?: ReactNode };
       const children = props.children;
-      return <>{children}</>; // eslint-disable-line react/jsx-no-useless-fragment
+      return <>{children}</>; // oxlint-disable-line react/jsx-no-useless-fragment
     }
     return;
   }
@@ -62,7 +62,7 @@ const removeWrappingHtmlTags: TransformFn = (
     if (isValidElement(reactNode) && "props" in reactNode) {
       const props = reactNode.props as { children?: ReactNode };
       const children = props.children;
-      return <>{children}</>; // eslint-disable-line react/jsx-no-useless-fragment
+      return <>{children}</>; // oxlint-disable-line react/jsx-no-useless-fragment
     }
     return;
   }
@@ -104,7 +104,7 @@ const replaceSrcScripts = (domNode: DOMNode): JSX.Element | undefined => {
       script.src = src;
       document.head.append(script);
     }
-    // biome-ignore lint/complexity/noUselessFragments: this is intentional
+    // oxlint-disable-next-line react/jsx-no-useless-fragment
     return <></>;
   }
 };

package/src/plugins/core/__test__/registerReactComponent.test.ts

@@ -58,7 +58,7 @@ describe("isCustomMarimoElement", () => {
 });
 
 describe("connectedCallback - light DOM nesting detection", () => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   let createRootSpy: any;
   const mockRoot = {
     render: vi.fn(),

package/src/plugins/core/registerReactComponent.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-/* eslint-disable unicorn/prefer-spread */
+/* oxlint-disable unicorn/prefer-spread */
 /**
  * WebComponent Factory for React Components
  *
@@ -88,7 +88,7 @@ interface PluginSlotProps<T> {
 
 /* Handles synchronization of value on behalf of the component */
 
-// eslint-disable-next-line react/function-component-definition
+// oxlint-disable-next-line react/function-component-definition
 function PluginSlotInternal<T>(
   { hostElement, plugin, children, getInitialValue }: PluginSlotProps<T>,
   ref: React.Ref<PluginSlotHandle>,
@@ -231,7 +231,7 @@ function PluginSlotInternal<T>(
     }
 
     return methods;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
   }, [plugin.functions, hostElement, resetNonce]);
 
   // If we failed to parse the initial value, render an error
@@ -265,7 +265,7 @@ function PluginSlotInternal<T>(
 }
 
 const PluginSlot: React.ForwardRefExoticComponent<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   PluginSlotProps<any> & React.RefAttributes<PluginSlotHandle>
 > = React.forwardRef(PluginSlotInternal);
 

package/src/plugins/core/rpc.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { ZodType } from "zod";
 

package/src/plugins/impl/CheckboxPlugin.tsx

@@ -1,6 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { CheckedState } from "@radix-ui/react-checkbox";
+import type { Checkbox as CheckboxPrimitive } from "radix-ui";
+
+type CheckedState = CheckboxPrimitive.CheckedState;
+
 import { type JSX, useId } from "react";
 import { z } from "zod";
 import { Checkbox } from "../../components/ui/checkbox";

package/src/plugins/impl/DataEditorPlugin.tsx

@@ -1,7 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import glideCss from "@glideapps/glide-data-grid/dist/index.css?inline";
-import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Tooltip } from "radix-ui";
+
+const TooltipProvider = Tooltip.Provider;
+
 import React, { useState } from "react";
 import { z } from "zod";
 import { inferFieldTypes } from "@/components/data-table/columns";
@@ -73,8 +76,10 @@ export const DataEditorPlugin = createPlugin<Edits>("marimo-data-editor", {
     );
   });
 
-interface Props
-  extends Omit<DataEditorProps<object>, "data" | "onAddEdits" | "onAddRows"> {
+interface Props extends Omit<
+  DataEditorProps<object>,
+  "data" | "onAddEdits" | "onAddRows"
+> {
   data: TableData<object>;
   edits: Edits;
   onEdits: Setter<Edits>;

package/src/plugins/impl/DataTablePlugin.tsx

@@ -1,7 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { Provider as SlotzProvider } from "@marimo-team/react-slotz";
-import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Tooltip } from "radix-ui";
+
+const TooltipProvider = Tooltip.Provider;
+
 import type {
   ColumnFiltersState,
   OnChangeFn,
@@ -202,7 +205,7 @@ interface Data<T> {
   cellHoverTexts?: Record<string, Record<string, string | null>> | null;
 }
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// oxlint-disable-next-line typescript/consistent-type-definitions
 type DataTableFunctions = {
   download_as: DownloadAsArgs;
   get_column_summaries: <T>(opts: {}) => Promise<ColumnSummaries<T>>;

package/src/plugins/impl/FileBrowserPlugin.tsx

@@ -62,7 +62,7 @@ interface FileInfo {
   is_directory: boolean;
 }
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// oxlint-disable-next-line typescript/consistent-type-definitions
 type PluginFunctions = {
   list_directory: (req: { path: string }) => Promise<{
     files: FileInfo[];

package/src/plugins/impl/FormPlugin.tsx

@@ -44,7 +44,7 @@ interface Data {
  * is clicked, this plugin assumes the value of the associated plugin.
  */
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+// oxlint-disable-next-line typescript/consistent-type-definitions
 type Functions = {
   validate: (req: { value?: unknown }) => Promise<string | undefined | null>;
 };
@@ -80,8 +80,7 @@ export const FormPlugin = createPlugin("marimo-form")
   });
 
 export interface FormWrapperProps<T>
-  extends Omit<Data, "elementId">,
-    Functions {
+  extends Omit<Data, "elementId">, Functions {
   children: React.ReactNode;
   currentValue: T;
   newValue: T;

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

@@ -1,6 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { Tooltip } from "radix-ui";
+
+const TooltipProvider = Tooltip.Provider;
+
 import { act, render, screen, waitFor } from "@testing-library/react";
 import { Provider } from "jotai";
 import { beforeAll, describe, expect, it, vi } from "vitest";

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

@@ -52,7 +52,7 @@ beforeEach(() => {
 
   // jsdom's PointerEvent doesn't properly inherit MouseEvent properties
   // like clientX. Polyfill it so fireEvent.pointerDown/Move/Up work.
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   (globalThis as any).PointerEvent = class PointerEvent extends MouseEvent {
     readonly pointerId: number;
     constructor(type: string, init: PointerEventInit = {}) {

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

@@ -9,6 +9,35 @@ import { store } from "@/core/state/jotai";
 import type { IPluginProps } from "../../types";
 import { SliderPlugin } from "../SliderPlugin";
 
+vi.mock("@/components/ui/slider", () => ({
+  Slider: ({
+    disabled,
+    onValueChange,
+    onValueCommit,
+    value,
+  }: {
+    disabled?: boolean;
+    onValueChange?: (value: number[]) => void;
+    onValueCommit?: (value: number[]) => void;
+    value: number[];
+  }) => (
+    <div>
+      <button
+        aria-label="Slider change"
+        disabled={disabled}
+        onClick={() => onValueChange?.([value[0] + 1])}
+        type="button"
+      />
+      <button
+        aria-label="Slider commit"
+        disabled={disabled}
+        onClick={() => onValueCommit?.(value)}
+        type="button"
+      />
+    </div>
+  ),
+}));
+
 SetupMocks.resizeObserver();
 
 describe("SliderPlugin", () => {
@@ -51,46 +80,45 @@ describe("SliderPlugin", () => {
     const plugin = new SliderPlugin();
     const setValue = vi.fn();
     const props = createProps(false, false, setValue);
-    const { container } = render(plugin.render(props));
+    const { getByRole } = render(plugin.render(props));
 
     act(() => {
       vi.advanceTimersByTime(0);
     });
 
-    const thumb = container.querySelector('[role="slider"]');
-    expect(thumb).toBeTruthy();
+    const changeButton = getByRole("button", { name: "Slider change" });
 
-    // Radix UI Slider updates on keyboard ArrowRight/ArrowLeft
     act(() => {
-      (thumb as HTMLElement)?.focus();
-      fireEvent.keyDown(thumb!, { key: "ArrowRight" });
+      fireEvent.click(changeButton);
     });
 
     expect(setValue).toHaveBeenCalledWith(6);
   });
 
-  it("slider does not trigger setValue immediately when debounce is true", () => {
+  it("slider waits until commit before calling setValue when debounce is true", () => {
     const plugin = new SliderPlugin();
     const setValue = vi.fn();
     const props = createProps(true, false, setValue);
-    const { container } = render(plugin.render(props));
+    const { getByRole } = render(plugin.render(props));
 
     act(() => {
       vi.advanceTimersByTime(0);
     });
 
-    const thumb = container.querySelector('[role="slider"]');
+    const changeButton = getByRole("button", { name: "Slider change" });
+    const commitButton = getByRole("button", { name: "Slider commit" });
 
     act(() => {
-      (thumb as HTMLElement)?.focus();
-      // Simulate just a programmatic change that Radix would trigger via pointer move
-      // which fires onValueChange but not onValueCommit yet
-      // Because we can't easily separated Radix's internal pointer events in jsdom, we
-      // test the main issue: editable input. We can trust Radix's onValueChange vs onValueCommit.
+      fireEvent.click(changeButton);
     });
 
-    // We verified above that NumberField works when debounce=true
     expect(setValue).not.toHaveBeenCalled();
+
+    act(() => {
+      fireEvent.click(commitButton);
+    });
+
+    expect(setValue).toHaveBeenCalledWith(6);
   });
 
   it("editable input triggers setValue immediately even when slider debounce is true", () => {

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -1,10 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { AnyWidget } from "@anywidget/types";
 import { useEffect, useRef } from "react";
 import { z } from "zod";
-import { RANDOM_ID_ATTR } from "@/core/dom/ui-element-constants";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import type { HTMLElementNotDerivedFromRef } from "@/hooks/useEventListener";
 import { createPlugin } from "@/plugins/core/builder";
@@ -145,18 +144,10 @@ const AnyWidgetSlot = (props: IPluginProps<ModelIdRef, Data>) => {
     return <ErrorBanner error={error} />;
   }
 
-  // Find the closest parent element with an attribute of `random-id`
-  const randomId = props.host
-    .closest(`[${RANDOM_ID_ATTR}]`)
-    ?.getAttribute(RANDOM_ID_ATTR);
-  const key = randomId ?? jsUrl;
-
   return (
     <LoadedSlot
-      // Use the a key to force a re-render when the randomId (or jsUrl) changes
-      // Plugins may be stateful and we cannot make assumptions that we won't be
-      // so it is safer to just re-render.
-      key={key}
+      // Force remount when the widget module or model changes (cell re-run).
+      key={`${jsHash}:${modelId}`}
       widget={jsModule.default}
       modelId={modelId}
       host={host}

package/src/plugins/impl/anywidget/__tests__/model.test.ts

@@ -58,13 +58,13 @@ describe("Model", () => {
   describe("public API", () => {
     it("should only expose AFM-compliant interface", () => {
       // Get all enumerable own properties
-      const ownProperties = Object.keys(model).sort();
+      const ownProperties = Object.keys(model).toSorted();
       // Get prototype methods (excluding constructor)
       const prototypeMethods = Object.getOwnPropertyNames(
         Object.getPrototypeOf(model),
       )
         .filter((name) => name !== "constructor")
-        .sort();
+        .toSorted();
 
       // Snapshot the public API to catch accidental leaks of internal methods
       expect({ ownProperties, prototypeMethods }).toMatchInlineSnapshot(`

package/src/plugins/impl/anywidget/model.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { AnyModel } from "@anywidget/types";
 import { debounce } from "lodash-es";

package/src/plugins/impl/anywidget/types.ts

@@ -2,7 +2,7 @@
 import type { Base64String } from "@/utils/json/base64";
 import type { TypedString } from "@/utils/typed";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 export type EventHandler = (...args: any[]) => void;
 
 /**
@@ -13,7 +13,7 @@ export type WidgetModelId = TypedString<"WidgetModelId">;
 /**
  * AnyWidget model state with buffers.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typescript/no-explicit-any
 export type ModelState = Record<string | number, any>;
 
 /**

package/src/plugins/impl/anywidget/widget-binding.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/* oxlint-disable typescript/no-explicit-any */
 
 import type { AnyWidget, Experimental } from "@anywidget/types";
 import { asRemoteURL } from "@/core/runtime/config";