contentoh-components-library 21.6.53 → 21.6.54

package/dist/components/molecules/GalleryAssetElement/index.js

@@ -0,0 +1,178 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GalleryAssetElement = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
+
+var _styles = require("./styles");
+
+var _AssetPreview = require("../../atoms/AssetPreview");
+
+var _CheckBox = require("../../atoms/CheckBox");
+
+var _Select = _interopRequireDefault(require("../../atoms/Select"));
+
+var _assetTypes = require("../../../global-files/digital-assets/assetTypes");
+
+var _assets = require("../../../global-files/digital-assets/assets.adapter");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+/*
+  Fila de un activo digital en la bandeja.
+
+  Es un componente aparte de `GalleryElement` a propósito, no una bifurcación
+  dentro de él. Un activo no comparte casi nada con una imagen de producto: no
+  tiene tipo de toma, ni leyenda, ni panel de validación, ni comparación contra
+  la versión auditable. Meterlo en el mismo archivo habría partido su render en
+  dos mitades y puesto en riesgo la bandeja de imágenes, que ya funciona.
+
+  Lo que sí comparte —rejilla, tamaños, colores— vive en los estilos, calcados
+  de `GalleryElement` para que las dos listas se vean como una sola tabla.
+*/
+var GalleryAssetElement = function GalleryAssetElement(_ref) {
+  var _asset$progress;
+
+  var _ref$asset = _ref.asset,
+      asset = _ref$asset === void 0 ? {} : _ref$asset,
+      _ref$index = _ref.index,
+      index = _ref$index === void 0 ? 0 : _ref$index,
+      _ref$gridLayout = _ref.gridLayout,
+      gridLayout = _ref$gridLayout === void 0 ? false : _ref$gridLayout,
+      id = _ref.id,
+      label = _ref.label,
+      _ref$selectedAssets = _ref.selectedAssets,
+      selectedAssets = _ref$selectedAssets === void 0 ? [] : _ref$selectedAssets,
+      setSelectedAssets = _ref.setSelectedAssets,
+      setCheckAll = _ref.setCheckAll,
+      changeAsset = _ref.changeAsset,
+      onRemove = _ref.onRemove,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      _ref$checkAllId = _ref.checkAllId,
+      checkAllId = _ref$checkAllId === void 0 ? "check-all-assets" : _ref$checkAllId,
+      _ref$itemSelector = _ref.itemSelector,
+      itemSelector = _ref$itemSelector === void 0 ? "[id^='gallery-asset-']" : _ref$itemSelector;
+  var elementId = id || "gallery-asset-".concat(index);
+  var key = (0, _assets.assetKey)(asset);
+  var isUploading = asset.status === _assets.ASSET_STATUS.UPLOADING;
+  var hasError = asset.status === _assets.ASSET_STATUS.ERROR;
+
+  var checkOnChange = function checkOnChange(e) {
+    var chkGlobal = document.getElementById(checkAllId);
+    var checkboxList = document.querySelectorAll(itemSelector);
+    var temp = selectedAssets.slice(); // Se compara por `assetKey` y no por `id`: un activo recién soltado todavía
+    // no tiene id del backend, y comparando por id todos los pendientes serían
+    // "el mismo" y se quitarían juntos de la selección.
+
+    temp = e.target.checked ? [].concat((0, _toConsumableArray2.default)(temp), [asset]) : temp.filter(function (item) {
+      return (0, _assets.assetKey)(item) !== key;
+    });
+    var counter = 0;
+    checkboxList === null || checkboxList === void 0 ? void 0 : checkboxList.forEach(function (chk) {
+      return chk.checked && counter++;
+    });
+    if (chkGlobal) chkGlobal.checked = checkboxList.length === counter;
+    setCheckAll === null || setCheckAll === void 0 ? void 0 : setCheckAll(checkboxList.length === counter);
+    setSelectedAssets === null || setSelectedAssets === void 0 ? void 0 : setSelectedAssets(temp);
+  };
+  /*
+    Abrir el activo en otra pestaña.
+     Sirve para TODOS los tipos y por eso se prefiere a un visor propio: un video
+    se reproduce con el reproductor del navegador, un PDF se abre, y un .psd se
+    descarga. Sin esto, la bandeja mostraba el archivo pero no había forma de
+    verlo — un video quedaba como un fotograma fijo sin botón de reproducir.
+     Solo cuando ya está en S3: un activo recién soltado apunta al archivo del
+    disco del usuario y abrirlo no le diría nada nuevo.
+  */
+
+
+  var abrir = function abrir() {
+    if (!asset.id || !asset.url) return;
+    window.open(asset.url, "_blank", "noopener,noreferrer");
+  };
+
+  var onChangeType = function onChangeType(e) {
+    changeAsset === null || changeAsset === void 0 ? void 0 : changeAsset({
+      action: "changeAssetInfo",
+      attribute: "assetType",
+      value: e.target.value,
+      index: index
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    className: "".concat(gridLayout ? "grid-gallery" : "row-gallery", " ").concat(hasError ? "asset-error" : "").trim(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "buttons-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.CheckBox, {
+        id: elementId,
+        label: label,
+        onChange: checkOnChange
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "asset-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AssetPreview.AssetPreview, {
+        asset: asset,
+        size: "catalogue-image-".concat(gridLayout ? "big" : "small", "-size")
+        /*
+          En cuadrícula hay sitio para el reproductor; en la fila, de 60px,
+          los controles no caben y estorban al clic.
+        */
+        ,
+        controls: gridLayout && (0, _assetTypes.resolvePreviewKind)(asset) === _assetTypes.ASSET_PREVIEW.VIDEO,
+        onClick: abrir
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: "information-container",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          className: asset.id ? "asset-name asset-link" : "asset-name",
+          title: asset.id ? "Abrir ".concat(asset.name) : asset.name,
+          onClick: abrir,
+          children: asset.name
+        }), !gridLayout && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: "asset-weight",
+            children: (0, _assetTypes.formatBytes)(asset.sizeBytes)
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+            className: "asset-format",
+            children: (asset.ext || "").toUpperCase()
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+            width: "100%",
+            placeholder: "Tipo de activo",
+            options: (0, _assetTypes.assetTypeOptions)(),
+            valueSelected: asset.assetType,
+            onChange: onChangeType,
+            className: readOnly ? "disabled" : ""
+          })]
+        })]
+      })]
+    }), isUploading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "asset-progress",
+      "aria-label": "Subiendo activo",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "asset-progress-fill",
+        style: {
+          width: "".concat(Math.min(100, Math.max(0, (_asset$progress = asset.progress) !== null && _asset$progress !== void 0 ? _asset$progress : 0)), "%")
+        }
+      })
+    }), hasError && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+      className: "asset-error-message",
+      children: asset.error
+    }), onRemove && !readOnly && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      className: "asset-remove",
+      onClick: function onClick() {
+        return onRemove(asset);
+      },
+      title: "Quitar activo",
+      children: "\xD7"
+    })]
+  });
+};
+
+exports.GalleryAssetElement = GalleryAssetElement;

package/dist/components/molecules/GalleryAssetElement/styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+/*
+  Calcado de `GalleryElement/styles.js` para que imágenes y activos se lean como
+  una sola tabla. Cambia solo la rejilla de la fila —cuatro columnas en vez de
+  cinco, porque un activo no tiene leyenda— y lo propio de un archivo que se
+  está subiendo: barra de progreso, mensaje de error y botón de quitar.
+*/
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n\n  &.grid-gallery {\n    width: 179px;\n    border-radius: 3px;\n    overflow: hidden;\n\n    .buttons-container {\n      position: absolute;\n      top: 5px;\n      left: 5px;\n      z-index: 1;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .asset-container {\n      border: 1px solid #f0eef2;\n\n      .information-container {\n        background-color: ", ";\n        display: flex;\n        justify-content: space-between;\n        padding: 0 2px;\n\n        p {\n          font-family: ", ";\n          color: ", ";\n          font-size: 11px;\n          line-height: 17px;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n      }\n    }\n  }\n\n  &.row-gallery {\n    width: 100%;\n    display: grid;\n    grid-template-columns: 0.05fr 1fr;\n    align-items: center;\n    padding-right: 10px;\n\n    .buttons-container {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    .asset-container {\n      display: grid;\n      grid-template-columns: auto 1fr;\n      align-items: center;\n      flex: 1;\n\n      .information-container {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        align-items: center;\n\n        p {\n          font-family: ", ";\n          color: ", ";\n          font-size: 14px;\n          line-height: 17px;\n          text-align: center;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n        }\n\n        & > * {\n          flex: 1;\n          padding: 5px;\n        }\n      }\n    }\n  }\n\n  /* El nombre es el sitio donde uno intenta hacer clic para abrir un archivo. */\n  .asset-link {\n    cursor: pointer;\n    text-decoration: underline;\n    text-underline-offset: 2px;\n\n    &:hover {\n      color: ", ";\n    }\n  }\n\n  &.asset-error {\n    border: 1px solid ", ";\n    border-radius: 3px;\n  }\n\n  /* Progreso de subida. Ocupa el borde inferior de la fila para no empujar el\n     resto del contenido mientras aparece y desaparece. */\n  .asset-progress {\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    height: 3px;\n    background: ", ";\n    border-radius: 2px;\n    overflow: hidden;\n  }\n\n  .asset-progress-fill {\n    height: 100%;\n    background: ", ";\n    transition: width 0.2s ease-out;\n  }\n\n  .asset-error-message {\n    margin: 2px 0 0;\n    padding: 0 8px;\n    font-family: ", ";\n    font-size: 11px;\n    line-height: 15px;\n    color: ", ";\n  }\n\n  .asset-remove {\n    position: absolute;\n    top: 4px;\n    right: 6px;\n    width: 18px;\n    height: 18px;\n    display: grid;\n    place-items: center;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: ", ";\n    color: ", ";\n    font-size: 14px;\n    line-height: 1;\n    cursor: pointer;\n\n    &:hover {\n      background: ", ";\n    }\n  }\n"])), _variables.GlobalColors.s2, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.FontFamily.Lato, _variables.GlobalColors.s4, _variables.GlobalColors.color_purple, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.s3, _variables.GlobalColors.color_purple, _variables.FontFamily.Lato, _variables.GlobalColors.secondary_magenta, _variables.GlobalColors.s2, _variables.GlobalColors.s5, _variables.GlobalColors.s3);
+
+exports.Container = Container;

package/dist/components/molecules/GalleryTrayTabs/GalleryTrayTabs.stories.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SinActivos = exports.Interactivo = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/GalleryTrayTabs",
+  component: _index.GalleryTrayTabs
+};
+exports.default = _default;
+
+var Interactivo = function Interactivo() {
+  var _useState = (0, _react.useState)(_index.TRAYS.IMAGES),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      tray = _useState2[0],
+      setTray = _useState2[1];
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GalleryTrayTabs, {
+    activeTray: tray,
+    setActiveTray: setTray,
+    imagesCount: 8,
+    assetsCount: 3
+  });
+};
+/** Estado real hasta que exista el backend: la bandeja de activos en cero. */
+
+
+exports.Interactivo = Interactivo;
+
+var SinActivos = function SinActivos() {
+  var _useState3 = (0, _react.useState)(_index.TRAYS.IMAGES),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      tray = _useState4[0],
+      setTray = _useState4[1];
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.GalleryTrayTabs, {
+    activeTray: tray,
+    setActiveTray: setTray,
+    imagesCount: 8,
+    assetsCount: 0
+  });
+};
+
+exports.SinActivos = SinActivos;

package/dist/components/molecules/GalleryTrayTabs/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TRAYS = exports.GalleryTrayTabs = void 0;
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var TRAYS = {
+  IMAGES: "images",
+  ASSETS: "assets"
+};
+/**
+ * Selector entre las dos bandejas de la pestaña Imágenes.
+ *
+ * Los activos viven aquí y no en una pestaña propia porque es lo que pide la
+ * tarea —"dentro de las bandejas de imágenes"— y porque así comparten
+ * selección, descarga y permisos con las fotos en vez de duplicarlos.
+ */
+
+exports.TRAYS = TRAYS;
+
+var GalleryTrayTabs = function GalleryTrayTabs(_ref) {
+  var _ref$activeTray = _ref.activeTray,
+      activeTray = _ref$activeTray === void 0 ? TRAYS.IMAGES : _ref$activeTray,
+      setActiveTray = _ref.setActiveTray,
+      _ref$imagesCount = _ref.imagesCount,
+      imagesCount = _ref$imagesCount === void 0 ? 0 : _ref$imagesCount,
+      _ref$assetsCount = _ref.assetsCount,
+      assetsCount = _ref$assetsCount === void 0 ? 0 : _ref$assetsCount;
+  var trays = [{
+    id: TRAYS.IMAGES,
+    label: "Imágenes",
+    count: imagesCount
+  }, {
+    id: TRAYS.ASSETS,
+    label: "Activos digitales",
+    count: assetsCount
+  }];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: trays.map(function (tray) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
+        type: "button",
+        className: tray.id === activeTray ? "tray-tab active" : "tray-tab",
+        onClick: function onClick() {
+          return setActiveTray === null || setActiveTray === void 0 ? void 0 : setActiveTray(tray.id);
+        },
+        children: [tray.label, /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "tray-count",
+          children: tray.count
+        })]
+      }, tray.id);
+    })
+  });
+};
+
+exports.GalleryTrayTabs = GalleryTrayTabs;

package/dist/components/molecules/GalleryTrayTabs/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 8px 0 0;\n\n  .tray-tab {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 14px;\n    border: none;\n    border-bottom: 2px solid transparent;\n    background: none;\n    cursor: pointer;\n    font-family: ", ";\n    font-size: 14px;\n    line-height: 21px;\n    letter-spacing: -0.015em;\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n\n    &.active {\n      color: ", ";\n      font-weight: 600;\n      border-bottom-color: ", ";\n    }\n  }\n\n  .tray-count {\n    min-width: 20px;\n    padding: 0 6px;\n    border-radius: 10px;\n    background: ", ";\n    color: ", ";\n    font-family: ", ";\n    font-size: 11px;\n    line-height: 18px;\n    text-align: center;\n  }\n\n  .active .tray-count {\n    background: ", ";\n    color: ", ";\n  }\n"])), _variables.FontFamily.AvenirNext, _variables.GlobalColors.s4, _variables.GlobalColors.s5, _variables.GlobalColors.s5, _variables.GlobalColors.color_purple, _variables.GlobalColors.s2, _variables.GlobalColors.s5, _variables.FontFamily.Lato, _variables.GlobalColors.color_purple, _variables.GlobalColors.white);
+
+exports.Container = Container;

package/dist/components/organisms/DigitalAssetsTray/DigitalAssetsTray.stories.js

@@ -0,0 +1,171 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Vacia = exports.SoloLectura = exports.PayloadDeGuardado = exports.Cuadricula = exports.ConActivos = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = require("react");
+
+var _index = require("./index");
+
+var _useDigitalAssets = require("../../../global-files/digital-assets/useDigitalAssets");
+
+var _assets = require("../../../global-files/digital-assets/assets.reducer");
+
+var _assets2 = require("../../../global-files/digital-assets/assets.adapter");
+
+var _assets3 = require("../../../global-files/digital-assets/assets.mock");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/DigitalAssetsTray",
+  component: _index.DigitalAssetsTray
+};
+/*
+  Las historias usan EL MISMO reducer que la ficha, no un estado de juguete.
+  Así lo que se ve aquí es el comportamiento real: qué queda marcado para
+  guardar, qué se anota para borrar y qué payload saldría hacia el backend.
+*/
+
+exports.default = _default;
+
+var Demo = function Demo(_ref) {
+  var _ref$initialAssets = _ref.initialAssets,
+      initialAssets = _ref$initialAssets === void 0 ? [] : _ref$initialAssets,
+      _ref$gridLayout = _ref.gridLayout,
+      gridLayout = _ref$gridLayout === void 0 ? false : _ref$gridLayout,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      _ref$showPayload = _ref.showPayload,
+      showPayload = _ref$showPayload === void 0 ? false : _ref$showPayload;
+
+  var _useReducer = (0, _react.useReducer)(_assets.assetsReducer, _assets.assetsInitialState),
+      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      notices = _useState2[0],
+      setNotices = _useState2[1];
+
+  var tray = (0, _useDigitalAssets.useDigitalAssets)({
+    assets: state.assets_values,
+    dispatch: dispatch,
+    notices: notices,
+    setNotices: setNotices
+  }); // Carga inicial simulando la respuesta del backend, una sola vez.
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      loaded = _useState4[0],
+      setLoaded = _useState4[1];
+
+  if (!loaded && initialAssets.length) {
+    tray.replaceAll(initialAssets);
+    setLoaded(true);
+  }
+
+  var payload = (0, _assets2.buildSavePayload)((0, _assets.selectAssetsToSave)(state));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      width: 960
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.DigitalAssetsTray, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, tray), {}, {
+      unsaved: (0, _assets.countUnsavedAssets)(state),
+      gridLayout: gridLayout,
+      readOnly: readOnly,
+      selectedAssets: state.selected_assets,
+      setSelectedAssets: function setSelectedAssets(assets) {
+        return dispatch({
+          type: "SET_SELECTED_ASSETS",
+          payload: assets
+        });
+      },
+      setCheckAll: function setCheckAll(checked) {
+        return dispatch({
+          type: "TOGGLE_CHECK_ALL_ASSETS",
+          payload: checked
+        });
+      }
+    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
+      style: {
+        fontFamily: "Lato",
+        fontSize: 12
+      },
+      children: ["Seleccionados: ", state.selected_assets.length, " \xB7 Sin subir: ", tray.pending.length, " \xB7 Marcados para actualizar: ", state.updated_assets.length, " \xB7 Para borrar:", " ", state.deleted_assets.length, " \xB7 \xBFHay cambios sin guardar?", " ", (0, _assets.hasUnsavedAssets)(state) ? "sí" : "no"]
+    }), showPayload && /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+      style: {
+        fontSize: 11,
+        background: "#f7f7fc",
+        padding: 12,
+        borderRadius: 6,
+        maxHeight: 280,
+        overflow: "auto"
+      },
+      children: JSON.stringify(payload, null, 2)
+    })]
+  });
+};
+/**
+ * Estado real de hoy: sin backend, la bandeja arranca vacía. Arrastrar un mp4,
+ * un gif, un PDF, un xlsx o un psd lo valida y lo agrega; cualquier otra cosa se
+ * rechaza con su motivo. Nada se sube.
+ */
+
+
+var Vacia = function Vacia() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {});
+};
+
+exports.Vacia = Vacia;
+
+var ConActivos = function ConActivos() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
+    initialAssets: _assets3.backendAssetsMock
+  });
+};
+
+exports.ConActivos = ConActivos;
+
+var Cuadricula = function Cuadricula() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
+    initialAssets: _assets3.backendAssetsMock,
+    gridLayout: true
+  });
+};
+
+exports.Cuadricula = Cuadricula;
+
+var SoloLectura = function SoloLectura() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
+    initialAssets: _assets3.backendAssetsMock,
+    readOnly: true
+  });
+};
+/**
+ * Lo que se le enviaría al backend, actualizándose en vivo. Cambia el tipo de un
+ * activo y aparece en `updateAssets`; bórralo y su id pasa a `deleteAssets`;
+ * suelta un archivo nuevo y aparece en `newAssets` sin `key`, porque todavía no
+ * se ha subido a S3.
+ */
+
+
+exports.SoloLectura = SoloLectura;
+
+var PayloadDeGuardado = function PayloadDeGuardado() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Demo, {
+    initialAssets: _assets3.backendAssetsMock,
+    showPayload: true
+  });
+};
+
+exports.PayloadDeGuardado = PayloadDeGuardado;