@marimo-team/islands 0.25.3-dev273 → 0.25.3-dev279

package/src/stories/cell-status.stories.tsx

@@ -27,7 +27,7 @@ export const Idle = Template.bind({});
 Idle.args = {
   editing: true,
   status: "idle",
-  edited: false,
+  freshness: { sourceChanged: false, inputsChanged: false },
   interrupted: false,
   disabled: false,
   elapsedTime: null,
@@ -37,7 +37,7 @@ export const Edited = Template.bind({});
 Edited.args = {
   editing: true,
   status: "idle",
-  edited: true,
+  freshness: { sourceChanged: true, inputsChanged: false },
   interrupted: false,
   disabled: false,
   elapsedTime: 100 as Milliseconds,
@@ -47,7 +47,7 @@ export const Interrupted = Template.bind({});
 Interrupted.args = {
   editing: true,
   status: "idle",
-  edited: false,
+  freshness: { sourceChanged: false, inputsChanged: false },
   interrupted: true,
   disabled: false,
   elapsedTime: 50 as Milliseconds,
@@ -57,7 +57,7 @@ export const Running = Template.bind({});
 Running.args = {
   editing: true,
   status: "running",
-  edited: false,
+  freshness: { sourceChanged: false, inputsChanged: false },
   interrupted: true,
   disabled: false,
   elapsedTime: 50 as Milliseconds,
@@ -67,7 +67,7 @@ export const Queued = Template.bind({});
 Queued.args = {
   editing: true,
   status: "queued",
-  edited: false,
+  freshness: { sourceChanged: false, inputsChanged: false },
   interrupted: true,
   disabled: false,
   elapsedTime: 50 as Milliseconds,
@@ -77,7 +77,7 @@ export const Disabled = Template.bind({});
 Disabled.args = {
   editing: true,
   status: "idle",
-  edited: false,
+  freshness: { sourceChanged: false, inputsChanged: false },
   interrupted: false,
   disabled: true,
   elapsedTime: null,
@@ -88,7 +88,7 @@ DisabledTransitively.args = {
   editing: true,
   status: "idle",
   blocked: true,
-  edited: false,
+  freshness: { sourceChanged: false, inputsChanged: false },
   interrupted: false,
   disabled: false,
   elapsedTime: null,
@@ -99,7 +99,7 @@ DisabledTransitivelyAndEdited.args = {
   editing: true,
   status: "idle",
   blocked: true,
-  edited: true,
+  freshness: { sourceChanged: true, inputsChanged: false },
   interrupted: false,
   disabled: false,
   elapsedTime: null,
@@ -110,8 +110,7 @@ Stale.args = {
   editing: true,
   status: "idle",
   blocked: true,
-  staleInputs: true,
-  edited: false,
+  freshness: { sourceChanged: false, inputsChanged: true },
   interrupted: false,
   disabled: false,
   elapsedTime: null,
@@ -122,8 +121,7 @@ StaleAndDisabled.args = {
   editing: true,
   status: "idle",
   blocked: true,
-  staleInputs: true,
-  edited: false,
+  freshness: { sourceChanged: false, inputsChanged: true },
   interrupted: false,
   disabled: true,
   elapsedTime: null,
@@ -134,7 +132,7 @@ EditedStaleAndDisabled.args = {
   editing: true,
   status: "idle",
   blocked: true,
-  staleInputs: true,
+  freshness: { sourceChanged: false, inputsChanged: true },
   interrupted: false,
   disabled: true,
   elapsedTime: null,
@@ -145,7 +143,7 @@ EditedAndStale.args = {
   editing: true,
   status: "idle",
   blocked: true,
-  edited: true,
+  freshness: { sourceChanged: true, inputsChanged: false },
   interrupted: false,
   disabled: false,
   elapsedTime: null,

package/src/stories/cell.stories.tsx

@@ -3,7 +3,14 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { createStore, Provider } from "jotai";
 import { createRef } from "react";
+import { MockExecutions } from "@/__mocks__/executions";
 import { cellId } from "@/__tests__/branded";
+import type { CellId } from "@/core/cells/ids";
+import {
+  cell,
+  document as documentOf,
+  withCells,
+} from "@/core/notebook/document/__tests__/fixtures";
 import { type NotebookState, notebookAtom } from "@/core/cells/cells";
 import {
   type CellRuntimeState,
@@ -22,13 +29,41 @@ type Story = StoryObj<typeof Cell>;
 
 interface CellOverrides {
   output?: CellRuntimeState["output"];
-  edited?: boolean;
-  staleInputs?: boolean;
+  /** How the cell's result is outdated, as the host would report it. */
+  freshness?: "edited" | "replaced" | "both";
   config?: CellConfig;
 }
 
 const EMPTY_OVERRIDES: Readonly<CellOverrides> = {};
 
+/**
+ * Give the replica a completed execution whose source was edited since,
+ * whose input a newer execution replaced, or both.
+ */
+function seedFreshness(
+  store: ReturnType<typeof createStore>,
+  cid: CellId,
+  freshness: NonNullable<CellOverrides["freshness"]>,
+) {
+  const ran = MockExecutions.completed(cid, {
+    code_fingerprint: "ran",
+    depends_on:
+      freshness === "edited" ? {} : { x: { execution: "gone", update: 0 } },
+  });
+  const document = withCells(
+    documentOf(),
+    {
+      c1: null,
+      c2: null,
+      [cid]: cell(cid, "import marimo as mo", {
+        code_fingerprint: freshness === "replaced" ? "ran" : "edited",
+      }),
+    },
+    [cid],
+  );
+  MockExecutions.seed(store, [ran], null, document);
+}
+
 const Cell: React.FC<{
   overrides?: CellOverrides;
 }> = ({ overrides = EMPTY_OVERRIDES }) => {
@@ -39,13 +74,11 @@ const Cell: React.FC<{
         id: cid,
         name: "cell_1",
         code: "import marimo as mo",
-        edited: overrides.edited ?? false,
         config: {
           hide_code: overrides.config?.hide_code ?? false,
           disabled: overrides.config?.disabled ?? false,
           column: null,
         },
-        lastCodeRun: null,
       },
     },
     cellIds: [cid],
@@ -53,7 +86,6 @@ const Cell: React.FC<{
       [cid]: createCellRuntimeState({
         output: overrides.output ?? null,
         consoleOutputs: [],
-        staleInputs: overrides.staleInputs ?? false,
         debuggerActive: false,
         outline: null,
       }),
@@ -68,6 +100,9 @@ const Cell: React.FC<{
 
   const store = createStore();
   store.set(notebookAtom, notebook);
+  if (overrides.freshness !== undefined) {
+    seedFreshness(store, cid, overrides.freshness);
+  }
   store.set(connectionAtom, { state: ConnectionState.OPEN });
   store.set(requestClientAtom, resolveRequestClient());
   return (
@@ -145,7 +180,7 @@ export const UnsavedEditsOutput: Story = {
       <TooltipProvider>
         <Cell
           overrides={{
-            edited: true,
+            freshness: "edited",
             output: {
               channel: "output",
               data: "<span class='markdown'><h1>Layout</h1>\n<p><code>marimo</code> provides functions to help you lay out your output, such as\nin rows and columns, accordions, tabs, and callouts. This tutorial\nshows some examples.</p></span>",
@@ -239,7 +274,7 @@ export const StaleStatus: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          staleInputs: true,
+          freshness: "replaced",
           output: {
             channel: "output",
             data: "This data is stale because a parent is disabled",
@@ -257,8 +292,7 @@ export const StaleAndEditedStatus: Story = {
     <div className="p-20 max-w-4xl">
       <Cell
         overrides={{
-          staleInputs: true,
-          edited: true,
+          freshness: "both",
           output: {
             channel: "output",
             data: "This data is stale because a parent is disabled, but this cell has been edited since.",
@@ -281,7 +315,7 @@ export const DisabledAndStaleStatus: Story = {
             disabled: true,
             hide_code: false,
           },
-          staleInputs: true,
+          freshness: "replaced",
           output: {
             channel: "output",
             data: "<span class='markdown'><h1>Layout</h1>\n<p><code>marimo</code> provides functions to help you lay out your output, such as\nin rows and columns, accordions, tabs, and callouts. This tutorial\nshows some examples.</p></span>",

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

@@ -35,20 +35,11 @@ const createLongReprNotebook = (
 
 print('hello')
 LongReprA()`,
-      edited: false,
       config: {
         hide_code: hideCode,
         disabled: false,
         column: null,
       },
-      lastCodeRun: `class LongReprA:
-    def __repr__(self):
-        return "<dlt.Relation(dataset='" + ("jaffle_ingest_dataset_" * 80) + \\
-            "', destination='<dlt.destinations.duckdb(destination_type=\\'duckdb\\'," + \\
-            " credentials=\\'local_jaffle.duckdb\\')>')>"
-
-print('hello')
-LongReprA()`,
     },
   },
   cellIds: [cellId],
@@ -68,7 +59,6 @@ LongReprA()`,
           timestamp: 1_686_863_705,
         },
       ],
-      staleInputs: false,
       debuggerActive: false,
       outline: null,
     }),

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>
   );