@marimo-team/islands 0.23.14-dev53 → 0.23.14-dev55

package/dist/{code-visibility--COhZgLs.js → code-visibility-DQX0uy8x.js}

@@ -19179,19 +19179,21 @@ To suppress this warning, you need to explicitly provide the \`palette.${t}Chann
   HtmlOutput.displayName = "HtmlOutput";
   var import_compiler_runtime$66 = require_compiler_runtime();
   const ImageOutput = (e) => {
-    let t = (0, import_compiler_runtime$66.c)(10), { src: n, alt: i, width: a, height: o, className: s } = e, c = i === void 0 ? "" : i, d;
-    t[0] !== o || t[1] !== a ? (d = {}, a !== void 0 && (d.width = typeof a == "number" ? `${a}px` : a), o !== void 0 && (d.height = typeof o == "number" ? `${o}px` : o), t[0] = o, t[1] = a, t[2] = d) : d = t[2];
-    let f;
-    t[3] !== c || t[4] !== n || t[5] !== d ? (f = (0, import_jsx_runtime.jsx)("img", {
+    let t = (0, import_compiler_runtime$66.c)(12), { src: n, alt: i, width: a, height: o, className: s } = e, c = i === void 0 ? "" : i, d;
+    t[0] !== o || t[1] !== a ? (d = {}, typeof a == "string" && (d.width = a), typeof o == "string" && (d.height = o), t[0] = o, t[1] = a, t[2] = d) : d = t[2];
+    let f = typeof a == "number" ? a : void 0, h = typeof o == "number" ? o : void 0, _;
+    t[3] !== c || t[4] !== n || t[5] !== d || t[6] !== f || t[7] !== h ? (_ = (0, import_jsx_runtime.jsx)("img", {
       src: n,
       alt: c,
+      width: f,
+      height: h,
       style: d
-    }), t[3] = c, t[4] = n, t[5] = d, t[6] = f) : f = t[6];
-    let h;
-    return t[7] !== s || t[8] !== f ? (h = (0, import_jsx_runtime.jsx)("span", {
+    }), t[3] = c, t[4] = n, t[5] = d, t[6] = f, t[7] = h, t[8] = _) : _ = t[8];
+    let v;
+    return t[9] !== s || t[10] !== _ ? (v = (0, import_jsx_runtime.jsx)("span", {
       className: s,
-      children: f
-    }), t[7] = s, t[8] = f, t[9] = h) : h = t[9], h;
+      children: _
+    }), t[9] = s, t[10] = _, t[11] = v) : v = t[11], v;
   };
   var import_compiler_runtime$65 = require_compiler_runtime();
   Kbd = (e) => {
@@ -36207,7 +36209,7 @@ ${d}`,
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.14-dev53");
+  marimoVersionAtom = atom(getVersionFromMountConfig() || "0.23.14-dev55");
   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 getRequestClient, A as ChevronDownIcon, An as Trigg
 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-CnTgI25l.js";
-import { $ as PANEL_TYPES, $t as HtmlOutput, A as prettifyRowCount, At as INDEX_COLUMN_NAME, B as CompactChipRow, Bt as dateToLocalISODateTime, C as downloadSizeLimitAtom, Ct as ColumnChartSpecModel, D as ErrorState, Dt as getPageIndexForRow, E as EmptyState, Et as usePrevious$1, F as ContextMenuItem, Ft as hasFunctionProperty, G as Command, Gt as TabsTrigger, H as DateRangePicker, Ht as Tabs, I as ContextMenuSeparator, It as isRecord, J as CommandItem, Jt as ChartLoadingState, K as CommandEmpty, Kt as ChartErrorState, L as ContextMenuTrigger, Lt as isNullishFilter, M as getUserColumnVisibilityCounts, Mt as TOO_MANY_ROWS, N as ContextMenu, Nt as toFieldTypes, O as LoadingState, Ot as loadTableAndRawData, P as ContextMenuContent, Pt as getMimeValues, Q as ContextAwarePanelItem, Qt as Kbd, R as useInternalStateWithSync, Rt as Maps, S as Filenames, St as ColumnChartContext, T as ColumnPreviewContainer, Tt as useIntersectionObserver, U as Combobox, Ut as TabsContent, V as DatePicker, Vt as dateToLocalISOTime, W as ComboboxItem, Wt as TabsList, X as CommandSeparator, Xt as useOverflowDetection, Y as CommandList, Yt as LazyVegaEmbed, Z as smartMatch, Zt as RenderTextWithLinks, _ as ADD_PRINTING_CLASS, _t as TableRow, an as Funnel, at as slotsController, b as downloadHTMLAsImage, bt as inferFieldTypes, c as Slide, cn as Ellipsis, d as RadioGroupItem, dn as ChevronsUpDown, dt as Provider$1, en as EmotionCacheProvider, et as contextAwarePanelOpen, f as JsonOutput, fn as ChevronsRight, ft as Table, g as InstallPackageButton, gn as ArrowDownWideNarrow, gt as TableHeader, h as DataTable, hn as ChevronLeft, ht as TableHead, in as GripHorizontal, it as SlotNames, j as getColumnCountForDisplay, jt as SELECT_COLUMN_ID, k as prettifyRowColumnCount, kt as loadTableData, l as Switch, ln as Download, m as OutputRenderer, mn as ChevronsDownUp, mt as TableCell, n as marimoVersionAtom, nn as $fae977aafc393c5c$export$6b862160d295c8e, nt as contextAwarePanelType, o as SLIDE_TYPE_OPTIONS_BY_VALUE, on as EyeOff, ot as Toggle, p as OutputArea, pn as ChevronsLeft, pt as TableBody, q as CommandInput, qt as ChartInfoState, r as showCodeInRunModeAtom, rn as TextWrap, rt as isCellAwareAtom, t as useNotebookCodeAvailable, tn as $fae977aafc393c5c$export$588937bcd60ade55, tt as contextAwarePanelOwner, u as RadioGroup, un as Code, ut as Fill, v as downloadBlob, vt as NAMELESS_COLUMN_PREFIX, w as ColumnName, wt as DelayMount, x as Progress, xt as renderCellValue, y as downloadByURL, yt as generateColumns, z as useSelectList, zt as dateToLocalISODate, __tla as __tla_2 } from "./code-visibility--COhZgLs.js";
+import { $ as PANEL_TYPES, $t as HtmlOutput, A as prettifyRowCount, At as INDEX_COLUMN_NAME, B as CompactChipRow, Bt as dateToLocalISODateTime, C as downloadSizeLimitAtom, Ct as ColumnChartSpecModel, D as ErrorState, Dt as getPageIndexForRow, E as EmptyState, Et as usePrevious$1, F as ContextMenuItem, Ft as hasFunctionProperty, G as Command, Gt as TabsTrigger, H as DateRangePicker, Ht as Tabs, I as ContextMenuSeparator, It as isRecord, J as CommandItem, Jt as ChartLoadingState, K as CommandEmpty, Kt as ChartErrorState, L as ContextMenuTrigger, Lt as isNullishFilter, M as getUserColumnVisibilityCounts, Mt as TOO_MANY_ROWS, N as ContextMenu, Nt as toFieldTypes, O as LoadingState, Ot as loadTableAndRawData, P as ContextMenuContent, Pt as getMimeValues, Q as ContextAwarePanelItem, Qt as Kbd, R as useInternalStateWithSync, Rt as Maps, S as Filenames, St as ColumnChartContext, T as ColumnPreviewContainer, Tt as useIntersectionObserver, U as Combobox, Ut as TabsContent, V as DatePicker, Vt as dateToLocalISOTime, W as ComboboxItem, Wt as TabsList, X as CommandSeparator, Xt as useOverflowDetection, Y as CommandList, Yt as LazyVegaEmbed, Z as smartMatch, Zt as RenderTextWithLinks, _ as ADD_PRINTING_CLASS, _t as TableRow, an as Funnel, at as slotsController, b as downloadHTMLAsImage, bt as inferFieldTypes, c as Slide, cn as Ellipsis, d as RadioGroupItem, dn as ChevronsUpDown, dt as Provider$1, en as EmotionCacheProvider, et as contextAwarePanelOpen, f as JsonOutput, fn as ChevronsRight, ft as Table, g as InstallPackageButton, gn as ArrowDownWideNarrow, gt as TableHeader, h as DataTable, hn as ChevronLeft, ht as TableHead, in as GripHorizontal, it as SlotNames, j as getColumnCountForDisplay, jt as SELECT_COLUMN_ID, k as prettifyRowColumnCount, kt as loadTableData, l as Switch, ln as Download, m as OutputRenderer, mn as ChevronsDownUp, mt as TableCell, n as marimoVersionAtom, nn as $fae977aafc393c5c$export$6b862160d295c8e, nt as contextAwarePanelType, o as SLIDE_TYPE_OPTIONS_BY_VALUE, on as EyeOff, ot as Toggle, p as OutputArea, pn as ChevronsLeft, pt as TableBody, q as CommandInput, qt as ChartInfoState, r as showCodeInRunModeAtom, rn as TextWrap, rt as isCellAwareAtom, t as useNotebookCodeAvailable, tn as $fae977aafc393c5c$export$588937bcd60ade55, tt as contextAwarePanelOwner, u as RadioGroup, un as Code, ut as Fill, v as downloadBlob, vt as NAMELESS_COLUMN_PREFIX, w as ColumnName, wt as DelayMount, x as Progress, xt as renderCellValue, y as downloadByURL, yt as generateColumns, z as useSelectList, zt as dateToLocalISODate, __tla as __tla_2 } from "./code-visibility-DQX0uy8x.js";
 import { c as Calendar, i as createReducerAndAtoms, n as useOnUnmount, o as ToggleLeft, t as useOnMount } from "./useLifecycle-CxffarYV.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";
@@ -37732,7 +37732,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-_OlCsMRT.js"));
+  var LazySlidesComponent = import_react.lazy(() => import("./reveal-component-wJKTADmW.js"));
   const SlidesLayoutRenderer = ({ layout: e, setLayout: r, cells: c, mode: l }) => {
     var _a3;
     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-_OlCsMRT.js → reveal-component-wJKTADmW.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-DOqQBSQc.js";
 import "./chunk-5FQGJX7Z-BbqSm5gU.js";
 import { u as createLucideIcon } from "./dist--2Bqjvs0.js";
-import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelGroup, i as DEFAULT_DECK_TRANSITION, lt as PanelResizeHandle, on as EyeOff, s as SlideSidebar, sn as Expand, st as Panel, t as useNotebookCodeAvailable, un as Code } from "./code-visibility--COhZgLs.js";
+import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelGroup, i as DEFAULT_DECK_TRANSITION, lt as PanelResizeHandle, on as EyeOff, s as SlideSidebar, sn as Expand, st as Panel, t as useNotebookCodeAvailable, un as Code } from "./code-visibility-DQX0uy8x.js";
 import { X as useDebouncedCallback } from "./input-BSdZp5Ng.js";
 import "./toDate-D1Z7ZXWh.js";
 import "./react-dom-BTJzcVJ9.js";

package/package.json

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

package/src/components/editor/output/ImageOutput.tsx

@@ -17,18 +17,32 @@ export const ImageOutput = ({
   height,
   className,
 }: Props): JSX.Element => {
-  // Convert numeric values to pixel strings, pass string values (like "100%") as-is
+  // Numeric dimensions are set as HTML attributes rather than inline styles.
+  // Attributes give the browser the image's intrinsic size and aspect ratio,
+  // but can still be overridden by stylesheet rules (`max-width: 100%;
+  // height: auto` from preflight), so images shrink proportionally in
+  // width-constrained containers like mo.hstack. Inline styles would win
+  // over `height: auto` and distort the aspect ratio.
+  //
+  // String values like "100%" are only valid in CSS, so they go in the
+  // style attribute.
   const style: React.CSSProperties = {};
-  if (width !== undefined) {
-    style.width = typeof width === "number" ? `${width}px` : width;
+  if (typeof width === "string") {
+    style.width = width;
   }
-  if (height !== undefined) {
-    style.height = typeof height === "number" ? `${height}px` : height;
+  if (typeof height === "string") {
+    style.height = height;
   }
 
   return (
     <span className={className}>
-      <img src={src} alt={alt} style={style} />
+      <img
+        src={src}
+        alt={alt}
+        width={typeof width === "number" ? width : undefined}
+        height={typeof height === "number" ? height : undefined}
+        style={style}
+      />
     </span>
   );
 };

package/src/components/editor/output/__tests__/ImageOutput.test.tsx

@@ -0,0 +1,53 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { ImageOutput } from "../ImageOutput";
+
+const src = "data:image/png;base64,iVBORw0KGgo=";
+
+describe("ImageOutput", () => {
+  it("renders numeric dimensions as HTML attributes", () => {
+    // Attributes (not inline styles) let stylesheet rules like
+    // `max-width: 100%; height: auto` shrink the image proportionally,
+    // preserving its aspect ratio in width-constrained containers.
+    const { container } = render(
+      <ImageOutput src={src} width={640} height={480} />,
+    );
+    const img = container.querySelector("img");
+    expect(img).toHaveAttribute("width", "640");
+    expect(img).toHaveAttribute("height", "480");
+    expect(img?.style.width).toBe("");
+    expect(img?.style.height).toBe("");
+  });
+
+  it("renders string dimensions as inline styles", () => {
+    const { container } = render(
+      <ImageOutput src={src} width="50%" height="100%" />,
+    );
+    const img = container.querySelector("img");
+    expect(img).not.toHaveAttribute("width");
+    expect(img).not.toHaveAttribute("height");
+    expect(img?.style.width).toBe("50%");
+    expect(img?.style.height).toBe("100%");
+  });
+
+  it("supports mixed numeric and string dimensions", () => {
+    const { container } = render(
+      <ImageOutput src={src} width={640} height="100%" />,
+    );
+    const img = container.querySelector("img");
+    expect(img).toHaveAttribute("width", "640");
+    expect(img).not.toHaveAttribute("height");
+    expect(img?.style.height).toBe("100%");
+  });
+
+  it("renders without dimensions", () => {
+    const { container } = render(<ImageOutput src={src} />);
+    const img = container.querySelector("img");
+    expect(img).not.toBeNull();
+    expect(img).not.toHaveAttribute("width");
+    expect(img).not.toHaveAttribute("height");
+    expect(img).toHaveAttribute("src", src);
+  });
+});