@marimo-team/frontend 0.24.1-dev99 → 0.24.2-dev129

package/src/components/ui/range-slider.tsx

@@ -132,7 +132,7 @@ const RangeSlider = React.forwardRef<
         "relative flex touch-none select-none hover:cursor-pointer",
         "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:items-center",
         "data-[orientation=vertical]:h-full data-[orientation=vertical]:justify-center",
-        "data-disabled:cursor-not-allowed",
+        "data-disabled:cursor-not-allowed forced-color-adjust-none",
         className,
       )}
       {...props}
@@ -142,6 +142,7 @@ const RangeSlider = React.forwardRef<
         data-testid="track"
         className={cn(
           "relative grow overflow-hidden rounded-full bg-slate-200 dark:bg-accent/60",
+          "forced-colors:border forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace]",
           "data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full",
           "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2",
         )}
@@ -150,6 +151,7 @@ const RangeSlider = React.forwardRef<
           data-testid="range"
           className={cn(
             "absolute bg-blue-500 dark:bg-primary",
+            "forced-colors:bg-[Highlight] forced-colors:data-disabled:bg-[GrayText]",
             "data-[orientation=horizontal]:h-full",
             "data-[orientation=vertical]:w-full",
             "data-disabled:opacity-50",
@@ -165,7 +167,7 @@ const RangeSlider = React.forwardRef<
           <TooltipTrigger asChild={true}>
             <SliderPrimitive.Thumb
               data-testid="thumb"
-              className="block h-4 w-4 rounded-full shadow-xs-solid border border-blue-500 dark:border-primary dark:bg-accent bg-white hover:bg-blue-300 focus:bg-blue-300 transition-colors focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50"
+              className="block h-4 w-4 rounded-full shadow-xs-solid border border-blue-500 dark:border-primary dark:bg-accent bg-white hover:bg-blue-300 focus:bg-blue-300 transition-colors focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace] forced-colors:data-disabled:border-[GrayText]"
               onFocus={openActions.setTrue}
               onBlur={openActions.setFalse}
               onMouseEnter={openActions.setTrue}
@@ -186,7 +188,7 @@ const RangeSlider = React.forwardRef<
           <TooltipTrigger asChild={true}>
             <SliderPrimitive.Thumb
               data-testid="thumb"
-              className="block h-4 w-4 rounded-full shadow-xs-solid border border-blue-500 dark:border-primary dark:bg-accent bg-white hover:bg-blue-300 focus:bg-blue-300 transition-colors focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50"
+              className="block h-4 w-4 rounded-full shadow-xs-solid border border-blue-500 dark:border-primary dark:bg-accent bg-white hover:bg-blue-300 focus:bg-blue-300 transition-colors focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace] forced-colors:data-disabled:border-[GrayText]"
               onFocus={openActions.setTrue}
               onBlur={openActions.setFalse}
               onMouseEnter={openActions.setTrue}

package/src/components/ui/select.tsx

@@ -125,7 +125,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground forced-colors:data-[highlighted]:bg-[Highlight] forced-colors:data-[highlighted]:text-[HighlightText]",
       MENU_ITEM_DISABLED,
       className,
     )}

package/src/components/ui/sheet.tsx

@@ -68,7 +68,7 @@ const SheetContent = React.forwardRef<
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
           <Cross2Icon className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>

package/src/components/ui/toast.tsx

@@ -26,15 +26,16 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const VARIANT_CLASSES = {
-  default: "bg-background border",
+  default:
+    "bg-background border forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
   danger:
-    "group destructive text-error border-destructive bg-(--red-1) shadow-md-solid shadow-error",
+    "group destructive text-error border-destructive bg-(--red-1) shadow-md-solid shadow-error forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
 } as const satisfies Record<string, string>;
 
 type ToastVariant = keyof typeof VARIANT_CLASSES;
 
 const toastVariants = cva(
-  "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-start justify-between gap-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full",
+  "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-start justify-between gap-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full forced-color-adjust-none",
   {
     variants: {
       variant: VARIANT_CLASSES,
@@ -76,7 +77,8 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus-visible:group-[.destructive]:ring-destructive",
+      "forced-color-adjust-none forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText] forced-colors:disabled:border-[GrayText] forced-colors:disabled:text-[GrayText]",
       className,
     )}
     {...props}
@@ -91,7 +93,8 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-500 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-500 focus-visible:group-[.destructive]:ring-red-400 focus-visible:group-[.destructive]:ring-offset-red-600",
+      "forced-colors:text-[CanvasText] forced-colors:hover:text-[CanvasText] forced-colors:group-[.destructive]:text-[CanvasText] forced-colors:hover:group-[.destructive]:text-[CanvasText]",
       className,
     )}
     toast-close=""

package/src/components/ui/toaster.tsx

@@ -84,8 +84,8 @@ const ToastItem = ({
           className="h-4 w-4"
           buttonClassName={cn(
             "absolute right-8 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity",
-            "hover:text-foreground focus:opacity-100 focus:outline-hidden group-hover:opacity-100",
-            "group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-500 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
+            "hover:text-foreground focus:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 group-hover:opacity-100",
+            "group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-500 focus-visible:group-[.destructive]:ring-red-400 focus-visible:group-[.destructive]:ring-offset-red-600",
           )}
           value={() =>
             descriptionRef.current?.innerText ??

package/src/core/ai/ids/__tests__/ids.test.ts

@@ -26,7 +26,6 @@ describe("AiModelId", () => {
         "google",
         "ollama",
         "bedrock",
-        "github",
       ];
 
       providers.forEach((provider) => {
@@ -68,12 +67,6 @@ describe("AiModelId", () => {
         expect(modelId.shortModelId).toBe("titan-text");
       });
 
-      it("should parse github qualified id", () => {
-        const modelId = AiModelId.parse("github/gpt-4o");
-        expect(modelId.providerId).toBe("github");
-        expect(modelId.shortModelId).toBe("gpt-4o");
-      });
-
       it("should handle multiple slashes", () => {
         const modelId = AiModelId.parse("openai/gpt-4/turbo");
         expect(modelId.providerId).toBe("openai");
@@ -178,7 +171,6 @@ describe("AiModelId", () => {
         "google",
         "ollama",
         "bedrock",
-        "github",
       ];
 
       providers.forEach((provider) => {

package/src/core/ai/ids/ids.ts

@@ -4,13 +4,13 @@ import type { TypedString } from "@/utils/typed";
 
 export const KNOWN_PROVIDERS = [
   "openai",
+  "github",
   "anthropic",
   "google",
   "ollama",
   "bedrock",
   "deepseek",
   "azure",
-  "github",
   "openrouter",
   "wandb",
   "opencode-go",

package/src/core/cells/__tests__/add-missing-import.test.ts

@@ -120,4 +120,24 @@ describe("maybeAddMissingImport", () => {
       expect(result).toBeNull();
     }
   });
+
+  it("should create a marimo import before the source cell when requested", () => {
+    const createNewCell = vi.fn();
+
+    const result = maybeAddMarimoImport({
+      autoInstantiate: false,
+      createNewCell,
+      fromCellId: Cell2,
+      before: true,
+    });
+
+    expect(result).not.toBeNull();
+    expect(createNewCell).toHaveBeenCalledWith(
+      expect.objectContaining({
+        cellId: Cell2,
+        before: true,
+        code: "import marimo as mo",
+      }),
+    );
+  });
 });

package/src/core/codemirror/language/__tests__/utils.test.ts

@@ -158,7 +158,7 @@ Hello,
   });
 
   // f-strings not currently supported
-  it.skip("handles markdown with variables", () => {
+  it.fails("handles markdown with variables", () => {
     const mockEditor = createEditor('mo.md(f"""{a}\n{b}!""")');
     // Set to markdown
     switchLanguage(mockEditor, { language: "markdown" });

package/src/core/config/config-schema.ts

@@ -171,6 +171,7 @@ export const UserConfigSchema = z
         inline_tooltip: z.boolean().prefault(false),
         allow_provider_config: z.boolean().prefault(true),
         open_ai: AiConfigSchema.optional(),
+        github: AiConfigSchema.optional(),
         anthropic: AiConfigSchema.optional(),
         google: AiConfigSchema.optional(),
         ollama: AiConfigSchema.optional(),

package/src/core/hotkeys/hotkeys.ts

@@ -458,6 +458,11 @@ const DEFAULT_HOT_KEY = {
     group: "Command",
     key: "b",
   },
+  "command.createSqlCellAfter": {
+    name: "Create a SQL cell after current cell",
+    group: "Command",
+    key: "q",
+  },
   "command.copyCell": {
     name: "Copy cell",
     group: "Command",

package/src/core/network/__tests__/requests-toasting.test.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { beforeEach, describe, expect, it, vi } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
 import { HTTPError } from "@/utils/errors";
 
 const toastMock = vi.fn();
@@ -44,6 +45,19 @@ describe("createErrorToastingRequests", () => {
     );
   });
 
+  it("leaves search errors to callers without a toast per failed root", async () => {
+    const client = MockRequestClient.create();
+    const error = new Error("Storage unavailable");
+    vi.mocked(client.sendSearchFiles).mockRejectedValue(error);
+    const requests = createErrorToastingRequests(client);
+    for (const path of ["/workspace", "/shared"]) {
+      await expect(
+        requests.sendSearchFiles({ query: "report", path }),
+      ).rejects.toBe(error);
+    }
+    expect(toastMock).not.toHaveBeenCalled();
+  });
+
   it("leaves file-root errors for the requesting tree to surface", async () => {
     const error = new Error("Failed to load roots");
     const requests = createErrorToastingRequests({

package/src/core/network/requests-toasting.tsx

@@ -50,7 +50,7 @@ export function createErrorToastingRequests(
     getEnvironmentInfo: "", // No toast
     getFileRoots: "", // RequestingTree surfaces this error
     sendListFiles: "Failed to list files",
-    sendSearchFiles: "Failed to search files",
+    sendSearchFiles: "", // Search callers handle errors
     sendPdb: "Failed to start debug session",
     sendSetBreakpoints: "", // No toast
     sendCreateFileOrFolder: "Failed to create file or folder",

package/src/css/globals.css

@@ -151,6 +151,34 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .marimo,
+  .marimo::before,
+  .marimo::after,
+  .marimo *,
+  .marimo *::before,
+  .marimo *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-delay: 0s !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0s !important;
+  }
+
+  .marimo .running-app-icon {
+    visibility: visible !important;
+    animation-name: none !important;
+  }
+}
+
+@media (forced-colors: active) {
+  .marimo :focus-visible {
+    outline: 2px solid Highlight !important;
+    outline-offset: 2px;
+  }
+}
+
 @layer base {
   * {
     @apply border-border;

package/src/hooks/useEventListener.ts

@@ -17,7 +17,7 @@ export function isRefObject<T>(target: unknown): target is RefObject<T | null> {
 }
 
 export function useEventListener<K extends keyof DocumentEventMap>(
-  targetValue: Document,
+  targetValue: Document | null,
   type: K,
   listener: (ev: DocumentEventMap[K]) => unknown,
   options?: boolean | AddEventListenerOptions,

package/src/plugins/core/RenderHTML.tsx

@@ -24,6 +24,8 @@ import { sanitizeHtml, useSanitizeHtml } from "./sanitize";
 type ReplacementFn = NonNullable<HTMLReactParserOptions["replace"]>;
 type TransformFn = NonNullable<HTMLReactParserOptions["transform"]>;
 
+const EMPTY_REPLACEMENTS: readonly ReplacementFn[] = [];
+
 interface Options {
   html: string;
   /**
@@ -31,7 +33,7 @@ interface Options {
    * @default true
    */
   alwaysSanitizeHtml?: boolean;
-  additionalReplacements?: ReplacementFn[];
+  additionalReplacements?: readonly ReplacementFn[];
 }
 
 const replaceValidTags = (domNode: DOMNode) => {
@@ -299,7 +301,7 @@ const CopyableCode = ({ children }: { children: ReactNode }) => {
  */
 export const renderHTML = ({
   html,
-  additionalReplacements = [],
+  additionalReplacements = EMPTY_REPLACEMENTS,
   alwaysSanitizeHtml = true,
 }: Options) => {
   return (
@@ -313,7 +315,7 @@ export const renderHTML = ({
 
 const RenderHTML = ({
   html,
-  additionalReplacements = [],
+  additionalReplacements = EMPTY_REPLACEMENTS,
   alwaysSanitizeHtml,
 }: Options) => {
   const shouldSanitizeHtml = useSanitizeHtml();
@@ -333,7 +335,7 @@ const RenderHTML = ({
 
 function parseHtml({
   html,
-  additionalReplacements = [],
+  additionalReplacements = EMPTY_REPLACEMENTS,
 }: Pick<Options, "html" | "additionalReplacements">) {
   const renderFunctions: ReplacementFn[] = [
     replaceValidTags,

package/src/plugins/impl/MatrixPlugin.tsx

@@ -408,7 +408,7 @@ const MatrixComponent = ({
           {hasColumnLabels && (
             <thead>
               <tr>
-                {hasRowLabels && <th />}
+                {hasRowLabels && <th aria-hidden="true" />}
                 {columnLabels.map((lbl, j) => (
                   <th
                     key={j}

package/src/plugins/impl/code/any-language-editor.tsx

@@ -27,6 +27,8 @@ export const LANGUAGE_MAP: Record<string, LanguageName | undefined> = {
   undefined: "text",
 };
 
+const EMPTY_EXTENSIONS: readonly Extension[] = [];
+
 function isSupportedLanguage(
   language: string | undefined,
 ): language is LanguageName {
@@ -43,17 +45,18 @@ function isSupportedLanguage(
  * language support.
  */
 const AnyLanguageCodeMirror: React.FC<
-  ReactCodeMirrorProps & {
+  Omit<ReactCodeMirrorProps, "extensions"> & {
     language: string | undefined;
     hideUnsupportedLanguageErrors?: boolean;
     theme: ResolvedTheme;
     showCopyButton?: boolean;
+    extensions?: readonly Extension[];
   }
 > = ({
   language,
   hideUnsupportedLanguageErrors,
   showCopyButton,
-  extensions = [],
+  extensions = EMPTY_EXTENSIONS,
   ...props
 }) => {
   // Maybe normalize the language to the extension
@@ -64,7 +67,7 @@ const AnyLanguageCodeMirror: React.FC<
     Logger.warn(`Language ${language} not found in CodeMirror.`);
   }
 
-  const finalExtensions = useMemo((): Extension[] => {
+  const finalExtensions = useMemo((): readonly Extension[] => {
     if (!isSupportedLanguage(language)) {
       return extensions;
     }
@@ -90,7 +93,7 @@ const AnyLanguageCodeMirror: React.FC<
           toastTitle="Copied to clipboard"
         />
       )}
-      <ReactCodeMirror {...props} extensions={finalExtensions} />
+      <ReactCodeMirror {...props} extensions={[...finalExtensions]} />
     </div>
   );
 };

package/src/plugins/impl/data-frames/__tests__/schema.test.ts

@@ -1,7 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { describe, expect, it } from "vitest";
-import { columnToFieldTypesSchema } from "../schema";
+import { columnToFieldTypesSchema, TransformationsSchema } from "../schema";
+import type { ColumnId } from "../types";
 
 describe("columnToFieldTypesSchema", () => {
   it("keeps known field types", () => {
@@ -36,3 +37,35 @@ describe("columnToFieldTypesSchema", () => {
     expect(result).toEqual([["geom", ["geometry", "geometry"]]]);
   });
 });
+
+describe("FilterRowsTransformSchema", () => {
+  const condition = {
+    column_id: "col" as ColumnId,
+    operator: "in" as const,
+    value: ["a"],
+    type: "condition" as const,
+    negate: false,
+  };
+
+  it("does not wrap where in a FilterGroup", () => {
+    const result = TransformationsSchema.parse({
+      transforms: [
+        {
+          type: "filter_rows",
+          operation: "keep_rows",
+          where: [condition],
+        },
+      ],
+    });
+
+    expect(result).toEqual({
+      transforms: [
+        {
+          type: "filter_rows",
+          operation: "keep_rows",
+          where: [condition],
+        },
+      ],
+    });
+  });
+});