@marimo-team/frontend 0.24.1-dev80 → 0.24.1-dev82

package/src/core/kernel/handlers.ts

@@ -1,5 +1,4 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { deserializeLayout } from "@/components/editor/renderers/plugins";
 import type { LayoutType } from "@/components/editor/renderers/types";
 import { Logger } from "@/utils/Logger";
 import { Objects } from "@/utils/objects";
@@ -7,11 +6,8 @@ import type { UIElementId } from "../cells/ids";
 import { type CellData, createCell } from "../cells/types";
 import { type AppConfig, AppConfigSchema } from "../config/config-schema";
 import { UI_ELEMENT_REGISTRY } from "../dom/uiregistry";
-import {
-  initialLayoutState,
-  type LayoutData,
-  type LayoutState,
-} from "../layout/layout";
+import { deserializeLayoutState } from "../layout/layout";
+import type { LayoutData, LayoutState } from "../layout/state";
 import { getRequestClient } from "../network/requests";
 import { VirtualFileTracker } from "../static/virtual-file-tracker";
 import type {
@@ -69,19 +65,14 @@ export function buildLayoutState(
     data: LayoutData;
   }) => void,
 ): LayoutState {
-  const layoutState = initialLayoutState();
   const { layout } = data;
+  const layoutState = deserializeLayoutState(layout, cells);
 
-  if (layout) {
-    const layoutType = layout.type as LayoutType;
-    const layoutData = deserializeLayout({
-      type: layoutType,
-      data: layout.data,
-      cells,
+  if (layout && layout.type === layoutState.selectedLayout) {
+    setLayoutData({
+      layoutView: layoutState.selectedLayout,
+      data: layoutState.layoutData[layoutState.selectedLayout],
     });
-    layoutState.selectedLayout = layoutType;
-    layoutState.layoutData[layoutType] = layoutData;
-    setLayoutData({ layoutView: layoutType, data: layoutData });
   }
 
   return layoutState;

package/src/core/kernel/state.ts

@@ -12,6 +12,8 @@ export const kernelStateAtom = atom<KernelState>({
   error: null,
 });
 
+export const initialRunCompletedAtom = atom(false);
+
 export function waitForKernelToBeInstantiated(): Promise<KernelState> {
   return waitFor(kernelStateAtom, (value) => value.isInstantiated);
 }

package/src/core/layout/__tests__/layout.test.ts

@@ -0,0 +1,95 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { beforeEach, describe, expect, it } from "vitest";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { cellId } from "@/__tests__/branded";
+import { notebookAtom } from "@/core/cells/cells";
+import { store } from "@/core/state/jotai";
+import { getSerializedLayout } from "../layout";
+import {
+  initialLayoutState,
+  layoutStateAtom,
+  resolveLayoutType,
+  selectLayout,
+} from "../state";
+
+describe("layout state", () => {
+  it("falls back to vertical for an unknown layout type", () => {
+    expect(initialLayoutState({ type: "unknown", data: {} })).toEqual({
+      selectedLayout: "vertical",
+      layoutData: {},
+    });
+  });
+
+  it("preserves pending data until a different layout is selected", () => {
+    const state = initialLayoutState({
+      type: "slides",
+      data: { deck: { transition: "fade" } },
+    });
+
+    expect(selectLayout(state, "slides")).toBe(state);
+    expect(selectLayout(state, "grid")).toEqual({
+      selectedLayout: "grid",
+      layoutData: {},
+    });
+  });
+
+  it.each([
+    { isReading: true, expected: "slides" },
+    { isReading: false, expected: "vertical" },
+  ] as const)(
+    "returns $expected when read mode is $isReading",
+    ({ isReading, expected }) => {
+      expect(
+        resolveLayoutType({
+          selectedLayout: "vertical",
+          isReading,
+          searchParams: new URLSearchParams("view-as=slides"),
+        }),
+      ).toBe(expected);
+    },
+  );
+});
+
+describe("getSerializedLayout", () => {
+  beforeEach(() => {
+    store.set(layoutStateAtom, initialLayoutState());
+    store.set(
+      notebookAtom,
+      MockNotebook.notebookState({
+        cellData: {
+          [cellId("cell-1")]: { code: "first = 1" },
+          [cellId("cell-2")]: { code: "second = 2" },
+        },
+      }),
+    );
+  });
+
+  it("preserves a pending embedded layout when edit mode saves", () => {
+    const layout = {
+      type: "slides",
+      data: {
+        cells: [
+          { type: "slide", speakerNotes: "Introduce the result" },
+          { type: "fragment" },
+        ],
+        deck: { transition: "fade", verticalAlign: "center" },
+      },
+    };
+    store.set(layoutStateAtom, initialLayoutState(layout));
+
+    expect(getSerializedLayout()).toEqual(layout);
+  });
+
+  it("uses the initial layout when materialized data is null", () => {
+    store.set(layoutStateAtom, {
+      selectedLayout: "slides",
+      layoutData: { slides: null },
+    });
+
+    expect(getSerializedLayout()).toEqual({
+      type: "slides",
+      data: { cells: [{}, {}], deck: {} },
+    });
+  });
+});

package/src/core/layout/layout.ts

@@ -1,89 +1,86 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { useAtomValue } from "jotai";
-import type { GridLayout } from "@/components/editor/renderers/grid-layout/types";
-import { cellRendererPlugins } from "@/components/editor/renderers/plugins";
-import type { LayoutType } from "@/components/editor/renderers/types";
-import { createReducerAndAtoms } from "@/utils/createReducer";
+import {
+  cellRendererPlugins,
+  deserializeLayout,
+} from "@/components/editor/renderers/plugins";
+import type { ICellRendererPlugin } from "@/components/editor/renderers/types";
 import { Logger } from "@/utils/Logger";
 import { getNotebook } from "../cells/cells";
+import type { CellData } from "../cells/types";
 import { notebookCells } from "../cells/utils";
 import { store } from "../state/jotai";
+import {
+  initialLayoutState,
+  layoutStateAtom,
+  type LayoutState,
+  type SerializedLayout,
+} from "./state";
 
-export type LayoutData = GridLayout | undefined;
+export function deserializeLayoutState(
+  layout: SerializedLayout | null | undefined,
+  cells: CellData[],
+): LayoutState {
+  if (layout == null) {
+    return initialLayoutState();
+  }
 
-export interface LayoutState {
-  selectedLayout: LayoutType;
-  layoutData: Partial<Record<LayoutType, LayoutData>>;
-}
+  const plugin = cellRendererPlugins.find(
+    (candidate) => candidate.type === layout.type,
+  );
+  if (plugin === undefined) {
+    Logger.warn(`Unknown layout type: ${layout.type}`);
+    return initialLayoutState();
+  }
 
-export function initialLayoutState(): LayoutState {
   return {
-    selectedLayout: "vertical",
-    layoutData: {},
+    selectedLayout: plugin.type,
+    layoutData: {
+      [plugin.type]: deserializeLayout({
+        type: plugin.type,
+        data: layout.data,
+        cells,
+      }),
+    },
   };
 }
 
-const { valueAtom: layoutStateAtom, useActions } = createReducerAndAtoms(
-  initialLayoutState,
-  {
-    setLayoutView: (state, payload: LayoutType) => {
-      return {
-        ...state,
-        selectedLayout: payload,
-      };
-    },
-    setLayoutData: (
-      state,
-      payload: { layoutView: LayoutType; data: LayoutData },
-    ) => {
-      return {
-        ...state,
-        selectedLayout: payload.layoutView,
-        layoutData: {
-          ...state.layoutData,
-          [payload.layoutView]: payload.data,
-        },
-      };
-    },
-    setCurrentLayoutData: (state, payload: LayoutData) => {
-      return {
-        ...state,
-        layoutData: {
-          ...state.layoutData,
-          [state.selectedLayout]: payload,
-        },
-      };
-    },
-  },
-);
-
-export { layoutStateAtom };
-
-export const useLayoutState = () => {
-  return useAtomValue(layoutStateAtom);
-};
-
-export const useLayoutActions = () => {
-  return useActions();
-};
+export function resolveLayoutData<S, L>({
+  state,
+  plugin,
+  cells,
+}: {
+  state: LayoutState;
+  plugin: ICellRendererPlugin<S, L>;
+  cells: CellData[];
+}): L {
+  const materialized = state.layoutData[plugin.type];
+  if (materialized != null) {
+    return materialized as L;
+  }
+  if (state.pendingLayout?.type === plugin.type) {
+    return deserializeLayout({
+      type: plugin.type,
+      data: state.pendingLayout.data,
+      cells,
+    }) as L;
+  }
+  return plugin.getInitialLayout(cells);
+}
 
 /**
  * Get the serialized layout data, to be used when saving.
  */
 export function getSerializedLayout() {
   const notebook = getNotebook();
-  const { layoutData, selectedLayout } = store.get(layoutStateAtom);
+  const layoutState = store.get(layoutStateAtom);
+  const { selectedLayout } = layoutState;
 
   // Vertical layout has no data, as it is the default.
   if (selectedLayout === "vertical") {
     return null;
   }
 
-  if (layoutData === undefined) {
-    return null;
-  }
-
   const plugin = cellRendererPlugins.find(
     (plugin) => plugin.type === selectedLayout,
   );
@@ -92,10 +89,7 @@ export function getSerializedLayout() {
     return null;
   }
   const cells = notebookCells(notebook);
-  // Fall back to the plugin's initial layout when the user has not yet
-  // interacted with this layout — otherwise serializers that expect a
-  // structured layout object crash on `undefined`.
-  const data = layoutData[selectedLayout] ?? plugin.getInitialLayout(cells);
+  const data = resolveLayoutData({ state: layoutState, plugin, cells });
   return {
     type: selectedLayout,
     data: plugin.serializeLayout(data, cells),

package/src/core/layout/state.ts

@@ -0,0 +1,121 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import type { GridLayout } from "@/components/editor/renderers/grid-layout/types";
+import type { SlidesLayout } from "@/components/editor/renderers/slides-layout/types";
+import {
+  type LayoutType,
+  isLayoutType,
+  OVERRIDABLE_LAYOUT_TYPES,
+} from "@/components/editor/renderers/types";
+import { KnownQueryParams } from "@/core/constants";
+import { createReducerAndAtoms } from "@/utils/createReducer";
+import { isRecord } from "@/utils/records";
+
+export type LayoutData = GridLayout | SlidesLayout | null | undefined;
+
+export interface SerializedLayout {
+  type: string;
+  data: unknown;
+}
+
+export function isSerializedLayout(value: unknown): value is SerializedLayout {
+  return isRecord(value) && typeof value.type === "string" && "data" in value;
+}
+
+interface LayoutStateBase {
+  selectedLayout: LayoutType;
+  layoutData: Partial<Record<LayoutType, LayoutData>>;
+}
+
+export type LayoutState =
+  | (LayoutStateBase & { pendingLayout: SerializedLayout })
+  | (LayoutStateBase & { pendingLayout?: never });
+
+export function initialLayoutState(
+  serializedLayout?: SerializedLayout,
+): LayoutState {
+  if (serializedLayout && isLayoutType(serializedLayout.type)) {
+    return {
+      selectedLayout: serializedLayout.type,
+      layoutData: {},
+      pendingLayout: serializedLayout,
+    };
+  }
+  return {
+    selectedLayout: "vertical",
+    layoutData: {},
+  };
+}
+
+export function selectLayout(
+  state: LayoutState,
+  selectedLayout: LayoutType,
+): LayoutState {
+  if (selectedLayout === state.selectedLayout) {
+    return state;
+  }
+  const { pendingLayout: _pendingLayout, ...materializedState } = state;
+  return { ...materializedState, selectedLayout };
+}
+
+const { valueAtom: layoutStateAtom, useActions } = createReducerAndAtoms(
+  initialLayoutState,
+  {
+    setLayoutView: selectLayout,
+    setLayoutData: (
+      { pendingLayout: _pendingLayout, ...state },
+      payload: { layoutView: LayoutType; data: LayoutData },
+    ) => {
+      return {
+        ...state,
+        selectedLayout: payload.layoutView,
+        layoutData: {
+          ...state.layoutData,
+          [payload.layoutView]: payload.data,
+        },
+      };
+    },
+    setCurrentLayoutData: (
+      { pendingLayout: _pendingLayout, ...state },
+      payload: LayoutData,
+    ) => {
+      return {
+        ...state,
+        layoutData: {
+          ...state.layoutData,
+          [state.selectedLayout]: payload,
+        },
+      };
+    },
+  },
+);
+
+export { layoutStateAtom };
+
+export const useLayoutState = () => {
+  return useAtomValue(layoutStateAtom);
+};
+
+export const useLayoutActions = () => {
+  return useActions();
+};
+
+export function resolveLayoutType({
+  selectedLayout,
+  isReading,
+  searchParams,
+}: {
+  selectedLayout: LayoutType;
+  isReading: boolean;
+  searchParams: URLSearchParams;
+}): LayoutType {
+  if (!isReading) {
+    return selectedLayout;
+  }
+  const requested = searchParams.get(KnownQueryParams.viewAs);
+  return (
+    OVERRIDABLE_LAYOUT_TYPES.find((layout) => layout === requested) ??
+    selectedLayout
+  );
+}

package/src/core/meta/__tests__/code-visibility.test.tsx

@@ -6,23 +6,32 @@ import type { ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { showCodeInRunModeAtom } from "@/core/meta/state";
 import { type AppMode, kioskModeAtom, viewStateAtom } from "@/core/mode";
+import {
+  remoteAdapter,
+  runtimeAdapterAtom,
+  staticAdapter,
+  type RuntimeAdapter,
+} from "@/core/runtime/adapter";
 import { useNotebookCodeAvailable } from "../code-visibility";
 
 interface StoreOpts {
   mode?: AppMode;
   kiosk?: boolean;
   showInRunMode?: boolean;
+  runtime?: RuntimeAdapter;
 }
 
 function makeStore({
   mode = "read",
   kiosk = false,
   showInRunMode = true,
+  runtime = remoteAdapter,
 }: StoreOpts = {}) {
   const store = createStore();
   store.set(viewStateAtom, { mode, cellAnchor: null });
   store.set(kioskModeAtom, kiosk);
   store.set(showCodeInRunModeAtom, showInRunMode);
+  store.set(runtimeAdapterAtom, runtime);
   return store;
 }
 
@@ -128,6 +137,25 @@ describe("useNotebookCodeAvailable", () => {
     expect(result.current).toBe(true);
   });
 
+  it("checks embedded code in a static kiosk", () => {
+    const store = makeStore({
+      mode: "read",
+      kiosk: true,
+      runtime: staticAdapter,
+    });
+
+    const withoutCode = renderHook(
+      () => useNotebookCodeAvailable(cellsWithoutCode),
+      { wrapper: wrap(store) },
+    );
+    const withCode = renderHook(() => useNotebookCodeAvailable(cellsWithCode), {
+      wrapper: wrap(store),
+    });
+
+    expect(withoutCode.result.current).toBe(false);
+    expect(withCode.result.current).toBe(true);
+  });
+
   it("returns false for non-edit/non-read modes (home, gallery)", () => {
     for (const mode of ["home", "gallery"] as const) {
       const store = makeStore({ mode });

package/src/core/meta/code-visibility.ts

@@ -4,6 +4,7 @@ import { useAtomValue } from "jotai";
 import { KnownQueryParams } from "@/core/constants";
 import { showCodeInRunModeAtom } from "@/core/meta/state";
 import { kioskModeAtom, viewStateAtom } from "@/core/mode";
+import { runtimeAdapterAtom } from "@/core/runtime/adapter";
 import { logNever } from "@/utils/assertNever";
 
 /**
@@ -19,8 +20,9 @@ export function useNotebookCodeAvailable(
   const kioskMode = useAtomValue(kioskModeAtom);
   const { mode } = useAtomValue(viewStateAtom);
   const showInRunMode = useAtomValue(showCodeInRunModeAtom);
+  const runtimeKind = useAtomValue(runtimeAdapterAtom).kind;
 
-  if (kioskMode) {
+  if (kioskMode && runtimeKind === "remote") {
     return true;
   }
 

package/src/core/run-app.tsx

@@ -25,6 +25,7 @@ import { useMarimoKernelConnection } from "./websocket/useMarimoKernelConnection
 
 interface AppProps {
   appConfig: AppConfig;
+  hideHeader?: boolean;
 }
 
 /**
@@ -37,7 +38,7 @@ const canPaintRunAppAtom = atom(
   (get) => get(hasCellsAtom) || !isAppConnecting(get(connectionAtom).state),
 );
 
-export const RunApp: React.FC<AppProps> = ({ appConfig }) => {
+export const RunApp: React.FC<AppProps> = ({ appConfig, hideHeader }) => {
   const { setCells } = useCellActions();
   const { sendComponentValues } = useRequestClient();
 
@@ -77,7 +78,10 @@ export const RunApp: React.FC<AppProps> = ({ appConfig }) => {
       width={appConfig.width}
       onReconnect={reconnect}
     >
-      <AppHeader connection={connection} className="sm:pt-8">
+      <AppHeader
+        connection={connection}
+        className={hideHeader ? "hidden" : "sm:pt-8"}
+      >
         {galleryHref && (
           <div className="flex items-center px-6 pt-4 sm:-mt-8">
             <a

package/src/core/saving/__tests__/save-component.test.ts

@@ -1,7 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { describe, expect, it } from "vitest";
-import { isNamedPersistentFile } from "../save-component";
+import { Deferred } from "@/utils/Deferred";
+import { enqueueNotebookSave, isNamedPersistentFile } from "../save-component";
 
 describe("isNamedPersistentFile", () => {
   it.each([
@@ -18,3 +19,32 @@ describe("isNamedPersistentFile", () => {
     expect(isNamedPersistentFile(filename)).toBe(expected);
   });
 });
+
+describe("enqueueNotebookSave", () => {
+  it("serializes snapshots across callers and continues after a failure", async () => {
+    const firstStarted = new Deferred<void>();
+    const releaseFirst = new Deferred<void>();
+    const snapshots: string[] = [];
+    let current = "first";
+
+    const first = enqueueNotebookSave(async () => {
+      snapshots.push(current);
+      firstStarted.resolve();
+      await releaseFirst.promise;
+      throw new Error("save failed");
+    });
+    await firstStarted.promise;
+
+    current = "queued";
+    const second = enqueueNotebookSave(async () => {
+      snapshots.push(current);
+    });
+    current = "latest";
+
+    expect(snapshots).toEqual(["first"]);
+    releaseFirst.resolve();
+    await expect(first).rejects.toThrow("save failed");
+    await second;
+    expect(snapshots).toEqual(["first", "latest"]);
+  });
+});

package/src/core/saving/save-component.tsx

@@ -21,11 +21,13 @@ import { Label } from "../../components/ui/label";
 import { useEvent } from "../../hooks/useEvent";
 import { Logger } from "../../utils/Logger";
 import { getCellConfigs, getNotebook, useNotebook } from "../cells/cells";
+import { withDocumentSave } from "../cells/document-changes";
 import { notebookCells } from "../cells/utils";
 import { formatAll } from "../codemirror/format";
 import { autoSaveConfigAtom } from "../config/config";
 import { useAutoExport } from "../export/hooks";
-import { getSerializedLayout, layoutStateAtom } from "../layout/layout";
+import { getSerializedLayout } from "../layout/layout";
+import { layoutStateAtom } from "../layout/state";
 import { kioskModeAtom } from "../mode";
 import { connectionAtom } from "../network/connection";
 import { useRequestClient } from "../network/requests";
@@ -39,6 +41,17 @@ interface SaveNotebookProps {
   kioskMode: boolean;
 }
 
+let notebookSaveQueue: Promise<void> = Promise.resolve();
+
+export function enqueueNotebookSave<T>(save: () => Promise<T>): Promise<T> {
+  const result = notebookSaveQueue.then(save);
+  notebookSaveQueue = result.then(
+    () => undefined,
+    () => undefined,
+  );
+  return result;
+}
+
 export const SaveComponent = ({ kioskMode }: SaveNotebookProps) => {
   const filename = useFilename();
   const needsSave = useAtomValue(needsSaveAtom);
@@ -96,8 +109,8 @@ export function useSaveNotebook() {
   const store = useStore();
 
   // Save the notebook with the given filename
-  const saveNotebook = useEvent(
-    async (filename: string, userInitiated: boolean) => {
+  const saveNotebook = useEvent((filename: string, userInitiated: boolean) =>
+    enqueueNotebookSave(async () => {
       const connection = store.get(connectionAtom);
       const autoSaveConfig = store.get(autoSaveConfigAtom);
       const kioskMode = store.get(kioskModeAtom);
@@ -119,37 +132,34 @@ export function useSaveNotebook() {
         await formatAll();
       }
 
-      // Grab the latest notebook state, after formatting
-      const notebook = getNotebook();
-      const cells = notebookCells(notebook);
-      const cellIds = cells.map((cell) => cell.id);
-      const codes = cells.map((cell) => cell.code);
-      const cellNames = cells.map((cell) => cell.name);
-      const configs = getCellConfigs(notebook);
-      const layout = store.get(layoutStateAtom);
-
-      // Don't save if there are no cells
-      if (codes.length === 0) {
+      if (notebookCells(getNotebook()).length === 0) {
         return;
       }
 
-      await sendSave({
-        cellIds: cellIds,
-        codes,
-        names: cellNames,
-        filename,
-        configs,
-        layout: getSerializedLayout(),
-        persist: true,
-      });
+      const savedNotebook = await withDocumentSave(async () => {
+        // Grab the latest notebook state after formatting and after every
+        // earlier document transaction has reached the server.
+        const notebook = getNotebook();
+        const cells = notebookCells(notebook);
+        const cellIds = cells.map((cell) => cell.id);
+        const codes = cells.map((cell) => cell.code);
+        const cellNames = cells.map((cell) => cell.name);
+        const configs = getCellConfigs(notebook);
+        const layout = store.get(layoutStateAtom);
 
-      setLastSavedNotebook({
-        names: cellNames,
-        codes,
-        configs,
-        layout,
+        await sendSave({
+          cellIds: cellIds,
+          codes,
+          names: cellNames,
+          filename,
+          configs,
+          layout: getSerializedLayout(),
+          persist: true,
+        });
+        return { names: cellNames, codes, configs, layout };
       });
-    },
+      setLastSavedNotebook(savedNotebook);
+    }),
   );
 
   // Save the notebook with the current filename, only if the filename exists