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

package/src/__mocks__/notebook.ts

@@ -11,7 +11,6 @@ import {
   createCellRuntimeState,
 } from "@/core/cells/types";
 import type { MarimoError } from "@/core/kernel/messages";
-import { MultiColumn } from "@/utils/id-tree";
 import { Objects } from "@/utils/objects";
 
 export const MockNotebook = {
@@ -46,7 +45,7 @@ export const MockNotebook = {
         serializedEditorState: null,
         ...data,
       })),
-      cellIds: MultiColumn.from([Object.keys(cellData) as CellId[]]),
+      cellIds: Object.keys(cellData) as CellId[],
       cellRuntime: Objects.mapValues(cellData, (_data, cid) =>
         createCellRuntimeState({ ...cellRuntime[cid] }),
       ),

package/src/components/datasources/datasources.tsx

@@ -134,7 +134,7 @@ const sortedTablesAtom = atom((get) => {
       return 0;
     }
 
-    const index = cellIds.inOrderIds.indexOf(variable.declaredBy[0]);
+    const index = cellIds.indexOf(variable.declaredBy[0]);
     if (index === -1) {
       return 0;
     }

package/src/components/dependency-graph/custom-node.tsx

@@ -30,7 +30,7 @@ const EQUALITY_CHECK = (
 export const CustomNode = memo((props: CustomNodeProps) => {
   const { data, selected } = props; // must match the equality check
   const cell = useAtomValue(data.atom);
-  const cellIndex = useCellIds().inOrderIds.indexOf(cell.id);
+  const cellIndex = useCellIds().indexOf(cell.id);
   const handleColor = selected ? "var(--gray-9)" : "var(--gray-3)";
   const edgeMarkers = use(EdgeMarkerContext);
 

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

@@ -7,10 +7,11 @@ import {
   cellGraphsAtom,
   isVariableAffectedBySelectedCell,
 } from "@/components/editor/chrome/wrapper/minimap-state";
-import { useCellData, useCellIds, useCellRuntime } from "@/core/cells/cells";
+import { useCellData, 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 { useLayout } from "@/core/cells/layout";
 import { useVariables } from "@/core/variables/state";
 import { cn } from "@/utils/cn";
 import { extractCellPreview } from "./utils/cell-preview";
@@ -380,28 +381,25 @@ function isNonReferenceableCell(graph: CellGraph): boolean {
  * Shows a scrollable list of cells with dependency visualization.
  */
 export const MinimapContent: React.FC = () => {
-  const cellIds = useCellIds();
+  const layout = useLayout();
+  const rows = layout.columns.flatMap((column, index) =>
+    column.ids.map((cellId, position) => ({
+      cellId,
+      startsColumn: index > 0 && position === 0,
+    })),
+  );
   const cellPositions: Record<CellId, number> = Object.fromEntries(
-    cellIds.inOrderIds.map((id, idx) => [id, idx]),
+    rows.map(({ cellId }, idx) => [cellId, idx]),
   );
-  const columnBoundaries: number[] = [];
-  let cellCount = 0;
-  for (const [idx, column] of cellIds.getColumns().entries()) {
-    if (idx > 0) {
-      columnBoundaries.push(cellCount);
-    }
-    cellCount += column.inOrderIds.length;
-  }
 
   return (
     <div className="overflow-y-auto overflow-x-hidden flex-1 scrollbar-none h-full max-w-80">
       <div className="py-3 pl-3 pr-4 relative min-h-full">
-        {cellIds.inOrderIds.map((cellId, idx) => {
-          const isColumnBoundary = columnBoundaries.includes(idx);
+        {rows.map(({ cellId, startsColumn }, idx) => {
           return (
             <React.Fragment key={cellId}>
               {/* Subtle visual divider between nodes */}
-              {isColumnBoundary && (
+              {startsColumn && (
                 <div
                   className="absolute left-5 w-[36px] h-px bg-(--gray-4) pointer-events-none"
                   aria-hidden="true"

package/src/components/editor/actions/useSetCodeVisibility.ts

@@ -29,7 +29,7 @@ export const useSetCodeVisibility = () => {
 
       const newConfigs: Record<CellId, Partial<CellConfig>> = {};
 
-      for (const cellId of notebook.cellIds.inOrderIds) {
+      for (const cellId of notebook.cellIds) {
         const cell = notebook.cellData[cellId];
         if (cell === undefined || cell.config.hide_code === hidden) {
           continue;

package/src/components/editor/actions/useSetOutputsExpanded.ts

@@ -19,7 +19,7 @@ export function outputExpansionConfigs(
   expanded: boolean,
 ): Record<CellId, Partial<CellConfig>> {
   const configs: Record<CellId, Partial<CellConfig>> = {};
-  for (const cellId of notebook.cellIds.inOrderIds) {
+  for (const cellId of notebook.cellIds) {
     const cell = notebook.cellData[cellId];
     if (
       cell === undefined ||

package/src/components/editor/alerts/stdin-blocking-alert.tsx

@@ -12,7 +12,7 @@ const hasBlockingStdinAtom = atom((get) => {
   const notebook = get(notebookAtom);
 
   // Check each cell in order
-  for (const cellId of notebook.cellIds.inOrderIds) {
+  for (const cellId of notebook.cellIds) {
     // Check if the cell is idle and has unresolved stdin
     const runtime = notebook.cellRuntime[cellId];
     if (runtime.status === "idle") {

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

@@ -236,7 +236,7 @@ const CellEditorInternal = ({
         addOrAppendSetupCell: (code) => {
           const notebook = getNotebook();
           // No setup cell yet: create one with this code at the top.
-          if (!notebook.cellIds.setupCellExists()) {
+          if (!notebook.cellIds.includes(SETUP_CELL_ID)) {
             cellActions.addSetupCell({ code });
             return;
           }

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

@@ -11,16 +11,18 @@ import { getEditorCodeAsPython } from "@/core/codemirror/language/utils";
 export function useSplitCellCallback() {
   const { splitCell, undoSplitCell } = useCellActions();
 
-  return useEvent((opts: { cellId: CellId }) => {
+  return useEvent((opts: { cellId: CellId }): CellId | null => {
     // Save snapshot of code for undo
     const cellEditorView = getCellEditorView(opts.cellId);
     if (!cellEditorView) {
-      return;
+      return null;
     }
     const code = getEditorCodeAsPython(cellEditorView);
 
-    // Optimistic update
-    splitCell(opts);
+    const newCellId = splitCell(opts);
+    if (newCellId === null) {
+      return null;
+    }
 
     const { dismiss } = toast({
       title: "Cell split",
@@ -30,7 +32,7 @@ export function useSplitCellCallback() {
           size="sm"
           variant="outline"
           onClick={() => {
-            undoSplitCell({ ...opts, snapshot: code });
+            undoSplitCell({ ...opts, newCellId, snapshot: code });
             dismiss();
           }}
         >
@@ -38,5 +40,6 @@ export function useSplitCellCallback() {
         </UndoButton>
       ),
     });
+    return newCellId;
   });
 }

package/src/components/editor/chrome/panels/dependency-graph-panel.tsx

@@ -57,7 +57,7 @@ const DependencyGraphPanel: React.FC = () => {
           <DependencyGraph
             cellAtoms={cells}
             variables={variables}
-            cellIds={cellIds.inOrderIds}
+            cellIds={cellIds}
           />
         )}
       </div>

package/src/components/editor/chrome/panels/session-panel.tsx

@@ -88,7 +88,7 @@ const SessionPanel: React.FC = () => {
               No variables defined
             </div>
           ) : (
-            <VariableTable cellIds={cellIds.inOrderIds} variables={variables} />
+            <VariableTable cellIds={cellIds} variables={variables} />
           )}
         </PanelAccordionContent>
       </PanelAccordionItem>

package/src/components/editor/chrome/panels/variable-panel.tsx

@@ -22,11 +22,7 @@ const VariablePanel: React.FC = () => {
   }
 
   return (
-    <VariableTable
-      className="flex-1"
-      cellIds={cellIds.inOrderIds}
-      variables={variables}
-    />
+    <VariableTable className="flex-1" cellIds={cellIds} variables={variables} />
   );
 };
 

package/src/components/editor/chrome/wrapper/minimap-state.ts

@@ -104,7 +104,7 @@ export function buildCellGraph(
 export const cellGraphsAtom = atom((get) => {
   const cellIds = get(cellIdsAtom);
   const variables = get(variablesAtom);
-  return buildCellGraph(cellIds.inOrderIds, variables);
+  return buildCellGraph(cellIds, variables);
 });
 
 /**

package/src/components/editor/columns/__tests__/cell-column.test.tsx

@@ -3,7 +3,7 @@ import { render } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { describe, expect, it } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import type { CellColumnId } from "@/utils/id-tree";
+import type { CellColumnId } from "@/core/cells/layout";
 import { Column } from "../cell-column";
 
 const columnId = "col-1" as CellColumnId;

package/src/components/editor/columns/cell-column.tsx

@@ -4,7 +4,7 @@ import React, { memo, useRef } from "react";
 import type { AppConfig } from "@/core/config/config-schema";
 import { useResizeHandle } from "@/hooks/useResizeHandle";
 import { cn } from "@/utils/cn";
-import type { CellColumnId } from "@/utils/id-tree";
+import type { CellColumnId } from "@/core/cells/layout";
 import { SortableColumn } from "./sortable-column";
 import { storageFn } from "./storage";
 

package/src/components/editor/columns/sortable-column.tsx

@@ -21,7 +21,7 @@ import {
 import { Tooltip } from "@/components/ui/tooltip";
 import { useCellActions } from "@/core/cells/actions";
 import { cn } from "@/utils/cn";
-import type { CellColumnId } from "@/utils/id-tree";
+import type { CellColumnId } from "@/core/cells/layout";
 import { mergeRefs } from "../../../utils/mergeRefs";
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {

package/src/components/editor/links/__tests__/cell-link.test.tsx

@@ -15,7 +15,7 @@ vi.mock("@/core/cells/actions", () => ({
   useCellActions: () => ({ showCellIfHidden }),
 }));
 vi.mock("@/core/cells/cells", () => ({
-  useCellIds: () => ({ inOrderIds: [targetId] }),
+  useCellIds: () => [targetId],
   useCellNames: () => ({ [targetId]: "Target" }),
 }));
 vi.mock("@/core/saving/filename", () => ({ useFilename: () => "notebook.py" }));

package/src/components/editor/links/cell-link-list.tsx

@@ -25,7 +25,7 @@ export const CellLinkList: React.FC<Props> = ({
 }) => {
   const cellIndex = useCellIds();
   const sortedCellIds = cellIds.toSorted((a, b) => {
-    return cellIndex.inOrderIds.indexOf(a) - cellIndex.inOrderIds.indexOf(b);
+    return cellIndex.indexOf(a) - cellIndex.indexOf(b);
   });
 
   if (cellIds.length === 0) {

package/src/components/editor/links/cell-link.tsx

@@ -27,7 +27,7 @@ export const CellLink = (props: Props): JSX.Element => {
   const { className, cellId, variant, onClick, formatCellName, skipScroll } =
     props;
   const cellName = useCellNames()[cellId] ?? "";
-  const cellIndex = useCellIds().inOrderIds.indexOf(cellId);
+  const cellIndex = useCellIds().indexOf(cellId);
   const { showCellIfHidden } = useCellActions();
   const formatName = formatCellName ?? ((name: string) => name);
 

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

@@ -125,7 +125,6 @@ afterAll(() => {
 });
 
 import { defaultUserConfig } from "@/core/config/config-schema";
-import { MultiColumn } from "@/utils/id-tree";
 import { focusCell, focusCellEditor } from "../focus-utils";
 import {
   type CellSelectionState,
@@ -1427,12 +1426,27 @@ describe("useCellNavigationProps", () => {
           },
         },
       });
-      // Override cellIds to be multi-column
-      notebookState.cellIds = MultiColumn.from([
-        [cellId1, cellId3],
-        [cellId2, cellId4, cellId5],
-      ]);
       store.set(notebookAtom, notebookState);
+      // The layout reads columns from the document's cells.
+      stopModel();
+      const inColumn = (id: CellId, column: number) =>
+        cell(id, "", { config: { ...CONFIG, column } });
+      ({ model, stop: stopModel } = mockDocumentModel(
+        store,
+        withCells(
+          documentOf(),
+          {
+            c1: null,
+            c2: null,
+            [cellId1]: inColumn(cellId1, 0),
+            [cellId3]: inColumn(cellId3, 0),
+            [cellId2]: inColumn(cellId2, 1),
+            [cellId4]: inColumn(cellId4, 1),
+            [cellId5]: inColumn(cellId5, 1),
+          },
+          [cellId1, cellId3, cellId2, cellId4, cellId5],
+        ),
+      ));
 
       // Mock DOM elements and their positions
       const mockGetElementById = vi.spyOn(document, "getElementById");

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

@@ -3,8 +3,7 @@
 import { beforeEach, describe, expect, it } from "vitest";
 import { cellId } from "@/__tests__/branded";
 import type { CellId } from "@/core/cells/ids";
-import type { Layout } from "@/core/cells/layout";
-import type { CellColumnId } from "@/utils/id-tree";
+import type { CellColumnId, Layout } from "@/core/cells/layout";
 import type { CellSelectionState } from "../selection";
 import { exportedForTesting } from "../selection";
 

package/src/components/editor/navigation/clipboard.ts

@@ -6,6 +6,8 @@ import { toast } from "@/components/ui/use-toast";
 import { getNotebook } from "@/core/cells/cells";
 import { useCellActions } from "@/core/cells/actions";
 import type { CellId } from "@/core/cells/ids";
+import { columnOf, layoutAtom } from "@/core/cells/layout";
+import { store } from "@/core/state/jotai";
 import {
   usePendingCutActions,
   usePendingCutState,
@@ -140,10 +142,10 @@ export function useCellClipboard() {
     // Check if we have pending cut cells (internal move)
     if (pendingCutState.cellIds.size > 0) {
       const pendingCellIds = [...pendingCutState.cellIds];
-      const notebook = getNotebook();
+      const layout = store.get(layoutAtom);
       const previousPlacements = pendingCellIds.map((id) => {
-        const column = notebook.cellIds.findWithId(id);
-        return { columnId: column.id, index: column.indexOfOrThrow(id) };
+        const column = columnOf(layout, id);
+        return { columnId: column.id, index: column.ids.indexOf(id) };
       });
 
       actions.moveCellsRelativeTo({

package/src/components/editor/renderers/cell-array.tsx

@@ -29,14 +29,9 @@ import { canInteractWithAppAtom } from "@/core/network/connection";
 import { useBoolean } from "@/hooks/useBoolean";
 import { cn } from "@/utils/cn";
 import { Functions } from "@/utils/functions";
-import { findColumn, useLayout } from "@/core/cells/layout";
-import type { CellColumnId } from "@/utils/id-tree";
+import { type CellColumnId, findColumn, useLayout } from "@/core/cells/layout";
 import { invariant } from "@/utils/invariant";
-import {
-  columnIdsAtom,
-  useCellIds,
-  useScrollKey,
-} from "../../../core/cells/cells";
+import { useCellIds, useScrollKey } from "../../../core/cells/cells";
 import { useCellActions } from "../../../core/cells/actions";
 import { formatAll } from "../../../core/codemirror/format";
 import type { AppConfig, UserConfig } from "../../../core/config/config-schema";
@@ -61,7 +56,7 @@ interface CellArrayProps {
 }
 
 export const CellArray: React.FC<CellArrayProps> = (props) => {
-  const columnIds = useAtomValue(columnIdsAtom);
+  const columnIds = useLayout().columns.map((column) => column.id);
 
   // Setup context for sorting
   return (
@@ -116,7 +111,7 @@ const CellArrayInternal: React.FC<CellArrayProps> = ({
 
   const cellIds = useCellIds();
   const scrollKey = useScrollKey();
-  const columnIds = cellIds.getColumnIds();
+  const columnIds = useLayout().columns.map((column) => column.id);
 
   // Scroll to a cell targeted by a previous action
   const scrollToTarget = actions.scrollToTarget;
@@ -140,7 +135,7 @@ const CellArrayInternal: React.FC<CellArrayProps> = ({
       <StdinBlockingAlert />
       <NotebookBanner width={appConfig.width} />
       {/* Only show if not cells, otherwise running a single cell will start the connection */}
-      {cellIds.idLength === 0 && <NotStartedConnectionAlert />}
+      {cellIds.length === 0 && <NotStartedConnectionAlert />}
       <div
         className={cn(
           appConfig.width === "columns" &&
@@ -192,8 +187,8 @@ const CellColumn: React.FC<{
   const column = findColumn(useLayout(), columnId);
   invariant(column, `Expected column for: ${columnId}`);
 
-  const hasOnlyOneCell = cellIds.hasOnlyOneId();
-  const hasSetupCell = cellIds.inOrderIds.includes(SETUP_CELL_ID);
+  const hasOnlyOneCell = cellIds.length === 1;
+  const hasSetupCell = cellIds.includes(SETUP_CELL_ID);
   const isPresenting = mode === "present";
 
   return (

package/src/components/editor/renderers/slides-layout/slides-layout.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import React, { useMemo, useState } from "react";
 import { useAtomValue } from "jotai";
-import { numColumnsAtom } from "@/core/cells/cells";
+import { numColumnsAtom } from "@/core/cells/layout";
 import type { CellId } from "@/core/cells/ids";
 import { kioskModeAtom } from "@/core/mode";
 import type { ICellRendererProps } from "../types";

package/src/components/editor/renderers/vertical-layout/__tests__/useFocusFirstEditor.test.ts

@@ -25,7 +25,7 @@ describe("useFocusFirstEditor", () => {
     const getNotebookSpy = vi
       .spyOn(cellsModule, "getNotebook")
       .mockReturnValue({
-        cellIds: { iterateTopLevelIds: ["cell-1", "cell-2"] },
+        cellIds: ["cell-1", "cell-2"],
         cellData: {
           "cell-1": { config: { hide_code: false } },
           "cell-2": { config: { hide_code: false } },
@@ -52,7 +52,7 @@ describe("useFocusFirstEditor", () => {
     const getNotebookSpy = vi
       .spyOn(cellsModule, "getNotebook")
       .mockReturnValue({
-        cellIds: { iterateTopLevelIds: ["cell-1", "cell-2"] },
+        cellIds: ["cell-1", "cell-2"],
         cellData: {
           "cell-1": { config: { hide_code: true } }, // hidden
           "cell-2": { config: { hide_code: false } }, // visible
@@ -94,7 +94,7 @@ describe("useFocusFirstEditor", () => {
     // Mock getNotebook
     const mockEditor = { focus: vi.fn() };
     vi.spyOn(cellsModule, "getNotebook").mockReturnValue({
-      cellIds: { iterateTopLevelIds: [] },
+      cellIds: [],
       cellData: {},
       cellHandles: {
         "cell-123": { current: { editorView: mockEditor } },
@@ -129,7 +129,7 @@ describe("useFocusFirstEditor", () => {
 
     const mockEditor = { focus: vi.fn() };
     vi.spyOn(cellsModule, "getNotebook").mockReturnValue({
-      cellIds: { iterateTopLevelIds: ["cell-1"] },
+      cellIds: ["cell-1"],
       cellData: {
         "cell-1": { config: { hide_code: false } },
       },

package/src/components/editor/renderers/vertical-layout/useFocusFirstEditor.ts

@@ -52,7 +52,7 @@ function focusFirstEditor() {
   const { cellIds, cellData, cellHandles } = getNotebook();
 
   // Focus on the first cell if it's been mounted and is not hidden
-  for (const cellId of cellIds.iterateTopLevelIds) {
+  for (const cellId of cellIds) {
     const handle = cellHandles[cellId];
     const hidden = cellData[cellId]?.config.hide_code;
     if (!hidden && handle?.current?.editorView) {

package/src/components/editor/stdin-blocking-alert.tsx

@@ -13,7 +13,7 @@ const hasBlockingStdinAtom = atom((get) => {
   const notebook = get(notebookAtom);
 
   // Check each cell in order
-  for (const cellId of notebook.cellIds.inOrderIds) {
+  for (const cellId of notebook.cellIds) {
     // Check if the cell is idle and has unresolved stdin
     const runtime = notebook.cellRuntime[cellId];
     if (runtime.status === "idle") {

package/src/components/slides/__tests__/minimap-actions.test.tsx

@@ -6,7 +6,7 @@ import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
 import type { CellData, CellRuntimeState } from "@/core/cells/types";
-import { MultiColumn } from "@/utils/id-tree";
+import type { CellColumnId } from "@/core/cells/layout";
 import { SlidesMinimap } from "../minimap";
 
 const A = cellId("a");
@@ -22,11 +22,20 @@ const { createCell, deleteCell, moveCellToIndex } = vi.hoisted(() => ({
 vi.mock("@/core/cells/actions", () => ({
   useCellActions: () => ({ moveCellToIndex, createCell }),
 }));
-vi.mock("@/core/cells/cells", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@/core/cells/cells")>();
+vi.mock("@/core/cells/layout", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/core/cells/layout")>();
   return {
     ...actual,
-    useCellIds: () => MultiColumn.from([[A, B]]),
+    useLayout: () => ({
+      columns: [
+        {
+          id: "column-0" as CellColumnId,
+          ids: [A, B],
+          visible: [A, B],
+          folds: new Map(),
+        },
+      ],
+    }),
   };
 });
 

package/src/components/slides/__tests__/minimap.test.ts

@@ -4,7 +4,7 @@ import { renderHook, act } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { CellId } from "@/core/cells/ids";
 import type { DragMoveEvent } from "@dnd-kit/core";
-import { MultiColumn } from "@/utils/id-tree";
+import type { CellColumnId, Layout } from "@/core/cells/layout";
 import { exportedForTesting } from "../minimap";
 
 const { useVisibleCellIds, projectDropTarget, resolveDropTarget } =
@@ -318,15 +318,23 @@ describe("resolveDropTarget", () => {
   const C = "c" as CellId;
   const D = "d" as CellId;
 
-  function makeSingleColumnIds(...ids: CellId[]) {
-    return MultiColumn.from([ids]);
+  function makeLayout(...columns: CellId[][]): Layout {
+    return {
+      columns: columns.map((ids, index) => ({
+        id: `column-${index}` as CellColumnId,
+        ids,
+        visible: ids,
+        folds: new Map(),
+      })),
+    };
   }
+  const makeSingleColumnIds = (...ids: CellId[]) => makeLayout(ids);
 
   it("returns null when activeId matches target overId", () => {
-    const cellIds = makeSingleColumnIds(A, B);
+    const layout = makeSingleColumnIds(A, B);
     expect(
       resolveDropTarget({
-        cellIds,
+        layout,
         activeId: A,
         target: { overId: A, position: "after" },
       }),
@@ -334,68 +342,79 @@ describe("resolveDropTarget", () => {
   });
 
   it("returns null for multi-column layouts", () => {
-    const cellIds = MultiColumn.from([[A, B], [C]]);
+    const layout = makeLayout([A, B], [C]);
     expect(
       resolveDropTarget({
-        cellIds,
+        layout,
         activeId: A,
         target: { overId: B, position: "after" },
       }),
     ).toBeNull();
   });
 
+  it("returns null when the over cell has left the layout", () => {
+    const layout = makeSingleColumnIds(A, B);
+    expect(
+      resolveDropTarget({
+        layout,
+        activeId: A,
+        target: { overId: C, position: "after" },
+      }),
+    ).toBeNull();
+  });
+
   it('resolves "before" to the over index', () => {
-    const cellIds = makeSingleColumnIds(A, B, C);
+    const layout = makeSingleColumnIds(A, B, C);
     const result = resolveDropTarget({
-      cellIds,
+      layout,
       activeId: A,
       target: { overId: C, position: "before" },
     });
     expect(result).toEqual({
       cellId: A,
-      columnId: cellIds.atOrThrow(0).id,
+      columnId: layout.columns[0].id,
       index: 2,
     });
   });
 
   it('resolves "after" to one past the over index', () => {
-    const cellIds = makeSingleColumnIds(A, B, C);
+    const layout = makeSingleColumnIds(A, B, C);
     const result = resolveDropTarget({
-      cellIds,
+      layout,
       activeId: C,
       target: { overId: A, position: "after" },
     });
     expect(result).toEqual({
       cellId: C,
-      columnId: cellIds.atOrThrow(0).id,
+      columnId: layout.columns[0].id,
       index: 1,
     });
   });
 
   it('resolves "before" on first item to index 0', () => {
-    const cellIds = makeSingleColumnIds(A, B, C);
+    const layout = makeSingleColumnIds(A, B, C);
     const result = resolveDropTarget({
-      cellIds,
+      layout,
       activeId: C,
       target: { overId: A, position: "before" },
     });
     expect(result).toEqual({
       cellId: C,
-      columnId: cellIds.atOrThrow(0).id,
+      columnId: layout.columns[0].id,
       index: 0,
     });
   });
 
   it('resolves "after" on last item to one past the end', () => {
-    const cellIds = makeSingleColumnIds(A, B, C, D);
+    const layout = makeSingleColumnIds(A, B, C, D);
     const result = resolveDropTarget({
-      cellIds,
+      layout,
       activeId: A,
       target: { overId: D, position: "after" },
     });
     expect(result).toEqual({
       cellId: A,
-      columnId: cellIds.atOrThrow(0).id,
+      columnId: layout.columns[0].id,
       index: 4,
     });
   });