@marimo-team/frontend 0.23.7-dev8 → 0.23.7-dev80

package/src/components/editor/output/console/ConsoleOutput.tsx

@@ -85,6 +85,7 @@ interface Props {
   className?: string;
   consoleOutputs: WithResponse<OutputMessage>[];
   stale: boolean;
+  interrupted: boolean;
   debuggerActive: boolean;
   onRefactorWithAI?: OnRefactorWithAI;
   onClear?: () => void;
@@ -111,6 +112,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
   const {
     consoleOutputs: rawConsoleOutputs,
     stale,
+    interrupted,
     cellName,
     cellId,
     onSubmitDebugger,
@@ -280,6 +282,7 @@ const ConsoleOutputInternal = (props: Props): React.ReactNode => {
                 output={output.data}
                 response={output.response}
                 isPassword={isPassword}
+                interrupted={interrupted}
               />
             );
           }
@@ -359,9 +362,9 @@ const StdInput = (props: {
           if (e.key === "Enter" && !e.shiftKey) {
             if (value) {
               addToHistory(value);
-              onSubmit(value);
-              setValue("");
             }
+            onSubmit(value);
+            setValue("");
             e.preventDefault();
             e.stopPropagation();
           }
@@ -382,12 +385,27 @@ const StdInputWithResponse = (props: {
   output: string;
   response?: string;
   isPassword?: boolean;
+  interrupted?: boolean;
 }) => {
+  const { output, response, isPassword, interrupted } = props;
+  const hasResponse = response != null && response !== "";
+  const wasInterruptedWithoutResponse = interrupted && !hasResponse;
+
   return (
     <div className="flex gap-2 items-center">
-      {renderText(props.output)}
-      {!props.isPassword && (
-        <span className="text-(--sky-11)">{props.response}</span>
+      {renderText(output)}
+      {!isPassword && !wasInterruptedWithoutResponse && (
+        <span
+          className="inline-flex items-center gap-1 text-(--sky-11)"
+          aria-label="stdin response"
+        >
+          <ChevronRightIcon className="w-4 h-4 shrink-0 opacity-70" />
+          {hasResponse ? (
+            response
+          ) : (
+            <span className="italic opacity-70">(empty)</span>
+          )}
+        </span>
       )}
     </div>
   );

package/src/components/editor/output/console/__tests__/ConsoleOutput.test.tsx

@@ -28,6 +28,7 @@ describe("ConsoleOutput integration", () => {
     cellName: "test_cell",
     consoleOutputs: [] as WithResponse<OutputMessage>[],
     stale: false,
+    interrupted: false,
     debuggerActive: false,
     onSubmitDebugger: () => {
       // noop
@@ -59,6 +60,7 @@ describe("ConsoleOutput pdb history", () => {
     cellName: "test_cell",
     consoleOutputs: [] as WithResponse<OutputMessage>[],
     stale: false,
+    interrupted: false,
     debuggerActive: false,
     onSubmitDebugger: vi.fn(),
   };
@@ -118,6 +120,82 @@ describe("ConsoleOutput pdb history", () => {
     expect(newInput).toHaveValue("next");
   });
 
+  it("should submit an empty string when Enter is pressed with no input", () => {
+    // Many CLIs prompt "Press Enter to continue" and expect "" back.
+    const onSubmitDebugger = vi.fn();
+    const outputs: WithResponse<OutputMessage>[] = [
+      stdinPrompt("Press Enter to continue: "),
+    ];
+
+    renderWithProvider(
+      <ConsoleOutput
+        {...defaultProps}
+        consoleOutputs={outputs}
+        onSubmitDebugger={onSubmitDebugger}
+      />,
+    );
+
+    const input = screen.getByTestId("console-input");
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    expect(onSubmitDebugger).toHaveBeenCalledWith("", 0);
+  });
+
+  it("should not record empty submissions in input history", () => {
+    const onSubmitDebugger = vi.fn();
+    const outputs1: WithResponse<OutputMessage>[] = [stdinPrompt("(Pdb) ")];
+
+    const { rerender } = renderWithProvider(
+      <ConsoleOutput
+        {...defaultProps}
+        consoleOutputs={outputs1}
+        onSubmitDebugger={onSubmitDebugger}
+      />,
+    );
+
+    let input = screen.getByTestId("console-input");
+    fireEvent.change(input, { target: { value: "step" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    const outputs2: WithResponse<OutputMessage>[] = [
+      stdinPrompt("(Pdb) ", "step"),
+      stdinPrompt("(Pdb) "),
+    ];
+    rerender(
+      <TooltipProvider>
+        <ConsoleOutput
+          {...defaultProps}
+          consoleOutputs={outputs2}
+          onSubmitDebugger={onSubmitDebugger}
+        />
+      </TooltipProvider>,
+    );
+
+    // Submit an empty value; this should NOT enter the history stack.
+    input = screen.getByTestId("console-input");
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    const outputs3: WithResponse<OutputMessage>[] = [
+      stdinPrompt("(Pdb) ", "step"),
+      stdinPrompt("(Pdb) ", ""),
+      stdinPrompt("(Pdb) "),
+    ];
+    rerender(
+      <TooltipProvider>
+        <ConsoleOutput
+          {...defaultProps}
+          consoleOutputs={outputs3}
+          onSubmitDebugger={onSubmitDebugger}
+        />
+      </TooltipProvider>,
+    );
+
+    // ArrowUp should jump back to "step", skipping the empty submission.
+    input = screen.getByTestId("console-input");
+    fireEvent.keyDown(input, { key: "ArrowUp" });
+    expect(input).toHaveValue("step");
+  });
+
   it("should navigate through multiple history entries across remounts", () => {
     const onSubmitDebugger = vi.fn();
 
@@ -192,6 +270,41 @@ describe("ConsoleOutput pdb history", () => {
     fireEvent.keyDown(input, { key: "ArrowDown" });
     expect(input).toHaveValue("");
   });
+
+  it("should distinguish an interrupted prompt from a bare-Enter submission", () => {
+    // After interrupt, cell.ts coerces pending stdin prompts to response: "".
+    // We must render that case differently from a real bare-Enter response,
+    // so the user isn't told they "submitted" a blank value.
+    const interruptedOutputs: WithResponse<OutputMessage>[] = [
+      stdinPrompt("Press Enter to continue: ", ""),
+    ];
+
+    const { rerender } = renderWithProvider(
+      <ConsoleOutput
+        {...defaultProps}
+        consoleOutputs={interruptedOutputs}
+        interrupted={true}
+      />,
+    );
+
+    // No response chunk should be rendered for an interrupted pending prompt.
+    expect(screen.queryByLabelText("stdin response")).not.toBeInTheDocument();
+
+    // Same outputs, but the cell isn't interrupted -- this is a real
+    // bare-Enter submission, so we should render the (empty) placeholder.
+    rerender(
+      <TooltipProvider>
+        <ConsoleOutput
+          {...defaultProps}
+          consoleOutputs={interruptedOutputs}
+          interrupted={false}
+        />
+      </TooltipProvider>,
+    );
+
+    expect(screen.getByLabelText("stdin response")).toBeInTheDocument();
+    expect(screen.getByText("(empty)")).toBeInTheDocument();
+  });
 });
 
 describe("ConsoleOutput debounced clearing", () => {
@@ -219,6 +332,7 @@ describe("ConsoleOutput debounced clearing", () => {
     cellName: "test_cell",
     consoleOutputs: [] as WithResponse<OutputMessage>[],
     stale: false,
+    interrupted: false,
     debuggerActive: false,
     onSubmitDebugger: vi.fn(),
   };

package/src/components/editor/renderers/slides-layout/__tests__/compute-slide-cells.test.ts

@@ -4,6 +4,7 @@ import { describe, it, expect } from "vitest";
 import { computeSlideCellsInfo } from "../compute-slide-cells";
 import type { SlideConfig, SlidesLayout } from "../types";
 import type { CellId } from "@/core/cells/ids";
+import { cellId } from "@/__tests__/branded";
 
 interface TestCell {
   id: CellId;
@@ -15,10 +16,10 @@ const DEFAULT_OUTPUT: TestCell["output"] = { data: "ok" };
 const cell = (
   id: string,
   output: TestCell["output"] = DEFAULT_OUTPUT,
-): TestCell => ({ id: id as CellId, output });
+): TestCell => ({ id: cellId(id), output });
 
 const layoutOf = (entries: Array<[string, SlideConfig]>): SlidesLayout => ({
-  cells: new Map(entries.map(([id, cfg]) => [id as CellId, cfg])),
+  cells: new Map(entries.map(([id, cfg]) => [cellId(id), cfg])),
   deck: {},
 });
 
@@ -121,7 +122,7 @@ describe("computeSlideCellsInfo", () => {
     // Skipped cells are still "visible" deck cells — they just aren't rendered
     // in reveal. The minimap relies on the full list plus skippedIds.
     expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a", "b", "c"]);
-    expect(result.slideTypes.get("b" as CellId)).toBe("skip");
+    expect(result.slideTypes.get(cellId("b"))).toBe("skip");
   });
 
   it("ignores layout entries for cells that have no output", () => {
@@ -137,7 +138,7 @@ describe("computeSlideCellsInfo", () => {
     );
     expect(result.cellsWithOutput.map((c) => c.id)).toEqual(["a"]);
     expect(result.skippedIds.size).toBe(0);
-    expect(result.slideTypes.has("b" as CellId)).toBe(false);
+    expect(result.slideTypes.has(cellId("b"))).toBe(false);
   });
 
   it("preserves the input order of cells in cellsWithOutput", () => {

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

@@ -4,10 +4,11 @@ import { describe, it, expect } from "vitest";
 import { SlidesLayoutPlugin } from "../plugin";
 import type { CellData } from "@/core/cells/types";
 import type { CellId } from "@/core/cells/ids";
+import { cellId } from "@/__tests__/branded";
 
 function makeCell(id: string, code = "print('hi')"): CellData {
   return {
-    id: id as CellId,
+    id: cellId(id),
     name: id,
     code,
     edited: false,
@@ -198,7 +199,10 @@ const BACKWARDS_COMPAT_SNAPSHOTS: BackwardsCompatCase[] = [
   },
   {
     // Defensive: if a future version adds a new SlideConfig field and a user
-    // downgrades, we must not crash on unknown keys.
+    // downgrades, we must not crash on unknown keys — AND we must not silently
+    // drop them either. `notes` / `background` aren't in the current schema;
+    // they must still be present after validate + (de)serialize so a downgrade
+    // followed by a save doesn't erase the newer marimo's data.
     label: "forward-compat: unknown SlideConfig fields present",
     input: {
       cells: [{ type: "slide", notes: "x", background: "#000" }],
@@ -206,7 +210,42 @@ const BACKWARDS_COMPAT_SNAPSHOTS: BackwardsCompatCase[] = [
     expected: {
       deck: {},
       cellIds: ["a"],
-      cellEntries: [["a", { type: "slide" }]],
+      cellEntries: [["a", { type: "slide", notes: "x", background: "#000" }]],
+    },
+  },
+  {
+    // Same forward-compat guarantee for unknown deck-level fields (e.g. future
+    // Reveal options we haven't modeled yet).
+    label: "forward-compat: unknown deck fields present",
+    input: {
+      cells: [{}],
+      deck: { transition: "fade", controls: false, autoSlide: 5000 },
+    },
+    expected: {
+      deck: { transition: "fade", controls: false, autoSlide: 5000 },
+      cellIds: ["a"],
+    },
+  },
+  {
+    // `speakerNotes` 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 it.
+    label: "speakerNotes round-trips through validate + (de)serialize",
+    input: {
+      cells: [
+        { type: "slide", speakerNotes: "intro" },
+        { type: "fragment", speakerNotes: "" },
+        { type: "fragment", speakerNotes: "multi\n\nline\n\nnotes" },
+      ],
+    },
+    expected: {
+      deck: {},
+      cellIds: ["a", "b", "c"],
+      cellEntries: [
+        ["a", { type: "slide", speakerNotes: "intro" }],
+        ["b", { type: "fragment", speakerNotes: "" }],
+        ["c", { type: "fragment", speakerNotes: "multi\n\nline\n\nnotes" }],
+      ],
     },
   },
 ];
@@ -223,20 +262,21 @@ describe("SlidesLayoutPlugin backwards compatibility", () => {
         parsed.success,
         `validator rejected: ${JSON.stringify(input)}`,
       ).toBe(true);
+      if (!parsed.success) {
+        return;
+      }
 
-      // 2. Deserialize must succeed and reflect the user-set fields.
-      const layout = SlidesLayoutPlugin.deserializeLayout(
-        // Use the raw input (not the validator output) because that is what
-        // `deserializeLayout` actually receives in production today.
-        // oxlint-disable-next-line typescript/no-explicit-any
-        input as any,
-        cells,
-      );
+      // 2. Deserializing the *validator output* (not the raw input) must
+      // preserve every field listed in `expected.cellEntries`. This is what
+      // catches a schema regression: if the validator silently strips a
+      // known field, the deserialized config won't carry it and the
+      // assertion below fails.
+      const layout = SlidesLayoutPlugin.deserializeLayout(parsed.data, cells);
       if (expected.deck !== undefined) {
         expect(layout.deck).toEqual(expected.deck);
       }
-      for (const [cellId, expectedConfig] of expected.cellEntries ?? []) {
-        expect(layout.cells.get(cellId as CellId)).toMatchObject(
+      for (const [cellEntryId, expectedConfig] of expected.cellEntries ?? []) {
+        expect(layout.cells.get(cellId(cellEntryId))).toMatchObject(
           expectedConfig as object,
         );
       }
@@ -251,8 +291,8 @@ describe("SlidesLayoutPlugin backwards compatibility", () => {
         reserialized,
         cells,
       );
-      for (const [cellId, expectedConfig] of expected.cellEntries ?? []) {
-        expect(redeserialized.cells.get(cellId as CellId)).toMatchObject(
+      for (const [cellEntryId, expectedConfig] of expected.cellEntries ?? []) {
+        expect(redeserialized.cells.get(cellId(cellEntryId))).toMatchObject(
           expectedConfig as object,
         );
       }

package/src/components/editor/renderers/slides-layout/plugin.tsx

@@ -1,15 +1,15 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { z } from "zod";
+import type { CellId } from "@/core/cells/ids";
+import { Logger } from "@/utils/Logger";
 import type { ICellRendererPlugin } from "../types";
 import { SlidesLayoutRenderer } from "./slides-layout";
-import type {
-  SerializedSlidesLayout,
-  SlideConfig,
-  SlidesLayout,
+import {
+  type SerializedSlidesLayout,
+  type SlideConfig,
+  type SlidesLayout,
+  SlidesLayoutSchema,
 } from "./types";
-import { Logger } from "@/utils/Logger";
-import type { CellId } from "@/core/cells/ids";
 
 /**
  * Plugin definition for the slides layout.
@@ -20,24 +20,7 @@ export const SlidesLayoutPlugin: ICellRendererPlugin<
 > = {
   type: "slides",
   name: "Slides",
-
-  // All fields are optional so layouts saved by older marimo versions will work
-  validator: z.object({
-    cells: z
-      .array(
-        z.object({
-          type: z.enum(["slide", "sub-slide", "fragment", "skip"]).optional(),
-        }),
-      )
-      .optional(),
-    deck: z
-      .object({
-        transition: z
-          .enum(["none", "fade", "slide", "convex", "concave", "zoom"])
-          .optional(),
-      })
-      .optional(),
-  }),
+  validator: SlidesLayoutSchema,
 
   deserializeLayout: (serialized, cells): SlidesLayout => {
     const serializedCells = serialized.cells ?? [];

package/src/components/editor/renderers/slides-layout/slides-layout.tsx

@@ -3,6 +3,7 @@ import React, { useMemo, useState } from "react";
 import { useAtomValue } from "jotai";
 import { numColumnsAtom } from "@/core/cells/cells";
 import type { CellId } from "@/core/cells/ids";
+import { kioskModeAtom } from "@/core/mode";
 import type { ICellRendererProps } from "../types";
 import type { SlidesLayout } from "./types";
 import { computeSlideCellsInfo } from "./compute-slide-cells";
@@ -21,7 +22,10 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   cells,
   mode,
 }) => {
-  const isReading = mode === "read";
+  // Kiosk clients (e.g. reveal.js's speaker-view iframes) are read-only and
+  // shouldn't show authoring chrome, so we collapse to the read-mode layout.
+  const kioskMode = useAtomValue(kioskModeAtom);
+  const isReading = mode === "read" || kioskMode;
   const numColumns = useAtomValue(numColumnsAtom);
   const isMultiColumn = numColumns > 1;
   const [activeCellId, setActiveCellId] = useState<CellId | null>(null);
@@ -52,14 +56,23 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
       activeIndex={resolvedIndex}
       onSlideChange={handleSlideChange}
       configWidth={300}
-      mode={mode}
-      isEditable={mode !== "read"}
+      mode={isReading ? "read" : mode}
+      isEditable={!isReading}
     />
   );
 
   if (isReading) {
-    // Cap the deck height and derive width from height via aspect-video so it stays 16:9 without
-    // ballooning to the full viewport on wide screens.
+    // In kiosk mode (e.g. reveal.js's speaker-view iframes), anchor to the
+    // iframe viewport with `dvh`/`dvw` so the deck resizes with the popup
+    // window. The non-kiosk read mode keeps its 16:9 cap so the deck doesn't
+    // balloon to the full viewport on wide screens.
+    if (kioskMode) {
+      return (
+        <div className="flex h-dvh w-dvw overflow-hidden bg-background">
+          {slides}
+        </div>
+      );
+    }
     return (
       <div className="p-4 flex flex-1 items-center justify-center min-h-0">
         <div className="h-full max-h-[95vh] aspect-video max-w-full flex">
@@ -70,7 +83,7 @@ export const SlidesLayoutRenderer: React.FC<Props> = ({
   }
 
   return (
-    <div className="pr-18 pb-2 flex flex-row gap-2 min-h-0">
+    <div className="flex-1 pr-18 pb-2 flex flex-row gap-2 min-h-0">
       <SlidesMinimap
         cells={cellsWithOutput}
         thumbnailWidth={220}

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

@@ -1,41 +1,50 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-/* oxlint-disable typescript/no-empty-object-type */
 
+import { z } from "zod";
 import type { CellId } from "@/core/cells/ids";
 
+const SlideTypeSchema = z.enum(["slide", "sub-slide", "fragment", "skip"]);
+export type SlideType = z.infer<typeof SlideTypeSchema>;
+
+const SlideConfigSchema = z.looseObject({
+  type: SlideTypeSchema.optional(),
+  speakerNotes: z.string().optional(),
+});
+export type SlideConfig = z.infer<typeof SlideConfigSchema>;
+
+const DeckTransitionSchema = z.enum([
+  "none",
+  "fade",
+  "slide",
+  "convex",
+  "concave",
+  "zoom",
+]);
+export type DeckTransition = z.infer<typeof DeckTransitionSchema>;
+
+const DeckConfigSchema = z.looseObject({
+  transition: DeckTransitionSchema.optional(),
+});
+export type DeckConfig = z.infer<typeof DeckConfigSchema>;
+
 /**
- * The serialized form of a slides layout.
- * This must be backwards-compatible as it is stored on the user's disk.
+ * Schema for the serialized form of a slides layout.
+ *
+ * This must be backwards-compatible as it is stored on the user's disk —
+ * fields are optional so files saved before they existed (e.g. the bare `{}`
+ * emitted by earlier marimo versions) still deserialize cleanly. Unknown
+ * keys are preserved (via `looseObject`) for the same reason.
  */
-// oxlint-disable-next-line typescript/consistent-type-definitions
-export type SerializedSlidesLayout = {
-  // Both fields are optional so files saved before these existed (e.g. the
-  // bare `{}` emitted by earlier marimo versions) still deserialize cleanly.
-  deck?: DeckConfig;
-  cells?: SlideConfig[];
-};
+export const SlidesLayoutSchema = z.looseObject({
+  cells: z.array(SlideConfigSchema).optional(),
+  deck: DeckConfigSchema.optional(),
+});
+export type SerializedSlidesLayout = z.infer<typeof SlidesLayoutSchema>;
 
-export interface SlidesLayout extends Omit<
-  SerializedSlidesLayout,
-  "cells" | "deck"
-> {
-  // We map the cells to their IDs so that we can track them as they move around.
+/**
+ * Runtime form of a slides layout.
+ */
+export interface SlidesLayout {
   cells: Map<CellId, SlideConfig>;
   deck: DeckConfig;
 }
-
-export type SlideType = "slide" | "sub-slide" | "fragment" | "skip";
-export interface SlideConfig {
-  type?: SlideType;
-}
-
-export type DeckTransition =
-  | "none"
-  | "fade"
-  | "slide"
-  | "convex"
-  | "concave"
-  | "zoom";
-export interface DeckConfig {
-  transition?: DeckTransition;
-}

package/src/components/editor/renderers/vertical-layout/vertical-layout.tsx

@@ -405,6 +405,7 @@ const VerticalCell = memo(
           <ConsoleOutput
             consoleOutputs={consoleOutputs}
             stale={outputStale}
+            interrupted={interrupted}
             cellName={name}
             onSubmitDebugger={() => null}
             cellId={cellId}

package/src/components/home/components.tsx

@@ -16,6 +16,7 @@ import {
   LinkIcon,
   MessagesSquareIcon,
   OrbitIcon,
+  PackageIcon,
   YoutubeIcon,
 } from "lucide-react";
 import type React from "react";
@@ -58,6 +59,11 @@ const TUTORIALS: Record<
     FileIcon,
     "Understand marimo's pure-Python file format",
   ],
+  "external-dependencies": [
+    "External dependencies",
+    PackageIcon,
+    "Declare dependencies with Python script metadata",
+  ],
   "for-jupyter-users": [
     "For Jupyter users",
     OrbitIcon,

package/src/components/pages/run-page.tsx

@@ -34,7 +34,10 @@ const RunPage = (props: Props) => {
 
 const Watermark = () => {
   return (
-    <div className="fixed bottom-0 right-0 z-50" data-testid="watermark">
+    <div
+      className="fixed bottom-0 right-0 z-50 print:hidden"
+      data-testid="watermark"
+    >
       <a
         href={Constants.githubPage}
         target="_blank"

package/src/components/scratchpad/scratchpad.tsx

@@ -289,6 +289,7 @@ export const ScratchPad: React.FC = () => {
                 consoleOutputs={consoleOutputs}
                 className="overflow-auto"
                 stale={false}
+                interrupted={false}
                 cellName={DEFAULT_CELL_NAME}
                 onSubmitDebugger={Functions.NOOP}
                 cellId={cellId}