@marimo-team/islands 0.25.3-dev29 → 0.25.3-dev291

package/src/components/slides/__tests__/minimap-actions.test.tsx

@@ -6,25 +6,36 @@ import { cellId } from "@/__tests__/branded";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { CellId } from "@/core/cells/ids";
 import type { CellData, CellRuntimeState } from "@/core/cells/types";
-import { MultiColumn } from "@/utils/id-tree";
+import type { CellColumnId } from "@/core/cells/layout";
 import { SlidesMinimap } from "../minimap";
 
 const A = cellId("a");
 const B = cellId("b");
 
 // Spies shared with the hoisted module mocks below.
-const { createNewCell, deleteCell, moveCellToIndex } = vi.hoisted(() => ({
-  createNewCell: vi.fn(),
+const { createCell, deleteCell, moveCellToIndex } = vi.hoisted(() => ({
+  createCell: vi.fn(),
   deleteCell: vi.fn(),
   moveCellToIndex: vi.fn(),
 }));
 
-vi.mock("@/core/cells/cells", async (importOriginal) => {
-  const actual = await importOriginal<typeof import("@/core/cells/cells")>();
+vi.mock("@/core/cells/actions", () => ({
+  useCellActions: () => ({ moveCellToIndex, createCell }),
+}));
+vi.mock("@/core/cells/layout", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/core/cells/layout")>();
   return {
     ...actual,
-    useCellActions: () => ({ moveCellToIndex, createNewCell }),
-    useCellIds: () => MultiColumn.from([[A, B]]),
+    useLayout: () => ({
+      columns: [
+        {
+          id: "column-0" as CellColumnId,
+          ids: [A, B],
+          visible: [A, B],
+          folds: new Map(),
+        },
+      ],
+    }),
   };
 });
 
@@ -91,8 +102,6 @@ function renderMinimap() {
   return { ...utils, onSlideClick };
 }
 
-const EMPTY_CELL = { code: "", autoFocus: false } as const;
-
 describe("SlidesMinimap insert lines", () => {
   it("inserts a blank cell above the first row and below any row", () => {
     renderMinimap();
@@ -102,25 +111,13 @@ describe("SlidesMinimap insert lines", () => {
     expect(inserts).toHaveLength(3);
 
     fireEvent.click(inserts[0]);
-    expect(createNewCell).toHaveBeenLastCalledWith({
-      cellId: A,
-      before: true,
-      ...EMPTY_CELL,
-    });
+    expect(createCell).toHaveBeenLastCalledWith({ before: A, focus: false });
 
     fireEvent.click(inserts[1]);
-    expect(createNewCell).toHaveBeenLastCalledWith({
-      cellId: A,
-      before: false,
-      ...EMPTY_CELL,
-    });
+    expect(createCell).toHaveBeenLastCalledWith({ after: A, focus: false });
 
     fireEvent.click(inserts[2]);
-    expect(createNewCell).toHaveBeenLastCalledWith({
-      cellId: B,
-      before: false,
-      ...EMPTY_CELL,
-    });
+    expect(createCell).toHaveBeenLastCalledWith({ after: B, focus: false });
   });
 });
 
@@ -135,11 +132,7 @@ describe("SlidesMinimap context menu", () => {
     const { container } = renderMinimap();
     openRowMenu(container, A);
     fireEvent.click(screen.getByText("Add cell"));
-    expect(createNewCell).toHaveBeenCalledWith({
-      cellId: A,
-      before: false,
-      ...EMPTY_CELL,
-    });
+    expect(createCell).toHaveBeenCalledWith({ after: A, focus: false });
   });
 
   it('"Delete cell" deletes the row\'s cell', () => {

package/src/components/slides/__tests__/minimap.test.ts

@@ -4,7 +4,7 @@ import { renderHook, act } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type { CellId } from "@/core/cells/ids";
 import type { DragMoveEvent } from "@dnd-kit/core";
-import { MultiColumn } from "@/utils/id-tree";
+import type { CellColumnId, Layout } from "@/core/cells/layout";
 import { exportedForTesting } from "../minimap";
 
 const { useVisibleCellIds, projectDropTarget, resolveDropTarget } =
@@ -318,15 +318,23 @@ describe("resolveDropTarget", () => {
   const C = "c" as CellId;
   const D = "d" as CellId;
 
-  function makeSingleColumnIds(...ids: CellId[]) {
-    return MultiColumn.from([ids]);
+  function makeLayout(...columns: CellId[][]): Layout {
+    return {
+      columns: columns.map((ids, index) => ({
+        id: `column-${index}` as CellColumnId,
+        ids,
+        visible: ids,
+        folds: new Map(),
+      })),
+    };
   }
+  const makeSingleColumnIds = (...ids: CellId[]) => makeLayout(ids);
 
   it("returns null when activeId matches target overId", () => {
-    const cellIds = makeSingleColumnIds(A, B);
+    const layout = makeSingleColumnIds(A, B);
     expect(
       resolveDropTarget({
-        cellIds,
+        layout,
         activeId: A,
         target: { overId: A, position: "after" },
       }),
@@ -334,68 +342,79 @@ describe("resolveDropTarget", () => {
   });
 
   it("returns null for multi-column layouts", () => {
-    const cellIds = MultiColumn.from([[A, B], [C]]);
+    const layout = makeLayout([A, B], [C]);
     expect(
       resolveDropTarget({
-        cellIds,
+        layout,
         activeId: A,
         target: { overId: B, position: "after" },
       }),
     ).toBeNull();
   });
 
+  it("returns null when the over cell has left the layout", () => {
+    const layout = makeSingleColumnIds(A, B);
+    expect(
+      resolveDropTarget({
+        layout,
+        activeId: A,
+        target: { overId: C, position: "after" },
+      }),
+    ).toBeNull();
+  });
+
   it('resolves "before" to the over index', () => {
-    const cellIds = makeSingleColumnIds(A, B, C);
+    const layout = makeSingleColumnIds(A, B, C);
     const result = resolveDropTarget({
-      cellIds,
+      layout,
       activeId: A,
       target: { overId: C, position: "before" },
     });
     expect(result).toEqual({
       cellId: A,
-      columnId: cellIds.atOrThrow(0).id,
+      columnId: layout.columns[0].id,
       index: 2,
     });
   });
 
   it('resolves "after" to one past the over index', () => {
-    const cellIds = makeSingleColumnIds(A, B, C);
+    const layout = makeSingleColumnIds(A, B, C);
     const result = resolveDropTarget({
-      cellIds,
+      layout,
       activeId: C,
       target: { overId: A, position: "after" },
     });
     expect(result).toEqual({
       cellId: C,
-      columnId: cellIds.atOrThrow(0).id,
+      columnId: layout.columns[0].id,
       index: 1,
     });
   });
 
   it('resolves "before" on first item to index 0', () => {
-    const cellIds = makeSingleColumnIds(A, B, C);
+    const layout = makeSingleColumnIds(A, B, C);
     const result = resolveDropTarget({
-      cellIds,
+      layout,
       activeId: C,
       target: { overId: A, position: "before" },
     });
     expect(result).toEqual({
       cellId: C,
-      columnId: cellIds.atOrThrow(0).id,
+      columnId: layout.columns[0].id,
       index: 0,
     });
   });
 
   it('resolves "after" on last item to one past the end', () => {
-    const cellIds = makeSingleColumnIds(A, B, C, D);
+    const layout = makeSingleColumnIds(A, B, C, D);
     const result = resolveDropTarget({
-      cellIds,
+      layout,
       activeId: A,
       target: { overId: D, position: "after" },
     });
     expect(result).toEqual({
       cellId: A,
-      columnId: cellIds.atOrThrow(0).id,
+      columnId: layout.columns[0].id,
       index: 4,
     });
   });

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/minimap.tsx

@@ -2,9 +2,10 @@
 
 import { useDeleteCellCallback } from "@/components/editor/cell/useDeleteCell";
 import { outputIsStale } from "@/core/cells/cell";
-import { useCellActions, useCellIds } from "@/core/cells/cells";
+import { useCellExecution, useCellFreshness } from "@/core/executions";
+import { useCellActions } from "@/core/cells/actions";
 import type { CellId } from "@/core/cells/ids";
-import type { CellColumnId } from "@/utils/id-tree";
+import { type CellColumnId, type Layout, useLayout } from "@/core/cells/layout";
 import { useEffect, useRef, useState } from "react";
 import type { ICellRendererProps } from "../editor/renderers/types";
 import type {
@@ -49,7 +50,6 @@ import { SLIDE_TYPE_OPTIONS_BY_VALUE } from "./slide-form";
 
 type Props = ICellRendererProps<SlidesLayout>;
 type SlideCell = Props["cells"][number];
-type CellIdsState = ReturnType<typeof useCellIds>;
 type DropPosition = "before" | "after";
 
 interface ProjectedDropTarget {
@@ -228,8 +228,8 @@ export const SlidesMinimap = ({
   slideTypes,
   onSlideClick,
 }: SlidesMinimapProps) => {
-  const cellIds = useCellIds();
-  const { moveCellToIndex, createNewCell } = useCellActions();
+  const layout = useLayout();
+  const { moveCellToIndex, createCell } = useCellActions();
   const deleteCell = useDeleteCellCallback();
   const containerRef = useRef<HTMLDivElement>(null);
   const visibleIds = useVisibleCellIds(containerRef);
@@ -240,7 +240,10 @@ export const SlidesMinimap = ({
   const dimensions = computeThumbnailDimensions(thumbnailWidth);
 
   const insertCell = (cellId: CellId, before: boolean) => {
-    createNewCell({ cellId, before, code: "", autoFocus: false });
+    createCell({
+      ...(before ? { before: cellId } : { after: cellId }),
+      focus: false,
+    });
   };
 
   useEffect(() => {
@@ -293,7 +296,7 @@ export const SlidesMinimap = ({
     try {
       if (activeId && dropTarget) {
         const resolvedTarget = resolveDropTarget({
-          cellIds,
+          layout,
           activeId,
           target: dropTarget,
         });
@@ -625,6 +628,8 @@ const SlideThumbnailCard = ({
   ...props
 }: SlideThumbnailCardProps) => {
   const { width, height, scale } = dimensions;
+  const execution = useCellExecution(cell.id);
+  const freshness = useCellFreshness(cell.id);
   const visual = isNoOutput ? NO_OUTPUT_VISUAL : getSlideTypeVisual(slideType);
   const isSkipped = isNoOutput || slideType === "skip";
 
@@ -673,9 +678,9 @@ const SlideThumbnailCard = ({
           ) : (
             <Slide
               cellId={cell.id}
-              status={cell.status}
+              status={execution.status}
               output={cell.output}
-              stale={outputIsStale(cell, false)}
+              stale={outputIsStale(execution, freshness, false)}
             />
           )}
         </div>
@@ -747,24 +752,27 @@ function projectDropTarget(
 }
 
 function resolveDropTarget({
-  cellIds,
+  layout,
   activeId,
   target,
 }: {
-  cellIds: CellIdsState;
+  layout: Layout;
   activeId: CellId;
   target: ProjectedDropTarget;
 }): ResolvedDropTarget | null {
   if (activeId === target.overId) {
     return null;
   }
-  if (cellIds.colLength !== 1) {
+  if (layout.columns.length !== 1) {
     Logger.warn("Multi-column mode is not supported");
     return null;
   }
 
-  const column = cellIds.findWithId(target.overId);
-  const overIndex = column.indexOfOrThrow(target.overId);
+  const [column] = layout.columns;
+  const overIndex = column.ids.indexOf(target.overId);
+  if (overIndex === -1) {
+    return null;
+  }
 
   return {
     cellId: activeId,

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

@@ -20,6 +20,7 @@ import { Button } from "@/components/ui/button";
 import { useFullScreenElement } from "@/components/ui/fullscreen";
 import { Tooltip } from "@/components/ui/tooltip";
 import { outputIsStale } from "@/core/cells/cell";
+import { useCellExecution, useCellFreshness } from "@/core/executions";
 import type { CellId } from "@/core/cells/ids";
 import type { RuntimeCell } from "@/core/cells/types";
 import type { RevealApi, RevealConfig } from "reveal.js";
@@ -69,6 +70,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 +136,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;
@@ -346,16 +352,20 @@ function resolveSlideContentStyle(
  * different scheme than `HTMLCellId`) and its inner `OutputArea` uses
  * `display: contents`, which can't be targeted for background/border styling.
  */
-export const CellOutputBlock = ({ cell }: { cell: RuntimeCell }) => (
-  <div className="flex flex-col" {...cellDomProps(cell.id, cell.name)}>
-    <CellOutputSlide
-      cellId={cell.id}
-      status={cell.status}
-      output={cell.output}
-      stale={outputIsStale(cell, false)}
-    />
-  </div>
-);
+export const CellOutputBlock = ({ cell }: { cell: RuntimeCell }) => {
+  const execution = useCellExecution(cell.id);
+  const freshness = useCellFreshness(cell.id);
+  return (
+    <div className="flex flex-col" {...cellDomProps(cell.id, cell.name)}>
+      <CellOutputSlide
+        cellId={cell.id}
+        status={execution.status}
+        output={cell.output}
+        stale={outputIsStale(execution, freshness, false)}
+      />
+    </div>
+  );
+};
 
 const SubslideView = ({
   subslide,
@@ -404,13 +414,15 @@ const SubslideView = ({
             if (block.isFragment) {
               const cumulative = cumulativeByBlock.get(i);
               return (
-                <Fragment key={i} as="div">
+                <Fragment key={block.cells[0].id} as="div">
                   {rendered}
                   {cumulative && <NotesAside text={cumulative} />}
                 </Fragment>
               );
             }
-            return <ReactFragment key={i}>{rendered}</ReactFragment>;
+            return (
+              <ReactFragment key={block.cells[0].id}>{rendered}</ReactFragment>
+            );
           })}
         </div>
       </SlideScrollContainer>
@@ -480,8 +492,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.
@@ -499,7 +524,7 @@ const RevealSlidesComponent = ({
   const [showCodeOverrides, setShowCodeOverrides] = useState<
     ReadonlySet<CellId>
   >(() => new Set());
-  const codeAvailable = useNotebookCodeAvailable(slideCells);
+  const codeAvailable = useNotebookCodeAvailable();
   const codeRenderingEnabled = !isIslands() && codeAvailable;
   const isSpeakerReceiver = isSpeakerViewReceiver(
     kioskMode,
@@ -587,10 +612,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),
@@ -600,7 +625,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) => {
@@ -701,6 +726,7 @@ const RevealSlidesComponent = ({
   });
 
   const handleDeckReady = useEvent((deck: RevealApi) => {
+    setSlideScale(deck.getScale());
     navigateDeckToActiveCell(deck);
     if (canResolveInitialHash) {
       reportDeckCell(deck);
@@ -827,22 +853,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);
 }