@marimo-team/islands 0.25.3-dev192 → 0.25.3-dev196

package/package.json

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

package/src/__mocks__/notebook.ts

@@ -54,7 +54,6 @@ export const MockNotebook = {
       cellLogs: [],
       history: [],
       scrollKey: null,
-      untouchedNewCells: new Set(),
     };
   },
 

package/src/__mocks__/partial.ts

@@ -0,0 +1,26 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+/**
+ * A partial mock of `T` that throws when a member the test did not provide
+ * is read, so a test cannot silently depend on an undefined field.
+ */
+export function partial<T extends object>(
+  members: Partial<T>,
+  name = "mock",
+): T {
+  return new Proxy(members as T, {
+    get(target, key, receiver) {
+      // Only the members the test gave count as provided, not those every
+      // object inherits. Promise detection and well-known symbols may probe
+      // any object.
+      if (
+        Object.hasOwn(target, key) ||
+        typeof key === "symbol" ||
+        key === "then"
+      ) {
+        return Reflect.get(target, key, receiver);
+      }
+      throw new Error(`${name}.${String(key)} is not implemented in this test`);
+    },
+  });
+}

package/src/__tests__/main.test.tsx

@@ -10,8 +10,11 @@ import {
 import {
   appConfigAtom,
   configOverridesAtom,
+  pageAppConfigAtom,
   userConfigAtom,
 } from "../core/config/config";
+import { exportedForTesting, notebookAtom } from "../core/cells/cells";
+import { SCRATCH_CELL_ID } from "../core/cells/ids";
 import { marimoVersionAtom, showCodeInRunModeAtom } from "../core/meta/state";
 import { type AppMode, viewStateAtom } from "../core/mode";
 import { codeAtom, filenameAtom } from "../core/saving/file-state";
@@ -40,7 +43,8 @@ describe("main", () => {
     store.set(filenameAtom, null);
     store.set(showCodeInRunModeAtom, false);
     store.set(marimoVersionAtom, "unknown");
-    store.set(appConfigAtom, parseAppConfig({}));
+    store.set(notebookAtom, exportedForTesting.initialNotebookState());
+    store.set(pageAppConfigAtom, {});
     store.set(userConfigAtom, defaultUserConfig());
     store.set(configOverridesAtom, {});
   });
@@ -99,6 +103,25 @@ describe("main", () => {
     expect(store.get(viewStateAtom).mode).toBe("edit");
   });
 
+  it("seeds runtime from a session snapshot without dropping the scratch cell", () => {
+    const el = document.createElement("div");
+    const error = mount(
+      {
+        mode: "edit",
+        session: {
+          version: "1",
+          metadata: { marimo_version: "1", script_metadata_hash: null },
+          cells: [{ id: "cell-1", code_hash: null, console: [], outputs: [] }],
+        },
+      },
+      el,
+    );
+    expect(error).toBeUndefined();
+    const { cellRuntime } = store.get(notebookAtom);
+    expect(cellRuntime["cell-1" as never]).toBeDefined();
+    expect(cellRuntime[SCRATCH_CELL_ID]).toBeDefined();
+  });
+
   it("should mount with empty config", () => {
     const el = document.createElement("div");
     const error = mount(

package/src/components/app-config/app-config-form.tsx

@@ -37,7 +37,7 @@ import {
 const FORM_DEBOUNCE = 100; // ms;
 
 export const AppConfigForm: React.FC = () => {
-  const [config, setConfig] = useAppConfig();
+  const config = useAppConfig();
   const { saveAppConfig } = useRequestClient();
   const htmlCheckboxId = useId();
   const ipynbCheckboxId = useId();
@@ -50,18 +50,14 @@ export const AppConfigForm: React.FC = () => {
     defaultValues: config,
   });
 
+  // The host document carries the saved config back.
   const onSubmit = async (values: AppConfig) => {
-    await saveAppConfig({ config: values })
-      .then(() => {
-        setConfig(values);
-      })
-      .catch(() => {
-        setConfig(values);
-      });
+    await saveAppConfig({ config: values });
   };
 
   const debouncedSubmit = useDebouncedCallback((v: AppConfig) => {
-    onSubmit(v);
+    // The request client reports a failed save, so nothing is left to handle.
+    onSubmit(v).catch(() => undefined);
   }, FORM_DEBOUNCE);
 
   // When width is changed, dispatch a resize event so widgets know to resize

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

@@ -94,7 +94,6 @@ describe("Cell data attributes", () => {
             code: "",
             name: cellName,
             edited: false,
-            serializedEditorState: null,
             config: {
               disabled: false,
               hide_code: false,

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

@@ -41,7 +41,6 @@ function seedNotebook(
         code: "1 + 1",
         name: "test_cell",
         edited: false,
-        serializedEditorState: null,
         config: {
           disabled: false,
           hide_code: false,

package/src/components/editor/actions/useCellActionButton.tsx

@@ -39,6 +39,7 @@ import { aiCompletionCellAtom } from "@/core/ai/state";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { hasOnlyOneCellAtom } from "@/core/cells/cells";
 import { useCellActions } from "@/core/cells/actions";
+import { showHiddenCodeAtom } from "@/core/cells/editor";
 import { type CellId, SETUP_CELL_ID } from "@/core/cells/ids";
 import { useNotebookDocumentEdit } from "@/core/notebook/document";
 import type { CellData } from "@/core/cells/types";
@@ -54,8 +55,8 @@ import {
   appWidthAtom,
   autoInstantiateAtom,
 } from "@/core/config/config";
-import { kioskModeAtom } from "@/core/mode";
 import type { CellConfig, RuntimeState } from "@/core/network/types";
+import { canEditAtom } from "@/core/notebook";
 import { canLinkToCell, createCellLink } from "@/utils/cell-urls";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadCellOutputAsImage } from "@/utils/download";
@@ -89,9 +90,9 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
     sendToBottom,
     addColumnBreakpoint,
     clearCellOutput,
-    markUntouched,
     createCell,
   } = useCellActions();
+  const showHiddenCode = useSetAtom(showHiddenCodeAtom);
   const edit = useNotebookDocumentEdit();
   const splitCell = useSplitCellCallback();
   const runCell = useRunCell(cell?.cellId);
@@ -102,10 +103,10 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
   const setAiCompletionCell = useSetAtom(aiCompletionCellAtom);
   const aiFeaturesEnabled = useAtomValue(aiFeaturesEnabledAtom);
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
-  const kioskMode = useAtomValue(kioskModeAtom);
+  const canEdit = useAtomValue(canEditAtom);
   const appWidth = useAtomValue(appWidthAtom);
 
-  if (!cell || kioskMode) {
+  if (!cell || !canEdit) {
     return [];
   }
 
@@ -229,7 +230,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
                 hide_code: MARKDOWN_INITIAL_HIDE_CODE,
               }),
             );
-            markUntouched({ cellId });
+            showHiddenCode({ cellId });
           }
         },
         hidden: isSetupCell,

package/src/components/editor/actions/useConfigActions.tsx

@@ -8,7 +8,7 @@ import type { ActionButton } from "./types";
 
 export function useConfigActions() {
   const [config, setConfig] = useResolvedMarimoConfig();
-  const [appConfig, setAppConfig] = useAppConfig();
+  const appConfig = useAppConfig();
   const { saveAppConfig, saveUserConfig } = useRequestClient();
 
   const handleUserConfig = async (values: Partial<UserConfig>) => {
@@ -17,10 +17,9 @@ export function useConfigActions() {
     });
   };
 
+  // The host document carries the saved config back.
   const handleAppConfig = async (values: AppConfig) => {
-    await saveAppConfig({ config: values }).then(() => {
-      setAppConfig(values);
-    });
+    await saveAppConfig({ config: values });
   };
 
   const actions: ActionButton[] = [

package/src/components/editor/actions/useNotebookActions.tsx

@@ -65,13 +65,14 @@ import {
 } from "@/core/cells/cells";
 import { useCellActions } from "@/core/cells/actions";
 import { useNotebookDocumentEdit } from "@/core/notebook/document";
+import { canEditAtom } from "@/core/notebook";
 import { disabledCellIds } from "@/core/cells/utils";
 import { capabilitiesAtom } from "@/core/config/capabilities";
 import { aiEnabledAtom, useResolvedMarimoConfig } from "@/core/config/config";
 import { Constants } from "@/core/constants";
 import { useLayoutActions, useLayoutState } from "@/core/layout/state";
 import { useTogglePresenting } from "@/core/layout/useTogglePresenting";
-import { kioskModeAtom, viewStateAtom } from "@/core/mode";
+import { viewStateAtom } from "@/core/mode";
 import { useRequestClient } from "@/core/network/requests";
 import { useFilename } from "@/core/saving/filename";
 import { createShareableLink } from "@/core/wasm/share";
@@ -119,7 +120,7 @@ export function useNotebookActions({
   const { toggleApplication } = useChromeActions();
   const { selectedPanel } = useChromeState();
   const [viewState] = useAtom(viewStateAtom);
-  const kioskMode = useAtomValue(kioskModeAtom);
+  const canEdit = useAtomValue(canEditAtom);
   const setCodeVisibility = useSetCodeVisibility();
   const setOutputsExpanded = useSetOutputsExpanded();
   const [resolvedConfig] = useResolvedMarimoConfig();
@@ -448,7 +449,7 @@ export function useNotebookActions({
     {
       icon: <ZapIcon size={14} strokeWidth={1.5} />,
       label: "Enable all cells",
-      hidden: !hasDisabledCells || kioskMode,
+      hidden: !hasDisabledCells || !canEdit,
       handle: () => {
         const ids = disabledCellIds(getNotebook());
         edit((tx) => {
@@ -538,7 +539,7 @@ export function useNotebookActions({
     {
       icon: <Undo2Icon size={14} strokeWidth={1.5} />,
       label: undoLabel,
-      hidden: !canUndoDeletes || kioskMode,
+      hidden: !canUndoDeletes || !canEdit,
       handle: () => {
         undoDeleteCell();
       },

package/src/components/editor/cell/code/cell-editor.tsx

@@ -3,7 +3,7 @@ import { historyField } from "@codemirror/commands";
 import { EditorState, type Extension, StateEffect } from "@codemirror/state";
 import { EditorView, ViewPlugin } from "@codemirror/view";
 import { useIntersectionObserver } from "@uidotdev/usehooks";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import React, { memo, useEffect, useMemo, useRef, useState } from "react";
 import useEvent from "react-use-event-hook";
 import { Button } from "@/components/ui/button";
@@ -12,6 +12,11 @@ import { aiCompletionCellAtom } from "@/core/ai/state";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { getNotebook } from "@/core/cells/cells";
 import { useCellActions } from "@/core/cells/actions";
+import {
+  showHiddenCodeAtom,
+  takeRestoredEditorStateAtom,
+  useRestoredEditorState,
+} from "@/core/cells/editor";
 import { useNotebookDocumentEdit } from "@/core/notebook/document";
 import { SETUP_CELL_ID } from "@/core/cells/ids";
 import { usePendingDeleteService } from "@/core/cells/pending-delete-service";
@@ -58,7 +63,7 @@ import { LanguageToggles } from "./language-toggle";
 export interface CellEditorProps
   extends
     Pick<CellRuntimeState, "status">,
-    Pick<CellData, "id" | "code" | "serializedEditorState" | "config"> {
+    Pick<CellData, "id" | "code" | "config"> {
   runCell: () => void;
   theme: Theme;
   showPlaceholder: boolean;
@@ -116,7 +121,6 @@ const CellEditorInternal = ({
   config: cellConfig,
   code,
   status,
-  serializedEditorState,
   setEditorView,
   runCell,
   userConfig,
@@ -133,6 +137,9 @@ const CellEditorInternal = ({
   tooltipParentSelector,
 }: CellEditorProps) => {
   const [aiCompletionCell, setAiCompletionCell] = useAtom(aiCompletionCellAtom);
+  const serializedEditorState = useRestoredEditorState(cellId);
+  const takeRestoredEditorState = useSetAtom(takeRestoredEditorStateAtom);
+  const showHiddenCodeNow = useSetAtom(showHiddenCodeAtom);
   const deleteCell = useDeleteCellCallback();
   const { saveOrNameNotebook } = useSaveNotebook();
   const pendingDeleteService = usePendingDeleteService();
@@ -192,7 +199,7 @@ const CellEditorInternal = ({
       edit((tx) =>
         tx.updateConfig(cellId, { hide_code: MARKDOWN_INITIAL_HIDE_CODE }),
       );
-      cellActions.markUntouched({ cellId });
+      showHiddenCodeNow({ cellId });
     }
   });
 
@@ -422,8 +429,8 @@ const CellEditorInternal = ({
       });
     }
     setEditorView(ev);
-    // Clear the serialized state so that we don't re-create the editor next time
-    cellActions.clearSerializedEditorState({ cellId });
+    // The restored state is used once; the next mount builds a fresh editor.
+    takeRestoredEditorState({ cellId });
   });
   const [isEditorMounted, setIsEditorMounted] = useState(
     serializedEditorState !== null,

package/src/components/editor/cell/collapse.tsx

@@ -14,6 +14,7 @@ import { Toolbar } from "@/components/layout/toolbar";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { useNotebook } from "@/core/cells/cells";
+import { columnOf, useLayout } from "@/core/cells/layout";
 import type { CellId } from "@/core/cells/ids";
 import { getDescendantsStatus } from "@/core/cells/utils";
 import { cn } from "@/utils/cn";
@@ -64,7 +65,11 @@ export const CollapsedCellBanner: React.FC<{
   count: number;
 }> = memo(({ onClick, count, cellId }) => {
   const notebook = useNotebook();
-  const states = getDescendantsStatus(notebook, cellId);
+  const layout = useLayout();
+  const states = getDescendantsStatus(
+    notebook,
+    columnOf(layout, cellId).folds.get(cellId) ?? [],
+  );
 
   return (
     <button

package/src/components/editor/chrome/components/feedback-button.tsx

@@ -18,7 +18,6 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Skeleton } from "@/components/ui/skeleton";
-import { notebookAtom } from "@/core/cells/cells";
 import { Constants } from "@/core/constants";
 import {
   buildBugReportUrl,
@@ -116,13 +115,8 @@ export const FeedbackModal: React.FC<{
     return requestClient.getEnvironmentInfo();
   }, [requestClient]);
 
-  const notebook = useAtomValue(notebookAtom);
   const errors = getCellErrorEntries(store);
-
-  const cells = notebook.cellIds.inOrderIds.map(
-    (cellId) => notebook.cellData[cellId],
-  );
-  const codeAvailable = useNotebookCodeAvailable(cells);
+  const codeAvailable = useNotebookCodeAvailable();
   const filename = useAtomValue(filenameAtom);
   const connection = useAtomValue(connectionAtom);
   const notebookSourceReason = getNotebookSourceUnavailableReason({

package/src/components/editor/controls/Controls.tsx

@@ -111,7 +111,7 @@ export const Controls = ({
         className={cn(bottomRightControls)}
       >
         <HideInKioskMode>
-          <SaveComponent kioskMode={false} />
+          <SaveComponent />
         </HideInKioskMode>
 
         <Tooltip content={renderShortcut("global.hideCode")}>

package/src/components/editor/errors/__tests__/send-error-report-button.test.tsx

@@ -24,7 +24,7 @@ import {
   ERROR_MESSAGE_INSTRUCTIONS,
 } from "@/core/cells/error-report";
 import { pairConfigAtom } from "@/core/config/pair";
-import { notebookStateFromSession } from "@/core/cells/session";
+import { readExport } from "@/core/cells/session";
 import type { MarimoError, OutputMessage } from "@/core/kernel/messages";
 import {
   type StableSessionId,
@@ -317,8 +317,8 @@ describe("SendErrorReportButton", () => {
   });
 
   it("sends the restored exception type and complete traceback", async () => {
-    const state = notebookStateFromSession(
-      {
+    const { cellRuntime } = readExport({
+      session: {
         version: "1",
         metadata: { marimo_version: "1", script_metadata_hash: null },
         cells: [
@@ -342,9 +342,11 @@ describe("SendErrorReportButton", () => {
           },
         ],
       },
-      null,
-    );
-    const message = state?.cellRuntime[CELL_ID].output;
+      notebook: null,
+      filename: null,
+      appConfig: {},
+    });
+    const message = cellRuntime[CELL_ID].output;
     expect(message).toBeDefined();
     renderButton({
       content: message && <OutputRenderer cellId={CELL_ID} message={message} />,

package/src/components/editor/navigation/__tests__/navigation.test.ts

@@ -27,6 +27,7 @@ import { aiCompletionCellAtom } from "@/core/ai/state";
 import type { CellActions } from "@/core/cells/actions";
 import { notebookAtom } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
+import { layoutAtom } from "@/core/cells/layout";
 import type { DocumentModel } from "@/core/notebook/document";
 import {
   cell,
@@ -165,7 +166,6 @@ const mockCellActions = MockNotebook.cellActions({
   moveCell: vi.fn(),
   sendToTop: vi.fn(),
   sendToBottom: vi.fn(),
-  markTouched: vi.fn(),
   deleteCells: vi.fn(),
   undoDeleteCell: vi.fn(),
 });
@@ -318,7 +318,7 @@ describe("useCellNavigationProps", () => {
       selectionActions.select({ cellId: cellId1 });
       selectionActions.extend({
         cellId: cellId2,
-        allCellIds: store.get(notebookAtom).cellIds,
+        layout: store.get(layoutAtom),
       });
 
       const { result } = renderWithProvider(() =>
@@ -850,7 +850,7 @@ describe("useCellNavigationProps", () => {
       selectionActions.select({ cellId: cellId1 });
       selectionActions.extend({
         cellId: cellId2,
-        allCellIds: store.get(notebookAtom).cellIds,
+        layout: store.get(layoutAtom),
       });
 
       const { result } = renderWithProvider(() =>
@@ -873,7 +873,7 @@ describe("useCellNavigationProps", () => {
       selectionActions.select({ cellId: cellId1 });
       selectionActions.extend({
         cellId: cellId3,
-        allCellIds: store.get(notebookAtom).cellIds,
+        layout: store.get(layoutAtom),
       });
 
       const { result } = renderWithProvider(() =>
@@ -896,7 +896,7 @@ describe("useCellNavigationProps", () => {
       selectionActions.select({ cellId: cellId1 });
       selectionActions.extend({
         cellId: cellId3,
-        allCellIds: store.get(notebookAtom).cellIds,
+        layout: store.get(layoutAtom),
       });
 
       const { result } = renderWithProvider(() =>
@@ -919,7 +919,7 @@ describe("useCellNavigationProps", () => {
       selectionActions.select({ cellId: cellId2 });
       selectionActions.extend({
         cellId: cellId3,
-        allCellIds: store.get(notebookAtom).cellIds,
+        layout: store.get(layoutAtom),
       });
 
       const { result } = renderWithProvider(() =>
@@ -954,7 +954,7 @@ describe("useCellNavigationProps", () => {
       selectionActions.select({ cellId: cellId1 });
       selectionActions.extend({
         cellId: cellId2,
-        allCellIds: store.get(notebookAtom).cellIds,
+        layout: store.get(layoutAtom),
       });
 
       const { result } = renderWithProvider(() =>
@@ -990,7 +990,7 @@ describe("useCellNavigationProps", () => {
       selectionActions.select({ cellId: cellId2 });
       selectionActions.extend({
         cellId: cellId3,
-        allCellIds: store.get(notebookAtom).cellIds,
+        layout: store.get(layoutAtom),
       });
 
       const { result } = renderWithProvider(() =>
@@ -1023,7 +1023,7 @@ describe("useCellNavigationProps", () => {
       selectionActions.select({ cellId: cellId1 });
       selectionActions.extend({
         cellId: cellId2,
-        allCellIds: store.get(notebookAtom).cellIds,
+        layout: store.get(layoutAtom),
       });
 
       const { result } = renderWithProvider(() =>
@@ -1056,7 +1056,7 @@ describe("useCellNavigationProps", () => {
       selectionActions.select({ cellId: cellId1 });
       selectionActions.extend({
         cellId: cellId2,
-        allCellIds: store.get(notebookAtom).cellIds,
+        layout: store.get(layoutAtom),
       });
 
       const { result } = renderWithProvider(() =>
@@ -1084,7 +1084,7 @@ describe("useCellNavigationProps", () => {
       selectionActions.select({ cellId: cellId2 });
       selectionActions.extend({
         cellId: cellId3,
-        allCellIds: store.get(notebookAtom).cellIds,
+        layout: store.get(layoutAtom),
       });
 
       const { result } = renderWithProvider(() =>
@@ -1138,7 +1138,7 @@ describe("useCellNavigationProps", () => {
       selectionActions.select({ cellId: cellId1 });
       selectionActions.extend({
         cellId: cellId2,
-        allCellIds: store.get(notebookAtom).cellIds,
+        layout: store.get(layoutAtom),
       });
 
       const { result } = renderWithProvider(() =>
@@ -1166,7 +1166,7 @@ describe("useCellNavigationProps", () => {
       selectionActions.select({ cellId: cellId1 });
       selectionActions.extend({
         cellId: cellId2,
-        allCellIds: store.get(notebookAtom).cellIds,
+        layout: store.get(layoutAtom),
       });
 
       const { result } = renderWithProvider(() =>
@@ -1228,7 +1228,7 @@ describe("useCellNavigationProps", () => {
       selectionActions.select({ cellId: cellId1 });
       selectionActions.extend({
         cellId: cellId2,
-        allCellIds: store.get(notebookAtom).cellIds,
+        layout: store.get(layoutAtom),
       });
 
       const { result } = renderWithProvider(() =>
@@ -1622,7 +1622,7 @@ describe("useCellNavigationProps", () => {
       selectionActions.select({ cellId: cellId1 });
       selectionActions.extend({
         cellId: cellId2,
-        allCellIds: store.get(notebookAtom).cellIds,
+        layout: store.get(layoutAtom),
       });
 
       const { result } = renderWithProvider(() =>