@marimo-team/islands 0.25.3-dev170 → 0.25.3-dev175

package/dist/{xychartDiagram-S5SC5T6Z-MxyaWjjq.js → xychartDiagram-S5SC5T6Z-1hIHN6Rl.js}

@@ -9,7 +9,7 @@ import { n as s } from "./chunk-Y2CYZVJY-DKKS1VyV.js";
 import { D as c, H as l, K as u, U as d, a as f, b as p, c as m, f as h, v as g, w as _, y as v, z as y } from "./chunk-DU6HZSFF-BwiyaNpg.js";
 import "./chunk-PWAF6VOD-CQw5qATZ.js";
 import { t as b } from "./chunk-GMAD6QVW-BhaJx0X3.js";
-import { p as x } from "./mermaid-CSvw7c71.js";
+import { p as x } from "./mermaid-CZ6FrClS.js";
 //#region ../node_modules/.pnpm/d3-scale@4.0.2/node_modules/d3-scale/src/band.js
 function S() {
 	var e = t().unknown(void 0), r = e.domain, i = e.range, o = 0, s = 1, c, l, u = !1, d = 0, f = 0, p = .5;

package/package.json

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

package/src/__mocks__/document.tsx

@@ -0,0 +1,54 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { atom, type createStore, Provider } from "jotai";
+import type { ReactNode } from "react";
+import {
+  createDocumentModel,
+  type DocumentModel,
+  DocumentProvider,
+} from "@/core/notebook/document";
+import { document as documentFixture } from "@/core/notebook/document/__tests__/fixtures";
+import type { Document } from "@/core/notebook/replica";
+import { fakeBackend } from "@/core/notebook/replica/__tests__/fixtures";
+import { activeDocumentModelAtom } from "@/core/session/active-notebook";
+
+/** A started document model over `document`, for components that edit cells. */
+export function mockDocumentModel(
+  store: ReturnType<typeof createStore>,
+  document: Document | null = documentFixture(),
+): { model: DocumentModel; stop: () => void } {
+  const controller = new AbortController();
+  const model = createDocumentModel({
+    store,
+    documentAtom: atom(document),
+    backendAtom: atom(fakeBackend()),
+  });
+  model.start({ signal: controller.signal });
+  store.set(activeDocumentModelAtom, model);
+  return {
+    model,
+    stop: () => {
+      controller.abort();
+      if (store.get(activeDocumentModelAtom) === model) {
+        store.set(activeDocumentModelAtom, null);
+      }
+    },
+  };
+}
+
+/** Provide `store` and `model` to a rendered hook or component. */
+export function DocumentWrapper({
+  store,
+  model,
+  children,
+}: {
+  store: ReturnType<typeof createStore>;
+  model: DocumentModel;
+  children?: ReactNode;
+}) {
+  return (
+    <Provider store={store}>
+      <DocumentProvider model={model}>{children}</DocumentProvider>
+    </Provider>
+  );
+}

package/src/__mocks__/notebook.ts

@@ -2,7 +2,8 @@
 
 import { createRef } from "react";
 import { vi } from "vitest";
-import type { CellActions, NotebookState } from "@/core/cells/cells";
+import type { CellActions } from "@/core/cells/actions";
+import type { NotebookState } from "@/core/cells/cells";
 import { CellId } from "@/core/cells/ids";
 import {
   type CellData,

package/src/__mocks__/requests.ts

@@ -26,11 +26,9 @@ export const MockRequestClient = {
       sendRun: vi.fn().mockResolvedValue({}),
       sendRunScratchpad: vi.fn().mockResolvedValue({}),
       sendInstantiate: vi.fn().mockResolvedValue({}),
-      sendDeleteCell: vi.fn().mockResolvedValue({}),
       sendCodeCompletionRequest: vi.fn().mockResolvedValue({ items: [] }),
       saveUserConfig: vi.fn().mockResolvedValue({}),
       saveAppConfig: vi.fn().mockResolvedValue({}),
-      saveCellConfig: vi.fn().mockResolvedValue({}),
       sendFunctionRequest: vi.fn().mockResolvedValue({}),
       sendInstallMissingPackages: vi.fn().mockResolvedValue({}),
       readCode: vi.fn().mockResolvedValue({ contents: "" }),

package/src/components/chat/chat-panel.tsx

@@ -53,7 +53,7 @@ import {
   type CopilotMode,
   FRONTEND_TOOL_REGISTRY,
 } from "@/core/ai/tools/registry";
-import { useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { aiAtom, aiModelConfiguredAtom } from "@/core/config/config";
 import { DEFAULT_AI_MODEL } from "@/core/config/config-schema";
 import { useRequestClient } from "@/core/network/requests";
@@ -582,10 +582,10 @@ const ChatPanelBody = () => {
   const store = useStore();
 
   const { addStagedCell } = useStagedAICellsActions();
-  const { createNewCell, prepareForRun } = useCellActions();
+  const { prepareForRun, createCell } = useCellActions();
   const toolContext: ToolNotebookContext = {
     addStagedCell,
-    createNewCell,
+    createCell,
     prepareForRun,
     sendRun,
     store,

package/src/components/datasources/__tests__/column-preview.test.tsx

@@ -12,11 +12,10 @@ import { requestClientAtom } from "@/core/network/requests";
 import { store } from "@/core/state/jotai";
 import { DatasetColumnPreview } from "../column-preview";
 
-const { createNewCell } = vi.hoisted(() => ({ createNewCell: vi.fn() }));
+const { createCell } = vi.hoisted(() => ({ createCell: vi.fn() }));
 
-vi.mock("@/core/cells/cells", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("@/core/cells/cells")>()),
-  useCellActions: () => ({ createNewCell }),
+vi.mock("@/core/cells/actions", () => ({
+  useCellActions: () => ({ createCell }),
 }));
 
 const wrapper = ({ children }: { children: React.ReactNode }) => (
@@ -179,12 +178,11 @@ describe("DatasetColumnPreview chart actions", () => {
           name: `Add chart to notebook for ${column.name}`,
         }),
       );
-      expect(createNewCell).toHaveBeenLastCalledWith({
+      expect(createCell).toHaveBeenLastCalledWith({
+        after: null,
         code: `chart_${column.name}`,
-        before: false,
-        cellId: "__end__",
       });
     }
-    expect(createNewCell).toHaveBeenCalledTimes(2);
+    expect(createCell).toHaveBeenCalledTimes(2);
   });
 });

package/src/components/datasources/column-preview.tsx

@@ -5,7 +5,7 @@ import { PlusSquareIcon } from "lucide-react";
 import React, { Suspense } from "react";
 import { useLocale } from "react-aria";
 import { maybeAddAltairImport } from "@/core/cells/add-missing-import";
-import { useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { autoInstantiateAtom } from "@/core/config/config";
 import type { SQLTableContext } from "@/core/datasets/data-source-connections";
@@ -249,21 +249,17 @@ export const AddDataframeChart: React.FC<{
 }> = ({ chartCode, columnName }) => {
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
   const lastFocusedCellId = useLastFocusedCellId();
-  const { createNewCell } = useCellActions();
+  const { createCell } = useCellActions();
 
   const handleAddColumn = (chartCode: string) => {
     if (chartCode.includes("alt")) {
       maybeAddAltairImport({
         autoInstantiate,
-        createNewCell,
+        createCell,
         fromCellId: lastFocusedCellId,
       });
     }
-    createNewCell({
-      code: chartCode,
-      before: false,
-      cellId: lastFocusedCellId ?? "__end__",
-    });
+    createCell({ after: lastFocusedCellId, code: chartCode });
   };
 
   return (

package/src/components/datasources/datasources.tsx

@@ -17,7 +17,8 @@ import { Button, buttonVariants } from "@/components/ui/button";
 import { Command, CommandInput, CommandItem } from "@/components/ui/command";
 import { Tooltip } from "@/components/ui/tooltip";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
-import { cellIdsAtom, useCellActions } from "@/core/cells/cells";
+import { cellIdsAtom } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { autoInstantiateAtom } from "@/core/config/config";
 import {
@@ -849,13 +850,13 @@ const DatasetTableItem: React.FC<{
 
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
   const lastFocusedCellId = useLastFocusedCellId();
-  const { createNewCell } = useCellActions();
+  const { createCell } = useCellActions();
   const addCodeToNewCell = useAddCodeToNewCell();
 
   const handleAddTable = () => {
     maybeAddMarimoImport({
       autoInstantiate,
-      createNewCell,
+      createCell,
       fromCellId: lastFocusedCellId,
     });
     const getCode = () => {

package/src/components/dependency-graph/minimap-content.tsx

@@ -7,12 +7,8 @@ import {
   cellGraphsAtom,
   isVariableAffectedBySelectedCell,
 } from "@/components/editor/chrome/wrapper/minimap-state";
-import {
-  useCellActions,
-  useCellData,
-  useCellIds,
-  useCellRuntime,
-} from "@/core/cells/cells";
+import { useCellData, useCellIds, useCellRuntime } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { cellFocusAtom, useCellFocusActions } from "@/core/cells/focus";
 import type { CellId } from "@/core/cells/ids";
 import { useVariables } from "@/core/variables/state";

package/src/components/dependency-graph/panels.tsx

@@ -14,7 +14,8 @@ import {
 } from "lucide-react";
 import React, { memo, useId } from "react";
 import { type Edge, Panel } from "reactflow";
-import { getCellEditorView, useCellActions } from "@/core/cells/cells";
+import { getCellEditorView } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import type { CellId } from "@/core/cells/ids";
 import { goToVariableDefinition } from "@/core/codemirror/go-to-definition/commands";
 import type { Variable, Variables } from "@/core/variables/types";

package/src/components/editor/__tests__/Output.test.tsx

@@ -1,10 +1,16 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { createStore, Provider } from "jotai";
+import { mockDocumentModel } from "@/__mocks__/document";
 import { cellId } from "@/__tests__/branded";
+import { DocumentProvider } from "@/core/notebook/document";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { OutputArea, OutputRenderer } from "../Output";
 
+const store = createStore();
+const { model } = mockDocumentModel(store, null);
+
 describe("OutputRenderer renderFallback prop", () => {
   it("should use renderFallback for unsupported mimetypes", () => {
     const renderFallback = (mimetype: string) => (
@@ -70,31 +76,39 @@ describe("OutputRenderer renderFallback prop", () => {
 describe("OutputArea null/undefined handling", () => {
   it("should render null when output is null", () => {
     const { container } = render(
-      <TooltipProvider>
-        <OutputArea
-          output={null}
-          cellId={cellId("test")}
-          stale={false}
-          loading={false}
-          allowExpand={true}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <OutputArea
+              output={null}
+              cellId={cellId("test")}
+              stale={false}
+              loading={false}
+              allowExpand={true}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
     expect(container.innerHTML).toBe("");
   });
 
   it("should render null when output is undefined", () => {
     const { container } = render(
-      <TooltipProvider>
-        <OutputArea
-          // @ts-expect-error -- testing runtime safety for undefined output
-          output={undefined}
-          cellId={cellId("test")}
-          stale={false}
-          loading={false}
-          allowExpand={true}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <OutputArea
+              // @ts-expect-error -- testing runtime safety for undefined output
+              output={undefined}
+              cellId={cellId("test")}
+              stale={false}
+              loading={false}
+              allowExpand={true}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
     expect(container.innerHTML).toBe("");
   });
@@ -184,19 +198,23 @@ describe("OutputArea fullscreen exit control", () => {
 
   const renderOutput = () =>
     render(
-      <TooltipProvider>
-        <OutputArea
-          output={{
-            channel: "output",
-            data: "Hello World",
-            mimetype: "text/plain",
-          }}
-          cellId={cellId("test")}
-          stale={false}
-          loading={false}
-          allowExpand={true}
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <OutputArea
+              output={{
+                channel: "output",
+                data: "Hello World",
+                mimetype: "text/plain",
+              }}
+              cellId={cellId("test")}
+              stale={false}
+              loading={false}
+              allowExpand={true}
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
   const enterFullscreen = (container: HTMLElement) => {

package/src/components/editor/__tests__/data-attributes.test.tsx

@@ -3,11 +3,13 @@ import { render } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { beforeAll, describe, expect, it } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
+import { mockDocumentModel } from "@/__mocks__/document";
 import { MockNotebook } from "@/__mocks__/notebook";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { notebookAtom } from "@/core/cells/cells";
+import { DocumentProvider } from "@/core/notebook/document";
 import { createCellRuntimeState } from "@/core/cells/types";
 import type { UserConfig } from "@/core/config/config-schema";
 import type { OutputMessage } from "@/core/kernel/messages";
@@ -18,9 +20,12 @@ import { OutputArea } from "../Output";
 
 function createTestWrapper() {
   const store = createStore();
+  const { model } = mockDocumentModel(store, null);
   store.set(requestClientAtom, MockRequestClient.create());
   const wrapper = ({ children }: { children: React.ReactNode }) => (
-    <Provider store={store}>{children}</Provider>
+    <Provider store={store}>
+      <DocumentProvider model={model}>{children}</DocumentProvider>
+    </Provider>
   );
   return { wrapper, store };
 }
@@ -150,17 +155,23 @@ describe("Output data attributes", () => {
       timestamp: 0,
     };
 
+    const store = createStore();
+    const { model } = mockDocumentModel(store, null);
     const { container } = render(
-      <TooltipProvider>
-        <OutputArea
-          output={output}
-          cellId={cid}
-          stale={false}
-          loading={false}
-          allowExpand={true}
-          className="test-output"
-        />
-      </TooltipProvider>,
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <OutputArea
+              output={output}
+              cellId={cid}
+              stale={false}
+              loading={false}
+              allowExpand={true}
+              className="test-output"
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
     );
 
     const outputElement = container.querySelector('[data-cell-role="output"]');

package/src/components/editor/__tests__/output-persistence.test.tsx

@@ -3,11 +3,13 @@ import { render } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { beforeAll, describe, expect, it } from "vitest";
 import { SetupMocks } from "@/__mocks__/common";
+import { mockDocumentModel } from "@/__mocks__/document";
 import { MockNotebook } from "@/__mocks__/notebook";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { notebookAtom } from "@/core/cells/cells";
+import { DocumentProvider } from "@/core/notebook/document";
 import type { CellRuntimeState } from "@/core/cells/types";
 import { createCellRuntimeState } from "@/core/cells/types";
 import { defaultUserConfig } from "@/core/config/config-schema";
@@ -19,9 +21,12 @@ const cid = cellId("test");
 
 function createTestWrapper() {
   const store = createStore();
+  const { model } = mockDocumentModel(store, null);
   store.set(requestClientAtom, MockRequestClient.create());
   const wrapper = ({ children }: { children: React.ReactNode }) => (
-    <Provider store={store}>{children}</Provider>
+    <Provider store={store}>
+      <DocumentProvider model={model}>{children}</DocumentProvider>
+    </Provider>
   );
   return { wrapper, store };
 }

package/src/components/editor/actions/__tests__/name-cell-input.test.tsx

@@ -0,0 +1,69 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+// @vitest-environment jsdom
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { atom, createStore, Provider } from "jotai";
+import { afterEach, describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import {
+  createDocumentModel,
+  DocumentProvider,
+} from "@/core/notebook/document";
+import {
+  cell,
+  document as documentOf,
+  withCells,
+} from "@/core/notebook/document/__tests__/fixtures";
+import { fakeBackend } from "@/core/notebook/replica/__tests__/fixtures";
+import { NameCellContentEditable } from "../name-cell-input";
+
+const controllers: AbortController[] = [];
+
+afterEach(() => {
+  for (const controller of controllers.splice(0)) {
+    controller.abort();
+  }
+});
+
+describe("NameCellContentEditable", () => {
+  it("renames the cell in the document when the name is committed", () => {
+    const store = createStore();
+    const source = atom(
+      withCells(documentOf(), {
+        c1: cell("c1", "x = 1", { name: "first" }),
+      }),
+    );
+    const model = createDocumentModel({
+      store,
+      documentAtom: source,
+      backendAtom: atom(fakeBackend()),
+    });
+    const controller = new AbortController();
+    controllers.push(controller);
+    model.start({ signal: controller.signal });
+
+    render(
+      <Provider store={store}>
+        <DocumentProvider model={model}>
+          <TooltipProvider>
+            <NameCellContentEditable
+              cellId={cellId("c1")}
+              value="first"
+              className=""
+            />
+          </TooltipProvider>
+        </DocumentProvider>
+      </Provider>,
+    );
+
+    const field = screen.getByText("first");
+    // jsdom does not lay text out, so it has no innerText of its own.
+    Object.defineProperty(field, "innerText", { value: " renamed " });
+    fireEvent.blur(field);
+
+    expect(store.get(model.documentAtom)?.cells.get("c1")?.name).toBe(
+      "renamed",
+    );
+  });
+});

package/src/components/editor/actions/name-cell-input.tsx

@@ -3,13 +3,14 @@
 import React, { useRef, useState } from "react";
 import { Input } from "@/components/ui/input";
 import { Tooltip } from "@/components/ui/tooltip";
-import { getCellNames, useCellActions } from "@/core/cells/cells";
+import { getCellNames } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import {
   getValidName,
   isInternalCellName,
   normalizeName,
 } from "@/core/cells/names";
+import { useNotebookDocumentEdit } from "@/core/notebook/document";
 import { useOnMount } from "@/hooks/useLifecycle";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
@@ -71,9 +72,9 @@ export const NameCellContentEditable: React.FC<{
   value: string;
   className: string;
 }> = ({ value, cellId, className }) => {
-  const { updateCellName } = useCellActions();
+  const edit = useNotebookDocumentEdit();
   const inputProps = useCellNameInput(value, (newName) =>
-    updateCellName({ cellId, name: newName }),
+    edit((tx) => tx.setName(cellId, newName)),
   );
 
   // If the name is the default, don't render the content editable