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

package/package.json

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

package/src/__tests__/mount.test.ts

@@ -1,8 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { getSerializedLayout } from "@/core/layout/layout";
+import { initialLayoutState, layoutStateAtom } from "@/core/layout/state";
+import { kioskModeAtom } from "@/core/mode";
 import { connectionAtom } from "@/core/network/connection";
 import { store } from "@/core/state/jotai";
+import { isStaticNotebook } from "@/core/static/static-state";
 import { WebSocketState } from "@/core/websocket/types";
 import { mount, visibleForTesting } from "../mount";
 
@@ -15,6 +19,8 @@ vi.mock("react-dom/client", () => ({
 
 // Mock static state
 vi.mock("@/core/static/static-state", () => ({
+  getStaticModelNotifications: vi.fn(() => undefined),
+  getStaticVirtualFiles: vi.fn(() => ({})),
   isStaticNotebook: vi.fn(() => false),
 }));
 
@@ -46,6 +52,10 @@ describe("mount", () => {
 
   beforeEach(() => {
     visibleForTesting.reset();
+    window.history.replaceState({}, "", "/");
+    vi.mocked(isStaticNotebook).mockReturnValue(false);
+    store.set(layoutStateAtom, initialLayoutState());
+    store.set(kioskModeAtom, false);
     // Reset connection atom to initial state
     store.set(connectionAtom, { state: WebSocketState.NOT_STARTED });
   });
@@ -66,6 +76,12 @@ describe("mount", () => {
     serverToken: "",
   };
 
+  const mountRead = (options: Record<string, unknown> = {}) =>
+    mount(
+      { ...baseOptions, mode: "read", runtimeConfig: [], ...options },
+      mockElement,
+    );
+
   describe("connection state initialization", () => {
     it("should set connection to CONNECTING when runtimeConfig has lazy=false", () => {
       mount(
@@ -106,8 +122,7 @@ describe("mount", () => {
       expect(connection.state).toBe(WebSocketState.NOT_STARTED);
     });
 
-    it("should keep connection as NOT_STARTED for static notebooks even with lazy=false", async () => {
-      const { isStaticNotebook } = await import("@/core/static/static-state");
+    it("should keep connection as NOT_STARTED for static notebooks even with lazy=false", () => {
       vi.mocked(isStaticNotebook).mockReturnValue(true);
 
       // Reset mount state to allow another mount
@@ -125,4 +140,41 @@ describe("mount", () => {
       expect(connection.state).toBe(WebSocketState.NOT_STARTED);
     });
   });
+
+  it("hydrates the layout embedded in the mount config", () => {
+    const layout = {
+      type: "slides",
+      data: {
+        deck: { transition: "fade", verticalAlign: "center" },
+      },
+    };
+    const error = mountRead({ layout });
+
+    expect(error).toBeUndefined();
+    const layoutState = store.get(layoutStateAtom);
+    expect(layoutState.selectedLayout).toBe("slides");
+    expect(getSerializedLayout()).toEqual({
+      type: "slides",
+      data: {
+        cells: [],
+        deck: { transition: "fade", verticalAlign: "center" },
+      },
+    });
+  });
+
+  it("uses vertical layout for malformed mount data", () => {
+    const error = mountRead({ layout: { data: {} } });
+
+    expect(error).toBeUndefined();
+    expect(store.get(layoutStateAtom)).toEqual(initialLayoutState());
+  });
+
+  it("starts kiosk clients in kiosk mode", () => {
+    window.history.replaceState({}, "", "/?kiosk=true");
+
+    const error = mountRead();
+
+    expect(error).toBeUndefined();
+    expect(store.get(kioskModeAtom)).toBe(true);
+  });
 });

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

@@ -3,7 +3,7 @@ import { render, screen } from "@testing-library/react";
 import { createStore, Provider } from "jotai";
 import { describe, expect, it, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { layoutStateAtom } from "@/core/layout/layout";
+import { layoutStateAtom } from "@/core/layout/state";
 import { kioskModeAtom, viewStateAtom } from "@/core/mode";
 import { API } from "@/core/network/api";
 import { ViewerBanner } from "../viewer-banner";

package/src/components/editor/actions/export-dialog/__tests__/export-notebook.test.ts

@@ -43,12 +43,17 @@ describe("exportNotebook", () => {
   let captureOutputs: Mock<() => Promise<void>>;
   let capturePNG: Mock<() => Promise<void>>;
   let downloadFile: Mock<(file: ExportedFile) => void>;
+  let getLayout: Mock;
 
   beforeEach(() => {
     requests = makeRequests();
     captureOutputs = vi.fn().mockResolvedValue(undefined);
     capturePNG = vi.fn().mockResolvedValue(undefined);
     downloadFile = vi.fn();
+    getLayout = vi.fn().mockResolvedValue({
+      type: "slides",
+      data: { deck: { transition: "fade" } },
+    });
   });
 
   const run = (
@@ -61,6 +66,7 @@ describe("exportNotebook", () => {
       requests,
       sourceFilename: "notebook.py",
       htmlFiles: ["data.csv"],
+      getLayout,
       captureOutputs,
       capturePNG,
       downloadFile,
@@ -73,8 +79,10 @@ describe("exportNotebook", () => {
       download: false,
       files: ["data.csv"],
       includeCode: false,
+      layout: { type: "slides", data: { deck: { transition: "fade" } } },
     });
     expect(downloadFile).toHaveBeenCalledWith(FILE);
+    expect(getLayout).toHaveBeenCalledOnce();
   });
 
   it("passes the selected Markdown flavor through the session API", async () => {
@@ -84,6 +92,7 @@ describe("exportNotebook", () => {
       download: false,
       flavor: "qmd",
     });
+    expect(getLayout).not.toHaveBeenCalled();
     expect(downloadFile).toHaveBeenCalledWith(FILE);
   });
 

package/src/components/editor/actions/export-dialog/export-notebook.ts

@@ -1,6 +1,10 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { EditRequests, ExportedFile } from "@/core/network/types";
+import type {
+  EditRequests,
+  ExportAsHTMLRequest,
+  ExportedFile,
+} from "@/core/network/types";
 import { assertNever } from "@/utils/assertNever";
 import { runServerSidePDFDownload } from "../pdf-export";
 import type { ExportFormat, ExportOptions } from "./state";
@@ -21,6 +25,7 @@ export async function exportNotebook({
   requests,
   sourceFilename,
   htmlFiles,
+  getLayout,
   captureOutputs,
   capturePNG,
   downloadFile,
@@ -30,6 +35,7 @@ export async function exportNotebook({
   requests: ExportRequests;
   sourceFilename: string;
   htmlFiles: string[];
+  getLayout: () => Promise<ExportAsHTMLRequest["layout"]>;
   captureOutputs: () => Promise<void>;
   capturePNG: () => Promise<void>;
   downloadFile: (file: ExportedFile) => void;
@@ -40,6 +46,7 @@ export async function exportNotebook({
         download: false,
         files: htmlFiles,
         includeCode: options.html.includeCode,
+        layout: await getLayout(),
       });
       downloadFile(file);
       return;

package/src/components/editor/actions/export-dialog/use-export-dialog.ts

@@ -7,6 +7,7 @@ import {
   updateCellOutputsWithScreenshots,
   useEnrichCellOutputs,
 } from "@/core/export/hooks";
+import { getExportLayout } from "@/core/export/layout";
 import { runDuringPresentMode, useInstallAllowed } from "@/core/mode";
 import { useRequestClient } from "@/core/network/requests";
 import type { ExportAvailabilityResponse } from "@/core/network/types";
@@ -349,6 +350,7 @@ function useExportDialogAction({
             requests,
             sourceFilename,
             htmlFiles: VirtualFileTracker.INSTANCE.filenames(),
+            getLayout: getExportLayout,
             captureOutputs: () => captureOutputs(progress),
             capturePNG,
             downloadFile: downloadExportedFile,

package/src/components/editor/actions/useNotebookActions.tsx

@@ -66,7 +66,7 @@ import { disabledCellIds } from "@/core/cells/utils";
 import { capabilitiesAtom } from "@/core/config/capabilities";
 import { aiEnabledAtom, useResolvedMarimoConfig } from "@/core/config/config";
 import { Constants } from "@/core/constants";
-import { useLayoutActions, useLayoutState } from "@/core/layout/layout";
+import { useLayoutActions, useLayoutState } from "@/core/layout/state";
 import { useTogglePresenting } from "@/core/layout/useTogglePresenting";
 import { kioskModeAtom, viewStateAtom } from "@/core/mode";
 import { useRequestClient } from "@/core/network/requests";

package/src/components/editor/controls/__tests__/notebook-menu-dropdown.test.tsx

@@ -18,7 +18,7 @@ import {
   invalidateDataSourceDiscovery,
 } from "@/core/datasets/data-source-discovery";
 import { DiscoverDataSources } from "@/core/datasets/request-registry";
-import { layoutStateAtom } from "@/core/layout/layout";
+import { layoutStateAtom } from "@/core/layout/state";
 import { kioskModeAtom, viewStateAtom } from "@/core/mode";
 import { connectionAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";

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

@@ -4,7 +4,7 @@ import { createStore, Provider } from "jotai";
 import { describe, expect, it } from "vitest";
 import { MockRequestClient } from "@/__mocks__/requests";
 import { parseAppConfig } from "@/core/config/config-schema";
-import { initialLayoutState, layoutStateAtom } from "@/core/layout/layout";
+import { initialLayoutState, layoutStateAtom } from "@/core/layout/state";
 import { type AppMode, kioskModeAtom } from "@/core/mode";
 import { requestClientAtom } from "@/core/network/requests";
 import { CellsRenderer } from "../cells-renderer";

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";