@marimo-team/frontend 0.23.7-dev9 → 0.23.7-dev90

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

@@ -11,9 +11,11 @@ import {
 import useEvent from "react-use-event-hook";
 import { CodeIcon, ExpandIcon, EyeOffIcon } from "lucide-react";
 import { Deck, Fragment, Slide, Stack } from "@revealjs/react";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { Slide as CellOutputSlide } from "@/components/slides/slide";
 import { Button } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
+import type { CellId } from "@/core/cells/ids";
 import type { RuntimeCell } from "@/core/cells/types";
 import type { RevealApi, RevealConfig } from "reveal.js";
 import { useEventListener } from "@/hooks/useEventListener";
@@ -21,7 +23,10 @@ import { Events } from "@/utils/events";
 import { Logger } from "@/utils/Logger";
 import "./slides.css";
 import "./reveal-slides.css";
-import type { SlidesLayout } from "../editor/renderers/slides-layout/types";
+import type {
+  SlideConfig,
+  SlidesLayout,
+} from "../editor/renderers/slides-layout/types";
 import {
   buildSlideIndices,
   composeSlides,
@@ -39,10 +44,14 @@ import {
   SlideCellReadOnlyView,
   SlideCellView,
 } from "@/components/slides/slide-cell-view";
+import { SlideNotesEditor } from "./slide-notes-editor";
+import { buildSubslideNotes, NOTES_DIVIDER } from "./slide-notes";
 import { cn } from "@/utils/cn";
 import { isIslands } from "@/core/islands/utils";
 import { useNotebookCodeAvailable } from "@/core/meta/code-visibility";
-import type { AppMode } from "@/core/mode";
+import { type AppMode, kioskModeAtom } from "@/core/mode";
+import { useAtomValue } from "jotai";
+import RevealNotes from "reveal.js/plugin/notes";
 
 const ASPECT_RATIO = 16 / 9;
 
@@ -124,56 +133,93 @@ function triggerResize(deck: RevealApi | null) {
   }
 }
 
+// The speaker view renders this via innerHTML with `white-space: normal`, so
+// we materialize `\n` as `<br>` and a lone `---` line as `<hr>`.
+const NotesAside = ({ text }: { text: string }) => {
+  const lines = text.split("\n");
+  return (
+    <aside className="notes">
+      {lines.map((line, idx) => {
+        const isLast = idx === lines.length - 1;
+        if (line === NOTES_DIVIDER) {
+          return <hr key={idx} />;
+        }
+        return (
+          <ReactFragment key={idx}>
+            {line}
+            {!isLast && <br />}
+          </ReactFragment>
+        );
+      })}
+    </aside>
+  );
+};
+
 const SubslideView = ({
   subslide,
   showCode,
   isEditable,
+  slideConfigs,
 }: {
   subslide: ComposedSubslide<RuntimeCell>;
   showCode: boolean;
   isEditable: boolean;
-}) => (
-  <Slide>
-    <div className="h-full w-full overflow-auto flex">
-      <div
-        className={
-          showCode ? "mo-slide-content flex flex-col gap-3" : "mo-slide-content"
-        }
-        style={{
-          margin: "auto 20px",
-        }}
-      >
-        {subslide.blocks.map((block, i) => {
-          const rendered = block.cells.map((cell) => {
-            if (!showCode) {
+  slideConfigs: ReadonlyMap<CellId, SlideConfig>;
+}) => {
+  const { slideLevel, cumulativeByBlock } = buildSubslideNotes(
+    subslide,
+    slideConfigs,
+  );
+
+  return (
+    <Slide>
+      <div className="h-full w-full overflow-auto flex">
+        <div
+          className={
+            showCode
+              ? "mo-slide-content flex flex-col gap-3"
+              : "mo-slide-content"
+          }
+          style={{
+            margin: "auto 20px",
+          }}
+        >
+          {subslide.blocks.map((block, i) => {
+            const rendered = block.cells.map((cell) => {
+              if (!showCode) {
+                return (
+                  <CellOutputSlide
+                    key={cell.id}
+                    cellId={cell.id}
+                    status={cell.status}
+                    output={cell.output}
+                  />
+                );
+              }
+              return isEditable ? (
+                <SlideCellView key={cell.id} cell={cell} />
+              ) : (
+                <SlideCellReadOnlyView key={cell.id} cell={cell} />
+              );
+            });
+            if (block.isFragment) {
+              const cumulative = cumulativeByBlock.get(i);
               return (
-                <CellOutputSlide
-                  key={cell.id}
-                  cellId={cell.id}
-                  status={cell.status}
-                  output={cell.output}
-                />
+                <Fragment key={i} as="div">
+                  {rendered}
+                  {cumulative && <NotesAside text={cumulative} />}
+                </Fragment>
               );
             }
-            return isEditable ? (
-              <SlideCellView key={cell.id} cell={cell} />
-            ) : (
-              <SlideCellReadOnlyView key={cell.id} cell={cell} />
-            );
-          });
-          if (block.isFragment) {
-            return (
-              <Fragment key={i} as="div">
-                {rendered}
-              </Fragment>
-            );
-          }
-          return <ReactFragment key={i}>{rendered}</ReactFragment>;
-        })}
+            return <ReactFragment key={i}>{rendered}</ReactFragment>;
+          })}
+        </div>
       </div>
-    </div>
-  </Slide>
-);
+      {/* Outside any `.fragment`: shown only before any fragment is revealed. */}
+      {slideLevel && <NotesAside text={slideLevel} />}
+    </Slide>
+  );
+};
 
 // There is an upstream react bug in dev mode (https://github.com/facebook/react/issues/34840)
 // Uncaught SecurityError: Failed to read a named property '$$typeof' from 'Window'
@@ -200,6 +246,13 @@ const RevealSlidesComponent = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const deckRef = useRef<RevealApi | null>(null);
   const { width, height } = useSlideDimensions(containerRef);
+  // Skip the Notes plugin inside reveal's own speaker-view iframes so pressing
+  // `S` there doesn't try to spawn another popup.
+  const kioskMode = useAtomValue(kioskModeAtom);
+  const deckPlugins = useMemo(
+    () => (kioskMode ? [] : [RevealNotes]),
+    [kioskMode],
+  );
 
   const [showCode, setShowCode] = useState(false);
   const codeAvailable = useNotebookCodeAvailable(cellsWithOutput);
@@ -241,6 +294,16 @@ const RevealSlidesComponent = ({
   );
 
   const deckTransition = layout.deck?.transition ?? DEFAULT_DECK_TRANSITION;
+  // Reveal's Notes plugin iframes the deck for the current/upcoming-slide
+  // previews. We load the same URL but as a read-only kiosk client with the
+  // app chrome hidden, which `<SlidesLayoutRenderer>` interprets the same as
+  // read mode (no minimap, sidebar, or notes editor).
+  const kioskUrl = useMemo(() => {
+    const url = new URL(window.location.href);
+    url.searchParams.set("kiosk", "true");
+    url.searchParams.set("show-chrome", "false");
+    return url.toString();
+  }, []);
   const revealConfig: RevealConfig = useMemo(
     () => ({
       embedded: true,
@@ -251,8 +314,9 @@ const RevealSlidesComponent = ({
       maxScale: 2,
       transition: deckTransition,
       keyboardCondition: (event: KeyboardEvent) => !Events.fromInput(event),
+      url: kioskUrl,
     }),
-    [width, height, deckTransition],
+    [width, height, deckTransition, kioskUrl],
   );
 
   const navigateDeckToActiveCell = useEvent((deck: RevealApi) => {
@@ -293,6 +357,16 @@ const RevealSlidesComponent = ({
         toggleShowCode,
       );
     }
+
+    // Reveal listens for `keydown` on `document` and bails when
+    // `document.activeElement` is an input/contenteditable (e.g. the speaker
+    // notes textarea below the deck). Park focus on the deck wrapper so arrow
+    // keys reliably advance slides without the user having to click first.
+    const revealEl = deck.getSlidesElement()?.closest(".reveal");
+    if (revealEl instanceof HTMLElement) {
+      revealEl.tabIndex = -1;
+      revealEl.focus({ preventScroll: true });
+    }
   });
 
   const activeSubslide = useMemo(() => {
@@ -357,126 +431,157 @@ const RevealSlidesComponent = ({
 
   useEventListener(document, "keydown", handleParkedNavKey, { capture: true });
 
-  return (
-    <div className="flex-1 min-w-0 flex flex-row gap-3">
-      <div
-        ref={containerRef}
-        className="flex-1 min-w-0 flex items-center justify-center overflow-hidden"
-      >
-        <div className="group relative" style={{ width, height }}>
-          <Deck
-            deckRef={deckRef}
-            className="aspect-video w-full overflow-hidden border rounded bg-background mo-slides-theme prose-slides"
-            config={revealConfig}
-            onReady={handleDeckReady}
-            onSlideChange={handleSlideChange}
-            onFragmentShown={reportCurrentCell}
-            onFragmentHidden={reportCurrentCell}
-          >
-            {composition.stacks.map((stack, h) => {
-              if (stack.subslides.length === 1) {
-                const isActive =
-                  activeSubslide?.h === h && activeSubslide?.v === 0;
-                return (
-                  <SubslideView
-                    key={h}
-                    subslide={stack.subslides[0]}
-                    showCode={codeShown && isActive}
-                    isEditable={isEditable}
-                  />
-                );
-              }
+  const slideArea = (
+    <div
+      ref={containerRef}
+      className="h-full w-full min-w-0 flex items-center justify-center overflow-hidden"
+    >
+      <div className="group relative" style={{ width, height }}>
+        <Deck
+          deckRef={deckRef}
+          className="aspect-video w-full overflow-hidden border rounded bg-background mo-slides-theme prose-slides"
+          config={revealConfig}
+          onReady={handleDeckReady}
+          onSlideChange={handleSlideChange}
+          onFragmentShown={reportCurrentCell}
+          onFragmentHidden={reportCurrentCell}
+          plugins={deckPlugins}
+        >
+          {composition.stacks.map((stack, h) => {
+            if (stack.subslides.length === 1) {
+              const isActive =
+                activeSubslide?.h === h && activeSubslide?.v === 0;
               return (
-                <Stack key={h}>
-                  {stack.subslides.map((sub, v) => {
-                    const isActive =
-                      activeSubslide?.h === h && activeSubslide?.v === v;
-                    return (
-                      <SubslideView
-                        key={v}
-                        subslide={sub}
-                        showCode={codeShown && isActive}
-                        isEditable={isEditable}
-                      />
-                    );
-                  })}
-                </Stack>
+                <SubslideView
+                  key={h}
+                  subslide={stack.subslides[0]}
+                  showCode={codeShown && isActive}
+                  isEditable={isEditable}
+                  slideConfigs={layout.cells}
+                />
               );
-            })}
-          </Deck>
-          {skippedPreviewCell && (
-            <div
-              className="absolute inset-0 z-10 border rounded bg-background flex flex-col overflow-hidden"
-              aria-label="Skipped in presentation"
-            >
-              <div className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-muted-foreground border-b bg-muted/40">
-                <EyeOffIcon className="h-3.5 w-3.5" />
-                <span>Skipped in presentation</span>
-              </div>
-              <div className="flex-1 overflow-auto flex">
-                <div
-                  className="mo-slide-content"
-                  style={{ margin: "auto 20px" }}
-                >
-                  <CellOutputSlide
-                    cellId={skippedPreviewCell.id}
-                    status={skippedPreviewCell.status}
-                    output={skippedPreviewCell.output}
-                  />
-                </div>
+            }
+            return (
+              <Stack key={h}>
+                {stack.subslides.map((sub, v) => {
+                  const isActive =
+                    activeSubslide?.h === h && activeSubslide?.v === v;
+                  return (
+                    <SubslideView
+                      key={v}
+                      subslide={sub}
+                      showCode={codeShown && isActive}
+                      isEditable={isEditable}
+                      slideConfigs={layout.cells}
+                    />
+                  );
+                })}
+              </Stack>
+            );
+          })}
+        </Deck>
+        {skippedPreviewCell && (
+          <div
+            className="absolute inset-0 z-10 border rounded bg-background flex flex-col overflow-hidden"
+            aria-label="Skipped in presentation"
+          >
+            <div className="flex items-center gap-1.5 px-3 py-1.5 text-xs text-muted-foreground border-b bg-muted/40">
+              <EyeOffIcon className="h-3.5 w-3.5" />
+              <span>Skipped in presentation</span>
+            </div>
+            <div className="flex-1 overflow-auto flex">
+              <div className="mo-slide-content" style={{ margin: "auto 20px" }}>
+                <CellOutputSlide
+                  cellId={skippedPreviewCell.id}
+                  status={skippedPreviewCell.status}
+                  output={skippedPreviewCell.output}
+                />
               </div>
             </div>
-          )}
-          <div className="absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-70 text-muted-foreground transition-opacity">
-            {codeToggleEnabled && (
-              <Tooltip content={codeShown ? "Hide code (C)" : "Show code (C)"}>
-                <Button
-                  data-testid="marimo-plugin-slides-toggle-code"
-                  variant="ghost"
-                  size="icon"
-                  className={cn(
-                    "text-muted-foreground h-7 w-7",
-                    codeShown && "text-foreground bg-muted",
-                  )}
-                  aria-pressed={codeShown}
-                  aria-label={codeShown ? "Hide code" : "Show code"}
-                  onClick={toggleShowCode}
-                >
-                  <CodeIcon className="h-4 w-4" />
-                </Button>
-              </Tooltip>
-            )}
-            <Tooltip content="Fullscreen (F)">
+          </div>
+        )}
+        <div className="absolute top-2 right-2 z-20 opacity-0 group-hover:opacity-70 text-muted-foreground transition-opacity">
+          {codeToggleEnabled && (
+            <Tooltip content={codeShown ? "Hide code (C)" : "Show code (C)"}>
               <Button
-                data-testid="marimo-plugin-slides-fullscreen"
+                data-testid="marimo-plugin-slides-toggle-code"
                 variant="ghost"
                 size="icon"
-                className="text-muted-foreground h-7 w-7"
-                aria-label="Enter fullscreen"
-                onClick={() => {
-                  deckRef.current
-                    ?.getViewportElement()
-                    ?.requestFullscreen()
-                    .catch((error) => {
-                      Logger.error("Failed to request fullscreen", error);
-                    });
-                }}
+                className={cn(
+                  "text-muted-foreground h-7 w-7",
+                  codeShown && "text-foreground bg-muted",
+                )}
+                aria-pressed={codeShown}
+                aria-label={codeShown ? "Hide code" : "Show code"}
+                onClick={toggleShowCode}
               >
-                <ExpandIcon className="h-4 w-4" />
+                <CodeIcon className="h-4 w-4" />
               </Button>
             </Tooltip>
-          </div>
+          )}
+          <Tooltip content="Fullscreen (F)">
+            <Button
+              data-testid="marimo-plugin-slides-fullscreen"
+              variant="ghost"
+              size="icon"
+              className="text-muted-foreground h-7 w-7"
+              aria-label="Enter fullscreen"
+              onClick={() => {
+                deckRef.current
+                  ?.getViewportElement()
+                  ?.requestFullscreen()
+                  .catch((error) => {
+                    Logger.error("Failed to request fullscreen", error);
+                  });
+              }}
+            >
+              <ExpandIcon className="h-4 w-4" />
+            </Button>
+          </Tooltip>
         </div>
       </div>
+    </div>
+  );
+
+  if (mode === "read") {
+    return (
+      <div className="flex-1 min-w-0 flex flex-row gap-3">{slideArea}</div>
+    );
+  }
 
-      {mode !== "read" && (
-        <SlideSidebar
-          configWidth={configWidth}
-          layout={layout}
-          setLayout={setLayout}
-          activeConfigCell={activeConfigCell}
+  return (
+    <div className="flex-1 min-w-0 flex flex-row gap-3">
+      <PanelGroup
+        direction="vertical"
+        autoSaveId="marimo:slides:notes-panel"
+        className="flex-1 min-w-0"
+      >
+        <Panel defaultSize={92} minSize={60}>
+          {slideArea}
+        </Panel>
+        <PanelResizeHandle
+          className="mo-slides-notes-resize"
+          hitAreaMargins={{ coarse: 12, fine: 4 }}
         />
-      )}
+        <Panel
+          defaultSize={10}
+          minSize={4}
+          collapsible={true}
+          collapsedSize={4}
+        >
+          <SlideNotesEditor
+            layout={layout}
+            setLayout={setLayout}
+            cellId={activeConfigCell?.id}
+          />
+        </Panel>
+      </PanelGroup>
+      <SlideSidebar
+        configWidth={configWidth}
+        layout={layout}
+        setLayout={setLayout}
+        activeConfigCell={activeConfigCell}
+      />
     </div>
   );
 };

package/src/components/slides/slide-notes-editor.tsx

@@ -0,0 +1,127 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { StickyNoteIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import useEvent from "react-use-event-hook";
+import type { CellId } from "@/core/cells/ids";
+import { useDebouncedCallback } from "@/hooks/useDebounce";
+import { cn } from "@/utils/cn";
+import { Events } from "@/utils/events";
+import type { SlidesLayout } from "../editor/renderers/slides-layout/types";
+
+interface SlideNotesEditorProps {
+  layout: SlidesLayout;
+  setLayout: (layout: SlidesLayout) => void;
+  cellId: CellId | undefined;
+  className?: string;
+}
+
+const PERSIST_DELAY_MS = 300;
+
+export const SlideNotesEditor = ({
+  layout,
+  setLayout,
+  cellId,
+  className,
+}: SlideNotesEditorProps) => {
+  const initialValue = cellId
+    ? (layout.cells.get(cellId)?.speakerNotes ?? "")
+    : "";
+
+  const [draft, setDraft] = useState(initialValue);
+
+  // Tracks whether the user has typed something that hasn't been persisted
+  // yet. Used to decide if the textarea is safe to overwrite from props.
+  const hasPendingEditRef = useRef(false);
+
+  // The debounced callback takes `(cellId, text)` so a `flush()` replays with
+  // the latest args — which means the in-flight text lands on the slide it
+  // was typed for, even if `cellId` has since changed.
+  const persistImmediate = useEvent((targetCellId: CellId, next: string) => {
+    hasPendingEditRef.current = false;
+    const existing = layout.cells.get(targetCellId);
+    if ((existing?.speakerNotes ?? "") === next) {
+      return;
+    }
+    const newCells = new Map(layout.cells);
+    newCells.set(targetCellId, { ...existing, speakerNotes: next });
+    setLayout({ ...layout, cells: newCells });
+  });
+
+  const persistDebounced = useDebouncedCallback(
+    persistImmediate,
+    PERSIST_DELAY_MS,
+  );
+
+  // Keep the textarea in sync with `layout`:
+  // - On slide switch, flush any in-flight edit to the *previous* slide before
+  //   adopting the new slide's notes.
+  // - On same-slide updates (e.g. future undo/redo or external setLayout
+  //   writers), adopt the new value only when the user isn't mid-edit so
+  //   pending keystrokes aren't clobbered.
+  const prevCellIdRef = useRef(cellId);
+  useEffect(() => {
+    if (prevCellIdRef.current !== cellId) {
+      persistDebounced.flush();
+      hasPendingEditRef.current = false;
+      setDraft(initialValue);
+      prevCellIdRef.current = cellId;
+      return;
+    }
+    if (!hasPendingEditRef.current && initialValue !== draft) {
+      setDraft(initialValue);
+    }
+  }, [cellId, initialValue, draft, persistDebounced]);
+
+  // Flush on unmount so closing the panel / navigating away doesn't lose text.
+  useEffect(() => {
+    return () => {
+      persistDebounced.flush();
+    };
+  }, [persistDebounced]);
+
+  const handleChange = (next: string) => {
+    setDraft(next);
+    if (cellId) {
+      hasPendingEditRef.current = true;
+      persistDebounced(cellId, next);
+    }
+  };
+
+  return (
+    <section
+      className={cn(
+        "h-full min-h-0 flex flex-col bg-muted/40 dark:bg-muted/20 border-t",
+        className,
+      )}
+      aria-label="Speaker notes"
+      // Keep keystrokes inside the textarea from advancing the reveal.js deck.
+      onKeyDown={(e) => e.stopPropagation()}
+    >
+      <header className="flex items-center gap-1.5 px-3 h-8 shrink-0 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        <StickyNoteIcon className="h-3.5 w-3.5" />
+        <span>Speaker notes</span>
+      </header>
+      <div className="flex-1 min-h-0 p-2">
+        {cellId ? (
+          <textarea
+            value={draft}
+            onChange={(event) => handleChange(event.target.value)}
+            onClick={Events.stopPropagation()}
+            placeholder="Add notes for this slide. Visible to you in speaker view (press S during presentation)."
+            className={cn(
+              "h-full w-full resize-none rounded-sm border border-input/25 bg-background",
+              "px-3 py-2 text-sm leading-relaxed text-foreground placeholder:text-muted-foreground",
+              "ring-offset-background focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-accent",
+            )}
+            aria-label="Speaker notes for the current slide"
+          />
+        ) : (
+          <div className="h-full flex items-center justify-center text-xs text-muted-foreground">
+            Select a slide to add notes.
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};

package/src/components/slides/slide-notes.ts

@@ -0,0 +1,64 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { CellId } from "@/core/cells/ids";
+import type { SlideConfig } from "../editor/renderers/slides-layout/types";
+import type { ComposedSubslide } from "./compose-slides";
+
+/** Lone-line marker between blocks; `<NotesAside>` renders this as `<hr>`. */
+export const NOTES_DIVIDER = "---";
+
+const BLOCK_JOIN = `\n\n${NOTES_DIVIDER}\n\n`;
+
+export const collectBlockNotes = <C extends { id: CellId }>(
+  cells: readonly C[],
+  slideConfigs: ReadonlyMap<CellId, SlideConfig>,
+): string =>
+  cells
+    .map((cell) => slideConfigs.get(cell.id)?.speakerNotes ?? "")
+    .filter((note) => note.trim().length > 0)
+    .join("\n\n");
+
+export interface SubslideNotes {
+  /** Notes shown when no fragment is current. */
+  slideLevel: string;
+  /** Cumulative notes for each fragment block, keyed by block index. */
+  cumulativeByBlock: Map<number, string>;
+}
+
+/**
+ * Per-fragment cumulative notes: slide-level notes plus each revealed
+ * fragment's notes, separated by a horizontal-rule line.
+ */
+export const buildSubslideNotes = <C extends { id: CellId }>(
+  subslide: ComposedSubslide<C>,
+  slideConfigs: ReadonlyMap<CellId, SlideConfig>,
+): SubslideNotes => {
+  const blockNotes = subslide.blocks.map((block) =>
+    collectBlockNotes(block.cells, slideConfigs),
+  );
+
+  const slideLevel = subslide.blocks
+    .map((block, i) => (block.isFragment ? "" : blockNotes[i]))
+    .filter((note) => note.length > 0)
+    .join("\n\n");
+
+  const cumulativeByBlock = new Map<number, string>();
+  const revealsSoFar: string[] = [];
+  subslide.blocks.forEach((block, i) => {
+    if (!block.isFragment) {
+      return;
+    }
+    const myNotes = blockNotes[i];
+    if (myNotes.length > 0) {
+      revealsSoFar.push(myNotes);
+    }
+    const accumulated = [slideLevel, ...revealsSoFar]
+      .filter((s) => s.length > 0)
+      .join(BLOCK_JOIN);
+    if (accumulated.length > 0) {
+      cumulativeByBlock.set(i, accumulated);
+    }
+  });
+
+  return { slideLevel, cumulativeByBlock };
+};