@marimo-team/frontend 0.23.10-dev24 → 0.23.10-dev26

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-DqAsO6o_.js"></script>
+    <script type="module" crossorigin src="./assets/index-BIqgYS3N.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-DdZsAcJe.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-Bj1aDYRI.js">
@@ -115,15 +115,15 @@
     <link rel="modulepreload" crossorigin href="./assets/capabilities-A_KhFcGV.js">
     <link rel="modulepreload" crossorigin href="./assets/createReducer-CI9qeK_X.js">
     <link rel="modulepreload" crossorigin href="./assets/paths-SFhaqGlE.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-BrR4M-k3.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-HlsDto3K.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-CHcznzB-.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-BU26XwgJ.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-COs9gIu5.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-BZr6MMV-.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-DCqxOggh.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-DkA__6UI.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-C9ZB41s2.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-D0HyMpgV.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-Bo13cFwO.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-DVkC-Qmw.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-BFCmbzWi.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-CS6moqWs.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-cJl5Fok5.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-CMvFIVSA.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-DTNIEaQR.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-YEXtMjTi.js">
     <link rel="modulepreload" crossorigin href="./assets/stex-lcoTi-7o.js">
     <link rel="modulepreload" crossorigin href="./assets/toDate-B5A0DFEz.js">
     <link rel="modulepreload" crossorigin href="./assets/purify.es-DvRMX74T.js">
@@ -133,7 +133,7 @@
     <link rel="modulepreload" crossorigin href="./assets/debounce-DhnxH9Rh.js">
     <link rel="modulepreload" crossorigin href="./assets/database-zap-kIkTfzTX.js">
     <link rel="modulepreload" crossorigin href="./assets/main-B0OX4z33.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-6zANRDgG.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-vjZ69d-u.js">
     <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-DyYDV0HI.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-BJB2rf7K.js">
     <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-CKRPRNft.js">
@@ -147,35 +147,35 @@
     <link rel="modulepreload" crossorigin href="./assets/usePress-jH2RfcUG.js">
     <link rel="modulepreload" crossorigin href="./assets/input-Dvl7sgNQ.js">
     <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-CYpBrCHJ.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-AJAjqJb5.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-CgOvnjYt.js">
     <link rel="modulepreload" crossorigin href="./assets/multi-map-C4OANz8X.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-DrHguQlr.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-CG5QYXYk.js">
     <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-CZ4XbE-c.js">
     <link rel="modulepreload" crossorigin href="./assets/links-B8WzCnbo.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-Bdoq5z0L.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-DELfNFG_.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-Ch48HVPK.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-BwrPA9zQ.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-icon-c48rtYOO.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-DMfo8SsK.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-Bdio-a96.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-BY9qohgO.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-D-OajlP0.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-CAHQYs6s.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-CkI-5wv1.js">
     <link rel="modulepreload" crossorigin href="./assets/package-B8oXOUM-.js">
     <link rel="modulepreload" crossorigin href="./assets/sparkles-CC9Bko6a.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-DxKFtfTA.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-Bqzbv_QJ.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-UuZAUjoP.js">
-    <link rel="modulepreload" crossorigin href="./assets/html-to-image-DvVDsEqf.js">
-    <link rel="modulepreload" crossorigin href="./assets/focus-Btnin91L.js">
+    <link rel="modulepreload" crossorigin href="./assets/html-to-image-2JVKRW1b.js">
+    <link rel="modulepreload" crossorigin href="./assets/focus-D3l6p56g.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-Dg8E_bPh.js">
-    <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-CaR5QYb0.js">
+    <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-DGz0wXbE.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-bqhKsQDn.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-5FQGJX7Z-CfK7VoEZ.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-j3gyUhRd.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-DTD6g-4R.js">
     <link rel="modulepreload" crossorigin href="./assets/command-rtnOVF57.js">
     <link rel="modulepreload" crossorigin href="./assets/field-DTk6GDWB.js">
     <link rel="modulepreload" crossorigin href="./assets/popover-CNCYAwbC.js">
     <link rel="modulepreload" crossorigin href="./assets/errors-iwK4b4VF.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-C_cnbmM9.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-DyF92TRH.js">
     <link rel="modulepreload" crossorigin href="./assets/table-Bgc-inJs.js">
     <link rel="modulepreload" crossorigin href="./assets/useIframeCapabilities-DPVTppnD.js">
     <link rel="modulepreload" crossorigin href="./assets/error-banner-BEmVNYlO.js">
@@ -197,25 +197,25 @@
     <link rel="modulepreload" crossorigin href="./assets/plus-CxkHs8QM.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-2-BJLYnZpG.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-BdtIs0E-.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-Hk49rzGl.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-BYEhZqb8.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-nqk474t8.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-blYaQso8.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-D1ptWKg6.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-vertical-CkwWkOQL.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-cw-a_9k9BK7.js">
-    <link rel="modulepreload" crossorigin href="./assets/tree-actions-Ci1FwTlL.js">
-    <link rel="modulepreload" crossorigin href="./assets/components-CY48CF-h.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-B2kXnKdd.js">
+    <link rel="modulepreload" crossorigin href="./assets/tree-actions-ovIJqNLj.js">
+    <link rel="modulepreload" crossorigin href="./assets/components-1VuqOYTA.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-Bqp95o1c.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-8tfAri2V.js">
-    <link rel="modulepreload" crossorigin href="./assets/radio-group-BvfI-gyW.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-DvtQqFjz.js">
+    <link rel="modulepreload" crossorigin href="./assets/radio-group-BI8_7tB1.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-p8p6wKPj.js">
     <link rel="modulepreload" crossorigin href="./assets/objectWithoutPropertiesLoose-DoKw85w0.js">
-    <link rel="modulepreload" crossorigin href="./assets/esm-Cb2bnV6o.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-oS1ym1oK.js">
+    <link rel="modulepreload" crossorigin href="./assets/esm-ChQLuryJ.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-105OJr2D.js">
     <link rel="modulepreload" crossorigin href="./assets/file-headphone-B3fuktN0.js">
     <link rel="modulepreload" crossorigin href="./assets/file-HTLbeC2b.js">
     <link rel="modulepreload" crossorigin href="./assets/image-BIibSXT6.js">
-    <link rel="modulepreload" crossorigin href="./assets/file-icons-DObkD0p2.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-icons-DYeUbwkv.js">
     <link rel="modulepreload" crossorigin href="./assets/switch-DNHeV6xs.js">
     <link rel="modulepreload" crossorigin href="./assets/events-CBm-hwqS.js">
     <link rel="modulepreload" crossorigin href="./assets/globals-BlTO0oUB.js">
@@ -224,11 +224,11 @@
     <link rel="modulepreload" crossorigin href="./assets/memoize-Tp7rARFe.js">
     <link rel="modulepreload" crossorigin href="./assets/get-C-qh_et5.js">
     <link rel="modulepreload" crossorigin href="./assets/_baseSet-CxV9N1bc.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-CMmuAxhT.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-EEacB8H4.js">
     <link rel="modulepreload" crossorigin href="./assets/label-C2_YQRio.js">
-    <link rel="modulepreload" crossorigin href="./assets/textarea-CnP3WeAt.js">
+    <link rel="modulepreload" crossorigin href="./assets/textarea-ibvi1Qnd.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-ccw-DLc784Sj.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-CBuNDBgZ.js">
+    <link rel="modulepreload" crossorigin href="./assets/form-B_6lxOn3.js">
     <link rel="modulepreload" crossorigin href="./assets/renderShortcut-DbyG33_r.js">
     <link rel="modulepreload" crossorigin href="./assets/useBoolean-D4l-DzBM.js">
     <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-CWcgQCbT.js">
@@ -246,7 +246,7 @@
     <link rel="modulepreload" crossorigin href="./assets/square-rACnnz-q.js">
     <link rel="modulepreload" crossorigin href="./assets/triangle-alert-CJ0ZIqcz.js">
     <link rel="modulepreload" crossorigin href="./assets/bundle.esm-BXIlAZ6T.js">
-    <link rel="stylesheet" crossorigin href="./assets/cells-BSWdJzbh.css">
+    <link rel="stylesheet" crossorigin href="./assets/cells-pu5xzE_v.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DdDKmWlR.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B7vuddcd.css">
     <link rel="stylesheet" crossorigin href="./assets/index-Ct3LgsQ8.css">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.23.10-dev24",
+  "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/documentation.css

@@ -153,3 +153,22 @@
     }
   }
 }
+
+/* Syntax highlighting for LSP hover code blocks (lezer classHighlighter tok-* classes) */
+.docs-documentation,
+.cm-tooltip .documentation {
+  .tok-keyword { color: light-dark(#708, #c678dd); font-weight: 500; }
+  .tok-string,
+  .tok-string2 { color: light-dark(#a11, #98c379); }
+  .tok-number { color: light-dark(#164, #d19a66); }
+  .tok-bool,
+  .tok-atom { color: light-dark(#219, #d19a66); }
+  .tok-comment { color: var(--cm-comment); }
+  .tok-className { color: light-dark(#00f, #61afef); }
+  .tok-typeName,
+  .tok-namespace { color: light-dark(#085, #56b6c2); }
+  .tok-operator { color: light-dark(#a2f, #56b6c2); }
+  .tok-propertyName { color: light-dark(#05a, #e5c07b); }
+  .tok-variableName { color: light-dark(#000, #abb2bf); }
+  .tok-punctuation { color: light-dark(#000, #abb2bf); }
+}

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);
+  });
+});