@marimo-team/islands 0.23.7-dev64 → 0.23.7-dev65

package/package.json

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

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

@@ -4,6 +4,7 @@ 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";
+import { cellId } from "@/__tests__/branded";
 
 interface TestCell {
   id: CellId;
@@ -15,10 +16,10 @@ const DEFAULT_OUTPUT: TestCell["output"] = { data: "ok" };
 const cell = (
   id: string,
   output: TestCell["output"] = DEFAULT_OUTPUT,
-): TestCell => ({ id: id as CellId, output });
+): TestCell => ({ id: cellId(id), output });
 
 const layoutOf = (entries: Array<[string, SlideConfig]>): SlidesLayout => ({
-  cells: new Map(entries.map(([id, cfg]) => [id as CellId, cfg])),
+  cells: new Map(entries.map(([id, cfg]) => [cellId(id), cfg])),
   deck: {},
 });
 
@@ -121,7 +122,7 @@ describe("computeSlideCellsInfo", () => {
     // 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");
+    expect(result.slideTypes.get(cellId("b"))).toBe("skip");
   });
 
   it("ignores layout entries for cells that have no output", () => {
@@ -137,7 +138,7 @@ describe("computeSlideCellsInfo", () => {
     );
     expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a"]);
     expect(result.skippedIds.size).toBe(0);
-    expect(result.slideTypes.has("b" as CellId)).toBe(false);
+    expect(result.slideTypes.has(cellId("b"))).toBe(false);
   });
 
   it("preserves the input order of cells in cellsWithOutput", () => {

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

@@ -4,10 +4,11 @@ import { describe, it, expect } from "vitest";
 import { SlidesLayoutPlugin } from "../plugin";
 import type { CellData } from "@/core/cells/types";
 import type { CellId } from "@/core/cells/ids";
+import { cellId } from "@/__tests__/branded";
 
 function makeCell(id: string, code = "print('hi')"): CellData {
   return {
-    id: id as CellId,
+    id: cellId(id),
     name: id,
     code,
     edited: false,
@@ -198,7 +199,10 @@ const BACKWARDS_COMPAT_SNAPSHOTS: BackwardsCompatCase[] = [
   },
   {
     // Defensive: if a future version adds a new SlideConfig field and a user
-    // downgrades, we must not crash on unknown keys.
+    // downgrades, we must not crash on unknown keys — AND we must not silently
+    // drop them either. `notes` / `background` aren't in the current schema;
+    // they must still be present after validate + (de)serialize so a downgrade
+    // followed by a save doesn't erase the newer marimo's data.
     label: "forward-compat: unknown SlideConfig fields present",
     input: {
       cells: [{ type: "slide", notes: "x", background: "#000" }],
@@ -206,7 +210,42 @@ const BACKWARDS_COMPAT_SNAPSHOTS: BackwardsCompatCase[] = [
     expected: {
       deck: {},
       cellIds: ["a"],
-      cellEntries: [["a", { type: "slide" }]],
+      cellEntries: [["a", { type: "slide", notes: "x", background: "#000" }]],
+    },
+  },
+  {
+    // Same forward-compat guarantee for unknown deck-level fields (e.g. future
+    // Reveal options we haven't modeled yet).
+    label: "forward-compat: unknown deck fields present",
+    input: {
+      cells: [{}],
+      deck: { transition: "fade", controls: false, autoSlide: 5000 },
+    },
+    expected: {
+      deck: { transition: "fade", controls: false, autoSlide: 5000 },
+      cellIds: ["a"],
+    },
+  },
+  {
+    // `speakerNotes` was added to SlideConfig. The validator must
+    // know about it (so it isn't silently stripped), the deserializer must
+    // carry it through, and serialize → deserialize must round-trip it.
+    label: "speakerNotes round-trips through validate + (de)serialize",
+    input: {
+      cells: [
+        { type: "slide", speakerNotes: "intro" },
+        { type: "fragment", speakerNotes: "" },
+        { type: "fragment", speakerNotes: "multi\n\nline\n\nnotes" },
+      ],
+    },
+    expected: {
+      deck: {},
+      cellIds: ["a", "b", "c"],
+      cellEntries: [
+        ["a", { type: "slide", speakerNotes: "intro" }],
+        ["b", { type: "fragment", speakerNotes: "" }],
+        ["c", { type: "fragment", speakerNotes: "multi\n\nline\n\nnotes" }],
+      ],
     },
   },
 ];
@@ -223,20 +262,21 @@ describe("SlidesLayoutPlugin backwards compatibility", () => {
         parsed.success,
         `validator rejected: ${JSON.stringify(input)}`,
       ).toBe(true);
+      if (!parsed.success) {
+        return;
+      }
 
-      // 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,
-      );
+      // 2. Deserializing the *validator output* (not the raw input) must
+      // preserve every field listed in `expected.cellEntries`. This is what
+      // catches a schema regression: if the validator silently strips a
+      // known field, the deserialized config won't carry it and the
+      // assertion below fails.
+      const layout = SlidesLayoutPlugin.deserializeLayout(parsed.data, 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(
+      for (const [cellEntryId, expectedConfig] of expected.cellEntries ?? []) {
+        expect(layout.cells.get(cellId(cellEntryId))).toMatchObject(
           expectedConfig as object,
         );
       }
@@ -251,8 +291,8 @@ describe("SlidesLayoutPlugin backwards compatibility", () => {
         reserialized,
         cells,
       );
-      for (const [cellId, expectedConfig] of expected.cellEntries ?? []) {
-        expect(redeserialized.cells.get(cellId as CellId)).toMatchObject(
+      for (const [cellEntryId, expectedConfig] of expected.cellEntries ?? []) {
+        expect(redeserialized.cells.get(cellId(cellEntryId))).toMatchObject(
           expectedConfig as object,
         );
       }

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

@@ -1,15 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { z } from "zod";
+import type { CellId } from "@/core/cells/ids";
+import { Logger } from "@/utils/Logger";
 import type { ICellRendererPlugin } from "../types";
 import { SlidesLayoutRenderer } from "./slides-layout";
-import type {
-  SerializedSlidesLayout,
-  SlideConfig,
-  SlidesLayout,
+import {
+  type SerializedSlidesLayout,
+  type SlideConfig,
+  type SlidesLayout,
+  SlidesLayoutSchema,
 } from "./types";
-import { Logger } from "@/utils/Logger";
-import type { CellId } from "@/core/cells/ids";
 
 /**
  * Plugin definition for the slides layout.
@@ -20,24 +20,7 @@ export const SlidesLayoutPlugin: ICellRendererPlugin<
 > = {
   type: "slides",
   name: "Slides",
-
-  // 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(),
-  }),
+  validator: SlidesLayoutSchema,
 
   deserializeLayout: (serialized, cells): SlidesLayout => {
     const serializedCells = serialized.cells ?? [];

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

@@ -3,6 +3,7 @@ import React, { useMemo, useState } from "react";
 import { useAtomValue } from "jotai";
 import { numColumnsAtom } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
+import { kioskModeAtom } from "@/core/mode";
 import type { ICellRendererProps } from "../types";
 import type { SlidesLayout } from "./types";
 import { computeSlideCellsInfo } from "./compute-slide-cells";
@@ -21,7 +22,10 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   cells,
   mode,
 }) => {
-  const isReading = mode === "read";
+  // Kiosk clients (e.g. reveal.js's speaker-view iframes) are read-only and
+  // shouldn't show authoring chrome, so we collapse to the read-mode layout.
+  const kioskMode = useAtomValue(kioskModeAtom);
+  const isReading = mode === "read" || kioskMode;
   const numColumns = useAtomValue(numColumnsAtom);
   const isMultiColumn = numColumns > 1;
   const [activeCellId, setActiveCellId] = useState<CellId | null>(null);
@@ -52,14 +56,23 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
       activeIndex={resolvedIndex}
       onSlideChange={handleSlideChange}
       configWidth={300}
-      mode={mode}
-      isEditable={mode !== "read"}
+      mode={isReading ? "read" : mode}
+      isEditable={!isReading}
     />
   );
 
   if (isReading) {
-    // 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.
+    // In kiosk mode (e.g. reveal.js's speaker-view iframes), anchor to the
+    // iframe viewport with `dvh`/`dvw` so the deck resizes with the popup
+    // window. The non-kiosk read mode keeps its 16:9 cap so the deck doesn't
+    // balloon to the full viewport on wide screens.
+    if (kioskMode) {
+      return (
+        <div className="flex h-dvh w-dvw overflow-hidden bg-background">
+          {slides}
+        </div>
+      );
+    }
     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">

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

@@ -1,41 +1,50 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* oxlint-disable typescript/no-empty-object-type */
 
+import { z } from "zod";
 import type { CellId } from "@/core/cells/ids";
 
+const SlideTypeSchema = z.enum(["slide", "sub-slide", "fragment", "skip"]);
+export type SlideType = z.infer<typeof SlideTypeSchema>;
+
+const SlideConfigSchema = z.looseObject({
+  type: SlideTypeSchema.optional(),
+  speakerNotes: z.string().optional(),
+});
+export type SlideConfig = z.infer<typeof SlideConfigSchema>;
+
+const DeckTransitionSchema = z.enum([
+  "none",
+  "fade",
+  "slide",
+  "convex",
+  "concave",
+  "zoom",
+]);
+export type DeckTransition = z.infer<typeof DeckTransitionSchema>;
+
+const DeckConfigSchema = z.looseObject({
+  transition: DeckTransitionSchema.optional(),
+});
+export type DeckConfig = z.infer<typeof DeckConfigSchema>;
+
 /**
- * The serialized form of a slides layout.
- * This must be backwards-compatible as it is stored on the user's disk.
+ * Schema for the serialized form of a slides layout.
+ *
+ * This must be backwards-compatible as it is stored on the user's disk —
+ * fields are optional so files saved before they existed (e.g. the bare `{}`
+ * emitted by earlier marimo versions) still deserialize cleanly. Unknown
+ * keys are preserved (via `looseObject`) for the same reason.
  */
-// oxlint-disable-next-line typescript/consistent-type-definitions
-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 const SlidesLayoutSchema = z.looseObject({
+  cells: z.array(SlideConfigSchema).optional(),
+  deck: DeckConfigSchema.optional(),
+});
+export type SerializedSlidesLayout = z.infer<typeof SlidesLayoutSchema>;
 
-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.
+/**
+ * Runtime form of a slides layout.
+ */
+export interface SlidesLayout {
   cells: Map<CellId, SlideConfig>;
   deck: DeckConfig;
 }
-
-export type SlideType = "slide" | "sub-slide" | "fragment" | "skip";
-export interface SlideConfig {
-  type?: SlideType;
-}
-
-export type DeckTransition =
-  | "none"
-  | "fade"
-  | "slide"
-  | "convex"
-  | "concave"
-  | "zoom";
-export interface DeckConfig {
-  transition?: DeckTransition;
-}

package/src/components/slides/__tests__/slide-notes.test.ts

@@ -0,0 +1,131 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import type {
+  SlideConfig,
+  SlideType,
+} from "@/components/editor/renderers/slides-layout/types";
+import type { CellId } from "@/core/cells/ids";
+import { cellId } from "@/__tests__/branded";
+import { composeSlides } from "../compose-slides";
+import { buildSubslideNotes, collectBlockNotes } from "../slide-notes";
+
+interface Cell {
+  id: CellId;
+  type?: SlideType;
+}
+
+const cell = (id: string, type?: SlideType): Cell => ({
+  id: cellId(id),
+  type,
+});
+
+const configs = (
+  notes: Record<string, string>,
+): ReadonlyMap<CellId, SlideConfig> =>
+  new Map(
+    Object.entries(notes).map(([id, speakerNotes]) => [
+      cellId(id),
+      { speakerNotes } satisfies SlideConfig,
+    ]),
+  );
+
+const firstSubslide = (cells: Cell[]) =>
+  composeSlides({ cells, getType: (c) => c.type ?? "slide" }).stacks[0]
+    .subslides[0];
+
+describe("collectBlockNotes", () => {
+  it("concatenates non-empty notes with paragraph spacing", () => {
+    const result = collectBlockNotes(
+      [cell("a"), cell("b"), cell("c")],
+      configs({ a: "first", b: "", c: "third" }),
+    );
+    expect(result).toBe("first\n\nthird");
+  });
+
+  it("returns an empty string when no cell has notes", () => {
+    expect(collectBlockNotes([cell("a")], configs({}))).toBe("");
+  });
+
+  it("ignores whitespace-only notes", () => {
+    expect(
+      collectBlockNotes([cell("a"), cell("b")], configs({ a: "   ", b: "x" })),
+    ).toBe("x");
+  });
+});
+
+describe("buildSubslideNotes", () => {
+  it("returns empty notes when no cell has any", () => {
+    const subslide = firstSubslide([cell("a"), cell("b", "fragment")]);
+    expect(buildSubslideNotes(subslide, configs({}))).toEqual({
+      slideLevel: "",
+      cumulativeByBlock: new Map(),
+    });
+  });
+
+  it("returns only slide-level notes when there are no fragments", () => {
+    const subslide = firstSubslide([cell("a")]);
+    expect(buildSubslideNotes(subslide, configs({ a: "intro" }))).toEqual({
+      slideLevel: "intro",
+      cumulativeByBlock: new Map(),
+    });
+  });
+
+  it("accumulates fragments below the slide-level notes with a divider", () => {
+    const subslide = firstSubslide([
+      cell("a"),
+      cell("b", "fragment"),
+      cell("c", "fragment"),
+    ]);
+    const { slideLevel, cumulativeByBlock } = buildSubslideNotes(
+      subslide,
+      configs({ a: "intro", b: "step one", c: "step two" }),
+    );
+    expect(slideLevel).toBe("intro");
+    expect(cumulativeByBlock.get(1)).toBe("intro\n\n---\n\nstep one");
+    expect(cumulativeByBlock.get(2)).toBe(
+      "intro\n\n---\n\nstep one\n\n---\n\nstep two",
+    );
+  });
+
+  it("accumulates fragments with no slide-level notes", () => {
+    const subslide = firstSubslide([
+      cell("a"),
+      cell("b", "fragment"),
+      cell("c", "fragment"),
+    ]);
+    const { slideLevel, cumulativeByBlock } = buildSubslideNotes(
+      subslide,
+      configs({ b: "first reveal", c: "second reveal" }),
+    );
+    expect(slideLevel).toBe("");
+    expect(cumulativeByBlock.get(1)).toBe("first reveal");
+    expect(cumulativeByBlock.get(2)).toBe(
+      "first reveal\n\n---\n\nsecond reveal",
+    );
+  });
+
+  it("skips empty fragments without leaving dangling dividers", () => {
+    const subslide = firstSubslide([
+      cell("a"),
+      cell("b", "fragment"),
+      cell("c", "fragment"),
+    ]);
+    const { cumulativeByBlock } = buildSubslideNotes(
+      subslide,
+      configs({ a: "intro", c: "third" }),
+    );
+    expect(cumulativeByBlock.get(1)).toBe("intro");
+    expect(cumulativeByBlock.get(2)).toBe("intro\n\n---\n\nthird");
+  });
+
+  it("returns no cumulative entries when fragments and slide have no notes", () => {
+    const subslide = firstSubslide([
+      cell("a"),
+      cell("b", "fragment"),
+      cell("c", "fragment"),
+    ]);
+    const { cumulativeByBlock } = buildSubslideNotes(subslide, configs({}));
+    expect(cumulativeByBlock.size).toBe(0);
+  });
+});