@marimo-team/islands 0.25.3-dev34 → 0.25.3-dev349

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

package/src/utils/__tests__/{createReducer.test.ts → createReducer.test.tsx}

@@ -1,5 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { describe, expect, it, vi } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+import { createStore, getDefaultStore, Provider } from "jotai";
+import type { PropsWithChildren } from "react";
+import { describe, expect, expectTypeOf, it, vi } from "vitest";
 import { Logger } from "@/utils/Logger";
 import { createReducer, createReducerAndAtoms } from "../createReducer";
 
@@ -35,6 +38,68 @@ describe("createReducer", () => {
     expect(dispatch).toHaveBeenCalledWith({ type: "decrement", payload: 3 });
   });
 
+  it("preserves action names and payload types through reducers and atoms", () => {
+    const initialState = () => ({ count: 0 });
+    const { reducer, createActions, useActions } = createReducerAndAtoms(
+      initialState,
+      {
+        increment: (state, payload: number) => ({
+          count: state.count + payload,
+        }),
+        setFromText: (_state, payload: string) => ({ count: payload.length }),
+        reset: () => initialState(),
+      },
+      [
+        (_prevState, _newState, action) => {
+          if (action.type === "increment") {
+            expectTypeOf(action.payload).toEqualTypeOf<number>();
+          }
+          if (action.type === "setFromText") {
+            expectTypeOf(action.payload).toEqualTypeOf<string>();
+          }
+        },
+      ],
+    );
+    const dispatch = vi.fn();
+    const actions = createActions(dispatch);
+
+    expectTypeOf(actions).toEqualTypeOf<{
+      increment: (payload: number) => void;
+      setFromText: (payload: string) => void;
+      reset: () => void;
+    }>();
+    expectTypeOf<ReturnType<typeof useActions>>().toEqualTypeOf<
+      typeof actions
+    >();
+    expectTypeOf(reducer)
+      .parameter(1)
+      .toEqualTypeOf<
+        | { type: "increment"; payload: number }
+        | { type: "setFromText"; payload: string }
+        | { type: "reset"; payload: unknown }
+      >();
+
+    // @ts-expect-error - action names determine their payload types
+    expectTypeOf(reducer).toBeCallableWith(initialState(), {
+      type: "increment",
+      payload: "5",
+    });
+    // @ts-expect-error - action creators reject incorrect payloads
+    expectTypeOf(actions.setFromText).toBeCallableWith(5);
+
+    actions.increment(5);
+    actions.setFromText("hello");
+    actions.reset();
+    expect(dispatch.mock.calls).toEqual([
+      [{ type: "increment", payload: 5 }],
+      [{ type: "setFromText", payload: "hello" }],
+      [{ type: "reset", payload: undefined }],
+    ]);
+    expect(
+      reducer(initialState(), { type: "setFromText", payload: "hello" }),
+    ).toEqual({ count: 5 });
+  });
+
   it("actions are the same reference", () => {
     const initialState = () => ({ count: 0 });
     const reducers = {
@@ -93,6 +158,7 @@ describe("createReducer", () => {
     const loggerSpy = vi.spyOn(Logger, "error");
 
     const state = { count: 0 };
+    // @ts-expect-error - exercise runtime handling of an invalid action
     const newState = reducer(state, { type: "nonexistent", payload: null });
 
     expect(newState).toBe(state);
@@ -119,6 +185,41 @@ describe("createReducerAndAtoms", () => {
     expect(typeof result.useActions).toBe("function");
   });
 
+  it("caches hook actions and supports bypassing middleware", () => {
+    const middleware = vi.fn();
+    const { useActions, valueAtom } = createReducerAndAtoms(
+      () => ({ count: 0 }),
+      {
+        increment: (state, payload: number) => ({
+          count: state.count + payload,
+        }),
+      },
+      [middleware],
+    );
+    const { result, rerender } = renderHook((options) => useActions(options), {
+      initialProps: { skipMiddleware: false },
+    });
+    const actions = result.current;
+    act(() => actions.increment(2));
+    rerender({ skipMiddleware: false });
+    expect(result.current).toBe(actions);
+    expect(getDefaultStore().get(valueAtom)).toEqual({ count: 2 });
+    expect(middleware).toHaveBeenCalledExactlyOnceWith(
+      { count: 0 },
+      { count: 2 },
+      { type: "increment", payload: 2 },
+    );
+
+    middleware.mockClear();
+    rerender({ skipMiddleware: true });
+    const plainActions = result.current;
+    rerender({ skipMiddleware: true });
+    expect(result.current).toBe(plainActions);
+    act(() => result.current.increment(3));
+    expect(getDefaultStore().get(valueAtom)).toEqual({ count: 5 });
+    expect(middleware).not.toHaveBeenCalled();
+  });
+
   it("should apply middleware", () => {
     const initialState = () => ({ count: 0 });
     const reducers = {
@@ -139,6 +240,31 @@ describe("createReducerAndAtoms", () => {
     expect(middleware).toHaveBeenCalledWith(state, { count: 5 }, action);
   });
 
+  it("runs middleware after the write commits, so it sees the new state", () => {
+    const initialState = () => ({ count: 0 });
+    const reducers = {
+      increment: (state: State, payload: number) => ({
+        count: state.count + payload,
+      }),
+    };
+    const seen: number[] = [];
+    const { valueAtom, useActions } = createReducerAndAtoms(
+      initialState,
+      reducers,
+      [(_prev, next) => seen.push(store.get(valueAtom).count, next.count)],
+    );
+    const store = createStore();
+    const wrapper = ({ children }: PropsWithChildren) => (
+      <Provider store={store}>{children}</Provider>
+    );
+    const { result } = renderHook(() => useActions(), { wrapper });
+
+    result.current.increment(5);
+
+    expect(seen).toEqual([5, 5]);
+    expect(store.get(valueAtom)).toEqual({ count: 5 });
+  });
+
   it("should log an error for non-existent action types", () => {
     const initialState = () => ({ count: 0 });
     const reducers = {

package/src/utils/__tests__/download.test.tsx

@@ -11,6 +11,7 @@ import {
   downloadExportedFile,
   downloadHTMLAsImage,
   getImageDataUrlForCell,
+  isDownloadUrl,
   withLoadingToast,
 } from "../download";
 
@@ -595,34 +596,193 @@ describe("downloadByURL", () => {
   });
 
   it("should create anchor, set attributes, click, and remove", () => {
-    downloadByURL("data:test", "filename.png");
+    downloadByURL("data:image/png;base64,AAA=", "filename.png");
 
     expect(document.createElement).toHaveBeenCalledWith("a");
-    expect(mockAnchor.href).toBe("data:test");
+    expect(mockAnchor.href).toBe("data:image/png;base64,AAA=");
     expect(mockAnchor.download).toBe("filename.png");
     expect(mockAnchor.click).toHaveBeenCalled();
     expect(mockAnchor.remove).toHaveBeenCalled();
   });
 
-  it("downloads an exported file with its returned metadata", async () => {
-    let downloadedBlob: Blob | undefined;
-    vi.stubGlobal("URL", {
-      createObjectURL: vi.fn((blob: Blob) => {
-        downloadedBlob = blob;
-        return "blob:export";
-      }),
-      revokeObjectURL: vi.fn(),
-    });
-
-    downloadExportedFile({
-      contents: "notebook",
-      filename: "résumé.qmd",
-      mediaType: "text/plain; charset=utf-8",
-    });
-
-    expect(downloadedBlob?.type).toBe("text/plain; charset=utf-8");
-    expect(await downloadedBlob?.text()).toBe("notebook");
-    expect(mockAnchor.download).toBe("résumé.qmd");
-    expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:export");
-  });
+  it.each([
+    "https://example.com/results.csv",
+    "http://example.com/results.csv",
+    "//example.com/results.csv",
+    "./@file/123-results.csv",
+    "/files/results.csv?download=1#data",
+    "../results.csv",
+    "blob:http://localhost/123",
+    "data:text/csv;charset=utf-8,a%2Cb",
+    "DATA:TEXT/PLAIN;base64,aGVsbG8=",
+    "data:application/json,%7B%7D",
+    "data:application/octet-stream;base64,AAA=",
+    "data:audio/x-wav;base64,AAA=",
+    "data:AUDIO/MPEG;codecs=mp3;base64,AAA=",
+    "data:video/mp4;base64,AAA=",
+    "data:image/tiff;base64,AAA=",
+    "data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,AAA=",
+    "data:application/vnd.ms-excel;base64,AAA=",
+    "data:application/vnd.apache.parquet;base64,AAA=",
+    "data:application/x-hdf5;base64,AAA=",
+    "data:application/x-custom-format;base64,AAA=",
+    "data:application/geo+json,%7B%7D",
+    "data:application/epub+zip;base64,AAA=",
+    "data:font/woff2;base64,AAA=",
+    "data:text/markdown;charset=utf-8,%23%20Title",
+    "data:application/pdf;base64,AAA=",
+    "data:,hello",
+    "data:;base64,aGVsbG8=",
+    "data:text/plain,",
+    "data:text/plain,javascript:alert(1)",
+    "data:text/plain,hello?name=world#fragment",
+    "data:application/javascript-source,source%20code",
+    " https://example.com/results.csv ",
+  ])("downloads %s without an explicit filename", (url) => {
+    downloadByURL(url);
+
+    expect(mockAnchor.getAttribute("href")).toBe(url);
+    expect(mockAnchor.getAttribute("download")).toBe("");
+    expect(mockAnchor.click).toHaveBeenCalledOnce();
+  });
+
+  it.each([
+    "javascript:alert(1)",
+    "JaVaScRiPt:alert(1)",
+    " \u0000javascript:alert(1)",
+    "java\tscript:alert(1)",
+    "java\nscript:alert(1)",
+    "java\rscript:alert(1)",
+    "vbscript:msgbox(1)",
+    "file:///tmp/results.csv",
+    "ftp://example.com/results.csv",
+    "mailto:example@example.com",
+    "data:text/html,<h1>hello</h1>",
+    "data:TEXT/HTML;charset=utf-8;base64,AAA=",
+    "data:image/svg+xml,<svg/>",
+    "data:application/xhtml+xml,<html/>",
+    "data:text/javascript,alert(1)",
+    "data:application/javascript;charset=utf-8,alert(1)",
+    "data:application/x-javascript;base64,AAA=",
+    "data:application/ecmascript,alert(1)",
+    "data:application/x-ecmascript,alert(1)",
+    "data:text/ecmascript,alert(1)",
+    "data:text/x-ecmascript,alert(1)",
+    "data:text/x-javascript,alert(1)",
+    "data:text/javascript1.0,alert(1)",
+    "data:text/javascript1.1,alert(1)",
+    "data:text/javascript1.2,alert(1)",
+    "data:text/javascript1.3,alert(1)",
+    "data:text/javascript1.4,alert(1)",
+    "data:text/javascript1.5,alert(1)",
+    "data:text/jscript,alert(1)",
+    "data:text/livescript,alert(1)",
+    "data:text/vbscript,msgbox(1)",
+    "data:text/xml,<root/>",
+    "data:application/xml,<root/>",
+    "data:IMAGE/SVG+XML;charset=utf-8;base64,AAA=",
+    "data:application/custom+xml,<root/>",
+    "data:invalid,hello",
+    "data:text/,hello",
+    "data:/plain,hello",
+    "data:text/pl ain,hello",
+    "data:text/plain/extra,hello",
+    "data:text/plain",
+    "https://[invalid",
+    "",
+    " \n\t",
+  ])("rejects %j before creating a download link", (url) => {
+    expect(() => downloadByURL(url)).toThrow("Unsupported download URL");
+    expect(document.createElement).not.toHaveBeenCalled();
+    expect(mockAnchor.click).not.toHaveBeenCalled();
+  });
+
+  it.each(Array.from({ length: 33 }, (_, code) => code))(
+    "rejects a script scheme with leading ASCII character %i",
+    (code) => {
+      const url = `${String.fromCharCode(code)}JaVa\nScRi\tPt:alert(1)`;
+      expect(() => downloadByURL(url)).toThrow("Unsupported download URL");
+      expect(document.createElement).not.toHaveBeenCalled();
+    },
+  );
+
+  it.each([
+    "text/html",
+    "application/xhtml+xml",
+    "image/svg+xml",
+    "application/custom+xml",
+    "text/javascript1.4",
+    "text/javascript2.0",
+    "application/x-javascript2.0",
+    "text/ecmascript2026",
+    "text/livescript",
+  ])("rejects normalized and parameterized data MIME type %s", (mimeType) => {
+    const urls = [
+      `DATA:${mimeType.toUpperCase()},payload`,
+      `data: ${mimeType} ;charset=utf-8,payload`,
+      `data:${mimeType};charset="utf-8";base64,cGF5bG9hZA==`,
+      `da\tta:${mimeType};name=file.txt,payload?query#fragment`,
+    ];
+    for (const url of urls) {
+      expect(() => downloadByURL(url)).toThrow("Unsupported download URL");
+    }
+    expect(document.createElement).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    null,
+    undefined,
+    42,
+    false,
+    {},
+    [],
+    new String("https://example.com"),
+  ])("rejects non-string input %j without throwing or coercing it", (url) => {
+    expect(isDownloadUrl(url)).toBe(false);
+  });
+
+  it.each([false, true])(
+    "releases exported files after a click (fails=%s)",
+    async (fails) => {
+      let downloadedBlob: Blob | undefined;
+      vi.stubGlobal(
+        "URL",
+        class extends URL {
+          public static override createObjectURL = vi.fn((blob: Blob) => {
+            downloadedBlob = blob;
+            return "blob:export";
+          });
+          public static override revokeObjectURL = vi.fn();
+        },
+      );
+
+      if (fails) {
+        vi.mocked(mockAnchor.click).mockImplementation(() => {
+          throw new Error("Download failed");
+        });
+      }
+      const download = () =>
+        downloadExportedFile({
+          contents: "notebook",
+          filename: "résumé.qmd",
+          mediaType: "text/plain; charset=utf-8",
+        });
+      let caughtError: unknown;
+      try {
+        download();
+      } catch (error) {
+        caughtError = error;
+      }
+
+      expect(caughtError).toEqual(
+        fails ? new Error("Download failed") : undefined,
+      );
+
+      expect(downloadedBlob?.type).toBe("text/plain; charset=utf-8");
+      expect(await downloadedBlob?.text()).toBe("notebook");
+      expect(mockAnchor.download).toBe("résumé.qmd");
+      expect(mockAnchor.remove).toHaveBeenCalledOnce();
+      expect(URL.revokeObjectURL).toHaveBeenCalledWith("blob:export");
+    },
+  );
 });