@marimo-team/islands 0.23.3-dev9 → 0.23.4-dev0

package/src/components/editor/renderers/slides-layout/__tests__/compute-slide-cells.test.ts

@@ -0,0 +1,150 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, it, expect } from "vitest";
+import { computeSlideCellsInfo } from "../compute-slide-cells";
+import type { SlideConfig, SlidesLayout } from "../types";
+import type { CellId } from "@/core/cells/ids";
+
+interface TestCell {
+  id: CellId;
+  output: { data: unknown } | null;
+}
+
+const DEFAULT_OUTPUT: TestCell["output"] = { data: "ok" };
+
+const cell = (
+  id: string,
+  output: TestCell["output"] = DEFAULT_OUTPUT,
+): TestCell => ({ id: id as CellId, output });
+
+const layoutOf = (entries: Array<[string, SlideConfig]>): SlidesLayout => ({
+  cells: new Map(entries.map(([id, cfg]) => [id as CellId, cfg])),
+  deck: {},
+});
+
+describe("computeSlideCellsInfo", () => {
+  it("returns empty results for empty input", () => {
+    const result = computeSlideCellsInfo([], layoutOf([]));
+    expect(result.cellsWithOutput).toEqual([]);
+    expect(result.skippedIds.size).toBe(0);
+    expect(result.slideTypes.size).toBe(0);
+    expect(result.startCellIndex).toBe(0);
+  });
+
+  it("computes firstNonSkippedIndex as the first non-skipped cell", () => {
+    const result = computeSlideCellsInfo(
+      [cell("a"), cell("b"), cell("c")],
+      layoutOf([
+        ["a", { type: "skip" }],
+        ["b", { type: "skip" }],
+        ["c", { type: "slide" }],
+      ]),
+    );
+    expect(result.startCellIndex).toBe(2);
+  });
+
+  it("falls back to 0 when every cell is skipped", () => {
+    // If the user marked everything as skip we still have to land somewhere;
+    // the renderer treats 0 as a safe default rather than rendering nothing.
+    const result = computeSlideCellsInfo(
+      [cell("a"), cell("b")],
+      layoutOf([
+        ["a", { type: "skip" }],
+        ["b", { type: "skip" }],
+      ]),
+    );
+    expect(result.startCellIndex).toBe(0);
+  });
+
+  it("uses index 0 when no cells are skipped", () => {
+    const result = computeSlideCellsInfo([cell("a"), cell("b")], layoutOf([]));
+    expect(result.startCellIndex).toBe(0);
+  });
+
+  it("filters out cells with no output", () => {
+    const result = computeSlideCellsInfo(
+      [cell("a"), cell("b", null), cell("c")],
+      layoutOf([]),
+    );
+    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a", "c"]);
+  });
+
+  it("filters out cells whose output data is empty string", () => {
+    // Mirrors the editor contract: an explicit empty-string payload means the
+    // cell rendered nothing, so it should not occupy a slide.
+    const result = computeSlideCellsInfo(
+      [cell("a"), cell("b", { data: "" }), cell("c")],
+      layoutOf([]),
+    );
+    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a", "c"]);
+  });
+
+  it("keeps cells whose output data is a non-empty value (including falsy ones)", () => {
+    // Only "" is treated as empty — 0 / false / null-shaped payloads still
+    // represent rendered output and should stay in the deck.
+    const result = computeSlideCellsInfo(
+      [
+        cell("a", { data: 0 }),
+        cell("b", { data: false }),
+        cell("c", { data: null }),
+      ],
+      layoutOf([]),
+    );
+    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a", "b", "c"]);
+  });
+
+  it("populates slideTypes only for cells with an explicit type", () => {
+    const result = computeSlideCellsInfo(
+      [cell("a"), cell("b"), cell("c")],
+      layoutOf([
+        ["a", { type: "slide" }],
+        ["b", {}],
+        ["c", { type: "fragment" }],
+      ]),
+    );
+    expect(Object.fromEntries(result.slideTypes)).toEqual({
+      a: "slide",
+      c: "fragment",
+    });
+  });
+
+  it("tracks skipped cells in skippedIds", () => {
+    const result = computeSlideCellsInfo(
+      [cell("a"), cell("b"), cell("c")],
+      layoutOf([
+        ["a", { type: "slide" }],
+        ["b", { type: "skip" }],
+        ["c", { type: "skip" }],
+      ]),
+    );
+    expect([...result.skippedIds]).toEqual(["b", "c"]);
+    // Skipped cells are still "visible" deck cells — they just aren't rendered
+    // in reveal. The minimap relies on the full list plus skippedIds.
+    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a", "b", "c"]);
+    expect(result.slideTypes.get("b" as CellId)).toBe("skip");
+  });
+
+  it("ignores layout entries for cells that have no output", () => {
+    // If a cell was skipped in the layout but no longer produces output (e.g.
+    // the user deleted its code), it should drop out of both maps — otherwise
+    // the skip set would reference ghosts.
+    const result = computeSlideCellsInfo(
+      [cell("a"), cell("b", null)],
+      layoutOf([
+        ["a", { type: "slide" }],
+        ["b", { type: "skip" }],
+      ]),
+    );
+    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a"]);
+    expect(result.skippedIds.size).toBe(0);
+    expect(result.slideTypes.has("b" as CellId)).toBe(false);
+  });
+
+  it("preserves the input order of cells in cellsWithOutput", () => {
+    const result = computeSlideCellsInfo(
+      [cell("c"), cell("a"), cell("b")],
+      layoutOf([]),
+    );
+    expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["c", "a", "b"]);
+  });
+});

package/src/components/editor/renderers/slides-layout/__tests__/plugin.test.ts

@@ -0,0 +1,298 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, it, expect } from "vitest";
+import { SlidesLayoutPlugin } from "../plugin";
+import type { CellData } from "@/core/cells/types";
+import type { CellId } from "@/core/cells/ids";
+
+function makeCell(id: string, code = "print('hi')"): CellData {
+  return {
+    id: id as CellId,
+    name: id,
+    code,
+    edited: false,
+    lastCodeRun: null,
+    lastExecutionTime: null,
+    config: { hide_code: false, disabled: false, column: null },
+    serializedEditorState: null,
+  };
+}
+
+describe("SlidesLayoutPlugin validator", () => {
+  it("accepts the legacy empty-object shape written by older marimo versions", () => {
+    // Backwards compat: any slides file saved before we introduced `cells` /
+    // `deck` looks like `{}` on disk. It must still validate.
+    expect(SlidesLayoutPlugin.validator.safeParse({}).success).toBe(true);
+  });
+
+  it("accepts a fully populated layout", () => {
+    expect(
+      SlidesLayoutPlugin.validator.safeParse({
+        cells: [{ type: "slide" }, {}],
+        deck: { transition: "fade" },
+      }).success,
+    ).toBe(true);
+  });
+
+  it("rejects unknown slide types", () => {
+    expect(
+      SlidesLayoutPlugin.validator.safeParse({
+        cells: [{ type: "bogus" }],
+      }).success,
+    ).toBe(false);
+  });
+});
+
+describe("SlidesLayoutPlugin deserializeLayout", () => {
+  it("returns an empty map when serialized.cells is missing", () => {
+    // Regression: previously accessed `serialized.cells.length` on undefined
+    // and threw, preventing the app from initializing.
+    const layout = SlidesLayoutPlugin.deserializeLayout({}, [makeCell("a")]);
+    expect(layout.cells.size).toBe(0);
+    expect(layout.deck).toEqual({});
+  });
+
+  it("tolerates missing deck", () => {
+    const layout = SlidesLayoutPlugin.deserializeLayout(
+      { cells: [{ type: "slide" }] },
+      [makeCell("a")],
+    );
+    expect(layout.deck).toEqual({});
+    expect(layout.cells.get("a" as CellId)).toEqual({ type: "slide" });
+  });
+
+  it("passes through every serialized entry by position (thin passthrough)", () => {
+    const layout = SlidesLayoutPlugin.deserializeLayout(
+      // Third entry carries an unknown key to prove the deserializer does not
+      // strip fields it does not recognize (forward-compat).
+      // oxlint-disable-next-line typescript/no-explicit-any
+      { cells: [{}, { type: "fragment" }, { notes: "x" } as any] },
+      [makeCell("a"), makeCell("b"), makeCell("c")],
+    );
+    expect([...layout.cells.keys()]).toEqual(["a", "b", "c"]);
+    expect(layout.cells.get("a" as CellId)).toEqual({});
+    expect(layout.cells.get("b" as CellId)).toEqual({ type: "fragment" });
+    expect(layout.cells.get("c" as CellId)).toEqual({ notes: "x" });
+  });
+});
+
+describe("SlidesLayoutPlugin serializeLayout", () => {
+  it("emits one entry per notebook cell (dense, positional)", () => {
+    // Even with no per-cell config, the output array must have one slot per
+    // notebook cell so positional alignment is preserved on reload.
+    const serialized = SlidesLayoutPlugin.serializeLayout(
+      { cells: new Map(), deck: {} },
+      [makeCell("a"), makeCell("b", "print(42)")],
+    );
+    expect(serialized.cells).toEqual([{}, {}]);
+    expect(serialized.deck).toEqual({});
+  });
+
+  it("passes user-set SlideConfig fields through unchanged", () => {
+    const cells = [makeCell("a"), makeCell("b"), makeCell("c")];
+    const serialized = SlidesLayoutPlugin.serializeLayout(
+      {
+        cells: new Map([["b" as CellId, { type: "fragment" }]]),
+        deck: {},
+      },
+      cells,
+    );
+    expect(serialized.cells).toHaveLength(3);
+    expect(serialized.cells?.[1]).toMatchObject({ type: "fragment" });
+  });
+
+  it("serializes deck config verbatim", () => {
+    const serialized = SlidesLayoutPlugin.serializeLayout(
+      { cells: new Map(), deck: { transition: "fade" } },
+      [makeCell("a")],
+    );
+    expect(serialized.deck).toEqual({ transition: "fade" });
+  });
+
+  it("passes through unknown SlideConfig fields (forward compat)", () => {
+    // When a future version adds a new SlideConfig field, serialize should
+    // not need updating. Exercise that by stuffing an arbitrary property
+    // into the in-memory config and checking it survives.
+    const cells = [makeCell("a")];
+    // oxlint-disable-next-line typescript/no-explicit-any
+    const futureConfig = { type: "slide", notes: "speaker notes" } as any;
+    const serialized = SlidesLayoutPlugin.serializeLayout(
+      { cells: new Map([["a" as CellId, futureConfig]]), deck: {} },
+      cells,
+    );
+    expect(serialized.cells?.[0]).toMatchObject({
+      type: "slide",
+      notes: "speaker notes",
+    });
+  });
+
+  it("round-trips user-set config through serialize + deserialize", () => {
+    const cells = [makeCell("a"), makeCell("b")];
+    const before = {
+      cells: new Map([["b" as CellId, { type: "fragment" as const }]]),
+      deck: { transition: "fade" as const },
+    };
+    const serialized = SlidesLayoutPlugin.serializeLayout(before, cells);
+    const after = SlidesLayoutPlugin.deserializeLayout(serialized, cells);
+    expect(after.deck).toEqual({ transition: "fade" });
+    expect(after.cells.get("b" as CellId)).toMatchObject({ type: "fragment" });
+  });
+});
+
+/**
+ * Frozen snapshots of every on-disk shape this plugin has ever had to parse.
+ *
+ * RULES FOR THIS BLOCK:
+ * - Never delete or modify an existing snapshot — users have `.slides.json`
+ *   files in these exact shapes sitting on their disks.
+ * - When the on-disk shape evolves, add a new snapshot here (with the release
+ *   / commit that introduced it) so we keep proving we can load the old ones.
+ * - If you need to change the serializer's output, add a snapshot of the new
+ *   shape to `serializedSnapshot` so a diff will surface the change in review.
+ *
+ * Every snapshot is required to:
+ *   1. pass the zod validator (today it is defined but not applied on load;
+ *      this guards against regressions once it is),
+ *   2. deserialize without throwing,
+ *   3. survive a deserialize → serialize → deserialize round trip without
+ *      throwing or losing any user-set field carried in the expectations.
+ */
+interface BackwardsCompatCase {
+  label: string;
+  input: unknown;
+  /**
+   * Expected state after deserializing `input` against `cells`. Only asserted
+   * properties need to be listed — extra properties are ignored.
+   */
+  expected: {
+    deck?: unknown;
+    cellIds: string[];
+    cellEntries?: Array<[string, unknown]>;
+  };
+}
+
+const BACKWARDS_COMPAT_SNAPSHOTS: BackwardsCompatCase[] = [
+  {
+    // Shape written by every marimo version before we added per-slide config.
+    label: "legacy bare {} (pre-slide-config)",
+    input: {},
+    expected: { deck: {}, cellIds: [] },
+  },
+  {
+    // Current serializer output as of this commit. If you change the
+    // serializer, add the new shape as an additional snapshot — don't edit
+    // this one.
+    label: "current: cells + deck",
+    input: {
+      cells: [{ type: "slide" }, {}, { type: "fragment" }],
+      deck: { transition: "slide" },
+    },
+    expected: {
+      deck: { transition: "slide" },
+      cellIds: ["a", "b", "c"],
+      cellEntries: [
+        ["a", { type: "slide" }],
+        ["c", { type: "fragment" }],
+      ],
+    },
+  },
+  {
+    // Defensive: if a future version adds a new SlideConfig field and a user
+    // downgrades, we must not crash on unknown keys.
+    label: "forward-compat: unknown SlideConfig fields present",
+    input: {
+      cells: [{ type: "slide", notes: "x", background: "#000" }],
+    },
+    expected: {
+      deck: {},
+      cellIds: ["a"],
+      cellEntries: [["a", { type: "slide" }]],
+    },
+  },
+];
+
+describe("SlidesLayoutPlugin backwards compatibility", () => {
+  it.each(BACKWARDS_COMPAT_SNAPSHOTS)(
+    "loads snapshot: $label",
+    ({ input, expected }) => {
+      const cells = expected.cellIds.map((id) => makeCell(id));
+
+      // 1. Validator must accept the shape.
+      const parsed = SlidesLayoutPlugin.validator.safeParse(input);
+      expect(
+        parsed.success,
+        `validator rejected: ${JSON.stringify(input)}`,
+      ).toBe(true);
+
+      // 2. Deserialize must succeed and reflect the user-set fields.
+      const layout = SlidesLayoutPlugin.deserializeLayout(
+        // Use the raw input (not the validator output) because that is what
+        // `deserializeLayout` actually receives in production today.
+        // oxlint-disable-next-line typescript/no-explicit-any
+        input as any,
+        cells,
+      );
+      if (expected.deck !== undefined) {
+        expect(layout.deck).toEqual(expected.deck);
+      }
+      for (const [cellId, expectedConfig] of expected.cellEntries ?? []) {
+        expect(layout.cells.get(cellId as CellId)).toMatchObject(
+          expectedConfig as object,
+        );
+      }
+
+      // 3. Round trip must not throw and must preserve the same user fields.
+      const reserialized = SlidesLayoutPlugin.serializeLayout(layout, cells);
+      expect(
+        SlidesLayoutPlugin.validator.safeParse(reserialized).success,
+        `serializer produced a shape that no longer validates: ${JSON.stringify(reserialized)}`,
+      ).toBe(true);
+      const redeserialized = SlidesLayoutPlugin.deserializeLayout(
+        reserialized,
+        cells,
+      );
+      for (const [cellId, expectedConfig] of expected.cellEntries ?? []) {
+        expect(redeserialized.cells.get(cellId as CellId)).toMatchObject(
+          expectedConfig as object,
+        );
+      }
+      if (expected.deck !== undefined) {
+        expect(redeserialized.deck).toEqual(expected.deck);
+      }
+    },
+  );
+
+  it("current serializer output is captured by an inline snapshot", () => {
+    // If this snapshot changes you are changing the on-disk shape. That is
+    // allowed, but:
+    //   1. Add the previous shape to BACKWARDS_COMPAT_SNAPSHOTS above so we
+    //      keep proving we can still load it.
+    //   2. Update this inline snapshot.
+    const cells = [makeCell("a", "print('hello')"), makeCell("b", "x = 1")];
+    const serialized = SlidesLayoutPlugin.serializeLayout(
+      {
+        cells: new Map([
+          ["a" as CellId, { type: "slide" }],
+          ["b" as CellId, { type: "fragment" }],
+        ]),
+        deck: { transition: "fade" },
+      },
+      cells,
+    );
+    expect(serialized).toMatchInlineSnapshot(`
+      {
+        "cells": [
+          {
+            "type": "slide",
+          },
+          {
+            "type": "fragment",
+          },
+        ],
+        "deck": {
+          "transition": "fade",
+        },
+      }
+    `);
+  });
+});

package/src/components/editor/renderers/slides-layout/compute-slide-cells.ts

@@ -0,0 +1,50 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { CellId } from "@/core/cells/ids";
+import type { SlideType, SlidesLayout } from "./types";
+
+export interface SlideCellLike {
+  id: CellId;
+  output: { data: unknown } | null;
+}
+
+export interface SlideCellsInfo<T extends SlideCellLike> {
+  cellsWithOutput: T[];
+  skippedIds: Set<CellId>;
+  slideTypes: Map<CellId, SlideType>;
+  // Index of the first cell in `cellsWithOutput` that is not skipped
+  startCellIndex: number;
+}
+
+export function computeSlideCellsInfo<T extends SlideCellLike>(
+  cells: readonly T[],
+  layout: Pick<SlidesLayout, "cells">,
+): SlideCellsInfo<T> {
+  const cellsWithOutput = cells.filter(
+    (cell) => cell.output != null && cell.output.data !== "",
+  );
+  const skippedIds = new Set<CellId>();
+  const slideTypes = new Map<CellId, SlideType>();
+
+  let startCell: T | null = null;
+  let startCellIndex = 0;
+
+  for (const [index, cell] of cellsWithOutput.entries()) {
+    const type = layout.cells.get(cell.id)?.type;
+    if (type) {
+      slideTypes.set(cell.id, type);
+    }
+    if (type === "skip") {
+      skippedIds.add(cell.id);
+    } else if (startCell === null) {
+      startCell = cell;
+      startCellIndex = index;
+    }
+  }
+  return {
+    cellsWithOutput,
+    skippedIds,
+    slideTypes,
+    startCellIndex,
+  };
+}

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

@@ -3,29 +3,74 @@
 import { z } from "zod";
 import type { ICellRendererPlugin } from "../types";
 import { SlidesLayoutRenderer } from "./slides-layout";
-import type { SlidesLayout } from "./types";
+import type {
+  SerializedSlidesLayout,
+  SlideConfig,
+  SlidesLayout,
+} from "./types";
+import { Logger } from "@/utils/Logger";
+import type { CellId } from "@/core/cells/ids";
 
 /**
  * Plugin definition for the slides layout.
  */
 export const SlidesLayoutPlugin: ICellRendererPlugin<
-  SlidesLayout,
+  SerializedSlidesLayout,
   SlidesLayout
 > = {
   type: "slides",
   name: "Slides",
 
-  validator: z.object({}),
+  // All fields are optional so layouts saved by older marimo versions will work
+  validator: z.object({
+    cells: z
+      .array(
+        z.object({
+          type: z.enum(["slide", "sub-slide", "fragment", "skip"]).optional(),
+        }),
+      )
+      .optional(),
+    deck: z
+      .object({
+        transition: z
+          .enum(["none", "fade", "slide", "convex", "concave", "zoom"])
+          .optional(),
+      })
+      .optional(),
+  }),
 
-  deserializeLayout: (_serialized, _cells): SlidesLayout => {
-    return {};
-  },
+  deserializeLayout: (serialized, cells): SlidesLayout => {
+    const serializedCells = serialized.cells ?? [];
+    const deck = serialized.deck ?? {};
 
-  serializeLayout: (_layout, _cells): SlidesLayout => {
-    return {};
+    if (serializedCells.length > 0 && serializedCells.length !== cells.length) {
+      Logger.warn(
+        "Number of cells in layout does not match number of cells in notebook",
+      );
+    }
+
+    const slideCells = new Map<CellId, SlideConfig>();
+    for (const [idx, cell] of cells.entries()) {
+      const slideConfig = serializedCells.at(idx);
+      if (slideConfig) {
+        slideCells.set(cell.id, slideConfig);
+      }
+    }
+
+    return { cells: slideCells, deck };
   },
 
+  serializeLayout: (layout, cells): SerializedSlidesLayout => ({
+    cells: cells.map((cell) => ({
+      ...layout.cells.get(cell.id),
+    })),
+    deck: layout.deck,
+  }),
+
   Component: SlidesLayoutRenderer,
 
-  getInitialLayout: () => ({}),
+  getInitialLayout: () => ({
+    cells: new Map(),
+    deck: {},
+  }),
 };

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

@@ -1,10 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import React, { useRef, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import { useAtomValue } from "jotai";
 import { numColumnsAtom } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
 import type { ICellRendererProps } from "../types";
 import type { SlidesLayout } from "./types";
+import { computeSlideCellsInfo } from "./compute-slide-cells";
 import { SlidesMinimap } from "@/components/slides/minimap";
 import useEvent from "react-use-event-hook";
 import type { RevealApi } from "reveal.js";
@@ -16,9 +17,8 @@ const LazySlidesComponent = React.lazy(
 );
 
 export const SlidesLayoutRenderer: React.FC<Props> = ({
-  // Currently we don't have layout config
-  // layout,
-  // setLayout,
+  layout,
+  setLayout,
   cells,
   mode,
 }) => {
@@ -28,14 +28,16 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   const [activeCellId, setActiveCellId] = useState<CellId | null>(null);
   const deckRef = useRef<RevealApi | null>(null);
 
-  const cellsWithOutput = cells.filter(
-    (cell) => cell.output != null && cell.output.data !== "",
+  const { cellsWithOutput, skippedIds, slideTypes, startCellIndex } = useMemo(
+    () => computeSlideCellsInfo(cells, layout),
+    [cells, layout],
   );
 
   const activeSlideIndex = activeCellId
     ? cellsWithOutput.findIndex((c) => c.id === activeCellId)
-    : 0;
-  const resolvedIndex = activeSlideIndex === -1 ? 0 : activeSlideIndex;
+    : startCellIndex;
+  const resolvedIndex =
+    activeSlideIndex === -1 ? startCellIndex : activeSlideIndex;
 
   const handleSlideChange = useEvent((index: number) => {
     const cell = cellsWithOutput[index];
@@ -47,23 +49,39 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   const slides = (
     <LazySlidesComponent
       cellsWithOutput={cellsWithOutput}
+      layout={layout}
+      setLayout={setLayout}
       activeIndex={resolvedIndex}
       onSlideChange={handleSlideChange}
       deckRef={deckRef}
+      configWidth={250}
+      mode={mode}
     />
   );
 
   if (isReading) {
-    return <div className="p-4 flex flex-1 max-h-[95%]">{slides}</div>;
+    // Cap the deck height and derive width from height via aspect-video so it stays 16:9 without
+    // ballooning to the full viewport on wide screens.
+    return (
+      <div className="p-4 flex flex-1 items-center justify-center min-h-0">
+        <div className="h-full max-h-[95vh] aspect-video max-w-full flex">
+          {slides}
+        </div>
+      </div>
+    );
   }
 
   return (
-    // Use 11/12 to ensure all content fits on the page (no overflow, scrolling required)
-    <div className="pr-18 pb-5 flex-1 flex flex-row max-h-11/12 gap-2">
+    <div className="pr-18 pb-2 flex flex-row gap-2 min-h-0">
       <SlidesMinimap
         cells={cellsWithOutput}
+        thumbnailWidth={220}
         canReorder={!isMultiColumn}
-        activeCellId={activeCellId ?? cellsWithOutput[0]?.id ?? null}
+        activeCellId={
+          activeCellId ?? cellsWithOutput[startCellIndex]?.id ?? null
+        }
+        skippedIds={skippedIds}
+        slideTypes={slideTypes}
         onSlideClick={handleSlideChange}
       />
       {slides}