@marimo-team/islands 0.23.5-dev5 → 0.23.5-dev7

package/src/components/slides/reveal-slides.css

@@ -72,3 +72,11 @@
 .reveal .mo-slide-content .output {
   margin: 0;
 }
+
+.reveal .marimo-cell .cm-editor {
+  border-radius: 8px;
+  padding-right: 10px;
+}
+.reveal .marimo-cell .cm-panels {
+  margin-right: 0;
+}

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

@@ -0,0 +1,182 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useMemo, useRef, useState } from "react";
+import type { EditorView } from "@codemirror/view";
+import { useAtomValue } from "jotai";
+import { CellEditor } from "@/components/editor/cell/code/cell-editor";
+import { CellStatusComponent } from "@/components/editor/cell/CellStatus";
+import { RunButton } from "@/components/editor/cell/RunButton";
+import { StopButton } from "@/components/editor/cell/StopButton";
+import { useRunCell } from "@/components/editor/cell/useRunCells";
+import { Slide as CellOutputSlide } from "@/components/slides/slide";
+import { useUserConfig } from "@/core/config/config";
+import {
+  cellNeedsRun,
+  cellStatusClasses,
+  isUninstantiated,
+} from "@/core/cells/utils";
+import type { CellData, CellRuntimeState } from "@/core/cells/types";
+import type { LanguageAdapterType } from "@/core/codemirror/language/types";
+import { connectionAtom } from "@/core/network/connection";
+import { useTheme } from "@/theme/useTheme";
+import { cn } from "@/utils/cn";
+import { ReadonlyCode } from "../editor/code/readonly-python-code";
+import { languageAdapterFromCode } from "@/core/codemirror/language/extension";
+
+type RuntimeCell = CellRuntimeState & CellData;
+
+/**
+ * Renders a single cell in the slides view as an editable CodeMirror editor
+ * stacked with its output, mirroring the notebook layout. Editing and
+ * Ctrl/Cmd+Enter run the cell against the live kernel so presenters can iterate
+ * without leaving the slide deck.
+ */
+export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
+  const [userConfig] = useUserConfig();
+  const { theme } = useTheme();
+  const runCell = useRunCell(cell.id);
+  const connection = useAtomValue(connectionAtom);
+  const editorViewRef = useRef<EditorView | null>(null);
+  const editorViewParentRef = useRef<HTMLDivElement | null>(null);
+  const [languageAdapter, setLanguageAdapter] = useState<
+    LanguageAdapterType | undefined
+  >();
+
+  const cellOutputPosition = userConfig.display.cell_output;
+  const hasOutput = cell.output != null;
+
+  const uninstantiated = isUninstantiated({
+    executionTime: cell.runElapsedTimeMs ?? cell.lastExecutionTime,
+    status: cell.status,
+    errored: cell.errored,
+    interrupted: cell.interrupted,
+    stopped: cell.stopped,
+  });
+
+  const needsRun = cellNeedsRun({
+    edited: cell.edited,
+    interrupted: cell.interrupted,
+    staleInputs: cell.staleInputs,
+    disabled: cell.config.disabled,
+    status: cell.status,
+  });
+
+  const editorWrapperClassName = cn(
+    "marimo-cell",
+    "hover-actions-parent",
+    "interactive",
+    cellStatusClasses({
+      needsRun,
+      errored: cell.errored,
+      stopped: cell.stopped,
+      disabled: cell.config.disabled,
+      status: cell.status,
+    }),
+  );
+
+  const output = (
+    <CellOutputSlide
+      cellId={cell.id}
+      status={cell.status}
+      output={cell.output}
+    />
+  );
+
+  const toolbar = (
+    <div className="absolute top-1 right-2 z-10 flex items-center gap-1.5">
+      <CellStatusComponent
+        editing={true}
+        status={cell.status}
+        disabled={cell.config.disabled ?? false}
+        staleInputs={cell.staleInputs}
+        edited={cell.edited}
+        interrupted={cell.interrupted}
+        elapsedTime={cell.runElapsedTimeMs ?? cell.lastExecutionTime}
+        runStartTimestamp={cell.runStartTimestamp}
+        lastRunStartTimestamp={cell.lastRunStartTimestamp}
+        uninstantiated={uninstantiated}
+      />
+      <div className="flex items-center shadow-none gap-1">
+        <RunButton
+          edited={cell.edited}
+          status={cell.status}
+          needsRun={needsRun}
+          connectionState={connection.state}
+          config={cell.config}
+          onClick={runCell}
+        />
+        <StopButton status={cell.status} connectionState={connection.state} />
+      </div>
+    </div>
+  );
+
+  const editor = (
+    <div className={editorWrapperClassName}>
+      <CellEditor
+        theme={theme}
+        showPlaceholder={false}
+        id={cell.id}
+        code={cell.code}
+        config={cell.config}
+        status={cell.status}
+        serializedEditorState={cell.serializedEditorState}
+        runCell={runCell}
+        setEditorView={(ev) => {
+          editorViewRef.current = ev;
+        }}
+        userConfig={userConfig}
+        editorViewRef={editorViewRef}
+        editorViewParentRef={editorViewParentRef}
+        hasOutput={hasOutput}
+        // hide_code is intentionally overridden in the slide view; the editor
+        // is unmounted entirely when the user toggles code off.
+        showHiddenCode={() => undefined}
+        languageAdapter={languageAdapter}
+        setLanguageAdapter={setLanguageAdapter}
+        showLanguageToggles={false}
+        outputArea={cellOutputPosition}
+      />
+      {toolbar}
+    </div>
+  );
+
+  return (
+    <>
+      {cellOutputPosition === "above" && output}
+      {editor}
+      {cellOutputPosition === "below" && output}
+    </>
+  );
+};
+
+export const SlideCellReadOnlyView = ({ cell }: { cell: RuntimeCell }) => {
+  const [userConfig] = useUserConfig();
+  const cellOutputPosition = userConfig.display.cell_output;
+
+  const language = useMemo(() => {
+    const adapter = languageAdapterFromCode(cell.code.trim());
+    return adapter.type === "sql" ? "sql" : "python";
+  }, [cell.code]);
+
+  const output = (
+    <CellOutputSlide
+      cellId={cell.id}
+      status={cell.status}
+      output={cell.output}
+    />
+  );
+
+  const editor = (
+    <div className="marimo-cell">
+      <ReadonlyCode code={cell.code} language={language} showHideCode={false} />
+    </div>
+  );
+
+  return (
+    <>
+      {cellOutputPosition === "above" && output}
+      {editor}
+      {cellOutputPosition === "below" && output}
+    </>
+  );
+};

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

@@ -288,6 +288,8 @@ export const SlideSidebar = ({
         width: isConfigOpen ? configWidth : COLLAPSED_CONFIG_WIDTH,
       }}
       aria-label="Slide configuration"
+      // Prevent keys from bubbling up to reveal.js's document-level keydown listener and moving the deck.
+      onKeyDown={(e) => e.stopPropagation()}
     >
       <header
         className={cn(

package/src/core/cells/utils.ts

@@ -140,3 +140,48 @@ export function isUninstantiated({
     !(errored || interrupted || stopped)
   );
 }
+
+/**
+ * Whether a cell needs to be run given its edited / interrupted / stale
+ * inputs, while accounting for ancestor-disabled cells (which should not be
+ * flagged as needing a run until re-enabled).
+ */
+export function cellNeedsRun({
+  edited,
+  interrupted,
+  staleInputs,
+  disabled,
+  status,
+}: {
+  edited: boolean;
+  interrupted: boolean;
+  staleInputs: boolean;
+  disabled: boolean | undefined;
+  status: RuntimeState;
+}): boolean {
+  const disabledOrAncestorDisabled =
+    disabled || status === "disabled-transitively";
+  return edited || interrupted || (staleInputs && !disabledOrAncestorDisabled);
+}
+
+export function cellStatusClasses({
+  needsRun,
+  errored,
+  stopped,
+  disabled,
+  status,
+}: {
+  needsRun: boolean;
+  errored: boolean;
+  stopped: boolean;
+  disabled: boolean | undefined;
+  status: RuntimeState;
+}) {
+  return {
+    "needs-run": needsRun,
+    "has-error": errored,
+    stopped,
+    disabled: disabled ?? false,
+    stale: status === "disabled-transitively",
+  };
+}

package/src/core/islands/stubs/slide-cell-view.tsx

@@ -0,0 +1,30 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { RuntimeCell } from "@/core/cells/types";
+import { Logger } from "@/utils/Logger";
+
+/**
+ * Build-time stub for `@/components/slides/slide-cell-view`, wired up via
+ * `resolve.alias` in `frontend/islands/vite.config.mts`. Islands embeds gate
+ * off the slides "show code" toggle entirely (see `useNotebookCodeAvailable`
+ * + `isIslands()`), so neither view is reachable at runtime there.
+ *
+ * Replacing the module at build time keeps the entire CodeMirror /
+ * Codeium / `@bufbuild/protobuf` import subtree out of the islands bundle,
+ * which both shrinks the bundle and lets `islands/validate.sh` pass — the
+ * upstream protobuf code contains a `process.env.BUF_BIGINT_DISABLE`
+ * runtime check that the validator otherwise flags.
+ */
+export const SlideCellView = (_props: { cell: RuntimeCell }) => {
+  Logger.warn(
+    "SlideCellView islands stub rendered; this should never happen in a read-only embed.",
+  );
+  return null;
+};
+
+export const SlideCellReadOnlyView = (_props: { cell: RuntimeCell }) => {
+  Logger.warn(
+    "SlideCellReadOnlyView islands stub rendered; this should never happen in a read-only embed.",
+  );
+  return null;
+};

package/src/core/meta/__tests__/code-visibility.test.tsx

@@ -0,0 +1,141 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { renderHook } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import type { ReactNode } from "react";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { showCodeInRunModeAtom } from "@/core/meta/state";
+import { type AppMode, kioskModeAtom, viewStateAtom } from "@/core/mode";
+import { useNotebookCodeAvailable } from "../code-visibility";
+
+interface StoreOpts {
+  mode?: AppMode;
+  kiosk?: boolean;
+  showInRunMode?: boolean;
+}
+
+function makeStore({
+  mode = "read",
+  kiosk = false,
+  showInRunMode = true,
+}: StoreOpts = {}) {
+  const store = createStore();
+  store.set(viewStateAtom, { mode, cellAnchor: null });
+  store.set(kioskModeAtom, kiosk);
+  store.set(showCodeInRunModeAtom, showInRunMode);
+  return store;
+}
+
+function wrap(store: ReturnType<typeof createStore>) {
+  return ({ children }: { children: ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+}
+
+const cellsWithCode = [{ code: "x = 1" }, { code: "" }];
+const cellsWithoutCode = [{ code: "" }, { code: "" }];
+
+const originalHref = window.location.href;
+
+function setSearch(search: string) {
+  window.history.replaceState(null, "", `/${search}`);
+}
+
+describe("useNotebookCodeAvailable", () => {
+  beforeEach(() => {
+    setSearch("");
+  });
+
+  afterEach(() => {
+    window.history.replaceState(null, "", originalHref);
+  });
+
+  it("returns true in edit mode regardless of cells", () => {
+    const store = makeStore({ mode: "edit" });
+    const { result } = renderHook(
+      () => useNotebookCodeAvailable(cellsWithoutCode),
+      { wrapper: wrap(store) },
+    );
+    expect(result.current).toBe(true);
+  });
+
+  it("returns true in present mode (only reachable from edit)", () => {
+    const store = makeStore({ mode: "present" });
+    const { result } = renderHook(
+      () => useNotebookCodeAvailable(cellsWithoutCode),
+      { wrapper: wrap(store) },
+    );
+    expect(result.current).toBe(true);
+  });
+
+  it("returns true in kiosk mode even when read mode and no code", () => {
+    const store = makeStore({
+      mode: "read",
+      kiosk: true,
+      showInRunMode: false,
+    });
+    const { result } = renderHook(
+      () => useNotebookCodeAvailable(cellsWithoutCode),
+      { wrapper: wrap(store) },
+    );
+    expect(result.current).toBe(true);
+  });
+
+  it("returns true in read mode when at least one cell has code", () => {
+    const store = makeStore({ mode: "read" });
+    const { result } = renderHook(
+      () => useNotebookCodeAvailable(cellsWithCode),
+      { wrapper: wrap(store) },
+    );
+    expect(result.current).toBe(true);
+  });
+
+  it("returns false in read mode when every cell.code is empty (server stripped)", () => {
+    const store = makeStore({ mode: "read" });
+    const { result } = renderHook(
+      () => useNotebookCodeAvailable(cellsWithoutCode),
+      { wrapper: wrap(store) },
+    );
+    expect(result.current).toBe(false);
+  });
+
+  it("returns false in read mode when host opts out via showAppCode", () => {
+    const store = makeStore({ mode: "read", showInRunMode: false });
+    const { result } = renderHook(
+      () => useNotebookCodeAvailable(cellsWithCode),
+      { wrapper: wrap(store) },
+    );
+    expect(result.current).toBe(false);
+  });
+
+  it("returns false in read mode when ?include-code=false", () => {
+    setSearch("?include-code=false");
+    const store = makeStore({ mode: "read" });
+    const { result } = renderHook(
+      () => useNotebookCodeAvailable(cellsWithCode),
+      { wrapper: wrap(store) },
+    );
+    expect(result.current).toBe(false);
+  });
+
+  it("ignores ?include-code=false in kiosk mode", () => {
+    setSearch("?include-code=false");
+    const store = makeStore({ mode: "read", kiosk: true });
+    const { result } = renderHook(
+      () => useNotebookCodeAvailable(cellsWithoutCode),
+      { wrapper: wrap(store) },
+    );
+    expect(result.current).toBe(true);
+  });
+
+  it("returns false for non-edit/non-read modes (home, gallery)", () => {
+    for (const mode of ["home", "gallery"] as const) {
+      const store = makeStore({ mode });
+      const { result } = renderHook(
+        () => useNotebookCodeAvailable(cellsWithCode),
+        { wrapper: wrap(store) },
+      );
+      expect(result.current).toBe(false);
+    }
+  });
+});

package/src/core/meta/code-visibility.ts

@@ -0,0 +1,48 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { useAtomValue } from "jotai";
+import { KnownQueryParams } from "@/core/constants";
+import { showCodeInRunModeAtom } from "@/core/meta/state";
+import { kioskModeAtom, viewStateAtom } from "@/core/mode";
+import { logNever } from "@/utils/assertNever";
+
+/**
+ * Whether the notebook source code reached the frontend and can be rendered.
+ *
+ * In `marimo run` the server omits cell sources unless `--include-code` is
+ * set (every `cell.code` arrives as `""`). Use this to gate any "show code"
+ * / "copy code" / "download .py" affordance.
+ */
+export function useNotebookCodeAvailable(
+  cells: ReadonlyArray<{ code: string }>,
+): boolean {
+  const kioskMode = useAtomValue(kioskModeAtom);
+  const { mode } = useAtomValue(viewStateAtom);
+  const showInRunMode = useAtomValue(showCodeInRunModeAtom);
+
+  if (kioskMode) {
+    return true;
+  }
+
+  switch (mode) {
+    case "edit":
+    case "present":
+      return true;
+    case "home":
+    case "gallery":
+      return false;
+    case "read": {
+      if (!showInRunMode) {
+        return false;
+      }
+      const params = new URLSearchParams(window.location.search);
+      if (params.get(KnownQueryParams.includeCode) === "false") {
+        return false;
+      }
+      return cells.some((cell) => Boolean(cell.code));
+    }
+    default:
+      logNever(mode);
+      return false;
+  }
+}