@marimo-team/islands 0.25.3-dev28 → 0.25.3-dev281

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

@@ -14,7 +14,7 @@ import { useRunCell } from "@/components/editor/cell/useRunCells";
 import { Slide as CellOutputSlide } from "@/components/slides/slide";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { outputIsStale } from "@/core/cells/cell";
-import { useCellActions } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { autoInstantiateAtom, useUserConfig } from "@/core/config/config";
 import {
   cellNeedsRun,
@@ -23,6 +23,7 @@ import {
 } from "@/core/cells/utils";
 import type { CellData, CellRuntimeState } from "@/core/cells/types";
 import type { LanguageAdapterType } from "@/core/codemirror/language/types";
+import { useCellExecution, useCellFreshness } from "@/core/executions";
 import { connectionAtom } from "@/core/network/connection";
 import { useTheme } from "@/theme/useTheme";
 import { cn } from "@/utils/cn";
@@ -42,7 +43,7 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
   const { theme } = useTheme();
   const runCell = useRunCell(cell.id);
   const connection = useAtomValue(connectionAtom);
-  const cellActions = useCellActions();
+  const { createCell } = useCellActions();
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
   const editorViewRef = useRef<EditorView | null>(null);
   const editorViewParentRef = useRef<HTMLDivElement | null>(null);
@@ -53,7 +54,7 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
   const afterToggleLanguage = useEvent(() => {
     maybeAddMarimoImport({
       autoInstantiate,
-      createNewCell: cellActions.createNewCell,
+      createCell,
     });
   });
 
@@ -62,21 +63,19 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
 
   const cellOutputPosition = userConfig.display.cell_output;
   const hasOutput = cell.output != null;
+  const execution = useCellExecution(cell.id);
+  const freshness = useCellFreshness(cell.id);
+  const errored = execution.outcome === "error";
+  const interrupted = execution.outcome === "interrupted";
+  const stopped = execution.outcome === "skipped";
 
-  const uninstantiated = isUninstantiated({
-    executionTime: cell.runElapsedTimeMs ?? cell.lastExecutionTime,
-    status: cell.status,
-    errored: cell.errored,
-    interrupted: cell.interrupted,
-    stopped: cell.stopped,
-  });
+  const uninstantiated = isUninstantiated(execution);
 
   const needsRun = cellNeedsRun({
-    edited: cell.edited,
-    interrupted: cell.interrupted,
-    staleInputs: cell.staleInputs,
+    freshness,
+    interrupted,
     disabled: cell.config.disabled,
-    status: cell.status,
+    blocked: execution.blocked,
   });
 
   const editorWrapperClassName = cn(
@@ -85,19 +84,19 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
     "interactive",
     cellStatusClasses({
       needsRun,
-      errored: cell.errored,
-      stopped: cell.stopped,
+      errored,
+      stopped,
       disabled: cell.config.disabled,
-      status: cell.status,
+      blocked: execution.blocked,
     }),
   );
 
   const output = (
     <CellOutputSlide
       cellId={cell.id}
-      status={cell.status}
+      status={execution.status}
       output={cell.output}
-      stale={outputIsStale(cell, false)}
+      stale={outputIsStale(execution, freshness, false)}
     />
   );
 
@@ -105,33 +104,36 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
     <div className="absolute top-1 right-2 z-10 flex items-center gap-1.5">
       <CellStatusComponent
         editing={true}
-        status={cell.status}
+        status={execution.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}
+        freshness={freshness}
+        interrupted={interrupted}
+        elapsedTime={execution.duration}
+        startedAt={execution.startedAt}
+        blocked={execution.blocked}
         uninstantiated={uninstantiated}
       />
       <LanguageToggles
         code={cell.code}
-        editorView={editorViewRef.current}
+        editorViewRef={editorViewRef}
         currentLanguageAdapter={languageAdapter}
         onAfterToggle={afterToggleLanguage}
         className="flex items-center gap-1"
       />
       <div className="flex items-center shadow-none gap-1">
         <RunButton
-          edited={cell.edited}
-          status={cell.status}
+          edited={freshness.sourceChanged}
+          status={execution.status}
+          blocked={execution.blocked}
           needsRun={needsRun}
           connectionState={connection.state}
           config={cell.config}
           onClick={runCell}
         />
-        <StopButton status={cell.status} connectionState={connection.state} />
+        <StopButton
+          status={execution.status}
+          connectionState={connection.state}
+        />
       </div>
     </div>
   );
@@ -148,8 +150,7 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
         id={cell.id}
         code={cell.code}
         config={cell.config}
-        status={cell.status}
-        serializedEditorState={cell.serializedEditorState}
+        status={execution.status}
         runCell={runCell}
         setEditorView={(ev) => {
           editorViewRef.current = ev;
@@ -189,15 +190,17 @@ export const SlideCellView = ({ cell }: { cell: RuntimeCell }) => {
 export const SlideCellReadOnlyView = ({ cell }: { cell: RuntimeCell }) => {
   const [userConfig] = useUserConfig();
   const cellOutputPosition = userConfig.display.cell_output;
+  const execution = useCellExecution(cell.id);
+  const freshness = useCellFreshness(cell.id);
 
   const display = useMemo(() => getReadonlyCodeDisplay(cell.code), [cell.code]);
 
   const output = (
     <CellOutputSlide
       cellId={cell.id}
-      status={cell.status}
+      status={execution.status}
       output={cell.output}
-      stale={outputIsStale(cell, false)}
+      stale={outputIsStale(execution, freshness, false)}
     />
   );
 

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

@@ -450,6 +450,7 @@ export const SlideSidebar = ({
         )}
         <Tooltip content={isConfigOpen ? "Collapse panel" : "Expand panel"}>
           <Button
+            aria-label={isConfigOpen ? "Collapse panel" : "Expand panel"}
             variant="ghost"
             size="icon"
             className="h-7 w-7 text-muted-foreground hover:text-foreground"

package/src/components/slides/slide-scroll-hint.tsx

@@ -41,8 +41,10 @@ function measureRevealedHeight(el: HTMLElement): number {
   if (!firstUnrevealed) {
     return el.scrollHeight;
   }
+  const bounds = el.getBoundingClientRect();
+  const scale = el.offsetHeight > 0 ? bounds.height / el.offsetHeight : 1;
   const fragmentTop = firstUnrevealed.getBoundingClientRect().top;
-  return fragmentTop - el.getBoundingClientRect().top + el.scrollTop;
+  return (fragmentTop - bounds.top) / (scale || 1) + el.scrollTop;
 }
 
 /**

package/src/components/slides/slide.tsx

@@ -5,12 +5,11 @@ import { OutputArea } from "../editor/Output";
 import { memo } from "react";
 import type { CellId } from "@/core/cells/ids";
 import type { CellRuntimeState } from "@/core/cells/types";
+import type { CellRunStatus } from "@/core/executions";
 
-interface SlideContentProps extends Pick<
-  CellRuntimeState,
-  "output" | "status"
-> {
+interface SlideContentProps extends Pick<CellRuntimeState, "output"> {
   cellId: CellId;
+  status: CellRunStatus;
   stale: boolean;
 }
 

package/src/components/sort/SortableCellsProvider.tsx

@@ -22,9 +22,10 @@ import React, { useCallback, useMemo, useState } from "react";
 import type { CellId } from "@/core/cells/ids";
 import { useAppConfig } from "@/core/config/config";
 import { Arrays } from "@/utils/arrays";
-import type { CellColumnId, MultiColumn } from "@/utils/id-tree";
 import { invariant } from "@/utils/invariant";
-import { getNotebook, useCellActions } from "../../core/cells/cells";
+import { findColumn, isColumnId, layoutAtom } from "../../core/cells/layout";
+import { store } from "../../core/state/jotai";
+import { useCellActions } from "../../core/cells/actions";
 import { useEvent } from "../../hooks/useEvent";
 
 interface SortableCellsProviderProps {
@@ -47,11 +48,8 @@ const SortableCellsProviderInternal = ({
     useCellActions();
 
   const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);
-  const [clonedItems, setClonedItems] = useState<MultiColumn<CellId> | null>(
-    null,
-  );
 
-  const [config] = useAppConfig();
+  const config = useAppConfig();
   const modifiers = useMemo(() => {
     if (config.width === "columns") {
       return Arrays.EMPTY;
@@ -73,20 +71,10 @@ const SortableCellsProviderInternal = ({
 
   const handleDragStart = useEvent((event: DragStartEvent) => {
     setActiveId(event.active.id);
-    const notebook = getNotebook();
-    setClonedItems(notebook.cellIds);
   });
 
   const handleDragCancel = useEvent(() => {
-    // TODO: restore cloned items
-    if (clonedItems) {
-      // Reset items to their original state in case items have been
-      // Dragged across containers
-      // setItems(clonedItems);
-    }
-
     setActiveId(null);
-    setClonedItems(null);
   });
 
   /**
@@ -135,16 +123,15 @@ const SortableCellsProviderInternal = ({
       invariant(isColumnId(overId), `Expected column id. Got: ${overId}`);
 
       // If column is empty, we can drop on it
-      const notebook = getNotebook();
-      const column = notebook.cellIds.get(overId);
+      const column = findColumn(store.get(layoutAtom), overId);
       invariant(column, `Expected column. Got: ${overId}`);
-      if (column && column.topLevelIds.length === 0) {
+      if (column.visible.length === 0) {
         // Return the column
         return [{ id: overId }];
       }
 
       // If the column is not empty, we only consider the cells in the same column
-      const cellIdSet = new Set(column.topLevelIds);
+      const cellIdSet = new Set(column.visible);
       const collisions = closestCenter({
         ...args,
         droppableContainers: args.droppableContainers.filter(
@@ -234,9 +221,5 @@ const SortableCellsProviderInternal = ({
 export const SortableCellsProvider = React.memo(SortableCellsProviderInternal);
 
 function isCellId(id: UniqueIdentifier): id is CellId {
-  return typeof id === "string" && !id.startsWith("tree_");
-}
-
-function isColumnId(id: UniqueIdentifier): id is CellColumnId {
-  return typeof id === "string" && id.startsWith("tree_");
+  return typeof id === "string" && !isColumnId(id);
 }

package/src/components/tracing/tracing-keyboard.test.tsx

@@ -0,0 +1,85 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { type Run, type RunId, runsAtom } from "@/core/cells/runs";
+import { Tracing } from "./tracing";
+
+vi.mock("react-vega", () => ({ useVegaEmbed: () => undefined }));
+vi.mock("vega-lite", () => ({ compile: () => ({ spec: {} }) }));
+vi.mock("@/components/editor/chrome/panels/panel-context", () => ({
+  usePanelSection: () => "sidebar",
+}));
+
+const run: Run = {
+  runId: "run-1" as RunId,
+  runStartTime: 1_704_067_200,
+  cellRuns: new Map(),
+};
+
+describe("trace disclosure keyboard focus", () => {
+  it.each([false, true])(
+    "keeps the header focused across toggles (inline=%s)",
+    (inline) => {
+      const store = createStore();
+      store.set(runsAtom, {
+        runIds: [run.runId],
+        runMap: new Map([[run.runId, run]]),
+      });
+      render(
+        <Provider store={store}>
+          <TooltipProvider>
+            <Tracing />
+          </TooltipProvider>
+        </Provider>,
+      );
+      if (inline) {
+        fireEvent.click(screen.getByRole("checkbox", { name: "Inline chart" }));
+      }
+      const header = screen.getByRole("button", { name: /^Run -/ });
+      act(() => header.focus());
+      for (const expanded of [false, true, false]) {
+        // Native buttons emit a click with detail=0 for keyboard activation.
+        fireEvent.click(header, { detail: 0 });
+        expect(screen.getByRole("button", { name: /^Run -/ })).toBe(header);
+        expect(header).toHaveFocus();
+        expect(header).toHaveAttribute("aria-expanded", String(expanded));
+      }
+    },
+  );
+
+  it("does not steal focus when a newer run expands automatically", () => {
+    const store = createStore();
+    store.set(runsAtom, {
+      runIds: [run.runId],
+      runMap: new Map([[run.runId, run]]),
+    });
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <Tracing />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const header = screen.getByRole("button", { name: /^Run -/ });
+    act(() => header.focus());
+    const newer: Run = {
+      ...run,
+      runId: "run-2" as RunId,
+      runStartTime: run.runStartTime + 1,
+    };
+    act(() => {
+      store.set(runsAtom, {
+        runIds: [newer.runId, run.runId],
+        runMap: new Map([
+          [run.runId, run],
+          [newer.runId, newer],
+        ]),
+      });
+    });
+    expect(header).toHaveFocus();
+    expect(header).toHaveAttribute("aria-expanded", "false");
+  });
+});

package/src/components/tracing/tracing.tsx

@@ -52,6 +52,7 @@ export const Tracing: React.FC = () => {
 
   const { theme } = useTheme();
   const [chartPosition, setChartPosition] = useState<ChartPosition>("above");
+  const chartPositionId = React.useId();
   const panelSection = usePanelSection();
 
   const toggleChartPosition = () => {
@@ -76,11 +77,12 @@ export const Tracing: React.FC = () => {
     <div className="py-1 px-2 overflow-y-scroll h-full">
       <div className="flex flex-row justify-start gap-3">
         <div className="flex flex-row gap-1 items-center">
-          <label htmlFor="chartPosition" className="text-xs">
+          <label htmlFor={chartPositionId} className="text-xs">
             Inline chart
           </label>
           <input
             type="checkbox"
+            id={chartPositionId}
             name="chartPosition"
             data-testid="chartPosition"
             onClick={toggleChartPosition}
@@ -145,11 +147,11 @@ const TraceBlock: React.FC<{
   isMostRecentRun: boolean;
   chartPosition: ChartPosition;
   theme: ResolvedTheme;
-}> = ({ run, isMostRecentRun, chartPosition, isExpanded, theme }) => {
+}> = ({ run, isMostRecentRun, chartPosition, isExpanded: expanded, theme }) => {
   const setExpandedRuns = useSetAtom(expandedRunsAtom);
   // We prefer the user's last click, but if they haven't clicked on this run,
   // we expand the most recent run by default, otherwise we collapse it.
-  isExpanded = isExpanded ?? isMostRecentRun;
+  const isExpanded = expanded ?? isMostRecentRun;
 
   const onToggleExpanded = () => {
     setExpandedRuns((prev) => {
@@ -163,28 +165,31 @@ const TraceBlock: React.FC<{
   const chevron = <Icon height={16} className="inline" />;
 
   const traceTitle = (
-    <span className="text-sm cursor-pointer" onClick={onToggleExpanded}>
+    <button
+      type="button"
+      aria-expanded={isExpanded}
+      className="text-sm cursor-pointer"
+      onClick={onToggleExpanded}
+    >
       Run - {formatLogTimestamp(run.runStartTime)}
       {chevron}
-    </span>
+    </button>
   );
 
-  if (!isExpanded) {
-    return (
-      <div key={run.runId} className="flex flex-col">
-        <pre className="font-mono font-semibold">{traceTitle}</pre>
-      </div>
-    );
-  }
-
   return (
-    <TraceBlockBody
-      key={run.runId}
-      run={run}
-      chartPosition={chartPosition}
-      theme={theme}
-      title={traceTitle}
-    />
+    <div
+      className={cn(
+        "grid grid-cols-1",
+        isExpanded &&
+          chartPosition === "sideBySide" &&
+          "grid-cols-[auto_minmax(0,1fr)] grid-rows-[auto_1fr]",
+      )}
+    >
+      <pre className="font-mono font-semibold">{traceTitle}</pre>
+      {isExpanded && (
+        <TraceBlockBody run={run} chartPosition={chartPosition} theme={theme} />
+      )}
+    </div>
   );
 };
 
@@ -192,8 +197,7 @@ const TraceBlockBody: React.FC<{
   run: Run;
   chartPosition: ChartPosition;
   theme: ResolvedTheme;
-  title: React.ReactNode;
-}> = ({ run, chartPosition, theme, title }) => {
+}> = ({ run, chartPosition, theme }) => {
   const [hoveredCellId, setHoveredCellId] = useState<CellId | null>();
   const vegaRef = useRef<HTMLDivElement>(null);
   const { ref, width = 300 } = useResizeObserver<HTMLDivElement>();
@@ -205,7 +209,7 @@ const TraceBlockBody: React.FC<{
       const elapsedTime = cellRun.elapsedTime ?? 0;
       return {
         cell: cellRun.cellId,
-        cellNum: cellIds.inOrderIds.indexOf(cellRun.cellId),
+        cellNum: cellIds.indexOf(cellRun.cellId),
         startTimestamp: formatChartTime(cellRun.startTime),
         endTimestamp: formatChartTime(cellRun.startTime + elapsedTime),
         elapsedTime: formatElapsedTime(elapsedTime * 1000),
@@ -264,16 +268,22 @@ const TraceBlockBody: React.FC<{
   }, [embed]);
 
   const traceRows = (
-    <TraceRows
-      run={run}
-      hoveredCellId={hoveredCellId}
-      hiddenInputElementId={hiddenInputElementId}
-    />
+    <div className="font-mono font-semibold">
+      <TraceRows
+        run={run}
+        hoveredCellId={hoveredCellId}
+        hiddenInputElementId={hiddenInputElementId}
+      />
+    </div>
   );
 
   const chartElement = (
     <div
-      className={chartPosition === "sideBySide" ? "-mt-0.5 flex-1" : ""}
+      className={
+        chartPosition === "sideBySide"
+          ? "-mt-0.5 col-start-2 row-start-1 row-span-2 min-w-0"
+          : "min-w-0"
+      }
       ref={ref}
     >
       <Suspense>
@@ -284,24 +294,18 @@ const TraceBlockBody: React.FC<{
 
   if (chartPosition === "above") {
     return (
-      <div key={run.runId} className="flex flex-col">
-        <pre className="font-mono font-semibold">
-          {title}
-          {chartElement}
-          {traceRows}
-        </pre>
-      </div>
+      <>
+        {chartElement}
+        {traceRows}
+      </>
     );
   }
 
   return (
-    <div key={run.runId} className="flex flex-row">
-      <pre className="font-mono font-semibold">
-        {title}
-        {traceRows}
-      </pre>
+    <>
+      {traceRows}
       {chartElement}
-    </div>
+    </>
   );
 };
 

package/src/components/ui/__tests__/draggable-popover.test.tsx

@@ -0,0 +1,24 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { expect, it } from "vitest";
+import { DraggablePopover } from "../draggable-popover";
+
+it("moves from the keyboard handle without intercepting child input arrows", () => {
+  render(
+    <DraggablePopover open={true}>
+      <input aria-label="Filter" />
+    </DraggablePopover>,
+  );
+  const handle = screen.getByRole("button", {
+    name: "Move popup with arrow keys",
+  });
+  const popup = screen.getByRole("dialog");
+  fireEvent.keyDown(handle, { key: "ArrowRight" });
+  fireEvent.keyDown(handle, { key: "ArrowDown" });
+  expect(popup).toHaveStyle({ left: "10px", top: "10px" });
+  expect(
+    fireEvent.keyDown(screen.getByRole("textbox"), { key: "ArrowLeft" }),
+  ).toBe(true);
+  expect(popup).toHaveStyle({ left: "10px", top: "10px" });
+});

package/src/components/ui/__tests__/fullscreen.test.tsx

@@ -1,8 +1,50 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { act, render } from "@testing-library/react";
+import { act, render, renderHook } from "@testing-library/react";
 import { useRef } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { useIsFullScreen } from "../fullscreen";
+import { useFullScreenClass, useIsFullScreen } from "../fullscreen";
+
+describe("useFullScreenClass", () => {
+  let fullscreenElement: Element | null = null;
+
+  beforeEach(() => {
+    fullscreenElement = null;
+    Object.defineProperty(document, "fullscreenElement", {
+      configurable: true,
+      get: () => fullscreenElement,
+    });
+  });
+
+  afterEach(() => {
+    Reflect.deleteProperty(document, "fullscreenElement");
+    document.documentElement.classList.remove("marimo-fullscreen");
+  });
+
+  it("reflects fullscreen state at mount and on entry and exit", () => {
+    fullscreenElement = document.body;
+    const { unmount } = renderHook(useFullScreenClass);
+    expect(document.documentElement).toHaveClass("marimo-fullscreen");
+
+    fullscreenElement = null;
+    act(() => document.dispatchEvent(new Event("fullscreenchange")));
+    expect(document.documentElement).not.toHaveClass("marimo-fullscreen");
+
+    fullscreenElement = document.body;
+    act(() => document.dispatchEvent(new Event("fullscreenchange")));
+    expect(document.documentElement).toHaveClass("marimo-fullscreen");
+    unmount();
+  });
+
+  it("removes the class and listener on unmount", () => {
+    fullscreenElement = document.body;
+    const { unmount } = renderHook(useFullScreenClass);
+    unmount();
+    expect(document.documentElement).not.toHaveClass("marimo-fullscreen");
+
+    act(() => document.dispatchEvent(new Event("fullscreenchange")));
+    expect(document.documentElement).not.toHaveClass("marimo-fullscreen");
+  });
+});
 
 const FullScreenFlag = ({ label }: { label: string }) => {
   const ref = useRef<HTMLDivElement>(null);