@marimo-team/islands 0.23.2-dev54 → 0.23.2-dev58

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

@@ -1,18 +1,18 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import React, { useState } from "react";
+import React, { 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 { SlidesMinimap } from "@/components/slides/minimap";
-import { Slide } from "@/components/slides/slide";
 import useEvent from "react-use-event-hook";
+import type { RevealApi } from "reveal.js";
 
 type Props = ICellRendererProps<SlidesLayout>;
 
 const LazySlidesComponent = React.lazy(
-  () => import("../../../slides/slides-component"),
+  () => import("../../../slides/reveal-component"),
 );
 
 export const SlidesLayoutRenderer: React.FC<Props> = ({
@@ -26,6 +26,7 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   const numColumns = useAtomValue(numColumnsAtom);
   const isMultiColumn = numColumns > 1;
   const [activeCellId, setActiveCellId] = useState<CellId | null>(null);
+  const deckRef = useRef<RevealApi | null>(null);
 
   const cellsWithOutput = cells.filter(
     (cell) => cell.output != null && cell.output.data !== "",
@@ -45,24 +46,15 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
 
   const slides = (
     <LazySlidesComponent
-      forceKeyboardNavigation={true}
-      className="flex-1 self-center"
+      cellsWithOutput={cellsWithOutput}
       activeIndex={resolvedIndex}
-      onActiveIndexChange={handleSlideChange}
-    >
-      {cellsWithOutput.map((cell) => (
-        <Slide
-          key={cell.id}
-          cellId={cell.id}
-          status={cell.status}
-          output={cell.output}
-        />
-      ))}
-    </LazySlidesComponent>
+      onSlideChange={handleSlideChange}
+      deckRef={deckRef}
+    />
   );
 
   if (isReading) {
-    return <div className="p-4 flex flex-col flex-1 max-h-[95%]">{slides}</div>;
+    return <div className="p-4 flex flex-1 max-h-[95%]">{slides}</div>;
   }
 
   return (

package/src/components/slides/reveal-component.tsx

@@ -0,0 +1,109 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useEffect } from "react";
+import { ExpandIcon } from "lucide-react";
+import { Deck, Slide } from "@revealjs/react";
+import { Slide as CellOutputSlide } from "@/components/slides/slide";
+import { Button } from "@/components/ui/button";
+import { Tooltip } from "@/components/ui/tooltip";
+import type { CellData, CellRuntimeState } from "@/core/cells/types";
+import type { RevealApi } from "reveal.js";
+import { Events } from "@/utils/events";
+import { Logger } from "@/utils/Logger";
+
+import "./slides.css";
+import "./reveal-slides.css";
+
+const RevealSlidesComponent = ({
+  cellsWithOutput,
+  activeIndex,
+  onSlideChange,
+  deckRef,
+}: {
+  cellsWithOutput: (CellRuntimeState & CellData)[];
+  activeIndex?: number;
+  onSlideChange?: (index: number) => void;
+  deckRef: React.RefObject<RevealApi | null>;
+}) => {
+  useEffect(() => {
+    const deck = deckRef.current;
+    if (deck == null || activeIndex == null) {
+      return;
+    }
+    const { h } = deck.getIndices();
+    if (h !== activeIndex) {
+      deck.slide(activeIndex);
+    }
+  }, [activeIndex, deckRef]);
+
+  return (
+    <div className="group relative h-full w-full flex-1">
+      <Deck
+        deckRef={deckRef}
+        className="relative w-full h-full border rounded bg-background mo-slides-theme prose-slides"
+        style={{ height: "100%" }}
+        config={{
+          embedded: true, // Avoid styles leaking out
+          overview: false,
+          width: "100%",
+          height: "100%", // Both style and config height are needed to ensure the deck is full height
+          center: false, // We are handling this manually
+          minScale: 1,
+          maxScale: 1,
+          // Only enable keyboard controls when not focused on an input
+          keyboardCondition: (event: KeyboardEvent) => {
+            return !Events.fromInput(event);
+          },
+        }}
+        onSlideChange={() => {
+          const deck = deckRef.current;
+          if (deck) {
+            onSlideChange?.(deck.getIndices().h);
+            // Trigger resize so vega-embed re-measures container width
+            if (
+              deck.getCurrentSlide()?.querySelector(".vega-embed, marimo-vega")
+            ) {
+              requestAnimationFrame(() => {
+                window.dispatchEvent(new Event("resize"));
+              });
+            }
+          }
+        }}
+      >
+        {cellsWithOutput.map((cell) => (
+          <Slide key={cell.id}>
+            <div className="h-full w-full overflow-auto flex">
+              <div className="mo-slide-content" style={{ margin: "auto 0" }}>
+                <CellOutputSlide
+                  cellId={cell.id}
+                  status={cell.status}
+                  output={cell.output}
+                />
+              </div>
+            </div>
+          </Slide>
+        ))}
+      </Deck>
+      <Tooltip content="Fullscreen (F)">
+        <Button
+          data-testid="marimo-plugin-slides-fullscreen"
+          variant="ghost"
+          size="icon"
+          className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-70 text-muted-foreground transition-opacity h-7 w-7"
+          onClick={() => {
+            deckRef.current
+              ?.getViewportElement()
+              ?.requestFullscreen()
+              .catch((error) => {
+                Logger.error("Failed to request fullscreen", error);
+              });
+          }}
+        >
+          <ExpandIcon className="h-4 w-4" />
+        </Button>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default RevealSlidesComponent;

package/src/components/slides/reveal-slides.css

@@ -0,0 +1,42 @@
+@import "reveal.js/reveal.css";
+
+/* Neutralize reveal-viewport styles so the slides inherit marimo's defaults */
+.reveal-viewport {
+  background-color: transparent;
+  color: inherit;
+  line-height: inherit;
+  overflow: visible;
+  height: auto;
+}
+.reveal-viewport:fullscreen {
+  background-color: var(--background);
+}
+.reveal-viewport:fullscreen .mo-slide-content {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+.reveal-viewport::backdrop {
+  background-color: var(--background);
+}
+
+/* Ensure .reveal inherits marimo's font/color instead of setting its own */
+.mo-slides-theme.reveal {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+/* Use marimo's primary color for controls and progress */
+.mo-slides-theme.reveal .controls {
+  color: var(--primary);
+}
+.mo-slides-theme.reveal .progress {
+  color: var(--primary);
+}
+
+.reveal .slides {
+  text-align: unset;
+}
+
+.reveal .slides > section {
+  height: 100%;
+}

package/src/components/slides/slides.css

@@ -1,68 +1,3 @@
-@import "swiper/css";
-@import "swiper/css/virtual";
-@import "swiper/css/navigation";
-@import "swiper/css/pagination";
-@import "swiper/css/scrollbar";
-
-.mo-slides-theme {
-  --swiper-theme-color: var(--primary);
-  --swiper-pagination-color: var(--swiper-theme-color);
-  --swiper-pagination-left: auto;
-  --swiper-pagination-right: 8px;
-  --swiper-pagination-bottom: 8px;
-  --swiper-pagination-top: auto;
-  --swiper-pagination-fraction-color: inherit;
-  --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
-  --swiper-pagination-progressbar-size: 4px;
-  --swiper-pagination-bullet-size: 8px;
-  --swiper-pagination-bullet-width: 8px;
-  --swiper-pagination-bullet-height: 8px;
-  --swiper-pagination-bullet-border-radius: 50%;
-  --swiper-pagination-bullet-inactive-color: #000;
-  --swiper-pagination-bullet-inactive-opacity: 0.2;
-  --swiper-pagination-bullet-opacity: 1;
-  --swiper-pagination-bullet-horizontal-gap: 4px;
-  --swiper-pagination-bullet-vertical-gap: 6px;
-
-  .swiper-button-prev,
-  .swiper-button-next {
-    height: 100%;
-    top: 0;
-    bottom: 0;
-    background-color: rgba(0, 0, 0, 0.1);
-    opacity: 0;
-    padding: 0 15px;
-    transition: opacity 0.3s;
-    font-weight: 900;
-    margin-top: 0;
-
-    --swiper-navigation-sides-offset: 0;
-    --swiper-navigation-size: 20px;
-
-    &.swiper-button-disabled {
-      opacity: 0;
-    }
-
-    &:hover:not(.swiper-button-disabled) {
-      opacity: 1;
-    }
-  }
-}
-
-@font-face {
-  font-family: "swiper-icons";
-  src: url("data:application/font-woff;charset=utf-8;base64, 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");
-  font-weight: 400;
-  font-style: normal;
-}
-
-/* The swiper library adds styles to `:host` which is a global selector we use for other components,
-so we are resetting this back to initial. */
-/* 2 hosts to increase specificity */
-:host:host {
-  display: initial;
-}
-
 /* The slides  is full width, but centers the inside content to fit the width of the content. */
 .mo-slide-content {
   width: 100%;

package/src/components/slides/{slides-component.tsx → swiper-component.tsx}

@@ -14,6 +14,7 @@ import { useEventListener } from "@/hooks/useEventListener";
 import { useIframeCapabilities } from "@/hooks/useIframeCapabilities";
 import { cn } from "@/utils/cn";
 
+import "./swiper-slides.css";
 import "./slides.css";
 
 interface SlidesComponentProps {

package/src/components/slides/swiper-slides.css

@@ -0,0 +1,64 @@
+@import "swiper/css";
+@import "swiper/css/virtual";
+@import "swiper/css/navigation";
+@import "swiper/css/pagination";
+@import "swiper/css/scrollbar";
+
+.mo-slides-theme {
+  --swiper-theme-color: var(--primary);
+  --swiper-pagination-color: var(--swiper-theme-color);
+  --swiper-pagination-left: auto;
+  --swiper-pagination-right: 8px;
+  --swiper-pagination-bottom: 8px;
+  --swiper-pagination-top: auto;
+  --swiper-pagination-fraction-color: inherit;
+  --swiper-pagination-progressbar-bg-color: rgba(0, 0, 0, 0.25);
+  --swiper-pagination-progressbar-size: 4px;
+  --swiper-pagination-bullet-size: 8px;
+  --swiper-pagination-bullet-width: 8px;
+  --swiper-pagination-bullet-height: 8px;
+  --swiper-pagination-bullet-border-radius: 50%;
+  --swiper-pagination-bullet-inactive-color: #000;
+  --swiper-pagination-bullet-inactive-opacity: 0.2;
+  --swiper-pagination-bullet-opacity: 1;
+  --swiper-pagination-bullet-horizontal-gap: 4px;
+  --swiper-pagination-bullet-vertical-gap: 6px;
+
+  .swiper-button-prev,
+  .swiper-button-next {
+    height: 100%;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.1);
+    opacity: 0;
+    padding: 0 15px;
+    transition: opacity 0.3s;
+    font-weight: 900;
+    margin-top: 0;
+
+    --swiper-navigation-sides-offset: 0;
+    --swiper-navigation-size: 20px;
+
+    &.swiper-button-disabled {
+      opacity: 0;
+    }
+
+    &:hover:not(.swiper-button-disabled) {
+      opacity: 1;
+    }
+  }
+}
+
+@font-face {
+  font-family: "swiper-icons";
+  src: url("data:application/font-woff;charset=utf-8;base64, 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");
+  font-weight: 400;
+  font-style: normal;
+}
+
+/* The swiper library adds styles to `:host` which is a global selector we use for other components,
+so we are resetting this back to initial. */
+/* 2 hosts to increase specificity */
+:host:host {
+  display: initial;
+}

package/src/core/wasm/__tests__/bridge.test.ts

@@ -0,0 +1,113 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const { mockNotebookReadFile, rpcListeners } = vi.hoisted(() => ({
+  mockNotebookReadFile: vi.fn(),
+  rpcListeners: {} as Record<string, () => void>,
+}));
+
+// Mock browser globals before any imports
+vi.stubGlobal("crossOriginIsolated", false);
+vi.stubGlobal(
+  "Worker",
+  vi.fn(() => ({
+    addEventListener: vi.fn(),
+    postMessage: vi.fn(),
+    terminate: vi.fn(),
+  })),
+);
+
+class MockURL extends URL {
+  static override createObjectURL = vi.fn(() => "blob:mock-url");
+  static override revokeObjectURL = vi.fn();
+}
+vi.stubGlobal("URL", MockURL);
+
+vi.mock("@/core/wasm/rpc", () => ({
+  getWorkerRPC: () => ({
+    proxy: {
+      request: {
+        bridge: vi.fn(),
+        startSession: vi.fn(),
+        readFile: vi.fn(),
+        readNotebook: vi.fn(),
+        saveNotebook: vi.fn(),
+      },
+      send: { consumerReady: vi.fn() },
+    },
+    addMessageListener: (event: string, cb: () => void) => {
+      rpcListeners[event] = cb;
+    },
+  }),
+}));
+
+vi.mock("@/core/meta/globals", () => ({
+  getMarimoVersion: () => "0.0.0-test",
+}));
+
+vi.mock("@/core/wasm/utils", () => ({
+  isWasm: () => true,
+}));
+
+vi.mock("@/core/wasm/store", () => ({
+  fallbackFileStore: { readFile: vi.fn(), saveFile: vi.fn() },
+  notebookFileStore: { readFile: mockNotebookReadFile, saveFile: vi.fn() },
+}));
+
+// Import after all mocks are set up
+import { store } from "@/core/state/jotai";
+import { initialModeAtom } from "@/core/mode";
+import { PyodideBridge } from "../bridge";
+
+// Access INSTANCE once at module level so the constructor runs (and
+// addMessageListener populates rpcListeners) before any test executes.
+void PyodideBridge.INSTANCE;
+
+describe("PyodideBridge.readCode", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    store.set(initialModeAtom, undefined);
+  });
+
+  it("reads from notebookFileStore in read mode", async () => {
+    store.set(initialModeAtom, "read");
+    // Trigger getSaveWorker — it reads the current mode and returns a stub
+    // whose readNotebook delegates to notebookFileStore.
+    rpcListeners.initialized();
+    mockNotebookReadFile.mockResolvedValue(
+      "import numpy as np\nprint(np.__version__)",
+    );
+
+    const result = await PyodideBridge.INSTANCE.readCode();
+
+    expect(result).toEqual({
+      contents: "import numpy as np\nprint(np.__version__)",
+    });
+    expect(mockNotebookReadFile).toHaveBeenCalledTimes(1);
+  });
+
+  it("returns empty string when notebookFileStore has no code in read mode", async () => {
+    store.set(initialModeAtom, "read");
+    rpcListeners.initialized();
+    mockNotebookReadFile.mockResolvedValue(null);
+
+    const result = await PyodideBridge.INSTANCE.readCode();
+
+    expect(result).toEqual({ contents: "" });
+  });
+
+  it("does not call notebookFileStore in edit mode", async () => {
+    store.set(initialModeAtom, "edit");
+    // getSaveWorker in edit mode creates a real worker (mocked); readNotebook
+    // goes to the RPC proxy, not notebookFileStore.
+    rpcListeners.initialized();
+
+    await PyodideBridge.INSTANCE.readCode();
+
+    expect(mockNotebookReadFile).not.toHaveBeenCalled();
+  });
+});

package/src/core/wasm/bridge.ts

@@ -67,10 +67,10 @@ export class PyodideBridge implements RunRequests, EditRequests {
 
   private getSaveWorker(): SaveWorker {
     if (getInitialAppMode() === "read") {
-      Logger.debug("Skipping SaveWorker in read-mode");
+      Logger.debug("Using partially disabled SaveWorker in read-mode");
       return {
         readFile: throwNotImplemented,
-        readNotebook: throwNotImplemented,
+        readNotebook: async () => (await notebookFileStore.readFile()) ?? "",
         saveNotebook: throwNotImplemented,
       };
     }

package/src/plugins/layout/carousel/CarouselPlugin.tsx

@@ -8,6 +8,7 @@ import swiperCssVirtual from "swiper/css/virtual?inline";
 import swiperCss from "swiper/css?inline";
 import { z } from "zod";
 import slidesCss from "@/components/slides/slides.css?inline";
+import swiperSlidesCss from "@/components/slides/swiper-slides.css?inline";
 import type {
   IStatelessPlugin,
   IStatelessPluginProps,
@@ -34,6 +35,7 @@ export class CarouselPlugin implements IStatelessPlugin<Data> {
     swiperCssPagination,
     swiperCssScrollbar,
     slidesCss,
+    swiperSlidesCss,
   ];
 
   render(props: IStatelessPluginProps<Data>): JSX.Element {
@@ -46,5 +48,5 @@ export class CarouselPlugin implements IStatelessPlugin<Data> {
 }
 
 const LazySlidesComponent = React.lazy(
-  () => import("../../../components/slides/slides-component"),
+  () => import("../../../components/slides/swiper-component"),
 );

package/dist/apl-Y7yFAg6_.js

@@ -1,4 +0,0 @@
-import { t as apl } from "./apl-BqjtmlWW.js";
-export {
-  apl
-};

package/dist/architecture-7HQA4BMR-CATq-AgL.js

@@ -1,6 +0,0 @@
-import "./chunk-TCCFYFTB-vYPbT9fw.js";
-import "./main-CvkAPtaq.js";
-import { n as createArchitectureServices, t as ArchitectureModule } from "./chunk-UMXZTB3W-BVL6vS7M.js";
-export {
-  createArchitectureServices
-};

package/dist/asciiarmor-Bl8b2p0w.js

@@ -1,4 +0,0 @@
-import { t as asciiArmor } from "./asciiarmor-D9C9bbeV.js";
-export {
-  asciiArmor
-};

package/dist/asn1-BF6cywqm.js

@@ -1,4 +0,0 @@
-import { t as asn1 } from "./asn1-D_zR1ubK.js";
-export {
-  asn1
-};

package/dist/brainfuck-BuqydWe3.js

@@ -1,4 +0,0 @@
-import { t as brainfuck } from "./brainfuck-79SC7EYA.js";
-export {
-  brainfuck
-};

package/dist/classDiagram-2ON5EDUG-B3w6nMDy.js

@@ -1,30 +0,0 @@
-import "./purify.es-ClMna40y.js";
-import "./chunk-S3R3BYOJ-BbDagUDj.js";
-import { r as __name } from "./src-szye8OCw.js";
-import "./chunk-ABZYJK2D-TzeWxQkr.js";
-import "./chunk-HN2XXSSU-GC9oeSst.js";
-import "./chunk-CVBHYZKI-DqdOZevv.js";
-import "./chunk-ATLVNIR6-BIyR7hDU.js";
-import "./dist-CqR8FBcH.js";
-import "./chunk-JA3XYJ7Z-B1i4Tfcw.js";
-import "./chunk-JZLCHNYA-CNdDVlto.js";
-import "./chunk-QXUST7PY-D8Zb-uHT.js";
-import "./chunk-N4CR4FBY-BTIG-LyN.js";
-import "./chunk-FMBD7UC4-WPL5C7Yr.js";
-import "./chunk-55IACEB6-wWyiO7Qo.js";
-import "./chunk-QN33PNHL-Bu0A3trl.js";
-import { i as styles_default, n as classDiagram_default, r as classRenderer_v3_unified_default, t as ClassDB } from "./chunk-B4BG7PRW-HwU7LyDE.js";
-var diagram = {
-  parser: classDiagram_default,
-  get db() {
-    return new ClassDB();
-  },
-  renderer: classRenderer_v3_unified_default,
-  styles: styles_default,
-  init: /* @__PURE__ */ __name((e) => {
-    e.class || (e.class = {}), e.class.arrowMarkerAbsolute = e.arrowMarkerAbsolute;
-  }, "init")
-};
-export {
-  diagram
-};

package/dist/classDiagram-v2-WZHVMYZB-F3IQS_LI.js

@@ -1,30 +0,0 @@
-import "./purify.es-ClMna40y.js";
-import "./chunk-S3R3BYOJ-BbDagUDj.js";
-import { r as __name } from "./src-szye8OCw.js";
-import "./chunk-ABZYJK2D-TzeWxQkr.js";
-import "./chunk-HN2XXSSU-GC9oeSst.js";
-import "./chunk-CVBHYZKI-DqdOZevv.js";
-import "./chunk-ATLVNIR6-BIyR7hDU.js";
-import "./dist-CqR8FBcH.js";
-import "./chunk-JA3XYJ7Z-B1i4Tfcw.js";
-import "./chunk-JZLCHNYA-CNdDVlto.js";
-import "./chunk-QXUST7PY-D8Zb-uHT.js";
-import "./chunk-N4CR4FBY-BTIG-LyN.js";
-import "./chunk-FMBD7UC4-WPL5C7Yr.js";
-import "./chunk-55IACEB6-wWyiO7Qo.js";
-import "./chunk-QN33PNHL-Bu0A3trl.js";
-import { i as styles_default, n as classDiagram_default, r as classRenderer_v3_unified_default, t as ClassDB } from "./chunk-B4BG7PRW-HwU7LyDE.js";
-var diagram = {
-  parser: classDiagram_default,
-  get db() {
-    return new ClassDB();
-  },
-  renderer: classRenderer_v3_unified_default,
-  styles: styles_default,
-  init: /* @__PURE__ */ __name((e) => {
-    e.class || (e.class = {}), e.class.arrowMarkerAbsolute = e.arrowMarkerAbsolute;
-  }, "init")
-};
-export {
-  diagram
-};

package/dist/clojure-CAHAWK5H.js

@@ -1,4 +0,0 @@
-import { t as clojure } from "./clojure-Bb3Od9By.js";
-export {
-  clojure
-};

package/dist/cmake-BogDc4GF.js

@@ -1,4 +0,0 @@
-import { t as cmake } from "./cmake-DYGUYEtU.js";
-export {
-  cmake
-};

package/dist/cobol-DRnpeU4u.js

@@ -1,4 +0,0 @@
-import { t as cobol } from "./cobol-CcWmcAFT.js";
-export {
-  cobol
-};

package/dist/coffeescript-9MgX7RN8.js

@@ -1,4 +0,0 @@
-import { t as coffeeScript } from "./coffeescript-BVa1qoL6.js";
-export {
-  coffeeScript
-};

package/dist/commonlisp-CVz2KONN.js

@@ -1,4 +0,0 @@
-import { t as commonLisp } from "./commonlisp-zi51jgUH.js";
-export {
-  commonLisp
-};

package/dist/crystal-td8mwLG5.js

@@ -1,4 +0,0 @@
-import { t as crystal } from "./crystal-QjpegJHM.js";
-export {
-  crystal
-};

package/dist/css-BK451dBn.js

@@ -1,4 +0,0 @@
-import { n as mkCSS, t as gss } from "./css-B_GfJtcK.js";
-export {
-  gss
-};

package/dist/cypher-DuNPR6Ie.js

@@ -1,4 +0,0 @@
-import { t as cypher } from "./cypher-BVuYJpGf.js";
-export {
-  cypher
-};

package/dist/d-DL6oP_-2.js

@@ -1,4 +0,0 @@
-import { t as d } from "./d-BT97RiQI.js";
-export {
-  d
-};

package/dist/diff-D9CplOBj.js

@@ -1,4 +0,0 @@
-import { t as diff } from "./diff-CHd93v7L.js";
-export {
-  diff
-};

package/dist/dist-B9hNC-E9.js

@@ -1,5 +0,0 @@
-import "./dist-DPAK3Dpl.js";
-import { n as jsonLanguage, t as json } from "./dist-BH67T-KO.js";
-export {
-  json
-};