@marimo-team/frontend 0.21.1-dev9 → 0.21.1

package/src/components/editor/renderers/grid-layout/grid-layout.tsx

@@ -158,12 +158,19 @@ export const GridLayoutRenderer: React.FC<Props> = ({
       compactType={null}
       preventCollision={true}
       rowHeight={layout.rowHeight}
-      onLayoutChange={(cellLayouts) =>
+      onLayoutChange={(cellLayouts) => {
+        // Don't update state in read mode — the layout is static and
+        // updating triggers a re-render cycle that causes an infinite loop
+        // (React error https://react.dev/errors/185 Maximum update depth exceeded).
+        // https://github.com/marimo-team/marimo/issues/8644
+        if (isReading) {
+          return;
+        }
         setLayout({
           ...layout,
           cells: cellLayouts,
-        })
-      }
+        });
+      }}
       droppingItem={
         droppingItem
           ? {

package/src/core/cells/cells.ts

@@ -1640,6 +1640,12 @@ export const cellsRuntimeAtom = atom((get) => get(notebookAtom).cellRuntime);
 export const notebookIsRunningAtom = atom((get) =>
   notebookIsRunning(get(notebookAtom)),
 );
+export const onlyScratchpadIsRunningAtom = atom((get) => {
+  const { cellRuntime } = get(notebookAtom);
+  return Object.entries(cellRuntime).every(
+    ([id, rt]) => rt.status !== "running" || id === SCRATCH_CELL_ID,
+  );
+});
 export const notebookQueuedOrRunningCountAtom = atom((get) =>
   notebookQueueOrRunningCount(get(notebookAtom)),
 );

package/src/core/cells/utils.ts

@@ -11,6 +11,7 @@ export function notebookIsRunning(state: NotebookState) {
     (cell) => cell.status === "running",
   );
 }
+
 export function notebookQueueOrRunningCount(state: NotebookState) {
   return Object.values(state.cellRuntime).filter(
     (cell) => cell.status === "running" || cell.status === "queued",

package/src/core/codemirror/__tests__/setup.test.ts

@@ -45,6 +45,7 @@ function getOpts() {
       onRun: namedFunction("onRun"),
       deleteCell: namedFunction("deleteCell"),
       afterToggleMarkdown: namedFunction("afterToggleMarkdown"),
+      afterToggleSQL: namedFunction("afterToggleSQL"),
     } as unknown as CodemirrorCellActions,
     completionConfig: {
       activate_on_typing: false,

package/src/core/codemirror/cells/state.ts

@@ -11,6 +11,7 @@ export interface CodemirrorCellActions extends CellActions {
   onRun: () => void;
   deleteCell: () => void;
   afterToggleMarkdown: () => void;
+  afterToggleSQL: () => void;
   saveNotebook: () => void;
 }
 

package/src/core/codemirror/extensions.ts

@@ -42,6 +42,26 @@ export function formatKeymapExtension(hotkeys: HotkeyProvider) {
           actions.afterToggleMarkdown();
         }
 
+        return response !== false;
+      },
+    },
+    {
+      key: hotkeys.getHotkey("cell.viewAsSQL").key,
+      preventDefault: true,
+      run: (ev) => {
+        const currentLanguage = getCurrentLanguageAdapter(ev);
+        const destinationLanguage =
+          currentLanguage === "sql" ? "python" : "sql";
+
+        const response = toggleToLanguage(ev, destinationLanguage, {
+          force: true,
+        });
+
+        if (response === "sql") {
+          const actions = ev.state.facet(cellActionsState);
+          actions.afterToggleSQL();
+        }
+
         return response !== false;
       },
     },

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

@@ -3,7 +3,11 @@
 import type { EditorState } from "@codemirror/state";
 import type { EditorView } from "@codemirror/view";
 import { replaceEditorContent } from "../replace-editor-content";
-import { languageAdapterState } from "./extension";
+import {
+  languageAdapterFromCode,
+  languageAdapterState,
+  switchLanguage,
+} from "./extension";
 import { languageMetadataField } from "./metadata";
 
 /**
@@ -35,6 +39,17 @@ export function updateEditorCodeFromPython(
   editor: EditorView,
   pythonCode: string,
 ): string {
+  const currentAdapter = editor.state.field(languageAdapterState);
+  const correctAdapter = languageAdapterFromCode(pythonCode);
+
+  // If the language type changed (e.g., markdown → python), switch adapters
+  if (correctAdapter.type !== currentAdapter.type) {
+    switchLanguage(editor, {
+      language: correctAdapter.type,
+      keepCodeAsIs: true,
+    });
+  }
+
   const languageAdapter = editor.state.field(languageAdapterState);
   const [code] = languageAdapter.transformIn(pythonCode);
   // Use replaceEditorContent which preserves cursor position when focused

package/src/core/codemirror/reactive-references/__tests__/analyzer.test.ts

@@ -1115,6 +1115,60 @@ class Foo:
     `);
   });
 
+  test("should not highlight attribute access matching a for-loop variable", () => {
+    // When `tool` is used as a for-loop variable, `mcp.tool` (attribute access)
+    // should NOT have `tool` highlighted — it's a property, not a variable reference.
+    expect(
+      runHighlight(
+        ["mcp", "client"],
+        `
+@mcp.tool
+def roll_dice():
+    pass
+
+async with client:
+    for tool in await client.list_tools():
+        print(tool)
+`,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @mcp.tool
+       ^^^
+      def roll_dice():
+          pass
+
+      async with client:
+                 ^^^^^^
+          for tool in await client.list_tools():
+                            ^^^^^^
+              print(tool)
+      "
+    `);
+  });
+
+  test("should not highlight property name matching a global variable", () => {
+    // `tool` is a global variable, but `mcp.tool` should not highlight `tool`
+    // because it's a property access, not a variable reference.
+    expect(
+      runHighlight(
+        ["mcp", "tool"],
+        `
+@mcp.tool
+def roll_dice():
+    pass
+`,
+      ),
+    ).toMatchInlineSnapshot(`
+      "
+      @mcp.tool
+       ^^^
+      def roll_dice():
+          pass
+      "
+    `);
+  });
+
   test("class property self-reference", () => {
     expect(
       runHighlight(

package/src/core/codemirror/reactive-references/analyzer.ts

@@ -462,6 +462,7 @@ export function findReactiveVariables(options: {
   ): boolean {
     return (
       allVariableNames.has(varName) &&
+      !isPropertyAccess(cursor) &&
       !isKeywordArgumentName(cursor) &&
       !isAssignmentTarget(cursor)
     );
@@ -529,6 +530,19 @@ function isAssignmentTarget(cursor: TreeCursor): boolean {
   return false;
 }
 
+/** Checks whether a `VariableName` is a property access (e.g. `tool` in `mcp.tool`). */
+function isPropertyAccess(cursor: TreeCursor): boolean {
+  // Check if the previous sibling is a "." node, which means this
+  // VariableName is a property access rather than a standalone variable.
+  // This handles both MemberExpression (e.g. `obj.attr`) and Decorator
+  // (e.g. `@mcp.tool`) where the parser emits flat sibling nodes.
+  const temp = cursor.node.cursor();
+  if (temp.prevSibling() && temp.name === ".") {
+    return true;
+  }
+  return false;
+}
+
 /**
  * Checks if the syntax tree contains any syntax errors.
  * If there are errors, we shouldn't show reactive variable highlighting.

package/src/core/hotkeys/hotkeys.ts

@@ -142,6 +142,14 @@ const DEFAULT_HOT_KEY = {
     group: "Editing",
     key: "Mod-Shift-m",
   },
+  "cell.viewAsSQL": {
+    name: "Toggle SQL",
+    group: "Editing",
+    key: {
+      windows: "Alt-Shift-l",
+      main: "Mod-Shift-l",
+    },
+  },
   "cell.complete": {
     name: "Code completion",
     group: "Editing",

package/src/css/md.css

@@ -41,6 +41,10 @@
   font-family: var(--heading-font);
 }
 
+.markdown hr {
+  margin-block: 0.5rem;
+}
+
 .markdown a {
   cursor: pointer;
   text-decoration: inherit;

package/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx

@@ -17,6 +17,7 @@ import { cn } from "@/utils/cn";
 import { Objects } from "@/utils/objects";
 import { ErrorBanner } from "../common/error-banner";
 import { vegaLoadData } from "../vega/loader";
+import { getContainerWidth } from "../vega/utils";
 import { ColumnSummary } from "./components/column-summary";
 import { QueryForm } from "./components/query-form";
 import type { SpecificEncoding } from "./encoding";
@@ -140,16 +141,18 @@ export const DataExplorerComponent = ({
     const responsiveSpec = makeResponsive(spec);
     // TODO: We can optimize by updating the data dynamically. https://github.com/vega/react-vega?tab=readme-ov-file#recipes
     const augmentedSpec = augmentSpecWithData(responsiveSpec, chartData);
-    const isContainerWidth = responsiveSpec.width === "container";
 
     return (
       <div
         className={cn(
           "flex overflow-y-auto justify-center items-center flex-1 w-[90%]",
-          isContainerWidth && "vega-container-width",
         )}
       >
-        <VegaEmbed spec={augmentedSpec} options={chartOptions(theme)} />
+        <VegaEmbed
+          data-container-width={getContainerWidth(augmentedSpec)}
+          spec={augmentedSpec}
+          options={chartOptions(theme)}
+        />
       </div>
     );
   };

package/src/plugins/impl/vega/__tests__/utils.test.ts

@@ -0,0 +1,36 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { getContainerWidth } from "../utils";
+
+describe("getContainerWidth", () => {
+  it('should return "container" when spec width is "container"', () => {
+    expect(getContainerWidth({ width: "container" })).toBe("container");
+  });
+
+  it("should return a numeric width", () => {
+    expect(getContainerWidth({ width: 500 })).toBe(500);
+  });
+
+  it("should return undefined when spec has no width", () => {
+    expect(getContainerWidth({ height: 300 })).toBeUndefined();
+  });
+
+  it("should return undefined for null", () => {
+    expect(getContainerWidth(null)).toBeUndefined();
+  });
+
+  it("should return undefined for undefined", () => {
+    expect(getContainerWidth(undefined)).toBeUndefined();
+  });
+
+  it("should return undefined for non-object values", () => {
+    expect(getContainerWidth("string")).toBeUndefined();
+    expect(getContainerWidth(42)).toBeUndefined();
+    expect(getContainerWidth(true)).toBeUndefined();
+  });
+
+  it("should return undefined when width is explicitly undefined", () => {
+    expect(getContainerWidth({ width: undefined })).toBeUndefined();
+  });
+});

package/src/plugins/impl/vega/utils.ts

@@ -3,6 +3,20 @@
 import { Objects } from "@/utils/objects";
 import type { DataType, FieldTypes, VegaDataType } from "./vega-loader";
 
+export type ContainerWidth = number | "container";
+
+/**
+ * Get the container width from a VegaLite spec.
+ * @param spec - The VegaLite spec.
+ * @returns The container width.
+ */
+export function getContainerWidth(spec: unknown): ContainerWidth | undefined {
+  if (typeof spec === "object" && spec !== null && "width" in spec) {
+    return spec.width as ContainerWidth | undefined;
+  }
+  return undefined;
+}
+
 export function mergeAsArrays<T>(
   left: T | T[] | undefined,
   right: T | T[] | undefined,

package/src/plugins/impl/vega/vega-component.tsx

@@ -27,6 +27,7 @@ import { makeSelectable } from "./make-selectable";
 import { getSelectionParamNames, ParamNames } from "./params";
 import { resolveVegaSpecData } from "./resolve-data";
 import type { VegaLiteSpec } from "./types";
+import { getContainerWidth } from "./utils";
 
 // register arrow reader under type 'arrow'
 formats("arrow", arrow);
@@ -305,16 +306,14 @@ const LoadedVegaComponent = ({
         </Alert>
       )}
       <div
-        className={cn(
-          "relative",
-          "width" in selectableSpec &&
-            selectableSpec.width === "container" &&
-            "vega-container-width",
-        )}
+        className={cn("relative")}
         // Capture the pointer down event to prevent the parent from handling it
         onPointerDown={Events.stopPropagation()}
       >
-        <div ref={vegaRef} />
+        <div
+          ref={vegaRef}
+          data-container-width={getContainerWidth(selectableSpec)}
+        />
         {renderHelpContent()}
       </div>
     </>

package/src/plugins/impl/vega/vega.css

@@ -4,7 +4,7 @@
   max-width: 100%;
 }
 
-.vega-container-width .vega-embed {
+.vega-embed[data-container-width="container"] {
   width: 100%;
 }