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

package/src/core/run-app.tsx

@@ -11,11 +11,7 @@ import { Spinner } from "@/components/icons/spinner";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/utils/cn";
 import { CellsRenderer } from "../components/editor/renderers/cells-renderer";
-import {
-  hasCellsAtom,
-  notebookIsRunningAtom,
-  useCellActions,
-} from "./cells/cells";
+import { hasCellsAtom, notebookIsRunningAtom } from "./cells/cells";
 import type { AppConfig } from "./config/config-schema";
 import { DocumentProvider } from "./notebook/document";
 import { RuntimeState } from "./kernel/RuntimeState";
@@ -41,7 +37,6 @@ const canPaintRunAppAtom = atom(
 );
 
 export const RunApp: React.FC<AppProps> = ({ appConfig, hideHeader }) => {
-  const { setCells } = useCellActions();
   const { sendComponentValues } = useRequestClient();
 
   // Initialize RuntimeState event-listeners
@@ -54,7 +49,6 @@ export const RunApp: React.FC<AppProps> = ({ appConfig, hideHeader }) => {
 
   const { connection, reconnect, documentModel } = useNotebookSession({
     autoInstantiate: true,
-    setCells: setCells,
     sessionId: getSessionId(),
   });
 

package/src/core/session/__tests__/useNotebookSession.hook.test.tsx

@@ -159,7 +159,6 @@ function renderConnectionHook(
       useNotebookSession({
         sessionId: SESSION_ID,
         autoInstantiate: false,
-        setCells: vi.fn(),
       }),
     { wrapper, reactStrictMode },
   );
@@ -334,10 +333,6 @@ it.each(["kernel-ready", "reconnected"])(
     act(() =>
       conn.send({
         op,
-        cell_ids: [],
-        codes: [],
-        names: [],
-        configs: [],
         layout: null,
         resumed: true,
         ui_values: {},
@@ -367,7 +362,6 @@ describe("connection notice", () => {
       const { reconnect } = useNotebookSession({
         sessionId: SESSION_ID,
         autoInstantiate: false,
-        setCells: vi.fn(),
       });
       return (
         <ConnectionNotice

package/src/core/session/useNotebookSession.tsx

@@ -5,7 +5,12 @@ import { useAtom, useAtomValue, useSetAtom, useStore } from "jotai";
 import { useEffect, useLayoutEffect, useMemo } from "react";
 import { useErrorBoundary } from "react-error-boundary";
 import { toast } from "@/components/ui/use-toast";
-import { getNotebook, useCellActions } from "@/core/cells/cells";
+import {
+  getNotebook,
+  notebookAtom,
+  useReducerActions,
+} from "@/core/cells/cells";
+import { followDocument } from "@/core/cells/document";
 import { AUTOCOMPLETER } from "@/core/codemirror/completion/Autocompleter";
 import { createDocumentModel } from "@/core/notebook/document";
 import type { NotificationPayload } from "@/core/kernel/messages";
@@ -22,14 +27,13 @@ import { Logger } from "@/utils/Logger";
 import { reloadSafe } from "@/utils/reload-safe";
 import { useAlertActions } from "../alerts/state";
 import { cacheInfoAtom } from "../cache/requests";
-import { SCRATCH_CELL_ID } from "../cells/ids";
 import { useRunsActions } from "../cells/runs";
 import { focusAndScrollCellOutputIntoView } from "../cells/scrollCellIntoView";
 import {
   resyncBreakpoints,
   setActiveLine,
 } from "../codemirror/cells/debugger-state";
-import type { CellData } from "../cells/types";
+import { notebookCells } from "../cells/utils";
 import { capabilitiesAtom } from "../config/capabilities";
 import { connectionTransportTypeAtom, useSetAppConfig } from "../config/config";
 import { useDataSourceActions } from "../datasets/data-source-connections";
@@ -75,30 +79,23 @@ import type { VariableName } from "../variables/types";
 import { activeDocumentModelAtom } from "./active-notebook";
 import { WebSocketClosedReason, ConnectionState } from "./types";
 
-const SUPPORTS_LAZY_KERNELS = true;
-
-function getExistingCells(): CellData[] | undefined {
-  if (!SUPPORTS_LAZY_KERNELS) {
-    return undefined;
-  }
-
-  // Remove scratch pad
-  return Object.values(getNotebook().cellData).filter(
-    (cell) => cell.id !== SCRATCH_CELL_ID,
-  );
-}
-
 /** Coordinate session startup and apply notifications to the editor. */
 export function useNotebookSession(opts: {
   sessionId: SessionId;
   autoInstantiate: boolean;
-  setCells: (cells: CellData[], layout: LayoutState) => void;
+  /** Called with the layout the kernel reported, after its cells are ready. */
+  onKernelReady?: (layout: LayoutState) => void;
 }) {
-  const { autoInstantiate, sessionId, setCells } = opts;
+  const { autoInstantiate, sessionId, onKernelReady } = opts;
   const { showBoundary } = useErrorBoundary();
+  const store = useStore();
 
-  const { handleCellMessage } = useCellActions();
-  const { reconcileDocument } = useCellActions({ skipMiddleware: true });
+  const {
+    handleCellMessage,
+    reconcileDocument,
+    setLastRun,
+    resetCellRuntimes,
+  } = useReducerActions();
   const { addCellNotification } = useRunsActions();
   const setKernelState = useSetAtom(kernelStateAtom);
   const setInitialRunCompleted = useSetAtom(initialRunCompletedAtom);
@@ -153,18 +150,18 @@ export function useNotebookSession(opts: {
         setInitialRunCompleted(
           Boolean(msg.data.resumed || msg.data.auto_instantiated),
         );
-        const existingCells = getExistingCells();
-
-        handleKernelReady(msg.data, {
+        const layout = handleKernelReady(msg.data, {
           autoInstantiate,
-          setCells,
+          cells: notebookCells(store.get(notebookAtom)),
+          setLastRun,
+          resetCellRuntimes,
           setLayoutData,
           setAppConfig,
           setCapabilities,
           setKernelState,
           onError: showBoundary,
-          existingCells,
         });
+        onKernelReady?.(layout);
         if (!msg.data.resumed) {
           // A freshly started kernel may expose a different environment
           // (e.g. new env vars); re-run discovery instead of reusing stale
@@ -393,7 +390,6 @@ export function useNotebookSession(opts: {
     }
   };
 
-  const store = useStore();
   const onMessageError = (error: unknown) => {
     toast({
       title: "Failed to handle message",
@@ -443,16 +439,13 @@ export function useNotebookSession(opts: {
     const controller = new AbortController();
     documentModel.start({ signal: controller.signal });
     store.set(activeDocumentModelAtom, documentModel);
-    const follow = () => {
-      const document = store.get(documentModel.documentAtom);
-      if (document !== null) {
-        reconcileDocument(document);
-      }
-    };
-    const unsubscribe = store.sub(documentModel.documentAtom, follow);
-    follow();
+    followDocument({
+      store,
+      model: documentModel,
+      reconcile: reconcileDocument,
+      signal: controller.signal,
+    });
     return () => {
-      unsubscribe();
       controller.abort();
       if (store.get(activeDocumentModelAtom) === documentModel) {
         store.set(activeDocumentModelAtom, null);

package/src/core/wasm/bridge.ts

@@ -345,14 +345,6 @@ export class PyodideBridge implements RunRequests, EditRequests {
     return response as FormatResponse;
   };
 
-  public sendDeleteCell: EditRequests["sendDeleteCell"] = async (request) => {
-    await this.putControlRequest({
-      type: "delete-cell",
-      ...request,
-    });
-    return null;
-  };
-
   public sendInstallMissingPackages: EditRequests["sendInstallMissingPackages"] =
     async (request) => {
       this.putControlRequest({
@@ -403,14 +395,6 @@ export class PyodideBridge implements RunRequests, EditRequests {
     return null;
   };
 
-  public saveCellConfig: EditRequests["saveCellConfig"] = async (request) => {
-    await this.putControlRequest({
-      type: "update-cell-config",
-      ...request,
-    });
-    return null;
-  };
-
   public sendRestart = async (): Promise<null> => {
     // Save first
     const code = await this.readCode();

package/src/css/globals.css

@@ -55,21 +55,29 @@
     --background: light-dark(hsl(0deg 0% 100%), hsl(150deg 7.7% 10.2%));
     --foreground: light-dark(hsl(222.2deg 47.4% 11.2%), hsl(155deg 7% 93%));
     --muted: light-dark(hsl(210deg 40% 96.1%), hsl(180deg 14% 1%));
-    --muted-foreground: light-dark(hsl(215.4deg 16.3% 46.9%),
-        hsl(155deg 5% 68.3%));
+    --muted-foreground: light-dark(
+      hsl(215.4deg 16.3% 46.9%),
+      hsl(155deg 5% 68.3%)
+    );
     --popover: light-dark(hsl(0deg 0% 100%), hsl(151deg 5.5% 15.2%));
-    --popover-foreground: light-dark(hsl(222.2deg 47.4% 11.2%),
-        hsl(155deg 5% 68.3%));
+    --popover-foreground: light-dark(
+      hsl(222.2deg 47.4% 11.2%),
+      hsl(155deg 5% 68.3%)
+    );
     --card: light-dark(hsl(0deg 0% 100%), hsl(151deg 5.5% 15.2%));
-    --card-foreground: light-dark(hsl(222.2deg 47.4% 11.2%),
-        hsl(155deg 5% 76.3%));
+    --card-foreground: light-dark(
+      hsl(222.2deg 47.4% 11.2%),
+      hsl(155deg 5% 76.3%)
+    );
     --border: light-dark(hsl(214.3deg 31.8% 91.4%), hsl(153deg 3.7% 24.2%));
     --input: light-dark(hsl(0deg 0% 64%), hsl(154deg 3.3% 28.7%));
     --primary: light-dark(hsl(208deg 93.5% 47.4%), hsl(192deg 59.8% 39%));
     --primary-foreground: light-dark(hsl(210deg 40% 98%), hsl(190deg 80% 84%));
     --secondary: light-dark(hsl(210deg 40% 96.1%), hsl(155deg 7% 93%));
-    --secondary-foreground: light-dark(hsl(222.2deg 47.4% 11.2%),
-        hsl(151deg 5.5% 15.2%));
+    --secondary-foreground: light-dark(
+      hsl(222.2deg 47.4% 11.2%),
+      hsl(151deg 5.5% 15.2%)
+    );
     --accent: light-dark(hsl(209deg 100% 96.5%), hsl(192deg 56.6% 26.5%));
     --accent-foreground: light-dark(hsl(211deg 90% 42%), hsl(190deg 80% 84%));
     --ring: hsl(215deg 20.2% 65.1%);
@@ -101,8 +109,10 @@
 
     /* Base shadows. */
     --base-shadow: light-dark(hsl(0deg 0% 85% / 40%), hsla(0deg 0% 36% / 60%));
-    --base-shadow-darker: light-dark(hsl(0deg 0% 50% / 40%),
-        hsl(0deg 0% 50% / 60%));
+    --base-shadow-darker: light-dark(
+      hsl(0deg 0% 50% / 40%),
+      hsl(0deg 0% 50% / 60%)
+    );
     --base-shadow-opacity: 5%;
 
     /* Codemirror editor */
@@ -219,40 +229,64 @@
   --shadow-xxs: 0px 0px 2px 0px var(--base-shadow-darker);
 
   /* oxfmt-ignore: definition needs to be oneline or breaks variants */
-  --shadow-xs: 1px 1px 2px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
+  --shadow-xs:
+    1px 1px 2px 0px var(--base-shadow),
+    0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
 
   /* oxfmt-ignore: definition needs to be oneline or breaks variants */
-  --shadow-sm: 2px 2px 2px 0px var(--base-shadow), 0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
+  --shadow-sm:
+    2px 2px 2px 0px var(--base-shadow),
+    0px 0px 2px 0px hsl(0deg 0% 25% / var(--base-shadow-opacity));
 
   /* oxfmt-ignore: definition needs to be oneline or breaks variants */
-  --shadow-md: 4px 4px 4px 0px var(--base-shadow), 0 0px 4px 0px hsl(0deg 0% 60% / var(--base-shadow-opacity));
+  --shadow-md:
+    4px 4px 4px 0px var(--base-shadow),
+    0 0px 4px 0px hsl(0deg 0% 60% / var(--base-shadow-opacity));
 
   /* oxfmt-ignore: definition needs to be oneline or breaks variants */
-  --shadow-lg: 5px 6px 4px 0px var(--base-shadow), 0 0px 4px 0px hsl(0deg 0% 75% / var(--base-shadow-opacity));
+  --shadow-lg:
+    5px 6px 4px 0px var(--base-shadow),
+    0 0px 4px 0px hsl(0deg 0% 75% / var(--base-shadow-opacity));
 
   /* oxfmt-ignore: definition needs to be oneline or breaks variants */
-  --shadow-xl: 8px 9px 4px 0px var(--base-shadow), 0 0px 6px 0px hsl(0deg 0% 85% / var(--base-shadow-opacity));
+  --shadow-xl:
+    8px 9px 4px 0px var(--base-shadow),
+    0 0px 6px 0px hsl(0deg 0% 85% / var(--base-shadow-opacity));
 
   /* oxfmt-ignore: definition needs to be oneline or breaks variants */
-  --shadow-2xl: 10px 12px 10px 0px var(--base-shadow), 0 0px 8px 0px hsl(0deg 0% 90% / var(--base-shadow-opacity));
+  --shadow-2xl:
+    10px 12px 10px 0px var(--base-shadow),
+    0 0px 8px 0px hsl(0deg 0% 90% / var(--base-shadow-opacity));
 
   /* oxfmt-ignore: definition needs to be oneline or breaks variants */
-  --shadow-xs-solid: 1px 1px 0px 0px var(--base-shadow-darker), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
+  --shadow-xs-solid:
+    1px 1px 0px 0px var(--base-shadow-darker),
+    0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
 
   /* oxfmt-ignore: definition needs to be oneline or breaks variants */
-  --shadow-sm-solid: 2px 2px 0px 0px var(--base-shadow-darker), 0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
+  --shadow-sm-solid:
+    2px 2px 0px 0px var(--base-shadow-darker),
+    0px 0px 2px 0px hsl(0deg 0% 50% / 20%);
 
   /* oxfmt-ignore: definition needs to be oneline or breaks variants */
-  --shadow-md-solid: 4px 4px 0px 0px var(--base-shadow-darker), 0 0px 2px 0px hsl(0deg 0% 60% / 50%);
+  --shadow-md-solid:
+    4px 4px 0px 0px var(--base-shadow-darker),
+    0 0px 2px 0px hsl(0deg 0% 60% / 50%);
 
   /* oxfmt-ignore: definition needs to be oneline or breaks variants */
-  --shadow-lg-solid: 5px 6px 0px 0px var(--base-shadow-darker), 0 0px 4px 0px hsl(0deg 0% 75% / 50%);
+  --shadow-lg-solid:
+    5px 6px 0px 0px var(--base-shadow-darker),
+    0 0px 4px 0px hsl(0deg 0% 75% / 50%);
 
   /* oxfmt-ignore: definition needs to be oneline or breaks variants */
-  --shadow-xl-solid: 7px 8px 0px 0px var(--base-shadow-darker), 0 0px 4px 0px hsl(0deg 0% 85% / 50%);
+  --shadow-xl-solid:
+    7px 8px 0px 0px var(--base-shadow-darker),
+    0 0px 4px 0px hsl(0deg 0% 85% / 50%);
 
   /* oxfmt-ignore: definition needs to be oneline or breaks variants */
-  --shadow-2xl-solid: 10px 12px 0px 0px var(--base-shadow-darker), 0 0px 8px 0px hsl(0deg 0% 90% / 50%);
+  --shadow-2xl-solid:
+    10px 12px 0px 0px var(--base-shadow-darker),
+    0 0px 8px 0px hsl(0deg 0% 90% / 50%);
 
   /* Solid shadows with lighter shade color */
 

package/src/stories/runtime-story.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { Meta } from "@storybook/react-vite";
 import { createStore, Provider, useAtomValue, useStore } from "jotai";
-import { useEffect, useRef, useState } from "react";
+import { createRef, useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { ConnectionNotice } from "@/components/editor/alerts/connection-notice";
 import PackagesPanel from "@/components/editor/chrome/panels/packages-panel";
@@ -13,11 +13,10 @@ import { Cell } from "@/components/editor/notebook-cell";
 import { VerticalLayoutWrapper } from "@/components/editor/renderers/vertical-layout/vertical-layout-wrapper";
 import { alertAtom } from "@/core/alerts/state";
 import type { EnvironmentOperation } from "@/core/alerts/environment";
-import {
-  createNotebookActions,
-  notebookAtom,
-  notebookReducer,
-} from "@/core/cells/cells";
+import { notebookAtom } from "@/core/cells/cells";
+import { CellId } from "@/core/cells/ids";
+import { createCell, createCellRuntimeState } from "@/core/cells/types";
+import { MultiColumn } from "@/utils/id-tree";
 import { userConfigAtom } from "@/core/config/config";
 import {
   type AppConfig,
@@ -349,15 +348,23 @@ export function RuntimeStory(props: Props) {
       log_mode: "replace",
     });
     if (props.existingCells) {
-      const actions = createNotebookActions((action) =>
-        state.set(notebookAtom, (value) => notebookReducer(value, action)),
-      );
-      actions.createNewCell({
-        cellId: "__end__",
-        before: false,
-        code: 'import polars as pl\n\ntrips = pl.read_csv("bike_trips.csv")\ntrips.head()',
-        autoFocus: false,
-      });
+      const cellId = CellId.create();
+      state.set(notebookAtom, (value) => ({
+        ...value,
+        cellIds: MultiColumn.from([[cellId]]),
+        cellData: {
+          ...value.cellData,
+          [cellId]: createCell({
+            id: cellId,
+            code: 'import polars as pl\n\ntrips = pl.read_csv("bike_trips.csv")\ntrips.head()',
+          }),
+        },
+        cellRuntime: {
+          ...value.cellRuntime,
+          [cellId]: createCellRuntimeState(),
+        },
+        cellHandles: { ...value.cellHandles, [cellId]: createRef() },
+      }));
     }
     state.set(requestClientAtom, {
       ...createStaticRequests(),