@marimo-team/islands 0.25.3-dev182 → 0.25.3-dev186

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.25.3-dev182",
+  "version": "0.25.3-dev186",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -216,7 +216,7 @@
     "msw": "^2.15.0",
     "npm-run-all2": "^6.2.6",
     "oxc-transform-react": "0.145.0",
-    "oxfmt": "^0.73.0",
+    "oxfmt": "^0.74.0",
     "oxlint": "^1.88.0",
     "postcss": "^8.5.29",
     "postcss-prefix-selector": "^2.2.1",

package/src/components/slides/__tests__/slide-scroll-hint.test.tsx

@@ -195,4 +195,41 @@ describe("SlideScrollContainer", () => {
 
     expect(screen.queryByTestId("slide-scroll-hint")).toBeNull();
   });
+
+  it.each([
+    { scale: 0.5, fragmentOffset: 1000, expected: true },
+    { scale: 2, fragmentOffset: 500, expected: false },
+  ])(
+    "measures revealed content in canvas coordinates at scale $scale",
+    ({ scale, fragmentOffset, expected }) => {
+      render(
+        <SlideScrollContainer>
+          <div>revealed content</div>
+          <div className="fragment">unrevealed content</div>
+        </SlideScrollContainer>,
+      );
+
+      const container = screen.getByTestId("slide-scroll-container");
+      const fragment = container.querySelector<HTMLElement>(".fragment");
+      if (!fragment) {
+        throw new Error("Missing fragment");
+      }
+      stubOverflow(container, { scrollHeight: 1200, clientHeight: 720 });
+      Object.defineProperty(container, "offsetHeight", { value: 720 });
+      vi.spyOn(container, "getBoundingClientRect").mockReturnValue(
+        DOMRect.fromRect({ y: 100, height: 720 * scale }),
+      );
+      vi.spyOn(fragment, "getBoundingClientRect").mockReturnValue(
+        DOMRect.fromRect({ y: 100 + fragmentOffset * scale }),
+      );
+
+      act(() => {
+        for (const observer of resizeObservers) {
+          observer.callback([], observer as unknown as ResizeObserver);
+        }
+      });
+
+      expect(screen.queryByTestId("slide-scroll-hint") !== null).toBe(expected);
+    },
+  );
 });

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

@@ -69,6 +69,8 @@ import {
 } from "./speaker-view";
 
 const ASPECT_RATIO = 16 / 9;
+const SLIDE_WIDTH = 1280;
+const SLIDE_HEIGHT = SLIDE_WIDTH / ASPECT_RATIO;
 const CODE_TOGGLE_KEY_CODE = 67;
 
 // Reveal retains custom key bindings after initialization. Replace the `C`
@@ -133,8 +135,11 @@ function classifyNavKey(event: KeyboardEvent): 1 | -1 | 0 {
   return 0;
 }
 
-function useSlideDimensions(ref: React.RefObject<HTMLDivElement | null>) {
-  const [dims, setDims] = useState({ width: 960, height: 540 });
+function useSlideViewportSize(ref: React.RefObject<HTMLDivElement | null>) {
+  const [dims, setDims] = useState({
+    width: SLIDE_WIDTH,
+    height: SLIDE_HEIGHT,
+  });
 
   useEffect(() => {
     const el = ref.current;
@@ -482,8 +487,21 @@ const RevealSlidesComponent = ({
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const deckRef = useRef<RevealApi | null>(null);
-  const { width, height } = useSlideDimensions(containerRef);
+  const { width, height } = useSlideViewportSize(containerRef);
   const isFullscreen = useFullScreenElement() != null;
+  const [slideScale, setSlideScale] = useState(1);
+
+  useEffect(() => {
+    // Embedded decks also resize when panels change, without a window resize.
+    const frame = requestAnimationFrame(() => {
+      const deck = deckRef.current;
+      if (deck) {
+        deck.layout();
+        setSlideScale(deck.getScale());
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [width, height, isFullscreen]);
 
   // A receiver frame cannot spawn another speaker view. WebAssembly exports
   // also omit the plugin because each receiver would start another runtime.
@@ -589,10 +607,10 @@ const RevealSlidesComponent = ({
   const revealConfig: RevealConfig = useMemo(
     () => ({
       embedded: true,
-      width,
-      height,
+      width: SLIDE_WIDTH,
+      height: SLIDE_HEIGHT,
       center: false,
-      minScale: 0.2,
+      minScale: 0,
       maxScale: 2,
       transition: deckTransition,
       keyboardCondition: (event: KeyboardEvent) => !Events.fromInput(event),
@@ -602,7 +620,7 @@ const RevealSlidesComponent = ({
       // `@revealjs/react` owns, which crashes on `reveal.sync()` re-renders.
       scrollActivationWidth: 0,
     }),
-    [width, height, deckTransition, kioskUrl],
+    [deckTransition, kioskUrl],
   );
 
   const navigateDeckToActiveCell = useEvent((deck: RevealApi) => {
@@ -703,6 +721,7 @@ const RevealSlidesComponent = ({
   });
 
   const handleDeckReady = useEvent((deck: RevealApi) => {
+    setSlideScale(deck.getScale());
     navigateDeckToActiveCell(deck);
     if (canResolveInitialHash) {
       reportDeckCell(deck);
@@ -829,22 +848,33 @@ const RevealSlidesComponent = ({
                 <span>{parkedPreviewLabel}</span>
               </div>
             )}
-            <div className="flex-1 overflow-auto flex">
-              <div
-                className={
-                  parkedShowsSource
-                    ? "mo-slide-content flex flex-col gap-3"
-                    : "mo-slide-content"
-                }
-                style={slideContentStyle}
-              >
-                <ParkedPreviewContent
-                  cell={parkedPreviewCell}
-                  isNoOutputPreview={isNoOutputPreview}
-                  isEditable={isEditable}
-                  showCode={parkedShowCode}
-                />
-              </div>
+            <div
+              className="reveal mo-slides-theme prose-slides absolute left-1/2 top-1/2"
+              data-testid="slide-preview-canvas"
+              style={{
+                position: "absolute",
+                width: SLIDE_WIDTH,
+                height: SLIDE_HEIGHT,
+                transform: `translate(-50%, -50%) scale(${slideScale})`,
+              }}
+            >
+              <SlideScrollContainer>
+                <div
+                  className={
+                    parkedShowsSource
+                      ? "mo-slide-content flex flex-col gap-3"
+                      : "mo-slide-content"
+                  }
+                  style={slideContentStyle}
+                >
+                  <ParkedPreviewContent
+                    cell={parkedPreviewCell}
+                    isNoOutputPreview={isNoOutputPreview}
+                    isEditable={isEditable}
+                    showCode={parkedShowCode}
+                  />
+                </div>
+              </SlideScrollContainer>
             </div>
           </div>
         )}

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

@@ -1,5 +1,10 @@
 @import "reveal.js/reveal.css";
 
+/* Reveal scales the canvas; responsive rem sizes would reflow its content. */
+html:has(.reveal.mo-slides-theme) {
+  font-size: 100%;
+}
+
 /* Neutralize reveal-viewport styles so the slides inherit marimo's defaults */
 .reveal-viewport {
   background-color: transparent;
@@ -11,10 +16,6 @@
 .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);
 }

package/src/components/slides/slide-scroll-hint.tsx

@@ -41,8 +41,10 @@ function measureRevealedHeight(el: HTMLElement): number {
   if (!firstUnrevealed) {
     return el.scrollHeight;
   }
+  const bounds = el.getBoundingClientRect();
+  const scale = el.offsetHeight > 0 ? bounds.height / el.offsetHeight : 1;
   const fragmentTop = firstUnrevealed.getBoundingClientRect().top;
-  return fragmentTop - el.getBoundingClientRect().top + el.scrollTop;
+  return (fragmentTop - bounds.top) / (scale || 1) + el.scrollTop;
 }
 
 /**