@atlaskit/editor-plugin-media 20.0.4 → 20.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-media
 
+## 20.1.0
+
+### Minor Changes
+
+- [`2d026706450c6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2d026706450c6) -
+  Add the `allowAIGeneratedMediaMotion` media plugin option and the `hasLoadingMotion` card prop, so
+  media that arrives mid-flight opens the document out to make room for itself and then fades its
+  preview in, instead of drawing a loading indicator and snapping into place. Behind
+  `aifc_page_create_defer_generated_visuals`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 20.0.4
 
 ### Patch Changes

package/dist/cjs/nodeviews/mediaNodeView/media.js

@@ -28,10 +28,13 @@ var _mediaCard = require("@atlaskit/media-card");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _editorExperiment = require("@atlaskit/tmp-editor-statsig/editor-experiment");
 var _pluginKey = require("../../pm-plugins/plugin-key");
+var _GeneratedMediaReveal = require("../../ui/GeneratedMediaReveal");
+var _mediaNodeUpdater = require("../mediaNodeUpdater");
 var _styles = require("../styles");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t3 in e) "default" !== _t3 && {}.hasOwnProperty.call(e, _t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t3)) && (i.get || i.set) ? o(f, _t3, i) : f[_t3] = e[_t3]); return f; })(e, t); }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t4 in e) "default" !== _t4 && {}.hasOwnProperty.call(e, _t4) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t4)) && (i.get || i.set) ? o(f, _t4, i) : f[_t4] = e[_t4]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -138,15 +141,73 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         canUpdateVideoCaptions: (0, _fg.fg)('platform_media_video_captions') ? !!viewAndUploadMediaClientConfig && !isViewOnly : false
       };
     }));
+    /**
+     * Media written straight into the document arrives without intrinsic dimensions, and the
+     * fetch that would supply them resolves `false` while the file is still processing. Only
+     * editor-driven uploads get a second attempt, from the plugin's media-state listener, so
+     * otherwise the card would keep its placeholder ratio forever. The preview rendering is the
+     * one moment the file is guaranteed ready, so the fetch is retried there.
+     */
+    (0, _defineProperty2.default)(_this, "fetchMissingDimensions", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var _pluginInjectionApi$w;
+      var _this$props, node, view, mediaProvider, contextIdentifierProvider, mediaOptions, pluginInjectionApi, updater, dimensions, _t;
+      return _regenerator.default.wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _this$props = _this.props, node = _this$props.node, view = _this$props.view, mediaProvider = _this$props.mediaProvider, contextIdentifierProvider = _this$props.contextIdentifierProvider, mediaOptions = _this$props.mediaOptions, pluginInjectionApi = _this$props.pluginInjectionApi;
+            if (!(node.attrs.type === 'external' || !node.attrs.id || node.attrs.width && node.attrs.height)) {
+              _context2.next = 1;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 1:
+            updater = (0, _mediaNodeUpdater.createMediaNodeUpdater)({
+              view: view,
+              mediaProvider: mediaProvider,
+              contextIdentifierProvider: contextIdentifierProvider,
+              node: node,
+              // Carries `allowRemoteDimensionsFetch`, so surfaces that cannot reach the media
+              // APIs get the default dimensions back instead of a request.
+              mediaOptions: mediaOptions,
+              isMediaSingle: true,
+              lineLength: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w = pluginInjectionApi.width) === null || _pluginInjectionApi$w === void 0 || (_pluginInjectionApi$w = _pluginInjectionApi$w.sharedState.currentState()) === null || _pluginInjectionApi$w === void 0 ? void 0 : _pluginInjectionApi$w.lineLength
+            });
+            _context2.prev = 2;
+            _context2.next = 3;
+            return updater.getRemoteDimensions();
+          case 3:
+            dimensions = _context2.sent;
+            if (dimensions) {
+              updater.updateDimensions(dimensions);
+            }
+            _context2.next = 5;
+            break;
+          case 4:
+            _context2.prev = 4;
+            _t = _context2["catch"](2);
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[2, 4]]);
+    })));
     (0, _defineProperty2.default)(_this, "onPreviewRender", function (fileId) {
       _this.emitMediaRenderEvent({
         renderedMediaId: fileId,
         type: 'preview-rendered'
       });
+      // Only tracked where the reveal uses it. Every media card in every editor calls this,
+      // and the extra render it would otherwise trigger is not free.
+      if (_this.hasGeneratedMediaMotion && _this.state.previewRenderedFileId !== fileId) {
+        _this.setState({
+          previewRenderedFileId: fileId
+        });
+        _this.fetchMissingDimensions();
+      }
       if ((0, _isExperimentEnabled.isExperimentEnabled)('aifc_page_create_with_rovo_include_infographics')) {
         var _this$props$pluginInj2;
-        (_this$props$pluginInj2 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.core) === null || _this$props$pluginInj2 === void 0 || _this$props$pluginInj2.actions.execute(function (_ref3) {
-          var tr = _ref3.tr;
+        (_this$props$pluginInj2 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.core) === null || _this$props$pluginInj2 === void 0 || _this$props$pluginInj2.actions.execute(function (_ref4) {
+          var tr = _ref4.tr;
           return tr.setMeta(_pluginKey.stateKey, {
             type: 'PREVIEW_RENDERED',
             fileId: fileId
@@ -156,10 +217,22 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)(_this, "onError", function (reason) {
       var _this$props$api;
+      // The card is already showing its error treatment, so let the reveal open onto
+      // that instead of waiting out its timeout.
+      _this.setState({
+        failedFileId: _this.props.node.attrs.id
+      });
       _this.emitMediaRenderEvent({
         reason: reason,
         type: 'error'
       });
+
+      // `getMediaRenderErrorHandler` also wires this for surfaces the analytics
+      // experiment does not cover, so re-read without exposure — the render-time read
+      // owns that — to keep the dispatch inside the experiment's own cohort.
+      if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_media_error_analytics', 'isEnabled', true)) {
+        return;
+      }
       var nestedUnder = _this.getNestedUnder();
       (_this$props$api = _this.props.api) === null || _this$props$api === void 0 || _this$props$api.media.actions.handleMediaNodeRenderError(_this.props.node, reason, nestedUnder);
     });
@@ -174,6 +247,12 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
       if ((0, _expValEquals.expValEquals)('platform_editor_media_error_analytics', 'isEnabled', true)) {
         return _this.onError;
       }
+      // The reveal needs terminal errors too, so it can open onto the card's error treatment
+      // rather than waiting out its timeout. `onError` keeps the analytics dispatch itself
+      // inside the experiment's cohort.
+      if (_this.hasGeneratedMediaMotion) {
+        return _this.onError;
+      }
       return (_this$props$mediaOpti = _this.props.mediaOptions) !== null && _this$props$mediaOpti !== void 0 && _this$props$mediaOpti.onMediaRenderEvent ? _this.onRemixRenderError : undefined;
     });
     /**
@@ -212,10 +291,10 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         return _this.props.getPos();
       });
     });
-    var _this$props = _this.props,
-      view = _this$props.view,
-      syncProvider = _this$props.syncProvider;
-    _this.mediaPluginState = _pluginKey.stateKey.getState(view.state);
+    var _this$props2 = _this.props,
+      _view = _this$props2.view,
+      syncProvider = _this$props2.syncProvider;
+    _this.mediaPluginState = _pluginKey.stateKey.getState(_view.state);
 
     // Initialize state from syncProvider (available on both server and client for SSR)
     if (syncProvider) {
@@ -233,7 +312,9 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
       var _this$props$mediaOpti2, _nextProps$mediaOptio;
       var hasNewViewMediaClientConfig = !this.state.viewMediaClientConfig && nextState.viewMediaClientConfig;
       var hasNewViewAndUploadMediaClientConfig = !this.state.viewAndUploadMediaClientConfig && nextState.viewAndUploadMediaClientConfig;
-      if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.isCwrAIGenerating !== nextProps.isCwrAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.isViewOnly !== nextProps.isViewOnly || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || this.getDataConsumerSource() !== this.getDataConsumerSource(nextProps) || ((_this$props$mediaOpti2 = this.props.mediaOptions) === null || _this$props$mediaOpti2 === void 0 ? void 0 : _this$props$mediaOpti2.onMediaRenderEvent) !== ((_nextProps$mediaOptio = nextProps.mediaOptions) === null || _nextProps$mediaOptio === void 0 ? void 0 : _nextProps$mediaOptio.onMediaRenderEvent) || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
+      if (this.props.selected !== nextProps.selected || this.props.node.attrs.id !== nextProps.node.attrs.id || this.props.node.attrs.collection !== nextProps.node.attrs.collection ||
+      // Patched in asynchronously once media services report the real size.
+      this.props.node.attrs.width !== nextProps.node.attrs.width || this.props.node.attrs.height !== nextProps.node.attrs.height || this.props.isAIGenerating !== nextProps.isAIGenerating || this.props.isCwrAIGenerating !== nextProps.isCwrAIGenerating || this.props.maxDimensions.height !== nextProps.maxDimensions.height || this.props.maxDimensions.width !== nextProps.maxDimensions.width || this.props.contextIdentifierProvider !== nextProps.contextIdentifierProvider || this.props.isLoading !== nextProps.isLoading || this.props.isViewOnly !== nextProps.isViewOnly || this.props.mediaProvider !== nextProps.mediaProvider || this.props.syncProvider !== nextProps.syncProvider || this.getDataConsumerSource() !== this.getDataConsumerSource(nextProps) || ((_this$props$mediaOpti2 = this.props.mediaOptions) === null || _this$props$mediaOpti2 === void 0 ? void 0 : _this$props$mediaOpti2.onMediaRenderEvent) !== ((_nextProps$mediaOptio = nextProps.mediaOptions) === null || _nextProps$mediaOptio === void 0 ? void 0 : _nextProps$mediaOptio.onMediaRenderEvent) || this.state.previewRenderedFileId !== nextState.previewRenderedFileId || this.state.failedFileId !== nextState.failedFileId || hasNewViewMediaClientConfig || hasNewViewAndUploadMediaClientConfig) {
         return true;
       }
       return false;
@@ -241,17 +322,17 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function () {
-      var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
         var _dataConsumerMark$att;
-        var _this$props2, node, pluginInjectionApi, dataConsumerMark, infographicType, _pluginInjectionApi$a, contextIdentifierProvider, _t, _t2;
-        return _regenerator.default.wrap(function (_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+        var _this$props3, node, pluginInjectionApi, dataConsumerMark, infographicType, _pluginInjectionApi$a, contextIdentifierProvider, _t2, _t3;
+        return _regenerator.default.wrap(function (_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
               this.handleNewNode(this.props);
               this.emitMediaRenderEvent({
                 type: 'mounted'
               });
-              _this$props2 = this.props, node = _this$props2.node, pluginInjectionApi = _this$props2.pluginInjectionApi;
+              _this$props3 = this.props, node = _this$props3.node, pluginInjectionApi = _this$props3.pluginInjectionApi;
               dataConsumerMark = this.getDataConsumerMark();
               infographicType = dataConsumerMark === null || dataConsumerMark === void 0 || (_dataConsumerMark$att = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att === void 0 ? void 0 : _dataConsumerMark$att[0];
               if (infographicType) {
@@ -268,21 +349,21 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
                 });
               }
               contextIdentifierProvider = this.props.contextIdentifierProvider;
-              _t = this;
-              _context2.next = 1;
+              _t2 = this;
+              _context3.next = 1;
               return contextIdentifierProvider;
             case 1:
-              _t2 = _context2.sent;
-              _t.setState.call(_t, {
-                contextIdentifierProvider: _t2
+              _t3 = _context3.sent;
+              _t2.setState.call(_t2, {
+                contextIdentifierProvider: _t3
               });
-              _context2.next = 2;
+              _context3.next = 2;
               return this.setViewMediaClientConfig();
             case 2:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2, this);
+        }, _callee3, this);
       }));
       function componentDidMount() {
         return _componentDidMount.apply(this, arguments);
@@ -374,17 +455,32 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         });
       }
     }
+  }, {
+    key: "hasGeneratedMediaMotion",
+    get:
+    /**
+     * Surface opt-in first, so surfaces that never ask for the motion are not exposed to the
+     * gate. The node type is checked after it, so every node on an opted-in surface counts
+     * towards the same exposure population.
+     */
+    function get() {
+      var _this$props$mediaOpti4;
+      return !!((_this$props$mediaOpti4 = this.props.mediaOptions) !== null && _this$props$mediaOpti4 !== void 0 && _this$props$mediaOpti4.allowAIGeneratedMediaMotion) && (0, _fg.fg)('aifc_page_create_defer_generated_visuals') &&
+      // File-backed only: `ExternalImageCard` reports neither its rendered preview nor its
+      // dimensions, so an external node could only ever open on the reveal's timeout.
+      this.props.node.attrs.type !== 'external';
+    }
   }, {
     key: "render",
     value: function render() {
       var _dataConsumerMark$att2;
-      var _this$props3 = this.props,
-        node = _this$props3.node,
-        selected = _this$props3.selected,
-        originalDimensions = _this$props3.originalDimensions,
-        isLoading = _this$props3.isLoading,
-        maxDimensions = _this$props3.maxDimensions,
-        mediaOptions = _this$props3.mediaOptions;
+      var _this$props4 = this.props,
+        node = _this$props4.node,
+        selected = _this$props4.selected,
+        originalDimensions = _this$props4.originalDimensions,
+        isLoading = _this$props4.isLoading,
+        maxDimensions = _this$props4.maxDimensions,
+        mediaOptions = _this$props4.mediaOptions;
       var borderMark = node.marks.find(function (m) {
         return m.type.name === 'border';
       });
@@ -402,14 +498,26 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
 
       // Check if we have any media client config available (syncProvider, state, or upload config)
       var hasNoMediaClientConfig = !viewMediaClientConfig && ((0, _fg.fg)('platform_media_video_captions') ? !viewAndUploadMediaClientConfig : true);
+      var hasGeneratedMediaMotion = this.hasGeneratedMediaMotion;
+
+      // Opening before the real dimensions land would animate to the wrong height and snap
+      // when they correct. Nodes that never get them fall through to the reveal's timeout.
+      //
+      // A terminal error is readiness too: the card is already showing its error treatment,
+      // so the space opens onto that rather than hiding it until the timeout.
+      var isRevealReady = this.state.failedFileId === id || this.state.previewRenderedFileId === id && !!node.attrs.width && !!node.attrs.height;
       if (isLoading || type !== 'external' && hasNoMediaClientConfig) {
-        return /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
+        return /*#__PURE__*/_react.default.createElement(_GeneratedMediaReveal.GeneratedMediaReveal, {
+          isEnabled: hasGeneratedMediaMotion,
+          isReady: isRevealReady,
+          mediaKey: id
+        }, /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
           dimensions: originalDimensions,
           borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
           selected: selected
         }, /*#__PURE__*/_react.default.createElement(_mediaCard.CardLoading, {
           interactionName: "editor-media-card-loading"
-        }));
+        })));
       }
       var contextId = contextIdentifierProvider && contextIdentifierProvider.objectId;
       var identifier = type === 'external' ? {
@@ -442,7 +550,11 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
       // generic media type icon isn't shown while the image streams in. Gated on the
       // existing infographics experiment.
       var isCWR = !!this.props.isCwrAIGenerating && (0, _isExperimentEnabled.isExperimentEnabled)('aifc_page_create_with_rovo_include_infographics');
-      return /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
+      return /*#__PURE__*/_react.default.createElement(_GeneratedMediaReveal.GeneratedMediaReveal, {
+        isEnabled: hasGeneratedMediaMotion,
+        isReady: isRevealReady,
+        mediaKey: id
+      }, /*#__PURE__*/_react.default.createElement(_styles.MediaCardWrapper, {
         dimensions: originalDimensions,
         onContextMenu: this.selectMediaSingle,
         borderWidth: borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size,
@@ -477,10 +589,11 @@ var MediaNode = exports.MediaNode = /*#__PURE__*/function (_Component) {
         mediaSettings: this.getMediaSettings(viewAndUploadMediaClientConfig, this.props.isViewOnly),
         isAIGenerating: !!this.props.isAIGenerating,
         isCWR: isCWR,
+        hasLoadingMotion: hasGeneratedMediaMotion,
         onPreviewRender: this.onPreviewRender,
         fallbackMediaNameFetcher: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.fallbackMediaNameFetcher,
         onError: this.getMediaRenderErrorHandler()
-      })));
+      }))));
     }
   }]);
 }(_react.Component);

package/dist/cjs/ui/GeneratedMediaReveal.compiled.css

@@ -0,0 +1,12 @@
+._18m915vq{overflow-y:hidden}
+._1e0c11p5{display:grid}
+._1o51eoah{animation-fill-mode:backwards}
+._1pglindk{animation-timing-function:var(--ds-easing-out-practical,cubic-bezier(.4,1,.6,1))}
+._1reo15vq{overflow-x:hidden}
+._1tkeidpf{min-height:0}
+._2z0563bf{grid-template-rows:0fr}
+._2z05hkll{grid-template-rows:1fr}
+._5sag15uc{animation-duration:var(--ds-duration-xlong,.4s)}
+._j7hq8gkt{animation-name:kaq7wke}
+@keyframes kaq7wke{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}
+@media (prefers-reduced-motion:reduce){._1bumglyw{animation:none}}

package/dist/cjs/ui/GeneratedMediaReveal.js

@@ -0,0 +1,124 @@
+/* GeneratedMediaReveal.tsx generated by @compiled/babel-plugin v3.0.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GeneratedMediaReveal = void 0;
+require("./GeneratedMediaReveal.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * Only `collapsed` and `revealing` size and clip the content. `open` drops back to plain
+ * block layout, so the reveal leaves nothing behind for selection outlines, resize handles
+ * or badges to collide with.
+ */
+
+/** Which path opened the node. Surfaced as a data attribute for debugging. */
+
+// A `0fr -> 1fr` grid row opens out to the content's natural height without anyone having to
+// measure it, which matters because the card's height comes from an aspect-ratio padding
+// further down the tree.
+var openRow = null;
+var collapsedStyles = null;
+var revealStyles = null;
+var clippedStyles = null;
+
+/**
+ * Fail-safe, not a normal path: opens the node even if the preview never reports itself
+ * rendered, so a failed or hanging image still ends up visible rather than staying collapsed.
+ * Also covers lazy loading, where a card collapsed to zero height may never satisfy the
+ * IntersectionObserver that triggers its fetch.
+ *
+ * Deliberately generous, because opening early is worse than opening late — the space then
+ * reveals the card's own loading treatment instead of the image, and an AI-generated image has
+ * to be generated, uploaded, processed and fetched first. `data-media-reveal-trigger` shows
+ * which path fired; `timeout` in normal use means the readiness signal is broken.
+ */
+var READY_TIMEOUT_MS = 30000;
+
+// Backstop for reduced motion and browsers that don't interpolate grid-template-rows, where no
+// animationend fires. Must stay comfortably longer than the reveal, or it cuts it off part way.
+var REVEAL_TIMEOUT_MS = 1000;
+/**
+ * Opens the document out to make room for a media node once its preview is ready, rather than
+ * having the node snap into place at full height. For AI-generated media in the Create with
+ * Rovo preview, where images are inserted after the surrounding content has streamed in:
+ * holding the node closed until the preview has rendered means the space opens exactly once,
+ * with the image already fading in, so there is no placeholder to look at in between.
+ */
+var GeneratedMediaReveal = exports.GeneratedMediaReveal = function GeneratedMediaReveal(_ref) {
+  var children = _ref.children,
+    isEnabled = _ref.isEnabled,
+    isReady = _ref.isReady,
+    mediaKey = _ref.mediaKey;
+  var _useState = (0, _react.useState)('collapsed'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    trigger = _useState4[0],
+    setTrigger = _useState4[1];
+
+  // Reset during render rather than remounting on a `key`, which would also remount the card
+  // below and restart its fetch. The reveal's effect only runs while `collapsed`, so without
+  // this a replacement would appear at once, having inherited the previous file's `open`.
+  var _useState5 = (0, _react.useState)(mediaKey),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    renderedMediaKey = _useState6[0],
+    setRenderedMediaKey = _useState6[1];
+  if (mediaKey !== renderedMediaKey) {
+    setRenderedMediaKey(mediaKey);
+    setState('collapsed');
+    setTrigger(undefined);
+  }
+  (0, _react.useEffect)(function () {
+    if (!isEnabled || state !== 'collapsed') {
+      return;
+    }
+    if (isReady) {
+      setTrigger('ready');
+      setState('revealing');
+      return;
+    }
+    var timer = setTimeout(function () {
+      setTrigger('timeout');
+      setState('revealing');
+    }, READY_TIMEOUT_MS);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [isEnabled, isReady, state]);
+  (0, _react.useEffect)(function () {
+    if (state !== 'revealing') {
+      return;
+    }
+    var timer = setTimeout(function () {
+      return setState('open');
+    }, REVEAL_TIMEOUT_MS);
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [state]);
+  if (!isEnabled) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-media-reveal": state,
+    "data-media-reveal-trigger": trigger,
+    onAnimationEnd: function onAnimationEnd(event) {
+      // The media card runs animations of its own, which bubble through here.
+      if (event.target === event.currentTarget) {
+        setState('open');
+      }
+    },
+    className: (0, _runtime.ax)([state === 'collapsed' && "_1e0c11p5 _2z0563bf", state === 'revealing' && "", state === 'revealing' && "_1e0c11p5 _2z05hkll _j7hq8gkt _5sag15uc _1pglindk _1o51eoah _1bumglyw"])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)([state !== 'open' && "_1reo15vq _18m915vq _1tkeidpf"])
+  }, children));
+};