@marimo-team/islands 0.23.10-dev25 → 0.23.10-dev26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.10-dev25",
+  "version": "0.23.10-dev26",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/editor/cell/code/language-toggle.tsx

@@ -17,6 +17,11 @@ interface LanguageTogglesProps {
   code: string;
   currentLanguageAdapter: LanguageAdapter["type"] | undefined;
   onAfterToggle: () => void;
+  /**
+   * Classes for the wrapper element. Defaults to the absolutely-positioned,
+   * hover-revealed placement used inside the notebook cell editor.
+   */
+  className?: string;
 }
 
 export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
@@ -24,6 +29,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
   code,
   currentLanguageAdapter,
   onAfterToggle,
+  className = "absolute right-3 top-2 z-20 flex hover-action gap-1",
 }) => {
   const canUseMarkdown = useMemo(
     () => LanguageAdapters.markdown.isSupported(code) || code.trim() === "",
@@ -35,7 +41,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
   );
 
   return (
-    <div className="absolute right-3 top-2 z-20 flex hover-action gap-1">
+    <div className={className}>
       <LanguageToggle
         editorView={editorView}
         currentLanguageAdapter={currentLanguageAdapter}

package/src/components/editor/renderers/slides-layout/__tests__/plugin.test.ts

@@ -248,6 +248,26 @@ const BACKWARDS_COMPAT_SNAPSHOTS: BackwardsCompatCase[] = [
       ],
     },
   },
+  {
+    // `showCode` was added to SlideConfig. The validator must know about it (so
+    // it isn't silently stripped), the deserializer must carry it through, and
+    // serialize → deserialize must round-trip both values.
+    label: "showCode round-trips through validate + (de)serialize",
+    input: {
+      cells: [
+        { type: "slide", showCode: true },
+        { type: "fragment", showCode: false },
+      ],
+    },
+    expected: {
+      deck: {},
+      cellIds: ["a", "b"],
+      cellEntries: [
+        ["a", { type: "slide", showCode: true }],
+        ["b", { type: "fragment", showCode: false }],
+      ],
+    },
+  },
 ];
 
 describe("SlidesLayoutPlugin backwards compatibility", () => {

package/src/components/editor/renderers/slides-layout/types.ts

@@ -9,6 +9,7 @@ export type SlideType = z.infer<typeof SlideTypeSchema>;
 const SlideConfigSchema = z.looseObject({
   type: SlideTypeSchema.optional(),
   speakerNotes: z.string().optional(),
+  showCode: z.boolean().optional(),
 });
 export type SlideConfig = z.infer<typeof SlideConfigSchema>;
 

package/src/components/slides/__tests__/reveal-component.test.ts

@@ -0,0 +1,425 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import type { CellId } from "@/core/cells/ids";
+import type { RuntimeCell } from "@/core/cells/types";
+import type { SlideConfig } from "../../editor/renderers/slides-layout/types";
+import {
+  deckSlideType,
+  parkedRendersSource,
+  shouldShowCode,
+  useParkedPreview,
+} from "../reveal-component";
+
+const A = cellId("a");
+const B = cellId("b");
+
+const cells = (
+  ...entries: Array<[CellId, SlideConfig]>
+): ReadonlyMap<CellId, SlideConfig> => new Map(entries);
+
+// The hook only reads `cell.id`, so a minimal stub is enough. Cast is confined
+// to this test helper (see `@/__tests__/branded` for the same rationale).
+const cell = (id: CellId): RuntimeCell => ({ id }) as RuntimeCell;
+
+describe("shouldShowCode", () => {
+  it("is off when the code toggle is unavailable, regardless of config/override", () => {
+    expect(
+      shouldShowCode({
+        cells: cells([A, { showCode: true }]),
+        cellId: A,
+        showCodeOverrides: new Set([A]),
+        codeToggleEnabled: false,
+      }),
+    ).toBe(false);
+  });
+
+  it("is off when there is no active cell", () => {
+    expect(
+      shouldShowCode({
+        cells: cells([A, { showCode: true }]),
+        cellId: undefined,
+        showCodeOverrides: new Set(),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("follows the persisted config when there is no override", () => {
+    expect(
+      shouldShowCode({
+        cells: cells([A, { showCode: true }]),
+        cellId: A,
+        showCodeOverrides: new Set(),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(true);
+    // Missing config entry defaults to off.
+    expect(
+      shouldShowCode({
+        cells: cells(),
+        cellId: A,
+        showCodeOverrides: new Set(),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(false);
+  });
+
+  it("shows code when either the config or the override is set (logical OR)", () => {
+    // Peek: config unset, override present -> shown.
+    expect(
+      shouldShowCode({
+        cells: cells(),
+        cellId: A,
+        showCodeOverrides: new Set([A]),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(true);
+    // Configured + override present -> still shown; the override never hides.
+    expect(
+      shouldShowCode({
+        cells: cells([A, { showCode: true }]),
+        cellId: A,
+        showCodeOverrides: new Set([A]),
+        codeToggleEnabled: true,
+      }),
+    ).toBe(true);
+  });
+});
+
+describe("deckSlideType", () => {
+  const NONE_IDS: ReadonlySet<CellId> = new Set();
+
+  it("uses the configured type for a normal cell", () => {
+    expect(
+      deckSlideType({
+        cell: cell(A),
+        noOutputIds: NONE_IDS,
+        heldEditCellId: null,
+        slideConfigs: cells([A, { type: "fragment" }]),
+      }),
+    ).toBe("fragment");
+  });
+
+  it("defaults to a top-level slide when no type is configured", () => {
+    expect(
+      deckSlideType({
+        cell: cell(A),
+        noOutputIds: NONE_IDS,
+        heldEditCellId: null,
+        slideConfigs: cells(),
+      }),
+    ).toBe("slide");
+  });
+
+  it("drops output-less cells from the deck", () => {
+    expect(
+      deckSlideType({
+        cell: cell(A),
+        noOutputIds: new Set([A]),
+        heldEditCellId: null,
+        // Even an explicit type is overridden by the skip.
+        slideConfigs: cells([A, { type: "sub-slide" }]),
+      }),
+    ).toBe("skip");
+  });
+
+  it("drops the held-edit cell so it isn't mounted twice", () => {
+    expect(
+      deckSlideType({
+        cell: cell(A),
+        noOutputIds: NONE_IDS,
+        heldEditCellId: A,
+        slideConfigs: cells([A, { type: "slide" }]),
+      }),
+    ).toBe("skip");
+  });
+});
+
+describe("parkedRendersSource", () => {
+  it("follows `showCode` for a cell that has output", () => {
+    expect(
+      parkedRendersSource({
+        isNoOutputPreview: false,
+        isEditable: false,
+        showCode: true,
+      }),
+    ).toBe(true);
+    expect(
+      parkedRendersSource({
+        isNoOutputPreview: false,
+        isEditable: true,
+        showCode: false,
+      }),
+    ).toBe(false);
+  });
+
+  it("falls back to source for an editable no-output cell even when showCode is off", () => {
+    expect(
+      parkedRendersSource({
+        isNoOutputPreview: true,
+        isEditable: true,
+        showCode: false,
+      }),
+    ).toBe(true);
+  });
+
+  it("renders output for a read-only no-output cell with showCode off", () => {
+    expect(
+      parkedRendersSource({
+        isNoOutputPreview: true,
+        isEditable: false,
+        showCode: false,
+      }),
+    ).toBe(false);
+  });
+});
+
+describe("useParkedPreview", () => {
+  const NO_CONFIG = cells();
+  const NONE = new Set<CellId>();
+
+  it("is inert for a rendered cell with output", () => {
+    const { result } = renderHook(() =>
+      useParkedPreview({
+        activeCell: cell(A),
+        slideConfigs: NO_CONFIG,
+        noOutputIds: NONE,
+      }),
+    );
+    expect(result.current).toEqual({
+      parkedPreviewCell: null,
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("is inert when there is no active cell", () => {
+    const { result } = renderHook(() =>
+      useParkedPreview({
+        activeCell: undefined,
+        slideConfigs: NO_CONFIG,
+        noOutputIds: NONE,
+      }),
+    );
+    expect(result.current).toEqual({
+      parkedPreviewCell: null,
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("parks a skipped cell without flagging it as a no-output preview", () => {
+    const { result } = renderHook(() =>
+      useParkedPreview({
+        activeCell: cell(A),
+        slideConfigs: cells([A, { type: "skip" }]),
+        noOutputIds: NONE,
+      }),
+    );
+    expect(result.current).toEqual({
+      parkedPreviewCell: cell(A),
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("parks an output-less cell as a no-output preview", () => {
+    const { result } = renderHook(() =>
+      useParkedPreview({
+        activeCell: cell(A),
+        slideConfigs: NO_CONFIG,
+        noOutputIds: new Set([A]),
+      }),
+    );
+    expect(result.current).toEqual({
+      parkedPreviewCell: cell(A),
+      isHeldEdit: false,
+      isNoOutputPreview: true,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("holds the cell in the overlay once it gains output", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: NO_CONFIG,
+          noOutputIds: new Set([A]),
+        },
+      },
+    );
+    expect(result.current.isNoOutputPreview).toBe(true);
+    expect(result.current.isHeldEdit).toBe(false);
+
+    // Same cell, now with output: keep it parked so the editor isn't remounted.
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current).toEqual({
+      parkedPreviewCell: cell(A),
+      isHeldEdit: true,
+      isNoOutputPreview: false,
+      heldEditCellId: A,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("releases the hold when a different cell becomes active", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: NO_CONFIG,
+          noOutputIds: new Set([A]),
+        },
+      },
+    );
+    // Arm the hold, then let A gain output (held).
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current.isHeldEdit).toBe(true);
+
+    // Navigate to a rendered B: the hold on A is released.
+    rerender({
+      activeCell: cell(B),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current).toEqual({
+      parkedPreviewCell: null,
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("releases a skipped cell into the deck as soon as it is un-skipped", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: cells([A, { type: "skip" }]),
+          noOutputIds: NONE,
+        },
+      },
+    );
+    expect(result.current.parkedPreviewCell).toEqual(cell(A));
+
+    // Un-skip the still-active cell: it has output, so it must rejoin the deck
+    // immediately rather than staying held in the overlay until navigation.
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current).toEqual({
+      parkedPreviewCell: null,
+      isHeldEdit: false,
+      isNoOutputPreview: false,
+      heldEditCellId: null,
+      heldShowsCode: true,
+      toggleHeldShowsCode: expect.any(Function),
+    });
+  });
+
+  it("shows the held editor by default and toggles it off without navigating", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: NO_CONFIG,
+          noOutputIds: new Set([A]),
+        },
+      },
+    );
+    // A gains output: held, with its editor shown by default.
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current.isHeldEdit).toBe(true);
+    expect(result.current.heldShowsCode).toBe(true);
+
+    // The `C` toggle hides the editor in place, no navigation required.
+    act(() => {
+      result.current.toggleHeldShowsCode();
+    });
+    expect(result.current.heldShowsCode).toBe(false);
+
+    // Toggling again brings it back.
+    act(() => {
+      result.current.toggleHeldShowsCode();
+    });
+    expect(result.current.heldShowsCode).toBe(true);
+  });
+
+  it("resets held code visibility when a new cell takes the held slot", () => {
+    const { result, rerender } = renderHook(
+      (props: Parameters<typeof useParkedPreview>[0]) =>
+        useParkedPreview(props),
+      {
+        initialProps: {
+          activeCell: cell(A),
+          slideConfigs: NO_CONFIG,
+          noOutputIds: new Set([A]),
+        },
+      },
+    );
+    rerender({
+      activeCell: cell(A),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    act(() => {
+      result.current.toggleHeldShowsCode();
+    });
+    expect(result.current.heldShowsCode).toBe(false);
+
+    // Move to a fresh output-less cell B, then let it gain output (held).
+    rerender({
+      activeCell: cell(B),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: new Set([B]),
+    });
+    rerender({
+      activeCell: cell(B),
+      slideConfigs: NO_CONFIG,
+      noOutputIds: NONE,
+    });
+    expect(result.current.heldEditCellId).toBe(B);
+    // The new cell starts with its editor visible again.
+    expect(result.current.heldShowsCode).toBe(true);
+  });
+});