@marimo-team/islands 0.24.1-dev30 → 0.24.1-dev32

package/dist/{common-Cy9zypnG.js → common-nFz87Uyp.js}

@@ -36337,7 +36337,7 @@ ${d}`,
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.24.1-dev30");
+  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.24.1-dev32");
   showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime = require_compiler_runtime();

package/dist/main.js

@@ -26,7 +26,7 @@ import { $ as notebookOutline, $t as isUninstantiated, A as ChevronDownIcon, An
 import { __tla as __tla_1 } from "./chunk-5FQGJX7Z-BRZ_XYUw.js";
 import { o as useSize, s as Root$1, u as createLucideIcon } from "./dist-j30bBjjN.js";
 import { A as SquareFunction, C as DEFAULT_COLOR_SCHEME, D as SCALE_TYPE_DESCRIPTIONS, E as EMPTY_VALUE$1, O as TIME_UNIT_DESCRIPTIONS, S as DEFAULT_AGGREGATION, T as DEFAULT_TIME_UNIT, _ as AGGREGATION_TYPE_DESCRIPTIONS, a as AGGREGATION_FNS, b as COLOR_SCHEMES, c as COLOR_BY_FIELDS, d as NONE_VALUE, f as SELECTABLE_DATA_TYPES, g as TIME_UNITS, h as STRING_AGGREGATION_FNS, i as convertDataTypeToSelectable, j as ChartColumn, k as escapeFieldName, l as COMBINED_TIME_UNITS, m as SORT_TYPES, n as createSpecWithoutData, o as BIN_AGGREGATION, p as SINGLE_TIME_UNITS, r as isFieldSet, s as CHART_TYPES, t as augmentSpecWithData, u as ChartType, v as AGGREGATION_TYPE_ICON, w as DEFAULT_MAX_BINS_FACET, x as COUNT_FIELD, y as CHART_TYPE_ICON } from "./spec-DR1CyTOo.js";
-import { $ as CommandSeparator, $t as Kbd, A as ErrorState, At as getPageIndexForRow, B as ContextMenuTrigger, Bt as dateToLocalISODate, C as downloadHTMLAsImage, Ct as inferFieldTypes, D as ColumnName, Dt as DelayMount, E as downloadSizeLimitAtom, Et as ColumnChartSpecModel, F as getUserColumnVisibilityCounts, Ft as TOO_MANY_ROWS, G as DateRangePicker, Gt as TabsList, H as useSelectList, Ht as dateToLocalISOTime, I as ContextMenu, It as toFieldTypes, J as Command, Jt as ChartInfoState, K as Combobox, Kt as TabsTrigger, L as ContextMenuContent, Lt as getMimeValues, M as prettifyRowColumnCount, Mt as loadTableData, N as prettifyRowCount, Nt as INDEX_COLUMN_NAME, O as ColumnPreviewContainer, Ot as useIntersectionObserver, P as getColumnCountForDisplay, Pt as SELECT_COLUMN_ID, Q as CommandList, Qt as RenderTextWithLinks, R as ContextMenuItem, Rt as isNullishFilter, S as downloadExportedFile, St as generateColumns, T as Filenames, Tt as ColumnChartContext, U as CompactChipRow, Ut as Tabs, V as useInternalStateWithSync, Vt as dateToLocalISODateTime, W as DatePicker, Wt as TabsContent, X as CommandInput, Xt as LazyVegaEmbed, Y as CommandEmpty, Yt as ChartLoadingState, Z as CommandItem, Zt as useOverflowDetection, _ as DataTable, _n as ChevronLeft, _t as TableCell, an as TextWrap, at as contextAwarePanelType, b as downloadBlob, bt as TableRow, c as SLIDE_TYPE_OPTIONS_BY_VALUE, cn as EyeOff, ct as slotsController, d as Switch, dn as Download, en as HtmlOutput, et as smartMatch, f as RadioGroup, fn as Code, g as OutputRenderer, gn as ChevronsDownUp, gt as TableBody, h as OutputArea, hn as ChevronsLeft, ht as Table, i as showCodeInRunModeAtom, in as $fae977aafc393c5c$export$6b862160d295c8e, it as contextAwarePanelOwner, j as LoadingState, jt as loadTableAndRawData, k as EmptyState, kt as usePrevious$1, lt as Toggle, m as JsonOutput, mn as ChevronsRight, mt as Provider$1, n as useNotebookCodeAvailable, nn as safeLocale, nt as PANEL_TYPES, on as GripHorizontal, ot as isCellAwareAtom, p as RadioGroupItem, pn as ChevronsUpDown, pt as Fill, q as ComboboxItem, qt as ChartErrorState, r as marimoVersionAtom, rn as $fae977aafc393c5c$export$588937bcd60ade55, rt as contextAwarePanelOpen, sn as Funnel, st as SlotNames, t as cellDomProps, tn as EmotionCacheProvider, tt as ContextAwarePanelItem, u as Slide, un as Ellipsis, v as InstallPackageButton, vn as ArrowDownWideNarrow, vt as TableHead, w as Progress, wt as renderCellValue, x as downloadByURL, xt as NAMELESS_COLUMN_PREFIX, y as ADD_PRINTING_CLASS, yt as TableHeader, z as ContextMenuSeparator, zt as Maps, __tla as __tla_2 } from "./common-Cy9zypnG.js";
+import { $ as CommandSeparator, $t as Kbd, A as ErrorState, At as getPageIndexForRow, B as ContextMenuTrigger, Bt as dateToLocalISODate, C as downloadHTMLAsImage, Ct as inferFieldTypes, D as ColumnName, Dt as DelayMount, E as downloadSizeLimitAtom, Et as ColumnChartSpecModel, F as getUserColumnVisibilityCounts, Ft as TOO_MANY_ROWS, G as DateRangePicker, Gt as TabsList, H as useSelectList, Ht as dateToLocalISOTime, I as ContextMenu, It as toFieldTypes, J as Command, Jt as ChartInfoState, K as Combobox, Kt as TabsTrigger, L as ContextMenuContent, Lt as getMimeValues, M as prettifyRowColumnCount, Mt as loadTableData, N as prettifyRowCount, Nt as INDEX_COLUMN_NAME, O as ColumnPreviewContainer, Ot as useIntersectionObserver, P as getColumnCountForDisplay, Pt as SELECT_COLUMN_ID, Q as CommandList, Qt as RenderTextWithLinks, R as ContextMenuItem, Rt as isNullishFilter, S as downloadExportedFile, St as generateColumns, T as Filenames, Tt as ColumnChartContext, U as CompactChipRow, Ut as Tabs, V as useInternalStateWithSync, Vt as dateToLocalISODateTime, W as DatePicker, Wt as TabsContent, X as CommandInput, Xt as LazyVegaEmbed, Y as CommandEmpty, Yt as ChartLoadingState, Z as CommandItem, Zt as useOverflowDetection, _ as DataTable, _n as ChevronLeft, _t as TableCell, an as TextWrap, at as contextAwarePanelType, b as downloadBlob, bt as TableRow, c as SLIDE_TYPE_OPTIONS_BY_VALUE, cn as EyeOff, ct as slotsController, d as Switch, dn as Download, en as HtmlOutput, et as smartMatch, f as RadioGroup, fn as Code, g as OutputRenderer, gn as ChevronsDownUp, gt as TableBody, h as OutputArea, hn as ChevronsLeft, ht as Table, i as showCodeInRunModeAtom, in as $fae977aafc393c5c$export$6b862160d295c8e, it as contextAwarePanelOwner, j as LoadingState, jt as loadTableAndRawData, k as EmptyState, kt as usePrevious$1, lt as Toggle, m as JsonOutput, mn as ChevronsRight, mt as Provider$1, n as useNotebookCodeAvailable, nn as safeLocale, nt as PANEL_TYPES, on as GripHorizontal, ot as isCellAwareAtom, p as RadioGroupItem, pn as ChevronsUpDown, pt as Fill, q as ComboboxItem, qt as ChartErrorState, r as marimoVersionAtom, rn as $fae977aafc393c5c$export$588937bcd60ade55, rt as contextAwarePanelOpen, sn as Funnel, st as SlotNames, t as cellDomProps, tn as EmotionCacheProvider, tt as ContextAwarePanelItem, u as Slide, un as Ellipsis, v as InstallPackageButton, vn as ArrowDownWideNarrow, vt as TableHead, w as Progress, wt as renderCellValue, x as downloadByURL, xt as NAMELESS_COLUMN_PREFIX, y as ADD_PRINTING_CLASS, yt as TableHeader, z as ContextMenuSeparator, zt as Maps, __tla as __tla_2 } from "./common-nFz87Uyp.js";
 import { c as Calendar, i as createReducerAndAtoms, n as useOnUnmount, o as ToggleLeft, t as useOnMount } from "./useLifecycle-Bw4wRj_O.js";
 import { t as Check } from "./check-58HHfHKy.js";
 import { A as Icon, C as logNever, D as $18f2051aff69b9bf$export$a54013f0d02a8f82, E as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7, F as createCollection, I as X, M as clamp$2, N as usePrevious$2, P as useDirection, R as ChevronDown, S as assertNever, a as SelectGroup, c as SelectSeparator, d as NativeSelect, i as SelectContent, j as Trigger$1, l as SelectTrigger, n as capitalize, o as SelectItem, r as Select, s as SelectLabel, t as Strings, u as SelectValue, w as $a916eb452884faea$export$b7a616150fdb9f44 } from "./strings-DMLVGXRo.js";
@@ -97,7 +97,7 @@ let __tla = Promise.all([
     }
   })()
 ]).then(async () => {
-  var _a, _e2, _t2, _n2, _r, _i, _e_instances, a_fn, o_fn, s_fn, _c, _b, _e3, _WidgetDefRegistry_instances, t_fn, _c2, _e4, _t3, _n3, _r2, _i2, _a2, _o2, _e_instances2, s_fn2, c_fn, _d, _e5, _t4, _n4, _r3, _i3, _a3, _o3, _s, _c3, _l, _u, _d2, _f, _p, _WidgetRuntime_instances, m_fn, h_fn, g_fn, __fn, v_fn, y_fn, b_fn, x_fn, _e6, _e7, _t5, _n5, _instances, r_fn, _f2, _e8, _t6, _n6, _r4, _i4, _a4, _o4, _s2, _MatplotlibRenderer_instances, c_fn2, l_fn, u_fn, _d3, _f3, _p2, _m, _h, _g, __, _v, _y, _b2, _x, _S, _C, _w, _g2, _h2;
+  var _a, _e2, _t2, _n2, _r, _i, _e_instances, a_fn, o_fn, s_fn, _c, _b, _e3, _WidgetDefRegistry_instances, t_fn, _c2, _e4, _t3, _n3, _r2, _i2, _a2, _o2, _e_instances2, s_fn2, c_fn, _d, _e5, _t4, _n4, _r3, _i3, _a3, _o3, _s, _c3, _l, _u, _d2, _f, _p, _WidgetRuntime_instances, m_fn, h_fn, g_fn, __fn, v_fn, y_fn, b_fn, x_fn, _e6, _e7, _t5, _n5, _instances, r_fn, _f2, _e8, _t6, _n6, _r4, _i4, _a4, _o4, _s2, _c4, _MatplotlibRenderer_instances, l_fn, u_get, _d3, f_fn, p_fn, _m, _h, _g, __, _v, _y, _b2, _x, _S, _C, _w, _T, _E, _D, _g2, _h2;
   var defaultIconDimensions = Object.freeze({
     left: 0,
     top: 0,
@@ -11500,7 +11500,7 @@ ${indent(e)}
     return r.length === 0 ? [] : r.map(([e2, r2]) => new FunctionArg(e2, r2));
   }
   function generateAltairChart(e, r) {
-    var _a5, _b3, _c4;
+    var _a5, _b3, _c5;
     let c = new FunctionCall("alt.Chart", [
       new Variable(r)
     ], true);
@@ -11524,7 +11524,7 @@ ${indent(e)}
     }
     if (e.resolve) {
       let r2 = e.resolve, l2 = {};
-      ((_b3 = r2.axis) == null ? void 0 : _b3.x) && (l2.x = new Literal(r2.axis.x)), ((_c4 = r2.axis) == null ? void 0 : _c4.y) && (l2.y = new Literal(r2.axis.y)), c = c.chain("resolve_scale", l2);
+      ((_b3 = r2.axis) == null ? void 0 : _b3.x) && (l2.x = new Literal(r2.axis.x)), ((_c5 = r2.axis) == null ? void 0 : _c5.y) && (l2.y = new Literal(r2.axis.y)), c = c.chain("resolve_scale", l2);
     }
     let l = {};
     for (let r2 of [
@@ -13942,14 +13942,14 @@ ${c}
       defaultValue: f
     }), r[1] = c, r[2] = l, r[3] = f, r[4] = p) : p = r[4], p;
   }, BinFields = (e) => {
-    var _a5, _b3, _c4, _d4;
+    var _a5, _b3, _c5, _d4;
     let r = (0, import_compiler_runtime$68.c)(10), { fieldName: c } = e, l = useFormContext(), u;
     r[0] === l.control ? u = r[1] : (u = {
       control: l.control
     }, r[0] = l.control, r[1] = u);
     let d = useWatch(u);
     if (!((_b3 = (_a5 = d[c]) == null ? void 0 : _a5.bin) == null ? void 0 : _b3.binned)) return null;
-    let f = !Number.isNaN((_d4 = (_c4 = d[c]) == null ? void 0 : _c4.bin) == null ? void 0 : _d4.step), p = `${c}.bin.step`, m;
+    let f = !Number.isNaN((_d4 = (_c5 = d[c]) == null ? void 0 : _c5.bin) == null ? void 0 : _d4.step), p = `${c}.bin.step`, m;
     r[2] === p ? m = r[3] : (m = (0, import_jsx_runtime.jsx)(NumberField$1, {
       fieldName: p,
       label: "Bin step",
@@ -14164,7 +14164,7 @@ ${c}
     }), r[7] = c, r[8] = f, r[9] = p) : p = r[9], p;
   };
   const XAxis = () => {
-    var _a5, _b3, _c4, _d4, _e9, _f4, _g3;
+    var _a5, _b3, _c5, _d4, _e9, _f3, _g3;
     let e = (0, import_compiler_runtime$67.c)(22), r = useFormContext(), c;
     e[0] === r.control ? c = e[1] : (c = {
       control: r.control
@@ -14194,7 +14194,7 @@ ${c}
       label: "Time Resolution"
     }), e[11] = d, e[12] = v);
     let y;
-    e[13] !== m || e[14] !== ((_c4 = (_b3 = l.general) == null ? void 0 : _b3.xColumn) == null ? void 0 : _c4.sort) || e[15] !== d ? (y = isNonCountField(d) && m && (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    e[13] !== m || e[14] !== ((_c5 = (_b3 = l.general) == null ? void 0 : _b3.xColumn) == null ? void 0 : _c5.sort) || e[15] !== d ? (y = isNonCountField(d) && m && (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
       children: [
         (0, import_jsx_runtime.jsx)(SortField, {
           fieldName: "general.xColumn.sort",
@@ -14205,7 +14205,7 @@ ${c}
           fieldName: "xAxis"
         })
       ]
-    }), e[13] = m, e[14] = (_g3 = (_f4 = l.general) == null ? void 0 : _f4.xColumn) == null ? void 0 : _g3.sort, e[15] = d, e[16] = y) : y = e[16];
+    }), e[13] = m, e[14] = (_g3 = (_f3 = l.general) == null ? void 0 : _f3.xColumn) == null ? void 0 : _g3.sort, e[15] = d, e[16] = y) : y = e[16];
     let b;
     return e[17] !== g || e[18] !== _ || e[19] !== v || e[20] !== y ? (b = (0, import_jsx_runtime.jsxs)(FieldSection, {
       children: [
@@ -14217,14 +14217,14 @@ ${c}
       ]
     }), e[17] = g, e[18] = _, e[19] = v, e[20] = y, e[21] = b) : b = e[21], b;
   }, YAxis = () => {
-    var _a5, _b3, _c4;
+    var _a5, _b3, _c5;
     let e = (0, import_compiler_runtime$67.c)(29), r = useFormContext(), c;
     e[0] === r.control ? c = e[1] : (c = {
       control: r.control
     }, e[0] = r.control, e[1] = c);
     let l = useWatch(c), u = useChartFormContext(), d = (_a5 = l.general) == null ? void 0 : _a5.yColumn, f = d == null ? void 0 : d.field, p;
     e[2] === f ? p = e[3] : (p = isFieldSet(f), e[2] = f, e[3] = p);
-    let m = p, h = (_c4 = (_b3 = l.general) == null ? void 0 : _b3.xColumn) == null ? void 0 : _c4.field, g;
+    let m = p, h = (_c5 = (_b3 = l.general) == null ? void 0 : _b3.xColumn) == null ? void 0 : _c5.field, g;
     e[4] === h ? g = e[5] : (g = isFieldSet(h), e[4] = h, e[5] = g);
     let _ = g, v;
     e[6] === d ? v = e[7] : (v = getColumnDataTypes(d), e[6] = d, e[7] = v);
@@ -14656,14 +14656,14 @@ ${c}
   }
   var import_compiler_runtime$65 = require_compiler_runtime();
   const HeatmapForm = () => {
-    var _a5, _b3, _c4, _d4;
+    var _a5, _b3, _c5, _d4;
     let e = (0, import_compiler_runtime$65.c)(17), r = useFormContext(), c;
     e[0] === r.control ? c = e[1] : (c = {
       control: r.control
     }, e[0] = r.control, e[1] = c);
     let l = useWatch(c), u = (_b3 = (_a5 = l.general) == null ? void 0 : _a5.xColumn) == null ? void 0 : _b3.field, d;
     e[2] === u ? d = e[3] : (d = isFieldSet(u), e[2] = u, e[3] = d);
-    let f = d, p = (_d4 = (_c4 = l.general) == null ? void 0 : _c4.yColumn) == null ? void 0 : _d4.field, m;
+    let f = d, p = (_d4 = (_c5 = l.general) == null ? void 0 : _c5.yColumn) == null ? void 0 : _d4.field, m;
     e[4] === p ? m = e[5] : (m = isFieldSet(p), e[4] = p, e[5] = m);
     let h = m, g;
     e[6] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = (0, import_jsx_runtime.jsx)(XAxis, {}), e[6] = g) : g = e[6];
@@ -14702,12 +14702,12 @@ ${c}
   };
   var import_compiler_runtime$64 = require_compiler_runtime();
   const PieForm = () => {
-    var _a5, _b3, _c4;
+    var _a5, _b3, _c5;
     let e = (0, import_compiler_runtime$64.c)(25), r = useFormContext(), { fields: c } = useChartFormContext(), l;
     e[0] === r.control ? l = e[1] : (l = {
       control: r.control
     }, e[0] = r.control, e[1] = l);
-    let u = useWatch(l), d = (_a5 = u.general) == null ? void 0 : _a5.colorByColumn, f = (_c4 = (_b3 = u.general) == null ? void 0 : _b3.yColumn) == null ? void 0 : _c4.selectedDataType;
+    let u = useWatch(l), d = (_a5 = u.general) == null ? void 0 : _a5.colorByColumn, f = (_c5 = (_b3 = u.general) == null ? void 0 : _b3.yColumn) == null ? void 0 : _c5.selectedDataType;
     (f === "" || !f) && (f = "string");
     let p;
     e[2] === d ? p = e[3] : (p = (d == null ? void 0 : d.type) ? convertDataTypeToSelectable(d.type) : "string", e[2] = d, e[3] = p);
@@ -26245,13 +26245,17 @@ ${c}
       __privateAdd(this, _a4, null);
       __privateAdd(this, _o4, 0);
       __privateAdd(this, _s2, "");
+      __privateAdd(this, _c4, 1);
       __privateAdd(this, _d3, () => {
+        (globalThis.devicePixelRatio ?? 1) !== __privateGet(this, _c4) && (__privateMethod(this, _MatplotlibRenderer_instances, l_fn).call(this), __privateGet(this, _h).call(this));
+      });
+      __privateAdd(this, _m, () => {
         let e = __privateGet(this, _a4);
         if (!e) return;
         let r = __privateGet(this, _e8).getContext("2d");
         if (!r) return;
-        let c = __privateGet(this, _n6), l = __privateGet(this, _r4), u = globalThis.devicePixelRatio ?? 1;
-        if (r.setTransform(u, 0, 0, u, 0, 0), r.clearRect(0, 0, c.width, c.height), r.drawImage(e, 0, 0, c.width, c.height), l.type === "box") {
+        let c = __privateGet(this, _n6), l = __privateGet(this, _r4), u = __privateGet(this, _MatplotlibRenderer_instances, u_get);
+        if (r.setTransform(u.x, 0, 0, u.y, 0, 0), r.clearRect(0, 0, c.width, c.height), r.drawImage(e, 0, 0, c.width, c.height), l.type === "box") {
           let e2 = Math.min(l.start.x, l.end.x), u2 = Math.min(l.start.y, l.end.y), d = Math.abs(l.end.x - l.start.x), f = Math.abs(l.end.y - l.start.y);
           r.save(), r.fillStyle = c.selectionColor, r.globalAlpha = c.selectionOpacity, r.fillRect(e2, u2, d, f), r.restore(), r.strokeStyle = c.selectionColor, r.lineWidth = c.strokeWidth, r.strokeRect(e2, u2, d, f);
         }
@@ -26261,17 +26265,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, _f3, () => {
-        cancelAnimationFrame(__privateGet(this, _i4)), __privateSet(this, _i4, requestAnimationFrame(__privateGet(this, _d3)));
+      __privateAdd(this, _h, () => {
+        cancelAnimationFrame(__privateGet(this, _i4)), __privateSet(this, _i4, requestAnimationFrame(__privateGet(this, _m)));
       });
-      __privateAdd(this, _p2, (e) => {
+      __privateAdd(this, _g, (e) => {
         let r = __privateGet(this, _e8).getBoundingClientRect(), c = __privateGet(this, _n6).width / r.width, l = __privateGet(this, _n6).height / r.height;
         return {
           x: (e.clientX - r.left) * c,
           y: (e.clientY - r.top) * l
         };
       });
-      __privateAdd(this, _m, (e, r) => {
+      __privateAdd(this, __, (e, r) => {
         let c = pixelToData(e, __privateGet(this, _n6)), l = pixelToData(r, __privateGet(this, _n6));
         __privateGet(this, _n6).setValue({
           type: "box",
@@ -26284,7 +26288,7 @@ ${c}
           }
         });
       });
-      __privateAdd(this, _h, (e) => {
+      __privateAdd(this, _v, (e) => {
         if (e.length >= 3) {
           let r = e.map((e2) => {
             let r2 = pixelToData(e2, __privateGet(this, _n6));
@@ -26300,19 +26304,19 @@ ${c}
           });
         }
       });
-      __privateAdd(this, _g, () => {
+      __privateAdd(this, _y, () => {
         __privateSet(this, _r4, {
           type: "idle"
         }), __privateGet(this, _n6).setValue({
           has_selection: false
-        }), __privateGet(this, _f3).call(this);
+        }), __privateGet(this, _h).call(this);
       });
-      __privateAdd(this, __, () => __privateGet(this, _r4).type !== "idle");
-      __privateAdd(this, _v, (e) => {
+      __privateAdd(this, _b2, () => __privateGet(this, _r4).type !== "idle");
+      __privateAdd(this, _x, (e) => {
         let r = __privateGet(this, _r4);
         return r.type === "box" ? isPointInBox(e, r.start, r.end) : r.type === "lasso" ? pointInPolygon(e, r.points) : false;
       });
-      __privateAdd(this, _y, (e) => {
+      __privateAdd(this, _S, (e) => {
         let [r, c, l, u] = __privateGet(this, _n6).axesPixelBounds;
         if (!(e.x >= r && e.x <= l && e.y >= c && e.y <= u)) {
           __privateGet(this, _e8).style.cursor = "default";
@@ -26326,17 +26330,17 @@ ${c}
             return;
           }
         }
-        if (__privateGet(this, __).call(this) && __privateGet(this, _v).call(this, e)) {
+        if (__privateGet(this, _b2).call(this) && __privateGet(this, _x).call(this, e)) {
           __privateGet(this, _e8).style.cursor = "move";
           return;
         }
         __privateGet(this, _e8).style.cursor = "crosshair";
       });
-      __privateAdd(this, _b2, (e) => {
+      __privateAdd(this, _C, (e) => {
         if (!e || !("has_selection" in e) || !e.has_selection) {
           __privateGet(this, _r4).type !== "idle" && (__privateSet(this, _r4, {
             type: "idle"
-          }), __privateGet(this, _f3).call(this));
+          }), __privateGet(this, _h).call(this));
           return;
         }
         if (e.type === "box") {
@@ -26361,11 +26365,11 @@ ${c}
           }, __privateGet(this, _n6))),
           action: null
         });
-        __privateGet(this, _f3).call(this);
+        __privateGet(this, _h).call(this);
       });
-      __privateAdd(this, _x, (e) => {
+      __privateAdd(this, _w, (e) => {
         __privateGet(this, _e8).setPointerCapture(e.pointerId), __privateGet(this, _t6).focus();
-        let r = __privateGet(this, _p2).call(this, e), c = __privateGet(this, _r4);
+        let r = __privateGet(this, _g).call(this, e), c = __privateGet(this, _r4);
         if (e.shiftKey) {
           if (!isInAxes(r, __privateGet(this, _n6))) return;
           __privateSet(this, _r4, {
@@ -26376,7 +26380,7 @@ ${c}
             action: {
               type: "drawing"
             }
-          }), __privateGet(this, _f3).call(this);
+          }), __privateGet(this, _h).call(this);
           return;
         }
         if (c.type === "box" && c.action === null) {
@@ -26397,7 +26401,7 @@ ${c}
             return;
           }
         }
-        if (__privateGet(this, __).call(this) && __privateGet(this, _v).call(this, r)) {
+        if (__privateGet(this, _b2).call(this) && __privateGet(this, _x).call(this, r)) {
           c.type === "box" ? __privateSet(this, _r4, {
             type: "box",
             start: c.start,
@@ -26416,7 +26420,7 @@ ${c}
           });
           return;
         }
-        if (__privateGet(this, __).call(this) && __privateGet(this, _g).call(this), !isInAxes(r, __privateGet(this, _n6))) return;
+        if (__privateGet(this, _b2).call(this) && __privateGet(this, _y).call(this), !isInAxes(r, __privateGet(this, _n6))) return;
         let l = clampToAxes(r, __privateGet(this, _n6));
         __privateSet(this, _r4, {
           type: "box",
@@ -26425,21 +26429,21 @@ ${c}
           action: {
             type: "drawing"
           }
-        }), __privateGet(this, _f3).call(this);
+        }), __privateGet(this, _h).call(this);
       });
-      __privateAdd(this, _S, (e) => {
-        let r = __privateGet(this, _p2).call(this, e), c = __privateGet(this, _r4), l = __privateGet(this, _n6);
+      __privateAdd(this, _T, (e) => {
+        let r = __privateGet(this, _g).call(this, e), c = __privateGet(this, _r4), l = __privateGet(this, _n6);
         if (c.type === "idle" || c.action === null) {
-          __privateGet(this, _y).call(this, r);
+          __privateGet(this, _S).call(this, r);
           return;
         }
         if (c.type === "lasso" && c.action.type === "drawing") {
-          c.points.push(clampToAxes(r, l)), __privateGet(this, _f3).call(this);
+          c.points.push(clampToAxes(r, l)), __privateGet(this, _h).call(this);
           return;
         }
         if (c.type === "box" && c.action.type === "drawing") {
           let e2 = clampToAxes(r, l);
-          c.end = e2, __privateGet(this, _f3).call(this), l.debounce || __privateGet(this, _m).call(this, c.start, e2);
+          c.end = e2, __privateGet(this, _h).call(this), l.debounce || __privateGet(this, __).call(this, c.start, e2);
           return;
         }
         if (c.type === "box" && c.action.type === "resizing") {
@@ -26447,7 +26451,7 @@ ${c}
           c.start = u, c.end = {
             x: d ?? e2.x,
             y: f ?? e2.y
-          }, __privateGet(this, _f3).call(this), l.debounce || __privateGet(this, _m).call(this, c.start, c.end);
+          }, __privateGet(this, _h).call(this), l.debounce || __privateGet(this, __).call(this, c.start, c.end);
           return;
         }
         if (c.type === "box" && c.action.type === "dragging") {
@@ -26460,7 +26464,7 @@ ${c}
           }, c.end = {
             x: c.end.x + p,
             y: c.end.y + m
-          }, __privateGet(this, _f3).call(this), l.debounce || __privateGet(this, _m).call(this, c.start, c.end);
+          }, __privateGet(this, _h).call(this), l.debounce || __privateGet(this, __).call(this, c.start, c.end);
           return;
         }
         if (c.type === "lasso" && c.action.type === "dragging") {
@@ -26473,77 +26477,87 @@ ${c}
             x: c.points[e3].x + p,
             y: c.points[e3].y + m
           };
-          __privateGet(this, _f3).call(this), l.debounce || __privateGet(this, _h).call(this, c.points);
+          __privateGet(this, _h).call(this), l.debounce || __privateGet(this, _v).call(this, c.points);
         }
       });
-      __privateAdd(this, _C, (e) => {
+      __privateAdd(this, _E, (e) => {
         var _a5, _b3;
         __privateGet(this, _e8).releasePointerCapture(e.pointerId);
         let r = __privateGet(this, _r4), c = __privateGet(this, _n6);
         if (r.type === "lasso" && ((_a5 = r.action) == null ? void 0 : _a5.type) === "drawing") {
-          r.points.length >= 3 ? (r.action = null, __privateGet(this, _h).call(this, r.points)) : (__privateSet(this, _r4, {
+          r.points.length >= 3 ? (r.action = null, __privateGet(this, _v).call(this, r.points)) : (__privateSet(this, _r4, {
             type: "idle"
           }), __privateGet(this, _n6).setValue({
             has_selection: false
-          })), __privateGet(this, _f3).call(this);
+          })), __privateGet(this, _h).call(this);
           return;
         }
         if (r.type === "lasso" && ((_b3 = r.action) == null ? void 0 : _b3.type) === "dragging") {
-          r.action = null, c.debounce && __privateGet(this, _h).call(this, r.points);
+          r.action = null, c.debounce && __privateGet(this, _v).call(this, r.points);
           return;
         }
-        r.type === "box" && r.action !== null && (r.action = null, c.debounce && __privateGet(this, _m).call(this, r.start, r.end));
+        r.type === "box" && r.action !== null && (r.action = null, c.debounce && __privateGet(this, __).call(this, r.start, r.end));
       });
-      __privateAdd(this, _w, (e) => {
+      __privateAdd(this, _D, (e) => {
         var _a5;
         if (e.key === "Escape") {
           let e2 = __privateGet(this, _r4);
           if (e2.type === "idle") return;
           ((_a5 = e2.action) == null ? void 0 : _a5.type) === "drawing" ? (__privateSet(this, _r4, {
             type: "idle"
-          }), __privateGet(this, _f3).call(this)) : __privateGet(this, _g).call(this);
+          }), __privateGet(this, _h).call(this)) : __privateGet(this, _y).call(this);
         }
       });
       __privateSet(this, _t6, e), __privateSet(this, _n6, r.state), e.tabIndex = -1, e.role = "application", e.className = "relative inline-block select-none outline-hidden";
       let c = document.createElement("canvas");
-      c.className = "block cursor-crosshair", __privateMethod(this, _MatplotlibRenderer_instances, c_fn2).call(this, c), c.style.touchAction = "none", e.append(c), __privateSet(this, _e8, c), c.addEventListener("pointerdown", __privateGet(this, _x), {
+      c.className = "block cursor-crosshair", __privateMethod(this, _MatplotlibRenderer_instances, l_fn).call(this, c), c.style.touchAction = "none", e.append(c), __privateSet(this, _e8, c), c.addEventListener("pointerdown", __privateGet(this, _w), {
         signal: r.signal
-      }), c.addEventListener("pointermove", __privateGet(this, _S), {
+      }), c.addEventListener("pointermove", __privateGet(this, _T), {
         signal: r.signal
-      }), c.addEventListener("pointerup", __privateGet(this, _C), {
+      }), c.addEventListener("pointerup", __privateGet(this, _E), {
         signal: r.signal
-      }), e.addEventListener("keydown", __privateGet(this, _w), {
+      }), e.addEventListener("keydown", __privateGet(this, _D), {
         signal: r.signal
-      }), __privateMethod(this, _MatplotlibRenderer_instances, l_fn).call(this, r.signal), r.signal.addEventListener("abort", () => {
+      }), __privateMethod(this, _MatplotlibRenderer_instances, f_fn).call(this, r.signal), window.addEventListener("resize", __privateGet(this, _d3), {
+        signal: r.signal
+      }), r.signal.addEventListener("abort", () => {
         cancelAnimationFrame(__privateGet(this, _i4)), __privateGet(this, _e8).remove();
-      }), __privateMethod(this, _MatplotlibRenderer_instances, u_fn).call(this, __privateGet(this, _n6).chartBase64), __privateGet(this, _b2).call(this, __privateGet(this, _n6).value);
+      }), __privateMethod(this, _MatplotlibRenderer_instances, p_fn).call(this, __privateGet(this, _n6).chartBase64), __privateGet(this, _C).call(this, __privateGet(this, _n6).value);
     }
     update(e) {
       let r = __privateGet(this, _n6);
       __privateSet(this, _n6, e);
       let c = false;
-      if ((e.width !== r.width || e.height !== r.height) && (__privateMethod(this, _MatplotlibRenderer_instances, c_fn2).call(this), c = true), e.chartBase64 !== __privateGet(this, _s2)) {
-        __privateMethod(this, _MatplotlibRenderer_instances, u_fn).call(this, e.chartBase64), __privateGet(this, _b2).call(this, e.value);
+      if ((e.width !== r.width || e.height !== r.height) && (__privateMethod(this, _MatplotlibRenderer_instances, l_fn).call(this), c = true), e.chartBase64 !== __privateGet(this, _s2)) {
+        __privateMethod(this, _MatplotlibRenderer_instances, p_fn).call(this, e.chartBase64), __privateGet(this, _C).call(this, e.value);
         return;
       }
       let l = __privateGet(this, _r4).type !== "idle" && __privateGet(this, _r4).action !== null;
       if (e.value !== r.value && !l) {
-        __privateGet(this, _b2).call(this, e.value);
+        __privateGet(this, _C).call(this, e.value);
         return;
       }
-      (c || e.selectionColor !== r.selectionColor || e.selectionOpacity !== r.selectionOpacity || e.strokeWidth !== r.strokeWidth) && __privateGet(this, _d3).call(this);
+      (c || e.selectionColor !== r.selectionColor || e.selectionOpacity !== r.selectionOpacity || e.strokeWidth !== r.strokeWidth) && __privateGet(this, _m).call(this);
     }
-  }, _e8 = new WeakMap(), _t6 = new WeakMap(), _n6 = new WeakMap(), _r4 = new WeakMap(), _i4 = new WeakMap(), _a4 = new WeakMap(), _o4 = new WeakMap(), _s2 = new WeakMap(), _MatplotlibRenderer_instances = new WeakSet(), c_fn2 = function(e = __privateGet(this, _e8)) {
-    let r = globalThis.devicePixelRatio ?? 1, { width: c, height: l } = __privateGet(this, _n6);
+  }, _e8 = new WeakMap(), _t6 = new WeakMap(), _n6 = new WeakMap(), _r4 = new WeakMap(), _i4 = new WeakMap(), _a4 = new WeakMap(), _o4 = new WeakMap(), _s2 = new WeakMap(), _c4 = new WeakMap(), _MatplotlibRenderer_instances = new WeakSet(), l_fn = function(e = __privateGet(this, _e8)) {
+    let r = globalThis.devicePixelRatio ?? 1;
+    __privateSet(this, _c4, r);
+    let { width: c, height: l } = __privateGet(this, _n6);
     e.width = c * r, e.height = l * r, e.style.width = `${c}px`, e.style.maxWidth = "100%", e.style.height = "auto", e.style.aspectRatio = `${c} / ${l}`;
-  }, l_fn = function(e) {
+  }, u_get = function() {
+    let { width: e, height: r } = __privateGet(this, _n6), c = globalThis.devicePixelRatio ?? 1;
+    return {
+      x: e > 0 ? __privateGet(this, _e8).width / e : c,
+      y: r > 0 ? __privateGet(this, _e8).height / r : c
+    };
+  }, _d3 = new WeakMap(), f_fn = function(e) {
     e.aborted || matchMedia(`(resolution: ${globalThis.devicePixelRatio ?? 1}dppx)`).addEventListener("change", () => {
-      __privateMethod(this, _MatplotlibRenderer_instances, c_fn2).call(this), __privateGet(this, _d3).call(this), __privateMethod(this, _MatplotlibRenderer_instances, l_fn).call(this, e);
+      __privateGet(this, _d3).call(this), __privateMethod(this, _MatplotlibRenderer_instances, f_fn).call(this, e);
     }, {
       once: true,
       signal: e
     });
-  }, u_fn = function(e) {
+  }, p_fn = function(e) {
     __privateSet(this, _s2, e), __privateWrapper(this, _o4)._++;
     let r = __privateGet(this, _o4);
     __privateSet(this, _r4, {
@@ -26551,14 +26565,14 @@ ${c}
     }), __privateSet(this, _a4, null);
     let c = __privateGet(this, _e8).getContext("2d");
     if (c) {
-      let e2 = globalThis.devicePixelRatio ?? 1;
-      c.setTransform(e2, 0, 0, e2, 0, 0), c.clearRect(0, 0, __privateGet(this, _n6).width, __privateGet(this, _n6).height);
+      let e2 = __privateGet(this, _MatplotlibRenderer_instances, u_get);
+      c.setTransform(e2.x, 0, 0, e2.y, 0, 0), c.clearRect(0, 0, __privateGet(this, _n6).width, __privateGet(this, _n6).height);
     }
     let l = new Image();
     l.onload = () => {
-      r === __privateGet(this, _o4) && (__privateSet(this, _a4, l), __privateGet(this, _d3).call(this));
+      r === __privateGet(this, _o4) && (__privateSet(this, _a4, l), __privateGet(this, _m).call(this));
     }, l.src = e;
-  }, _d3 = new WeakMap(), _f3 = new WeakMap(), _p2 = new WeakMap(), _m = new WeakMap(), _h = new WeakMap(), _g = 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(), _g2), import_compiler_runtime$36 = require_compiler_runtime(), MatplotlibPlugin = class {
+  }, _m = new WeakMap(), _h = new WeakMap(), _g = 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(), _T = new WeakMap(), _E = new WeakMap(), _D = new WeakMap(), _g2), import_compiler_runtime$36 = require_compiler_runtime(), MatplotlibPlugin = class {
     constructor() {
       __publicField(this, "tagName", "marimo-matplotlib");
       __publicField(this, "validator", object({
@@ -31968,8 +31982,8 @@ ${c}
         }
       }
       findDOMNode() {
-        var _a5, _b3, _c4;
-        return ((_a5 = this.props) == null ? void 0 : _a5.nodeRef) ? (_c4 = (_b3 = this.props) == null ? void 0 : _b3.nodeRef) == null ? void 0 : _c4.current : l.default.findDOMNode(this);
+        var _a5, _b3, _c5;
+        return ((_a5 = this.props) == null ? void 0 : _a5.nodeRef) ? (_c5 = (_b3 = this.props) == null ? void 0 : _b3.nodeRef) == null ? void 0 : _c5.current : l.default.findDOMNode(this);
       }
       render() {
         return r.cloneElement(r.Children.only(this.props.children), {
@@ -38307,7 +38321,7 @@ ${c}
   function _temp2$2(e) {
     e.target === e.currentTarget && e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), e.currentTarget.click());
   }
-  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-2JQ2YfIT.js"));
+  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-BfdtFvyL.js"));
   const SlidesLayoutRenderer = ({ layout: e, setLayout: r, cells: c, mode: l }) => {
     var _a5;
     let u = useAtomValue(kioskModeAtom), d = l === "read" || u, f = useAtomValue(numColumnsAtom) > 1, [p, m] = (0, import_react.useState)(null), { slideCells: h, skippedIds: g, noOutputIds: _, slideTypes: v, startCellIndex: y } = (0, import_react.useMemo)(() => computeSlideCellsInfo(c, e), [
@@ -40498,13 +40512,13 @@ ${c}
       });
     }
     async startApps() {
-      var _a5, _b3, _c4, _d4;
+      var _a5, _b3, _c5, _d4;
       let e = parseMarimoIslandApps(this.root, {
         materialize: false
       }), r = e.length === 1;
       Logger.debug(`Starting sessions for ${e.length} app(s):`, e.map((e2) => `${e2.id} (${e2.cells.length} cells)`));
       let c = (_b3 = e.length === 1 && !((_a5 = e[0]) == null ? void 0 : _a5.payloadBacked) ? getMarimoExportContext() : void 0) == null ? void 0 : _b3.notebookCode, l = r ? e[0] : void 0, u = l ? c || createMarimoFile(l) : void 0;
-      if (l && ((_c4 = this.session) == null ? void 0 : _c4.appId) === l.id && this.session.code === u) {
+      if (l && ((_c5 = this.session) == null ? void 0 : _c5.appId) === l.id && this.session.code === u) {
         parseMarimoIslandApps(this.root);
         return;
       }

package/dist/{reveal-component-2JQ2YfIT.js → reveal-component-BfdtFvyL.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-DsR6imPN.js";
 import { ut as outputIsStale } from "./html-to-image-BzT-fb14.js";
 import "./chunk-5FQGJX7Z-BRZ_XYUw.js";
 import { u as createLucideIcon } from "./dist-j30bBjjN.js";
-import { a as DEFAULT_DECK_TRANSITION, cn as EyeOff, dt as PanelGroup, fn as Code, ft as PanelResizeHandle, l as SlideSidebar, ln as Expand, n as useNotebookCodeAvailable, o as DEFAULT_DECK_VERTICAL_ALIGN, s as DEFAULT_SLIDE_TYPE, t as cellDomProps, u as Slide, ut as Panel } from "./common-Cy9zypnG.js";
+import { a as DEFAULT_DECK_TRANSITION, cn as EyeOff, dt as PanelGroup, fn as Code, ft as PanelResizeHandle, l as SlideSidebar, ln as Expand, n as useNotebookCodeAvailable, o as DEFAULT_DECK_VERTICAL_ALIGN, s as DEFAULT_SLIDE_TYPE, t as cellDomProps, u as Slide, ut as Panel } from "./common-nFz87Uyp.js";
 import { R as ChevronDown } from "./strings-DMLVGXRo.js";
 import { X as useDebouncedCallback } from "./input-CqV2ZPgL.js";
 import { v as kioskModeAtom } from "./toDate-CjUYDkFI.js";

package/package.json

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

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

@@ -190,6 +190,62 @@ describe("isInAxes", () => {
   });
 });
 
+// A 100x100 chart whose axes fill the whole figure.
+function createState(): MatplotlibState {
+  return {
+    ...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(),
+  };
+}
+
+// jsdom has no matchMedia, no animation frames and no canvas context.
+function stubBrowser(ctx: Partial<CanvasRenderingContext2D> | null = null) {
+  vi.stubGlobal(
+    "matchMedia",
+    vi.fn(() => ({ addEventListener: vi.fn() })),
+  );
+  const requestAnimationFrame = vi.fn(() => 1);
+  vi.stubGlobal("requestAnimationFrame", requestAnimationFrame);
+  vi.stubGlobal("cancelAnimationFrame", vi.fn());
+  vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(
+    ctx as CanvasRenderingContext2D | null,
+  );
+  return { requestAnimationFrame };
+}
+
+// jsdom does not fetch images; resolve them synchronously instead.
+function stubSyncImage() {
+  vi.stubGlobal(
+    "Image",
+    class {
+      onload: (() => void) | null = null;
+      set src(_value: string) {
+        this.onload?.();
+      }
+    },
+  );
+}
+
+function createRecordingContext() {
+  return {
+    setTransform: vi.fn(),
+    clearRect: vi.fn(),
+    drawImage: vi.fn(),
+    save: vi.fn(),
+    restore: vi.fn(),
+  };
+}
+
 describe("MatplotlibRenderer", () => {
   afterEach(() => {
     vi.unstubAllGlobals();
@@ -197,36 +253,14 @@ describe("MatplotlibRenderer", () => {
   });
 
   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);
+    stubBrowser();
 
     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 state = createState();
     const container = document.createElement("div");
     const controller = new AbortController();
     const renderer = new MatplotlibRenderer(container, {
@@ -252,4 +286,130 @@ describe("MatplotlibRenderer", () => {
     expect(canvas.style.cursor).toBe("move");
     controller.abort();
   });
+
+  // Safari only fires resize on zoom, not the resolution query (#10625).
+  it("re-syncs the backing store on resize, without matchMedia firing", () => {
+    stubBrowser();
+    vi.stubGlobal("devicePixelRatio", 2);
+
+    const container = document.createElement("div");
+    const controller = new AbortController();
+    new MatplotlibRenderer(container, {
+      state: createState(),
+      signal: controller.signal,
+    });
+    const canvas = container.querySelector("canvas");
+    expect(canvas?.width).toBe(200);
+
+    vi.stubGlobal("devicePixelRatio", 1);
+    window.dispatchEvent(new Event("resize"));
+
+    expect(canvas?.width).toBe(100);
+    controller.abort();
+  });
+
+  // Re-sizing clears the buffer a frame before the repaint, so an over-eager
+  // guard flickers. 700 * 1.1 is the case a truncating comparison misses.
+  it("leaves the backing store alone when resize fires at an unchanged DPR", () => {
+    const { requestAnimationFrame } = stubBrowser();
+    vi.stubGlobal("devicePixelRatio", 1.1);
+
+    const container = document.createElement("div");
+    const controller = new AbortController();
+    new MatplotlibRenderer(container, {
+      state: { ...createState(), width: 700 },
+      signal: controller.signal,
+    });
+    const canvas = container.querySelector("canvas");
+    expect(canvas?.width).toBe(770);
+
+    requestAnimationFrame.mockClear();
+    window.dispatchEvent(new Event("resize"));
+
+    expect(canvas?.width).toBe(770);
+    expect(requestAnimationFrame).not.toHaveBeenCalled();
+    controller.abort();
+  });
+
+  it("draws with the backing-store scale, not the current devicePixelRatio", () => {
+    const ctx = createRecordingContext();
+    stubBrowser(ctx);
+    stubSyncImage();
+    vi.stubGlobal("devicePixelRatio", 2);
+
+    const state = createState();
+    const container = document.createElement("div");
+    const controller = new AbortController();
+    const renderer = new MatplotlibRenderer(container, {
+      state,
+      signal: controller.signal,
+    });
+    expect(container.querySelector("canvas")?.width).toBe(200);
+
+    // Zoom with nothing re-syncing the buffer: it still holds the old DPR, so
+    // the redraw must too, or the image lands scaled by dpr_new / dpr_old.
+    vi.stubGlobal("devicePixelRatio", 1);
+    ctx.setTransform.mockClear();
+    renderer.update({ ...state, strokeWidth: 4 });
+
+    expect(ctx.setTransform.mock.calls).toEqual([[2, 0, 0, 2, 0, 0]]);
+    expect(ctx.drawImage).toHaveBeenLastCalledWith(
+      expect.anything(),
+      0,
+      0,
+      100,
+      100,
+    );
+    controller.abort();
+  });
+
+  it("clears the whole backing store when a re-run swaps the chart", () => {
+    const ctx = createRecordingContext();
+    stubBrowser(ctx);
+    vi.stubGlobal("devicePixelRatio", 2);
+
+    const state = createState();
+    const container = document.createElement("div");
+    const controller = new AbortController();
+    const renderer = new MatplotlibRenderer(container, {
+      state,
+      signal: controller.signal,
+    });
+
+    vi.stubGlobal("devicePixelRatio", 1);
+    ctx.setTransform.mockClear();
+    ctx.clearRect.mockClear();
+    renderer.update({ ...state, chartBase64: "second" });
+
+    // A stale scale here would leave the outer 3/4 of the buffer unwiped.
+    expect(ctx.setTransform.mock.calls).toEqual([[2, 0, 0, 2, 0, 0]]);
+    expect(ctx.clearRect.mock.calls).toEqual([[0, 0, 100, 100]]);
+    controller.abort();
+  });
+
+  it("scales each axis by its own backing-store ratio", () => {
+    const ctx = createRecordingContext();
+    stubBrowser(ctx);
+    stubSyncImage();
+    // canvas.width/height are integers, so this truncates the two dimensions
+    // by different fractions: 150 * 1.25 -> 187 (0.5 lost), 500 * 1.25 -> 625
+    // (exact). One shared, width-derived scale would under-cover the buffer
+    // vertically and leave its bottom rows unwiped.
+    vi.stubGlobal("devicePixelRatio", 1.25);
+
+    const state = { ...createState(), width: 150, height: 500 };
+    const container = document.createElement("div");
+    const controller = new AbortController();
+    new MatplotlibRenderer(container, { state, signal: controller.signal });
+
+    const canvas = container.querySelector("canvas");
+    expect(canvas?.width).toBe(187);
+    expect(canvas?.height).toBe(625);
+    // The pre-load clear and the draw each set up their own transform.
+    const transform = [187 / 150, 0, 0, 625 / 500, 0, 0];
+    const rect = [0, 0, 150, 500];
+    expect(ctx.setTransform.mock.calls).toEqual([transform, transform]);
+    expect(ctx.clearRect.mock.calls).toEqual([rect, rect]);
+    controller.abort();
+  });
 });

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

@@ -281,6 +281,8 @@ export class MatplotlibRenderer {
   #image: HTMLImageElement | null = null;
   #imageGeneration = 0;
   #currentChartBase64 = "";
+  /** The devicePixelRatio the canvas buffer was last sized with. */
+  #backingDpr = 1;
 
   constructor(
     container: HTMLDivElement,
@@ -317,8 +319,12 @@ export class MatplotlibRenderer {
     });
 
     // Watch for devicePixelRatio changes (e.g. browser zoom, moving between
-    // displays). matchMedia fires exactly once per DPR transition.
+    // displays). matchMedia fires exactly once per DPR transition, but Safari
+    // doesn't re-evaluate the query on zoom — it only fires resize (#10625).
     this.#watchDevicePixelRatio(options.signal);
+    window.addEventListener("resize", this.#syncForDevicePixelRatio, {
+      signal: options.signal,
+    });
 
     // Clean up on abort
     options.signal.addEventListener("abort", () => {
@@ -334,6 +340,7 @@ export class MatplotlibRenderer {
   /** Set the canvas buffer + CSS size to match current logical size and DPR. */
   #syncCanvasSize(canvas: HTMLCanvasElement = this.#canvas): void {
     const dpr = globalThis.devicePixelRatio ?? 1;
+    this.#backingDpr = dpr;
     const { width, height } = this.#state;
     canvas.width = width * dpr;
     canvas.height = height * dpr;
@@ -343,6 +350,33 @@ export class MatplotlibRenderer {
     canvas.style.aspectRatio = `${width} / ${height}`;
   }
 
+  /**
+   * Scale to draw at, read back from the buffer rather than from
+   * `devicePixelRatio`, so sizing and drawing cannot disagree (#10625).
+   * Per-axis: `canvas.width`/`height` are integers, so a fractional DPR
+   * truncates each dimension by a different fraction of a device pixel.
+   */
+  get #backingScale(): { x: number; y: number } {
+    const { width, height } = this.#state;
+    const dpr = globalThis.devicePixelRatio ?? 1;
+    return {
+      x: width > 0 ? this.#canvas.width / width : dpr,
+      y: height > 0 ? this.#canvas.height / height : dpr,
+    };
+  }
+
+  /**
+   * Re-size the buffer when the DPR changed. resize fires far more often than
+   * the DPR moves, and `canvas.width` truncates, so compare ratios directly.
+   */
+  #syncForDevicePixelRatio = (): void => {
+    if ((globalThis.devicePixelRatio ?? 1) === this.#backingDpr) {
+      return;
+    }
+    this.#syncCanvasSize();
+    this.#scheduleRedraw();
+  };
+
   /**
    * Observe devicePixelRatio changes via matchMedia. Each listener fires once
    * per transition, so we re-register after every change.
@@ -355,8 +389,7 @@ export class MatplotlibRenderer {
       `(resolution: ${globalThis.devicePixelRatio ?? 1}dppx)`,
     );
     const onChange = () => {
-      this.#syncCanvasSize();
-      this.#drawCanvas();
+      this.#syncForDevicePixelRatio();
       // Re-register for the next DPR transition
       this.#watchDevicePixelRatio(signal);
     };
@@ -416,8 +449,8 @@ export class MatplotlibRenderer {
     this.#image = null;
     const ctx = this.#canvas.getContext("2d");
     if (ctx) {
-      const dpr = globalThis.devicePixelRatio ?? 1;
-      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      const scale = this.#backingScale;
+      ctx.setTransform(scale.x, 0, 0, scale.y, 0, 0);
       ctx.clearRect(0, 0, this.#state.width, this.#state.height);
     }
 
@@ -447,8 +480,8 @@ export class MatplotlibRenderer {
     const ix = this.#interaction;
 
     // Scale for HiDPI: all coordinates remain in logical pixels
-    const dpr = globalThis.devicePixelRatio ?? 1;
-    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    const scale = this.#backingScale;
+    ctx.setTransform(scale.x, 0, 0, scale.y, 0, 0);
 
     // Clear and draw the base image
     ctx.clearRect(0, 0, s.width, s.height);