@marimo-team/islands 0.23.1-dev8 → 0.23.1-dev9

package/dist/main.js

@@ -89,7 +89,7 @@ let __tla = Promise.all([
     }
   })()
 ]).then(async () => {
-  var _e2, _WidgetDefRegistry_instances, t_fn, _a, _e3, _t2, _n2, _b, _e4, _c, _e5, _t3, _ModelManager_instances, n_fn, _d, _e6, _e7, _t4, _n3, _r, _i, _f, _e_instances, a_fn, o_fn, s_fn, _c2, _g, _e8, _t5, _n4, _r2, _i2, _a2, _o2, _s, _MatplotlibRenderer_instances, c_fn, _l, _u, _d2, _f2, _p, _m, _h, _g2, __, _v, _y, _b2, _x, _S, _h2, _i3;
+  var _e2, _WidgetDefRegistry_instances, t_fn, _a, _e3, _t2, _n2, _b, _e4, _c, _e5, _t3, _ModelManager_instances, n_fn, _d, _e6, _e7, _t4, _n3, _r, _i, _f, _e_instances, a_fn, o_fn, s_fn, _c2, _g, _e8, _t5, _n4, _r2, _i2, _a2, _o2, _s, _MatplotlibRenderer_instances, c_fn, l_fn, u_fn, _d2, _f2, _p, _m, _h, _g2, __, _v, _y, _b2, _x, _S, _C, _w, _h2, _i3;
   var defaultIconDimensions = Object.freeze({
     left: 0,
     top: 0,
@@ -20872,7 +20872,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${r}Chann
       ];
     }
   })(memoTheme_default(({ theme: e }) => {
-    var _a3, _b3, _c3, _d3, _e9, _f3, _g3, _h3, _i4, _j, _k, _l2, _m2, _n5;
+    var _a3, _b3, _c3, _d3, _e9, _f3, _g3, _h3, _i4, _j, _k, _l, _m2, _n5;
     return {
       userSelect: "none",
       width: "1em",
@@ -20937,7 +20937,7 @@ To suppress this warning, you need to explicitly provide the \`palette.${r}Chann
             color: "action"
           },
           style: {
-            color: (_l2 = (_k = (e.vars ?? e).palette) == null ? void 0 : _k.action) == null ? void 0 : _l2.active
+            color: (_l = (_k = (e.vars ?? e).palette) == null ? void 0 : _k.action) == null ? void 0 : _l.active
           }
         },
         {
@@ -56429,7 +56429,7 @@ ${c}
       __privateAdd(this, _a2, null);
       __privateAdd(this, _o2, 0);
       __privateAdd(this, _s, "");
-      __privateAdd(this, _l, () => {
+      __privateAdd(this, _d2, () => {
         let e = __privateGet(this, _a2);
         if (!e) return;
         let r = __privateGet(this, _e8).getContext("2d");
@@ -56445,17 +56445,17 @@ ${c}
           r.closePath(), r.save(), r.fillStyle = c.selectionColor, r.globalAlpha = c.selectionOpacity, r.fill("evenodd"), r.restore(), r.strokeStyle = c.selectionColor, r.lineWidth = c.strokeWidth, r.stroke();
         }
       });
-      __privateAdd(this, _u, () => {
-        cancelAnimationFrame(__privateGet(this, _i2)), __privateSet(this, _i2, requestAnimationFrame(__privateGet(this, _l)));
+      __privateAdd(this, _f2, () => {
+        cancelAnimationFrame(__privateGet(this, _i2)), __privateSet(this, _i2, requestAnimationFrame(__privateGet(this, _d2)));
       });
-      __privateAdd(this, _d2, (e) => {
+      __privateAdd(this, _p, (e) => {
         let r = __privateGet(this, _e8).getBoundingClientRect(), c = __privateGet(this, _n4).width / r.width, d = __privateGet(this, _n4).height / r.height;
         return {
           x: (e.clientX - r.left) * c,
           y: (e.clientY - r.top) * d
         };
       });
-      __privateAdd(this, _f2, (e, r) => {
+      __privateAdd(this, _m, (e, r) => {
         let c = pixelToData(e, __privateGet(this, _n4)), d = pixelToData(r, __privateGet(this, _n4));
         __privateGet(this, _n4).setValue({
           type: "box",
@@ -56468,7 +56468,7 @@ ${c}
           }
         });
       });
-      __privateAdd(this, _p, (e) => {
+      __privateAdd(this, _h, (e) => {
         if (e.length >= 3) {
           let r = e.map((e2) => {
             let r2 = pixelToData(e2, __privateGet(this, _n4));
@@ -56484,19 +56484,19 @@ ${c}
           });
         }
       });
-      __privateAdd(this, _m, () => {
+      __privateAdd(this, _g2, () => {
         __privateSet(this, _r2, {
           type: "idle"
         }), __privateGet(this, _n4).setValue({
           has_selection: false
-        }), __privateGet(this, _u).call(this);
+        }), __privateGet(this, _f2).call(this);
       });
-      __privateAdd(this, _h, () => __privateGet(this, _r2).type !== "idle");
-      __privateAdd(this, _g2, (e) => {
+      __privateAdd(this, __, () => __privateGet(this, _r2).type !== "idle");
+      __privateAdd(this, _v, (e) => {
         let r = __privateGet(this, _r2);
         return r.type === "box" ? isPointInBox(e, r.start, r.end) : r.type === "lasso" ? pointInPolygon(e, r.points) : false;
       });
-      __privateAdd(this, __, (e) => {
+      __privateAdd(this, _y, (e) => {
         let [r, c, d, f] = __privateGet(this, _n4).axesPixelBounds;
         if (!(e.x >= r && e.x <= d && e.y >= c && e.y <= f)) {
           __privateGet(this, _e8).style.cursor = "default";
@@ -56510,13 +56510,13 @@ ${c}
             return;
           }
         }
-        if (__privateGet(this, _h).call(this) && __privateGet(this, _g2).call(this, e)) {
+        if (__privateGet(this, __).call(this) && __privateGet(this, _v).call(this, e)) {
           __privateGet(this, _e8).style.cursor = "move";
           return;
         }
         __privateGet(this, _e8).style.cursor = "crosshair";
       });
-      __privateAdd(this, _v, (e) => {
+      __privateAdd(this, _b2, (e) => {
         if (!(!e || !("has_selection" in e) || !e.has_selection)) {
           if (e.type === "box") {
             let r = e.data;
@@ -56540,12 +56540,12 @@ ${c}
             }, __privateGet(this, _n4))),
             action: null
           });
-          __privateGet(this, _u).call(this);
+          __privateGet(this, _f2).call(this);
         }
       });
-      __privateAdd(this, _y, (e) => {
+      __privateAdd(this, _x, (e) => {
         __privateGet(this, _e8).setPointerCapture(e.pointerId), __privateGet(this, _t5).focus();
-        let r = __privateGet(this, _d2).call(this, e), c = __privateGet(this, _r2);
+        let r = __privateGet(this, _p).call(this, e), c = __privateGet(this, _r2);
         if (e.shiftKey) {
           if (!isInAxes(r, __privateGet(this, _n4))) return;
           __privateSet(this, _r2, {
@@ -56556,7 +56556,7 @@ ${c}
             action: {
               type: "drawing"
             }
-          }), __privateGet(this, _u).call(this);
+          }), __privateGet(this, _f2).call(this);
           return;
         }
         if (c.type === "box" && c.action === null) {
@@ -56577,7 +56577,7 @@ ${c}
             return;
           }
         }
-        if (__privateGet(this, _h).call(this) && __privateGet(this, _g2).call(this, r)) {
+        if (__privateGet(this, __).call(this) && __privateGet(this, _v).call(this, r)) {
           c.type === "box" ? __privateSet(this, _r2, {
             type: "box",
             start: c.start,
@@ -56596,7 +56596,7 @@ ${c}
           });
           return;
         }
-        if (__privateGet(this, _h).call(this) && __privateGet(this, _m).call(this), !isInAxes(r, __privateGet(this, _n4))) return;
+        if (__privateGet(this, __).call(this) && __privateGet(this, _g2).call(this), !isInAxes(r, __privateGet(this, _n4))) return;
         let d = clampToAxes(r, __privateGet(this, _n4));
         __privateSet(this, _r2, {
           type: "box",
@@ -56605,21 +56605,21 @@ ${c}
           action: {
             type: "drawing"
           }
-        }), __privateGet(this, _u).call(this);
+        }), __privateGet(this, _f2).call(this);
       });
-      __privateAdd(this, _b2, (e) => {
-        let r = __privateGet(this, _d2).call(this, e), c = __privateGet(this, _r2), d = __privateGet(this, _n4);
+      __privateAdd(this, _S, (e) => {
+        let r = __privateGet(this, _p).call(this, e), c = __privateGet(this, _r2), d = __privateGet(this, _n4);
         if (c.type === "idle" || c.action === null) {
-          __privateGet(this, __).call(this, r);
+          __privateGet(this, _y).call(this, r);
           return;
         }
         if (c.type === "lasso" && c.action.type === "drawing") {
-          c.points.push(clampToAxes(r, d)), __privateGet(this, _u).call(this);
+          c.points.push(clampToAxes(r, d)), __privateGet(this, _f2).call(this);
           return;
         }
         if (c.type === "box" && c.action.type === "drawing") {
           let e2 = clampToAxes(r, d);
-          c.end = e2, __privateGet(this, _u).call(this), d.debounce || __privateGet(this, _f2).call(this, c.start, e2);
+          c.end = e2, __privateGet(this, _f2).call(this), d.debounce || __privateGet(this, _m).call(this, c.start, e2);
           return;
         }
         if (c.type === "box" && c.action.type === "resizing") {
@@ -56627,7 +56627,7 @@ ${c}
           c.start = f, c.end = {
             x: h ?? e2.x,
             y: _ ?? e2.y
-          }, __privateGet(this, _u).call(this), d.debounce || __privateGet(this, _f2).call(this, c.start, c.end);
+          }, __privateGet(this, _f2).call(this), d.debounce || __privateGet(this, _m).call(this, c.start, c.end);
           return;
         }
         if (c.type === "box" && c.action.type === "dragging") {
@@ -56640,7 +56640,7 @@ ${c}
           }, c.end = {
             x: c.end.x + v,
             y: c.end.y + y
-          }, __privateGet(this, _u).call(this), d.debounce || __privateGet(this, _f2).call(this, c.start, c.end);
+          }, __privateGet(this, _f2).call(this), d.debounce || __privateGet(this, _m).call(this, c.start, c.end);
           return;
         }
         if (c.type === "lasso" && c.action.type === "dragging") {
@@ -56653,68 +56653,72 @@ ${c}
             x: c.points[e3].x + v,
             y: c.points[e3].y + y
           };
-          __privateGet(this, _u).call(this), d.debounce || __privateGet(this, _p).call(this, c.points);
+          __privateGet(this, _f2).call(this), d.debounce || __privateGet(this, _h).call(this, c.points);
         }
       });
-      __privateAdd(this, _x, (e) => {
+      __privateAdd(this, _C, (e) => {
         var _a3, _b3;
         __privateGet(this, _e8).releasePointerCapture(e.pointerId);
         let r = __privateGet(this, _r2), c = __privateGet(this, _n4);
         if (r.type === "lasso" && ((_a3 = r.action) == null ? void 0 : _a3.type) === "drawing") {
-          r.points.length >= 3 ? (r.action = null, __privateGet(this, _p).call(this, r.points)) : (__privateSet(this, _r2, {
+          r.points.length >= 3 ? (r.action = null, __privateGet(this, _h).call(this, r.points)) : (__privateSet(this, _r2, {
             type: "idle"
           }), __privateGet(this, _n4).setValue({
             has_selection: false
-          })), __privateGet(this, _u).call(this);
+          })), __privateGet(this, _f2).call(this);
           return;
         }
         if (r.type === "lasso" && ((_b3 = r.action) == null ? void 0 : _b3.type) === "dragging") {
-          r.action = null, c.debounce && __privateGet(this, _p).call(this, r.points);
+          r.action = null, c.debounce && __privateGet(this, _h).call(this, r.points);
           return;
         }
-        r.type === "box" && r.action !== null && (r.action = null, c.debounce && __privateGet(this, _f2).call(this, r.start, r.end));
+        r.type === "box" && r.action !== null && (r.action = null, c.debounce && __privateGet(this, _m).call(this, r.start, r.end));
       });
-      __privateAdd(this, _S, (e) => {
+      __privateAdd(this, _w, (e) => {
         var _a3;
         if (e.key === "Escape") {
           let e2 = __privateGet(this, _r2);
           if (e2.type === "idle") return;
           ((_a3 = e2.action) == null ? void 0 : _a3.type) === "drawing" ? (__privateSet(this, _r2, {
             type: "idle"
-          }), __privateGet(this, _u).call(this)) : __privateGet(this, _m).call(this);
+          }), __privateGet(this, _f2).call(this)) : __privateGet(this, _g2).call(this);
         }
       });
       __privateSet(this, _t5, e), __privateSet(this, _n4, r.state), e.tabIndex = -1, e.role = "application", e.className = "relative inline-block select-none outline-none";
       let c = document.createElement("canvas");
-      c.className = "block cursor-crosshair";
-      let d = globalThis.devicePixelRatio ?? 1;
-      c.width = __privateGet(this, _n4).width * d, c.height = __privateGet(this, _n4).height * d, c.style.width = `${__privateGet(this, _n4).width}px`, c.style.maxWidth = "100%", c.style.height = "auto", c.style.aspectRatio = `${__privateGet(this, _n4).width} / ${__privateGet(this, _n4).height}`, c.style.touchAction = "none", e.append(c), __privateSet(this, _e8, c), c.addEventListener("pointerdown", __privateGet(this, _y), {
+      c.className = "block cursor-crosshair", __privateMethod(this, _MatplotlibRenderer_instances, c_fn).call(this, c), c.style.touchAction = "none", e.append(c), __privateSet(this, _e8, c), c.addEventListener("pointerdown", __privateGet(this, _x), {
         signal: r.signal
-      }), c.addEventListener("pointermove", __privateGet(this, _b2), {
+      }), c.addEventListener("pointermove", __privateGet(this, _S), {
         signal: r.signal
-      }), c.addEventListener("pointerup", __privateGet(this, _x), {
+      }), c.addEventListener("pointerup", __privateGet(this, _C), {
         signal: r.signal
-      }), e.addEventListener("keydown", __privateGet(this, _S), {
+      }), e.addEventListener("keydown", __privateGet(this, _w), {
         signal: r.signal
-      }), r.signal.addEventListener("abort", () => {
+      }), __privateMethod(this, _MatplotlibRenderer_instances, l_fn).call(this, r.signal), r.signal.addEventListener("abort", () => {
         cancelAnimationFrame(__privateGet(this, _i2)), __privateGet(this, _e8).remove();
-      }), __privateMethod(this, _MatplotlibRenderer_instances, c_fn).call(this, __privateGet(this, _n4).chartBase64), __privateGet(this, _v).call(this, __privateGet(this, _n4).value);
+      }), __privateMethod(this, _MatplotlibRenderer_instances, u_fn).call(this, __privateGet(this, _n4).chartBase64), __privateGet(this, _b2).call(this, __privateGet(this, _n4).value);
     }
     update(e) {
       let r = __privateGet(this, _n4);
       __privateSet(this, _n4, e);
       let c = false;
-      if (e.width !== r.width || e.height !== r.height) {
-        let r2 = globalThis.devicePixelRatio ?? 1;
-        __privateGet(this, _e8).width = e.width * r2, __privateGet(this, _e8).height = e.height * r2, __privateGet(this, _e8).style.width = `${e.width}px`, __privateGet(this, _e8).style.maxWidth = "100%", __privateGet(this, _e8).style.height = "auto", __privateGet(this, _e8).style.aspectRatio = `${e.width} / ${e.height}`, c = true;
-      }
-      if (e.chartBase64 !== __privateGet(this, _s)) {
-        __privateMethod(this, _MatplotlibRenderer_instances, c_fn).call(this, e.chartBase64);
+      if ((e.width !== r.width || e.height !== r.height) && (__privateMethod(this, _MatplotlibRenderer_instances, c_fn).call(this), c = true), e.chartBase64 !== __privateGet(this, _s)) {
+        __privateMethod(this, _MatplotlibRenderer_instances, u_fn).call(this, e.chartBase64);
         return;
       }
-      (c || e.selectionColor !== r.selectionColor || e.selectionOpacity !== r.selectionOpacity || e.strokeWidth !== r.strokeWidth) && __privateGet(this, _l).call(this);
+      (c || e.selectionColor !== r.selectionColor || e.selectionOpacity !== r.selectionOpacity || e.strokeWidth !== r.strokeWidth) && __privateGet(this, _d2).call(this);
     }
-  }, _e8 = new WeakMap(), _t5 = new WeakMap(), _n4 = new WeakMap(), _r2 = new WeakMap(), _i2 = new WeakMap(), _a2 = new WeakMap(), _o2 = new WeakMap(), _s = new WeakMap(), _MatplotlibRenderer_instances = new WeakSet(), c_fn = function(e) {
+  }, _e8 = new WeakMap(), _t5 = new WeakMap(), _n4 = new WeakMap(), _r2 = new WeakMap(), _i2 = new WeakMap(), _a2 = new WeakMap(), _o2 = new WeakMap(), _s = new WeakMap(), _MatplotlibRenderer_instances = new WeakSet(), c_fn = function(e = __privateGet(this, _e8)) {
+    let r = globalThis.devicePixelRatio ?? 1, { width: c, height: d } = __privateGet(this, _n4);
+    e.width = c * r, e.height = d * r, e.style.width = `${c}px`, e.style.maxWidth = "100%", e.style.height = "auto", e.style.aspectRatio = `${c} / ${d}`;
+  }, l_fn = function(e) {
+    e.aborted || matchMedia(`(resolution: ${globalThis.devicePixelRatio ?? 1}dppx)`).addEventListener("change", () => {
+      __privateMethod(this, _MatplotlibRenderer_instances, c_fn).call(this), __privateGet(this, _d2).call(this), __privateMethod(this, _MatplotlibRenderer_instances, l_fn).call(this, e);
+    }, {
+      once: true,
+      signal: e
+    });
+  }, u_fn = function(e) {
     __privateSet(this, _s, e), __privateWrapper(this, _o2)._++;
     let r = __privateGet(this, _o2);
     __privateSet(this, _r2, {
@@ -56727,9 +56731,9 @@ ${c}
     }
     let d = new Image();
     d.onload = () => {
-      r === __privateGet(this, _o2) && (__privateSet(this, _a2, d), __privateGet(this, _l).call(this));
+      r === __privateGet(this, _o2) && (__privateSet(this, _a2, d), __privateGet(this, _d2).call(this));
     }, d.src = e;
-  }, _l = new WeakMap(), _u = new WeakMap(), _d2 = new WeakMap(), _f2 = new WeakMap(), _p = new WeakMap(), _m = new WeakMap(), _h = new WeakMap(), _g2 = new WeakMap(), __ = new WeakMap(), _v = new WeakMap(), _y = new WeakMap(), _b2 = new WeakMap(), _x = new WeakMap(), _S = new WeakMap(), _h2), import_compiler_runtime$37 = require_compiler_runtime(), MatplotlibPlugin = class {
+  }, _d2 = new WeakMap(), _f2 = new WeakMap(), _p = new WeakMap(), _m = new WeakMap(), _h = new WeakMap(), _g2 = new WeakMap(), __ = new WeakMap(), _v = new WeakMap(), _y = new WeakMap(), _b2 = new WeakMap(), _x = new WeakMap(), _S = new WeakMap(), _C = new WeakMap(), _w = new WeakMap(), _h2), import_compiler_runtime$37 = require_compiler_runtime(), MatplotlibPlugin = class {
     constructor() {
       __publicField(this, "tagName", "marimo-matplotlib");
       __publicField(this, "validator", object({
@@ -68727,7 +68731,7 @@ ${c}
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.1-dev8"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.1-dev9"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var VIRTUAL_FILE_REGEX = /\/@file\/([^\s"&'/]+)\.([\dA-Za-z]+)/g, VirtualFileTracker = class e {
     constructor() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.23.1-dev8",
+  "version": "0.23.1-dev9",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

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

@@ -297,13 +297,7 @@ export class MatplotlibRenderer {
     // Create canvas
     const canvas = document.createElement("canvas");
     canvas.className = "block cursor-crosshair";
-    const dpr = globalThis.devicePixelRatio ?? 1;
-    canvas.width = this.#state.width * dpr;
-    canvas.height = this.#state.height * dpr;
-    canvas.style.width = `${this.#state.width}px`;
-    canvas.style.maxWidth = "100%";
-    canvas.style.height = "auto";
-    canvas.style.aspectRatio = `${this.#state.width} / ${this.#state.height}`;
+    this.#syncCanvasSize(canvas);
     canvas.style.touchAction = "none";
     container.append(canvas);
     this.#canvas = canvas;
@@ -322,6 +316,10 @@ export class MatplotlibRenderer {
       signal: options.signal,
     });
 
+    // Watch for devicePixelRatio changes (e.g. browser zoom, moving between
+    // displays). matchMedia fires exactly once per DPR transition.
+    this.#watchDevicePixelRatio(options.signal);
+
     // Clean up on abort
     options.signal.addEventListener("abort", () => {
       cancelAnimationFrame(this.#rafId);
@@ -333,6 +331,38 @@ export class MatplotlibRenderer {
     this.#restoreSelection(this.#state.value);
   }
 
+  /** Set the canvas buffer + CSS size to match current logical size and DPR. */
+  #syncCanvasSize(canvas: HTMLCanvasElement = this.#canvas): void {
+    const dpr = globalThis.devicePixelRatio ?? 1;
+    const { width, height } = this.#state;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    canvas.style.width = `${width}px`;
+    canvas.style.maxWidth = "100%";
+    canvas.style.height = "auto";
+    canvas.style.aspectRatio = `${width} / ${height}`;
+  }
+
+  /**
+   * Observe devicePixelRatio changes via matchMedia. Each listener fires once
+   * per transition, so we re-register after every change.
+   */
+  #watchDevicePixelRatio(signal: AbortSignal): void {
+    if (signal.aborted) {
+      return;
+    }
+    const mq = matchMedia(
+      `(resolution: ${globalThis.devicePixelRatio ?? 1}dppx)`,
+    );
+    const onChange = () => {
+      this.#syncCanvasSize();
+      this.#drawCanvas();
+      // Re-register for the next DPR transition
+      this.#watchDevicePixelRatio(signal);
+    };
+    mq.addEventListener("change", onChange, { once: true, signal });
+  }
+
   update(state: MatplotlibState): void {
     const prev = this.#state;
     this.#state = state;
@@ -341,13 +371,7 @@ export class MatplotlibRenderer {
 
     // Update canvas dimensions if changed
     if (state.width !== prev.width || state.height !== prev.height) {
-      const dpr = globalThis.devicePixelRatio ?? 1;
-      this.#canvas.width = state.width * dpr;
-      this.#canvas.height = state.height * dpr;
-      this.#canvas.style.width = `${state.width}px`;
-      this.#canvas.style.maxWidth = "100%";
-      this.#canvas.style.height = "auto";
-      this.#canvas.style.aspectRatio = `${state.width} / ${state.height}`;
+      this.#syncCanvasSize();
       needsRedraw = true;
     }