@marimo-team/islands 0.23.9-dev9 → 0.23.10-dev0

package/src/components/slides/minimap.tsx

@@ -66,6 +66,7 @@ interface SlideThumbnailCardProps extends React.HTMLAttributes<HTMLDivElement> {
   isActiveDragSource?: boolean;
   isOverlay?: boolean;
   isVisible?: boolean;
+  isNoOutput?: boolean;
   slideType?: SlideType;
   ref?: React.Ref<HTMLDivElement>;
 }
@@ -77,6 +78,7 @@ interface SlideThumbnailRowProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   dropIndicator?: DropPosition | null;
   isActiveDragSource?: boolean;
   isVisible?: boolean;
+  isNoOutput?: boolean;
   slideType?: SlideType;
   ref?: React.Ref<HTMLButtonElement>;
 }
@@ -86,15 +88,23 @@ interface SlidesMinimapProps {
   thumbnailWidth: number;
   canReorder: boolean;
   activeCellId: CellId | null;
-  // Set of cell ids that are marked `skip` in the slides layout.
+  // Set of cell ids that should be visually treated like skipped entries.
   skippedIds?: ReadonlySet<CellId>;
+  // Set of cell ids that currently have no rendered output.
+  noOutputIds?: ReadonlySet<CellId>;
   slideTypes?: ReadonlyMap<CellId, SlideType>;
   onSlideClick: (index: number) => void;
 }
 
+interface ThumbnailVisual {
+  label: string;
+  description: string;
+  Icon?: LucideIcon;
+}
+
 function getSlideTypeVisual(
   slideType: SlideType | undefined,
-): { label: string; description: string; Icon: LucideIcon } | null {
+): ThumbnailVisual | null {
   if (!slideType || slideType === "slide") {
     return null;
   }
@@ -102,8 +112,13 @@ function getSlideTypeVisual(
   return { label, description, Icon };
 }
 
+const NO_OUTPUT_VISUAL: ThumbnailVisual = {
+  label: "No output",
+  description: "Hidden because this cell has no output.",
+};
+
 const SLIDE_ASPECT_RATIO = 16 / 9;
-const SLIDE_BASE_WIDTH = 960;
+const SLIDE_BASE_WIDTH = 520;
 
 function computeThumbnailDimensions(width: number): ThumbnailDimensions {
   return {
@@ -196,6 +211,7 @@ export const SlidesMinimap = ({
   canReorder,
   activeCellId,
   skippedIds,
+  noOutputIds,
   slideTypes,
   onSlideClick,
 }: SlidesMinimapProps) => {
@@ -288,6 +304,7 @@ export const SlidesMinimap = ({
             dimensions={dimensions}
             isActiveSlide={cell.id === activeCellId}
             isVisible={visibleIds.has(cell.id)}
+            isNoOutput={noOutputIds?.has(cell.id)}
             slideType={resolveSlideType({
               cellId: cell.id,
               slideTypes,
@@ -325,6 +342,7 @@ export const SlidesMinimap = ({
               isActive={activeId === cell.id}
               isActiveSlide={cell.id === activeCellId}
               isVisible={visibleIds.has(cell.id)}
+              isNoOutput={noOutputIds?.has(cell.id)}
               slideType={resolveSlideType({
                 cellId: cell.id,
                 slideTypes,
@@ -347,6 +365,7 @@ export const SlidesMinimap = ({
             dimensions={dimensions}
             isOverlay={true}
             isActiveDragSource={true}
+            isNoOutput={noOutputIds?.has(activeCell.id)}
           />
         )}
       </DragOverlay>
@@ -378,6 +397,7 @@ interface SortableSlideThumbnailProps {
   isActive: boolean;
   isActiveSlide?: boolean;
   isVisible?: boolean;
+  isNoOutput?: boolean;
   slideType?: SlideType;
   onClick?: () => void;
 }
@@ -389,6 +409,7 @@ const SortableSlideThumbnail = ({
   isActive,
   isActiveSlide,
   isVisible,
+  isNoOutput,
   slideType,
   onClick,
 }: SortableSlideThumbnailProps) => {
@@ -405,6 +426,7 @@ const SortableSlideThumbnail = ({
       isActiveDragSource={isActive}
       isActiveSlide={isActiveSlide}
       isVisible={isVisible}
+      isNoOutput={isNoOutput}
       slideType={slideType}
       onClick={onClick}
       {...attributes}
@@ -422,6 +444,7 @@ const SlideThumbnailRow = ({
   isActiveSlide = false,
   isActiveDragSource = false,
   isVisible,
+  isNoOutput,
   slideType,
   onClick,
   ref,
@@ -462,6 +485,7 @@ const SlideThumbnailRow = ({
         isActiveSlide={isActiveSlide}
         isActiveDragSource={isActiveDragSource}
         isVisible={isVisible}
+        isNoOutput={isNoOutput}
         slideType={slideType}
       />
     </button>
@@ -477,13 +501,14 @@ const SlideThumbnailCard = ({
   isActiveDragSource = false,
   isOverlay = false,
   isVisible = false,
+  isNoOutput = false,
   slideType,
   ref,
   ...props
 }: SlideThumbnailCardProps) => {
   const { width, height, scale } = dimensions;
-  const visual = getSlideTypeVisual(slideType);
-  const isSkipped = slideType === "skip";
+  const visual = isNoOutput ? NO_OUTPUT_VISUAL : getSlideTypeVisual(slideType);
+  const isSkipped = isNoOutput || slideType === "skip";
 
   const outerStyle: React.CSSProperties = {
     width,
@@ -525,16 +550,20 @@ const SlideThumbnailCard = ({
             height: height / scale,
           }}
         >
-          <Slide cellId={cell.id} status={cell.status} output={cell.output} />
+          {isNoOutput ? (
+            <MiniCodePreview code={cell.code} />
+          ) : (
+            <Slide cellId={cell.id} status={cell.status} output={cell.output} />
+          )}
         </div>
       )}
       {isSkipped && (
         <div
-          className="absolute inset-0 bg-muted/60 pointer-events-none"
+          className="absolute inset-0 bg-muted/50 pointer-events-none"
           aria-hidden={true}
         />
       )}
-      {visual && (
+      {visual?.Icon && (
         <Tooltip
           content={
             <span className="text-xs opacity-80">{visual.description}</span>
@@ -550,7 +579,6 @@ const SlideThumbnailCard = ({
             aria-label={visual.label}
           >
             <visual.Icon className="h-3.5 w-3.5" />
-            {/* <span>{visual.label}</span> */}
           </span>
         </Tooltip>
       )}
@@ -558,6 +586,14 @@ const SlideThumbnailCard = ({
   );
 };
 
+const MiniCodePreview = ({ code }: { code: string }) => {
+  return (
+    <pre className="my-auto w-full overflow-hidden whitespace-pre-wrap wrap-break-word text-lg">
+      {code}
+    </pre>
+  );
+};
+
 function projectDropTarget(
   event: DragMoveEvent | DragOverEvent,
 ): ProjectedDropTarget | null {

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

@@ -221,26 +221,54 @@ const SubslideView = ({
   );
 };
 
+const ParkedPreviewContent = ({
+  cell,
+  isNoOutputPreview,
+  isEditable,
+  codeShown,
+}: {
+  cell: RuntimeCell;
+  isNoOutputPreview: boolean;
+  isEditable: boolean;
+  codeShown: boolean;
+}) => {
+  if (isNoOutputPreview && isEditable) {
+    return <SlideCellView cell={cell} />;
+  }
+  if (isNoOutputPreview && codeShown) {
+    return <SlideCellReadOnlyView cell={cell} />;
+  }
+  return (
+    <CellOutputSlide
+      cellId={cell.id}
+      status={cell.status}
+      output={cell.output}
+    />
+  );
+};
+
 // 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'
 // Happens with cells containing iframes / external content
 const RevealSlidesComponent = ({
-  cellsWithOutput,
+  slideCells,
   layout,
   setLayout,
+  noOutputIds,
   activeIndex,
   onSlideChange,
   mode,
-  configWidth = 300, // px
+  configWidth, // px
   isEditable = false,
 }: {
-  cellsWithOutput: RuntimeCell[];
+  slideCells: RuntimeCell[];
   layout: SlidesLayout;
   setLayout: (layout: SlidesLayout) => void;
+  noOutputIds: ReadonlySet<CellId>;
   activeIndex?: number;
   onSlideChange?: (index: number) => void;
   mode: AppMode;
-  configWidth?: number;
+  configWidth: number;
   isEditable?: boolean;
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
@@ -255,42 +283,46 @@ const RevealSlidesComponent = ({
   );
 
   const [showCode, setShowCode] = useState(false);
-  const codeAvailable = useNotebookCodeAvailable(cellsWithOutput);
+  const codeAvailable = useNotebookCodeAvailable(slideCells);
   const codeToggleEnabled = !isIslands() && codeAvailable;
   const codeShown = codeToggleEnabled && showCode;
 
-  const activeCell =
-    activeIndex != null ? cellsWithOutput[activeIndex] : undefined;
+  const activeCell = activeIndex != null ? slideCells[activeIndex] : undefined;
   // Fall back to the first cell while the deck settles on an initial slide.
   // Still `undefined` when the deck is empty (handled below).
-  const activeConfigCell = activeCell ?? cellsWithOutput.at(0);
+  const activeConfigCell = activeCell ?? slideCells.at(0);
 
   const composition = useMemo(
     () =>
       composeSlides({
-        cells: cellsWithOutput,
+        cells: slideCells,
         getType: (cell) =>
-          layout.cells.get(cell.id)?.type ?? DEFAULT_SLIDE_TYPE,
+          noOutputIds.has(cell.id)
+            ? "skip"
+            : (layout.cells.get(cell.id)?.type ?? DEFAULT_SLIDE_TYPE),
       }),
-    [cellsWithOutput, layout.cells],
+    [slideCells, noOutputIds, layout.cells],
   );
 
-  // Skip cells aren't part of the composed deck. When one is selected in the
-  // minimap we render a preview over the deck and park reveal on a neighboring
-  // real slide; keyboard nav while parked is handled below.
-  const skippedPreviewCell =
-    activeCell && layout.cells.get(activeCell.id)?.type === "skip"
-      ? activeCell
-      : null;
+  // Skipped and output-less cells aren't part of the composed deck. When one is
+  // selected in the minimap we render a preview over the deck and park reveal on
+  // a neighboring real slide; keyboard nav while parked is handled below.
+  const activeCellSlideType = activeCell
+    ? layout.cells.get(activeCell.id)?.type
+    : undefined;
+  const isNoOutputPreview =
+    activeCell != null && noOutputIds.has(activeCell.id);
+  const isParkedPreview = activeCellSlideType === "skip" || isNoOutputPreview;
+  const parkedPreviewCell = isParkedPreview ? activeCell : null;
 
   const { cellToTarget, targetToCellIndex } = useMemo(
     () =>
       buildSlideIndices({
         composition,
-        cells: cellsWithOutput,
+        cells: slideCells,
         getId: (c) => c.id,
       }),
-    [composition, cellsWithOutput],
+    [composition, slideCells],
   );
 
   const deckTransition = layout.deck?.transition ?? DEFAULT_DECK_TRANSITION;
@@ -322,7 +354,7 @@ const RevealSlidesComponent = ({
   const navigateDeckToActiveCell = useEvent((deck: RevealApi) => {
     const target = resolveDeckNavigationTarget({
       activeIndex,
-      cells: cellsWithOutput,
+      cells: slideCells,
       cellToTarget,
       getId: (cell) => cell.id,
     });
@@ -340,7 +372,7 @@ const RevealSlidesComponent = ({
       return;
     }
     navigateDeckToActiveCell(deck);
-  }, [activeIndex, cellToTarget, cellsWithOutput, navigateDeckToActiveCell]);
+  }, [activeIndex, cellToTarget, slideCells, navigateDeckToActiveCell]);
 
   // Toggling code (re)mounts a CodeMirror editor on the active slide. Defer
   // the state update so the button/keypress paints first and the heavier mount
@@ -380,12 +412,12 @@ const RevealSlidesComponent = ({
     return { h: target.h, v: target.v };
   }, [activeCell, cellToTarget]);
 
-  // Forward the deck's current cell to the parent, except while a skipped
+  // Forward the deck's current cell to the parent, except while a parked
   // preview is parked: every reveal.js event during that window is an echo
   // of the programmatic park (possibly with transient indices), so ignoring
-  // them keeps `activeCellId` pinned on the skipped cell.
+  // them keeps `activeCellId` pinned on the minimap cell.
   const reportCurrentCell = useEvent(() => {
-    if (skippedPreviewCell != null) {
+    if (parkedPreviewCell != null) {
       return;
     }
     const deck = deckRef.current;
@@ -401,10 +433,10 @@ const RevealSlidesComponent = ({
     }
   });
 
-  // While parked on a skipped preview, step through minimap order instead of
+  // While parked on a preview, step through minimap order instead of
   // letting reveal.js advance from the parked slide the user can't see.
   const handleParkedNavKey = useEvent((event: KeyboardEvent) => {
-    if (!skippedPreviewCell || activeIndex == null) {
+    if (!parkedPreviewCell || activeIndex == null) {
       return;
     }
     if (Events.fromInput(event)) {
@@ -418,7 +450,7 @@ const RevealSlidesComponent = ({
     event.preventDefault();
     event.stopPropagation();
     const nextIndex = activeIndex + direction;
-    if (nextIndex < 0 || nextIndex >= cellsWithOutput.length) {
+    if (nextIndex < 0 || nextIndex >= slideCells.length) {
       return;
     }
     onSlideChange?.(nextIndex);
@@ -431,6 +463,10 @@ const RevealSlidesComponent = ({
 
   useEventListener(document, "keydown", handleParkedNavKey, { capture: true });
 
+  const parkedPreviewLabel = isNoOutputPreview
+    ? "Hidden as there is no output"
+    : "Skipped in presentation";
+
   const slideArea = (
     <div
       ref={containerRef}
@@ -439,7 +475,7 @@ const RevealSlidesComponent = ({
       <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"
+          className="aspect-video w-full overflow-hidden border rounded bg-background mo-slides-theme prose-slides focus:outline-none focus-visible:outline-none"
           config={revealConfig}
           onReady={handleDeckReady}
           onSlideChange={handleSlideChange}
@@ -480,21 +516,30 @@ const RevealSlidesComponent = ({
             );
           })}
         </Deck>
-        {skippedPreviewCell && (
+        {parkedPreviewCell && (
           <div
+            key={parkedPreviewCell.id}
             className="absolute inset-0 z-10 border rounded bg-background flex flex-col overflow-hidden"
-            aria-label="Skipped in presentation"
+            aria-label={parkedPreviewLabel}
           >
             <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>
+              <span>{parkedPreviewLabel}</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
+                className={
+                  isNoOutputPreview && (isEditable || codeShown)
+                    ? "mo-slide-content flex flex-col gap-3"
+                    : "mo-slide-content"
+                }
+                style={{ margin: "auto 20px" }}
+              >
+                <ParkedPreviewContent
+                  cell={parkedPreviewCell}
+                  isNoOutputPreview={isNoOutputPreview}
+                  isEditable={isEditable}
+                  codeShown={codeShown}
                 />
               </div>
             </div>

package/src/components/slides/slide-cell-view.tsx

@@ -3,6 +3,7 @@
 import { useMemo, useRef, useState } from "react";
 import type { EditorView } from "@codemirror/view";
 import { useAtomValue } from "jotai";
+import { cellDomProps } from "@/components/editor/common";
 import { CellEditor } from "@/components/editor/cell/code/cell-editor";
 import { CellStatusComponent } from "@/components/editor/cell/CellStatus";
 import { RunButton } from "@/components/editor/cell/RunButton";
@@ -111,7 +112,10 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
   );
 
   const editor = (
-    <div className={editorWrapperClassName}>
+    <div
+      className={editorWrapperClassName}
+      {...cellDomProps(cell.id, cell.name)}
+    >
       <CellEditor
         theme={theme}
         showPlaceholder={false}
@@ -134,7 +138,14 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
         languageAdapter={languageAdapter}
         setLanguageAdapter={setLanguageAdapter}
         showLanguageToggles={false}
+        // The reveal.js transforms in slides view break the inline AI
+        // tooltip's fixed positioning, so disable it here.
+        inlineAiTooltip={false}
         outputArea={cellOutputPosition}
+        // Parent tooltips (completions, hover, signature help) to the Reveal
+        // viewport so they stay visible when presenting fullscreen; `#App` sits
+        // outside the fullscreened subtree and would never paint.
+        tooltipParentSelector=".reveal-viewport"
       />
       {toolbar}
     </div>

package/src/components/slides/slide-form.tsx

@@ -26,15 +26,23 @@ import type {
   SlidesLayout,
   SlideType,
 } from "../editor/renderers/slides-layout/types";
-import { useState } from "react";
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
 import { Tooltip } from "../ui/tooltip";
 import { Button } from "../ui/button";
 import { Kbd } from "../ui/kbd";
 import type { RuntimeCell } from "@/core/cells/types";
+import { jotaiJsonStorage } from "@/utils/storage/jotai";
 
 export const DEFAULT_SLIDE_TYPE: SlideType = "slide";
 export const DEFAULT_DECK_TRANSITION: DeckTransition = "slide";
 const COLLAPSED_CONFIG_WIDTH = 36;
+const slideConfigOpenAtom = atomWithStorage<boolean>(
+  "marimo:slides:config-open",
+  true,
+  jotaiJsonStorage,
+  { getOnInit: true },
+);
 
 export interface SlideTypeOption {
   value: SlideType;
@@ -322,7 +330,7 @@ export const SlideSidebar = ({
   setLayout: (layout: SlidesLayout) => void;
   activeConfigCell?: RuntimeCell;
 }) => {
-  const [isConfigOpen, setIsConfigOpen] = useState(false);
+  const [isConfigOpen, setIsConfigOpen] = useAtom(slideConfigOpenAtom);
 
   return (
     <aside
@@ -350,7 +358,7 @@ export const SlideSidebar = ({
             variant="ghost"
             size="icon"
             className="h-7 w-7 text-muted-foreground hover:text-foreground"
-            onClick={() => setIsConfigOpen(!isConfigOpen)}
+            onClick={() => setIsConfigOpen((open) => !open)}
             aria-expanded={isConfigOpen}
             aria-controls="slide-config-panel"
           >

package/src/components/static-html/static-banner.tsx

@@ -6,6 +6,7 @@ import { useAtomValue } from "jotai";
 import { CopyIcon, DownloadIcon } from "lucide-react";
 import type React from "react";
 import { Constants } from "@/core/constants";
+import { useResolvedMarimoConfig } from "@/core/config/config";
 import { codeAtom } from "@/core/saving/file-state";
 import { useFilename } from "@/core/saving/filename";
 import { isStaticNotebook } from "@/core/static/static-state";
@@ -66,6 +67,9 @@ const StaticBannerDialog = ({ code }: { code: string }) => {
     filename = filename.slice(lastSlash + 1);
   }
 
+  const [resolvedConfig] = useResolvedMarimoConfig();
+  const molabEnabled = resolvedConfig.sharing?.molab !== false;
+
   const href = window.location.href;
   const molabLink = createShareableLink({
     code,
@@ -118,28 +122,30 @@ const StaticBannerDialog = ({ code }: { code: string }) => {
               </div>
             )}
 
-            <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>
-              </Button>
-              <p className="text-sm text-(--sky-12)">
-                Run this notebook in{" "}
-                <span className="font-semibold">molab</span>, marimo's
-                cloud-hosted notebook platform.
-              </p>
-            </div>
+            {molabEnabled && (
+              <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>
+                </Button>
+                <p className="text-sm text-(--sky-12)">
+                  Run this notebook in{" "}
+                  <span className="font-semibold">molab</span>, marimo's
+                  cloud-hosted notebook platform.
+                </p>
+              </div>
+            )}
           </DialogDescription>
         </DialogHeader>
         <div className="flex gap-3 pt-2">