@activecollab/components 2.0.424 → 2.0.426

package/dist/index.js

@@ -26196,16 +26196,52 @@
   var StyledMedia = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledMedia",
     componentId: "sc-zjz7mh-0"
-  })(["display:flex;flex-direction:column;gap:", ";width:100%;.c-media-frame{", "}.c-media-frame img{display:block;width:100%;height:auto;}"], SPACE.sm, function (_ref) {
+  })(["display:flex;flex-direction:column;gap:", ";width:100%;.c-media-frame{width:fit-content;max-width:100%;margin-inline:auto;", "}.c-media-frame img{display:block;height:auto;", "}"], SPACE.sm, function (_ref) {
     var $bordered = _ref.$bordered;
     return $bordered && styled.css(["overflow:hidden;border:1px solid var(--border-primary);border-radius:", ";"], "0.5rem");
+  }, function (_ref2) {
+    var $sized = _ref2.$sized;
+    return $sized ? styled.css(["max-width:100%;"]) : styled.css(["width:100%;"]);
   });
   StyledMedia.displayName = "StyledMedia";
 
-  var _excluded$q = ["src", "alt", "variant", "caption"];
+  var _excluded$q = ["src", "alt", "variant", "caption", "width", "height", "density"];
+  /** A tall image (height greater than width) is capped at this display height. */
+  var MEDIA_PORTRAIT_MAX_HEIGHT = 680;
+
+  /**
+   * The box the `<img>` is laid out in, in CSS pixels. A portrait image taller
+   * than the cap is scaled down to the cap, keeping its aspect ratio. Resolving
+   * the cap here — rather than with `width: auto; max-height` in CSS — keeps the
+   * size independent of the file's natural pixel size, so a 2x capture without a
+   * `density` (and therefore no `srcset` descriptor) never renders upscaled.
+   */
+  var displaySize = function displaySize(width, height) {
+    if (width == null || height == null) {
+      return undefined;
+    }
+    if (height > width && height > MEDIA_PORTRAIT_MAX_HEIGHT) {
+      return {
+        width: Math.round(width * MEDIA_PORTRAIT_MAX_HEIGHT / height),
+        height: MEDIA_PORTRAIT_MAX_HEIGHT
+      };
+    }
+    return {
+      width,
+      height
+    };
+  };
+
   /**
    * An image block: a screenshot renders framed (border, no shadow), a flat
    * illustration renders without a frame. The caption sits below the frame.
+   *
+   * `width`/`height` are the image's real display size in CSS pixels, measured
+   * at compile time. When present, the image renders at that size — centered,
+   * capped at the column width, never upscaled — and the `<img>` reserves the
+   * space so the layout does not jump as it loads. A tall image (height greater
+   * than width) is capped by height instead. When absent (e.g. a remote source
+   * the build could not measure), the image falls back to the column-width cap.
    */
   var Media = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var src = _ref.src,
@@ -26213,15 +26249,23 @@
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "illustration" : _ref$variant,
       caption = _ref.caption,
+      width = _ref.width,
+      height = _ref.height,
+      density = _ref.density,
       rest = _objectWithoutProperties(_ref, _excluded$q);
+    var size = displaySize(width, height);
     return /*#__PURE__*/React__default["default"].createElement(StyledMedia, _extends({
       ref: ref,
-      $bordered: variant === "screenshot"
+      $bordered: variant === "screenshot",
+      $sized: size !== undefined
     }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
       className: "c-media-frame"
     }, /*#__PURE__*/React__default["default"].createElement("img", {
       src: src,
-      alt: alt !== null && alt !== void 0 ? alt : ""
+      alt: alt !== null && alt !== void 0 ? alt : "",
+      width: size === null || size === void 0 ? void 0 : size.width,
+      height: size === null || size === void 0 ? void 0 : size.height,
+      srcSet: density ? "".concat(src, " ").concat(density, "x") : undefined
     })), caption ? /*#__PURE__*/React__default["default"].createElement(Caption1, {
       color: "secondary"
     }, caption) : null);
@@ -26413,7 +26457,10 @@
         src = _ref1.src,
         alt = _ref1.alt,
         variant = _ref1.variant,
-        caption = _ref1.caption;
+        caption = _ref1.caption,
+        width = _ref1.width,
+        height = _ref1.height,
+        density = _ref1.density;
 
       // Video (and future) variants carry service semantics, so their renderer
       // is application-catalog territory — an injected `media` override. The
@@ -26427,7 +26474,10 @@
         src: src,
         alt: alt,
         variant: variant,
-        caption: caption
+        caption: caption,
+        width: width,
+        height: height,
+        density: density
       });
     },
     "titled-text": function titledText(_ref10) {
@@ -31013,6 +31063,7 @@
   exports.ListSeparator = ListSeparator;
   exports.LockIcon = LockIcon$1;
   exports.LockSmallIcon = LockSmallIcon$1;
+  exports.MEDIA_PORTRAIT_MAX_HEIGHT = MEDIA_PORTRAIT_MAX_HEIGHT;
   exports.MarkerIcon = MarkerIcon$1;
   exports.MeasuredPane = MeasuredPane;
   exports.Media = Media;