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

package/src/hooks/useHotkey.ts

@@ -17,31 +17,13 @@ type HotkeyHandler = (
   // oxlint-disable-next-line typescript/no-invalid-void-type
 ) => boolean | void | undefined | Promise<void>;
 
-interface HotkeyOptions {
-  /**
-   * If true, the hotkey is not handled at all: the callback does not run, the
-   * event's default is not prevented, and the action is not registered in the
-   * shortcut registry.
-   *
-   * This differs from passing `Functions.NOOP` as the callback, which still
-   * swallows the keystroke (preventDefault) to suppress native browser/OS
-   * behavior.
-   */
-  disabled?: boolean;
-}
-
 /**
  * Registers a hotkey listener for the given shortcut.
  *
  * @param callback The callback to run when the shortcut is pressed. It does not need to be memoized as this hook will always use the latest callback.
  * If the callback returns false, preventDefault will not be called on the event.
  */
-export function useHotkey(
-  shortcut: HotkeyAction,
-  callback: HotkeyHandler,
-  options: HotkeyOptions = {},
-) {
-  const { disabled = false } = options;
+export function useHotkey(shortcut: HotkeyAction, callback: HotkeyHandler) {
   const { registerAction, unregisterAction } = useSetRegisteredAction();
   const hotkeys = useAtomValue(hotkeysAtom);
 
@@ -49,7 +31,7 @@ export function useHotkey(
   const memoizeCallback = useEvent((evt?: KeyboardEvent) => callback(evt));
 
   const listener = useEvent((e: KeyboardEvent) => {
-    if (disabled || e.defaultPrevented) {
+    if (e.defaultPrevented) {
       return;
     }
 
@@ -69,18 +51,11 @@ export function useHotkey(
 
   // Register with the shortcut registry
   useEffect(() => {
-    if (!isNOOP && !disabled) {
+    if (!isNOOP) {
       registerAction(shortcut, memoizeCallback);
       return () => unregisterAction(shortcut);
     }
-  }, [
-    memoizeCallback,
-    shortcut,
-    isNOOP,
-    disabled,
-    registerAction,
-    unregisterAction,
-  ]);
+  }, [memoizeCallback, shortcut, isNOOP, registerAction, unregisterAction]);
 }
 
 /**

package/src/plugins/impl/anywidget/__tests__/host.test.ts

@@ -277,22 +277,25 @@ describe("WidgetBinding receives a host in render props", () => {
   });
 });
 
-describe("host-mounted views", () => {
-  it("render with the child's current model state", async () => {
-    const childId = asModelId("host-child-state");
+describe("host-mounted views hydrate like display-mounted ones", () => {
+  it("replays current state to a child's render listeners", async () => {
+    const childId = asModelId("host-hydration-child");
     const parentController = new AbortController();
     const getModuleSpy = vi.spyOn(WIDGET_DEF_REGISTRY, "getModule");
     try {
       const childWidget = {
         render: vi.fn(({ model, el }) => {
-          el.textContent = `count is ${model.get("count")}`;
+          el.textContent = "count is 5";
+          model.on("change:count", () => {
+            el.textContent = `count is ${model.get("count")}`;
+          });
         }),
       };
       const childModel = new Model<ModelState>({ count: 8 }, createMockComm());
       WIDGET_REGISTRY.setModel(childId, childModel);
       WIDGET_REGISTRY.setSpec(childId, {
-        url: "./@file/10-host-child-state.js",
-        hash: "hash-host-child-state",
+        url: "./@file/10-host-hydration-child.js",
+        hash: "hash-host-hydration-child",
       });
       getModuleSpy.mockResolvedValue({ default: childWidget });
 

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

@@ -337,12 +337,13 @@ describe("WidgetBinding", () => {
       { el: document.createElement("div") },
       { signal: controller.signal },
     );
+    // Called once by the hydration replay at mount, once by the set.
     model.set("count", 1);
-    expect(onCount).toHaveBeenCalledTimes(1);
+    expect(onCount).toHaveBeenCalledTimes(2);
 
     controller.abort();
     model.set("count", 2);
-    expect(onCount).toHaveBeenCalledTimes(1);
+    expect(onCount).toHaveBeenCalledTimes(2);
   });
 
   it("should auto-clear initialize listeners on destroy", async () => {
@@ -365,32 +366,30 @@ describe("WidgetBinding", () => {
   });
 });
 
-describe("WidgetBinding render listeners", () => {
-  it("fire only for changes after mount, never for pre-existing state", async () => {
+describe("WidgetBinding hydration replay", () => {
+  it("replays current state to render listeners exactly once", async () => {
     const model = new Model<ModelState>({ count: 8 }, createMockComm());
-    const onCount = vi.fn();
-    const onAnyChange = vi.fn();
+    const el = document.createElement("div");
     const widgetDef = {
-      render: vi.fn(({ model }) => {
-        model.on("change:count", onCount);
-        model.on("change", onAnyChange);
+      render: vi.fn(({ model, el }) => {
+        // A widget view that starts with a local default and relies on
+        // change events for hydration.
+        el.textContent = "count is 5";
+        model.on("change:count", () => {
+          el.textContent = `count is ${model.get("count")}`;
+        });
       }),
     };
     const binding = await createBinding(widgetDef, model);
-    const controller = new AbortController();
-    await binding.createView(
-      { el: document.createElement("div") },
-      { signal: controller.signal },
-    );
-    expect(onCount).not.toHaveBeenCalled();
-    expect(onAnyChange).not.toHaveBeenCalled();
 
-    model.set("count", 9);
-    expect(onCount).toHaveBeenCalledTimes(1);
-    expect(onCount).toHaveBeenCalledWith(9);
+    const controller = new AbortController();
+    await binding.createView({ el }, { signal: controller.signal });
+    expect(el.textContent).toBe("count is 8");
   });
 
-  it("mounting a second view does not fire the first view's listeners", async () => {
+  it("does not re-fire listeners of already-mounted views", async () => {
+    // Mounting view B must not double-paint view A: the replay is
+    // scoped to the listeners the new render attached.
     const model = new Model<ModelState>({ count: 0 }, createMockComm());
     const listeners: Array<ReturnType<typeof vi.fn>> = [];
     const widgetDef = {
@@ -407,12 +406,52 @@ describe("WidgetBinding render listeners", () => {
       { el: document.createElement("div") },
       { signal: controller.signal },
     );
+    expect(listeners[0]).toHaveBeenCalledTimes(1);
+
+    await binding.createView(
+      { el: document.createElement("div") },
+      { signal: controller.signal },
+    );
+    // View B's listener hydrated once; view A's was left alone.
+    expect(listeners[1]).toHaveBeenCalledTimes(1);
+    expect(listeners[0]).toHaveBeenCalledTimes(1);
+  });
+
+  it("replays the any-change event to its listeners", async () => {
+    const model = new Model<ModelState>({ count: 1 }, createMockComm());
+    const onAnyChange = vi.fn();
+    const widgetDef = {
+      render: vi.fn(({ model }) => {
+        model.on("change", onAnyChange);
+      }),
+    };
+    const binding = await createBinding(widgetDef, model);
+    const controller = new AbortController();
+    await binding.createView(
+      { el: document.createElement("div") },
+      { signal: controller.signal },
+    );
+    expect(onAnyChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("does not replay initialize listeners", async () => {
+    // The guarantee is per-view: initialize listeners existed before
+    // any view, and replaying at them would fire once per mount.
+    const model = new Model<ModelState>({ count: 1 }, createMockComm());
+    const initListener = vi.fn();
+    const widgetDef = {
+      initialize: vi.fn(({ model }) => {
+        model.on("change:count", initListener);
+      }),
+      render: vi.fn(),
+    };
+    const binding = await createBinding(widgetDef, model);
+    const controller = new AbortController();
     await binding.createView(
       { el: document.createElement("div") },
       { signal: controller.signal },
     );
-    expect(listeners[0]).not.toHaveBeenCalled();
-    expect(listeners[1]).not.toHaveBeenCalled();
+    expect(initListener).not.toHaveBeenCalled();
   });
 
   it("clears the element before rendering into it", async () => {

package/src/plugins/impl/anywidget/model-proxy.ts

@@ -5,6 +5,15 @@ import type { ModelState } from "./types";
 
 type ModelEventCallback = Parameters<AnyModel<ModelState>["on"]>[1];
 
+/**
+ * A listener registered through a model proxy (see the hydration
+ * replay in `WidgetBinding.createView`).
+ */
+export interface ProxyRegistration {
+  event: string;
+  callback: ModelEventCallback;
+}
+
 /**
  * Wrap a model so every `on()` call from inside `initialize` or `render`
  * is auto-tied to a lifetime `AbortSignal`. When the signal aborts,
@@ -18,11 +27,14 @@ type ModelEventCallback = Parameters<AnyModel<ModelState>["on"]>[1];
  * The proxy is purely a host-side ergonomic helper. The widget author
  * still writes `model.on("change:foo", handler)` exactly as before; the
  * cleanup signal is supplied transparently.
+ *
+ * `onRegister`, when given, observes each `on()` registration.
  */
 // oxlint-disable-next-line marimo/prefer-object-params -- concise internal helper used at protocol call sites
 export function modelProxy<T extends ModelState>(
   model: AnyModel<T>,
   signal: AbortSignal,
+  onRegister?: (registration: ProxyRegistration) => void,
 ): AnyModel<T> {
   return {
     get(key) {
@@ -43,6 +55,7 @@ export function modelProxy<T extends ModelState>(
       signal.addEventListener("abort", () => model.off(name, callback), {
         once: true,
       });
+      onRegister?.({ event: name, callback });
     },
     off(name?: string | null, callback?: ModelEventCallback | null): void {
       model.off(name ?? null, callback ?? null);

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 } from "./model-proxy";
+import { modelProxy, type ProxyRegistration } from "./model-proxy";
 import type { ModelState } from "./types";
 
 export const experimental: Experimental = {
@@ -266,8 +266,9 @@ 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.
    *
-   * `render` reads current state via `model.get`; change listeners
-   * observe only subsequent changes, matching Jupyter semantics.
+   * 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.
    */
   async createView(
     target: { el: HTMLElement },
@@ -304,8 +305,11 @@ 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),
+      model: modelProxy(this.#model, renderSignal, (registration) =>
+        registrations.push(registration),
+      ),
       el: target.el,
       experimental,
       signal: renderSignal,
@@ -329,6 +333,7 @@ export class WidgetBinding<T extends ModelState = ModelState> {
         once: true,
       });
     }
+    this.#replayState(registrations, renderSignal);
   }
 
   #trackCleanup(cleanup: Cleanup, reason: string): Promise<void> {
@@ -338,6 +343,31 @@ 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,13 +12,6 @@ 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,
@@ -27,61 +20,17 @@ 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%"
-          onError={() => handleError(beforeSrc)}
-        />
-        <img
-          slot="second"
-          src={afterSrc}
-          alt="After"
-          width="100%"
-          onError={() => handleError(afterSrc)}
-        />
+        <img slot="first" src={beforeSrc} alt="Before" width="100%" />
+        <img slot="second" src={afterSrc} alt="After" width="100%" />
       </ImgComparisonSlider>
     </div>
   );

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

@@ -1,11 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
-import { afterEach, describe, expect, it, vi } from "vitest";
-import {
-  type Data,
-  MatplotlibRenderer,
-  type MatplotlibState,
-  visibleForTesting,
-} from "../matplotlib-renderer";
+import { describe, expect, it } from "vitest";
+import type { Data } from "../matplotlib-renderer";
+import { visibleForTesting } from "../matplotlib-renderer";
 
 const {
   pixelToData,
@@ -189,67 +185,3 @@ 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,7 +377,6 @@ export class MatplotlibRenderer {
 
     if (state.chartBase64 !== this.#currentChartBase64) {
       this.#loadImage(state.chartBase64);
-      this.#restoreSelection(state.value);
       return;
     }
 

package/src/theme/useTheme.ts

@@ -2,7 +2,6 @@
 
 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";
 
@@ -11,16 +10,6 @@ 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()) {
@@ -62,7 +51,7 @@ const themeAtom = atom((get) => {
     return "light";
   }
 
-  return themeFromQueryParam() ?? get(resolvedMarimoConfigAtom).display.theme;
+  return get(resolvedMarimoConfigAtom).display.theme;
 });
 
 const prefersDarkModeAtom = atom(false);
@@ -133,7 +122,3 @@ export function useTheme(): { theme: ResolvedTheme } {
   const theme = useAtomValue(resolvedThemeAtom, { store });
   return { theme };
 }
-
-export const visibleForTesting = {
-  themeFromQueryParam,
-};

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

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