@marimo-team/islands 0.23.17-dev26 → 0.23.17-dev28

package/dist/{ImageComparisonComponent-C3y7L3eJ.js → ImageComparisonComponent-fdY0LUuf.js}

@@ -240,7 +240,7 @@ 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;
+  let i = (0, import_compiler_runtime.c)(40), { 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];
@@ -257,56 +257,67 @@ var ImageComparisonComponent_default = (e) => {
     maxWidth: "100%",
     minHeight: "2rem"
   }, i[5] = b, i[6] = x, i[7] = S) : S = i[7];
-  let C = S;
+  let C = S, w;
+  i[8] !== p || i[9] !== l ? (w = l || p ? {
+    width: l || void 0,
+    height: p || void 0,
+    objectFit: "contain"
+  } : void 0, i[8] = p, i[9] = l, i[10] = w) : w = i[10];
+  let T = w;
   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);
+    i[11] === m ? a2 = i[12] : (a2 = [...m].map(_temp2), i[11] = m, i[12] = a2);
     let o2 = a2.join(", "), s2;
-    i[10] !== e2 || i[11] !== o2 ? (s2 = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+    i[13] !== o2 || i[14] !== e2 ? (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];
+    ] }), i[13] = o2, i[14] = e2, i[15] = s2) : s2 = i[15];
     let c2;
-    return i[13] !== C || i[14] !== s2 ? (c2 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+    return i[16] !== C || i[17] !== 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;
+    }), i[16] = C, i[17] = s2, i[18] = c2) : c2 = i[18], 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", {
+  let E;
+  i[19] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (E = { verticalAlign: "top" }, i[19] = E) : E = i[19];
+  let D;
+  i[20] === a ? D = i[21] : (D = () => y(a), i[20] = a, i[21] = D);
+  let O;
+  i[22] !== a || i[23] !== T || i[24] !== D ? (O = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
     slot: "first",
     src: a,
     alt: "Before",
     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", {
+    style: T,
+    onError: D
+  }), i[22] = a, i[23] = T, i[24] = D, i[25] = O) : O = i[25];
+  let k;
+  i[26] === o ? k = i[27] : (k = () => y(o), i[26] = o, i[27] = k);
+  let A;
+  i[28] !== o || i[29] !== T || i[30] !== k ? (A = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
     slot: "second",
     src: o,
     alt: "After",
     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, {
+    style: T,
+    onError: k
+  }), i[28] = o, i[29] = T, i[30] = k, i[31] = A) : A = i[31];
+  let j;
+  i[32] !== c || i[33] !== O || i[34] !== A || i[35] !== s ? (j = /* @__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: E,
+    children: [O, A]
+  }), i[32] = c, i[33] = O, i[34] = A, i[35] = s, i[36] = j) : j = i[36];
+  let M;
+  return i[37] !== C || i[38] !== j ? (M = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
     style: C,
-    children: O
-  }), i[31] = C, i[32] = O, i[33] = k) : k = i[33], k;
+    children: j
+  }), i[37] = C, i[38] = j, i[39] = M) : M = i[39], M;
 };
 function _temp() {
   return /* @__PURE__ */ new Set();

package/dist/{common-9UepGWSR.js → common-BWX4gEr_.js}

@@ -36338,7 +36338,7 @@ ${d}`,
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.17-dev26");
+  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.17-dev28");
   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 publishedCellClasses, A as ChevronDownIcon,
 import { __tla as __tla_1 } from "./chunk-5FQGJX7Z-B9WoXK1R.js";
 import { o as useSize, s as Root$1, u as createLucideIcon } from "./dist-DgzzIPS4.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-C7rMyZ_8.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-9UepGWSR.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-BWX4gEr_.js";
 import { c as Calendar, i as createReducerAndAtoms, n as useOnUnmount, o as ToggleLeft, t as useOnMount } from "./useLifecycle-CLPBATCv.js";
 import { t as Check } from "./check-CCvJTB2E.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-CITcoFNY.js";
@@ -28644,7 +28644,7 @@ ${c}
         f
       ]
     });
-  }, LazyImageComparisonComponent = import_react.lazy(() => import("./ImageComparisonComponent-C3y7L3eJ.js")), ImageComparisonPlugin = class {
+  }, LazyImageComparisonComponent = import_react.lazy(() => import("./ImageComparisonComponent-fdY0LUuf.js")), ImageComparisonPlugin = class {
     constructor() {
       __publicField(this, "tagName", "marimo-image-comparison");
       __publicField(this, "validator", object({
@@ -38221,7 +38221,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-C9_o1FTa.js"));
+  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-DtQUExfw.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-C9_o1FTa.js → reveal-component-DtQUExfw.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { ut as outputIsStale } from "./html-to-image-D_6NEfLQ.js";
 import "./chunk-5FQGJX7Z-B9WoXK1R.js";
 import { u as createLucideIcon } from "./dist-DgzzIPS4.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-9UepGWSR.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-BWX4gEr_.js";
 import { R as ChevronDown } from "./strings-CITcoFNY.js";
 import { X as useDebouncedCallback } from "./input-DtTqU0xh.js";
 import { v as kioskModeAtom } from "./toDate-kxcuDOWd.js";

package/package.json

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

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

@@ -49,6 +49,18 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
     minHeight: "2rem",
   };
 
+  // The slider's width="100%" images resolve against its shadow-DOM wrappers (circular),
+  // so size the images explicitly and letterbox with object-fit to keep them aligned.
+  // Treat empty strings as "not provided" (normalize_dimension passes them through).
+  const imageStyle: React.CSSProperties | undefined =
+    width || height
+      ? {
+          width: width || undefined,
+          height: height || undefined,
+          objectFit: "contain",
+        }
+      : undefined;
+
   // If an image fails to load, the slider collapses to nothing; surface a
   // visible error instead of silently rendering an empty output.
   if (failedSrcs.size > 0) {
@@ -67,12 +79,18 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
 
   return (
     <div style={containerStyle}>
-      <ImgComparisonSlider value={value} direction={direction}>
+      <ImgComparisonSlider
+        value={value}
+        direction={direction}
+        // inline-block leaves a baseline gap below the slider; align to top.
+        style={{ verticalAlign: "top" }}
+      >
         <img
           slot="first"
           src={beforeSrc}
           alt="Before"
           width="100%"
+          style={imageStyle}
           onError={() => handleError(beforeSrc)}
         />
         <img
@@ -80,6 +98,7 @@ const ImageComparisonComponent: React.FC<ImageComparisonData> = ({
           src={afterSrc}
           alt="After"
           width="100%"
+          style={imageStyle}
           onError={() => handleError(afterSrc)}
         />
       </ImgComparisonSlider>

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

@@ -68,4 +68,62 @@ describe("ImageComparisonComponent", () => {
     expect(error?.textContent).toContain("…");
     expect(error?.textContent).not.toContain("A".repeat(200));
   });
+
+  it("sizes both images explicitly when dimensions are given", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} width="300px" height="300px" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.width).toBe("300px");
+      expect((img as HTMLElement).style.height).toBe("300px");
+      // Letterbox identically so the slider's clip stays aligned.
+      expect((img as HTMLElement).style.objectFit).toBe("contain");
+    }
+  });
+
+  it("applies a single dimension to both images when only one is given", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} width="300px" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.width).toBe("300px");
+      expect((img as HTMLElement).style.objectFit).toBe("contain");
+    }
+  });
+
+  it("applies height-only sizing to both images", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} height="300px" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.height).toBe("300px");
+      expect((img as HTMLElement).style.objectFit).toBe("contain");
+    }
+  });
+
+  it("treats empty-string dimensions as not provided", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} width="" height="" />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      expect((img as HTMLElement).style.width).toBe("");
+      expect((img as HTMLElement).style.height).toBe("");
+    }
+  });
+
+  it("leaves images unstyled when no dimensions are given", () => {
+    const { getAllByAltText } = render(
+      <ImageComparisonComponent {...baseProps} />,
+    );
+
+    for (const img of getAllByAltText(/Before|After/)) {
+      // No explicit sizing: the slider keeps its intrinsic-size behavior.
+      expect((img as HTMLElement).style.width).toBe("");
+      expect((img as HTMLElement).style.height).toBe("");
+    }
+  });
 });