@marimo-team/islands 0.23.15-dev5 → 0.23.15-dev50

package/src/plugins/impl/anywidget/widget-binding.ts

@@ -12,7 +12,7 @@ import { isTrustedVirtualFileUrl } from "@/plugins/core/trusted-url";
 import { Logger } from "@/utils/Logger";
 import type { Host } from "./host";
 import type { Model } from "./model";
-import { modelProxy, type ProxyRegistration } from "./model-proxy";
+import { modelProxy } from "./model-proxy";
 import type { ModelState } from "./types";
 
 export const experimental: Experimental = {
@@ -80,6 +80,10 @@ class WidgetDefRegistry {
     return promise;
   }
 
+  invalidate(jsHash: string): void {
+    this.#cache.delete(jsHash);
+  }
+
   async #doImport(
     jsUrl: string,
     opts: { kernelAuthored?: boolean } = {},
@@ -266,9 +270,8 @@ export class WidgetBinding<T extends ModelState = ModelState> {
    * when the caller's `signal` fires or the binding is destroyed, and
    * listeners registered inside `render` auto-clear on abort.
    *
-   * Hydration guarantee: listeners attached during `render` observe
-   * current model state exactly once, after `render` settles. Scoped
-   * to this view's listeners; re-firing at other views double-paints.
+   * `render` reads current state via `model.get`; change listeners
+   * observe only subsequent changes, matching Jupyter semantics.
    */
   async createView(
     target: { el: HTMLElement },
@@ -305,11 +308,8 @@ export class WidgetBinding<T extends ModelState = ModelState> {
     // Each view gets a host scoped to its own signal so child views tear
     // down with this view.
     const host = this.#createHost(renderSignal);
-    const registrations: ProxyRegistration[] = [];
     const renderCleanup = await widget.render({
-      model: modelProxy(this.#model, renderSignal, (registration) =>
-        registrations.push(registration),
-      ),
+      model: modelProxy(this.#model, renderSignal),
       el: target.el,
       experimental,
       signal: renderSignal,
@@ -333,7 +333,6 @@ export class WidgetBinding<T extends ModelState = ModelState> {
         once: true,
       });
     }
-    this.#replayState(registrations, renderSignal);
   }
 
   #trackCleanup(cleanup: Cleanup, reason: string): Promise<void> {
@@ -343,31 +342,6 @@ export class WidgetBinding<T extends ModelState = ModelState> {
     return task;
   }
 
-  /**
-   * The hydration guarantee documented on `createView`.
-   */
-  #replayState(
-    registrations: readonly ProxyRegistration[],
-    renderSignal: AbortSignal,
-  ): void {
-    const changePrefix = "change:";
-    for (const { event, callback } of registrations) {
-      if (renderSignal.aborted) {
-        return;
-      }
-      try {
-        if (event.startsWith(changePrefix)) {
-          const key = event.slice(changePrefix.length);
-          callback(this.#model.get(key));
-        } else if (event === "change") {
-          callback();
-        }
-      } catch (error) {
-        Logger.error("[WidgetBinding] Error replaying state", error);
-      }
-    }
-  }
-
   /**
    * Destroy this generation, running initialize/render cleanups and
    * clearing listeners registered through its model proxies.

package/src/plugins/impl/image-comparison/ImageComparisonComponent.tsx

@@ -12,6 +12,13 @@ export interface ImageComparisonData {
   height?: string;
 }
 
+// Truncate long sources (e.g. base64 data URLs) so error messages stay
+// readable.
+function truncateSrc(src: string): string {
+  const MAX_LENGTH = 100;
+  return src.length > MAX_LENGTH ? `${src.slice(0, MAX_LENGTH)}…` : src;
+}
+
 const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
   beforeSrc,
   afterSrc,
@@ -20,17 +27,61 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
   width,
   height,
 }) => {
+  const [failedSrcs, setFailedSrcs] = React.useState<ReadonlySet<string>>(
+    () => new Set(),
+  );
+
+  React.useEffect(() => {
+    setFailedSrcs(new Set());
+  }, [beforeSrc, afterSrc]);
+
+  const handleError = React.useCallback((src: string) => {
+    setFailedSrcs((prev) => new Set(prev).add(src));
+  }, []);
+
   const containerStyle: React.CSSProperties = {
     width: width || "100%",
     height: height || (direction === "vertical" ? "400px" : "auto"),
     maxWidth: "100%",
+    // The slider derives its height entirely from its (loaded) images, so a
+    // broken/slow-loading source would otherwise collapse it to nothing and
+    // render an empty output. Keep a minimum height so it stays visible.
+    minHeight: "2rem",
   };
 
+  // If an image fails to load, the slider collapses to nothing; surface a
+  // visible error instead of silently rendering an empty output.
+  if (failedSrcs.size > 0) {
+    return (
+      <div
+        style={containerStyle}
+        className="flex items-center justify-center rounded border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive"
+      >
+        <span>
+          Failed to load {failedSrcs.size > 1 ? "images" : "image"}:{" "}
+          {[...failedSrcs].map((src) => `"${truncateSrc(src)}"`).join(", ")}
+        </span>
+      </div>
+    );
+  }
+
   return (
     <div style={containerStyle}>
       <ImgComparisonSlider value={value} direction={direction}>
-        <img slot="first" src={beforeSrc} alt="Before" width="100%" />
-        <img slot="second" src={afterSrc} alt="After" width="100%" />
+        <img
+          slot="first"
+          src={beforeSrc}
+          alt="Before"
+          width="100%"
+          onError={() => handleError(beforeSrc)}
+        />
+        <img
+          slot="second"
+          src={afterSrc}
+          alt="After"
+          width="100%"
+          onError={() => handleError(afterSrc)}
+        />
       </ImgComparisonSlider>
     </div>
   );

package/src/plugins/impl/image-comparison/__tests__/ImageComparisonComponent.test.tsx

@@ -0,0 +1,71 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import ImageComparisonComponent from "../ImageComparisonComponent";
+
+const baseProps = {
+  beforeSrc: "before.png",
+  afterSrc: "after.png",
+  value: 50,
+  direction: "horizontal" as const,
+};
+
+describe("ImageComparisonComponent", () => {
+  it("renders the comparison slider with both images", () => {
+    const { getByAltText, container } = render(
+      <ImageComparisonComponent {...baseProps} />,
+    );
+    expect(getByAltText("Before")).toBeTruthy();
+    expect(getByAltText("After")).toBeTruthy();
+    expect(container.querySelector("img-comparison-slider")).toBeTruthy();
+  });
+
+  it("shows a visible error instead of collapsing when an image fails to load", () => {
+    const brokenSrc = "https://example.com/does-not-exist.png";
+    const { getByAltText, queryByText, container } = render(
+      <ImageComparisonComponent {...baseProps} beforeSrc={brokenSrc} />,
+    );
+
+    // No error before the image fails.
+    expect(queryByText(/Failed to load/)).toBeNull();
+
+    fireEvent.error(getByAltText("Before"));
+
+    // The slider is replaced with a visible error mentioning the source, so
+    // the output is never a silent blank.
+    expect(container.querySelector("img-comparison-slider")).toBeNull();
+    const error = queryByText(/Failed to load image/);
+    expect(error).toBeTruthy();
+    expect(error?.textContent).toContain(brokenSrc);
+  });
+
+  it("clears the error when the sources change so new images can load", () => {
+    const brokenSrc = "https://example.com/does-not-exist.png";
+    const { getByAltText, queryByText, container, rerender } = render(
+      <ImageComparisonComponent {...baseProps} beforeSrc={brokenSrc} />,
+    );
+
+    fireEvent.error(getByAltText("Before"));
+    expect(queryByText(/Failed to load/)).toBeTruthy();
+
+    // Re-render with a new source (e.g. the user fixed the notebook): the error
+    // should clear and the slider should mount again rather than stay stuck.
+    rerender(<ImageComparisonComponent {...baseProps} beforeSrc="fixed.png" />);
+    expect(queryByText(/Failed to load/)).toBeNull();
+    expect(container.querySelector("img-comparison-slider")).toBeTruthy();
+  });
+
+  it("truncates long sources (e.g. data URLs) in the error message", () => {
+    const longSrc = `data:image/png;base64,${"A".repeat(200)}`;
+    const { getByAltText, queryByText } = render(
+      <ImageComparisonComponent {...baseProps} afterSrc={longSrc} />,
+    );
+
+    fireEvent.error(getByAltText("After"));
+
+    const error = queryByText(/Failed to load image/);
+    expect(error?.textContent).toContain("…");
+    expect(error?.textContent).not.toContain("A".repeat(200));
+  });
+});

package/src/plugins/impl/matplotlib/__tests__/matplotlib-renderer.test.ts

@@ -1,7 +1,11 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { describe, expect, it } from "vitest";
-import type { Data } from "../matplotlib-renderer";
-import { visibleForTesting } from "../matplotlib-renderer";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  type Data,
+  MatplotlibRenderer,
+  type MatplotlibState,
+  visibleForTesting,
+} from "../matplotlib-renderer";
 
 const {
   pixelToData,
@@ -185,3 +189,67 @@ describe("isInAxes", () => {
     expect(isInAxes({ x: 300, y: 351 }, LINEAR_AXES)).toBe(false);
   });
 });
+
+describe("MatplotlibRenderer", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  it("restores a new selection when the chart changes", () => {
+    vi.stubGlobal(
+      "matchMedia",
+      vi.fn(() => ({ addEventListener: vi.fn() })),
+    );
+    vi.stubGlobal(
+      "requestAnimationFrame",
+      vi.fn(() => 1),
+    );
+    vi.stubGlobal("cancelAnimationFrame", vi.fn());
+    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(null);
+
+    const value = {
+      type: "box",
+      has_selection: true,
+      data: { x_min: 2, x_max: 4, y_min: 2, y_max: 4 },
+    } as const;
+    const state: MatplotlibState = {
+      ...LINEAR_AXES,
+      axesPixelBounds: [0, 0, 100, 100],
+      yBounds: [0, 10],
+      chartBase64: "first",
+      width: 100,
+      height: 100,
+      selectionColor: "blue",
+      selectionOpacity: 0.15,
+      strokeWidth: 2,
+      debounce: false,
+      value: { has_selection: false },
+      setValue: vi.fn(),
+    };
+    const container = document.createElement("div");
+    const controller = new AbortController();
+    const renderer = new MatplotlibRenderer(container, {
+      state,
+      signal: controller.signal,
+    });
+
+    // Cell reruns reuse the renderer, updating the chart and initial value together.
+    renderer.update({ ...state, chartBase64: "second", value });
+
+    const canvas = container.querySelector("canvas");
+    expect(canvas).not.toBeNull();
+    if (!canvas) {
+      return;
+    }
+    vi.spyOn(canvas, "getBoundingClientRect").mockReturnValue(
+      DOMRect.fromRect({ width: 100, height: 100 }),
+    );
+    canvas.dispatchEvent(
+      new MouseEvent("pointermove", { clientX: 30, clientY: 70 }),
+    );
+
+    expect(canvas.style.cursor).toBe("move");
+    controller.abort();
+  });
+});

package/src/plugins/impl/matplotlib/matplotlib-renderer.ts

@@ -377,6 +377,7 @@ export class MatplotlibRenderer {
 
     if (state.chartBase64 !== this.#currentChartBase64) {
       this.#loadImage(state.chartBase64);
+      this.#restoreSelection(state.value);
       return;
     }
 

package/src/theme/__tests__/useTheme.test.ts

@@ -0,0 +1,68 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { afterEach, describe, expect, it } from "vitest";
+import { configOverridesAtom, userConfigAtom } from "@/core/config/config";
+import { defaultUserConfig } from "@/core/config/config-schema";
+import { store } from "@/core/state/jotai";
+import type { Theme } from "../useTheme";
+import { resolvedThemeAtom, visibleForTesting } from "../useTheme";
+
+const { themeFromQueryParam } = visibleForTesting;
+
+function setQuery(search: string): void {
+  window.history.replaceState({}, "", search === "" ? "/" : `/?${search}`);
+}
+
+function setConfigTheme(theme: Theme): void {
+  const config = defaultUserConfig();
+  store.set(userConfigAtom, {
+    ...config,
+    display: { ...config.display, theme },
+  });
+}
+
+afterEach(() => {
+  setQuery("");
+  store.set(userConfigAtom, defaultUserConfig());
+  store.set(configOverridesAtom, {});
+});
+
+describe("themeFromQueryParam", () => {
+  it.each(["light", "dark", "system"] as const)(
+    "returns the valid theme %s",
+    (theme) => {
+      setQuery(`theme=${theme}`);
+      expect(themeFromQueryParam()).toBe(theme);
+    },
+  );
+
+  it("returns undefined when the param is absent", () => {
+    setQuery("");
+    expect(themeFromQueryParam()).toBeUndefined();
+  });
+
+  it("returns undefined for an invalid value", () => {
+    setQuery("theme=blue");
+    expect(themeFromQueryParam()).toBeUndefined();
+  });
+});
+
+describe("resolvedThemeAtom with a theme query param", () => {
+  it("uses the saved config theme when no param is present", () => {
+    setConfigTheme("dark");
+    setQuery("");
+    expect(store.get(resolvedThemeAtom)).toBe("dark");
+  });
+
+  it("lets the query param override the saved config theme", () => {
+    setConfigTheme("light");
+    setQuery("theme=dark");
+    expect(store.get(resolvedThemeAtom)).toBe("dark");
+  });
+
+  it("falls back to the config theme for an invalid param value", () => {
+    setConfigTheme("dark");
+    setQuery("theme=blue");
+    expect(store.get(resolvedThemeAtom)).toBe("dark");
+  });
+});

package/src/theme/useTheme.ts

@@ -2,6 +2,7 @@
 
 import { atom, useAtomValue } from "jotai";
 import { resolvedMarimoConfigAtom } from "@/core/config/config";
+import { KnownQueryParams } from "@/core/constants";
 import { isIslands } from "@/core/islands/utils";
 import { store } from "@/core/state/jotai";
 
@@ -10,6 +11,16 @@ export type ResolvedTheme = "light" | "dark";
 
 export const THEMES: Theme[] = ["light", "dark", "system"];
 
+function themeFromQueryParam(): Theme | undefined {
+  if (typeof window === "undefined") {
+    return undefined;
+  }
+  const value = new URLSearchParams(window.location.search).get(
+    KnownQueryParams.theme,
+  );
+  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()) {
@@ -51,7 +62,7 @@ const themeAtom = atom((get) => {
     return "light";
   }
 
-  return get(resolvedMarimoConfigAtom).display.theme;
+  return themeFromQueryParam() ?? get(resolvedMarimoConfigAtom).display.theme;
 });
 
 const prefersDarkModeAtom = atom(false);
@@ -122,3 +133,7 @@ export function useTheme(): { theme: ResolvedTheme } {
   const theme = useAtomValue(resolvedThemeAtom, { store });
   return { theme };
 }
+
+export const visibleForTesting = {
+  themeFromQueryParam,
+};

package/dist/assets/__vite-browser-external-BQCLNwri.js

@@ -1 +0,0 @@
-import{t as e}from"./worker-DAWRHcPq.js";var t=e(((e,t)=>{t.exports={}}));export default t();