@marimo-team/islands 0.21.1-dev13 → 0.21.1-dev15

package/dist/main.js

@@ -70724,7 +70724,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.21.1-dev13"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.21.1-dev15"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$89 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {
@@ -99235,7 +99235,7 @@ ${c}
     0
   ], DRAG_HANDLE = "grid-drag-handle";
   const GridLayoutRenderer = (e) => {
-    let r = (0, import_compiler_runtime$9.c)(160), { layout: c, setLayout: d, cells: f, mode: _ } = e, v = _ === "read", y;
+    let r = (0, import_compiler_runtime$9.c)(161), { layout: c, setLayout: d, cells: f, mode: _ } = e, v = _ === "read", y;
     r[0] === c.cells ? y = r[1] : (y = new Set(c.cells.map(_temp$4)), r[0] = c.cells, r[1] = y);
     let S = y, [w, E] = (0, import_react.useState)(null), [O, M] = (0, import_react.useState)(false), I;
     r[2] === c.columns ? I = r[3] : (I = {
@@ -99278,14 +99278,16 @@ ${c}
       r[60] !== I2 || r[61] !== G2 || r[62] !== q2 ? (UY = cn("w-full mx-auto bg-background flex-1 min-h-full", I2, G2, q2), r[60] = I2, r[61] = G2, r[62] = q2, r[63] = UY) : UY = r[63], r[64] === v ? WY = r[65] : (WY = v ? [
         20,
         20
-      ] : void 0, r[64] = v, r[65] = WY), GY = MARGIN, KY = false, qY = null, JY = true, YY = c.rowHeight, r[66] !== c || r[67] !== d ? (XY = (e3) => d({
-        ...c,
-        cells: e3
-      }), r[66] = c, r[67] = d, r[68] = XY) : XY = r[68], r[69] === w ? ZY = r[70] : (ZY = w ? {
+      ] : void 0, r[64] = v, r[65] = WY), GY = MARGIN, KY = false, qY = null, JY = true, YY = c.rowHeight, r[66] !== v || r[67] !== c || r[68] !== d ? (XY = (e3) => {
+        v || d({
+          ...c,
+          cells: e3
+        });
+      }, r[66] = v, r[67] = c, r[68] = d, r[69] = XY) : XY = r[69], r[70] === w ? ZY = r[71] : (ZY = w ? {
         i: w.i,
         w: w.w || 2,
         h: w.h || 2
-      } : void 0, r[69] = w, r[70] = ZY), r[71] !== LY || r[72] !== c || r[73] !== d ? (QY = (e3, r2, f2) => {
+      } : void 0, r[70] = w, r[71] = ZY), r[72] !== LY || r[73] !== c || r[74] !== d ? (QY = (e3, r2, f2) => {
         LY.onDragStop(), r2 && d({
           ...c,
           cells: [
@@ -99293,15 +99295,15 @@ ${c}
             r2
           ]
         });
-      }, r[71] = LY, r[72] = c, r[73] = d, r[74] = QY) : QY = r[74], r[75] === LY ? ($Y = r[76], eX = r[77], tX = r[78]) : ($Y = (e3, r2, c2, d2, f2) => {
+      }, r[72] = LY, r[73] = c, r[74] = d, r[75] = QY) : QY = r[75], r[76] === LY ? ($Y = r[77], eX = r[78], tX = r[79]) : ($Y = (e3, r2, c2, d2, f2) => {
         LY.onDragStart(f2);
       }, eX = (e3, r2, c2, d2, f2) => {
         LY.onDragMove(f2);
       }, tX = () => {
         LY.onDragStop();
-      }, r[75] = LY, r[76] = $Y, r[77] = eX, r[78] = tX), nX = _temp3$2, rX = zY, iX = zY, aX = zY, oX = zY ? `.${DRAG_HANDLE}` : "noop";
+      }, r[76] = LY, r[77] = $Y, r[78] = eX, r[79] = tX), nX = _temp3$2, rX = zY, iX = zY, aX = zY, oX = zY ? `.${DRAG_HANDLE}` : "noop";
       let IY2;
-      r[79] === S ? IY2 = r[80] : (IY2 = (e3) => S.has(e3.id), r[79] = S, r[80] = IY2), sX = f.filter(IY2).map((r2) => {
+      r[80] === S ? IY2 = r[81] : (IY2 = (e3) => S.has(e3.id), r[80] = S, r[81] = IY2), sX = f.filter(IY2).map((r2) => {
         let f2 = e2.get(r2.id), v2 = c.scrollableCells.has(r2.id) ?? false, y3 = c.cellSide.get(r2.id), S2 = (0, import_jsx_runtime.jsx)(GridCell, {
           code: r2.code,
           mode: _,
@@ -99333,7 +99335,7 @@ ${c}
       }), r[10] = f, r[11] = z, r[12] = LY, r[13] = w, r[14] = zY, r[15] = S, r[16] = RY, r[17] = v, r[18] = c, r[19] = _, r[20] = d, r[21] = BY, r[22] = VY, r[23] = HY, r[24] = UY, r[25] = WY, r[26] = GY, r[27] = KY, r[28] = qY, r[29] = JY, r[30] = YY, r[31] = XY, r[32] = ZY, r[33] = QY, r[34] = $Y, r[35] = eX, r[36] = tX, r[37] = nX, r[38] = rX, r[39] = iX, r[40] = aX, r[41] = oX, r[42] = sX, r[43] = cX, r[44] = lX, r[45] = uX, r[46] = dX;
     } else BY = r[21], VY = r[22], HY = r[23], UY = r[24], WY = r[25], GY = r[26], KY = r[27], qY = r[28], JY = r[29], YY = r[30], XY = r[31], ZY = r[32], QY = r[33], $Y = r[34], eX = r[35], tX = r[36], nX = r[37], rX = r[38], iX = r[39], aX = r[40], oX = r[41], sX = r[42], cX = r[43], lX = r[44], uX = r[45], dX = r[46];
     let fX;
-    r[81] !== BY || r[82] !== HY || r[83] !== UY || r[84] !== WY || r[85] !== GY || r[86] !== KY || r[87] !== qY || r[88] !== JY || r[89] !== YY || r[90] !== XY || r[91] !== ZY || r[92] !== QY || r[93] !== $Y || r[94] !== eX || r[95] !== tX || r[96] !== nX || r[97] !== rX || r[98] !== iX || r[99] !== aX || r[100] !== oX || r[101] !== sX || r[102] !== cX || r[103] !== lX || r[104] !== uX || r[105] !== dX ? (fX = (0, import_jsx_runtime.jsx)(BY, {
+    r[82] !== BY || r[83] !== HY || r[84] !== UY || r[85] !== WY || r[86] !== GY || r[87] !== KY || r[88] !== qY || r[89] !== JY || r[90] !== YY || r[91] !== XY || r[92] !== ZY || r[93] !== QY || r[94] !== $Y || r[95] !== eX || r[96] !== tX || r[97] !== nX || r[98] !== rX || r[99] !== iX || r[100] !== aX || r[101] !== oX || r[102] !== sX || r[103] !== cX || r[104] !== lX || r[105] !== uX || r[106] !== dX ? (fX = (0, import_jsx_runtime.jsx)(BY, {
       breakpoint: cX,
       layouts: lX,
       style: uX,
@@ -99358,28 +99360,28 @@ ${c}
       isResizable: aX,
       draggableHandle: oX,
       children: sX
-    }), r[81] = BY, r[82] = HY, r[83] = UY, r[84] = WY, r[85] = GY, r[86] = KY, r[87] = qY, r[88] = JY, r[89] = YY, r[90] = XY, r[91] = ZY, r[92] = QY, r[93] = $Y, r[94] = eX, r[95] = tX, r[96] = nX, r[97] = rX, r[98] = iX, r[99] = aX, r[100] = oX, r[101] = sX, r[102] = cX, r[103] = lX, r[104] = uX, r[105] = dX, r[106] = fX) : fX = r[106];
+    }), r[82] = BY, r[83] = HY, r[84] = UY, r[85] = WY, r[86] = GY, r[87] = KY, r[88] = qY, r[89] = JY, r[90] = YY, r[91] = XY, r[92] = ZY, r[93] = QY, r[94] = $Y, r[95] = eX, r[96] = tX, r[97] = nX, r[98] = rX, r[99] = iX, r[100] = aX, r[101] = oX, r[102] = sX, r[103] = cX, r[104] = lX, r[105] = uX, r[106] = dX, r[107] = fX) : fX = r[107];
     let pX = fX, mX, hX, gX, _X, vX, yX, bX;
-    if (r[107] !== f || r[108] !== pX || r[109] !== S || r[110] !== O || r[111] !== v || r[112] !== c || r[113] !== _ || r[114] !== d || r[115] !== VY) {
+    if (r[108] !== f || r[109] !== pX || r[110] !== S || r[111] !== O || r[112] !== v || r[113] !== c || r[114] !== _ || r[115] !== d || r[116] !== VY) {
       bX = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
       bb0: {
         let e2;
-        r[124] === S ? e2 = r[125] : (e2 = (e3) => !S.has(e3.id), r[124] = S, r[125] = e2);
+        r[125] === S ? e2 = r[126] : (e2 = (e3) => !S.has(e3.id), r[125] = S, r[126] = e2);
         let y2 = f.filter(e2);
         if (v) {
           if (c.bordered) {
             let e4;
-            r[126] !== pX || r[127] !== VY ? (e4 = (0, import_jsx_runtime.jsx)("div", {
+            r[127] !== pX || r[128] !== VY ? (e4 = (0, import_jsx_runtime.jsx)("div", {
               className: "flex flex-1 flex-col items-center",
               children: (0, import_jsx_runtime.jsx)("div", {
                 style: VY,
                 className: "bg-background flex-1 border-t border-x rounded-t shadow-sm w-full overflow-hidden",
                 children: pX
               })
-            }), r[126] = pX, r[127] = VY, r[128] = e4) : e4 = r[128], pX = e4;
+            }), r[127] = pX, r[128] = VY, r[129] = e4) : e4 = r[129], pX = e4;
           }
           let e3 = y2.filter(_temp4$2), d2;
-          r[129] === _ ? d2 = r[130] : (d2 = (e4) => (0, import_jsx_runtime.jsx)(GridCell, {
+          r[130] === _ ? d2 = r[131] : (d2 = (e4) => (0, import_jsx_runtime.jsx)(GridCell, {
             code: e4.code,
             mode: _,
             cellId: e4.id,
@@ -99387,7 +99389,7 @@ ${c}
             status: e4.status,
             isScrollable: false,
             hidden: false
-          }, e4.id), r[129] = _, r[130] = d2), bX = (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          }, e4.id), r[130] = _, r[131] = d2), bX = (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
             children: [
               pX,
               (0, import_jsx_runtime.jsx)("div", {
@@ -99400,33 +99402,33 @@ ${c}
         }
         if (c.bordered) {
           let e3;
-          r[131] === pX ? e3 = r[132] : (e3 = (0, import_jsx_runtime.jsx)("div", {
+          r[132] === pX ? e3 = r[133] : (e3 = (0, import_jsx_runtime.jsx)("div", {
             className: "h-full overflow-auto",
             children: pX
-          }), r[131] = pX, r[132] = e3);
+          }), r[132] = pX, r[133] = e3);
           let c2;
-          r[133] !== VY || r[134] !== e3 ? (c2 = (0, import_jsx_runtime.jsx)("div", {
+          r[134] !== VY || r[135] !== e3 ? (c2 = (0, import_jsx_runtime.jsx)("div", {
             style: VY,
             className: "bg-background border-t border-x rounded-t shadow-sm w-full mx-auto mt-4 h-[calc(100%-1rem)] overflow-hidden",
             children: e3
-          }), r[133] = VY, r[134] = e3, r[135] = c2) : c2 = r[135], pX = c2;
+          }), r[134] = VY, r[135] = e3, r[136] = c2) : c2 = r[136], pX = c2;
         }
-        r[136] !== O || r[137] !== c || r[138] !== d ? (yX = (0, import_jsx_runtime.jsx)(GridControls, {
+        r[137] !== O || r[138] !== c || r[139] !== d ? (yX = (0, import_jsx_runtime.jsx)(GridControls, {
           layout: c,
           setLayout: d,
           isLocked: O,
           setIsLocked: M
-        }), r[136] = O, r[137] = c, r[138] = d, r[139] = yX) : yX = r[139];
+        }), r[137] = O, r[138] = c, r[139] = d, r[140] = yX) : yX = r[140];
         let w2;
-        r[140] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (_X = cn("relative flex z-10 flex-1 overflow-hidden"), w2 = cn("grow overflow-auto transparent-when-disconnected"), r[140] = _X, r[141] = w2) : (_X = r[140], w2 = r[141]), r[142] === pX ? vX = r[143] : (vX = (0, import_jsx_runtime.jsx)("div", {
+        r[141] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (_X = cn("relative flex z-10 flex-1 overflow-hidden"), w2 = cn("grow overflow-auto transparent-when-disconnected"), r[141] = _X, r[142] = w2) : (_X = r[141], w2 = r[142]), r[143] === pX ? vX = r[144] : (vX = (0, import_jsx_runtime.jsx)("div", {
           className: w2,
           children: pX
-        }), r[142] = pX, r[143] = vX), mX = "flex-none flex flex-col w-[300px] p-2 pb-20 gap-2 overflow-auto bg-(--slate-2) border-t border-x rounded-t shadow-sm transparent-when-disconnected mx-2 mt-4", r[144] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (hX = (0, import_jsx_runtime.jsx)("div", {
+        }), r[143] = pX, r[144] = vX), mX = "flex-none flex flex-col w-[300px] p-2 pb-20 gap-2 overflow-auto bg-(--slate-2) border-t border-x rounded-t shadow-sm transparent-when-disconnected mx-2 mt-4", r[145] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (hX = (0, import_jsx_runtime.jsx)("div", {
           className: "text font-bold text-(--slate-20) shrink-0",
           children: "Outputs"
-        }), r[144] = hX) : hX = r[144];
+        }), r[145] = hX) : hX = r[145];
         let I2;
-        r[145] !== c.columns || r[146] !== c.rowHeight || r[147] !== _ ? (I2 = (e3) => (0, import_jsx_runtime.jsx)("div", {
+        r[146] !== c.columns || r[147] !== c.rowHeight || r[148] !== _ ? (I2 = (e3) => (0, import_jsx_runtime.jsx)("div", {
           draggable: true,
           unselectable: "on",
           "data-cell-id": e3.id,
@@ -99449,34 +99451,34 @@ ${c}
             status: e3.status,
             hidden: false
           })
-        }, e3.id), r[145] = c.columns, r[146] = c.rowHeight, r[147] = _, r[148] = I2) : I2 = r[148], gX = y2.map(I2);
+        }, e3.id), r[146] = c.columns, r[147] = c.rowHeight, r[148] = _, r[149] = I2) : I2 = r[149], gX = y2.map(I2);
       }
-      r[107] = f, r[108] = pX, r[109] = S, r[110] = O, r[111] = v, r[112] = c, r[113] = _, r[114] = d, r[115] = VY, r[116] = mX, r[117] = hX, r[118] = gX, r[119] = _X, r[120] = vX, r[121] = yX, r[122] = bX, r[123] = pX;
-    } else mX = r[116], hX = r[117], gX = r[118], _X = r[119], vX = r[120], yX = r[121], bX = r[122], pX = r[123];
+      r[108] = f, r[109] = pX, r[110] = S, r[111] = O, r[112] = v, r[113] = c, r[114] = _, r[115] = d, r[116] = VY, r[117] = mX, r[118] = hX, r[119] = gX, r[120] = _X, r[121] = vX, r[122] = yX, r[123] = bX, r[124] = pX;
+    } else mX = r[117], hX = r[118], gX = r[119], _X = r[120], vX = r[121], yX = r[122], bX = r[123], pX = r[124];
     if (bX !== /* @__PURE__ */ Symbol.for("react.early_return_sentinel")) return bX;
     let xX;
-    r[149] !== mX || r[150] !== hX || r[151] !== gX ? (xX = (0, import_jsx_runtime.jsxs)("div", {
+    r[150] !== mX || r[151] !== hX || r[152] !== gX ? (xX = (0, import_jsx_runtime.jsxs)("div", {
       className: mX,
       children: [
         hX,
         gX
       ]
-    }), r[149] = mX, r[150] = hX, r[151] = gX, r[152] = xX) : xX = r[152];
+    }), r[150] = mX, r[151] = hX, r[152] = gX, r[153] = xX) : xX = r[153];
     let SX;
-    r[153] !== _X || r[154] !== vX || r[155] !== xX ? (SX = (0, import_jsx_runtime.jsxs)("div", {
+    r[154] !== _X || r[155] !== vX || r[156] !== xX ? (SX = (0, import_jsx_runtime.jsxs)("div", {
       className: _X,
       children: [
         vX,
         xX
       ]
-    }), r[153] = _X, r[154] = vX, r[155] = xX, r[156] = SX) : SX = r[156];
+    }), r[154] = _X, r[155] = vX, r[156] = xX, r[157] = SX) : SX = r[157];
     let CX;
-    return r[157] !== yX || r[158] !== SX ? (CX = (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    return r[158] !== yX || r[159] !== SX ? (CX = (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
       children: [
         yX,
         SX
       ]
-    }), r[157] = yX, r[158] = SX, r[159] = CX) : CX = r[159], CX;
+    }), r[158] = yX, r[159] = SX, r[160] = CX) : CX = r[160], CX;
   };
   var GridCell = (0, import_react.memo)((e) => {
     let r = (0, import_compiler_runtime$9.c)(20), { output: c, cellId: d, status: f, mode: _, code: v, hidden: y, isScrollable: S, side: w, className: E } = e, O;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.21.1-dev13",
+  "version": "0.21.1-dev15",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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/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.