@marimo-team/islands 0.24.1-dev67 → 0.24.1-dev68

package/dist/{process-output-BKvXi5lM.js → process-output-BCqcNNll.js}

@@ -1,4 +1,4 @@
-import { $ as e, O as t, et as n } from "./html-to-image-BKk_y4-k.js";
+import { O as e, et as t, tt as n } from "./html-to-image-B7RQgQQy.js";
 import { u as r } from "./dist-wdOJ5T7-.js";
 import { b as i } from "./select-DQ9jU_B_.js";
 import { n as a } from "./semaphore-89jsoHtS.js";
@@ -23,8 +23,8 @@ function c(e) {
 	for (let e = 0; e < a; e++) o[e] = i.charCodeAt(e);
 	return new Blob([o], { type: r });
 }
-function l({ contents: e, mimeType: n, isBase64: r }) {
-	return r ? c(t(e, n)) : new Blob([e], { type: n });
+function l({ contents: t, mimeType: n, isBase64: r }) {
+	return r ? c(e(t, n)) : new Blob([t], { type: n });
 }
 //#endregion
 //#region src/core/dom/events.ts
@@ -72,8 +72,8 @@ function v(e) {
 }
 //#endregion
 //#region src/components/editor/output/console/process-output.ts
-function y(t) {
-	return t.mimetype.startsWith("application/vnd.marimo") || t.mimetype === "text/html" ? n(i.asString(t.data)) : e(i.asString(t.data));
+function y(e) {
+	return e.mimetype.startsWith("application/vnd.marimo") || e.mimetype === "text/html" ? n(i.asString(e.data)) : t(i.asString(e.data));
 }
 //#endregion
 export { d as a, h as c, s as d, o as f, m as i, c as l, _ as n, p as o, v as r, f as s, y as t, l as u };

package/dist/{reveal-component-B6O1FFou.js → reveal-component-D2QMPzcy.js}

@@ -2,9 +2,9 @@ import { a as e } from "./rolldown-runtime-Cb76FRpK.js";
 import { c as t, g as n, h as r, m as i, t as a } from "./button-DlqUC8W-.js";
 import { t as o } from "./react-DMWcHin-.js";
 import { t as s } from "./compiler-runtime-CAH9RLw2.js";
-import { Ct as c, rt as l } from "./html-to-image-BKk_y4-k.js";
+import { it as c, wt as l } from "./html-to-image-B7RQgQQy.js";
 import { u } from "./dist-wdOJ5T7-.js";
-import { J as d, X as f, Y as p, in as m, l as h, n as g, rn as _, sn as v, t as y, u as b } from "./common-8QNQrcue.js";
+import { J as d, X as f, Y as p, in as m, l as h, n as g, rn as _, sn as v, t as y, u as b } from "./common-C0qiyUYJ.js";
 import { R as x } from "./select-DQ9jU_B_.js";
 import { X as S } from "./dropdown-menu-C8N-kZzD.js";
 import { t as C } from "./jsx-runtime-CpoKNRgu.js";
@@ -6391,20 +6391,20 @@ var sa = (e) => {
 	let t = (0, A.c)(13), { cell: n } = e, r;
 	t[0] !== n.id || t[1] !== n.name ? (r = y(n.id, n.name), t[0] = n.id, t[1] = n.name, t[2] = r) : r = t[2];
 	let i = n.id, a = n.status, o = n.output, s;
-	t[3] === n ? s = t[4] : (s = l(n, !1), t[3] = n, t[4] = s);
-	let c;
-	t[5] !== n.id || t[6] !== n.output || t[7] !== n.status || t[8] !== s ? (c = /* @__PURE__ */ (0, q.jsx)(b, {
+	t[3] === n ? s = t[4] : (s = c(n, !1), t[3] = n, t[4] = s);
+	let l;
+	t[5] !== n.id || t[6] !== n.output || t[7] !== n.status || t[8] !== s ? (l = /* @__PURE__ */ (0, q.jsx)(b, {
 		cellId: i,
 		status: a,
 		output: o,
 		stale: s
-	}), t[5] = n.id, t[6] = n.output, t[7] = n.status, t[8] = s, t[9] = c) : c = t[9];
+	}), t[5] = n.id, t[6] = n.output, t[7] = n.status, t[8] = s, t[9] = l) : l = t[9];
 	let u;
-	return t[10] !== r || t[11] !== c ? (u = /* @__PURE__ */ (0, q.jsx)("div", {
+	return t[10] !== r || t[11] !== l ? (u = /* @__PURE__ */ (0, q.jsx)("div", {
 		className: "flex flex-col",
 		...r,
-		children: c
-	}), t[10] = r, t[11] = c, t[12] = u) : u = t[12], u;
+		children: l
+	}), t[10] = r, t[11] = l, t[12] = u) : u = t[12], u;
 }, ca = (e) => {
 	let t = (0, A.c)(24), { subslide: n, resolveShowCode: r, isEditable: i, slideConfigs: a, contentStyle: o } = e, s, c, l, u, d, f;
 	if (t[0] !== o || t[1] !== i || t[2] !== r || t[3] !== a || t[4] !== n) {
@@ -6453,7 +6453,7 @@ var ua = (e) => {
 	let o;
 	return t[3] === n ? o = t[4] : (o = /* @__PURE__ */ (0, q.jsx)(sa, { cell: n }), t[3] = n, t[4] = o), o;
 }, da = (e) => {
-	let n = (0, A.c)(147), { slideCells: o, layout: s, setLayout: l, noOutputIds: u, activeIndex: y, onSlideChange: b, mode: x, configWidth: S, isEditable: C } = e, O = C !== void 0 && C, j = (0, k.useRef)(null), M = (0, k.useRef)(null), { width: te, height: N } = ea(j), P = w() != null, ne = E(c), re;
+	let n = (0, A.c)(147), { slideCells: o, layout: s, setLayout: c, noOutputIds: u, activeIndex: y, onSlideChange: b, mode: x, configWidth: S, isEditable: C } = e, O = C !== void 0 && C, j = (0, k.useRef)(null), M = (0, k.useRef)(null), { width: te, height: N } = ea(j), P = w() != null, ne = E(l), re;
 	n[0] === ne ? re = n[1] : (re = ne ? [] : [Ji], n[0] = ne, n[1] = re);
 	let ie = re, [ae, F] = (0, k.useState)(fa), oe = g(o), se;
 	n[2] === oe ? se = n[3] : (se = !ee() && oe, n[2] = oe, n[3] = se);
@@ -6720,17 +6720,17 @@ var ua = (e) => {
 		disabled: P
 	}), n[129] = P, n[130] = ot);
 	let st = L?.id, ct;
-	n[131] !== s || n[132] !== l || n[133] !== st ? (ct = /* @__PURE__ */ (0, q.jsx)(d, {
+	n[131] !== s || n[132] !== c || n[133] !== st ? (ct = /* @__PURE__ */ (0, q.jsx)(d, {
 		defaultSize: 10,
 		minSize: 4,
 		collapsible: !0,
 		collapsedSize: 4,
 		children: /* @__PURE__ */ (0, q.jsx)(fr, {
 			layout: s,
-			setLayout: l,
+			setLayout: c,
 			cellId: st
 		})
-	}), n[131] = s, n[132] = l, n[133] = st, n[134] = ct) : ct = n[134];
+	}), n[131] = s, n[132] = c, n[133] = st, n[134] = ct) : ct = n[134];
 	let lt;
 	n[135] !== K || n[136] !== ot || n[137] !== ct ? (lt = /* @__PURE__ */ (0, q.jsxs)(p, {
 		direction: "vertical",
@@ -6743,12 +6743,12 @@ var ua = (e) => {
 		]
 	}), n[135] = K, n[136] = ot, n[137] = ct, n[138] = lt) : lt = n[138];
 	let ut;
-	n[139] !== L || n[140] !== S || n[141] !== s || n[142] !== l ? (ut = /* @__PURE__ */ (0, q.jsx)(h, {
+	n[139] !== L || n[140] !== S || n[141] !== s || n[142] !== c ? (ut = /* @__PURE__ */ (0, q.jsx)(h, {
 		configWidth: S,
 		layout: s,
-		setLayout: l,
+		setLayout: c,
 		activeConfigCell: L
-	}), n[139] = L, n[140] = S, n[141] = s, n[142] = l, n[143] = ut) : ut = n[143];
+	}), n[139] = L, n[140] = S, n[141] = s, n[142] = c, n[143] = ut) : ut = n[143];
 	let dt;
 	return n[144] !== lt || n[145] !== ut ? (dt = /* @__PURE__ */ (0, q.jsxs)("div", {
 		className: "flex-1 min-w-0 flex flex-row gap-3",

package/package.json

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

package/src/components/variables/__tests__/variables-table.test.tsx

@@ -0,0 +1,110 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { python } from "@codemirror/lang-python";
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Provider } from "jotai";
+import { afterEach, describe, expect, test } from "vitest";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { cellId, variableName } from "@/__tests__/branded";
+import type { CellHandle } from "@/components/editor/notebook-cell";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { initialNotebookState, notebookAtom } from "@/core/cells/cells";
+import { HTMLCellId } from "@/core/cells/ids";
+import { editorMountScheduler } from "@/core/codemirror/editor-mount-scheduler";
+import { store } from "@/core/state/jotai";
+import type { Variables } from "@/core/variables/types";
+import { VariableTable } from "../variables-table";
+
+async function tick(): Promise<void> {
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+}
+
+const views: EditorView[] = [];
+const elements: HTMLElement[] = [];
+
+afterEach(() => {
+  for (const view of views.splice(0)) {
+    view.destroy();
+  }
+  for (const element of elements.splice(0)) {
+    element.remove();
+  }
+  store.set(notebookAtom, initialNotebookState());
+});
+
+describe("VariableTable cell links", () => {
+  test("declared-by click builds the queued editor and highlights the variable", async () => {
+    const usageCell = cellId("usage");
+    const definingCell = cellId("defining");
+    const definingCode = "y = 1\nx = 42";
+
+    const definingView = new EditorView({
+      state: EditorState.create({
+        doc: definingCode,
+        extensions: [python()],
+      }),
+    });
+    views.push(definingView);
+
+    const notebook = MockNotebook.notebookState({
+      cellData: {
+        [usageCell]: { name: "usage_cell" },
+        [definingCell]: { name: "defining_cell" },
+      },
+    });
+    // The defining cell's editor build still waits in the mount queue, the
+    // state right after a large notebook opens.
+    const handle: { current: CellHandle | null } = { current: null };
+    notebook.cellHandles[definingCell] = handle;
+    editorMountScheduler.request(definingCell, () => {
+      handle.current = {
+        editorView: definingView,
+        editorViewOrNull: definingView,
+      };
+    });
+    store.set(notebookAtom, notebook);
+
+    // The link's click handler requires the target cell's element on the page.
+    const cellElement = document.createElement("div");
+    cellElement.id = HTMLCellId.create(definingCell);
+    document.body.append(cellElement);
+    elements.push(cellElement);
+
+    const variables: Variables = {
+      [variableName("x")]: {
+        dataType: "int",
+        declaredBy: [definingCell],
+        name: variableName("x"),
+        usedBy: [usageCell],
+        value: "42",
+      },
+    };
+
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <VariableTable
+            cellIds={[usageCell, definingCell]}
+            variables={variables}
+          />
+        </TooltipProvider>
+      </Provider>,
+    );
+
+    expect(handle.current).toBeNull();
+
+    fireEvent.click(screen.getByText("defining_cell"));
+    // First frame: the link's click callback runs and builds the queued
+    // editor synchronously.
+    await tick();
+    expect(handle.current?.editorView).toBe(definingView);
+    expect(cellElement.classList.contains("focus-outline")).toBe(true);
+    // Second frame: the jump dispatches the selection.
+    await tick();
+    expect(definingView.state.selection.main.head).toBe(
+      definingCode.indexOf("x = 42"),
+    );
+  });
+});

package/src/components/variables/variables-table.tsx

@@ -15,7 +15,7 @@ import { SquareEqualIcon, WorkflowIcon } from "lucide-react";
 import React, { memo, useMemo } from "react";
 import { useLocale } from "react-aria";
 import { CellLink } from "@/components/editor/links/cell-link";
-import { getCellEditorView, useCellNames } from "@/core/cells/cells";
+import { ensureCellEditorView, useCellNames } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import { isInternalCellName } from "@/core/cells/names";
 import { goToVariableDefinition } from "@/core/codemirror/go-to-definition/commands";
@@ -135,9 +135,8 @@ const COLUMNS = [
     cell: ({ getValue }) => {
       const [declaredBy, usedBy, name] = getValue();
 
-      // Highlight the variable in the cell editor
       const highlightInCell = (cellId: CellId) => {
-        const editorView = getCellEditorView(cellId);
+        const editorView = ensureCellEditorView(cellId);
         if (editorView) {
           goToVariableDefinition(editorView, name);
         }

package/src/core/cells/cells.ts

@@ -19,6 +19,7 @@ import { Objects } from "@/utils/objects";
 import { extractAllTracebackInfo, type TracebackInfo } from "@/utils/traceback";
 import { createReducerAndAtoms } from "../../utils/createReducer";
 import { foldAllBulk, unfoldAllBulk } from "../codemirror/editing/commands";
+import { editorMountScheduler } from "../codemirror/editor-mount-scheduler";
 import {
   splitEditor,
   updateEditorCodeFromPython,
@@ -1919,6 +1920,16 @@ export const getCellEditorView = (cellId: CellId) => {
   return cellHandles[cellId].current?.editorView;
 };
 
+/**
+ * Get the cell's editor view. When the view's build is still queued in the
+ * progressive-mount scheduler, build it synchronously first. This lets user
+ * actions target a cell whose editor is not mounted yet.
+ */
+export const ensureCellEditorView = (cellId: CellId) => {
+  editorMountScheduler.promote(cellId);
+  return getCellEditorView(cellId);
+};
+
 export function flattenTopLevelNotebookCells(
   state: NotebookState,
 ): (CellData & CellRuntimeState)[] {

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

@@ -5,7 +5,9 @@ import { EditorState } from "@codemirror/state";
 import { EditorView, keymap } from "@codemirror/view";
 import { afterEach, describe, expect, test, vi } from "vitest";
 import { cellId, variableName } from "@/__tests__/branded";
+import type { CellHandle } from "@/components/editor/notebook-cell";
 import { initialNotebookState, notebookAtom } from "@/core/cells/cells";
+import { editorMountScheduler } from "@/core/codemirror/editor-mount-scheduler";
 import { store } from "@/core/state/jotai";
 import { variablesAtom } from "@/core/variables/state";
 import {
@@ -184,6 +186,52 @@ print(mymodule)`;
       moduleCode.indexOf("mymodule"),
     );
   });
+
+  test("builds the defining cell's queued editor before jumping", async () => {
+    const definingCell = cellId("queued-defining-cell");
+    const usageCell = cellId("usage-cell");
+    const definingCode = "a = 10";
+    const usageCode = "print(a)";
+
+    const definingView = createEditor(definingCode, definingCode.length);
+    const usageView = createEditor(usageCode, usageCode.indexOf("a"));
+    views.push(definingView, usageView);
+
+    // The defining cell's editor build still waits in the mount queue, the
+    // state right after a large notebook opens.
+    const handle: { current: CellHandle | null } = { current: null };
+    editorMountScheduler.request(definingCell, () => {
+      handle.current = {
+        editorView: definingView,
+        editorViewOrNull: definingView,
+      };
+    });
+
+    const notebook = initialNotebookState();
+    notebook.cellHandles[definingCell] = handle;
+    notebook.cellHandles[usageCell] = {
+      current: { editorView: usageView, editorViewOrNull: usageView },
+    };
+
+    store.set(notebookAtom, notebook);
+    store.set(variablesAtom, {
+      [variableName("a")]: {
+        dataType: "int",
+        declaredBy: [definingCell],
+        name: variableName("a"),
+        usedBy: [usageCell],
+        value: "10",
+      },
+    });
+
+    const result = goToDefinitionAtCursorPosition(usageView);
+
+    expect(result).toBe(true);
+    // The jump built the queued editor synchronously.
+    expect(handle.current?.editorView).toBe(definingView);
+    await tick();
+    expect(definingView.state.selection.main.head).toBe(0);
+  });
 });
 
 describe("goToDefinitionWithLspFallback", () => {

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

@@ -10,7 +10,7 @@ import {
 } from "@codemirror/view";
 import type { CellId } from "@/core/cells/ids";
 import { hotkeysAtom, platformAtom } from "../../config/config";
-import { notebookAtom } from "../../cells/cells";
+import { ensureCellEditorView } from "../../cells/cells";
 import { store } from "../../state/jotai";
 import { variablesAtom } from "../../variables/state";
 import type { VariableName, Variables } from "../../variables/types";
@@ -181,12 +181,6 @@ function getEditorForVariable(
   return null;
 }
 
-/**
- * Go to the given line number in the editor view.
- * @param view The editor view to go to.
- * @param line The line number to go to.
- */
 function getEditorForCell(cellId: CellId): EditorView | null {
-  const notebookState = store.get(notebookAtom);
-  return notebookState.cellHandles[cellId].current?.editorView ?? null;
+  return ensureCellEditorView(cellId) ?? null;
 }