@marimo-team/frontend 0.24.1-dev80 → 0.24.1-dev82

package/src/components/editor/renderers/cells-renderer.tsx

@@ -5,19 +5,15 @@ import type React from "react";
 import { memo, type PropsWithChildren } from "react";
 import { flattenTopLevelNotebookCells, useNotebook } from "@/core/cells/cells";
 import type { AppConfig } from "@/core/config/config-schema";
-import { KnownQueryParams } from "@/core/constants";
+import { resolveLayoutData } from "@/core/layout/layout";
 import {
-  type LayoutData,
+  resolveLayoutType,
   useLayoutActions,
   useLayoutState,
-} from "@/core/layout/layout";
+} from "@/core/layout/state";
 import { type AppMode, kioskModeAtom } from "@/core/mode";
 import { cellRendererPlugins } from "./plugins";
-import {
-  type ICellRendererPlugin,
-  type LayoutType,
-  OVERRIDABLE_LAYOUT_TYPES,
-} from "./types";
+import type { ICellRendererPlugin } from "./types";
 
 interface Props {
   appConfig: AppConfig;
@@ -26,7 +22,7 @@ interface Props {
 
 export const CellsRenderer: React.FC<PropsWithChildren<Props>> = memo(
   ({ appConfig, mode, children }) => {
-    const { selectedLayout, layoutData } = useLayoutState();
+    const { selectedLayout } = useLayoutState();
     const kioskMode = useAtomValue(kioskModeAtom);
 
     // Render children (the editable notebook) in edit mode, and in present
@@ -43,14 +39,11 @@ export const CellsRenderer: React.FC<PropsWithChildren<Props>> = memo(
     // We allow overriding the layout type by url params when in 'read' mode,
     // for example, forcing the 'slides' view.
     // https://marimo.app/?slug=14ovyr8&mode=run&view-as=slides
-    let finalLayout = selectedLayout;
-    const params = new URLSearchParams(window.location.search);
-    if (mode === "read" && params.has(KnownQueryParams.viewAs)) {
-      const viewAsOverride = params.get(KnownQueryParams.viewAs);
-      if (OVERRIDABLE_LAYOUT_TYPES.includes(viewAsOverride as LayoutType)) {
-        finalLayout = viewAsOverride as LayoutType;
-      }
-    }
+    const finalLayout = resolveLayoutType({
+      selectedLayout,
+      isReading: mode === "read",
+      searchParams: new URLSearchParams(window.location.search),
+    });
 
     const plugin = cellRendererPlugins.find((p) => p.type === finalLayout);
 
@@ -60,13 +53,7 @@ export const CellsRenderer: React.FC<PropsWithChildren<Props>> = memo(
     }
 
     return (
-      <PluginCellRenderer
-        appConfig={appConfig}
-        mode={mode}
-        plugin={plugin}
-        layoutData={layoutData}
-        finalLayout={finalLayout}
-      />
+      <PluginCellRenderer appConfig={appConfig} mode={mode} plugin={plugin} />
     );
   },
 );
@@ -77,15 +64,15 @@ interface PluginCellRendererProps extends PropsWithChildren<Props> {
   mode: AppMode;
   // oxlint-disable-next-line typescript/no-explicit-any
   plugin: ICellRendererPlugin<any, any>;
-  layoutData: Partial<Record<LayoutType, LayoutData>>;
-  finalLayout: LayoutType;
 }
 
 export const PluginCellRenderer = (props: PluginCellRendererProps) => {
-  const { appConfig, mode, plugin, layoutData, finalLayout } = props;
+  const { appConfig, mode, plugin } = props;
+  const layoutState = useLayoutState();
   const notebook = useNotebook();
   const { setCurrentLayoutData } = useLayoutActions();
   const cells = flattenTopLevelNotebookCells(notebook);
+  const layout = resolveLayoutData({ state: layoutState, plugin, cells });
 
   const Renderer = plugin.Component;
   const body = (
@@ -93,7 +80,7 @@ export const PluginCellRenderer = (props: PluginCellRendererProps) => {
       appConfig={appConfig}
       mode={mode}
       cells={cells}
-      layout={layoutData[finalLayout] || plugin.getInitialLayout(cells)}
+      layout={layout}
       setLayout={setCurrentLayoutData}
     />
   );

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

@@ -0,0 +1,42 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { MockNotebook } from "@/__mocks__/notebook";
+import { cellId } from "@/__tests__/branded";
+import { deserializeLayout } from "../../plugins";
+
+describe("GridLayoutPlugin validation", () => {
+  it("preserves valid cell positions while normalizing optional fields", () => {
+    const a = cellId("a");
+    const b = cellId("b");
+    const { cellData } = MockNotebook.notebookState({
+      cellData: { [a]: {}, [b]: {} },
+    });
+    const layout = deserializeLayout({
+      type: "grid",
+      data: {
+        columns: 12,
+        rowHeight: 20,
+        maxWidth: null,
+        cells: [
+          {
+            position: [0, 0, 6, 4],
+            side: "right",
+          },
+          {
+            position: [1, 4, 6, 4],
+            side: "future-side",
+          },
+        ],
+      },
+      cells: [cellData[a], cellData[b]],
+    });
+
+    expect(layout.maxWidth).toBeUndefined();
+    expect(layout.cellSide).toEqual(new Map([["a", "right"]]));
+    expect(layout.cells).toEqual([
+      { i: "a", x: 0, y: 0, w: 6, h: 4 },
+      { i: "b", x: 1, y: 4, w: 6, h: 4 },
+    ]);
+  });
+});

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

@@ -24,19 +24,29 @@ export const GridLayoutPlugin: ICellRendererPlugin<
   type: "grid",
   name: "Grid",
 
-  validator: z.object({
+  validator: z.looseObject({
     columns: z.number().min(1),
     rowHeight: z.number().min(1),
-    maxWidth: z.number().optional(),
-    bordered: z.boolean().optional(),
+    maxWidth: z
+      .number()
+      .nullish()
+      .transform((value) => value ?? undefined)
+      .catch(undefined),
+    bordered: z.boolean().optional().catch(undefined),
     cells: z.array(
-      z.object({
-        position: z
-          .tuple([z.number(), z.number(), z.number(), z.number()])
-          .nullable(),
-        scrollable: z.boolean().optional(),
-        alignment: z.enum(["top", "bottom", "left", "right"]).optional(),
-      }),
+      z
+        .looseObject({
+          position: z
+            .tuple([z.number(), z.number(), z.number(), z.number()])
+            .nullable()
+            .catch(null),
+          scrollable: z.boolean().optional().catch(undefined),
+          side: z
+            .enum(["top", "bottom", "left", "right"])
+            .optional()
+            .catch(undefined),
+        })
+        .catch({ position: null }),
     ),
   }),
 

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

@@ -17,7 +17,7 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { getFeatureFlag } from "@/core/config/feature-flag";
-import { useLayoutActions, useLayoutState } from "@/core/layout/layout";
+import { useLayoutActions, useLayoutState } from "@/core/layout/state";
 import { isWasm } from "@/core/wasm/utils";
 import { logNever } from "@/utils/assertNever";
 import { Strings } from "@/utils/strings";

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

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { CellData } from "@/core/cells/types";
+import { Logger } from "@/utils/Logger";
 import { GridLayoutPlugin } from "./grid-layout/plugin";
 import { SlidesLayoutPlugin } from "./slides-layout/plugin";
 import type { ICellRendererPlugin, LayoutType } from "./types";
@@ -27,5 +28,10 @@ export function deserializeLayout({
   if (plugin === undefined) {
     throw new Error(`Unknown layout type: ${type}`);
   }
-  return plugin.deserializeLayout(data, cells);
+  const parsed = plugin.validator.safeParse(data);
+  if (!parsed.success) {
+    Logger.warn(`Invalid ${type} layout`, parsed.error);
+    return plugin.getInitialLayout(cells);
+  }
+  return plugin.deserializeLayout(parsed.data, cells);
 }

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

@@ -1,10 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } 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";
+import { deserializeLayout } from "../../plugins";
+import { Logger } from "@/utils/Logger";
 
 function makeCell(id: string, code = "print('hi')"): CellData {
   return {
@@ -35,12 +37,36 @@ describe("SlidesLayoutPlugin validator", () => {
     ).toBe(true);
   });
 
-  it("rejects unknown slide types", () => {
-    expect(
-      SlidesLayoutPlugin.validator.safeParse({
-        cells: [{ type: "bogus" }],
-      }).success,
-    ).toBe(false);
+  it("drops unsupported fields while preserving the rest of the layout", () => {
+    const layout = deserializeLayout({
+      type: "slides",
+      data: {
+        cells: [
+          {
+            type: "bogus",
+            speakerNotes: "Keep these notes",
+            futureCellOption: true,
+          },
+          { type: "fragment" },
+        ],
+        deck: {
+          transition: "future-transition",
+          verticalAlign: "center",
+          futureDeckOption: true,
+        },
+      },
+      cells: [makeCell("a"), makeCell("b")],
+    });
+
+    expect(layout.cells.get("a" as CellId)).toEqual({
+      speakerNotes: "Keep these notes",
+      futureCellOption: true,
+    });
+    expect(layout.cells.get("b" as CellId)).toEqual({ type: "fragment" });
+    expect(layout.deck).toEqual({
+      verticalAlign: "center",
+      futureDeckOption: true,
+    });
   });
 
   it("accepts each valid deck vertical alignment", () => {
@@ -52,12 +78,21 @@ describe("SlidesLayoutPlugin validator", () => {
     }
   });
 
-  it("rejects an unknown deck vertical alignment", () => {
-    expect(
-      SlidesLayoutPlugin.validator.safeParse({
-        deck: { verticalAlign: "middle" },
-      }).success,
-    ).toBe(false);
+  it("falls back to the initial layout when serialized data is invalid", () => {
+    const warning = vi
+      .spyOn(Logger, "warn")
+      .mockImplementation(() => undefined);
+    try {
+      expect(
+        deserializeLayout({
+          type: "slides",
+          data: null,
+          cells: [makeCell("a")],
+        }),
+      ).toEqual({ cells: new Map(), deck: {} });
+    } finally {
+      warning.mockRestore();
+    }
   });
 });
 
@@ -169,8 +204,7 @@ describe("SlidesLayoutPlugin serializeLayout", () => {
  *   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),
+ *   1. pass the zod validator used during load,
  *   2. deserialize without throwing,
  *   3. survive a deserialize → serialize → deserialize round trip without
  *      throwing or losing any user-set field carried in the expectations.

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

@@ -8,6 +8,7 @@ import type { ICellRendererProps } from "../types";
 import type { SlidesLayout } from "./types";
 import { computeSlideCellsInfo } from "./compute-slide-cells";
 import { SlidesMinimap } from "@/components/slides/minimap";
+import { isSpeakerViewReceiver } from "@/components/slides/speaker-view";
 import useEvent from "react-use-event-hook";
 
 type Props = ICellRendererProps<SlidesLayout>;
@@ -38,6 +39,19 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
     : startCellIndex;
   const resolvedIndex =
     activeSlideIndex === -1 ? startCellIndex : activeSlideIndex;
+  const isSpeakerReceiver = isSpeakerViewReceiver(
+    kioskMode,
+    window.location.search,
+  );
+  // Let reveal.js resolve an initial URL coordinate before React resumes
+  // controlling the deck through the active cell.
+  const isInitialDeepLink =
+    isReading && activeCellId == null && window.location.hash.startsWith("#/");
+  // Speaker-view receivers take their position from reveal.js messages and
+  // the URL hash. Controlling their index here can push the presenter back to
+  // the first slide while the receiver initializes.
+  const controlledIndex =
+    isSpeakerReceiver || isInitialDeepLink ? undefined : resolvedIndex;
 
   const handleSlideChange = useEvent((index: number) => {
     const cell = slideCells[index];
@@ -52,8 +66,8 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
       layout={layout}
       setLayout={setLayout}
       noOutputIds={noOutputIds}
-      activeIndex={resolvedIndex}
-      onSlideChange={handleSlideChange}
+      activeIndex={controlledIndex}
+      onSlideChange={isSpeakerReceiver ? undefined : handleSlideChange}
       configWidth={280}
       mode={isReading ? "read" : mode}
       isEditable={!isReading}

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

@@ -6,11 +6,13 @@ 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(),
-  showCode: z.boolean().optional(),
-});
+const SlideConfigSchema = z
+  .looseObject({
+    type: SlideTypeSchema.optional().catch(undefined),
+    speakerNotes: z.string().optional().catch(undefined),
+    showCode: z.boolean().optional().catch(undefined),
+  })
+  .catch({});
 export type SlideConfig = z.infer<typeof SlideConfigSchema>;
 
 const DeckTransitionSchema = z.enum([
@@ -26,10 +28,12 @@ export type DeckTransition = z.infer<typeof DeckTransitionSchema>;
 const DeckVerticalAlignSchema = z.enum(["top", "center", "bottom"]);
 export type DeckVerticalAlign = z.infer<typeof DeckVerticalAlignSchema>;
 
-const DeckConfigSchema = z.looseObject({
-  transition: DeckTransitionSchema.optional(),
-  verticalAlign: DeckVerticalAlignSchema.optional(),
-});
+const DeckConfigSchema = z
+  .looseObject({
+    transition: DeckTransitionSchema.optional().catch(undefined),
+    verticalAlign: DeckVerticalAlignSchema.optional().catch(undefined),
+  })
+  .catch({});
 export type DeckConfig = z.infer<typeof DeckConfigSchema>;
 
 /**
@@ -41,8 +45,8 @@ export type DeckConfig = z.infer<typeof DeckConfigSchema>;
  * keys are preserved (via `looseObject`) for the same reason.
  */
 export const SlidesLayoutSchema = z.looseObject({
-  cells: z.array(SlideConfigSchema).optional(),
-  deck: DeckConfigSchema.optional(),
+  cells: z.array(SlideConfigSchema).optional().catch(undefined),
+  deck: DeckConfigSchema.optional().catch(undefined),
 });
 export type SerializedSlidesLayout = z.infer<typeof SlidesLayoutSchema>;
 

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

@@ -37,11 +37,11 @@ export interface ICellRendererProps<L> {
   setLayout: (layout: L) => void;
 }
 
-export type LayoutType = "vertical" | "grid" | "slides";
-/**
- * List of supported layout types, in the order to be displayed.
- */
-export const LAYOUT_TYPES: LayoutType[] = ["vertical", "grid", "slides"];
+export const LAYOUT_TYPES = ["vertical", "grid", "slides"] as const;
+export type LayoutType = (typeof LAYOUT_TYPES)[number];
+export function isLayoutType(value: string): value is LayoutType {
+  return (LAYOUT_TYPES as readonly string[]).includes(value);
+}
 /**
  * Overridable layout types.
  * These types can override the current layout via a URL parameter.

package/src/components/editor/viewer-banner.tsx

@@ -3,7 +3,7 @@
 import { useAtomValue } from "jotai/react";
 import { ArrowRightSquareIcon, EyeIcon } from "lucide-react";
 import { KnownQueryParams } from "@/core/constants";
-import { useLayoutState } from "@/core/layout/layout";
+import { useLayoutState } from "@/core/layout/state";
 import { kioskModeAtom, viewStateAtom } from "@/core/mode";
 import { API } from "@/core/network/api";
 import { Banner } from "@/plugins/impl/common/error-banner";

package/src/components/pages/run-page.tsx

@@ -1,12 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { Panel, PanelGroup } from "react-resizable-panels";
+import { useAtomValue } from "jotai";
 import { MarimoIcon } from "@/components/icons/marimo-icons";
 import type { AppConfig } from "@/core/config/config-schema";
 import { Constants } from "@/core/constants";
+import { resolveLayoutType, useLayoutState } from "@/core/layout/state";
 import { RunApp } from "@/core/run-app";
-import { isStaticNotebook } from "@/core/static/static-state";
-import { isWasm } from "@/core/wasm/utils";
+import { runtimeAdapterAtom } from "@/core/runtime/adapter";
 import { ContextAwarePanel } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { PanelsWrapper } from "../editor/chrome/wrapper/panels";
 import { StaticBanner } from "../static-html/static-banner";
@@ -15,16 +16,24 @@ interface Props {
   appConfig: AppConfig;
 }
 
-const showWatermark = isWasm() || isStaticNotebook();
-
 const RunPage = (props: Props) => {
+  const runtimeKind = useAtomValue(runtimeAdapterAtom).kind;
+  const isExportedNotebook = runtimeKind === "static" || runtimeKind === "wasm";
+  const { selectedLayout } = useLayoutState();
+  const finalLayout = resolveLayoutType({
+    selectedLayout,
+    isReading: true,
+    searchParams: new URLSearchParams(window.location.search),
+  });
+  const isExportedSlides = isExportedNotebook && finalLayout === "slides";
+
   return (
     <PanelsWrapper>
       <PanelGroup direction="horizontal" autoSaveId="marimo:chrome:v1:run1">
         <Panel>
-          <StaticBanner />
-          <RunApp appConfig={props.appConfig} />
-          {showWatermark && <Watermark />}
+          {!isExportedSlides && <StaticBanner />}
+          <RunApp appConfig={props.appConfig} hideHeader={isExportedSlides} />
+          {isExportedNotebook && !isExportedSlides && <Watermark />}
         </Panel>
         <ContextAwarePanel />
       </PanelGroup>

package/src/components/slides/__tests__/reveal-component.test.ts

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { act, renderHook } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { cellId } from "@/__tests__/branded";
 import type { CellId } from "@/core/cells/ids";
 import type { RuntimeCell } from "@/core/cells/types";
@@ -10,6 +10,7 @@ import {
   deckSlideType,
   parkedRendersSource,
   shouldShowCode,
+  syncCodeToggleKeyBinding,
   useParkedPreview,
 } from "../reveal-component";
 
@@ -24,14 +25,38 @@ const cells = (
 // to this test helper (see `@/__tests__/branded` for the same rationale).
 const cell = (id: CellId): RuntimeCell => ({ id }) as RuntimeCell;
 
+describe("syncCodeToggleKeyBinding", () => {
+  it("tracks whether code is available after Reveal is ready", () => {
+    const deck = {
+      addKeyBinding: vi.fn(),
+      removeKeyBinding: vi.fn(),
+    };
+    const onToggle = vi.fn();
+
+    syncCodeToggleKeyBinding({ deck, enabled: false, onToggle });
+    expect(deck.removeKeyBinding).toHaveBeenLastCalledWith(67);
+    expect(deck.addKeyBinding).not.toHaveBeenCalled();
+
+    syncCodeToggleKeyBinding({ deck, enabled: true, onToggle });
+    expect(deck.addKeyBinding).toHaveBeenCalledWith(
+      {
+        keyCode: 67,
+        key: "C",
+        description: "Toggle code editor",
+      },
+      onToggle,
+    );
+  });
+});
+
 describe("shouldShowCode", () => {
-  it("is off when the code toggle is unavailable, regardless of config/override", () => {
+  it("is off when code is unavailable, regardless of config/override", () => {
     expect(
       shouldShowCode({
         cells: cells([A, { showCode: true }]),
         cellId: A,
         showCodeOverrides: new Set([A]),
-        codeToggleEnabled: false,
+        codeAvailable: false,
       }),
     ).toBe(false);
   });
@@ -42,7 +67,7 @@ describe("shouldShowCode", () => {
         cells: cells([A, { showCode: true }]),
         cellId: undefined,
         showCodeOverrides: new Set(),
-        codeToggleEnabled: true,
+        codeAvailable: true,
       }),
     ).toBe(false);
   });
@@ -53,7 +78,7 @@ describe("shouldShowCode", () => {
         cells: cells([A, { showCode: true }]),
         cellId: A,
         showCodeOverrides: new Set(),
-        codeToggleEnabled: true,
+        codeAvailable: true,
       }),
     ).toBe(true);
     // Missing config entry defaults to off.
@@ -62,7 +87,7 @@ describe("shouldShowCode", () => {
         cells: cells(),
         cellId: A,
         showCodeOverrides: new Set(),
-        codeToggleEnabled: true,
+        codeAvailable: true,
       }),
     ).toBe(false);
   });
@@ -74,7 +99,7 @@ describe("shouldShowCode", () => {
         cells: cells(),
         cellId: A,
         showCodeOverrides: new Set([A]),
-        codeToggleEnabled: true,
+        codeAvailable: true,
       }),
     ).toBe(true);
     // Configured + override present -> still shown; the override never hides.
@@ -83,7 +108,7 @@ describe("shouldShowCode", () => {
         cells: cells([A, { showCode: true }]),
         cellId: A,
         showCodeOverrides: new Set([A]),
-        codeToggleEnabled: true,
+        codeAvailable: true,
       }),
     ).toBe(true);
   });

package/src/components/slides/__tests__/speaker-view.test.ts

@@ -0,0 +1,27 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import {
+  createSpeakerViewUrl,
+  isSpeakerViewReceiver,
+  supportsSpeakerView,
+} from "../speaker-view";
+
+describe("speaker view policy", () => {
+  it("builds a receiver base URL independently of the active Reveal hash", () => {
+    expect(
+      createSpeakerViewUrl("https://example.test/deck?theme=dark#/2/1"),
+    ).toBe("https://example.test/deck?theme=dark&kiosk=true&show-chrome=false");
+  });
+
+  it("recognizes kiosk receiver frames", () => {
+    expect(isSpeakerViewReceiver(true, "?kiosk=true&receiver")).toBe(true);
+    expect(isSpeakerViewReceiver(false, "?receiver")).toBe(false);
+  });
+
+  it("keeps speaker view on shared and static runtimes", () => {
+    expect(supportsSpeakerView("remote")).toBe(true);
+    expect(supportsSpeakerView("static")).toBe(true);
+    expect(supportsSpeakerView("wasm")).toBe(false);
+  });
+});