@marimo-team/islands 0.25.3-dev29 → 0.25.3-dev290

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>

package/src/theme/__tests__/islands-theme.test.tsx

@@ -0,0 +1,276 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, waitFor } from "@testing-library/react";
+import { createStore } from "jotai";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { JsonOutput } from "@/components/editor/output/JsonOutput";
+import {
+  marimoDarkTheme,
+  marimoLightTheme,
+} from "@/components/editor/output/json-output/themes";
+import { userConfigAtom } from "@/core/config/config";
+import { defaultUserConfig } from "@/core/config/config-schema";
+import { StyleNamespace } from "../namespace";
+import { resolvedThemeAtom } from "../useTheme";
+
+let store: ReturnType<typeof createStore>;
+let unsubscribe: (() => void) | undefined;
+let media: EventTarget & { matches: boolean };
+
+beforeEach(() => {
+  vi.stubEnv("VITE_MARIMO_ISLANDS", "true");
+  media = Object.assign(new EventTarget(), { matches: false });
+  vi.stubGlobal(
+    "matchMedia",
+    vi.fn(() => media),
+  );
+  store = createStore();
+});
+
+afterEach(() => {
+  stopObserving();
+  for (const element of [document.body, document.documentElement]) {
+    for (const attribute of [
+      "class",
+      "style",
+      "data-theme",
+      "data-mode",
+      "data-vscode-theme-kind",
+    ]) {
+      element.removeAttribute(attribute);
+    }
+  }
+  vi.unstubAllEnvs();
+  vi.unstubAllGlobals();
+  vi.restoreAllMocks();
+});
+
+function subscribe() {
+  unsubscribe = store.sub(resolvedThemeAtom, vi.fn());
+}
+
+function stopObserving() {
+  unsubscribe?.();
+  unsubscribe = undefined;
+}
+
+function getTheme() {
+  return store.get(resolvedThemeAtom);
+}
+
+function setSystemTheme(matches: boolean) {
+  media.matches = matches;
+  media.dispatchEvent(new Event("change"));
+}
+
+describe("islands host theme", () => {
+  it("defaults to light on a transparent page even if the system is dark", () => {
+    media.matches = true;
+    subscribe();
+    expect(getTheme()).toBe("light");
+  });
+
+  it.each(["body", "html"])(
+    "follows %s theme attributes in both directions",
+    async (tag) => {
+      const host = document.querySelector(tag)!;
+      subscribe();
+      for (const [attribute, dark, light] of [
+        ["class", "dark", "light"],
+        ["class", "dark-mode", "light-mode"],
+        ["class", "dark-theme", "light-theme"],
+        ["data-theme", "dark", "light"],
+        ["data-mode", "dark", "light"],
+      ]) {
+        host.setAttribute(attribute, dark);
+        await expect.poll(getTheme).toBe("dark");
+        host.setAttribute(attribute, light);
+        await expect.poll(getTheme).toBe("light");
+        host.removeAttribute(attribute);
+      }
+    },
+  );
+
+  it("reads the initial host theme and follows color-scheme changes", async () => {
+    document.body.style.colorScheme = "dark";
+    subscribe();
+    expect(getTheme()).toBe("dark");
+    document.body.style.colorScheme = "light";
+    await expect.poll(getTheme).toBe("light");
+    document.body.style.colorScheme = "dark";
+    await expect.poll(getTheme).toBe("dark");
+  });
+
+  it("uses the background when color-scheme is normal", async () => {
+    document.body.style.colorScheme = "normal";
+    document.body.style.backgroundColor = "rgb(30, 30, 30)";
+    subscribe();
+    expect(getTheme()).toBe("dark");
+    document.body.style.backgroundColor = "white";
+    await expect.poll(getTheme).toBe("light");
+  });
+
+  it("resolves a host supporting both color schemes when the system changes", async () => {
+    document.body.style.colorScheme = "light dark";
+    subscribe();
+    expect(getTheme()).toBe("light");
+    for (const matches of [true, false]) {
+      setSystemTheme(matches);
+      await expect.poll(getTheme).toBe(matches ? "dark" : "light");
+    }
+  });
+
+  it("shares a subscription, skips unchanged themes, and cleans up on unmount", async () => {
+    const disconnect = vi.spyOn(MutationObserver.prototype, "disconnect");
+    const removeListener = vi.spyOn(media, "removeEventListener");
+    const listener = vi.fn();
+    subscribe();
+    const unsubscribeSecond = store.sub(resolvedThemeAtom, listener);
+    document.body.classList.add("unrelated");
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(listener).not.toHaveBeenCalled();
+    unsubscribeSecond();
+    expect(disconnect).not.toHaveBeenCalled();
+    stopObserving();
+    expect(disconnect).toHaveBeenCalledOnce();
+    expect(removeListener).toHaveBeenCalledWith("change", expect.any(Function));
+    document.body.classList.add("dark");
+    subscribe();
+    expect(getTheme()).toBe("dark");
+  });
+
+  it("ignores unrecognized theme attributes and transparent body backgrounds", async () => {
+    document.body.dataset.theme = "custom-theme";
+    document.body.dataset.mode = "auto";
+    document.body.style.backgroundColor = "rgba(0, 0, 0, 0)";
+    document.documentElement.style.backgroundColor = "white";
+    subscribe();
+    expect(getTheme()).toBe("light");
+    document.documentElement.style.backgroundColor = "black";
+    await expect.poll(getTheme).toBe("dark");
+    document.documentElement.style.backgroundColor = "transparent";
+    await expect.poll(getTheme).toBe("light");
+  });
+
+  it("falls back after a theme attribute is removed", async () => {
+    document.body.dataset.theme = "dark";
+    document.body.style.colorScheme = "light";
+    subscribe();
+    expect(getTheme()).toBe("dark");
+    delete document.body.dataset.theme;
+    await expect.poll(getTheme).toBe("light");
+  });
+
+  it("continues to observe the host without matchMedia", async () => {
+    vi.stubGlobal("matchMedia", undefined);
+    document.body.style.colorScheme = "light dark";
+    subscribe();
+    expect(getTheme()).toBe("light");
+    document.body.style.colorScheme = "only dark";
+    await expect.poll(getTheme).toBe("dark");
+  });
+
+  it.each(["light", "dark"] as const)(
+    "does not override an explicit %s host when system preferences change",
+    (theme) => {
+      document.body.style.colorScheme = theme;
+      subscribe();
+      for (const matches of [true, false]) {
+        setSystemTheme(matches);
+        expect(getTheme()).toBe(theme);
+      }
+    },
+  );
+
+  it("re-reads host CSS when a media query changes its color-scheme", () => {
+    const computedStyle = window.getComputedStyle(document.body);
+    const scheme = vi.spyOn(computedStyle, "colorScheme", "get");
+    vi.spyOn(window, "getComputedStyle").mockReturnValue(computedStyle);
+    scheme.mockReturnValue("light");
+    subscribe();
+    expect(getTheme()).toBe("light");
+    scheme.mockReturnValue("dark");
+    media.dispatchEvent(new Event("change"));
+    expect(getTheme()).toBe("dark");
+  });
+
+  it("discards queued mutations and media events after the last unsubscribe", async () => {
+    const readStyle = vi.spyOn(window, "getComputedStyle");
+    subscribe();
+    document.body.style.colorScheme = "dark";
+    stopObserving();
+    readStyle.mockClear();
+    media.dispatchEvent(new Event("change"));
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(readStyle).not.toHaveBeenCalled();
+    subscribe();
+    expect(getTheme()).toBe("dark");
+  });
+
+  it("keeps the VS Code override and returns to the host after it is removed", async () => {
+    document.body.classList.add("dark");
+    const { container, unmount } = render(
+      <StyleNamespace>Widget</StyleNamespace>,
+    );
+    for (const [kind, theme] of [
+      ["vscode-light", "light"],
+      ["vscode-high-contrast", "dark"],
+      ["vscode-light", "light"],
+    ]) {
+      document.body.dataset.vscodeThemeKind = kind;
+      await waitFor(() => expect(container.firstChild).toHaveClass(theme));
+    }
+    delete document.body.dataset.vscodeThemeKind;
+    await waitFor(() => expect(container.firstChild).toHaveClass("dark"));
+    unmount();
+  });
+
+  it("does not subscribe to host themes outside Islands", async () => {
+    vi.stubEnv("VITE_MARIMO_ISLANDS", "false");
+    const config = defaultUserConfig();
+    store.set(userConfigAtom, {
+      ...config,
+      display: { ...config.display, theme: "light" },
+    });
+    const observe = vi.spyOn(MutationObserver.prototype, "observe");
+    const addListener = vi.spyOn(media, "addEventListener");
+    subscribe();
+    document.body.classList.add("dark");
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(getTheme()).toBe("light");
+    expect(observe).not.toHaveBeenCalled();
+    expect(addListener).not.toHaveBeenCalled();
+  });
+
+  it("updates the namespace root used by shadow DOM widgets", async () => {
+    const { container } = render(<StyleNamespace>Widget</StyleNamespace>);
+    expect(container.firstChild).toHaveClass("marimo", "light");
+    document.body.classList.add("dark");
+    await waitFor(() =>
+      expect(container.firstChild).toHaveClass("marimo", "dark"),
+    );
+    document.body.classList.remove("dark");
+    await waitFor(() =>
+      expect(container.firstChild).toHaveClass("marimo", "light"),
+    );
+  });
+
+  it("updates the dictionary viewer palette without remounting", async () => {
+    const { container } = render(
+      <JsonOutput data={{ relu: 0, note: "text" }} />,
+    );
+    const viewer = container.querySelector<HTMLElement>(
+      ".w-json-view-container",
+    );
+    expect(viewer).not.toBeNull();
+    for (const theme of ["dark", "light"] as const) {
+      document.body.dataset.theme = theme;
+      const palette = theme === "dark" ? marimoDarkTheme : marimoLightTheme;
+      await waitFor(() =>
+        expect(viewer?.style.getPropertyValue("--w-rjv-color")).toBe(
+          palette["--w-rjv-color"],
+        ),
+      );
+    }
+  });
+});

package/src/theme/namespace.tsx

@@ -1,20 +1,21 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import React, { type PropsWithChildren } from "react";
+import { useTheme } from "./useTheme";
 
 const style = {
   display: "contents",
 };
 
 /**
- * Adds the 'marimo' className which serves as a namespace to its children,
- * so that the styles are scoped to the DOM subtree.
+ * Scopes styles and applies the theme before descendants inherit text colors.
  */
 export const StyleNamespace = React.forwardRef<
   HTMLDivElement,
   PropsWithChildren<{}>
 >(({ children }, ref) => {
+  const { theme } = useTheme();
   return (
-    <div ref={ref} className="marimo" style={style}>
+    <div ref={ref} className={`marimo ${theme}`} style={style}>
       {children}
     </div>
   );

package/src/theme/useTheme.ts

@@ -21,61 +21,92 @@ function themeFromQueryParam(): Theme | undefined {
   return THEMES.includes(value as Theme) ? (value as Theme) : undefined;
 }
 
-const themeAtom = atom((get) => {
-  // If it is islands, try a few ways to infer if it is dark mode.
-  if (isIslands()) {
-    // If it has a dark mode class on the body, use dark mode.
-    if (
-      document.body.classList.contains("dark-mode") ||
-      document.body.classList.contains("dark")
-    ) {
-      return "dark";
-    }
+function getHostElements() {
+  return [document.body, document.documentElement];
+}
 
-    // If it has data-theme=dark or data-mode=dark on the body, use dark mode.
-    if (
-      document.body.dataset.theme === "dark" ||
-      document.body.dataset.mode === "dark" ||
-      getVsCodeTheme() === "dark"
-    ) {
-      return "dark";
-    }
+function getColorSchemeMedia() {
+  return typeof window === "undefined"
+    ? undefined
+    : window.matchMedia?.("(prefers-color-scheme: dark)");
+}
 
-    // Check the computed style for color-scheme
-    const computedStyle = window.getComputedStyle(document.body);
-    const colorScheme = computedStyle.getPropertyValue("color-scheme").trim();
-    if (colorScheme) {
-      return colorScheme.includes("dark") ? "dark" : "light";
+/** Body markers override HTML markers. CSS provides the fallback. */
+function getHostTheme(
+  prefersDark = getColorSchemeMedia()?.matches,
+): ResolvedTheme {
+  const elements = getHostElements();
+  for (const element of elements) {
+    for (const theme of ["dark", "light"] as const) {
+      if (
+        element.classList.contains(theme) ||
+        element.classList.contains(`${theme}-mode`) ||
+        element.classList.contains(`${theme}-theme`) ||
+        element.dataset.theme === theme ||
+        element.dataset.mode === theme
+      ) {
+        return theme;
+      }
     }
+  }
+
+  const styles = elements.map((element) => window.getComputedStyle(element));
+  const colorScheme = styles[0].colorScheme.split(/\s+/);
+  if (colorScheme.includes("dark")) {
+    return !colorScheme.includes("light") || prefersDark ? "dark" : "light";
+  }
+  if (colorScheme.includes("light")) {
+    return "light";
+  }
 
-    // Fallback: check for dark background color
-    const bgColor = computedStyle.getPropertyValue("background-color");
-    const rgb = bgColor.match(/\d+/g);
-    if (rgb) {
-      const [r, g, b] = rgb.map(Number);
-      const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-      return brightness < 128 ? "dark" : "light";
+  // Transparent backgrounds do not indicate a dark host page.
+  for (const style of styles) {
+    const rgb = style.backgroundColor.match(/[\d.]+/g)?.map(Number);
+    if (rgb && (rgb.length === 3 || rgb[3] > 0)) {
+      const [r, g, b] = rgb;
+      return (r * 299 + g * 587 + b * 114) / 1000 < 128 ? "dark" : "light";
     }
+  }
 
-    // We don't want to infer from the system theme,
-    // since the island consumer may not support dark mode.
-    return "light";
+  // A dark system preference does not imply a dark host.
+  return "light";
+}
+
+const hostThemeAtom = atom<ResolvedTheme | undefined>(undefined);
+hostThemeAtom.onMount = (setTheme) => {
+  const media = getColorSchemeMedia();
+  const updateTheme = () => setTheme(getHostTheme(media?.matches));
+  const observer = new MutationObserver(updateTheme);
+  for (const element of getHostElements()) {
+    observer.observe(element, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme", "data-mode", "style"],
+    });
   }
+  media?.addEventListener("change", updateTheme);
+  updateTheme();
+  return () => {
+    observer.disconnect();
+    media?.removeEventListener("change", updateTheme);
+    // A later mount must read the current host theme.
+    setTheme(undefined);
+  };
+};
 
+const themeAtom = atom((get) => {
+  if (isIslands()) {
+    return get(hostThemeAtom) ?? getHostTheme();
+  }
   return themeFromQueryParam() ?? get(resolvedMarimoConfigAtom).display.theme;
 });
 
 const prefersDarkModeAtom = atom(false);
 
 function setupThemeListener(): void {
-  if (typeof window === "undefined") {
+  const media = getColorSchemeMedia();
+  if (!media) {
     return;
   }
-  if (!window.matchMedia) {
-    return;
-  }
-
-  const media = window.matchMedia("(prefers-color-scheme: dark)");
   store.set(prefersDarkModeAtom, media.matches);
   media.addEventListener("change", (e) => {
     store.set(prefersDarkModeAtom, e.matches);
@@ -126,8 +157,7 @@ export const resolvedThemeAtom = atom((get) => {
 });
 
 /**
- * React hook to get the theme of the app.
- * This is stored in the user config.
+ * Returns the resolved theme from VS Code, the Islands host, or notebook settings.
  */
 export function useTheme(): { theme: ResolvedTheme } {
   const theme = useAtomValue(resolvedThemeAtom, { store });

package/src/utils/__tests__/arrays.test.ts

@@ -16,6 +16,41 @@ import {
 } from "../arrays";
 
 describe("arrays", () => {
+  describe.each([
+    ["intersection", Arrays.intersection, [3, 3, 2], [Number.NaN]],
+    ["difference", Arrays.difference, [1], [1]],
+  ] as const)("%s", (_name, operation, expected, expectedWithNaN) => {
+    it("preserves order and duplicates without mutating readonly inputs", () => {
+      const values = Object.freeze([3, 1, 3, 2]);
+      const other = Object.freeze([2, 3, 3]);
+      expect(operation(values, other)).toEqual(expected);
+      expect(values).toEqual([3, 1, 3, 2]);
+      expect(other).toEqual([2, 3, 3]);
+    });
+
+    it("uses the same equality as array membership, including NaN", () => {
+      expect(operation([Number.NaN, 1], [Number.NaN])).toEqual(expectedWithNaN);
+    });
+
+    it("handles an empty source", () => {
+      expect(operation([], [1])).toEqual([]);
+    });
+  });
+
+  it("handles empty membership lists", () => {
+    expect(Arrays.intersection([1, 1, 2], [])).toEqual([]);
+    expect(Arrays.difference([1, 1, 2], [])).toEqual([1, 1, 2]);
+  });
+
+  it("compares objects by identity", () => {
+    const shared = { id: 1 };
+    const distinct = { id: 1 };
+    expect(Arrays.intersection([shared, distinct], [shared])).toEqual([shared]);
+    expect(Arrays.difference([shared, distinct], [shared])).toEqual([distinct]);
+    expect(Arrays.intersection([shared, distinct], [shared])[0]).toBe(shared);
+    expect(Arrays.difference([shared, distinct], [shared])[0]).toBe(distinct);
+  });
+
   describe("arrayDelete", () => {
     it("should delete an element at the specified index", () => {
       expect(arrayDelete([1, 2, 3], 1)).toEqual([1, 3]);

package/src/utils/__tests__/batch-requests.test.ts

@@ -8,7 +8,7 @@ async function sleep(ms: number) {
 
 describe("batch", () => {
   it("should return the same promise for calls with the same key", async () => {
-    const loader = vi.fn().mockImplementation(async (arg) => {
+    const loader = vi.fn().mockImplementation(async () => {
       await sleep(10);
       return "response";
     });
@@ -25,7 +25,7 @@ describe("batch", () => {
   });
 
   it("should call loader again after the first promise resolves", async () => {
-    const loader = vi.fn().mockImplementation(async (arg) => {
+    const loader = vi.fn().mockImplementation(async () => {
       await sleep(10);
       return "response";
     });
@@ -40,7 +40,7 @@ describe("batch", () => {
   });
 
   it("should handle different keys separately", async () => {
-    const loader = vi.fn().mockImplementation(async (arg) => {
+    const loader = vi.fn().mockImplementation(async () => {
       await sleep(10);
       return "response";
     });