@marimo-team/frontend 0.23.2-dev8 → 0.23.2

package/src/components/editor/file-tree/requesting-tree.tsx

@@ -17,6 +17,7 @@ export class RequestingTree {
     listFiles: EditRequests["sendListFiles"];
     createFileOrFolder: EditRequests["sendCreateFileOrFolder"];
     deleteFileOrFolder: EditRequests["sendDeleteFileOrFolder"];
+    copyFileOrFolder: EditRequests["sendCopyFileOrFolder"];
     renameFileOrFolder: EditRequests["sendRenameFileOrFolder"];
   };
 
@@ -24,6 +25,7 @@ export class RequestingTree {
     listFiles: EditRequests["sendListFiles"];
     createFileOrFolder: EditRequests["sendCreateFileOrFolder"];
     deleteFileOrFolder: EditRequests["sendDeleteFileOrFolder"];
+    copyFileOrFolder: EditRequests["sendCopyFileOrFolder"];
     renameFileOrFolder: EditRequests["sendRenameFileOrFolder"];
   }) {
     this.callbacks = callbacks;
@@ -74,9 +76,44 @@ export class RequestingTree {
     return true;
   }
 
+  async copy(id: string, newName: string): Promise<void> {
+    const node = this.delegate.find(id);
+    if (!node) {
+      toast({
+        title: "Failed",
+        description: `Node with id ${id} not found in the tree`,
+      });
+      return;
+    }
+    const currentPath = node.data.path as FilePath;
+    const parentPath = this.path.dirname(currentPath);
+    const newPath = this.path.join(parentPath, newName);
+    const newFile = await this.callbacks
+      .copyFileOrFolder({
+        path: currentPath,
+        newPath: newPath,
+      })
+      .then(this.handleResponse);
+    if (!newFile?.info) {
+      return;
+    }
+    this.delegate.create({
+      parentId: node.parent?.id ?? null,
+      index: 0,
+      data: newFile.info,
+    });
+    this.onChange(this.delegate.data);
+    // Refresh the parent folder
+    await this.refreshAll([parentPath]);
+  }
+
   async rename(id: string, name: string): Promise<void> {
     const node = this.delegate.find(id);
     if (!node) {
+      toast({
+        title: "Failed",
+        description: `Node with id ${id} not found in the tree`,
+      });
       return;
     }
     const currentPath = node.data.path as FilePath;
@@ -172,6 +209,10 @@ export class RequestingTree {
   async delete(id: string): Promise<void> {
     const node = this.delegate.find(id);
     if (!node) {
+      toast({
+        title: "Failed",
+        description: `Node with id ${id} not found in the tree`,
+      });
       return;
     }
 

package/src/components/editor/file-tree/state.tsx

@@ -15,6 +15,7 @@ export const treeAtom = atom<RequestingTree>((get) => {
     listFiles: client.sendListFiles,
     createFileOrFolder: client.sendCreateFileOrFolder,
     deleteFileOrFolder: client.sendDeleteFileOrFolder,
+    copyFileOrFolder: client.sendCopyFileOrFolder,
     renameFileOrFolder: client.sendRenameFileOrFolder,
   });
 });

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/home/components.tsx

@@ -32,6 +32,7 @@ import { useRequestClient } from "@/core/network/requests";
 import type { TutorialId } from "@/core/network/types";
 import { openNotebook } from "@/utils/links";
 import { Objects } from "@/utils/objects";
+import { MarimoPlusIcon } from "../icons/marimo-icons";
 
 const TUTORIALS: Record<
   TutorialId,
@@ -132,6 +133,12 @@ const RESOURCES = [
     icon: MessagesSquareIcon,
     url: Constants.discordLink,
   },
+  {
+    title: "molab",
+    description: "Run marimo notebooks in the cloud",
+    icon: MarimoPlusIcon,
+    url: Constants.molab,
+  },
   {
     title: "YouTube",
     description: "Watch tutorials and demos",

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/swiper-component.tsx

@@ -0,0 +1,159 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import React, { type JSX, type PropsWithChildren, useEffect } from "react";
+import {
+  Keyboard,
+  Navigation,
+  Pagination,
+  Virtual,
+  Zoom,
+} from "swiper/modules";
+import { Swiper, type SwiperRef, SwiperSlide } from "swiper/react";
+import { Button } from "@/components/ui/button";
+import { useEventListener } from "@/hooks/useEventListener";
+import { useIframeCapabilities } from "@/hooks/useIframeCapabilities";
+import { cn } from "@/utils/cn";
+
+import "./swiper-slides.css";
+import "./slides.css";
+
+interface SlidesComponentProps {
+  className?: string;
+  forceKeyboardNavigation?: boolean;
+  index?: string | null;
+  height?: string | number | null;
+  wrapAround?: boolean;
+  activeIndex?: number | null;
+  onActiveIndexChange?: (index: number) => void;
+}
+
+const SlidesComponent = ({
+  className,
+  children,
+  height,
+  forceKeyboardNavigation = false,
+  wrapAround = false,
+  activeIndex,
+  onActiveIndexChange,
+}: PropsWithChildren<SlidesComponentProps>): JSX.Element => {
+  const el = React.useRef<SwiperRef>(null);
+  const [isFullscreen, setIsFullscreen] = React.useState(false);
+  const { hasFullscreen } = useIframeCapabilities();
+
+  useEffect(() => {
+    if (activeIndex != null && el.current?.swiper.realIndex !== activeIndex) {
+      if (wrapAround) {
+        el.current?.swiper.slideToLoop(activeIndex);
+      } else {
+        el.current?.swiper.slideTo(activeIndex);
+      }
+    }
+  }, [activeIndex, wrapAround]);
+
+  useEventListener(document, "fullscreenchange", () => {
+    if (document.fullscreenElement) {
+      el.current?.swiper.keyboard.enable();
+    } else {
+      el.current?.swiper.keyboard.disable();
+    }
+    setIsFullscreen(!!document.fullscreenElement);
+  });
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      window.dispatchEvent(new Event("resize"));
+    });
+  }, [isFullscreen]);
+
+  const modules = wrapAround // virtual is incompatible with loop
+    ? [Keyboard, Pagination, Zoom, Navigation]
+    : [Virtual, Keyboard, Pagination, Zoom, Navigation];
+
+  return (
+    <Swiper
+      ref={el}
+      className={cn(
+        "relative w-full border rounded bg-background mo-slides-theme prose-slides",
+        className,
+      )}
+      spaceBetween={50}
+      style={{
+        height: isFullscreen ? "100%" : height || "650px",
+      }}
+      slidesPerView={1}
+      modules={modules}
+      zoom={{
+        maxRatio: 5,
+      }}
+      // touch controls interfere with UI elements
+      simulateTouch={false}
+      keyboard={{
+        // Only enable keyboard controls when in fullscreen
+        enabled: isFullscreen || forceKeyboardNavigation,
+      }}
+      navigation={true}
+      pagination={{
+        clickable: true,
+      }}
+      virtual={!wrapAround} // virtual is incompatible with loop, turn off if loop is on
+      // Instant swipes, which make sequences of slides
+      // that overlay content more legible
+      speed={1}
+      loop={wrapAround}
+      onSlideChange={(swiper) => onActiveIndexChange?.(swiper.realIndex)}
+    >
+      {React.Children.map(children, (child, index) => {
+        if (child == null) {
+          return null;
+        }
+        return (
+          <SwiperSlide key={index}>
+            <div
+              onKeyDown={(e) => {
+                // If the target is from a marimo element, stop propagation
+                if (
+                  e.target instanceof HTMLElement &&
+                  e.target.tagName.toLocaleLowerCase().startsWith("marimo-")
+                ) {
+                  e.stopPropagation();
+                }
+              }}
+              className={cn(
+                "h-full w-full flex box-border overflow-y-auto overflow-x-hidden",
+                isFullscreen ? "p-20" : "p-6 pb-12",
+              )}
+            >
+              <div className="mo-slide-content">{child}</div>
+            </div>
+          </SwiperSlide>
+        );
+      })}
+      {hasFullscreen && (
+        <Button
+          variant="link"
+          size="sm"
+          data-testid="marimo-plugin-slides-fullscreen"
+          onClick={async () => {
+            if (!el.current) {
+              return;
+            }
+            const domEl = el.current as unknown as HTMLElement;
+
+            if (document.fullscreenElement) {
+              await document.exitFullscreen();
+              setIsFullscreen(false);
+            } else {
+              await domEl.requestFullscreen();
+              setIsFullscreen(true);
+            }
+          }}
+          className="absolute bottom-0 right-0 z-10 mx-1 mb-0"
+        >
+          {isFullscreen ? "Exit Fullscreen" : "Fullscreen"}
+        </Button>
+      )}
+    </Swiper>
+  );
+};
+
+export default SlidesComponent;

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/components/static-html/static-banner.tsx

@@ -22,6 +22,7 @@ import {
   DialogTrigger,
 } from "../ui/dialog";
 import { toast } from "../ui/use-toast";
+import { MarimoPlusIcon } from "../icons/marimo-icons";
 
 export const StaticBanner: React.FC = () => {
   const code = useAtomValue(codeAtom);
@@ -66,7 +67,10 @@ const StaticBannerDialog = ({ code }: { code: string }) => {
   }
 
   const href = window.location.href;
-  const wasmLink = createShareableLink({ code });
+  const molabLink = createShareableLink({
+    code,
+    baseUrl: `${Constants.molab}/new`,
+  });
 
   return (
     <Dialog>
@@ -114,21 +118,26 @@ const StaticBannerDialog = ({ code }: { code: string }) => {
               </div>
             )}
 
-            <div className="pt-3 border-t border-(--sky-7)">
-              <p className="text-sm text-(--sky-12) mb-2">
-                <strong>Try in browser with WebAssembly:</strong>{" "}
-                <a
-                  href={wasmLink}
-                  target="_blank"
-                  className="text-(--sky-11) hover:underline break-all"
-                  rel="noreferrer"
-                >
-                  {wasmLink.slice(0, 50)}...
+            <div className="pt-3 border-t flex gap-2 items-center">
+              <Button
+                asChild={true}
+                variant="outline"
+                size="xs"
+                className="shrink-0"
+              >
+                <a href={molabLink} target="_blank" rel="noopener noreferrer">
+                  <MarimoPlusIcon
+                    size={12}
+                    strokeWidth={1.5}
+                    className="mr-1.5 mt-px text-(--grass-11)"
+                  />
+                  Open in molab
                 </a>
-              </p>
+              </Button>
               <p className="text-sm text-(--sky-12)">
-                Note: WebAssembly may not work for all notebooks. Additionally,
-                some dependencies may not be available in the browser.
+                Run this notebook in{" "}
+                <span className="font-semibold">molab</span>, marimo's
+                cloud-hosted notebook platform.
               </p>
             </div>
           </DialogDescription>