@marimo-team/islands 0.25.3-dev2 → 0.25.3-dev200

package/src/plugins/impl/panel/PanelPlugin.tsx

@@ -1,7 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 /* oxlint-disable typescript/no-explicit-any */
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import useEvent from "react-use-event-hook";
 import { z } from "zod";
 import { MarimoIncomingMessageEvent } from "@/core/dom/events";
 import {
@@ -77,7 +78,7 @@ type T = Record<string, unknown>;
 
 // oxlint-disable-next-line typescript/consistent-type-definitions
 type PluginFunctions = {
-  send_to_widget: <T>(req: {
+  send_to_widget: (req: {
     message?: unknown;
     buffers?: unknown;
   }) => Promise<null | undefined>;
@@ -146,17 +147,10 @@ const PanelSlot = (props: Props) => {
   > | null>(null);
   const [loaded, setLoaded] = useState<boolean>(false);
   const [rendered, setRendered] = useState<string | null>(null);
+  const eventBufferRef = useRef<EventBuffer<unknown> | null>(null);
 
-  // Store functions in a ref so the callback captured by EventBuffer stays current
-  const functionsRef = useRef(functions);
-  functionsRef.current = functions;
-
-  const processEvents = useCallback(() => {
-    if (!eventBufferRef.current) {
-      return;
-    }
-
-    const events = eventBufferRef.current.getAndClear();
+  const processEvents = useEvent(() => {
+    const events = eventBufferRef.current?.getAndClear() ?? [];
     if (events.length === 0) {
       return;
     }
@@ -182,14 +176,19 @@ const PanelSlot = (props: Props) => {
     );
     const buffers: ArrayBuffer[] = [];
     message.content = extractBuffers(message.content, buffers);
-    functionsRef.current.send_to_widget({ message, buffers }).catch((error) => {
+    functions.send_to_widget({ message, buffers }).catch((error) => {
       Logger.warn("Failed to send Panel event to backend", error);
     });
-  }, []);
+  });
 
-  const eventBufferRef = useRef<EventBuffer<unknown> | null>(
-    new EventBuffer(processEvents),
-  );
+  useEffect(() => {
+    const buffer = new EventBuffer(processEvents);
+    eventBufferRef.current = buffer;
+    return () => {
+      buffer.dispose();
+      eventBufferRef.current = null;
+    };
+  }, [processEvents]);
 
   // Load the bokeh extension
   useEffect(() => {

package/src/plugins/impl/panel/__tests__/utils.test.ts

@@ -1,5 +1,5 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { EventBuffer, extractBuffers, MessageSchema } from "../utils";
 
 describe("MessageSchema", () => {
@@ -73,6 +73,44 @@ describe("EventBuffer", () => {
     eventBuffer = new EventBuffer(processEvents, 50);
   });
 
+  afterEach(() => {
+    eventBuffer.dispose();
+    vi.useRealTimers();
+  });
+
+  it("flushes queued events and cancels the pending timer on dispose", () => {
+    eventBuffer.add("event1");
+    eventBuffer.add("event2");
+    expect(vi.getTimerCount()).toBe(1);
+    expect(processEvents).toHaveBeenCalledOnce();
+
+    eventBuffer.dispose();
+    expect(processEvents).toHaveBeenCalledTimes(2);
+    eventBuffer.dispose();
+
+    expect(eventBuffer.size()).toBe(0);
+    expect(vi.getTimerCount()).toBe(0);
+    vi.advanceTimersByTime(100);
+    expect(processEvents).toHaveBeenCalledTimes(2);
+  });
+
+  it("does not process an empty buffer on dispose", () => {
+    eventBuffer.dispose();
+    expect(processEvents).not.toHaveBeenCalled();
+  });
+
+  it("resets the blocked state when disposed", () => {
+    eventBuffer.add("event1");
+    // Emulate a real processEvents, which drains the buffer
+    eventBuffer.getAndClear();
+    eventBuffer.dispose();
+    eventBuffer.add("event2");
+
+    expect(processEvents).toHaveBeenCalledTimes(2);
+    expect(eventBuffer.getAndClear()).toEqual(["event2"]);
+    expect(vi.getTimerCount()).toBe(1);
+  });
+
   it("should add events to buffer", () => {
     eventBuffer.add("event1");
     eventBuffer.add("event2");

package/src/plugins/impl/panel/utils.ts

@@ -83,6 +83,7 @@ export class EventBuffer<T> {
       clearTimeout(this.timeout);
     }
     this.timeout = window.setTimeout(() => {
+      this.timeout = null;
       this.isBlocked = false;
       if (this.buffer.length > 0) {
         this.flush();
@@ -98,6 +99,22 @@ export class EventBuffer<T> {
     this.buffer = [];
   }
 
+  /**
+   * Cancel the pending timer, flushing any events still held by the block
+   * window so the last user interaction is not lost.
+   */
+  public dispose() {
+    if (this.timeout !== null) {
+      clearTimeout(this.timeout);
+      this.timeout = null;
+    }
+    this.isBlocked = false;
+    if (this.buffer.length > 0) {
+      this.processEvents();
+    }
+    this.clear();
+  }
+
   public getAndClear() {
     const events = this.buffer;
     this.buffer = [];

package/src/plugins/impl/plotly/PlotlyPlugin.tsx

@@ -58,11 +58,8 @@ export class PlotlyPlugin implements IPlugin<T, Data> {
   public tagName = "marimo-plotly";
 
   public validator = z.object({
-    figure: z
-      .object({})
-      .passthrough()
-      .transform((spec) => spec as unknown as Figure),
-    config: z.object({}).passthrough(),
+    figure: z.looseObject({}).transform((spec) => spec as unknown as Figure),
+    config: z.looseObject({}),
   });
 
   public render(props: IPluginProps<T, Data>): JSX.Element {

package/src/plugins/impl/plotly/selection.ts

@@ -208,13 +208,19 @@ export function hasAreaTrace(
   });
 }
 
-function createDragmodeButton(
-  name: string,
-  title: string,
-  svg: string,
-  dragmode: Plotly.Layout["dragmode"],
-  setDragmode: (dragmode: Plotly.Layout["dragmode"]) => void,
-): ModeBarButton {
+function createDragmodeButton({
+  name,
+  title,
+  svg,
+  dragmode,
+  setDragmode,
+}: {
+  name: string;
+  title: string;
+  svg: string;
+  dragmode: Plotly.Layout["dragmode"];
+  setDragmode: (dragmode: Plotly.Layout["dragmode"]) => void;
+}): ModeBarButton {
   return {
     name,
     title,
@@ -227,27 +233,27 @@ export function lineSelectionButtons(
   setDragmode: (dragmode: Plotly.Layout["dragmode"]) => void,
 ): ModeBarButton[] {
   return [
-    createDragmodeButton(
-      "line-box-select",
-      "Box select",
-      `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+    createDragmodeButton({
+      name: "line-box-select",
+      title: "Box select",
+      svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <rect x="4" y="4" width="16" height="16" stroke-dasharray="2 2" />
       </svg>`,
-      "select",
+      dragmode: "select",
       setDragmode,
-    ),
-    createDragmodeButton(
-      "line-lasso-select",
-      "Lasso select",
-      `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+    }),
+    createDragmodeButton({
+      name: "line-lasso-select",
+      title: "Lasso select",
+      svg: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M6 8c0-2.2 2.2-4 5-4s5 1.8 5 4-2.2 4-5 4-5 1.8-5 4 2.2 4 5 4" />
         <circle cx="17.5" cy="16.5" r="1.5" />
       </svg>`,
-      "lasso",
+      dragmode: "lasso",
       setDragmode,
-    ),
+    }),
   ];
 }
 

package/src/plugins/impl/vega/VegaPlugin.tsx

@@ -16,14 +16,13 @@ export class VegaPlugin implements IPlugin<VegaComponentState, Data> {
 
   public validator = z.object({
     spec: z
-      .object({})
-      .passthrough()
+      .looseObject({})
       .transform((spec) => spec as unknown as VegaLiteSpec),
     chartSelection: z
       .union([z.boolean(), z.literal("point"), z.literal("interval")])
       .default(true),
     fieldSelection: z.union([z.boolean(), z.array(z.string())]).default(true),
-    embedOptions: z.object({}).passthrough().default({}),
+    embedOptions: z.looseObject({}).default({}),
   });
 
   public render(props: IPluginProps<VegaComponentState, Data>): JSX.Element {

package/src/plugins/impl/vega/make-selectable.ts

@@ -3,6 +3,7 @@
 import type { TopLevelSpec } from "vega-lite";
 import type { NonNormalizedSpec } from "vega-lite/types_unstable/spec/index.js";
 import type { TopLevelParameter } from "vega-lite/types_unstable/spec/toplevel.js";
+import { Arrays } from "@/utils/arrays";
 
 import { findEncodedFields, makeEncodingInteractive } from "./encodings";
 import { Marks } from "./marks";
@@ -218,7 +219,7 @@ function removeSpecificParamsFromNestedSpecs(
     }
 
     if (filteredParams.length === 0) {
-      const { params, ...rest } = spec;
+      const { params: _params, ...rest } = spec;
       return rest as SpecWithParams;
     }
 
@@ -357,9 +358,7 @@ export function makeSelectable<T extends VegaLiteSpec>(
 
       // If fieldSelection is an array, filter the fields
       if (Array.isArray(fieldSelection)) {
-        legendFields = legendFields.filter((field) =>
-          fieldSelection.includes(field),
-        );
+        legendFields = Arrays.intersection(legendFields, fieldSelection);
       }
     }
 
@@ -420,9 +419,7 @@ function makeLegendSelectable(
   let legendFields = findEncodedFields(spec);
   // If fieldSelection is an array, we filter the fields
   if (Array.isArray(fieldSelection)) {
-    legendFields = legendFields.filter((field) =>
-      fieldSelection.includes(field),
-    );
+    legendFields = Arrays.intersection(legendFields, fieldSelection);
   }
 
   const legendParams = legendFields.map((field) => Params.legend(field));

package/src/plugins/layout/RoutesPlugin.tsx

@@ -56,7 +56,7 @@ const RoutesComponent = ({
 
   useEffect(() => {
     // Listen for route changes
-    const listener = (e: PopStateEvent | HashChangeEvent) => {
+    const listener = () => {
       handleFindMatch(window.location);
     };
     window.addEventListener("hashchange", listener);

package/src/stories/__tests__/editor-story.test.tsx

@@ -0,0 +1,33 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { EditorView } from "@codemirror/view";
+import { composeStories } from "@storybook/react-vite";
+import { act, render } from "@testing-library/react";
+import { expect, it, vi } from "vitest";
+import * as stories from "../editor.stories";
+
+vi.mock("@/core/codemirror/cm", () => ({
+  basicBundle: () => [],
+}));
+
+const { Primary } = composeStories(stories);
+
+it("preserves editor changes when the story rerenders with the same theme", () => {
+  const { container, rerender } = render(<Primary />);
+  const editor = container.querySelector<HTMLElement>(".cm-editor");
+  expect(editor).not.toBeNull();
+  const view = editor && EditorView.findFromDOM(editor);
+  expect(view).toBeDefined();
+  if (!view) {
+    throw new Error("Editor view was not mounted");
+  }
+
+  act(() => {
+    view.dispatch({
+      changes: { from: 0, to: view.state.doc.length, insert: "user edit" },
+    });
+  });
+  rerender(<Primary />);
+
+  expect(container.querySelector(".cm-editor")).toBe(editor);
+  expect(view.state.doc.toString()).toBe("user edit");
+});

package/src/stories/button.stories.tsx

@@ -78,6 +78,7 @@ export const Loading = {
 export const TrashIcon = {
   render: () => (
     <Button
+      aria-label="Delete"
       variant="ghost"
       size="icon"
       className="hover:bg-transparent hover:border-input"

package/src/stories/cell.stories.tsx

@@ -14,8 +14,7 @@ import { connectionAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import { resolveRequestClient } from "@/core/network/resolve";
 import type { CellConfig } from "@/core/network/types";
-import { ConnectionState } from "@/core/websocket/types";
-import { MultiColumn } from "@/utils/id-tree";
+import { ConnectionState } from "@/core/session/types";
 import type { Milliseconds, Seconds } from "@/utils/time";
 import { Cell as EditorCell } from "../components/editor/notebook-cell";
 import { TooltipProvider } from "../components/ui/tooltip";
@@ -46,7 +45,6 @@ const Cell: React.FC<{
         name: "cell_1",
         code: "import marimo as mo",
         edited: overrides.edited ?? false,
-        serializedEditorState: null,
         config: {
           hide_code: overrides.config?.hide_code ?? false,
           disabled: overrides.config?.disabled ?? false,
@@ -56,7 +54,7 @@ const Cell: React.FC<{
         lastExecutionTime: null,
       },
     },
-    cellIds: MultiColumn.from([[cid]]),
+    cellIds: [cid],
     cellRuntime: {
       [cid]: createCellRuntimeState({
         output: overrides.output ?? null,
@@ -79,7 +77,6 @@ const Cell: React.FC<{
     cellLogs: [],
     history: [],
     scrollKey: null,
-    untouchedNewCells: new Set(),
   };
 
   const store = createStore();

package/src/stories/data-table.stories.tsx

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
+import { useState } from "react";
 import {
   generateColumns,
   inferFieldTypes,
@@ -128,3 +129,33 @@ export const Pagination = {
 
   name: "Pagination",
 };
+
+export const UnknownTotal = {
+  render: function UnknownTotal() {
+    const [paginationState, setPaginationState] = useState({
+      pageIndex: 0,
+      pageSize: 5,
+    });
+    const rows = Array.from({ length: 12 }, (_, index) => ({
+      value: index + 1,
+    }));
+    const offset = paginationState.pageIndex * paginationState.pageSize;
+    return (
+      <DataTable
+        data={rows.slice(offset, offset + paginationState.pageSize)}
+        columns={generateColumns({
+          fieldTypes: inferFieldTypes(rows),
+          rowHeaders: [],
+          selection: null,
+        })}
+        totalRows="too_many"
+        hasNextPage={offset + paginationState.pageSize < rows.length}
+        totalColumns={1}
+        pagination={true}
+        manualPagination={true}
+        paginationState={paginationState}
+        setPaginationState={setPaginationState}
+      />
+    );
+  },
+};

package/src/stories/editor.stories.tsx

@@ -5,7 +5,7 @@ import { EditorState, type Extension } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import CodeMirror from "@uiw/react-codemirror";
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { CopilotConfig } from "@/core/codemirror/copilot/copilot-config";
 import { copilotBundle } from "@/core/codemirror/copilot/extension";
 import { OverridingHotkeyProvider } from "@/core/hotkeys/hotkeys";
@@ -52,28 +52,35 @@ const Editor = (opts: { extensions?: Extension[] }): React.ReactNode => {
     });
 
     return () => view.destroy();
-    // oxlint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref.current]);
+  }, [opts.extensions]);
 
   return <div className="cm" ref={ref} />;
 };
 
-export const Primary: Story = {
-  render: (_args, ctx) => (
+const PrimaryEditor = ({ theme }: Pick<CodeMirrorSetupOpts, "theme">) => {
+  const extensions = useMemo(
+    () =>
+      basicBundle({
+        completionConfig: {
+          activate_on_typing: false,
+          copilot: false,
+          signature_hint_on_typing: false,
+        },
+        theme,
+        hotkeys: new OverridingHotkeyProvider({}),
+      } as unknown as CodeMirrorSetupOpts),
+    [theme],
+  );
+
+  return (
     <div className="Cell m-20 w-[60%] overflow-hidden">
-      <Editor
-        extensions={basicBundle({
-          completionConfig: {
-            activate_on_typing: false,
-            copilot: false,
-            signature_hint_on_typing: false,
-          },
-          theme: ctx.globals.theme,
-          hotkeys: new OverridingHotkeyProvider({}),
-        } as unknown as CodeMirrorSetupOpts)}
-      />
+      <Editor extensions={extensions} />
     </div>
-  ),
+  );
+};
+
+export const Primary: Story = {
+  render: (_args, ctx) => <PrimaryEditor theme={ctx.globals.theme} />,
 };
 
 export const DefaultPython: Story = {

package/src/stories/form-wrapper.stories.tsx

@@ -20,7 +20,7 @@ type Story = StoryObj<typeof FormWrapper>;
 const props: FormWrapperProps<string> = {
   currentValue: "currentValue",
   newValue: "currentValue",
-  setValue: (v) => {
+  setValue: () => {
     toast({
       title: "Form submitted",
     });
@@ -133,7 +133,7 @@ export const Validate: Story = {
         <FormWrapper
           {...props}
           shouldValidate={true}
-          validate={async ({ value }) => {
+          validate={async () => {
             const random = Math.random();
             if (random < 0.8) {
               return `Failed to validate. Random number was ${random}`;

package/src/stories/layout/vertical/one-column.stories.tsx

@@ -11,8 +11,7 @@ import { showCodeInRunModeAtom } from "@/core/meta/state";
 import { connectionAtom } from "@/core/network/connection";
 import { requestClientAtom } from "@/core/network/requests";
 import { resolveRequestClient } from "@/core/network/resolve";
-import { ConnectionState } from "@/core/websocket/types";
-import { MultiColumn } from "@/utils/id-tree";
+import { ConnectionState } from "@/core/session/types";
 import type { Milliseconds, Seconds } from "@/utils/time";
 import { CellArray } from "../../../components/editor/renderers/cell-array";
 import { CellsRenderer } from "../../../components/editor/renderers/cells-renderer";
@@ -36,7 +35,6 @@ const createLongReprNotebook = (
 print('hello')
 LongReprA()`,
       edited: false,
-      serializedEditorState: null,
       config: {
         hide_code: hideCode,
         disabled: false,
@@ -53,7 +51,7 @@ LongReprA()`,
       lastExecutionTime: null,
     },
   },
-  cellIds: MultiColumn.from([[cellId]]),
+  cellIds: [cellId],
   cellRuntime: {
     [cellId]: createCellRuntimeState({
       output: {
@@ -88,7 +86,6 @@ LongReprA()`,
   cellLogs: [],
   history: [],
   scrollKey: null,
-  untouchedNewCells: new Set(),
 });
 
 export default {

package/src/stories/runtime-story.tsx

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type { Meta } from "@storybook/react-vite";
 import { createStore, Provider, useAtomValue, useStore } from "jotai";
-import { useEffect, useRef, useState } from "react";
+import { createRef, useEffect, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { ConnectionNotice } from "@/components/editor/alerts/connection-notice";
 import PackagesPanel from "@/components/editor/chrome/panels/packages-panel";
@@ -13,11 +13,9 @@ import { Cell } from "@/components/editor/notebook-cell";
 import { VerticalLayoutWrapper } from "@/components/editor/renderers/vertical-layout/vertical-layout-wrapper";
 import { alertAtom } from "@/core/alerts/state";
 import type { EnvironmentOperation } from "@/core/alerts/environment";
-import {
-  createNotebookActions,
-  notebookAtom,
-  notebookReducer,
-} from "@/core/cells/cells";
+import { notebookAtom } from "@/core/cells/cells";
+import { CellId } from "@/core/cells/ids";
+import { createCell, createCellRuntimeState } from "@/core/cells/types";
 import { userConfigAtom } from "@/core/config/config";
 import {
   type AppConfig,
@@ -30,7 +28,7 @@ import { requestClientAtom } from "@/core/network/requests";
 import { createStaticRequests } from "@/core/network/requests-static";
 import { sandboxActionsAtom, sandboxAtom } from "@/core/packages/sandbox-state";
 import { filenameAtom } from "@/core/saving/file-state";
-import { WebSocketClosedReason, ConnectionState } from "@/core/websocket/types";
+import { WebSocketClosedReason, ConnectionState } from "@/core/session/types";
 import { HTTPError } from "@/utils/errors";
 
 const manifest = `requires-python = ">=3.13"
@@ -112,7 +110,7 @@ function RuntimePreview({
       {props.surface === "notebook" && (
         <div className="flex-1 min-w-0 pt-12">
           <ConnectionNotice appConfig={appConfig} onRetry={reconnect} />
-          {notebook.cellIds.inOrderIds.map((cellId) => (
+          {notebook.cellIds.map((cellId) => (
             <VerticalLayoutWrapper key={cellId} appConfig={appConfig}>
               <Cell
                 cellId={cellId}
@@ -349,15 +347,23 @@ export function RuntimeStory(props: Props) {
       log_mode: "replace",
     });
     if (props.existingCells) {
-      const actions = createNotebookActions((action) =>
-        state.set(notebookAtom, (value) => notebookReducer(value, action)),
-      );
-      actions.createNewCell({
-        cellId: "__end__",
-        before: false,
-        code: 'import polars as pl\n\ntrips = pl.read_csv("bike_trips.csv")\ntrips.head()',
-        autoFocus: false,
-      });
+      const cellId = CellId.create();
+      state.set(notebookAtom, (value) => ({
+        ...value,
+        cellIds: [cellId],
+        cellData: {
+          ...value.cellData,
+          [cellId]: createCell({
+            id: cellId,
+            code: 'import polars as pl\n\ntrips = pl.read_csv("bike_trips.csv")\ntrips.head()',
+          }),
+        },
+        cellRuntime: {
+          ...value.cellRuntime,
+          [cellId]: createCellRuntimeState(),
+        },
+        cellHandles: { ...value.cellHandles, [cellId]: createRef() },
+      }));
     }
     state.set(requestClientAtom, {
       ...createStaticRequests(),

package/src/stories/select.stories.tsx

@@ -24,7 +24,7 @@ export default meta;
 type Story = StoryObj;
 
 export const Primary: Story = {
-  render: (args, ctx) => (
+  render: () => (
     <Select>
       <SelectTrigger className="w-64">
         <SelectValue placeholder="Select a fruit" />
@@ -63,7 +63,7 @@ export const Primary: Story = {
 };
 
 export const Clearable: Story = {
-  render: (args, ctx) => {
+  render: () => {
     const [value, setValue] = useState<string>("");
     return (
       <>

package/src/stories/switchable-multi-select.stories.tsx

@@ -15,7 +15,7 @@ export default meta;
 type Story = StoryObj;
 
 export const Primary: Story = {
-  render: (args, ctx) => {
+  render: () => {
     const [value, setValue] = useState<string[]>([]);
     return (
       <TooltipProvider>