@marimo-team/islands 0.23.15-dev24 → 0.23.15-dev26

package/dist/{ImageComparisonComponent-CHrI72em.js → ImageComparisonComponent-1i5IBhon.js}

@@ -5,100 +5,100 @@ import { t as require_jsx_runtime } from "./jsx-runtime-DebpN0FN.js";
 var require_dist$1 = /* @__PURE__ */ __commonJSMin((() => {
   (() => {
     var e = {
-      792: (e2, t2, n2) => {
-        n2.d(t2, { Z: () => a });
-        var r = n2(609), i = n2.n(r)()((function(e3) {
+      792: (e2, i2, a2) => {
+        a2.d(i2, { Z: () => c });
+        var o = a2(609), s = a2.n(o)()((function(e3) {
           return e3[1];
         }));
-        i.push([
+        s.push([
           e2.id,
           ':host{--divider-width: 1px;--divider-color: #fff;--divider-shadow: none;--default-handle-width: 50px;--default-handle-color: #fff;--default-handle-opacity: 1;--default-handle-shadow: none;--handle-position-start: 50%;position:relative;display:inline-block;overflow:hidden;line-height:0;direction:ltr}@media screen and (-webkit-min-device-pixel-ratio: 0)and (min-resolution: 0.001dpcm){:host{outline-offset:1px}}:host(:focus){outline:2px solid -webkit-focus-ring-color}::slotted(*){-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.first{position:absolute;left:0;top:0;right:0;line-height:normal;font-size:100%;max-height:100%;height:100%;width:100%;--exposure: 50%;--keyboard-transition-time: 0ms;--default-transition-time: 0ms;--transition-time: var(--default-transition-time)}.first .first-overlay-container{position:relative;clip-path:inset(0 var(--exposure) 0 0);transition:clip-path var(--transition-time);height:100%}.first .first-overlay{overflow:hidden;height:100%}.first.focused{will-change:clip-path}.first.focused .first-overlay-container{will-change:clip-path}.second{position:relative}.handle-container{transform:translateX(50%);position:absolute;top:0;right:var(--exposure);height:100%;transition:right var(--transition-time),bottom var(--transition-time)}.focused .handle-container{will-change:right}.divider{position:absolute;height:100%;width:100%;left:0;top:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.divider:after{content:" ";display:block;height:100%;border-left-width:var(--divider-width);border-left-style:solid;border-left-color:var(--divider-color);box-shadow:var(--divider-shadow)}.handle{position:absolute;top:var(--handle-position-start);pointer-events:none;box-sizing:border-box;margin-left:1px;transform:translate(calc(-50% - 0.5px), -50%);line-height:0}.default-handle{width:var(--default-handle-width);opacity:var(--default-handle-opacity);transition:all 1s;filter:drop-shadow(var(--default-handle-shadow))}.default-handle path{stroke:var(--default-handle-color)}.vertical .first-overlay-container{clip-path:inset(0 0 var(--exposure) 0)}.vertical .handle-container{transform:translateY(50%);height:auto;top:unset;bottom:var(--exposure);width:100%;left:0;flex-direction:row}.vertical .divider:after{height:1px;width:100%;border-top-width:var(--divider-width);border-top-style:solid;border-top-color:var(--divider-color);border-left:0}.vertical .handle{top:auto;left:var(--handle-position-start);transform:translate(calc(-50% - 0.5px), -50%) rotate(90deg)}',
           ""
         ]);
-        let a = i;
+        let c = s;
       },
       609: (e2) => {
         e2.exports = function(e3) {
-          var t2 = [];
-          return t2.toString = function() {
-            return this.map((function(t3) {
-              var n2 = e3(t3);
-              return t3[2] ? `@media ${t3[2]} {${n2}}` : n2;
+          var i2 = [];
+          return i2.toString = function() {
+            return this.map((function(i3) {
+              var a2 = e3(i3);
+              return i3[2] ? `@media ${i3[2]} {${a2}}` : a2;
             })).join("");
-          }, t2.i = function(e4, n2, r) {
+          }, i2.i = function(e4, a2, o) {
             typeof e4 == "string" && (e4 = [[
               null,
               e4,
               ""
             ]]);
-            var i = {};
-            if (r) for (var a = 0; a < this.length; a++) {
-              var o = this[a][0];
-              o != null && (i[o] = true);
+            var s = {};
+            if (o) for (var c = 0; c < this.length; c++) {
+              var l = this[c][0];
+              l != null && (s[l] = true);
             }
-            for (var s = 0; s < e4.length; s++) {
-              var c = [].concat(e4[s]);
-              r && i[c[0]] || (n2 && (c[2] ? c[2] = `${n2} and ${c[2]}` : c[2] = n2), t2.push(c));
+            for (var u = 0; u < e4.length; u++) {
+              var d = [].concat(e4[u]);
+              o && s[d[0]] || (a2 && (d[2] ? d[2] = `${a2} and ${d[2]}` : d[2] = a2), i2.push(d));
             }
-          }, t2;
+          }, i2;
         };
       }
-    }, t = {};
-    function n(r) {
-      var i = t[r];
-      if (i !== void 0) return i.exports;
-      var a = t[r] = {
-        id: r,
+    }, i = {};
+    function a(o) {
+      var s = i[o];
+      if (s !== void 0) return s.exports;
+      var c = i[o] = {
+        id: o,
         exports: {}
       };
-      return e[r](a, a.exports, n), a.exports;
+      return e[o](c, c.exports, a), c.exports;
     }
-    n.n = (e2) => {
-      var t2 = e2 && e2.__esModule ? () => e2.default : () => e2;
-      return n.d(t2, { a: t2 }), t2;
-    }, n.d = (e2, t2) => {
-      for (var r in t2) n.o(t2, r) && !n.o(e2, r) && Object.defineProperty(e2, r, {
+    a.n = (e2) => {
+      var i2 = e2 && e2.__esModule ? () => e2.default : () => e2;
+      return a.d(i2, { a: i2 }), i2;
+    }, a.d = (e2, i2) => {
+      for (var o in i2) a.o(i2, o) && !a.o(e2, o) && Object.defineProperty(e2, o, {
         enumerable: true,
-        get: t2[r]
+        get: i2[o]
       });
-    }, n.o = (e2, t2) => Object.prototype.hasOwnProperty.call(e2, t2), (() => {
-      var e2 = n(792);
-      let t2 = "rendered", r = (e3, t3) => {
-        let n2 = e3.getBoundingClientRect(), r2, i2;
-        return t3.type === "mousedown" ? (r2 = t3.clientX, i2 = t3.clientY) : (r2 = t3.touches[0].clientX, i2 = t3.touches[0].clientY), r2 >= n2.x && r2 <= n2.x + n2.width && i2 >= n2.y && i2 <= n2.y + n2.height;
-      }, i, a = {
+    }, a.o = (e2, i2) => Object.prototype.hasOwnProperty.call(e2, i2), (() => {
+      var e2 = a(792);
+      let i2 = "rendered", o = (e3, i3) => {
+        let a2 = e3.getBoundingClientRect(), o2, s2;
+        return i3.type === "mousedown" ? (o2 = i3.clientX, s2 = i3.clientY) : (o2 = i3.touches[0].clientX, s2 = i3.touches[0].clientY), o2 >= a2.x && o2 <= a2.x + a2.width && s2 >= a2.y && s2 <= a2.y + a2.height;
+      }, s, c = {
         ArrowLeft: -1,
         ArrowRight: 1
-      }, o = ["horizontal", "vertical"], s = (e3) => ({
+      }, l = ["horizontal", "vertical"], u = (e3) => ({
         x: e3.touches[0].pageX,
         y: e3.touches[0].pageY
-      }), c = (e3) => ({
+      }), d = (e3) => ({
         x: e3.pageX,
         y: e3.pageY
-      }), l = typeof window < "u" && (window == null ? void 0 : window.HTMLElement);
-      typeof window < "u" && (window.document && (i = document.createElement("template"), i.innerHTML = '<div class="second" id="second"> <slot name="second"><slot name="before"></slot></slot> </div> <div class="first" id="first"> <div class="first-overlay"> <div class="first-overlay-container" id="firstImageContainer"> <slot name="first"><slot name="after"></slot></slot> </div> </div> <div class="handle-container"> <div class="divider"></div> <div class="handle" id="handle"> <slot name="handle"> <svg xmlns="http://www.w3.org/2000/svg" class="default-handle" viewBox="-8 -3 16 6"> <path d="M -5 -2 L -7 0 L -5 2 M 5 -2 L 7 0 L 5 2" fill="none" vector-effect="non-scaling-stroke"/> </svg> </slot> </div> </div> </div> '), window.customElements.define("img-comparison-slider", class extends l {
+      }), f = typeof window < "u" && (window == null ? void 0 : window.HTMLElement);
+      typeof window < "u" && (window.document && (s = document.createElement("template"), s.innerHTML = '<div class="second" id="second"> <slot name="second"><slot name="before"></slot></slot> </div> <div class="first" id="first"> <div class="first-overlay"> <div class="first-overlay-container" id="firstImageContainer"> <slot name="first"><slot name="after"></slot></slot> </div> </div> <div class="handle-container"> <div class="divider"></div> <div class="handle" id="handle"> <slot name="handle"> <svg xmlns="http://www.w3.org/2000/svg" class="default-handle" viewBox="-8 -3 16 6"> <path d="M -5 -2 L -7 0 L -5 2 M 5 -2 L 7 0 L 5 2" fill="none" vector-effect="non-scaling-stroke"/> </svg> </slot> </div> </div> </div> '), window.customElements.define("img-comparison-slider", class extends f {
         constructor() {
           super(), this.exposure = this.hasAttribute("value") ? parseFloat(this.getAttribute("value")) : 50, this.slideOnHover = false, this.slideDirection = "horizontal", this.keyboard = "enabled", this.isMouseDown = false, this.animationDirection = 0, this.isFocused = false, this.dragByHandle = false, this.onMouseMove = (e3) => {
             if (this.isMouseDown || this.slideOnHover) {
-              let t4 = c(e3);
-              this.slideToPage(t4);
+              let i4 = d(e3);
+              this.slideToPage(i4);
             }
           }, this.bodyUserSelectStyle = "", this.bodyWebkitUserSelectStyle = "", this.onMouseDown = (e3) => {
-            if (this.slideOnHover || this.handle && !r(this.handleElement, e3)) return;
+            if (this.slideOnHover || this.handle && !o(this.handleElement, e3)) return;
             e3.preventDefault(), window.addEventListener("mousemove", this.onMouseMove), window.addEventListener("mouseup", this.onWindowMouseUp), this.isMouseDown = true, this.enableTransition();
-            let t4 = c(e3);
-            this.slideToPage(t4), this.focus(), this.bodyUserSelectStyle = window.document.body.style.userSelect, this.bodyWebkitUserSelectStyle = window.document.body.style.webkitUserSelect, window.document.body.style.userSelect = "none", window.document.body.style.webkitUserSelect = "none";
+            let i4 = d(e3);
+            this.slideToPage(i4), this.focus(), this.bodyUserSelectStyle = window.document.body.style.userSelect, this.bodyWebkitUserSelectStyle = window.document.body.style.webkitUserSelect, window.document.body.style.userSelect = "none", window.document.body.style.webkitUserSelect = "none";
           }, this.onWindowMouseUp = () => {
             this.isMouseDown = false, window.document.body.style.userSelect = this.bodyUserSelectStyle, window.document.body.style.webkitUserSelect = this.bodyWebkitUserSelectStyle, window.removeEventListener("mousemove", this.onMouseMove), window.removeEventListener("mouseup", this.onWindowMouseUp);
           }, this.touchStartPoint = null, this.isTouchComparing = false, this.hasTouchMoved = false, this.onTouchStart = (e3) => {
-            this.dragByHandle && !r(this.handleElement, e3) || (this.touchStartPoint = s(e3), this.isFocused && (this.enableTransition(), this.slideToPage(this.touchStartPoint)));
+            this.dragByHandle && !o(this.handleElement, e3) || (this.touchStartPoint = u(e3), this.isFocused && (this.enableTransition(), this.slideToPage(this.touchStartPoint)));
           }, this.onTouchMove = (e3) => {
             if (this.touchStartPoint === null) return;
-            let t4 = s(e3);
-            if (this.isTouchComparing) return this.slideToPage(t4), e3.preventDefault(), false;
+            let i4 = u(e3);
+            if (this.isTouchComparing) return this.slideToPage(i4), e3.preventDefault(), false;
             if (!this.hasTouchMoved) {
-              let n3 = Math.abs(t4.y - this.touchStartPoint.y), r2 = Math.abs(t4.x - this.touchStartPoint.x);
-              if (this.slideDirection === "horizontal" && n3 < r2 || this.slideDirection === "vertical" && n3 > r2) return this.isTouchComparing = true, this.focus(), this.slideToPage(t4), e3.preventDefault(), false;
+              let a3 = Math.abs(i4.y - this.touchStartPoint.y), o2 = Math.abs(i4.x - this.touchStartPoint.x);
+              if (this.slideDirection === "horizontal" && a3 < o2 || this.slideDirection === "vertical" && a3 > o2) return this.isTouchComparing = true, this.focus(), this.slideToPage(i4), e3.preventDefault(), false;
               this.hasTouchMoved = true;
             }
           }, this.onTouchEnd = () => {
@@ -109,17 +109,17 @@ var require_dist$1 = /* @__PURE__ */ __commonJSMin((() => {
             this.isFocused = true, this.firstElement.classList.add("focused");
           }, this.onKeyDown = (e3) => {
             if (this.keyboard === "disabled") return;
-            let t4 = a[e3.key];
-            this.animationDirection !== t4 && t4 !== void 0 && (this.animationDirection = t4, this.startSlideAnimation());
+            let i4 = c[e3.key];
+            this.animationDirection !== i4 && i4 !== void 0 && (this.animationDirection = i4, this.startSlideAnimation());
           }, this.onKeyUp = (e3) => {
             if (this.keyboard === "disabled") return;
-            let t4 = a[e3.key];
-            t4 !== void 0 && this.animationDirection === t4 && this.stopSlideAnimation();
+            let i4 = c[e3.key];
+            i4 !== void 0 && this.animationDirection === i4 && this.stopSlideAnimation();
           }, this.resetDimensions = () => {
             this.imageWidth = this.offsetWidth, this.imageHeight = this.offsetHeight;
           };
-          let t3 = this.attachShadow({ mode: "open" }), n2 = document.createElement("style");
-          n2.innerHTML = e2.Z, this.getAttribute("nonce") && n2.setAttribute("nonce", this.getAttribute("nonce")), t3.appendChild(n2), t3.appendChild(i.content.cloneNode(true)), this.firstElement = t3.getElementById("first"), this.handleElement = t3.getElementById("handle");
+          let i3 = this.attachShadow({ mode: "open" }), a2 = document.createElement("style");
+          a2.innerHTML = e2.Z, this.getAttribute("nonce") && a2.setAttribute("nonce", this.getAttribute("nonce")), i3.appendChild(a2), i3.appendChild(s.content.cloneNode(true)), this.firstElement = i3.getElementById("first"), this.handleElement = i3.getElementById("handle");
         }
         set handle(e3) {
           this.dragByHandle = e3.toString().toLowerCase() !== "false";
@@ -131,8 +131,8 @@ var require_dist$1 = /* @__PURE__ */ __commonJSMin((() => {
           return this.exposure;
         }
         set value(e3) {
-          let t3 = parseFloat(e3);
-          t3 !== this.exposure && (this.exposure = t3, this.enableTransition(), this.setExposure());
+          let i3 = parseFloat(e3);
+          i3 !== this.exposure && (this.exposure = i3, this.enableTransition(), this.setExposure());
         }
         get hover() {
           return this.slideOnHover;
@@ -144,28 +144,28 @@ var require_dist$1 = /* @__PURE__ */ __commonJSMin((() => {
           return this.slideDirection;
         }
         set direction(e3) {
-          this.slideDirection = e3.toString().toLowerCase(), this.slide(0), this.firstElement.classList.remove(...o), o.includes(this.slideDirection) && this.firstElement.classList.add(this.slideDirection);
+          this.slideDirection = e3.toString().toLowerCase(), this.slide(0), this.firstElement.classList.remove(...l), l.includes(this.slideDirection) && this.firstElement.classList.add(this.slideDirection);
         }
         static get observedAttributes() {
           return ["hover", "direction"];
         }
         connectedCallback() {
-          this.hasAttribute("tabindex") || (this.tabIndex = 0), this.addEventListener("dragstart", ((e3) => (e3.preventDefault(), false))), new ResizeObserver(this.resetDimensions).observe(this), this.setExposure(0), this.keyboard = this.hasAttribute("keyboard") && this.getAttribute("keyboard") === "disabled" ? "disabled" : "enabled", this.addEventListener("keydown", this.onKeyDown), this.addEventListener("keyup", this.onKeyUp), this.addEventListener("focus", this.onFocus), this.addEventListener("blur", this.onBlur), this.addEventListener("touchstart", this.onTouchStart, { passive: true }), this.addEventListener("touchmove", this.onTouchMove, { passive: false }), this.addEventListener("touchend", this.onTouchEnd), this.addEventListener("mousedown", this.onMouseDown), this.handle = this.hasAttribute("handle") ? this.getAttribute("handle") : this.dragByHandle, this.hover = this.hasAttribute("hover") ? this.getAttribute("hover") : this.slideOnHover, this.direction = this.hasAttribute("direction") ? this.getAttribute("direction") : this.slideDirection, this.resetDimensions(), this.classList.contains(t2) || this.classList.add(t2);
+          this.hasAttribute("tabindex") || (this.tabIndex = 0), this.addEventListener("dragstart", ((e3) => (e3.preventDefault(), false))), new ResizeObserver(this.resetDimensions).observe(this), this.setExposure(0), this.keyboard = this.hasAttribute("keyboard") && this.getAttribute("keyboard") === "disabled" ? "disabled" : "enabled", this.addEventListener("keydown", this.onKeyDown), this.addEventListener("keyup", this.onKeyUp), this.addEventListener("focus", this.onFocus), this.addEventListener("blur", this.onBlur), this.addEventListener("touchstart", this.onTouchStart, { passive: true }), this.addEventListener("touchmove", this.onTouchMove, { passive: false }), this.addEventListener("touchend", this.onTouchEnd), this.addEventListener("mousedown", this.onMouseDown), this.handle = this.hasAttribute("handle") ? this.getAttribute("handle") : this.dragByHandle, this.hover = this.hasAttribute("hover") ? this.getAttribute("hover") : this.slideOnHover, this.direction = this.hasAttribute("direction") ? this.getAttribute("direction") : this.slideDirection, this.resetDimensions(), this.classList.contains(i2) || this.classList.add(i2);
         }
         disconnectedCallback() {
           this.transitionTimer && window.clearTimeout(this.transitionTimer);
         }
-        attributeChangedCallback(e3, t3, n2) {
-          e3 === "hover" && (this.hover = n2), e3 === "direction" && (this.direction = n2), e3 === "keyboard" && (this.keyboard = n2 === "disabled" ? "disabled" : "enabled");
+        attributeChangedCallback(e3, i3, a2) {
+          e3 === "hover" && (this.hover = a2), e3 === "direction" && (this.direction = a2), e3 === "keyboard" && (this.keyboard = a2 === "disabled" ? "disabled" : "enabled");
         }
         setExposure(e3 = 0) {
-          var t3;
-          this.exposure = (t3 = this.exposure + e3) < 0 ? 0 : t3 > 100 ? 100 : t3, this.firstElement.style.setProperty("--exposure", 100 - this.exposure + "%");
+          var i3;
+          this.exposure = (i3 = this.exposure + e3) < 0 ? 0 : i3 > 100 ? 100 : i3, this.firstElement.style.setProperty("--exposure", 100 - this.exposure + "%");
         }
         slide(e3 = 0) {
           this.setExposure(e3);
-          let t3 = new Event("slide");
-          this.dispatchEvent(t3);
+          let i3 = new Event("slide");
+          this.dispatchEvent(i3);
         }
         slideToPage(e3) {
           this.slideDirection === "horizontal" && this.slideToPageX(e3.x), this.slideDirection === "vertical" && this.slideToPageY(e3.y);
@@ -182,15 +182,15 @@ var require_dist$1 = /* @__PURE__ */ __commonJSMin((() => {
           }), 100);
         }
         startSlideAnimation() {
-          let e3 = null, t3 = this.animationDirection;
+          let e3 = null, i3 = this.animationDirection;
           this.firstElement.style.setProperty("--transition-time", "var(--keyboard-transition-time)");
-          let n2 = (r2) => {
-            if (this.animationDirection === 0 || t3 !== this.animationDirection) return;
-            e3 === null && (e3 = r2);
-            let i2 = (r2 - e3) / 16.666666666666668 * this.animationDirection;
-            this.slide(i2), setTimeout((() => window.requestAnimationFrame(n2)), 0), e3 = r2;
+          let a2 = (o2) => {
+            if (this.animationDirection === 0 || i3 !== this.animationDirection) return;
+            e3 === null && (e3 = o2);
+            let s2 = (o2 - e3) / 16.666666666666668 * this.animationDirection;
+            this.slide(s2), setTimeout((() => window.requestAnimationFrame(a2)), 0), e3 = o2;
           };
-          window.requestAnimationFrame(n2);
+          window.requestAnimationFrame(a2);
         }
         stopSlideAnimation() {
           this.animationDirection = 0, this.firstElement.style.setProperty("--transition-time", "var(--default-transition-time)");
@@ -199,77 +199,121 @@ var require_dist$1 = /* @__PURE__ */ __commonJSMin((() => {
     })();
   })();
 })), require_dist = /* @__PURE__ */ __commonJSMin(((e) => {
-  var t = e && e.__createBinding || (Object.create ? (function(e2, t2, n, r2) {
-    r2 === void 0 && (r2 = n), Object.defineProperty(e2, r2, {
+  var i = e && e.__createBinding || (Object.create ? (function(e2, i2, a, o2) {
+    o2 === void 0 && (o2 = a), Object.defineProperty(e2, o2, {
       enumerable: true,
       get: function() {
-        return t2[n];
+        return i2[a];
       }
     });
-  }) : (function(e2, t2, n, r2) {
-    r2 === void 0 && (r2 = n), e2[r2] = t2[n];
-  })), r = e && e.__setModuleDefault || (Object.create ? (function(e2, t2) {
+  }) : (function(e2, i2, a, o2) {
+    o2 === void 0 && (o2 = a), e2[o2] = i2[a];
+  })), o = e && e.__setModuleDefault || (Object.create ? (function(e2, i2) {
     Object.defineProperty(e2, "default", {
       enumerable: true,
-      value: t2
+      value: i2
     });
-  }) : function(e2, t2) {
-    e2.default = t2;
-  }), i = e && e.__importStar || function(e2) {
+  }) : function(e2, i2) {
+    e2.default = i2;
+  }), s = e && e.__importStar || function(e2) {
     if (e2 && e2.__esModule) return e2;
-    var n = {};
-    if (e2 != null) for (var i2 in e2) i2 !== "default" && Object.prototype.hasOwnProperty.call(e2, i2) && t(n, e2, i2);
-    return r(n, e2), n;
+    var a = {};
+    if (e2 != null) for (var s2 in e2) s2 !== "default" && Object.prototype.hasOwnProperty.call(e2, s2) && i(a, e2, s2);
+    return o(a, e2), a;
   };
   Object.defineProperty(e, "__esModule", { value: true }), e.ImgComparisonSlider = void 0;
-  var o = require_react();
-  typeof document < "u" && Promise.resolve().then(() => i(require_dist$1())), e.ImgComparisonSlider = (0, o.forwardRef)(({ children: e2, onSlide: t2, value: n, className: r2, ...i2 }, a) => {
-    let s = (0, o.useRef)();
-    return (0, o.useEffect)(() => {
-      n !== void 0 && (s.current.value = parseFloat(n.toString()));
-    }, [n, s]), (0, o.useEffect)(() => {
-      t2 && s.current.addEventListener("slide", t2);
-    }, []), (0, o.useImperativeHandle)(a, () => s.current, [s]), (0, o.createElement)("img-comparison-slider", Object.assign({
-      class: r2 ? `${r2} rendered` : "rendered",
+  var l = require_react();
+  typeof document < "u" && Promise.resolve().then(() => s(require_dist$1())), e.ImgComparisonSlider = (0, l.forwardRef)(({ children: e2, onSlide: i2, value: a, className: o2, ...s2 }, c) => {
+    let u = (0, l.useRef)();
+    return (0, l.useEffect)(() => {
+      a !== void 0 && (u.current.value = parseFloat(a.toString()));
+    }, [a, u]), (0, l.useEffect)(() => {
+      i2 && u.current.addEventListener("slide", i2);
+    }, []), (0, l.useImperativeHandle)(c, () => u.current, [u]), (0, l.createElement)("img-comparison-slider", Object.assign({
+      class: o2 ? `${o2} rendered` : "rendered",
       tabIndex: 0,
-      ref: s
-    }, i2), e2);
+      ref: u
+    }, s2), e2);
   });
-})), import_compiler_runtime = require_compiler_runtime(), import_dist = require_dist();
-require_react();
-var import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), ImageComparisonComponent_default = (e) => {
-  let t = (0, import_compiler_runtime.c)(15), { beforeSrc: n, afterSrc: r, value: i, direction: a, width: o, height: u } = e, d = o || "100%", f = u || (a === "vertical" ? "400px" : "auto"), p;
-  t[0] !== d || t[1] !== f ? (p = {
-    width: d,
-    height: f,
-    maxWidth: "100%"
-  }, t[0] = d, t[1] = f, t[2] = p) : p = t[2];
-  let m = p, h;
-  t[3] === n ? h = t[4] : (h = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+})), import_compiler_runtime = require_compiler_runtime(), import_dist = require_dist(), import_react = /* @__PURE__ */ __toESM(require_react(), 1), import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1);
+function truncateSrc(e) {
+  return e.length > 100 ? `${e.slice(0, 100)}\u2026` : e;
+}
+var ImageComparisonComponent_default = (e) => {
+  let i = (0, import_compiler_runtime.c)(34), { beforeSrc: a, afterSrc: o, value: s, direction: c, width: l, height: p } = e, [m, h] = import_react.useState(_temp), g;
+  i[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (g = () => {
+    h(/* @__PURE__ */ new Set());
+  }, i[0] = g) : g = i[0];
+  let _;
+  i[1] !== o || i[2] !== a ? (_ = [a, o], i[1] = o, i[2] = a, i[3] = _) : _ = i[3], import_react.useEffect(g, _);
+  let v;
+  i[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (v = (e2) => {
+    h((i2) => new Set(i2).add(e2));
+  }, i[4] = v) : v = i[4];
+  let y = v, b = l || "100%", x = p || (c === "vertical" ? "400px" : "auto"), S;
+  i[5] !== b || i[6] !== x ? (S = {
+    width: b,
+    height: x,
+    maxWidth: "100%",
+    minHeight: "2rem"
+  }, i[5] = b, i[6] = x, i[7] = S) : S = i[7];
+  let C = S;
+  if (m.size > 0) {
+    let e2 = m.size > 1 ? "images" : "image", a2;
+    i[8] === m ? a2 = i[9] : (a2 = [...m].map(_temp2), i[8] = m, i[9] = a2);
+    let o2 = a2.join(", "), s2;
+    i[10] !== e2 || i[11] !== o2 ? (s2 = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+      "Failed to load ",
+      e2,
+      ":",
+      " ",
+      o2
+    ] }), i[10] = e2, i[11] = o2, i[12] = s2) : s2 = i[12];
+    let c2;
+    return i[13] !== C || i[14] !== s2 ? (c2 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+      style: C,
+      className: "flex items-center justify-center rounded border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive",
+      children: s2
+    }), i[13] = C, i[14] = s2, i[15] = c2) : c2 = i[15], c2;
+  }
+  let w;
+  i[16] === a ? w = i[17] : (w = () => y(a), i[16] = a, i[17] = w);
+  let T;
+  i[18] !== a || i[19] !== w ? (T = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
     slot: "first",
-    src: n,
+    src: a,
     alt: "Before",
-    width: "100%"
-  }), t[3] = n, t[4] = h);
-  let g;
-  t[5] === r ? g = t[6] : (g = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+    width: "100%",
+    onError: w
+  }), i[18] = a, i[19] = w, i[20] = T) : T = i[20];
+  let E;
+  i[21] === o ? E = i[22] : (E = () => y(o), i[21] = o, i[22] = E);
+  let D;
+  i[23] !== o || i[24] !== E ? (D = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
     slot: "second",
-    src: r,
+    src: o,
     alt: "After",
-    width: "100%"
-  }), t[5] = r, t[6] = g);
-  let _;
-  t[7] !== a || t[8] !== h || t[9] !== g || t[10] !== i ? (_ = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dist.ImgComparisonSlider, {
-    value: i,
-    direction: a,
-    children: [h, g]
-  }), t[7] = a, t[8] = h, t[9] = g, t[10] = i, t[11] = _) : _ = t[11];
-  let v;
-  return t[12] !== m || t[13] !== _ ? (v = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-    style: m,
-    children: _
-  }), t[12] = m, t[13] = _, t[14] = v) : v = t[14], v;
+    width: "100%",
+    onError: E
+  }), i[23] = o, i[24] = E, i[25] = D) : D = i[25];
+  let O;
+  i[26] !== c || i[27] !== D || i[28] !== T || i[29] !== s ? (O = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dist.ImgComparisonSlider, {
+    value: s,
+    direction: c,
+    children: [T, D]
+  }), i[26] = c, i[27] = D, i[28] = T, i[29] = s, i[30] = O) : O = i[30];
+  let k;
+  return i[31] !== C || i[32] !== O ? (k = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    style: C,
+    children: O
+  }), i[31] = C, i[32] = O, i[33] = k) : k = i[33], k;
 };
+function _temp() {
+  return /* @__PURE__ */ new Set();
+}
+function _temp2(e) {
+  return `"${truncateSrc(e)}"`;
+}
 export {
   ImageComparisonComponent_default as default
 };

package/dist/{code-visibility-CXaWvbIw.js → code-visibility-lZd-lNkj.js}

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

package/dist/main.js

@@ -26,7 +26,7 @@ import { $ as reducer, $t as isUninstantiated, A as ChevronDownIcon, An as Item$
 import { __tla as __tla_1 } from "./chunk-5FQGJX7Z-BbqSm5gU.js";
 import { o as useSize, s as Root$1, u as createLucideIcon } from "./dist--2Bqjvs0.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$1, 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-Cz-Bj1JI.js";
-import { $ as ContextAwarePanelItem, $t as EmotionCacheProvider, A as prettifyRowColumnCount, At as loadTableData, B as useSelectList, Bt as dateToLocalISOTime, C as Filenames, Ct as ColumnChartContext, D as EmptyState, Dt as usePrevious$1, E as ColumnPreviewContainer, Et as useIntersectionObserver, F as ContextMenuContent, Ft as getMimeValues, G as ComboboxItem, Gt as ChartErrorState, H as DatePicker, Ht as TabsContent, I as ContextMenuItem, It as isNullishFilter, J as CommandInput, Jt as LazyVegaEmbed, K as Command, Kt as ChartInfoState, L as ContextMenuSeparator, Lt as Maps, M as getColumnCountForDisplay, Mt as SELECT_COLUMN_ID, N as getUserColumnVisibilityCounts, Nt as TOO_MANY_ROWS, O as ErrorState, Ot as getPageIndexForRow, P as ContextMenu, Pt as toFieldTypes, Q as smartMatch, Qt as HtmlOutput, R as ContextMenuTrigger, Rt as dateToLocalISODate, S as Progress, St as renderCellValue, T as ColumnName, Tt as DelayMount, U as DateRangePicker, Ut as TabsList, V as CompactChipRow, Vt as Tabs, W as Combobox, Wt as TabsTrigger, X as CommandList, Xt as RenderTextWithLinks, Y as CommandItem, Yt as useOverflowDetection, Z as CommandSeparator, Zt as Kbd, _ as InstallPackageButton, _n as ArrowDownWideNarrow, _t as TableHeader, an as GripHorizontal, at as SlotNames, b as downloadByURL, bt as generateColumns, d as RadioGroup, dn as Code, dt as Fill, en as hasFunctionProperty, et as PANEL_TYPES, f as RadioGroupItem, fn as ChevronsUpDown, ft as Provider$1, g as DataTable, gn as ChevronLeft, gt as TableHead, h as OutputRenderer, hn as ChevronsDownUp, ht as TableCell, in as TextWrap, it as isCellAwareAtom, j as prettifyRowCount, jt as INDEX_COLUMN_NAME, k as LoadingState, kt as loadTableAndRawData, l as Slide, ln as Ellipsis, m as OutputArea, mn as ChevronsLeft, mt as TableBody, n as marimoVersionAtom, nn as $fae977aafc393c5c$export$588937bcd60ade55, nt as contextAwarePanelOwner, on as Funnel, ot as slotsController, p as JsonOutput, pn as ChevronsRight, pt as Table, q as CommandEmpty, qt as ChartLoadingState, r as showCodeInRunModeAtom, rn as $fae977aafc393c5c$export$6b862160d295c8e, rt as contextAwarePanelType, s as SLIDE_TYPE_OPTIONS_BY_VALUE, sn as EyeOff, st as Toggle, t as useNotebookCodeAvailable, tn as isRecord, tt as contextAwarePanelOpen, u as Switch, un as Download, v as ADD_PRINTING_CLASS, vt as TableRow, w as downloadSizeLimitAtom, wt as ColumnChartSpecModel, x as downloadHTMLAsImage, xt as inferFieldTypes, y as downloadBlob, yt as NAMELESS_COLUMN_PREFIX, z as useInternalStateWithSync, zt as dateToLocalISODateTime, __tla as __tla_2 } from "./code-visibility-CXaWvbIw.js";
+import { $ as ContextAwarePanelItem, $t as EmotionCacheProvider, A as prettifyRowColumnCount, At as loadTableData, B as useSelectList, Bt as dateToLocalISOTime, C as Filenames, Ct as ColumnChartContext, D as EmptyState, Dt as usePrevious$1, E as ColumnPreviewContainer, Et as useIntersectionObserver, F as ContextMenuContent, Ft as getMimeValues, G as ComboboxItem, Gt as ChartErrorState, H as DatePicker, Ht as TabsContent, I as ContextMenuItem, It as isNullishFilter, J as CommandInput, Jt as LazyVegaEmbed, K as Command, Kt as ChartInfoState, L as ContextMenuSeparator, Lt as Maps, M as getColumnCountForDisplay, Mt as SELECT_COLUMN_ID, N as getUserColumnVisibilityCounts, Nt as TOO_MANY_ROWS, O as ErrorState, Ot as getPageIndexForRow, P as ContextMenu, Pt as toFieldTypes, Q as smartMatch, Qt as HtmlOutput, R as ContextMenuTrigger, Rt as dateToLocalISODate, S as Progress, St as renderCellValue, T as ColumnName, Tt as DelayMount, U as DateRangePicker, Ut as TabsList, V as CompactChipRow, Vt as Tabs, W as Combobox, Wt as TabsTrigger, X as CommandList, Xt as RenderTextWithLinks, Y as CommandItem, Yt as useOverflowDetection, Z as CommandSeparator, Zt as Kbd, _ as InstallPackageButton, _n as ArrowDownWideNarrow, _t as TableHeader, an as GripHorizontal, at as SlotNames, b as downloadByURL, bt as generateColumns, d as RadioGroup, dn as Code, dt as Fill, en as hasFunctionProperty, et as PANEL_TYPES, f as RadioGroupItem, fn as ChevronsUpDown, ft as Provider$1, g as DataTable, gn as ChevronLeft, gt as TableHead, h as OutputRenderer, hn as ChevronsDownUp, ht as TableCell, in as TextWrap, it as isCellAwareAtom, j as prettifyRowCount, jt as INDEX_COLUMN_NAME, k as LoadingState, kt as loadTableAndRawData, l as Slide, ln as Ellipsis, m as OutputArea, mn as ChevronsLeft, mt as TableBody, n as marimoVersionAtom, nn as $fae977aafc393c5c$export$588937bcd60ade55, nt as contextAwarePanelOwner, on as Funnel, ot as slotsController, p as JsonOutput, pn as ChevronsRight, pt as Table, q as CommandEmpty, qt as ChartLoadingState, r as showCodeInRunModeAtom, rn as $fae977aafc393c5c$export$6b862160d295c8e, rt as contextAwarePanelType, s as SLIDE_TYPE_OPTIONS_BY_VALUE, sn as EyeOff, st as Toggle, t as useNotebookCodeAvailable, tn as isRecord, tt as contextAwarePanelOpen, u as Switch, un as Download, v as ADD_PRINTING_CLASS, vt as TableRow, w as downloadSizeLimitAtom, wt as ColumnChartSpecModel, x as downloadHTMLAsImage, xt as inferFieldTypes, y as downloadBlob, yt as NAMELESS_COLUMN_PREFIX, z as useInternalStateWithSync, zt as dateToLocalISODateTime, __tla as __tla_2 } from "./code-visibility-lZd-lNkj.js";
 import { c as Calendar, i as createReducerAndAtoms, n as useOnUnmount, o as ToggleLeft, t as useOnMount } from "./useLifecycle-DegSo0lV.js";
 import { t as Check } from "./check-C9OoNtR4.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-Dq_j3Rxw.js";
@@ -28447,7 +28447,7 @@ ${c}
         m
       ]
     });
-  }, LazyImageComparisonComponent = import_react.lazy(() => import("./ImageComparisonComponent-CHrI72em.js")), ImageComparisonPlugin = class {
+  }, LazyImageComparisonComponent = import_react.lazy(() => import("./ImageComparisonComponent-1i5IBhon.js")), ImageComparisonPlugin = class {
     constructor() {
       __publicField(this, "tagName", "marimo-image-comparison");
       __publicField(this, "validator", object({
@@ -38024,7 +38024,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-D_Go0-2D.js"));
+  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-B0JS8HUE.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), [

package/dist/{reveal-component-D_Go0-2D.js → reveal-component-B0JS8HUE.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { lt as kioskModeAtom, pt as outputIsStale } from "./html-to-image-JXL8cvmt.js";
 import "./chunk-5FQGJX7Z-BbqSm5gU.js";
 import { u as createLucideIcon } from "./dist--2Bqjvs0.js";
-import { a as DEFAULT_DECK_VERTICAL_ALIGN, c as SlideSidebar, cn as Expand, ct as Panel, dn as Code, i as DEFAULT_DECK_TRANSITION, l as Slide, lt as PanelGroup, o as DEFAULT_SLIDE_TYPE, sn as EyeOff, t as useNotebookCodeAvailable, ut as PanelResizeHandle } from "./code-visibility-CXaWvbIw.js";
+import { a as DEFAULT_DECK_VERTICAL_ALIGN, c as SlideSidebar, cn as Expand, ct as Panel, dn as Code, i as DEFAULT_DECK_TRANSITION, l as Slide, lt as PanelGroup, o as DEFAULT_SLIDE_TYPE, sn as EyeOff, t as useNotebookCodeAvailable, ut as PanelResizeHandle } from "./code-visibility-lZd-lNkj.js";
 import { X as useDebouncedCallback } from "./input-DtsN7xm-.js";
 import "./toDate-CWNNlFEX.js";
 import "./react-dom-BTJzcVJ9.js";