@marimo-team/islands 0.23.7-dev7 → 0.23.7-dev70

package/src/core/codemirror/go-to-definition/commands.ts

@@ -1,7 +1,31 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { syntaxTree } from "@codemirror/language";
+import type { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
+import type { SyntaxNode, Tree, TreeCursor } from "@lezer/common";
+
+const SCOPE_CREATING_NODES = new Set([
+  "FunctionDefinition",
+  "LambdaExpression",
+  "ArrayComprehensionExpression",
+  "SetComprehensionExpression",
+  "DictionaryComprehensionExpression",
+  "ComprehensionExpression",
+  "ClassDefinition",
+]);
+
+const POSITION_SENSITIVE_SCOPES = new Set(["ClassDefinition"]);
+
+interface ScopeContext {
+  id: number;
+  type: string;
+}
+
+interface VariableDeclaration {
+  from: number;
+  scopeId: number;
+}
 
 function goToPosition(view: EditorView, from: number): void {
   view.focus();
@@ -22,50 +46,386 @@ function goToPosition(view: EditorView, from: number): void {
   });
 }
 
-/**
- * This function will select the first occurrence of the given variable name,
- * for a given editor view.
- * @param view The editor view which contains the variable name.
- * @param variableName The name of the variable to select, if found in the editor.
- */
-export function goToVariableDefinition(
-  view: EditorView,
+function findFirstMatchingVariable(
+  state: EditorState,
   variableName: string,
-): boolean {
-  const { state } = view;
+): number | null {
   const tree = syntaxTree(state);
 
-  let found = false;
-  let from = 0;
+  let from: number | null = null;
 
   tree.iterate({
     enter: (node) => {
-      if (found) {
+      if (from !== null) {
         return false;
-      } // Stop traversal if found
+      }
 
-      // Check if the node is an identifier and matches the variable name
       if (
         node.name === "VariableName" &&
         state.doc.sliceString(node.from, node.to) === variableName
       ) {
         from = node.from;
-        found = true;
-        return false; // Stop traversal
+        return false;
       }
 
-      // Skip comments and strings
       if (node.name === "Comment" || node.name === "String") {
         return false;
       }
+
+      return undefined;
     },
   });
 
-  if (found) {
-    goToPosition(view, from);
-    return true;
+  return from;
+}
+
+function getScopeChain(tree: Tree, usagePosition: number): ScopeContext[] {
+  const scopeChain: ScopeContext[] = [];
+  let currentNode: SyntaxNode | null = tree.resolveInner(usagePosition, 0);
+
+  while (currentNode) {
+    if (SCOPE_CREATING_NODES.has(currentNode.name)) {
+      // Skip ClassDefinition if we've already seen a function/lambda.
+      const inFunctionLikeScope = scopeChain.some(
+        (scope) =>
+          scope.type === "FunctionDefinition" ||
+          scope.type === "LambdaExpression",
+      );
+      if (!(inFunctionLikeScope && currentNode.name === "ClassDefinition")) {
+        scopeChain.push({
+          id: currentNode.from,
+          type: currentNode.name,
+        });
+      }
+    }
+    currentNode = currentNode.parent;
+  }
+
+  scopeChain.push({ id: -1, type: "global" });
+  return scopeChain;
+}
+
+function addDeclaration(
+  declarations: VariableDeclaration[],
+  scopeId: number,
+  from: number,
+) {
+  declarations.push({ scopeId, from });
+}
+
+function traverseChildren(
+  cursor: TreeCursor,
+  callback: (node: SyntaxNode) => void,
+) {
+  if (cursor.firstChild()) {
+    do {
+      callback(cursor.node);
+    } while (cursor.nextSibling());
+  }
+}
+
+function collectMatchingTargets(
+  cursor: TreeCursor,
+  state: EditorState,
+  variableName: string,
+  scopeId: number,
+  declarations: VariableDeclaration[],
+) {
+  switch (cursor.name) {
+    case "VariableName":
+      if (state.doc.sliceString(cursor.from, cursor.to) === variableName) {
+        addDeclaration(declarations, scopeId, cursor.from);
+      }
+      break;
+
+    case "TupleExpression":
+    case "ArrayExpression": {
+      const childCursor = cursor.node.cursor();
+      childCursor.firstChild();
+      do {
+        collectMatchingTargets(
+          childCursor,
+          state,
+          variableName,
+          scopeId,
+          declarations,
+        );
+      } while (childCursor.nextSibling());
+      break;
+    }
+    default:
+      break;
   }
-  return false;
+}
+
+function collectFunctionParameters(
+  node: SyntaxNode | Tree,
+  state: EditorState,
+  variableName: string,
+  scopeId: number,
+  declarations: VariableDeclaration[],
+) {
+  const cursor = node.cursor();
+  cursor.firstChild();
+  do {
+    if (cursor.name !== "ParamList") {
+      continue;
+    }
+
+    const paramCursor = cursor.node.cursor();
+    paramCursor.firstChild();
+    do {
+      if (
+        paramCursor.name === "VariableName" &&
+        state.doc.sliceString(paramCursor.from, paramCursor.to) === variableName
+      ) {
+        addDeclaration(declarations, scopeId, paramCursor.from);
+      }
+    } while (paramCursor.nextSibling());
+  } while (cursor.nextSibling());
+}
+
+function collectForTargets(
+  node: SyntaxNode | Tree,
+  state: EditorState,
+  variableName: string,
+  scopeId: number,
+  declarations: VariableDeclaration[],
+) {
+  const cursor = node.cursor();
+  cursor.firstChild();
+  let foundFor = false;
+  do {
+    if (cursor.name === "for") {
+      foundFor = true;
+    } else if (foundFor && cursor.name === "in") {
+      break;
+    } else if (foundFor) {
+      collectMatchingTargets(
+        cursor,
+        state,
+        variableName,
+        scopeId,
+        declarations,
+      );
+    }
+  } while (cursor.nextSibling());
+}
+
+function collectMatchingDeclarations(
+  node: SyntaxNode | Tree,
+  state: EditorState,
+  variableName: string,
+  scopeStack: number[],
+  declarations: VariableDeclaration[],
+) {
+  const cursor = node.cursor();
+  const nodeName = cursor.name;
+  const nodeStart = cursor.from;
+
+  const isNewScope = SCOPE_CREATING_NODES.has(nodeName);
+  const currentScopeStack = isNewScope
+    ? [...scopeStack, nodeStart]
+    : scopeStack;
+  const currentScope = currentScopeStack[currentScopeStack.length - 1] ?? -1;
+
+  switch (nodeName) {
+    case "FunctionDefinition":
+    case "ClassDefinition": {
+      const subCursor = node.cursor();
+      subCursor.firstChild();
+      do {
+        if (
+          subCursor.name === "VariableName" &&
+          state.doc.sliceString(subCursor.from, subCursor.to) === variableName
+        ) {
+          const parentScope = scopeStack[scopeStack.length - 1] ?? -1;
+          addDeclaration(declarations, parentScope, subCursor.from);
+          break;
+        }
+      } while (subCursor.nextSibling());
+
+      if (nodeName === "FunctionDefinition") {
+        collectFunctionParameters(
+          node,
+          state,
+          variableName,
+          nodeStart,
+          declarations,
+        );
+      }
+      break;
+    }
+    case "LambdaExpression":
+      collectFunctionParameters(
+        node,
+        state,
+        variableName,
+        nodeStart,
+        declarations,
+      );
+      break;
+
+    case "ArrayComprehensionExpression":
+    case "DictionaryComprehensionExpression":
+    case "SetComprehensionExpression":
+    case "ComprehensionExpression":
+    case "ForStatement":
+      collectForTargets(node, state, variableName, currentScope, declarations);
+      break;
+
+    case "AssignStatement": {
+      const assignOpPositions: number[] = [];
+      const subCursor = node.cursor();
+      subCursor.firstChild();
+      do {
+        if (subCursor.name === "AssignOp") {
+          assignOpPositions.push(subCursor.from);
+        }
+      } while (subCursor.nextSibling());
+
+      const lastAssignOpPosition =
+        assignOpPositions[assignOpPositions.length - 1];
+      if (lastAssignOpPosition === undefined) {
+        break;
+      }
+
+      const targetCursor = node.cursor();
+      targetCursor.firstChild();
+      do {
+        if (targetCursor.from < lastAssignOpPosition) {
+          collectMatchingTargets(
+            targetCursor,
+            state,
+            variableName,
+            currentScope,
+            declarations,
+          );
+        }
+      } while (targetCursor.nextSibling());
+      break;
+    }
+    case "ImportStatement": {
+      const subCursor = node.cursor();
+      subCursor.firstChild();
+      do {
+        if (
+          subCursor.name === "VariableName" &&
+          state.doc.sliceString(subCursor.from, subCursor.to) === variableName
+        ) {
+          addDeclaration(declarations, currentScope, subCursor.from);
+        }
+      } while (subCursor.nextSibling());
+      break;
+    }
+    case "ImportFromStatement": {
+      const subCursor = node.cursor();
+      subCursor.firstChild();
+      let foundImport = false;
+      do {
+        if (subCursor.name === "import") {
+          foundImport = true;
+        } else if (
+          foundImport &&
+          subCursor.name === "VariableName" &&
+          state.doc.sliceString(subCursor.from, subCursor.to) === variableName
+        ) {
+          addDeclaration(declarations, currentScope, subCursor.from);
+        }
+      } while (subCursor.nextSibling());
+      break;
+    }
+    case "TryStatement":
+    case "WithStatement": {
+      const subCursor = node.cursor();
+      subCursor.firstChild();
+      let foundAs = false;
+      do {
+        if (subCursor.name === "as") {
+          foundAs = true;
+        } else if (
+          foundAs &&
+          subCursor.name === "VariableName" &&
+          state.doc.sliceString(subCursor.from, subCursor.to) === variableName
+        ) {
+          addDeclaration(declarations, currentScope, subCursor.from);
+          foundAs = false;
+        }
+      } while (subCursor.nextSibling());
+      break;
+    }
+    default:
+      break;
+  }
+
+  traverseChildren(cursor, (childNode) => {
+    collectMatchingDeclarations(
+      childNode,
+      state,
+      variableName,
+      currentScopeStack,
+      declarations,
+    );
+  });
+}
+
+function findScopedDefinitionPosition(
+  state: EditorState,
+  variableName: string,
+  usagePosition: number,
+): number | null {
+  const tree = syntaxTree(state);
+  const declarations: VariableDeclaration[] = [];
+
+  collectMatchingDeclarations(tree, state, variableName, [], declarations);
+
+  const clampedUsagePosition = Math.max(
+    0,
+    Math.min(usagePosition, state.doc.length),
+  );
+
+  for (const scope of getScopeChain(tree, clampedUsagePosition)) {
+    const match = declarations
+      .filter((declaration) => declaration.scopeId === scope.id)
+      .filter((declaration) => {
+        return POSITION_SENSITIVE_SCOPES.has(scope.type)
+          ? declaration.from <= clampedUsagePosition
+          : true;
+      })
+      .toSorted((left, right) => left.from - right.from)[0];
+
+    if (match) {
+      return match.from;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * This function will select the first occurrence of the given variable name,
+ * for a given editor view.
+ * @param view The editor view which contains the variable name.
+ * @param variableName The name of the variable to select, if found in the editor.
+ * @param usagePosition The position of the variable usage, if available.
+ */
+export function goToVariableDefinition(
+  view: EditorView,
+  variableName: string,
+  usagePosition?: number,
+): boolean {
+  const { state } = view;
+  const from =
+    (usagePosition !== undefined
+      ? findScopedDefinitionPosition(state, variableName, usagePosition)
+      : null) ?? findFirstMatchingVariable(state, variableName);
+
+  if (from === null) {
+    return false;
+  }
+
+  goToPosition(view, from);
+  return true;
 }
 
 /**

package/src/core/codemirror/go-to-definition/utils.ts

@@ -18,10 +18,16 @@ function getWordUnderCursor(state: EditorState) {
   const { from, to } = state.selection.main;
   if (from === to) {
     const { startToken, endToken } = getPositionAtWordBounds(state.doc, from);
-    return state.doc.sliceString(startToken, endToken);
+    return {
+      position: startToken,
+      word: state.doc.sliceString(startToken, endToken),
+    };
   }
 
-  return state.doc.sliceString(from, to);
+  return {
+    position: from,
+    word: state.doc.sliceString(from, to),
+  };
 }
 
 /**
@@ -51,15 +57,15 @@ function isPrivateVariable(variableName: string) {
  */
 export function goToDefinitionAtCursorPosition(view: EditorView): boolean {
   const { state } = view;
-  const variableName = getWordUnderCursor(state);
-  if (!variableName) {
+  const { position, word } = getWordUnderCursor(state);
+  if (!word) {
     return false;
   }
   // Close popovers/tooltips
   closeCompletion(view);
   view.dispatch({ effects: closeHoverTooltips });
 
-  return goToDefinition(view, variableName);
+  return goToDefinition(view, word, position);
 }
 
 /**
@@ -69,7 +75,19 @@ export function goToDefinitionAtCursorPosition(view: EditorView): boolean {
 export function goToDefinition(
   view: EditorView,
   variableName: string,
+  usagePosition?: number,
 ): boolean {
+  if (usagePosition !== undefined) {
+    const foundLocally = goToVariableDefinition(
+      view,
+      variableName,
+      usagePosition,
+    );
+    if (foundLocally) {
+      return true;
+    }
+  }
+
   // The variable may exist in another cell
   const editorWithVariable = getEditorForVariable(view, variableName);
   if (!editorWithVariable) {

package/src/core/codemirror/markdown/__tests__/commands.test.ts

@@ -246,7 +246,7 @@ describe("insertImage", () => {
       path: "public",
       type: "file",
       name: "hello.png",
-      contents: "AQID",
+      file: expect.any(File),
     });
 
     expect(view.state.doc.toString()).toMatchInlineSnapshot(
@@ -291,7 +291,7 @@ describe("insertImage", () => {
       path: "nested/public", // store in public folder of notebook directory
       type: "file",
       name: "hello.png",
-      contents: "AQID",
+      file: expect.any(File),
     });
 
     expect(view.state.doc.toString()).toMatchInlineSnapshot(
@@ -337,7 +337,7 @@ describe("insertImage", () => {
       path: "/Users/user/Development/project/public",
       type: "file",
       name: "hello.png",
-      contents: "AQID",
+      file: expect.any(File),
     });
 
     // Should convert absolute path to relative path

package/src/core/codemirror/markdown/commands.ts

@@ -313,7 +313,6 @@ export async function insertImage(view: EditorView, file: File) {
   // If the file is base64 encoded, we can save it locally to prevent large file strings
   try {
     if (dataUrl.startsWith("data:")) {
-      const base64 = dataUrl.split(",")[1];
       let inputFilename = prompt(
         "We can save your image as a file. Enter a filename.",
         file.name,
@@ -348,7 +347,7 @@ export async function insertImage(view: EditorView, file: File) {
           path: publicFolderPath as FilePath,
           type: "file",
           name: inputFilename,
-          contents: base64,
+          file,
         });
 
         if (createFileRes.success) {

package/src/core/edit-app.tsx

@@ -79,7 +79,7 @@ export const EditApp: React.FC<AppProps> = ({
     };
   }, []);
 
-  const { connection } = useMarimoKernelConnection({
+  const { connection, reconnect } = useMarimoKernelConnection({
     autoInstantiate: userConfig.runtime.auto_instantiate,
     setCells: (cells, layout) => {
       setCells(cells);
@@ -147,6 +147,7 @@ export const EditApp: React.FC<AppProps> = ({
         connection={connection}
         isRunning={isRunning}
         width={appConfig.width}
+        onReconnect={reconnect}
       >
         <AppHeader
           connection={connection}
@@ -156,7 +157,7 @@ export const EditApp: React.FC<AppProps> = ({
             "sticky left-0",
           )}
         >
-          {isEditing && (
+          {!hideControls && isEditing && (
             <div className="flex items-center justify-center container">
               <FilenameForm filename={filename} />
             </div>

package/src/core/hotkeys/hotkeys.ts

@@ -442,6 +442,11 @@ const DEFAULT_HOT_KEY = {
     group: "Command",
     key: "c",
   },
+  "command.cutCell": {
+    name: "Cut cell",
+    group: "Command",
+    key: "x",
+  },
   "command.pasteCell": {
     name: "Paste cell",
     group: "Command",

package/src/core/islands/worker/worker.tsx

@@ -9,6 +9,7 @@ import {
 } from "rpc-anywhere";
 import type { NotificationPayload } from "@/core/kernel/messages";
 import type { ParentSchema } from "@/core/wasm/rpc";
+import { shouldLoadDuckDBPackages } from "@/core/wasm/utils";
 import { TRANSPORT_ID } from "@/core/wasm/worker/constants";
 import { getPyodideVersion } from "@/core/wasm/worker/getPyodideVersion";
 import { MessageBuffer } from "@/core/wasm/worker/message-buffer";
@@ -85,8 +86,8 @@ const requestHandler = createRPCRequestHandler({
   loadPackages: async (code: string) => {
     await pyodideReadyPromise; // Make sure loading is done
 
-    if (code.includes("mo.sql")) {
-      // Add pandas and duckdb to the code
+    if (shouldLoadDuckDBPackages(code)) {
+      // Add pandas and duckdb to the code for mo.sql and for remote duckdb sources
       code = `import pandas\n${code}`;
       code = `import duckdb\n${code}`;
       code = `import sqlglot\n${code}`;

package/src/core/network/requests-network.ts

@@ -6,6 +6,19 @@ import { API, createClientWithRuntimeManager } from "./api";
 import { waitForConnectionOpen } from "./connection";
 import type { EditRequests, RunRequests } from "./types";
 
+/**
+ * Options for POSTing FormData via openapi-fetch. openapi-fetch types
+ * request bodies from the JSON schema, so we bypass the body type and
+ * override the serializer to pass the FormData through unchanged; the
+ * browser then sets the multipart Content-Type with boundary.
+ */
+function multipartInit(formData: FormData) {
+  return {
+    body: formData as never,
+    bodySerializer: (body: unknown) => body as never,
+  };
+}
+
 const { handleResponse, handleResponseReturnNull } = API;
 
 export function createNetworkRequests(): EditRequests & RunRequests {
@@ -298,10 +311,15 @@ export function createNetworkRequests(): EditRequests & RunRequests {
     },
     sendCreateFileOrFolder: async (request) => {
       await waitForConnectionOpen();
+      const formData = new FormData();
+      formData.append("path", request.path);
+      formData.append("type", request.type);
+      formData.append("name", request.name);
+      if (request.file) {
+        formData.append("file", request.file, request.name);
+      }
       return getClient()
-        .POST("/api/files/create", {
-          body: request,
-        })
+        .POST("/api/files/create", multipartInit(formData))
         .then(handleResponse);
     },
     sendDeleteFileOrFolder: async (request) => {

package/src/core/network/types.ts

@@ -80,6 +80,17 @@ export type SaveUserConfigurationRequest =
 export interface SetCellConfigRequest {
   configs: Record<CellId, Partial<CellConfig>>;
 }
+/**
+ * Client-side shape for creating a file/directory/notebook. The HTTP
+ * transport sends this as multipart/form-data; the WASM bridge base64-encodes
+ * `file` internally and crosses the JS<->Py boundary as JSON.
+ */
+export interface FileCreateInput {
+  path: string;
+  type: "file" | "directory" | "notebook";
+  name: string;
+  file?: Blob;
+}
 export type UpdateUIElementRequest = schemas["UpdateUIElementRequest"];
 export type ModelRequest = schemas["ModelRequest"];
 export type NotebookDocumentTransactionRequest =
@@ -165,7 +176,7 @@ export interface EditRequests {
   sendListFiles: (request: FileListRequest) => Promise<FileListResponse>;
   sendSearchFiles: (request: FileSearchRequest) => Promise<FileSearchResponse>;
   sendCreateFileOrFolder: (
-    request: FileCreateRequest,
+    request: FileCreateInput,
   ) => Promise<FileCreateResponse>;
   sendDeleteFileOrFolder: (
     request: FileDeleteRequest,

package/src/core/run-app.tsx

@@ -38,7 +38,7 @@ export const RunApp: React.FC<AppProps> = ({ appConfig }) => {
     };
   }, []);
 
-  const { connection } = useMarimoKernelConnection({
+  const { connection, reconnect } = useMarimoKernelConnection({
     autoInstantiate: true,
     setCells: setCells,
     sessionId: getSessionId(),
@@ -84,6 +84,7 @@ export const RunApp: React.FC<AppProps> = ({ appConfig }) => {
       connection={connection}
       isRunning={isRunning}
       width={appConfig.width}
+      onReconnect={reconnect}
     >
       <AppHeader connection={connection} className="sm:pt-8">
         {galleryHref && (