@marimo-team/frontend 0.23.3-dev9 → 0.23.3

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}

package/src/components/editor/renderers/slides-layout/types.ts

@@ -1,13 +1,41 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 /* oxlint-disable typescript/no-empty-object-type */
 
+import type { CellId } from "@/core/cells/ids";
+
 /**
  * The serialized form of a slides layout.
  * This must be backwards-compatible as it is stored on the user's disk.
  */
 // oxlint-disable-next-line typescript/consistent-type-definitions
-export type SerializedSlidesLayout = {};
+export type SerializedSlidesLayout = {
+  // Both fields are optional so files saved before these existed (e.g. the
+  // bare `{}` emitted by earlier marimo versions) still deserialize cleanly.
+  deck?: DeckConfig;
+  cells?: SlideConfig[];
+};
+
+export interface SlidesLayout extends Omit<
+  SerializedSlidesLayout,
+  "cells" | "deck"
+> {
+  // We map the cells to their IDs so that we can track them as they move around.
+  cells: Map<CellId, SlideConfig>;
+  deck: DeckConfig;
+}
+
+export type SlideType = "slide" | "sub-slide" | "fragment" | "skip";
+export interface SlideConfig {
+  type?: SlideType;
+}
 
-export interface SlidesLayout extends SerializedSlidesLayout {
-  // No additional properties for now
+export type DeckTransition =
+  | "none"
+  | "fade"
+  | "slide"
+  | "convex"
+  | "concave"
+  | "zoom";
+export interface DeckConfig {
+  transition?: DeckTransition;
 }

package/src/components/editor/renderers/types.ts

@@ -66,7 +66,9 @@ export interface ICellRendererPlugin<S, L> {
    */
   validator: ZodType<S>;
 
+  // Take a serialized layout and a list of cells, and return a layout object.
   deserializeLayout: (layout: S, cells: CellData[]) => L;
+  // Take the in-memory layout object and a list of cells, and return a serialized layout.
   serializeLayout: (layout: L, cells: CellData[]) => S;
 
   Component: React.FC<ICellRendererProps<L>>;