@orangelogic/orange-dam-content-browser-sdk 2.3.6 → 2.3.7-table-view-beta-2

package/build/content-browser.mjs

@@ -109,7 +109,7 @@ var __yieldStar = (value) => {
   }, "return" in obj && method("return"), it;
 };
 var __forAwait = (obj, it, method) => (it = obj[__knownSymbol("asyncIterator")]) ? it.call(obj) : (obj = obj[__knownSymbol("iterator")](), it = {}, method = (key, fn) => (fn = obj[key]) && (it[key] = (arg) => new Promise((yes, no, done) => (arg = fn.call(obj, arg), done = arg.done, Promise.resolve(arg.value).then((value) => yes({ value, done }), no)))), method("next"), method("return"), it);
-var _a, _b, _c, _d, _e, _f, _host, _getContainer, _getItemIndexById, _itemSelector, _anchor, _columnCount, _itemHeight, _pendingRestoreFrames, _restoreSequence, _lastGetDataParameters, _lastMappedAvailableExtensions, _lastData, _hasFetchedOnce;
+var _a, _b, _c, _d, _e, _f, _host, _getContainer, _getContentOffset, _getItemIndexById, _getLayoutSource, _itemSelector, _anchor, _columnCount, _itemHeight, _pendingRestoreFrames, _restoreSequence, _lastGetDataParameters, _lastMappedAvailableExtensions, _lastData, _hasFetchedOnce;
 import CxDrawer from "@orangelogic/design-system/components/drawer";
 import CxFolderSelect from "@orangelogic/design-system/components/folder-select";
 import CxIcon from "@orangelogic/design-system/components/icon";
@@ -1165,13 +1165,13 @@ var camelCase = createCompounder(function(result, word, index) {
   word = word.toLowerCase();
   return result + (index ? capitalize(word) : word);
 });
-var __defProp$h = Object.defineProperty;
-var __decorateClass$h = (decorators, target, key, kind) => {
+var __defProp$i = Object.defineProperty;
+var __decorateClass$i = (decorators, target, key, kind) => {
   var result = void 0;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = decorator(target, key, result) || result;
-  if (result) __defProp$h(target, key, result);
+  if (result) __defProp$i(target, key, result);
   return result;
 };
 const _CortexElement = class _CortexElement extends i$4 {
@@ -1298,16 +1298,16 @@ const _CortexElement = class _CortexElement extends i$4 {
 _CortexElement.version = "1";
 _CortexElement.dependencies = {};
 let CortexElement = _CortexElement;
-__decorateClass$h([
+__decorateClass$i([
   n$6()
 ], CortexElement.prototype, "dir");
-__decorateClass$h([
+__decorateClass$i([
   n$6()
 ], CortexElement.prototype, "lang");
-__decorateClass$h([
+__decorateClass$i([
   n$6()
 ], CortexElement.prototype, "theme");
-__decorateClass$h([
+__decorateClass$i([
   n$6({ attribute: "pre-render", type: Boolean })
 ], CortexElement.prototype, "preRender");
 function rescueElementPrototype(element) {
@@ -5748,7 +5748,7 @@ function watch(propertyName, options) {
     };
   };
 }
-const styles$e = i$7`
+const styles$f = i$7`
   :host {
     display: contents;
   }
@@ -5837,14 +5837,14 @@ const styles$e = i$7`
     display: block;
   }
 `;
-var __defProp$g = Object.defineProperty;
-var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
-var __decorateClass$g = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
+var __defProp$h = Object.defineProperty;
+var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
+var __decorateClass$h = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$h(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$g(target, key, result);
+  if (kind && result) __defProp$h(target, key, result);
   return result;
 };
 const LIBRARY_FOLDER_TITLE = "Library";
@@ -6107,7 +6107,7 @@ let CxContentBrowserBrowser = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserBrowser.styles = [componentStyles, styles$e];
+CxContentBrowserBrowser.styles = [componentStyles, styles$f];
 CxContentBrowserBrowser.dependencies = {
   "cx-drawer": CxDrawer,
   "cx-folder-select": CxFolderSelect,
@@ -6117,67 +6117,67 @@ CxContentBrowserBrowser.dependencies = {
   "cx-tooltip": CxTooltip,
   "cx-typography": CxTypography
 };
-__decorateClass$g([
+__decorateClass$h([
   e$7(".drawer-trigger")
 ], CxContentBrowserBrowser.prototype, "trigger", 2);
-__decorateClass$g([
+__decorateClass$h([
   e$7(".content-browser-browser")
 ], CxContentBrowserBrowser.prototype, "drawer", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$6({ attribute: "folder-id", type: String })
 ], CxContentBrowserBrowser.prototype, "folderId", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$6({ attribute: "folder-title", type: String })
 ], CxContentBrowserBrowser.prototype, "folderTitle", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$6({ attribute: "allowed-folders", type: Array })
 ], CxContentBrowserBrowser.prototype, "allowedFolders", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$6({ attribute: "can-pin", type: Boolean })
 ], CxContentBrowserBrowser.prototype, "canPin", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$6({ attribute: "collection-path", type: String })
 ], CxContentBrowserBrowser.prototype, "collectionPath", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$6({ attribute: "favorite-folder-id", type: String })
 ], CxContentBrowserBrowser.prototype, "favoriteFolderId", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$6({ attribute: "show-collections", type: Boolean })
 ], CxContentBrowserBrowser.prototype, "showCollections", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$6({ attribute: "show-favorite-folder", type: Boolean })
 ], CxContentBrowserBrowser.prototype, "showFavoriteFolder", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$6({ attribute: "force-overlay", type: Boolean })
 ], CxContentBrowserBrowser.prototype, "forceOverlay", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$6({ attribute: "see-thru", type: Boolean })
 ], CxContentBrowserBrowser.prototype, "seeThru", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$6({ attribute: "min-query-length", type: Number })
 ], CxContentBrowserBrowser.prototype, "minQueryLength", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$6({ attribute: "token", type: String })
 ], CxContentBrowserBrowser.prototype, "token", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$6({ attribute: "base-url", type: String })
 ], CxContentBrowserBrowser.prototype, "baseUrl", 2);
-__decorateClass$g([
+__decorateClass$h([
   n$6({ attribute: "use-site-session", type: Boolean })
 ], CxContentBrowserBrowser.prototype, "useSiteSession", 2);
-__decorateClass$g([
+__decorateClass$h([
   r$6()
 ], CxContentBrowserBrowser.prototype, "searchTerm", 2);
-__decorateClass$g([
+__decorateClass$h([
   r$6()
 ], CxContentBrowserBrowser.prototype, "isPersistent", 2);
-__decorateClass$g([
+__decorateClass$h([
   r$6()
 ], CxContentBrowserBrowser.prototype, "collectionsOpen", 2);
-__decorateClass$g([
+__decorateClass$h([
   watch("forceOverlay", { waitUntilFirstUpdate: true })
 ], CxContentBrowserBrowser.prototype, "handleForceOverlayChange", 1);
-CxContentBrowserBrowser = __decorateClass$g([
+CxContentBrowserBrowser = __decorateClass$h([
   customElement("cx-content-browser-browser")
 ], CxContentBrowserBrowser);
 /**
@@ -6308,6 +6308,7 @@ var GridView = /* @__PURE__ */ ((GridView2) => {
   GridView2["Small"] = "small";
   return GridView2;
 })(GridView || {});
+const TABLE_VIEW = "table";
 const ASSET_SIZE = {
   [
     "small"
@@ -6340,19 +6341,40 @@ var TransformationAction = /* @__PURE__ */ ((TransformationAction2) => {
   TransformationAction2["Rotate"] = "Rotate";
   return TransformationAction2;
 })(TransformationAction || {});
+const autoSelectFormatConverter = {
+  fromAttribute: (value) => {
+    if (value === null) {
+      return false;
+    }
+    const normalized = value.trim();
+    if (normalized === "" || normalized.toLowerCase() === "true") {
+      return true;
+    }
+    if (normalized.toLowerCase() === "false") {
+      return false;
+    }
+    return normalized;
+  },
+  toAttribute: (value) => {
+    return value === false ? null : String(value);
+  }
+};
+function isAutoSelectFormatActive(value) {
+  return value === true || typeof value === "string" && value.trim() !== "";
+}
 var ContentBrowserFormatDialogVariant = /* @__PURE__ */ ((ContentBrowserFormatDialogVariant2) => {
   ContentBrowserFormatDialogVariant2["Dialog"] = "dialog";
   ContentBrowserFormatDialogVariant2["Drawer"] = "drawer";
   return ContentBrowserFormatDialogVariant2;
 })(ContentBrowserFormatDialogVariant || {});
-var __defProp$f = Object.defineProperty;
-var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
-var __decorateClass$f = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
+var __defProp$g = Object.defineProperty;
+var __getOwnPropDesc$g = Object.getOwnPropertyDescriptor;
+var __decorateClass$g = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$g(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$f(target, key, result);
+  if (kind && result) __defProp$g(target, key, result);
   return result;
 };
 let CxContentBrowserControlFilterFacet = class extends CortexElement {
@@ -6488,37 +6510,37 @@ CxContentBrowserControlFilterFacet.dependencies = {
   "cx-typography": CxTypography
 };
 CxContentBrowserControlFilterFacet.itemsPerPage = 10;
-__decorateClass$f([
+__decorateClass$g([
   n$6({ attribute: "loading", reflect: false, type: Boolean })
 ], CxContentBrowserControlFilterFacet.prototype, "loading", 2);
-__decorateClass$f([
+__decorateClass$g([
   n$6({ attribute: "display-name", reflect: false, type: String })
 ], CxContentBrowserControlFilterFacet.prototype, "displayName", 2);
-__decorateClass$f([
+__decorateClass$g([
   n$6({ attribute: "type", reflect: true, type: String })
 ], CxContentBrowserControlFilterFacet.prototype, "type", 2);
-__decorateClass$f([
+__decorateClass$g([
   n$6({ attribute: "values", reflect: false, type: Array })
 ], CxContentBrowserControlFilterFacet.prototype, "values", 2);
-__decorateClass$f([
+__decorateClass$g([
   n$6({ attribute: "collections", reflect: false, type: Array })
 ], CxContentBrowserControlFilterFacet.prototype, "collections", 2);
-__decorateClass$f([
+__decorateClass$g([
   r$6()
 ], CxContentBrowserControlFilterFacet.prototype, "mappedSubtypes", 2);
-__decorateClass$f([
+__decorateClass$g([
   r$6()
 ], CxContentBrowserControlFilterFacet.prototype, "mappedDisplayNames", 2);
-__decorateClass$f([
+__decorateClass$g([
   r$6()
 ], CxContentBrowserControlFilterFacet.prototype, "page", 2);
-__decorateClass$f([
+__decorateClass$g([
   watch("values")
 ], CxContentBrowserControlFilterFacet.prototype, "handleValuesChange", 1);
-CxContentBrowserControlFilterFacet = __decorateClass$f([
+CxContentBrowserControlFilterFacet = __decorateClass$g([
   customElement("cx-content-browser-control-filter-facet")
 ], CxContentBrowserControlFilterFacet);
-const styles$d = i$7`
+const styles$e = i$7`
   :host {
     --details-width: min(240px, 90dvw);
 
@@ -6543,14 +6565,14 @@ const styles$d = i$7`
     border-left-width: 0px;
   }
 `;
-var __defProp$e = Object.defineProperty;
-var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
-var __decorateClass$e = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
+var __defProp$f = Object.defineProperty;
+var __getOwnPropDesc$f = Object.getOwnPropertyDescriptor;
+var __decorateClass$f = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$f(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$e(target, key, result);
+  if (kind && result) __defProp$f(target, key, result);
   return result;
 };
 let CxContentBrowserControlFilter = class extends CortexElement {
@@ -6775,7 +6797,7 @@ let CxContentBrowserControlFilter = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserControlFilter.styles = [componentStyles, styles$d];
+CxContentBrowserControlFilter.styles = [componentStyles, styles$e];
 CxContentBrowserControlFilter.dependencies = {
   "cx-badge": CxBadge,
   "cx-button": CxButton,
@@ -6796,52 +6818,52 @@ CxContentBrowserControlFilter.dependencies = {
   "cx-tooltip": CxTooltip,
   "cx-typography": CxTypography
 };
-__decorateClass$e([
+__decorateClass$f([
   n$6({ attribute: "facets", reflect: false, type: Array })
 ], CxContentBrowserControlFilter.prototype, "facets", 2);
-__decorateClass$e([
+__decorateClass$f([
   n$6({ attribute: "available-facets", reflect: false, type: Array })
 ], CxContentBrowserControlFilter.prototype, "availableFacets", 2);
-__decorateClass$e([
+__decorateClass$f([
   n$6({ attribute: "selected-facets", reflect: false, type: Object })
 ], CxContentBrowserControlFilter.prototype, "selectedFacets", 2);
-__decorateClass$e([
+__decorateClass$f([
   n$6({ attribute: "loading", reflect: false, type: Boolean })
 ], CxContentBrowserControlFilter.prototype, "loading", 2);
-__decorateClass$e([
+__decorateClass$f([
   n$6({ attribute: "newly-changed-option", reflect: false, type: Object })
 ], CxContentBrowserControlFilter.prototype, "newlyChangedOption", 2);
-__decorateClass$e([
+__decorateClass$f([
   n$6({ attribute: "is-mobile", reflect: false, type: Boolean })
 ], CxContentBrowserControlFilter.prototype, "isMobile", 2);
-__decorateClass$e([
+__decorateClass$f([
   r$6()
 ], CxContentBrowserControlFilter.prototype, "appliedFiltersCount", 2);
-__decorateClass$e([
+__decorateClass$f([
   r$6()
 ], CxContentBrowserControlFilter.prototype, "mappedDisplayNames", 2);
-__decorateClass$e([
+__decorateClass$f([
   watch("facets")
 ], CxContentBrowserControlFilter.prototype, "handleFacetsChange", 1);
-__decorateClass$e([
+__decorateClass$f([
   watch("selectedFacets")
 ], CxContentBrowserControlFilter.prototype, "handleSelectedFacetsChange", 1);
-CxContentBrowserControlFilter = __decorateClass$e([
+CxContentBrowserControlFilter = __decorateClass$f([
   customElement("cx-content-browser-control-filter")
 ], CxContentBrowserControlFilter);
-const styles$c = i$7`
+const styles$d = i$7`
   :host {
     display: contents;
   }
 `;
-var __defProp$d = Object.defineProperty;
-var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
-var __decorateClass$d = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
+var __defProp$e = Object.defineProperty;
+var __getOwnPropDesc$e = Object.getOwnPropertyDescriptor;
+var __decorateClass$e = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$e(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$d(target, key, result);
+  if (kind && result) __defProp$e(target, key, result);
   return result;
 };
 let CxContentBrowserControlSort = class extends CortexElement {
@@ -6980,7 +7002,7 @@ let CxContentBrowserControlSort = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserControlSort.styles = [componentStyles, styles$c];
+CxContentBrowserControlSort.styles = [componentStyles, styles$d];
 CxContentBrowserControlSort.dependencies = {
   "cx-divider": CxDivider,
   "cx-dropdown": CxDropdown,
@@ -6991,40 +7013,40 @@ CxContentBrowserControlSort.dependencies = {
   "cx-spinner": CxSpinner,
   "cx-tooltip": CxTooltip
 };
-__decorateClass$d([
+__decorateClass$e([
   n$6({ attribute: "sort-order-name", reflect: true, type: String })
 ], CxContentBrowserControlSort.prototype, "sortOrderName", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$6({ attribute: "sort-direction", reflect: true, type: String })
 ], CxContentBrowserControlSort.prototype, "sortDirection", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$6({ attribute: "sort-orders", reflect: false, type: Array })
 ], CxContentBrowserControlSort.prototype, "sortOrders", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$6({ attribute: "loading", reflect: true, type: Boolean })
 ], CxContentBrowserControlSort.prototype, "loading", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$6({ attribute: "is-mobile", reflect: false, type: Boolean })
 ], CxContentBrowserControlSort.prototype, "isMobile", 2);
-__decorateClass$d([
+__decorateClass$e([
   n$6({ attribute: "newly-changed-option", reflect: false, type: Object })
 ], CxContentBrowserControlSort.prototype, "newlyChangedOption", 2);
-__decorateClass$d([
+__decorateClass$e([
   r$6()
 ], CxContentBrowserControlSort.prototype, "mappedSortDirections", 2);
-__decorateClass$d([
+__decorateClass$e([
   r$6()
 ], CxContentBrowserControlSort.prototype, "sortDirections", 2);
-__decorateClass$d([
+__decorateClass$e([
   watch("sortOrderName"),
   watch("sortDirection"),
   watch("sortOrders", { waitUntilFirstUpdate: true }),
   watch("sortDirections", { waitUntilFirstUpdate: true })
 ], CxContentBrowserControlSort.prototype, "handleSortDirectionsChange", 1);
-CxContentBrowserControlSort = __decorateClass$d([
+CxContentBrowserControlSort = __decorateClass$e([
   customElement("cx-content-browser-control-sort")
 ], CxContentBrowserControlSort);
-const styles$b = i$7`
+const styles$c = i$7`
   :host {
     display: contents;
   }
@@ -7034,14 +7056,14 @@ const styles$b = i$7`
     --checked-icon-display: none;
   }
 `;
-var __defProp$c = Object.defineProperty;
-var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
-var __decorateClass$c = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
+var __defProp$d = Object.defineProperty;
+var __getOwnPropDesc$d = Object.getOwnPropertyDescriptor;
+var __decorateClass$d = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$d(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$c(target, key, result);
+  if (kind && result) __defProp$d(target, key, result);
   return result;
 };
 let CxContentBrowserControlView = class extends CortexElement {
@@ -7052,6 +7074,10 @@ let CxContentBrowserControlView = class extends CortexElement {
     this.views = [];
     this.isSeeThrough = false;
     this.isMobile = false;
+    this.canUseTable = false;
+  }
+  get isTable() {
+    return this.view === TABLE_VIEW;
   }
   runConnectedCallback() {
     this.handleViewChange();
@@ -7071,6 +7097,21 @@ let CxContentBrowserControlView = class extends CortexElement {
       }
     });
   }
+  renderTableOption() {
+    if (!this.canUseTable) {
+      return A;
+    }
+    return b`
+      <cx-menu-item
+        value=${TABLE_VIEW}
+        type="checkbox"
+        ?checked=${this.isTable}
+      >
+        <cx-line-clamp lines="1">${this.localize.term("table")}</cx-line-clamp>
+        <cx-icon slot="prefix" name="table_rows"></cx-icon>
+      </cx-menu-item>
+    `;
+  }
   handleViewChange() {
     this.selectedView = this.views.find((item) => item.value === this.view);
   }
@@ -7088,7 +7129,7 @@ let CxContentBrowserControlView = class extends CortexElement {
         <div slot="trigger">
           <cx-tooltip content=${this.localize.term("view")}>
             <cx-icon-button
-              name="dashboard"
+              name=${this.isTable ? "table_rows" : "dashboard"}
               label=${this.localize.term("view")}
               outline
             ></cx-icon-button>
@@ -7115,6 +7156,7 @@ let CxContentBrowserControlView = class extends CortexElement {
       )}
                   <cx-icon slot="prefix" name="grid_view"></cx-icon>
                 </cx-menu-item>
+                ${this.renderTableOption()}
                 <cx-divider></cx-divider>
                 <cx-menu-item value="see-thru" class="menu-item--switch">
                   <cx-space direction="horizontal" justify-content="space-between">
@@ -7148,7 +7190,7 @@ let CxContentBrowserControlView = class extends CortexElement {
       () => b`
             <cx-menu key="default-menu" no-uncheck>
               <cx-menu-label>${this.localize.term("view")}</cx-menu-label>
-              <cx-menu-item type="checkbox">
+              <cx-menu-item type="checkbox" ?checked=${!this.isTable}>
                 ${this.localize.term("grid")}
                 ${n$5(
         this.selectedView,
@@ -7177,6 +7219,7 @@ let CxContentBrowserControlView = class extends CortexElement {
                 </cx-menu>
                 <cx-icon slot="prefix" name="grid_view"></cx-icon>
               </cx-menu-item>
+              ${this.renderTableOption()}
               <cx-divider></cx-divider>
               <cx-menu-item value="see-thru" class="menu-item--switch">
                 <cx-space direction="horizontal" justify-content="space-between">
@@ -7194,7 +7237,7 @@ let CxContentBrowserControlView = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserControlView.styles = [componentStyles, styles$b];
+CxContentBrowserControlView.styles = [componentStyles, styles$c];
 CxContentBrowserControlView.dependencies = {
   "cx-divider": CxDivider,
   "cx-dropdown": CxDropdown,
@@ -7208,28 +7251,31 @@ CxContentBrowserControlView.dependencies = {
   "cx-switch": CxSwitch,
   "cx-tooltip": CxTooltip
 };
-__decorateClass$c([
+__decorateClass$d([
   n$6({ attribute: "view", reflect: true, type: String })
 ], CxContentBrowserControlView.prototype, "view", 2);
-__decorateClass$c([
+__decorateClass$d([
   n$6({ attribute: "views", reflect: false, type: Array })
 ], CxContentBrowserControlView.prototype, "views", 2);
-__decorateClass$c([
+__decorateClass$d([
   n$6({ attribute: "is-see-through", reflect: true, type: Boolean })
 ], CxContentBrowserControlView.prototype, "isSeeThrough", 2);
-__decorateClass$c([
+__decorateClass$d([
   n$6({ attribute: "is-mobile", reflect: false, type: Boolean })
 ], CxContentBrowserControlView.prototype, "isMobile", 2);
-__decorateClass$c([
+__decorateClass$d([
+  n$6({ attribute: "can-use-table", reflect: true, type: Boolean })
+], CxContentBrowserControlView.prototype, "canUseTable", 2);
+__decorateClass$d([
   r$6()
 ], CxContentBrowserControlView.prototype, "selectedView", 2);
-__decorateClass$c([
+__decorateClass$d([
   watch("view", { waitUntilFirstUpdate: true })
 ], CxContentBrowserControlView.prototype, "handleViewChange", 1);
-CxContentBrowserControlView = __decorateClass$c([
+CxContentBrowserControlView = __decorateClass$d([
   customElement("cx-content-browser-control-view")
 ], CxContentBrowserControlView);
-const styles$a = i$7`
+const styles$b = i$7`
   :host {
     display: block;
   }
@@ -7252,14 +7298,14 @@ const styles$a = i$7`
     margin-left: auto;
   }
 `;
-var __defProp$b = Object.defineProperty;
-var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
-var __decorateClass$b = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
+var __defProp$c = Object.defineProperty;
+var __getOwnPropDesc$c = Object.getOwnPropertyDescriptor;
+var __decorateClass$c = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$c(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$b(target, key, result);
+  if (kind && result) __defProp$c(target, key, result);
   return result;
 };
 let CxContentBrowserControlBar = class extends CortexElement {
@@ -7280,6 +7326,7 @@ let CxContentBrowserControlBar = class extends CortexElement {
     this.loading = false;
     this.searchText = "";
     this.isMobile = false;
+    this.canUseTable = false;
   }
   handleSearchChange(event) {
     this.searchText = event.target.value;
@@ -7327,6 +7374,7 @@ let CxContentBrowserControlBar = class extends CortexElement {
           <cx-content-browser-control-view
             view=${this.view}
             .views=${this.views}
+            ?can-use-table=${this.canUseTable}
             ?is-see-through=${this.isSeeThrough}
             ?is-mobile=${this.isMobile}
           ></cx-content-browser-control-view>
@@ -7343,7 +7391,7 @@ let CxContentBrowserControlBar = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserControlBar.styles = [componentStyles, styles$a];
+CxContentBrowserControlBar.styles = [componentStyles, styles$b];
 CxContentBrowserControlBar.dependencies = {
   "cx-avatar": CxAvatar,
   "cx-content-browser-control-filter": CxContentBrowserControlFilter,
@@ -7355,52 +7403,55 @@ CxContentBrowserControlBar.dependencies = {
   "cx-space": CxSpace,
   "cx-typography": CxTypography
 };
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: "current-count", type: Number })
 ], CxContentBrowserControlBar.prototype, "currentCount", 2);
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: "total-count", type: Number })
 ], CxContentBrowserControlBar.prototype, "totalCount", 2);
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: "sort-order-name", reflect: true, type: String })
 ], CxContentBrowserControlBar.prototype, "sortOrderName", 2);
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: "sort-direction", reflect: true, type: String })
 ], CxContentBrowserControlBar.prototype, "sortDirection", 2);
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: "sort-orders", reflect: false, type: Array })
 ], CxContentBrowserControlBar.prototype, "sortOrders", 2);
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: "view", reflect: true, type: String })
 ], CxContentBrowserControlBar.prototype, "view", 2);
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: "views", reflect: false, type: Array })
 ], CxContentBrowserControlBar.prototype, "views", 2);
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: "facets", reflect: false, type: Array })
 ], CxContentBrowserControlBar.prototype, "facets", 2);
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: "available-facets", reflect: false, type: Array })
 ], CxContentBrowserControlBar.prototype, "availableFacets", 2);
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: "selected-facets", reflect: false, type: Object })
 ], CxContentBrowserControlBar.prototype, "selectedFacets", 2);
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: "is-see-through", reflect: true, type: Boolean })
 ], CxContentBrowserControlBar.prototype, "isSeeThrough", 2);
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: "loading", reflect: true, type: Boolean })
 ], CxContentBrowserControlBar.prototype, "loading", 2);
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: false, reflect: false, type: Object })
 ], CxContentBrowserControlBar.prototype, "newlyChangedOption", 2);
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: "search-text", reflect: false, type: String })
 ], CxContentBrowserControlBar.prototype, "searchText", 2);
-__decorateClass$b([
+__decorateClass$c([
   n$6({ attribute: "is-mobile", reflect: false, type: Boolean })
 ], CxContentBrowserControlBar.prototype, "isMobile", 2);
-CxContentBrowserControlBar = __decorateClass$b([
+__decorateClass$c([
+  n$6({ attribute: "can-use-table", reflect: true, type: Boolean })
+], CxContentBrowserControlBar.prototype, "canUseTable", 2);
+CxContentBrowserControlBar = __decorateClass$c([
   customElement("cx-content-browser-control-bar")
 ], CxContentBrowserControlBar);
 /**
@@ -7707,14 +7758,14 @@ var Orientation = /* @__PURE__ */ ((Orientation2) => {
   Orientation2["Vertical"] = "vertical";
   return Orientation2;
 })(Orientation || {});
-var __defProp$a = Object.defineProperty;
-var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
-var __decorateClass$a = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
+var __defProp$b = Object.defineProperty;
+var __getOwnPropDesc$b = Object.getOwnPropertyDescriptor;
+var __decorateClass$b = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$b(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$a(target, key, result);
+  if (kind && result) __defProp$b(target, key, result);
   return result;
 };
 let CxContentBrowserAssetPreviewVideo = class extends CortexElement {
@@ -7830,40 +7881,40 @@ CxContentBrowserAssetPreviewVideo.dependencies = {
   "cx-typography": CxTypography,
   "cx-video": CxVideo
 };
-__decorateClass$a([
+__decorateClass$b([
   e$7("cx-video")
 ], CxContentBrowserAssetPreviewVideo.prototype, "videoElement", 2);
-__decorateClass$a([
+__decorateClass$b([
   e$7("img")
 ], CxContentBrowserAssetPreviewVideo.prototype, "imageElement", 2);
-__decorateClass$a([
+__decorateClass$b([
   n$6({ attribute: "src", reflect: true, type: String })
 ], CxContentBrowserAssetPreviewVideo.prototype, "src", 2);
-__decorateClass$a([
+__decorateClass$b([
   n$6({ attribute: "alt", reflect: true, type: String })
 ], CxContentBrowserAssetPreviewVideo.prototype, "alt", 2);
-__decorateClass$a([
+__decorateClass$b([
   n$6({ attribute: "thumbnail-only", reflect: true, type: Boolean })
 ], CxContentBrowserAssetPreviewVideo.prototype, "thumbnailOnly", 2);
-__decorateClass$a([
+__decorateClass$b([
   n$6({ attribute: "thumbnail-src", reflect: true, type: String })
 ], CxContentBrowserAssetPreviewVideo.prototype, "thumbnailSrc", 2);
-__decorateClass$a([
+__decorateClass$b([
   n$6({ reflect: true, type: Boolean })
 ], CxContentBrowserAssetPreviewVideo.prototype, "controls", 2);
-__decorateClass$a([
+__decorateClass$b([
   n$6({ attribute: "loaded", reflect: true, type: Boolean })
 ], CxContentBrowserAssetPreviewVideo.prototype, "loaded", 2);
-__decorateClass$a([
+__decorateClass$b([
   r$6()
 ], CxContentBrowserAssetPreviewVideo.prototype, "assetDirection", 2);
-__decorateClass$a([
+__decorateClass$b([
   r$6()
 ], CxContentBrowserAssetPreviewVideo.prototype, "progress", 2);
-CxContentBrowserAssetPreviewVideo = __decorateClass$a([
+CxContentBrowserAssetPreviewVideo = __decorateClass$b([
   customElement("cx-content-browser-asset-preview-video")
 ], CxContentBrowserAssetPreviewVideo);
-const styles$9 = i$7`
+const styles$a = i$7`
   :host {
     display: block;
     position: relative;
@@ -8010,14 +8061,14 @@ const styles$9 = i$7`
     transition: none;
   }
 `;
-var __defProp$9 = Object.defineProperty;
-var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
-var __decorateClass$9 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
+var __defProp$a = Object.defineProperty;
+var __getOwnPropDesc$a = Object.getOwnPropertyDescriptor;
+var __decorateClass$a = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$a(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$9(target, key, result);
+  if (kind && result) __defProp$a(target, key, result);
   return result;
 };
 const GIF_EXTENSION = ".gif";
@@ -8182,53 +8233,53 @@ let CxContentBrowserAssetPreview = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserAssetPreview.styles = [componentStyles, styles$9];
+CxContentBrowserAssetPreview.styles = [componentStyles, styles$a];
 CxContentBrowserAssetPreview.dependencies = {
   "cx-content-browser-asset-preview-video": CxContentBrowserAssetPreviewVideo,
   "cx-icon": CxIcon,
   "cx-skeleton": CxSkeleton,
   "cx-typography": CxTypography
 };
-__decorateClass$9([
+__decorateClass$a([
   e$7("cx-content-browser-asset-preview-video")
 ], CxContentBrowserAssetPreview.prototype, "previewVideo", 2);
-__decorateClass$9([
+__decorateClass$a([
   n$6({ attribute: "image-url", reflect: true, type: String })
 ], CxContentBrowserAssetPreview.prototype, "imageUrl", 2);
-__decorateClass$9([
+__decorateClass$a([
   n$6({ attribute: "original-url", reflect: true, type: String })
 ], CxContentBrowserAssetPreview.prototype, "originalUrl", 2);
-__decorateClass$9([
+__decorateClass$a([
   n$6({ attribute: "preview-url", reflect: true, type: String })
 ], CxContentBrowserAssetPreview.prototype, "previewUrl", 2);
-__decorateClass$9([
+__decorateClass$a([
   n$6({ attribute: "alt", reflect: true, type: String })
 ], CxContentBrowserAssetPreview.prototype, "alt", 2);
-__decorateClass$9([
+__decorateClass$a([
   n$6({ attribute: "doc-type", reflect: true, type: String })
 ], CxContentBrowserAssetPreview.prototype, "docType", 2);
-__decorateClass$9([
+__decorateClass$a([
   n$6({ attribute: "extension", reflect: true, type: String })
 ], CxContentBrowserAssetPreview.prototype, "extension", 2);
-__decorateClass$9([
+__decorateClass$a([
   n$6({ attribute: "in-cold-storage", reflect: true, type: Boolean })
 ], CxContentBrowserAssetPreview.prototype, "inColdStorage", 2);
-__decorateClass$9([
+__decorateClass$a([
   n$6({ attribute: "thumbnail-only", reflect: true, type: Boolean })
 ], CxContentBrowserAssetPreview.prototype, "thumbnailOnly", 2);
-__decorateClass$9([
+__decorateClass$a([
   n$6({ attribute: "controls", reflect: true, type: Boolean })
 ], CxContentBrowserAssetPreview.prototype, "controls", 2);
-__decorateClass$9([
+__decorateClass$a([
   r$6()
 ], CxContentBrowserAssetPreview.prototype, "isError", 2);
-__decorateClass$9([
+__decorateClass$a([
   r$6()
 ], CxContentBrowserAssetPreview.prototype, "loaded", 2);
-CxContentBrowserAssetPreview = __decorateClass$9([
+CxContentBrowserAssetPreview = __decorateClass$a([
   customElement("cx-content-browser-asset-preview")
 ], CxContentBrowserAssetPreview);
-const styles$8 = i$7`
+const styles$9 = i$7`
   :host {
     display: block;
     padding: var(--cx-spacing-small);
@@ -8238,14 +8289,14 @@ const styles$8 = i$7`
     width: 100%;
   }
 `;
-var __defProp$8 = Object.defineProperty;
-var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
-var __decorateClass$8 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
+var __defProp$9 = Object.defineProperty;
+var __getOwnPropDesc$9 = Object.getOwnPropertyDescriptor;
+var __decorateClass$9 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$9(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$8(target, key, result);
+  if (kind && result) __defProp$9(target, key, result);
   return result;
 };
 let CxContentBrowserAssetTrackingParameters = class extends CortexElement {
@@ -8354,7 +8405,7 @@ let CxContentBrowserAssetTrackingParameters = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserAssetTrackingParameters.styles = [componentStyles, styles$8];
+CxContentBrowserAssetTrackingParameters.styles = [componentStyles, styles$9];
 CxContentBrowserAssetTrackingParameters.dependencies = {
   "cx-button": CxButton,
   "cx-icon": CxIcon,
@@ -8363,13 +8414,13 @@ CxContentBrowserAssetTrackingParameters.dependencies = {
   "cx-input-group": CxInputGroup,
   "cx-space": CxSpace
 };
-__decorateClass$8([
+__decorateClass$9([
   n$6({ attribute: false, type: Array })
 ], CxContentBrowserAssetTrackingParameters.prototype, "values", 2);
-CxContentBrowserAssetTrackingParameters = __decorateClass$8([
+CxContentBrowserAssetTrackingParameters = __decorateClass$9([
   customElement("cx-content-browser-asset-tracking-parameters")
 ], CxContentBrowserAssetTrackingParameters);
-const styles$7 = i$7`
+const styles$8 = i$7`
   :host {
     display: block;
   }
@@ -8478,14 +8529,14 @@ const styles$7 = i$7`
     color: var(--cx-color-primary);
   }
 `;
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
-var __decorateClass$7 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
+var __defProp$8 = Object.defineProperty;
+var __getOwnPropDesc$8 = Object.getOwnPropertyDescriptor;
+var __decorateClass$8 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$8(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$7(target, key, result);
+  if (kind && result) __defProp$8(target, key, result);
   return result;
 };
 const USE_REPRESENTATIVE_VALUE = "use-representative";
@@ -8735,7 +8786,7 @@ let CxContentBrowserAssetProxySelector = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserAssetProxySelector.styles = [componentStyles, styles$7];
+CxContentBrowserAssetProxySelector.styles = [componentStyles, styles$8];
 CxContentBrowserAssetProxySelector.dependencies = {
   "cx-content-browser-asset-tracking-parameters": CxContentBrowserAssetTrackingParameters,
   "cx-icon": CxIcon,
@@ -8745,46 +8796,46 @@ CxContentBrowserAssetProxySelector.dependencies = {
   "cx-switch": CxSwitch,
   "cx-typography": CxTypography
 };
-__decorateClass$7([
+__decorateClass$8([
   n$6({ reflect: false, type: Array })
 ], CxContentBrowserAssetProxySelector.prototype, "items", 2);
-__decorateClass$7([
+__decorateClass$8([
   n$6({ attribute: "can-custom-format", reflect: true, type: Boolean })
 ], CxContentBrowserAssetProxySelector.prototype, "canCustomFormat", 2);
-__decorateClass$7([
+__decorateClass$8([
   n$6({ attribute: "can-use-representative", reflect: true, type: Boolean })
 ], CxContentBrowserAssetProxySelector.prototype, "canUseRepresentative", 2);
-__decorateClass$7([
+__decorateClass$8([
   n$6({ attribute: "can-use-ats", reflect: true, type: Boolean })
 ], CxContentBrowserAssetProxySelector.prototype, "canUseATS", 2);
-__decorateClass$7([
+__decorateClass$8([
   n$6({ attribute: "can-use-tracking", reflect: true, type: Boolean })
 ], CxContentBrowserAssetProxySelector.prototype, "canUseTracking", 2);
-__decorateClass$7([
+__decorateClass$8([
   n$6({ attribute: "selected", reflect: true, type: String })
 ], CxContentBrowserAssetProxySelector.prototype, "selected", 2);
-__decorateClass$7([
+__decorateClass$8([
   n$6({ attribute: "disabled-selected", reflect: true, type: Boolean })
 ], CxContentBrowserAssetProxySelector.prototype, "disabledSelected", 2);
-__decorateClass$7([
+__decorateClass$8([
   n$6({ attribute: "custom-width", reflect: true, type: String })
 ], CxContentBrowserAssetProxySelector.prototype, "customWidth", 2);
-__decorateClass$7([
+__decorateClass$8([
   n$6({ attribute: "custom-height", reflect: true, type: String })
 ], CxContentBrowserAssetProxySelector.prototype, "customHeight", 2);
-__decorateClass$7([
+__decorateClass$8([
   n$6({ attribute: "custom-extension", reflect: true, type: String })
 ], CxContentBrowserAssetProxySelector.prototype, "customExtension", 2);
-__decorateClass$7([
+__decorateClass$8([
   n$6({ attribute: "enabled-tracking", reflect: true, type: Boolean })
 ], CxContentBrowserAssetProxySelector.prototype, "enabledTracking", 2);
-__decorateClass$7([
+__decorateClass$8([
   n$6({ attribute: "tracking-parameters", reflect: false, type: Array })
 ], CxContentBrowserAssetProxySelector.prototype, "trackingParameters", 2);
-CxContentBrowserAssetProxySelector = __decorateClass$7([
+CxContentBrowserAssetProxySelector = __decorateClass$8([
   customElement("cx-content-browser-asset-proxy-selector")
 ], CxContentBrowserAssetProxySelector);
-const styles$6 = i$7`
+const styles$7 = i$7`
   :host {
     display: block;
     width: 100%;
@@ -8857,14 +8908,14 @@ const styles$6 = i$7`
     font-size: var(--cx-font-size-3x-large);
   }
 `;
-var __defProp$6 = Object.defineProperty;
-var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
-var __decorateClass$6 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropDesc$7 = Object.getOwnPropertyDescriptor;
+var __decorateClass$7 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$7(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$6(target, key, result);
+  if (kind && result) __defProp$7(target, key, result);
   return result;
 };
 let CxContentBrowserAssetVersionHistory = class extends CortexElement {
@@ -8936,7 +8987,7 @@ let CxContentBrowserAssetVersionHistory = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserAssetVersionHistory.styles = [componentStyles, styles$6];
+CxContentBrowserAssetVersionHistory.styles = [componentStyles, styles$7];
 CxContentBrowserAssetVersionHistory.dependencies = {
   "cx-grid": CxGrid,
   "cx-grid-item": CxGridItem,
@@ -8948,13 +8999,13 @@ CxContentBrowserAssetVersionHistory.dependencies = {
   "cx-typography": CxTypography,
   "cx-content-browser-asset-preview": CxContentBrowserAssetPreview
 };
-__decorateClass$6([
+__decorateClass$7([
   n$6({ reflect: false, type: Array })
 ], CxContentBrowserAssetVersionHistory.prototype, "versions", 2);
-__decorateClass$6([
+__decorateClass$7([
   n$6({ reflect: true, type: Boolean })
 ], CxContentBrowserAssetVersionHistory.prototype, "loading", 2);
-CxContentBrowserAssetVersionHistory = __decorateClass$6([
+CxContentBrowserAssetVersionHistory = __decorateClass$7([
   customElement("cx-content-browser-asset-version-history")
 ], CxContentBrowserAssetVersionHistory);
 const dialogStyles = i$7`
@@ -9005,7 +9056,7 @@ const drawerStyles = i$7`
     padding: var(--cx-spacing-medium);
   }
 `;
-const styles$5 = i$7`
+const styles$6 = i$7`
   :host {
     display: block;
   }
@@ -9045,14 +9096,14 @@ const styles$5 = i$7`
     width: 100%;
   }
 `;
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+var __defProp$6 = Object.defineProperty;
+var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
+var __decorateClass$6 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$6(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$5(target, key, result);
+  if (kind && result) __defProp$6(target, key, result);
   return result;
 };
 const DEFAULT_TRACKING_PARAMETERS = [{
@@ -9094,6 +9145,7 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
     this.canPinAsset = false;
     this.canTrack = false;
     this.canUseProxies = false;
+    this.autoSelectFormat = false;
     this.simplePick = false;
     this.canViewVersions = false;
     this.variant = ContentBrowserFormatDialogVariant.Dialog;
@@ -9134,33 +9186,96 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
     ], "value") : [{ displayName: this.localize.term("automatic"), value: this.autoExtension }]).filter((item) => this.shouldAppendAutoExtension || item.value !== this.autoExtension);
     return this.canCustomFormat && extensionList.some((item) => item.value === this.asset.extension);
   }
-  handleSupportedExtensionsChange() {
-    var _a2, _b2;
-    this.filteredProxies = this.proxies.filter((item) => {
-      var _a3, _b3, _c2;
-      const assetExtension = (_c2 = (_b3 = (_a3 = this.asset) == null ? void 0 : _a3.extension) == null ? void 0 : _b3.replace(/^\./, "")) != null ? _c2 : "";
+  filterProxies(proxies) {
+    return proxies.filter((item) => {
+      var _a2, _b2, _c2;
+      const assetExtension = (_c2 = (_b2 = (_a2 = this.asset) == null ? void 0 : _a2.extension) == null ? void 0 : _b2.replace(/^\./, "")) != null ? _c2 : "";
       if (!item.extension && this.asset && assetExtension) {
         return this.supportedExtensions.includes(assetExtension);
       }
       return true;
     });
+  }
+  handleSupportedExtensionsChange() {
+    var _a2, _b2;
+    this.filteredProxies = this.filterProxies(this.proxies);
     this.selectedProxy = (_b2 = (_a2 = this.filteredProxies[0]) == null ? void 0 : _a2.id) != null ? _b2 : "";
   }
+  /**
+   * What `autoSelectFormat` resolves to for this asset: the proxy to insert with, or `undefined`
+   * when the dialog should open as usual.
+   *
+   * `{ proxy: undefined }` is deliberate rather than a miss — with the picker switched off there is
+   * no format to name and the original file is the only outcome, which is `handleProxyConfirm`'s
+   * no-proxy branch. With the picker on a proxy must actually resolve: confirming none emits
+   * nothing and would turn the click into a silent no-op, so both an empty proxy list and a format
+   * name that matches nothing fall back to the dialog.
+   */
+  resolveAutoSelection() {
+    const requested = this.autoSelectFormat;
+    if (!isAutoSelectFormatActive(requested)) {
+      return void 0;
+    }
+    if (!this.canUseProxies) {
+      return { proxy: void 0 };
+    }
+    if (requested === true) {
+      const [first] = this.filteredProxies;
+      return first ? { proxy: first } : void 0;
+    }
+    const wanted = String(requested).trim().toLowerCase();
+    const match = this.filteredProxies.find((proxy) => {
+      var _a2, _b2;
+      return ((_a2 = proxy.proxyName) == null ? void 0 : _a2.toLowerCase()) === wanted || ((_b2 = proxy.proxyLabel) == null ? void 0 : _b2.toLowerCase()) === wanted;
+    });
+    return match ? { proxy: match } : void 0;
+  }
   open({
     asset,
     isFavorite,
     isAssetPinned = false,
     proxies
   }) {
+    var _a2, _b2;
     this.asset = asset;
     this.isFavorite = isFavorite;
     this.isAssetPinned = isAssetPinned;
     this.proxies = proxies;
+    this.filteredProxies = this.filterProxies(this.proxies);
+    this.selectedProxy = (_b2 = (_a2 = this.filteredProxies[0]) == null ? void 0 : _a2.id) != null ? _b2 : "";
+    const autoSelection = this.disabledConfirm ? void 0 : this.resolveAutoSelection();
+    if (autoSelection) {
+      if (autoSelection.proxy) {
+        this.selectedProxy = autoSelection.proxy.id;
+      }
+      if (!this.loadingConfirm) {
+        this.handleProxyConfirm();
+      }
+      return;
+    }
+    this.loadingConfirm = false;
     this.isOpen = true;
   }
   hide() {
     this.handleClose();
   }
+  /**
+   * Show a dialog that `open()` skipped through the auto-confirm shortcut. The asset, proxies and
+   * resolved selection are still in place, so this lands the user on exactly the dialog the
+   * shortcut spared them, with its confirm button live again to retry.
+   */
+  revealAfterAutoConfirm() {
+    if (!this.asset) {
+      this.handleClose();
+      return;
+    }
+    this.loadingConfirm = false;
+    this.isOpen = true;
+  }
+  /** Whether the dialog is actually on screen — false when `open()` took the auto-confirm path. */
+  get isDialogOpen() {
+    return this.isOpen;
+  }
   setVersionHistory(versions) {
     this.versions = versions;
     this.loadingVersionHistory = false;
@@ -9644,7 +9759,7 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
         <cx-button
           class="content-browser-format__footer__button"
           variant="primary"
-          ?loading=${this.loadingProxies}
+          ?loading=${this.loadingConfirm || this.loadingProxies}
           @click=${this.handleProxyConfirm}
         >
           <cx-icon slot="prefix" name="folder"></cx-icon>
@@ -9709,7 +9824,7 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
     `;
   }
   handleRequestClose(event) {
-    if (this.loadingFavorites || this.loadingPinAsset) {
+    if (this.loadingConfirm || this.loadingFavorites || this.loadingPinAsset) {
       event.preventDefault();
       return;
     }
@@ -9770,7 +9885,7 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserFormatDialog.styles = [componentStyles, styles$5];
+CxContentBrowserFormatDialog.styles = [componentStyles, styles$6];
 CxContentBrowserFormatDialog.dependencies = {
   "cx-asset-link-format": CxAssetLinkFormat,
   "cx-cropper": CxCropper,
@@ -9786,16 +9901,16 @@ CxContentBrowserFormatDialog.dependencies = {
   "cx-tooltip": CxTooltip,
   "cx-typography": CxTypography
 };
-__decorateClass$5([
+__decorateClass$6([
   e$7("cx-asset-link-format")
 ], CxContentBrowserFormatDialog.prototype, "assetLinkFormat", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ reflect: false, type: Object })
 ], CxContentBrowserFormatDialog.prototype, "boundary", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: false, reflect: false, type: Object })
 ], CxContentBrowserFormatDialog.prototype, "availableExtensions", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({
     attribute: "supported-extensions",
     converter: {
@@ -9806,7 +9921,7 @@ __decorateClass$5([
     type: Array
   })
 ], CxContentBrowserFormatDialog.prototype, "supportedExtensions", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({
     attribute: "supported-representative-subtypes",
     converter: {
@@ -9817,113 +9932,116 @@ __decorateClass$5([
     type: Array
   })
 ], CxContentBrowserFormatDialog.prototype, "supportedRepresentativeSubtypes", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "auto-extension", reflect: false, type: String })
 ], CxContentBrowserFormatDialog.prototype, "autoExtension", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "cta-text", reflect: false, type: String })
 ], CxContentBrowserFormatDialog.prototype, "ctaText", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "cta-text-transform", reflect: false, type: String })
 ], CxContentBrowserFormatDialog.prototype, "ctaTextTransform", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "can-custom-format", reflect: false, type: Boolean })
 ], CxContentBrowserFormatDialog.prototype, "canCustomFormat", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "can-favorite", reflect: false, type: Boolean })
 ], CxContentBrowserFormatDialog.prototype, "canFavorite", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "can-pin-asset", reflect: false, type: Boolean })
 ], CxContentBrowserFormatDialog.prototype, "canPinAsset", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "can-track", reflect: false, type: Boolean })
 ], CxContentBrowserFormatDialog.prototype, "canTrack", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "can-use-proxies", reflect: false, type: Boolean })
 ], CxContentBrowserFormatDialog.prototype, "canUseProxies", 2);
-__decorateClass$5([
+__decorateClass$6([
+  n$6({ attribute: "auto-select-format", converter: autoSelectFormatConverter, reflect: false })
+], CxContentBrowserFormatDialog.prototype, "autoSelectFormat", 2);
+__decorateClass$6([
   n$6({ attribute: "simple-pick", reflect: false, type: Boolean })
 ], CxContentBrowserFormatDialog.prototype, "simplePick", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "can-view-versions", reflect: false, type: Boolean })
 ], CxContentBrowserFormatDialog.prototype, "canViewVersions", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ reflect: true, type: String })
 ], CxContentBrowserFormatDialog.prototype, "variant", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "loading-favorites", reflect: true, type: Boolean })
 ], CxContentBrowserFormatDialog.prototype, "loadingFavorites", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "loading-pin-asset", reflect: true, type: Boolean })
 ], CxContentBrowserFormatDialog.prototype, "loadingPinAsset", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "loading-proxies", reflect: true, type: Boolean })
 ], CxContentBrowserFormatDialog.prototype, "loadingProxies", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "disabled-confirm", reflect: true, type: Boolean })
 ], CxContentBrowserFormatDialog.prototype, "disabledConfirm", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "token", type: String })
 ], CxContentBrowserFormatDialog.prototype, "token", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({ attribute: "base-url", type: String })
 ], CxContentBrowserFormatDialog.prototype, "baseUrl", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "asset", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "isOpen", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "isFavorite", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "isAssetPinned", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "proxies", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "showVersionHistory", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "showCustomFormat", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "loadingVersionHistory", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "versions", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "filteredProxies", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "selectedProxy", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "lastProxyBeforeCustomFormat", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "confirmedTransformations", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "confirmedFormat", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "loadingConfirm", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "enabledTracking", 2);
-__decorateClass$5([
+__decorateClass$6([
   r$6()
 ], CxContentBrowserFormatDialog.prototype, "trackingParameters", 2);
-__decorateClass$5([
+__decorateClass$6([
   watch("proxies", { waitUntilFirstUpdate: true }),
   watch("supportedExtensions")
 ], CxContentBrowserFormatDialog.prototype, "handleSupportedExtensionsChange", 1);
-CxContentBrowserFormatDialog = __decorateClass$5([
+CxContentBrowserFormatDialog = __decorateClass$6([
   customElement("cx-content-browser-format-dialog")
 ], CxContentBrowserFormatDialog);
 function __decorate(decorators, target, key, desc) {
@@ -11722,7 +11840,7 @@ class GridLayout extends GridBaseLayout {
     this._scrollSize = size;
   }
 }
-const styles$4 = i$7`
+const styles$5 = i$7`
   :host {
     display: block;
   }
@@ -11758,6 +11876,44 @@ const styles$4 = i$7`
     line-height: var(--cx-line-height-small);
   }
 
+  /*
+   * Affordance only, never a second control: pointer-events stay off so the click lands on the card
+   * beneath and takes the one path a card click already takes, and the button is aria-hidden and
+   * untabbable so the card is still the single thing announced and focused.
+   */
+  .content-browser-asset-card__cta {
+    /*
+     * Positioned against the card's base, not the image slot, so the image box has to be described
+     * here: inset by the card's own padding and given the same aspect-ratio ::part(image) carries,
+     * which lands it exactly on the thumbnail. Without this it covers the title row too and centres
+     * the button on the card rather than on the image. Keep the ratio in step with ::part(image).
+     */
+    position: absolute;
+    inset: var(--cx-spacing-x-small);
+    bottom: auto;
+    aspect-ratio: 246 / 180;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(0 0 0 / 35%);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 150ms ease;
+  }
+
+  .content-browser-asset-card:hover .content-browser-asset-card__cta,
+  .content-browser-asset-card:focus-within .content-browser-asset-card__cta,
+  .content-browser-asset-card__cta--busy {
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .content-browser-asset-card__cta {
+      transition: none;
+    }
+  }
+
   .content-browser-asset-card__checkbox {
     position: absolute;
     top: 2px;
@@ -11770,19 +11926,24 @@ const styles$4 = i$7`
     pointer-events: none;
   }
 `;
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
-var __decorateClass$4 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
-  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
-    if (decorator = decorators[i4])
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(target, key) : target;
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$4(target, key, result);
+  if (kind && result) __defProp$5(target, key, result);
   return result;
 };
 let CxContentBrowserAssetCard = class extends CortexElement {
   constructor() {
     super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.showCta = false;
+    this.ctaText = "";
+    this.ctaTextTransform = "capitalize";
+    this.busy = false;
     this.imageUrl = "";
     this.originalUrl = "";
     this.scrubUrl = "";
@@ -11850,6 +12011,26 @@ let CxContentBrowserAssetCard = class extends CortexElement {
           ?thumbnail-only=${this.view === "small"}
           ?in-cold-storage=${this.inColdStorage}
         ></cx-content-browser-asset-preview>
+        ${n$5(
+      this.showCta && !this.inColdStorage,
+      () => b`
+            <div
+              slot="image"
+              class=${e$5({
+        "content-browser-asset-card__cta": true,
+        "content-browser-asset-card__cta--busy": this.busy
+      })}
+              aria-hidden="true"
+            >
+              <cx-button size="small" variant="primary" tabindex="-1" ?loading=${this.busy}>
+                <span style=${o$1({ textTransform: this.ctaTextTransform })}>
+                  ${this.ctaText || this.localize.term("insert")}
+                </span>
+              </cx-button>
+            </div>
+          `,
+      () => A
+    )}
         <cx-space spacing="small" align-items="center" wrap="nowrap" class="content-browser-asset-card__info">
           ${n$5(
       this.showTitle && this.assetName,
@@ -11960,9 +12141,10 @@ let CxContentBrowserAssetCard = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserAssetCard.styles = [componentStyles, styles$4];
+CxContentBrowserAssetCard.styles = [componentStyles, styles$5];
 CxContentBrowserAssetCard.dependencies = {
   "cx-array-line-clamp": CxArrayLineClamp,
+  "cx-button": CxButton,
   "cx-card": CxCard,
   "cx-checkbox": CxCheckbox,
   "cx-content-browser-asset-preview": CxContentBrowserAssetPreview,
@@ -11971,46 +12153,58 @@ CxContentBrowserAssetCard.dependencies = {
   "cx-tag": CxTag,
   "cx-typography": CxTypography
 };
-__decorateClass$4([
+__decorateClass$5([
+  n$6({ attribute: "show-cta", reflect: true, type: Boolean })
+], CxContentBrowserAssetCard.prototype, "showCta", 2);
+__decorateClass$5([
+  n$6({ attribute: "cta-text", reflect: false, type: String })
+], CxContentBrowserAssetCard.prototype, "ctaText", 2);
+__decorateClass$5([
+  n$6({ attribute: "cta-text-transform", reflect: false, type: String })
+], CxContentBrowserAssetCard.prototype, "ctaTextTransform", 2);
+__decorateClass$5([
+  n$6({ attribute: "busy", reflect: true, type: Boolean })
+], CxContentBrowserAssetCard.prototype, "busy", 2);
+__decorateClass$5([
   n$6({ attribute: "image-url", reflect: true, type: String })
 ], CxContentBrowserAssetCard.prototype, "imageUrl", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "original-url", reflect: true, type: String })
 ], CxContentBrowserAssetCard.prototype, "originalUrl", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "scrub-url", reflect: true, type: String })
 ], CxContentBrowserAssetCard.prototype, "scrubUrl", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "asset-id", reflect: true, type: String })
 ], CxContentBrowserAssetCard.prototype, "assetId", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "asset-name", reflect: true, type: String })
 ], CxContentBrowserAssetCard.prototype, "assetName", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "asset-width", reflect: true, type: String })
 ], CxContentBrowserAssetCard.prototype, "assetWidth", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "asset-height", reflect: true, type: String })
 ], CxContentBrowserAssetCard.prototype, "assetHeight", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "asset-size", reflect: true, type: String })
 ], CxContentBrowserAssetCard.prototype, "assetSize", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "extension", reflect: true, type: String })
 ], CxContentBrowserAssetCard.prototype, "extension", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "in-cold-storage", reflect: true, type: Boolean })
 ], CxContentBrowserAssetCard.prototype, "inColdStorage", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "doc-type", reflect: true, type: String })
 ], CxContentBrowserAssetCard.prototype, "docType", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "view", reflect: true, type: String })
 ], CxContentBrowserAssetCard.prototype, "view", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "selected", reflect: true, type: Boolean })
 ], CxContentBrowserAssetCard.prototype, "selected", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({
     converter: {
       fromAttribute: (value) => value ? value.split(",").map((tag) => tag.trim()).filter(Boolean) : [],
@@ -12025,25 +12219,25 @@ __decorateClass$4([
     type: String
   })
 ], CxContentBrowserAssetCard.prototype, "tags", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "show-tags", reflect: true, type: Boolean })
 ], CxContentBrowserAssetCard.prototype, "showTags", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "show-title", reflect: true, type: Boolean })
 ], CxContentBrowserAssetCard.prototype, "showTitle", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "show-size", reflect: true, type: Boolean })
 ], CxContentBrowserAssetCard.prototype, "showSize", 2);
-__decorateClass$4([
+__decorateClass$5([
   n$6({ attribute: "show-dimensions", reflect: true, type: Boolean })
 ], CxContentBrowserAssetCard.prototype, "showDimensions", 2);
-__decorateClass$4([
+__decorateClass$5([
   e$7("cx-content-browser-asset-preview")
 ], CxContentBrowserAssetCard.prototype, "preview", 2);
-CxContentBrowserAssetCard = __decorateClass$4([
+CxContentBrowserAssetCard = __decorateClass$5([
   customElement("cx-content-browser-asset-card")
 ], CxContentBrowserAssetCard);
-const styles$3 = i$7`
+const styles$4 = i$7`
   :host {
     display: flex;
     align-items: center;
@@ -12068,14 +12262,14 @@ const styles$3 = i$7`
     font-size: 96px;
   }
 `;
-var __defProp$3 = Object.defineProperty;
-var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
-var __decorateClass$3 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
+var __defProp$4 = Object.defineProperty;
+var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
+var __decorateClass$4 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$4(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$3(target, key, result);
+  if (kind && result) __defProp$4(target, key, result);
   return result;
 };
 let CxContentBrowserNoResult = class extends CortexElement {
@@ -12093,36 +12287,40 @@ let CxContentBrowserNoResult = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserNoResult.styles = [componentStyles, styles$3];
+CxContentBrowserNoResult.styles = [componentStyles, styles$4];
 CxContentBrowserNoResult.dependencies = {
   "cx-icon": CxIcon
 };
-__decorateClass$3([
+__decorateClass$4([
   n$6({ attribute: "icon", type: String })
 ], CxContentBrowserNoResult.prototype, "icon", 2);
-__decorateClass$3([
+__decorateClass$4([
   n$6({ attribute: "message", type: String })
 ], CxContentBrowserNoResult.prototype, "message", 2);
-CxContentBrowserNoResult = __decorateClass$3([
+CxContentBrowserNoResult = __decorateClass$4([
   customElement("cx-content-browser-no-result")
 ], CxContentBrowserNoResult);
 class ScrollAnchorController {
   constructor(host, options) {
     __privateAdd(this, _host);
     __privateAdd(this, _getContainer);
+    __privateAdd(this, _getContentOffset);
     __privateAdd(this, _getItemIndexById);
+    __privateAdd(this, _getLayoutSource);
     __privateAdd(this, _itemSelector);
     __privateAdd(this, _anchor, null);
     __privateAdd(this, _columnCount, 0);
     __privateAdd(this, _itemHeight, 0);
     __privateAdd(this, _pendingRestoreFrames, []);
     __privateAdd(this, _restoreSequence, 0);
-    var _a2;
+    var _a2, _b2, _c2;
     __privateSet(this, _host, host);
     __privateSet(this, _getContainer, options.getContainer);
+    __privateSet(this, _getContentOffset, (_a2 = options.getContentOffset) != null ? _a2 : (() => 0));
     __privateSet(this, _getItemIndexById, options.getItemIndexById);
+    __privateSet(this, _getLayoutSource, (_b2 = options.getLayoutSource) != null ? _b2 : options.getContainer);
     __privateSet(this, _itemSelector, options.itemSelector);
-    (_a2 = host.addController) == null ? void 0 : _a2.call(host, this);
+    (_c2 = host.addController) == null ? void 0 : _c2.call(host, this);
   }
   capture(container = __privateGet(this, _getContainer).call(this)) {
     if (!container || typeof container.querySelectorAll !== "function") {
@@ -12132,10 +12330,11 @@ class ScrollAnchorController {
       container.querySelectorAll(__privateGet(this, _itemSelector))
     );
     const containerTop = container.getBoundingClientRect().top;
+    const contentTop = containerTop + __privateGet(this, _getContentOffset).call(this);
     for (const el of children) {
       const rect = el.getBoundingClientRect();
       const id = el.assetId || el.dataset.id;
-      if (rect.bottom > containerTop && id) {
+      if (rect.bottom > contentTop && id) {
         __privateSet(this, _anchor, {
           id,
           offset: rect.top - containerTop
@@ -12155,8 +12354,8 @@ class ScrollAnchorController {
     this.cancelPendingRestore();
     const sequence = ++__privateWrapper(this, _restoreSequence)._;
     void __privateGet(this, _host).updateComplete.then(() => __async(this, null, function* () {
-      var _a2;
-      yield (_a2 = __privateGet(this, _getContainer).call(this)) == null ? void 0 : _a2.layoutComplete;
+      var _a2, _b2;
+      yield (_b2 = (_a2 = __privateGet(this, _getLayoutSource).call(this)) == null ? void 0 : _a2.layoutComplete) == null ? void 0 : _b2.catch(() => void 0);
       if (sequence !== __privateGet(this, _restoreSequence)) {
         return;
       }
@@ -12204,7 +12403,10 @@ class ScrollAnchorController {
       return void 0;
     }
     const rowIndex = Math.floor(assetIndex / __privateGet(this, _columnCount));
-    return Math.max(0, rowIndex * __privateGet(this, _itemHeight) - __privateGet(this, _anchor).offset);
+    return Math.max(
+      0,
+      __privateGet(this, _getContentOffset).call(this) + rowIndex * __privateGet(this, _itemHeight) - __privateGet(this, _anchor).offset
+    );
   }
   hostDisconnected() {
     this.cancelPendingRestore();
@@ -12226,14 +12428,16 @@ class ScrollAnchorController {
 }
 _host = new WeakMap();
 _getContainer = new WeakMap();
+_getContentOffset = new WeakMap();
 _getItemIndexById = new WeakMap();
+_getLayoutSource = new WeakMap();
 _itemSelector = new WeakMap();
 _anchor = new WeakMap();
 _columnCount = new WeakMap();
 _itemHeight = new WeakMap();
 _pendingRestoreFrames = new WeakMap();
 _restoreSequence = new WeakMap();
-const styles$2 = i$7`
+const styles$3 = i$7`
   :host {
     display: block;
     flex: 1;
@@ -12254,24 +12458,24 @@ const styles$2 = i$7`
     --height: 4px;
   }
 `;
-var __defProp$2 = Object.defineProperty;
-var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
-var __typeError2 = (msg) => {
+var __defProp$3 = Object.defineProperty;
+var __getOwnPropDesc$3 = Object.getOwnPropertyDescriptor;
+var __typeError$2 = (msg) => {
   throw TypeError(msg);
 };
-var __decorateClass$2 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
+var __decorateClass$3 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$3(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$2(target, key, result);
+  if (kind && result) __defProp$3(target, key, result);
   return result;
 };
-var __accessCheck2 = (obj, member, msg) => member.has(obj) || __typeError2("Cannot " + msg);
-var __privateGet2 = (obj, member, getter) => (__accessCheck2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd2 = (obj, member, value) => member.has(obj) ? __typeError2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet2 = (obj, member, value, setter) => (__accessCheck2(obj, member, "write to private field"), member.set(obj, value), value);
-var _gutter, _lastHeight, _lastWidth;
+var __accessCheck$2 = (obj, member, msg) => member.has(obj) || __typeError$2("Cannot " + msg);
+var __privateGet$2 = (obj, member, getter) => (__accessCheck$2(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$2 = (obj, member, value) => member.has(obj) ? __typeError$2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$2 = (obj, member, value, setter) => (__accessCheck$2(obj, member, "write to private field"), member.set(obj, value), value);
+var _gutter, _lastHeight$1, _lastWidth;
 let CxContentBrowserGrid = class extends CortexElement {
   constructor() {
     super();
@@ -12285,12 +12489,16 @@ let CxContentBrowserGrid = class extends CortexElement {
     this.showSize = true;
     this.showDimensions = true;
     this.showTags = false;
+    this.showCta = false;
+    this.ctaText = "";
+    this.ctaTextTransform = "capitalize";
+    this.busyAssetId = void 0;
     this.selectedAssetId = void 0;
     this.assetMap = /* @__PURE__ */ new Map();
     this.columnWidth = 0;
-    __privateAdd2(this, _gutter, 8);
-    __privateAdd2(this, _lastHeight, 0);
-    __privateAdd2(this, _lastWidth, 0);
+    __privateAdd$2(this, _gutter, 8);
+    __privateAdd$2(this, _lastHeight$1, 0);
+    __privateAdd$2(this, _lastWidth, 0);
     this.scrollAnchorController = new ScrollAnchorController(this, {
       getContainer: () => this.virtualizerEl,
       getItemIndexById: (id) => this.assets.findIndex((asset) => asset.id === id),
@@ -12303,7 +12511,7 @@ let CxContentBrowserGrid = class extends CortexElement {
   }
   handleViewChange() {
     this.scrollAnchorController.capture();
-    this.calculatePageSize(__privateGet2(this, _lastWidth), __privateGet2(this, _lastHeight), true);
+    this.calculatePageSize(__privateGet$2(this, _lastWidth), __privateGet$2(this, _lastHeight$1), true);
   }
   handleAssetsChange() {
     this.assetMap.clear();
@@ -12321,17 +12529,17 @@ let CxContentBrowserGrid = class extends CortexElement {
     this.debouncedCalculatePageSize(width, height);
   }
   calculatePageSize(width, height, force = false) {
-    const lastHeight = __privateGet2(this, _lastHeight);
-    const lastWidth = __privateGet2(this, _lastWidth);
+    const lastHeight = __privateGet$2(this, _lastHeight$1);
+    const lastWidth = __privateGet$2(this, _lastWidth);
     if (!force && Math.abs(lastHeight - height) < 10 && Math.abs(lastWidth - width) < 10) {
       return;
     }
-    __privateSet2(this, _lastHeight, height);
-    __privateSet2(this, _lastWidth, width);
+    __privateSet$2(this, _lastHeight$1, height);
+    __privateSet$2(this, _lastWidth, width);
     const { columnCount, rowCount } = this.calculateColumnCount(width, height);
     this.scrollAnchorController.setLayoutMetrics({
       columnCount,
-      itemHeight: Math.max(this.columnWidth, 150) + __privateGet2(this, _gutter)
+      itemHeight: Math.max(this.columnWidth, 150) + __privateGet$2(this, _gutter)
     });
     this.emit("cx-content-browser-grid-resize", {
       detail: {
@@ -12351,12 +12559,12 @@ let CxContentBrowserGrid = class extends CortexElement {
     }
     const effectiveWidth = ((_a2 = this.virtualizerEl) == null ? void 0 : _a2.clientWidth) || width;
     const breakPoint = ((_b2 = ASSET_SIZE[this.view]) == null ? void 0 : _b2.minWidth) || ASSET_SIZE[GridView.Large].minWidth;
-    const columnCount = Math.max(1, Math.floor((effectiveWidth + __privateGet2(this, _gutter)) / (breakPoint + __privateGet2(this, _gutter))));
+    const columnCount = Math.max(1, Math.floor((effectiveWidth + __privateGet$2(this, _gutter)) / (breakPoint + __privateGet$2(this, _gutter))));
     let rowCount = 0;
     if (height) {
-      rowCount = Math.ceil(height / (breakPoint + __privateGet2(this, _gutter)));
+      rowCount = Math.ceil(height / (breakPoint + __privateGet$2(this, _gutter)));
     }
-    const newColumnWidth = Math.floor((effectiveWidth - __privateGet2(this, _gutter) * (columnCount + 1)) / columnCount);
+    const newColumnWidth = Math.floor((effectiveWidth - __privateGet$2(this, _gutter) * (columnCount + 1)) / columnCount);
     if (newColumnWidth !== this.columnWidth) {
       this.columnWidth = newColumnWidth;
     }
@@ -12400,6 +12608,10 @@ let CxContentBrowserGrid = class extends CortexElement {
         ?show-size=${this.showSize}
         ?show-dimensions=${this.showDimensions}
         ?show-tags=${this.showTags}
+        ?show-cta=${this.showCta}
+        ?busy=${asset.id === this.busyAssetId}
+        cta-text=${this.ctaText}
+        cta-text-transform=${this.ctaTextTransform}
         ?in-cold-storage=${asset.inColdStorage}
         @click=${this.handleClick}
       ></cx-content-browser-asset-card>
@@ -12423,7 +12635,7 @@ let CxContentBrowserGrid = class extends CortexElement {
           class="content-browser-grid-loading"
           style=${o$1({
       opacity: this.loading ? 1 : 0,
-      padding: `0 ${__privateGet2(this, _gutter) * 2}px ${__privateGet2(this, _gutter)}px`
+      padding: `0 ${__privateGet$2(this, _gutter) * 2}px ${__privateGet$2(this, _gutter)}px`
     })}
         >
           <cx-progress-bar indeterminate></cx-progress-bar>
@@ -12447,7 +12659,7 @@ let CxContentBrowserGrid = class extends CortexElement {
         "overflow-x": "hidden"
       })}
                 .layout=${grid({
-        gap: `${__privateGet2(this, _gutter)}px`,
+        gap: `${__privateGet$2(this, _gutter)}px`,
         itemSize: {
           height: `${Math.max(this.columnWidth, 150)}px`,
           width: `${this.columnWidth}px`
@@ -12466,67 +12678,79 @@ let CxContentBrowserGrid = class extends CortexElement {
   }
 };
 _gutter = /* @__PURE__ */ new WeakMap();
-_lastHeight = /* @__PURE__ */ new WeakMap();
+_lastHeight$1 = /* @__PURE__ */ new WeakMap();
 _lastWidth = /* @__PURE__ */ new WeakMap();
-CxContentBrowserGrid.styles = [componentStyles, styles$2];
+CxContentBrowserGrid.styles = [componentStyles, styles$3];
 CxContentBrowserGrid.dependencies = {
   "cx-content-browser-asset-card": CxContentBrowserAssetCard,
   "cx-content-browser-no-result": CxContentBrowserNoResult,
   "cx-progress-bar": CxProgressBar,
   "cx-resize-observer": CxResizeObserver
 };
-__decorateClass$2([
+__decorateClass$3([
   e$7(".content-browser-grid")
 ], CxContentBrowserGrid.prototype, "containerEl", 2);
-__decorateClass$2([
+__decorateClass$3([
   e$7("lit-virtualizer")
 ], CxContentBrowserGrid.prototype, "virtualizerEl", 2);
-__decorateClass$2([
+__decorateClass$3([
   n$6({ attribute: "assets", reflect: false, type: Array })
 ], CxContentBrowserGrid.prototype, "assets", 2);
-__decorateClass$2([
+__decorateClass$3([
   n$6({ attribute: "empty", reflect: true, type: Boolean })
 ], CxContentBrowserGrid.prototype, "empty", 2);
-__decorateClass$2([
+__decorateClass$3([
   n$6({ attribute: "view", reflect: true, type: String })
 ], CxContentBrowserGrid.prototype, "view", 2);
-__decorateClass$2([
+__decorateClass$3([
   n$6({ attribute: "has-more", reflect: true, type: Boolean })
 ], CxContentBrowserGrid.prototype, "hasMore", 2);
-__decorateClass$2([
+__decorateClass$3([
   n$6({ attribute: "loading", reflect: true, type: Boolean })
 ], CxContentBrowserGrid.prototype, "loading", 2);
-__decorateClass$2([
+__decorateClass$3([
   n$6({ attribute: "show-title", reflect: true, type: Boolean })
 ], CxContentBrowserGrid.prototype, "showTitle", 2);
-__decorateClass$2([
+__decorateClass$3([
   n$6({ attribute: "show-size", reflect: true, type: Boolean })
 ], CxContentBrowserGrid.prototype, "showSize", 2);
-__decorateClass$2([
+__decorateClass$3([
   n$6({ attribute: "show-dimensions", reflect: true, type: Boolean })
 ], CxContentBrowserGrid.prototype, "showDimensions", 2);
-__decorateClass$2([
+__decorateClass$3([
   n$6({ attribute: "show-tags", reflect: true, type: Boolean })
 ], CxContentBrowserGrid.prototype, "showTags", 2);
-__decorateClass$2([
+__decorateClass$3([
+  n$6({ attribute: "show-cta", reflect: true, type: Boolean })
+], CxContentBrowserGrid.prototype, "showCta", 2);
+__decorateClass$3([
+  n$6({ attribute: "cta-text", reflect: false, type: String })
+], CxContentBrowserGrid.prototype, "ctaText", 2);
+__decorateClass$3([
+  n$6({ attribute: "cta-text-transform", reflect: false, type: String })
+], CxContentBrowserGrid.prototype, "ctaTextTransform", 2);
+__decorateClass$3([
+  n$6({ attribute: false })
+], CxContentBrowserGrid.prototype, "busyAssetId", 2);
+__decorateClass$3([
   n$6({ attribute: "selected-asset-id", reflect: true, type: String })
 ], CxContentBrowserGrid.prototype, "selectedAssetId", 2);
-__decorateClass$2([
+__decorateClass$3([
   r$6()
 ], CxContentBrowserGrid.prototype, "assetMap", 2);
-__decorateClass$2([
+__decorateClass$3([
   r$6()
 ], CxContentBrowserGrid.prototype, "columnWidth", 2);
-__decorateClass$2([
+__decorateClass$3([
   watch("view", { waitUntilFirstUpdate: true })
 ], CxContentBrowserGrid.prototype, "handleViewChange", 1);
-__decorateClass$2([
+__decorateClass$3([
   watch("assets")
 ], CxContentBrowserGrid.prototype, "handleAssetsChange", 1);
-CxContentBrowserGrid = __decorateClass$2([
+CxContentBrowserGrid = __decorateClass$3([
   customElement("cx-content-browser-grid")
 ], CxContentBrowserGrid);
-const styles$1 = i$7`
+const styles$2 = i$7`
   :host {
     display: block;
   }
@@ -12585,14 +12809,14 @@ const styles$1 = i$7`
     cursor: default;
   }
 `;
-var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+var __defProp$2 = Object.defineProperty;
+var __getOwnPropDesc$2 = Object.getOwnPropertyDescriptor;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$2(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
     if (decorator = decorators[i4])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp$1(target, key, result);
+  if (kind && result) __defProp$2(target, key, result);
   return result;
 };
 const LOGOUT_ITEM_VALUE = "logout";
@@ -12684,91 +12908,963 @@ let CxContentBrowserHeader = class extends CortexElement {
       `;
     }
     return b`
-      <cx-avatar
-        class="header__user-avatar"
-        label=${this.localize.term("userAvatar")}
-        image=${this.avatar}
-        loading="lazy"
-      ></cx-avatar>
+      <cx-avatar
+        class="header__user-avatar"
+        label=${this.localize.term("userAvatar")}
+        image=${this.avatar}
+        loading="lazy"
+      ></cx-avatar>
+    `;
+  }
+  render() {
+    const containerClasses = {
+      container: true,
+      "container--bordered": this.bordered
+    };
+    return b`
+      <cx-space class=${e$5(containerClasses)} direction="vertical" spacing="small">
+        <cx-space class="header" justify-content="space-between" align-items="center">
+          <div class="header__title">
+            <cx-space class="header" justify-content="space-between" align-items="center" spacing="x-small">
+              ${this.renderTitle()}
+            </cx-space>
+          </div>
+          <div class="header__menu">
+            ${this.renderUserDropdown()}
+            ${n$5(
+      this.showCloseButton,
+      () => b`
+                <cx-icon-button
+                  name="close"
+                  label=${this.localize.term("close")}
+                  @click=${this.handleCloseClick}
+                ></cx-icon-button>
+              `,
+      () => A
+    )}
+          </div>
+        </cx-space>
+        <slot></slot>
+      </cx-space>
+    `;
+  }
+};
+CxContentBrowserHeader.styles = [componentStyles, styles$2];
+CxContentBrowserHeader.dependencies = {
+  "cx-avatar": CxAvatar,
+  "cx-divider": CxDivider,
+  "cx-dropdown": CxDropdown,
+  "cx-icon": CxIcon,
+  "cx-icon-button": CxIconButton,
+  "cx-line-clamp": CxLineClamp,
+  "cx-menu": CxMenu,
+  "cx-menu-item": CxMenuItem,
+  "cx-skeleton": CxSkeleton,
+  "cx-space": CxSpace,
+  "cx-typography": CxTypography
+};
+__decorateClass$2([
+  n$6({ type: Boolean })
+], CxContentBrowserHeader.prototype, "bordered", 2);
+__decorateClass$2([
+  n$6({ attribute: "application-name", type: String })
+], CxContentBrowserHeader.prototype, "applicationName", 2);
+__decorateClass$2([
+  n$6({ type: Boolean })
+], CxContentBrowserHeader.prototype, "loading", 2);
+__decorateClass$2([
+  n$6({ attribute: "is-fetching", type: Boolean })
+], CxContentBrowserHeader.prototype, "isFetching", 2);
+__decorateClass$2([
+  n$6({ attribute: "avatar", type: String })
+], CxContentBrowserHeader.prototype, "avatar", 2);
+__decorateClass$2([
+  n$6({ attribute: "full-name", type: String })
+], CxContentBrowserHeader.prototype, "fullName", 2);
+__decorateClass$2([
+  n$6({ attribute: "folder-title", type: String })
+], CxContentBrowserHeader.prototype, "folderTitle", 2);
+__decorateClass$2([
+  n$6({ attribute: "show-close-button", type: Boolean })
+], CxContentBrowserHeader.prototype, "showCloseButton", 2);
+__decorateClass$2([
+  n$6({ attribute: "can-logout", type: Boolean })
+], CxContentBrowserHeader.prototype, "canLogout", 2);
+CxContentBrowserHeader = __decorateClass$2([
+  customElement("cx-content-browser-header")
+], CxContentBrowserHeader);
+const styles$1 = i$7`
+  /* Containing block for the absolutely positioned loading bar, which is a direct child. */
+  :host {
+    position: relative;
+    display: block;
+    flex: 1;
+    box-sizing: border-box;
+    /*
+     * The overflow has to stop at the scrollport below, which it only does while the host cannot
+     * grow with the grids' min-content width. Two different parents can let it grow, so both are
+     * closed off:
+     *
+     * width  -- a multi-line flex parent stretches an item to its own flex line's cross size, the
+     *           largest hypothetical size on that line, and not to the container's width; only a
+     *           single-line container does the latter. The picker's column parent wraps, so the
+     *           host stretched to the grids' min-content width and carried everything beside it
+     *           along (L-429EVG: the login avatar left the viewport). A definite width ends that.
+     * min-width -- in a row parent the main axis is the horizontal one, and a flex item's automatic
+     *           minimum size refuses to shrink below its content there. In a column parent that
+     *           automatic minimum lands on min-height instead, which is why width alone is not
+     *           enough for one shape and min-width alone is not enough for the other.
+     */
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  /*
+   * The one scrollport for both axes. The header and the virtualized rows are separate grids, so
+   * anything that scrolled them separately could drift; sharing a scroll container means a single
+   * scroll offset moves both and they cannot. The vertical scrollbar therefore sits outside both
+   * grids, which is why neither has to reserve a gutter for it.
+   */
+  .content-browser-table {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+  }
+
+  .content-browser-table-loading {
+    position: absolute;
+    width: 100%;
+    z-index: var(--cx-z-index-drawer);
+  }
+
+  .content-browser-table-loading cx-progress-bar {
+    --height: 4px;
+  }
+
+  /*
+   * min-width: min-content is what makes the table scroll instead of squashing: it is the width
+   * at which every track that cannot shrink still fits, so a column dragged wider than the viewport
+   * widens both grids past it and the container gains a horizontal scrollbar. The header and a row
+   * resolve the same track list against the same padding and gaps, so their min-content widths are
+   * equal and their column boundaries stay on top of each other at any scroll offset.
+   */
+  .content-browser-table__header,
+  .content-browser-table__row {
+    display: grid;
+    align-items: center;
+    /* Set on the host so the header and every virtualized row resolve one identical track list. */
+    grid-template-columns: var(--cx-content-browser-table-columns);
+    column-gap: var(--cx-spacing-medium);
+    padding: var(--cx-spacing-x-small) var(--cx-spacing-medium);
+    min-width: min-content;
+  }
+
+  /*
+   * Sticky rather than outside the scroller: the header has to travel with the rows horizontally
+   * and stay put vertically, and only sharing their scrollport gives the first of those for free.
+   */
+  .content-browser-table__head {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    flex: none;
+    min-width: min-content;
+    /*
+     * The offset and the background belong to the sticky box, not to the row inside it: rows now
+     * scroll underneath within the same scrollport, and any part of the sticky box that paints
+     * nothing shows them through. __head is a flex item, so a child's margin cannot collapse out
+     * of it either. Literal fallback because an unthemed host paints no background at all.
+     */
+    padding-top: 5px;
+    background-color: var(--cx-color-neutral-50, #f9f9f9);
+  }
+
+  .content-browser-table__header {
+    border-bottom: 1px solid var(--cx-color-neutral-200);
+    color: var(--cx-color-neutral-700);
+  }
+
+  /* cx-typography sets its own font-weight, so the host cannot simply inherit one in. */
+  .content-browser-table__header cx-typography::part(base) {
+    font-weight: var(--cx-font-weight-medium);
+  }
+
+  .content-browser-table__body {
+    flex: 1;
+    min-height: 0;
+  }
+
+  /*
+   * lit-virtualizer positions rows absolutely, which makes them shrink-to-fit. Without an explicit
+   * width the row's grid resolves its fr tracks against the row's own content width while the
+   * header -- not virtualized -- resolves the same tracks against the full container, so the two
+   * disagree and a fractional column never receives the free space. 100% is the scrollport, not
+   * the scroll width, so the shared min-width: min-content above is what carries a row past it.
+   */
+  .content-browser-table__row {
+    box-sizing: border-box;
+    width: 100%;
+    border-bottom: 1px solid var(--cx-color-neutral-200);
+    cursor: pointer;
+  }
+
+  .content-browser-table__row:hover,
+  .content-browser-table__row:focus-visible {
+    background-color: var(--cx-color-neutral-100);
+    outline: none;
+  }
+
+  .content-browser-table__row--selected {
+    background-color: var(--cx-color-primary-100);
+  }
+
+  .content-browser-table__row--disabled {
+    cursor: default;
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  .content-browser-table__cell {
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .content-browser-table__cell--center {
+    text-align: center;
+  }
+
+  .content-browser-table__cell--right {
+    text-align: right;
+  }
+
+  /* Anchors the resize handle; the cell clips, so the handle stays inside its own right edge. */
+  .content-browser-table__header .content-browser-table__cell {
+    position: relative;
+  }
+
+  /*
+   * Kept wholly inside the cell: the cell clips, so any part hanging into the column gap is not
+   * painted and, more importantly, not hit-testable.
+   */
+  .content-browser-table__resize {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    /* Fallback matters: with no design-system theme the token is empty and the grab target is 0px. */
+    width: var(--cx-spacing-medium, 16px);
+    cursor: col-resize;
+    touch-action: none;
+  }
+
+  /*
+   * The column divider, pinned to the grab target's right edge -- which the cell clips to, so it
+   * lands on the column boundary. Visible at rest as a neutral full-height hairline: it is what
+   * tells the user where the draggable boundaries are before the pointer is anywhere near one, so
+   * it has to read as table chrome. The rules below take it to the primary treatment once the
+   * boundary is actually being addressed. Literal fallbacks because the tokens resolve to nothing
+   * on an unthemed host, and an invisible divider is the defect this fixes.
+   */
+  .content-browser-table__resize::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: var(--cx-color-neutral-200, #e4e4e7);
+    content: '';
+  }
+
+  .content-browser-table__resize:hover::after,
+  .content-browser-table__resize:focus-visible::after {
+    width: 2px;
+    background-color: var(--cx-color-primary-500, #3b82f6);
+  }
+
+  /*
+   * Keyboard focus needs an indicator of its own: the hover hairline is 2px wide and half the cell
+   * high, far too small to read as focus. The ring is inset by its own width because the header
+   * cell clips -- the handle is flush with the cell's top, right and bottom edges, so anything
+   * drawn outside its box is never painted. Fallbacks matter: with no design-system theme the
+   * tokens are empty and the ring would disappear entirely.
+   */
+  .content-browser-table__resize:focus-visible {
+    outline: var(--cx-focus-ring-style, solid) var(--cx-focus-ring-width, 3px)
+      var(--cx-focus-ring-color, #2563eb);
+    outline-offset: calc(-1 * var(--cx-focus-ring-width, 3px));
+  }
+
+  /*
+   * While a column is being dragged the pointer is captured, so it can travel anywhere in the
+   * document -- keep the resize cursor and stop the drag from selecting header text.
+   */
+  .content-browser-table--resizing {
+    cursor: col-resize;
+    user-select: none;
+  }
+
+  .content-browser-table--resizing .content-browser-table__resize::after {
+    width: 2px;
+    background-color: var(--cx-color-primary-500, #3b82f6);
+  }
+
+  .content-browser-table__cell--action {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  /*
+   * visibility, not display: the action column is a max-content track, so removing the button
+   * from layout would collapse the track and reflow every other column on hover.
+   */
+  .content-browser-table__action {
+    --min-height: 0;
+
+    visibility: hidden;
+  }
+
+  .content-browser-table__row:hover .content-browser-table__action,
+  .content-browser-table__row:focus-visible .content-browser-table__action,
+  .content-browser-table__row:focus-within .content-browser-table__action,
+  .content-browser-table__row--selected .content-browser-table__action,
+  .content-browser-table__action--busy {
+    visibility: visible;
+  }
+
+  /*
+   * Reserves the action track's width in the header grid so it resolves to the same max-content
+   * size the row grid resolves to. It is never shown and never focusable.
+   */
+  .content-browser-table__action--placeholder {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .content-browser-table__empty {
+    flex: 1;
+  }
+`;
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __typeError$1 = (msg) => {
+  throw TypeError(msg);
+};
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
+    if (decorator = decorators[i4])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$1(target, key, result);
+  return result;
+};
+var __accessCheck$1 = (obj, member, msg) => member.has(obj) || __typeError$1("Cannot " + msg);
+var __privateGet$1 = (obj, member, getter) => (__accessCheck$1(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd$1 = (obj, member, value) => member.has(obj) ? __typeError$1("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet$1 = (obj, member, value, setter) => (__accessCheck$1(obj, member, "write to private field"), member.set(obj, value), value);
+var _lastHeight, _lastScrollTop, _resize, _fallbackListeners;
+const ROW_HEIGHT = 40;
+const ACTION_COLUMN_TRACK = "max-content";
+const MIN_COLUMN_WIDTH = 48;
+const MAX_COLUMN_WIDTH = 2e3;
+const COLUMN_RESIZE_STEP = 8;
+const COLUMN_RESIZE_STEP_LARGE = 32;
+const TABLE_COLUMNS_PROPERTY = "--cx-content-browser-table-columns";
+const FLEX_TRACK = /^\d*\.?\d+fr$/i;
+const MINMAX_TRACK = /^minmax\(\s*(.+?)\s*,\s*(.+?)\s*\)$/i;
+const COLLAPSIBLE_MINIMUM = /^(auto|min-content)$/i;
+const PIXEL_MINIMUM = /^(\d*\.?\d+)(px)?$/i;
+function floorFlexibleTrack(track) {
+  const authored = track.trim();
+  const minmax = MINMAX_TRACK.exec(authored);
+  if (!minmax) {
+    return FLEX_TRACK.test(authored) ? `minmax(${MIN_COLUMN_WIDTH}px, ${authored})` : authored;
+  }
+  const [, minimum, maximum] = minmax;
+  if (!FLEX_TRACK.test(maximum)) {
+    return authored;
+  }
+  const pixels = PIXEL_MINIMUM.exec(minimum);
+  const collapsible = COLLAPSIBLE_MINIMUM.test(minimum) || pixels !== null && Number.parseFloat(pixels[1]) < MIN_COLUMN_WIDTH;
+  return collapsible ? `minmax(${MIN_COLUMN_WIDTH}px, ${maximum})` : authored;
+}
+function createColumnWidths(entries = []) {
+  return Object.assign(/* @__PURE__ */ Object.create(null), Object.fromEntries(entries));
+}
+function readCellValue(asset, field) {
+  const value = asset[field];
+  if (value === void 0 || value === null || typeof value === "object") {
+    return "";
+  }
+  return String(value);
+}
+let CxContentBrowserTable = class extends CortexElement {
+  constructor() {
+    super();
+    this.localize = new LocalizeController(this);
+    this.assets = [];
+    this.columns = [];
+    this.ctaText = "";
+    this.ctaTextTransform = "capitalize";
+    this.empty = false;
+    this.hasMore = false;
+    this.loading = false;
+    this.selectedAssetId = void 0;
+    this.busyAssetId = void 0;
+    this.assetMap = /* @__PURE__ */ new Map();
+    this.columnWidths = createColumnWidths();
+    __privateAdd$1(this, _lastHeight, 0);
+    __privateAdd$1(this, _lastScrollTop, 0);
+    this.scrollAnchorController = new ScrollAnchorController(this, {
+      // The rows scroll inside the table container, not inside the virtualizer, so that is the
+      // element whose scroll offset an anchor has to be captured against and restored on.
+      getContainer: () => this.containerEl,
+      // The sticky header is the container's first in-flow child, so row 0 starts below it rather
+      // than at the content origin. Measured rather than a constant: the height is whatever the
+      // host's tokens and column titles resolve to.
+      getContentOffset: () => {
+        var _a2, _b2;
+        return (_b2 = (_a2 = this.headEl) == null ? void 0 : _a2.getBoundingClientRect().height) != null ? _b2 : 0;
+      },
+      getItemIndexById: (id) => this.assets.findIndex((asset) => asset.id === id),
+      // The container is a plain div, so it has no `layoutComplete` of its own; the virtualizer still
+      // has to have laid the rows out before a restore can land on one.
+      getLayoutSource: () => this.bodyEl,
+      itemSelector: ".content-browser-table__row"
+    });
+    __privateAdd$1(this, _resize);
+    __privateAdd$1(this, _fallbackListeners);
+    this.debouncedCalculatePageSize = debounce(this.calculatePageSize, 200);
+    this.debouncedHandleScrollEnd = debounce(this.handleScrollEnd, 200);
+    this.handleRowClick = this.handleRowClick.bind(this);
+    this.handleActionClick = this.handleActionClick.bind(this);
+    this.handleRowKeyDown = this.handleRowKeyDown.bind(this);
+  }
+  /** One authored track per configured column, in order. The action track is not one of them. */
+  buildColumnTracks(widths) {
+    return this.columns.map((column) => {
+      var _a2;
+      const resized = widths[column.field];
+      return resized === void 0 ? floorFlexibleTrack((_a2 = column.width) != null ? _a2 : "minmax(0, 1fr)") : `${resized}px`;
+    });
+  }
+  buildTemplateColumns(widths) {
+    return [...this.buildColumnTracks(widths), ACTION_COLUMN_TRACK].join(" ");
+  }
+  get templateColumns() {
+    return this.buildTemplateColumns(this.columnWidths);
+  }
+  resolveColumnWidth(field) {
+    var _a2;
+    const configured = this.columnWidths[field];
+    if (configured !== void 0) {
+      return configured;
+    }
+    const cell = this.renderRoot.querySelector(
+      `.content-browser-table__header [role="columnheader"][data-field="${CSS.escape(field)}"]`
+    );
+    return this.clampColumnWidth((_a2 = cell == null ? void 0 : cell.getBoundingClientRect().width) != null ? _a2 : MIN_COLUMN_WIDTH);
+  }
+  clampColumnWidth(width) {
+    return Math.round(Math.min(MAX_COLUMN_WIDTH, Math.max(MIN_COLUMN_WIDTH, width)));
+  }
+  commitColumnWidth(field, width) {
+    if (this.columnWidths[field] === width) {
+      return;
+    }
+    const next = createColumnWidths(Object.entries(this.columnWidths));
+    if (width === void 0) {
+      delete next[field];
+    } else {
+      next[field] = width;
+    }
+    this.columnWidths = next;
+    this.emit("cx-content-browser-table-column-resize", { detail: { field, width } });
+  }
+  /**
+   * Kept off the reactive path: its only effect is the cursor, the text selection and the handle
+   * colour, while a reactive toggle would rebind `renderItem` and re-render every visible row twice
+   * per drag.
+   */
+  setResizingClass(active) {
+    var _a2;
+    (_a2 = this.containerEl) == null ? void 0 : _a2.classList.toggle("content-browser-table--resizing", active);
+  }
+  bindFallbackListeners(target) {
+    const onMove = (event) => this.handleResizeMove(event);
+    const onUp = (event) => this.handleResizeEnd(event);
+    const onCancel = (event) => this.handleResizeCancel(event);
+    __privateSet$1(this, _fallbackListeners, { onCancel, onMove, onUp, target });
+    target.addEventListener("pointermove", onMove);
+    target.addEventListener("pointerup", onUp);
+    target.addEventListener("pointercancel", onCancel);
+  }
+  releaseFallbackListeners() {
+    if (!__privateGet$1(this, _fallbackListeners)) {
+      return;
+    }
+    const { onCancel, onMove, onUp, target } = __privateGet$1(this, _fallbackListeners);
+    target.removeEventListener("pointermove", onMove);
+    target.removeEventListener("pointerup", onUp);
+    target.removeEventListener("pointercancel", onCancel);
+    __privateSet$1(this, _fallbackListeners, void 0);
+  }
+  /**
+   * With the fallback bound, an event dispatched at the handle reaches the handle's own binding and
+   * then the document one, running every terminal handler twice. The fallback owns the whole drag on
+   * that path, so the element-level delivery is dropped.
+   */
+  isHandledByFallback(event) {
+    return __privateGet$1(this, _fallbackListeners) !== void 0 && event.currentTarget !== __privateGet$1(this, _fallbackListeners).target;
+  }
+  /** Every trace of a drag: the state the track-list publish is gated on, the cursor, the fallback. */
+  endResize() {
+    __privateSet$1(this, _resize, void 0);
+    this.releaseFallbackListeners();
+    this.setResizingClass(false);
+  }
+  handleResizeStart(event) {
+    const handle = event.currentTarget;
+    const field = handle.dataset.field;
+    if (!field || !event.isPrimary || event.button !== 0 || __privateGet$1(this, _resize)) {
+      return;
+    }
+    event.preventDefault();
+    handle.focus();
+    const startWidth = this.resolveColumnWidth(field);
+    __privateSet$1(this, _resize, {
+      field,
+      pointerId: event.pointerId,
+      startWidth,
+      startX: event.clientX,
+      width: startWidth
+    });
+    this.setResizingClass(true);
+    try {
+      handle.setPointerCapture(event.pointerId);
+    } catch (e2) {
+      this.bindFallbackListeners(handle.ownerDocument);
+    }
+  }
+  /**
+   * The track list a running drag owns, built against the columns rendering right now: the committed
+   * widths with the drag's own preview over the top. Falls back to the committed list when no drag is
+   * running, so one expression covers both.
+   */
+  get previewTemplateColumns() {
+    if (!__privateGet$1(this, _resize)) {
+      return this.templateColumns;
+    }
+    const preview = createColumnWidths(Object.entries(this.columnWidths));
+    preview[__privateGet$1(this, _resize).field] = __privateGet$1(this, _resize).width;
+    return this.buildTemplateColumns(preview);
+  }
+  /** Repaints the drag with one property write: no re-render, no layout read. */
+  previewColumnWidth(width) {
+    if (!__privateGet$1(this, _resize)) {
+      return;
+    }
+    __privateGet$1(this, _resize).width = width;
+    this.style.setProperty(TABLE_COLUMNS_PROPERTY, this.previewTemplateColumns);
+  }
+  handleResizeMove(event) {
+    if (this.isHandledByFallback(event) || !__privateGet$1(this, _resize) || __privateGet$1(this, _resize).pointerId !== event.pointerId) {
+      return;
+    }
+    this.previewColumnWidth(this.clampColumnWidth(
+      __privateGet$1(this, _resize).startWidth + (event.clientX - __privateGet$1(this, _resize).startX)
+    ));
+  }
+  handleResizeEnd(event) {
+    if (this.isHandledByFallback(event) || !__privateGet$1(this, _resize) || __privateGet$1(this, _resize).pointerId !== event.pointerId) {
+      return;
+    }
+    const { field, startWidth, width } = __privateGet$1(this, _resize);
+    this.endResize();
+    if (!this.columns.some((column) => column.field === field)) {
+      this.style.setProperty(TABLE_COLUMNS_PROPERTY, this.templateColumns);
+      return;
+    }
+    if (width !== startWidth) {
+      this.commitColumnWidth(field, width);
+      return;
+    }
+    this.style.setProperty(TABLE_COLUMNS_PROPERTY, this.templateColumns);
+  }
+  /**
+   * A gesture the user agent took away was never a decision: restore the committed track list and
+   * tell the host nothing.
+   */
+  handleResizeCancel(event) {
+    if (this.isHandledByFallback(event) || !__privateGet$1(this, _resize) || __privateGet$1(this, _resize).pointerId !== event.pointerId) {
+      return;
+    }
+    this.endResize();
+    this.style.setProperty(TABLE_COLUMNS_PROPERTY, this.templateColumns);
+  }
+  handleResizeKeyDown(event) {
+    const handle = event.currentTarget;
+    const field = handle.dataset.field;
+    if (!field) {
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      this.commitColumnWidth(field, void 0);
+      return;
+    }
+    const step = event.shiftKey ? COLUMN_RESIZE_STEP_LARGE : COLUMN_RESIZE_STEP;
+    const delta = event.key === "ArrowLeft" ? -step : event.key === "ArrowRight" ? step : 0;
+    if (!delta) {
+      return;
+    }
+    event.preventDefault();
+    const startWidth = this.resolveColumnWidth(field);
+    const width = this.clampColumnWidth(startWidth + delta);
+    if (width === startWidth) {
+      return;
+    }
+    this.commitColumnWidth(field, width);
+  }
+  handleResizeReset(event) {
+    const field = event.currentTarget.dataset.field;
+    if (field) {
+      this.commitColumnWidth(field, void 0);
+    }
+  }
+  renderResizeHandle(column) {
+    const pinned = this.columnWidths[column.field];
+    return b`
+      <div
+        class="content-browser-table__resize"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label=${this.localize.term("resize")}
+        aria-valuemin=${MIN_COLUMN_WIDTH}
+        aria-valuemax=${MAX_COLUMN_WIDTH}
+        aria-valuenow=${o$4(pinned)}
+        tabindex="0"
+        data-field=${column.field}
+        @pointerdown=${this.handleResizeStart}
+        @pointermove=${this.handleResizeMove}
+        @pointerup=${this.handleResizeEnd}
+        @pointercancel=${this.handleResizeCancel}
+        @lostpointercapture=${this.handleResizeEnd}
+        @dblclick=${this.handleResizeReset}
+        @keydown=${this.handleResizeKeyDown}
+      ></div>
+    `;
+  }
+  handleColumnsChange() {
+    const fields = new Set(this.columns.map((column) => column.field));
+    const kept = Object.entries(this.columnWidths).filter(([field]) => fields.has(field));
+    if (kept.length !== Object.keys(this.columnWidths).length) {
+      this.columnWidths = createColumnWidths(kept);
+    }
+  }
+  updated() {
+    this.style.setProperty(TABLE_COLUMNS_PROPERTY, this.previewTemplateColumns);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.endResize();
+  }
+  handleAssetsChange() {
+    this.assetMap.clear();
+    this.assets.forEach((item) => this.assetMap.set(item.id, item));
+    this.scrollAnchorController.scheduleRestore();
+  }
+  handleResize(event) {
+    event.stopPropagation();
+    const entries = event.detail.entries;
+    if (entries[0].target !== this.containerEl) {
+      return;
+    }
+    this.scrollAnchorController.capture();
+    this.debouncedCalculatePageSize(entries[0].contentRect.height);
+  }
+  calculatePageSize(height) {
+    if (Math.abs(__privateGet$1(this, _lastHeight) - height) < 10) {
+      return;
+    }
+    __privateSet$1(this, _lastHeight, height);
+    this.scrollAnchorController.setLayoutMetrics({
+      columnCount: 1,
+      itemHeight: ROW_HEIGHT
+    });
+    this.emit("cx-content-browser-grid-resize", {
+      detail: {
+        columnCount: 1,
+        rowCount: Math.ceil(height / ROW_HEIGHT)
+      }
+    });
+    this.scrollAnchorController.scheduleRestore();
+  }
+  selectRow(assetId) {
+    var _a2;
+    if (!assetId || ((_a2 = this.assetMap.get(assetId)) == null ? void 0 : _a2.inColdStorage)) {
+      return;
+    }
+    this.emit("cx-content-browser-grid-click", {
+      detail: {
+        id: assetId
+      }
+    });
+  }
+  handleRowClick(event) {
+    var _a2;
+    this.selectRow((_a2 = event.currentTarget.dataset.id) != null ? _a2 : "");
+  }
+  handleActionClick(event) {
+    var _a2;
+    event.stopPropagation();
+    this.selectRow((_a2 = event.currentTarget.dataset.id) != null ? _a2 : "");
+  }
+  handleRowKeyDown(event) {
+    var _a2;
+    if (event.key !== "Enter" && event.key !== " ") {
+      return;
+    }
+    event.preventDefault();
+    this.selectRow((_a2 = event.currentTarget.dataset.id) != null ? _a2 : "");
+  }
+  /**
+   * @param assetId - omitted for the header's sizing twin, which is inert and never announced.
+   */
+  renderActionButton(assetId) {
+    const isPlaceholder = assetId === void 0;
+    const isBusy = !isPlaceholder && assetId === this.busyAssetId;
+    return b`
+      <cx-button
+        class=${e$5({
+      "content-browser-table__action": true,
+      "content-browser-table__action--busy": isBusy,
+      "content-browser-table__action--placeholder": isPlaceholder
+    })}
+        data-id=${o$4(assetId)}
+        size="small"
+        variant="primary"
+        tabindex="-1"
+        ?loading=${isBusy}
+        aria-hidden=${isPlaceholder ? "true" : "false"}
+        @click=${isPlaceholder ? A : this.handleActionClick}
+      >
+        <span style=${o$1({ textTransform: this.ctaTextTransform })}>
+          ${this.ctaText || this.localize.term("insert")}
+        </span>
+      </cx-button>
+    `;
+  }
+  /**
+   * Bound fresh on every render at the call site, deliberately. `lit-virtualizer` re-runs this only
+   * when `items` or `renderItem` change identity, and the selected id lives on neither — with a
+   * stable reference the rows keep their first render and the selected row is never marked. A new
+   * `items` array alone does not do it; the function identity is what the virtualizer acts on.
+   */
+  renderRow(asset) {
+    if (!asset) {
+      return A;
+    }
+    return b`
+      <div
+        class=${e$5({
+      "content-browser-table__row": true,
+      "content-browser-table__row--disabled": Boolean(asset.inColdStorage),
+      "content-browser-table__row--selected": asset.id === this.selectedAssetId
+    })}
+        data-id=${asset.id}
+        role="row"
+        tabindex=${asset.inColdStorage ? -1 : 0}
+        aria-current=${asset.id === this.selectedAssetId ? "true" : "false"}
+        style=${o$1({
+      "min-height": `${ROW_HEIGHT}px`
+    })}
+        @click=${this.handleRowClick}
+        @keydown=${this.handleRowKeyDown}
+      >
+        ${c$1(
+      this.columns,
+      (column, index) => `${column.field}:${index}`,
+      (column) => {
+        var _a2;
+        return b`
+            <div
+              class=${e$5({
+          "content-browser-table__cell": true,
+          [`content-browser-table__cell--${column.align}`]: Boolean(column.align)
+        })}
+              role="cell"
+            >
+              <cx-line-clamp lines=${(_a2 = column.lines) != null ? _a2 : 1}>
+                <cx-typography variant="body3">${readCellValue(asset, column.field)}</cx-typography>
+              </cx-line-clamp>
+            </div>
+          `;
+      }
+    )}
+        <div class="content-browser-table__cell content-browser-table__cell--action" role="cell">
+          ${this.renderActionButton(asset.id)}
+        </div>
+      </div>
     `;
   }
+  handleScroll(event) {
+    const container = event.target;
+    this.scrollAnchorController.capture(container);
+    const scrolledVertically = container.scrollTop !== __privateGet$1(this, _lastScrollTop);
+    __privateSet$1(this, _lastScrollTop, container.scrollTop);
+    if (!scrolledVertically) {
+      return;
+    }
+    if (container.scrollTop + container.clientHeight >= container.scrollHeight - 10) {
+      this.debouncedHandleScrollEnd();
+    }
+  }
+  handleScrollEnd() {
+    if (this.hasMore) {
+      this.emit("cx-content-browser-grid-scroll-end");
+    }
+  }
   render() {
-    const containerClasses = {
-      container: true,
-      "container--bordered": this.bordered
-    };
     return b`
-      <cx-space class=${e$5(containerClasses)} direction="vertical" spacing="small">
-        <cx-space class="header" justify-content="space-between" align-items="center">
-          <div class="header__title">
-            <cx-space class="header" justify-content="space-between" align-items="center" spacing="x-small">
-              ${this.renderTitle()}
-            </cx-space>
+      <div
+        class="content-browser-table-loading"
+        style=${o$1({
+      opacity: this.loading ? 1 : 0
+    })}
+      >
+        <cx-progress-bar indeterminate></cx-progress-bar>
+      </div>
+      <cx-resize-observer @cx-resize=${this.handleResize}>
+        <div
+          class="content-browser-table"
+          role="table"
+          @scroll=${this.handleScroll}
+        >
+          <div class="content-browser-table__head" role="rowgroup">
+            <div
+              class="content-browser-table__header"
+              role="row"
+            >
+              ${c$1(
+      this.columns,
+      (column) => column.field,
+      (column) => b`
+                  <div
+                    class=${e$5({
+        "content-browser-table__cell": true,
+        [`content-browser-table__cell--${column.align}`]: Boolean(column.align)
+      })}
+                    role="columnheader"
+                    data-field=${column.field}
+                  >
+                    <cx-line-clamp lines="1">
+                      <cx-typography variant="small">${column.title}</cx-typography>
+                    </cx-line-clamp>
+                    ${this.renderResizeHandle(column)}
+                  </div>
+                `
+    )}
+              <div
+                class="content-browser-table__cell content-browser-table__cell--action"
+                role="columnheader"
+                aria-label=${this.ctaText || this.localize.term("insert")}
+              >
+                ${this.renderActionButton(void 0)}
+              </div>
+            </div>
           </div>
-          <div class="header__menu">
-            ${this.renderUserDropdown()}
-            ${n$5(
-      this.showCloseButton,
+          ${n$5(
+      this.empty,
       () => b`
-                <cx-icon-button
-                  name="close"
-                  label=${this.localize.term("close")}
-                  @click=${this.handleCloseClick}
-                ></cx-icon-button>
-              `,
-      () => A
+              <cx-content-browser-no-result
+                class="content-browser-table__empty"
+                icon="search_off"
+                message=${this.localize.term("noResults")}
+              ></cx-content-browser-no-result>
+            `,
+      // Deliberately not a `scroller`: the table container scrolls both axes, so the
+      // virtualizer sizes itself to the whole list and reacts to that ancestor's scrolling.
+      // One scrollport is what keeps the header and the rows on one horizontal offset.
+      () => b`
+              <lit-virtualizer
+                class="content-browser-table__body"
+                role="rowgroup"
+                .items=${this.assets}
+                .renderItem=${(asset) => this.renderRow(asset)}
+              ></lit-virtualizer>
+            `
     )}
-          </div>
-        </cx-space>
-        <slot></slot>
-      </cx-space>
+        </div>
+      </cx-resize-observer>
     `;
   }
 };
-CxContentBrowserHeader.styles = [componentStyles, styles$1];
-CxContentBrowserHeader.dependencies = {
-  "cx-avatar": CxAvatar,
-  "cx-divider": CxDivider,
-  "cx-dropdown": CxDropdown,
-  "cx-icon": CxIcon,
-  "cx-icon-button": CxIconButton,
+_lastHeight = /* @__PURE__ */ new WeakMap();
+_lastScrollTop = /* @__PURE__ */ new WeakMap();
+_resize = /* @__PURE__ */ new WeakMap();
+_fallbackListeners = /* @__PURE__ */ new WeakMap();
+CxContentBrowserTable.styles = [componentStyles, styles$1];
+CxContentBrowserTable.dependencies = {
+  "cx-button": CxButton,
+  "cx-content-browser-no-result": CxContentBrowserNoResult,
   "cx-line-clamp": CxLineClamp,
-  "cx-menu": CxMenu,
-  "cx-menu-item": CxMenuItem,
-  "cx-skeleton": CxSkeleton,
-  "cx-space": CxSpace,
+  "cx-progress-bar": CxProgressBar,
+  "cx-resize-observer": CxResizeObserver,
   "cx-typography": CxTypography
 };
 __decorateClass$1([
-  n$6({ type: Boolean })
-], CxContentBrowserHeader.prototype, "bordered", 2);
+  e$7(".content-browser-table")
+], CxContentBrowserTable.prototype, "containerEl", 2);
 __decorateClass$1([
-  n$6({ attribute: "application-name", type: String })
-], CxContentBrowserHeader.prototype, "applicationName", 2);
+  e$7(".content-browser-table__head")
+], CxContentBrowserTable.prototype, "headEl", 2);
 __decorateClass$1([
-  n$6({ type: Boolean })
-], CxContentBrowserHeader.prototype, "loading", 2);
+  e$7("lit-virtualizer")
+], CxContentBrowserTable.prototype, "bodyEl", 2);
 __decorateClass$1([
-  n$6({ attribute: "is-fetching", type: Boolean })
-], CxContentBrowserHeader.prototype, "isFetching", 2);
+  n$6({ attribute: "assets", reflect: false, type: Array })
+], CxContentBrowserTable.prototype, "assets", 2);
 __decorateClass$1([
-  n$6({ attribute: "avatar", type: String })
-], CxContentBrowserHeader.prototype, "avatar", 2);
+  n$6({ attribute: "columns", reflect: false, type: Array })
+], CxContentBrowserTable.prototype, "columns", 2);
 __decorateClass$1([
-  n$6({ attribute: "full-name", type: String })
-], CxContentBrowserHeader.prototype, "fullName", 2);
+  n$6({ attribute: "cta-text", reflect: false, type: String })
+], CxContentBrowserTable.prototype, "ctaText", 2);
 __decorateClass$1([
-  n$6({ attribute: "folder-title", type: String })
-], CxContentBrowserHeader.prototype, "folderTitle", 2);
+  n$6({ attribute: "cta-text-transform", reflect: false, type: String })
+], CxContentBrowserTable.prototype, "ctaTextTransform", 2);
 __decorateClass$1([
-  n$6({ attribute: "show-close-button", type: Boolean })
-], CxContentBrowserHeader.prototype, "showCloseButton", 2);
+  n$6({ attribute: "empty", reflect: true, type: Boolean })
+], CxContentBrowserTable.prototype, "empty", 2);
 __decorateClass$1([
-  n$6({ attribute: "can-logout", type: Boolean })
-], CxContentBrowserHeader.prototype, "canLogout", 2);
-CxContentBrowserHeader = __decorateClass$1([
-  customElement("cx-content-browser-header")
-], CxContentBrowserHeader);
+  n$6({ attribute: "has-more", reflect: true, type: Boolean })
+], CxContentBrowserTable.prototype, "hasMore", 2);
+__decorateClass$1([
+  n$6({ attribute: "loading", reflect: true, type: Boolean })
+], CxContentBrowserTable.prototype, "loading", 2);
+__decorateClass$1([
+  n$6({ attribute: "selected-asset-id", reflect: true, type: String })
+], CxContentBrowserTable.prototype, "selectedAssetId", 2);
+__decorateClass$1([
+  n$6({ attribute: false })
+], CxContentBrowserTable.prototype, "busyAssetId", 2);
+__decorateClass$1([
+  r$6()
+], CxContentBrowserTable.prototype, "assetMap", 2);
+__decorateClass$1([
+  r$6()
+], CxContentBrowserTable.prototype, "columnWidths", 2);
+__decorateClass$1([
+  watch("columns", { waitUntilFirstUpdate: true })
+], CxContentBrowserTable.prototype, "handleColumnsChange", 1);
+__decorateClass$1([
+  watch("assets")
+], CxContentBrowserTable.prototype, "handleAssetsChange", 1);
+CxContentBrowserTable = __decorateClass$1([
+  customElement("cx-content-browser-table")
+], CxContentBrowserTable);
 const appendPathAndQuery = (baseUrl, pathSuffix, extraQueryParams = []) => {
   const questionMarkIndex = baseUrl.indexOf("?");
   const hashIndex = baseUrl.indexOf("#");
@@ -13157,8 +14253,26 @@ function apiGetAssetsByIDs(_0) {
     }
   });
 }
+const ASSET_LIST_FIELDS = [
+  DEFAULT_VIEW_SIZE,
+  FIELD_DOC_TYPE,
+  FIELD_EXTENSION,
+  FIELD_FILE_SIZE,
+  FIELD_IDENTIFIER,
+  FIELD_KEYWORDS,
+  FIELD_MAX_HEIGHT,
+  FIELD_MAX_WIDTH,
+  FIELD_ORIGINAL_FILE_NAME,
+  FIELD_RECORD_ID,
+  FIELD_SUBTYPE,
+  FIELD_TITLE_WITH_FALLBACK,
+  FIELD_UPDATED_FILE_NAME,
+  FIELD_STORAGE_GROUP,
+  ORIGINAL_VIEW_SIZE
+];
 function apiGetAssets(_0) {
   return __async(this, arguments, function* ({
+    fields,
     folderId,
     isSeeThrough,
     limitedToDocTypes = [],
@@ -13169,25 +14283,17 @@ function apiGetAssets(_0) {
     start,
     useSession
   }) {
+    var _a2;
+    const validatedFields = (_a2 = fields == null ? void 0 : fields.filter((field) => field && typeof field === "string")) != null ? _a2 : [];
     try {
       const response = yield http.request({
         data: __spreadValues({
           Fields: [
-            DEFAULT_VIEW_SIZE,
-            FIELD_DOC_TYPE,
-            FIELD_EXTENSION,
-            FIELD_FILE_SIZE,
-            FIELD_IDENTIFIER,
-            FIELD_KEYWORDS,
-            FIELD_MAX_HEIGHT,
-            FIELD_MAX_WIDTH,
-            FIELD_ORIGINAL_FILE_NAME,
-            FIELD_RECORD_ID,
-            FIELD_SUBTYPE,
-            FIELD_TITLE_WITH_FALLBACK,
-            FIELD_UPDATED_FILE_NAME,
-            FIELD_STORAGE_GROUP,
-            ORIGINAL_VIEW_SIZE
+            ...ASSET_LIST_FIELDS,
+            ...validatedFields.filter((field, index) => {
+              const seen = [...ASSET_LIST_FIELDS, ...validatedFields.slice(0, index)];
+              return !seen.some((item) => item.toLowerCase() === field.toLowerCase());
+            })
           ],
           Limit: pageSize || void 0,
           LimitedToDocTypes: limitedToDocTypes,
@@ -13203,15 +14309,22 @@ function apiGetAssets(_0) {
         transformResponse: [
           ...Array.isArray(http.defaults.transformResponse) ? http.defaults.transformResponse : [],
           (rawResponse) => {
-            var _a2, _b2;
-            const mappedItems = (_b2 = (_a2 = rawResponse.contentItems) == null ? void 0 : _a2.map((item) => {
-              var _a3, _b3, _c2, _d2, _e2, _f2, _g, _h, _i, _j, _k, _l;
-              let extension = (_a3 = item.fields[FIELD_EXTENSION]) != null ? _a3 : "";
+            var _a3, _b2;
+            const mappedItems = (_b2 = (_a3 = rawResponse.contentItems) == null ? void 0 : _a3.map((item) => {
+              var _a4, _b3, _c2, _d2, _e2, _f2, _g, _h, _i, _j, _k, _l;
+              let extension = (_a4 = item.fields[FIELD_EXTENSION]) != null ? _a4 : "";
               const name = item.fields[FIELD_TITLE_WITH_FALLBACK];
               if (extension && !extension.startsWith(".")) {
                 extension = "." + extension;
               }
-              return {
+              return __spreadProps(__spreadValues({}, validatedFields.reduce((acc, field) => {
+                var _a5, _b4;
+                const sourceField = (_a5 = ASSET_LIST_FIELDS.find(
+                  (defaultField) => defaultField.toLowerCase() === field.toLowerCase()
+                )) != null ? _a5 : field;
+                acc[field] = (_b4 = item.fields[sourceField]) != null ? _b4 : "";
+                return acc;
+              }, {})), {
                 allowATSLink: item.fields[FIELD_ALLOW_ATS_LINK] === "True",
                 docSubType: (_b3 = item.fields[FIELD_SUBTYPE]) != null ? _b3 : "",
                 docType: (_c2 = item.fields[FIELD_DOC_TYPE]) != null ? _c2 : "",
@@ -13228,7 +14341,7 @@ function apiGetAssets(_0) {
                 size: (_j = item.fields[FIELD_FILE_SIZE]) != null ? _j : "0 MB",
                 tags: (_k = item.fields[FIELD_KEYWORDS]) != null ? _k : "",
                 width: (_l = item.fields[FIELD_MAX_WIDTH]) != null ? _l : "0"
-              };
+              });
             })) != null ? _b2 : [];
             return {
               facets: rawResponse.facets,
@@ -13703,6 +14816,7 @@ var intersection = baseRest(function(arrays) {
 });
 class FetchAndMergeAssetsController {
   constructor(host, {
+    additionalFields,
     availableDocTypes,
     baseUrl,
     defaultFolderId,
@@ -13744,6 +14858,7 @@ class FetchAndMergeAssetsController {
     this._debounceResolve = null;
     this.host = host;
     this.availableDocTypes = availableDocTypes;
+    this.additionalFields = additionalFields != null ? additionalFields : [];
     this.defaultFolderId = defaultFolderId;
     this.defaultIsSeeThrough = defaultIsSeeThrough;
     this.defaultSearchText = defaultSearchText;
@@ -13874,6 +14989,14 @@ class FetchAndMergeAssetsController {
     }
     this.host.requestUpdate();
   }
+  /**
+   * Table columns are host configuration and can be reconfigured after mount, unlike the rest of
+   * these options — every later fetch must ask for the current field list, not the one that
+   * happened to be set when the controller was constructed.
+   */
+  updateAdditionalFields(additionalFields) {
+    this.additionalFields = additionalFields;
+  }
   updateAuth(token, useSession) {
     if (this.useSiteSession) {
       return;
@@ -14014,6 +15137,7 @@ class FetchAndMergeAssetsController {
           }
         }
         request = __spreadProps(__spreadValues({}, request), {
+          fields: this.additionalFields,
           limitedToDocTypes: this.availableDocTypes
         });
         this.lastRequest = request;
@@ -14281,6 +15405,9 @@ const styles = i$7`
 `;
 var __defProp2 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError2 = (msg) => {
+  throw TypeError(msg);
+};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i4 = decorators.length - 1, decorator; i4 >= 0; i4--)
@@ -14289,10 +15416,26 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp2(target, key, result);
   return result;
 };
+var __accessCheck2 = (obj, member, msg) => member.has(obj) || __typeError2("Cannot " + msg);
+var __privateGet2 = (obj, member, getter) => (__accessCheck2(obj, member, "read from private field"), member.get(obj));
+var __privateAdd2 = (obj, member, value) => member.has(obj) ? __typeError2("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet2 = (obj, member, value, setter) => (__accessCheck2(obj, member, "write to private field"), member.set(obj, value), value);
+var _openingAsset, _insertInFlight;
 const COMPUTED_FIELDS = ["ScrubUrl", "AllowATSLink"];
 const MOBILE_WIDTH_THRESHOLD = 480;
 const FORCE_OVERLAY_THRESHOLD = 650;
 const PERSISTENT_DRAWER_WIDTH = 400;
+function resolvePageSize(view) {
+  switch (view) {
+    case GridView.Large:
+      return 15;
+    case GridView.Small:
+    case TABLE_VIEW:
+      return 30;
+    default:
+      return 20;
+  }
+}
 let CxContentBrowser = class extends CortexElement {
   constructor() {
     super(...arguments);
@@ -14318,6 +15461,7 @@ let CxContentBrowser = class extends CortexElement {
     this.canFavorite = false;
     this.canPinAsset = false;
     this.canUseProxies = false;
+    this.autoSelectFormat = false;
     this.simplePick = false;
     this.canViewVersions = false;
     this.canTrack = false;
@@ -14326,6 +15470,7 @@ let CxContentBrowser = class extends CortexElement {
     this.ctaTextTransform = "capitalize";
     this.extraFields = [];
     this.defaultGridView = GridView.Medium;
+    this.tableColumns = [];
     this.defaultSortOrderName = "";
     this.defaultSortDirection = "ascending";
     this.defaultSelectedFacets = {};
@@ -14363,28 +15508,40 @@ let CxContentBrowser = class extends CortexElement {
     this.selectedAssetId = void 0;
     this.isMobile = false;
     this.defaultPageSize = 10;
+    this.busyAssetId = void 0;
+    __privateAdd2(this, _openingAsset, false);
+    __privateAdd2(this, _insertInFlight, false);
   }
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
     if (!this.hasUpdated) {
-      this.view = this.defaultGridView;
+      this.view = this.defaultGridView === TABLE_VIEW && !this.canUseTable ? GridView.Medium : this.defaultGridView;
+    }
+  }
+  /**
+   * Never trust the host's value: it also arrives by direct property assignment, past the converter.
+   * Entries are checked one by one, not just the outer array — `field` is dereferenced while the
+   * fetch controller is being built, where a throw leaves the controller unassigned and the picker
+   * blank. `title` is only rendered, and Lit renders a nullish one as nothing, so a column is not
+   * worth dropping over it.
+   */
+  get tableColumnList() {
+    const columns = this.tableColumns;
+    if (!Array.isArray(columns)) {
+      return [];
     }
+    return columns.filter((column) => {
+      return !!column && typeof column === "object" && typeof column.field === "string" && column.field.length > 0;
+    });
+  }
+  get canUseTable() {
+    return this.tableColumnList.length > 0;
   }
   runFirstUpdated() {
     if (this.useSiteSession) {
       this.baseUrl = resolveSiteSessionUrl(this.baseUrl);
     }
-    switch (this.view) {
-      case GridView.Large:
-        this.defaultPageSize = 15;
-        break;
-      case GridView.Medium:
-        this.defaultPageSize = 20;
-        break;
-      case GridView.Small:
-        this.defaultPageSize = 30;
-        break;
-    }
+    this.defaultPageSize = resolvePageSize(this.view);
     this.lastRequest = __spreadProps(__spreadValues({}, this.lastRequest), {
       folderId: this.defaultFolderId,
       isSeeThrough: this.defaultIsSeeThrough,
@@ -14395,6 +15552,7 @@ let CxContentBrowser = class extends CortexElement {
     });
     this.updateComplete.then(() => {
       this.fetchAndMergeAssetsController = new FetchAndMergeAssetsController(this, {
+        additionalFields: this.tableColumnList.map((column) => column.field),
         availableDocTypes: this.availableDocTypes,
         baseUrl: this.baseUrl,
         defaultFolderId: this.defaultFolderId,
@@ -14434,7 +15592,12 @@ let CxContentBrowser = class extends CortexElement {
   }
   openFormatDialog(id) {
     return __async(this, null, function* () {
+      if (__privateGet2(this, _openingAsset) || __privateGet2(this, _insertInFlight)) {
+        return;
+      }
+      __privateSet2(this, _openingAsset, true);
       this.selectedAssetId = id;
+      this.busyAssetId = id;
       try {
         const asset = yield this.fetchAndMergeAssetsController.fetchAssetByID(id, {
           canFavorite: this.canFavorite,
@@ -14442,6 +15605,7 @@ let CxContentBrowser = class extends CortexElement {
         });
         if (!asset) {
           this.selectedAssetId = void 0;
+          this.busyAssetId = void 0;
           return;
         }
         let isAssetPinned = false;
@@ -14452,8 +15616,14 @@ let CxContentBrowser = class extends CortexElement {
           isAssetPinned = lookupEvent.detail.isAssetPinned;
         }
         this.formatDialog.open(__spreadProps(__spreadValues({}, asset), { isAssetPinned }));
+        if (this.formatDialog.isDialogOpen) {
+          this.busyAssetId = void 0;
+        }
       } catch (e2) {
         this.selectedAssetId = void 0;
+        this.busyAssetId = void 0;
+      } finally {
+        __privateSet2(this, _openingAsset, false);
       }
     });
   }
@@ -14467,6 +15637,16 @@ let CxContentBrowser = class extends CortexElement {
       });
     });
   }
+  handleTableColumnsChange() {
+    if (!this.fetchAndMergeAssetsController) {
+      return;
+    }
+    this.fetchAndMergeAssetsController.updateAdditionalFields(
+      this.tableColumnList.map((column) => column.field)
+    );
+    this.lastRequest = __spreadProps(__spreadValues({}, this.lastRequest), { start: 0 });
+    void this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+  }
   handleAuthChange() {
     var _a2;
     (_a2 = this.fetchAndMergeAssetsController) == null ? void 0 : _a2.updateAuth(this.token, this.useSession);
@@ -14524,17 +15704,7 @@ let CxContentBrowser = class extends CortexElement {
         });
         yield this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
       }
-      switch (event.detail.view) {
-        case GridView.Large:
-          this.defaultPageSize = 15;
-          break;
-        case GridView.Medium:
-          this.defaultPageSize = 20;
-          break;
-        case GridView.Small:
-          this.defaultPageSize = 30;
-          break;
-      }
+      this.defaultPageSize = resolvePageSize(event.detail.view);
       this.view = event.detail.view;
     });
   }
@@ -14654,15 +15824,17 @@ let CxContentBrowser = class extends CortexElement {
           selectedProxyMetadata: event.detail.selectedProxyMetadata
         });
         this.formatDialog.hide();
+        this.busyAssetId = void 0;
         return;
       }
+      __privateSet2(this, _insertInFlight, true);
       try {
         const response = yield this.fetchAndMergeAssetsController.getAssetLink(__spreadProps(__spreadValues({}, event.detail), {
           assets: [event.detail.asset],
           extraFields: this.extraFields
         }));
         if (response.isError) {
-          this.formatDialog.setLoadingConfirm(false);
+          this.reportProxyConfirmFailure();
           return;
         }
         this.handleSelectedAsset({
@@ -14672,12 +15844,23 @@ let CxContentBrowser = class extends CortexElement {
         });
         this.formatDialog.hide();
       } catch (e2) {
-        this.formatDialog.setLoadingConfirm(false);
+        this.reportProxyConfirmFailure();
+      } finally {
+        __privateSet2(this, _insertInFlight, false);
+        this.busyAssetId = void 0;
       }
     });
   }
+  reportProxyConfirmFailure() {
+    if (this.formatDialog.isDialogOpen) {
+      this.formatDialog.setLoadingConfirm(false);
+      return;
+    }
+    this.formatDialog.revealAfterAutoConfirm();
+  }
   handleFormatConfirm(event) {
     return __async(this, null, function* () {
+      __privateSet2(this, _insertInFlight, true);
       try {
         const response = yield this.fetchAndMergeAssetsController.getAssetLink(__spreadProps(__spreadValues({}, event.detail), {
           assets: [event.detail.asset],
@@ -14696,6 +15879,9 @@ let CxContentBrowser = class extends CortexElement {
         this.formatDialog.hide();
       } catch (e2) {
         this.formatDialog.setLoadingConfirm(false);
+      } finally {
+        __privateSet2(this, _insertInFlight, false);
+        this.busyAssetId = void 0;
       }
     });
   }
@@ -14841,6 +16027,7 @@ let CxContentBrowser = class extends CortexElement {
             .newlyChangedOption=${this.newlyChangedOption}
             .sortOrders=${sortOrders}
             .views=${this.views}
+            ?can-use-table=${this.canUseTable}
             ?is-mobile=${this.isMobile}
             ?is-see-through=${request == null ? void 0 : request.isSeeThrough}
             ?loading=${loading}
@@ -14856,20 +16043,45 @@ let CxContentBrowser = class extends CortexElement {
             @cx-content-browser-control-filter-change=${this.handleFilterChange}
             @cx-content-browser-control-bar-search-change=${this.handleSearchChange}
           ></cx-content-browser-control-bar>
-          <cx-content-browser-grid
-            .assets=${items}
-            ?has-more=${items.length < totalCount}
-            ?loading=${loading}
-            ?show-title=${this.showTitle}
-            ?show-size=${this.showSize}
-            ?show-dimensions=${this.showDimensions}
-            ?show-tags=${this.showTags}
-            selected-asset-id=${o$4(this.selectedAssetId || void 0)}
-            view=${this.view}
-            @cx-content-browser-grid-scroll-end=${this.handleScrollEnd}
-            @cx-content-browser-grid-resize=${this.handleGridResize}
-            @cx-content-browser-grid-click=${this.handleGridClick}
-          ></cx-content-browser-grid>
+          ${n$5(
+      this.view === TABLE_VIEW && this.canUseTable,
+      () => b`
+              <cx-content-browser-table
+                .busyAssetId=${this.busyAssetId}
+                .assets=${items}
+                .columns=${this.tableColumnList}
+                ?empty=${!loading && items.length === 0}
+                cta-text=${this.ctaText}
+                cta-text-transform=${this.ctaTextTransform}
+                ?has-more=${items.length < totalCount}
+                ?loading=${loading}
+                selected-asset-id=${o$4(this.selectedAssetId || void 0)}
+                @cx-content-browser-grid-scroll-end=${this.handleScrollEnd}
+                @cx-content-browser-grid-resize=${this.handleGridResize}
+                @cx-content-browser-grid-click=${this.handleGridClick}
+              ></cx-content-browser-table>
+            `,
+      () => b`
+              <cx-content-browser-grid
+                .assets=${items}
+                ?has-more=${items.length < totalCount}
+                ?loading=${loading}
+                ?show-title=${this.showTitle}
+                ?show-size=${this.showSize}
+                ?show-dimensions=${this.showDimensions}
+                ?show-tags=${this.showTags}
+                ?show-cta=${isAutoSelectFormatActive(this.autoSelectFormat)}
+                .busyAssetId=${this.busyAssetId}
+                cta-text=${this.ctaText}
+                cta-text-transform=${this.ctaTextTransform}
+                selected-asset-id=${o$4(this.selectedAssetId || void 0)}
+                view=${this.view}
+                @cx-content-browser-grid-scroll-end=${this.handleScrollEnd}
+                @cx-content-browser-grid-resize=${this.handleGridResize}
+                @cx-content-browser-grid-click=${this.handleGridClick}
+              ></cx-content-browser-grid>
+            `
+    )}
         </cx-resize-observer>
         <cx-content-browser-format-dialog
           .availableExtensions=${availableExtensions}
@@ -14882,6 +16094,7 @@ let CxContentBrowser = class extends CortexElement {
           cta-text-transform=${this.ctaTextTransform}
           variant=${this.isMobile ? ContentBrowserFormatDialogVariant.Drawer : ContentBrowserFormatDialogVariant.Dialog}
           token=${this.useSiteSession ? "" : this.token}
+          .autoSelectFormat=${this.autoSelectFormat}
           ?can-custom-format=${!!(parameters == null ? void 0 : parameters.ATSEnabled)}
           ?can-favorite=${this.canFavorite}
           ?can-pin-asset=${this.canPinAsset}
@@ -14901,6 +16114,8 @@ let CxContentBrowser = class extends CortexElement {
     `;
   }
 };
+_openingAsset = /* @__PURE__ */ new WeakMap();
+_insertInFlight = /* @__PURE__ */ new WeakMap();
 CxContentBrowser.styles = [componentStyles, styles];
 CxContentBrowser.dependencies = {
   "cx-content-browser-browser": CxContentBrowserBrowser,
@@ -14909,6 +16124,7 @@ CxContentBrowser.dependencies = {
   "cx-content-browser-grid": CxContentBrowserGrid,
   "cx-content-browser-header": CxContentBrowserHeader,
   "cx-content-browser-no-result": CxContentBrowserNoResult,
+  "cx-content-browser-table": CxContentBrowserTable,
   "cx-icon": CxIcon,
   "cx-icon-button": CxIconButton,
   "cx-resize-observer": CxResizeObserver,
@@ -15000,6 +16216,9 @@ __decorateClass([
 __decorateClass([
   n$6({ attribute: "can-use-proxies", reflect: true, type: Boolean })
 ], CxContentBrowser.prototype, "canUseProxies", 2);
+__decorateClass([
+  n$6({ attribute: "auto-select-format", converter: autoSelectFormatConverter, reflect: false })
+], CxContentBrowser.prototype, "autoSelectFormat", 2);
 __decorateClass([
   n$6({ attribute: "simple-pick", reflect: true, type: Boolean })
 ], CxContentBrowser.prototype, "simplePick", 2);
@@ -15032,6 +16251,32 @@ __decorateClass([
 __decorateClass([
   n$6({ attribute: "default-grid-view", type: String })
 ], CxContentBrowser.prototype, "defaultGridView", 2);
+__decorateClass([
+  n$6({
+    attribute: "table-columns",
+    /**
+     * Lit's stock Array converter returns `null` for anything `JSON.parse` rejects, and a host that
+     * stringifies an array into the attribute hands it `""` or `"[object Object]"`. `null` then
+     * throws on every read below, taking the whole picker down. An unreadable value means "no
+     * columns", which turns the table view off — the same outcome as not configuring one.
+     */
+    converter: {
+      fromAttribute: (value) => {
+        if (!value) {
+          return [];
+        }
+        try {
+          const parsed = JSON.parse(value);
+          return Array.isArray(parsed) ? parsed : [];
+        } catch (e2) {
+          return [];
+        }
+      },
+      toAttribute: (value) => JSON.stringify(value != null ? value : [])
+    },
+    type: Array
+  })
+], CxContentBrowser.prototype, "tableColumns", 2);
 __decorateClass([
   n$6({ attribute: "default-sort-order-name", type: String })
 ], CxContentBrowser.prototype, "defaultSortOrderName", 2);
@@ -15095,9 +16340,15 @@ __decorateClass([
 __decorateClass([
   r$6()
 ], CxContentBrowser.prototype, "isMobile", 2);
+__decorateClass([
+  r$6()
+], CxContentBrowser.prototype, "busyAssetId", 2);
 __decorateClass([
   watch("lastRequest", { waitUntilFirstUpdate: true })
 ], CxContentBrowser.prototype, "handleLastRequestChange", 1);
+__decorateClass([
+  watch("tableColumns", { waitUntilFirstUpdate: true })
+], CxContentBrowser.prototype, "handleTableColumnsChange", 1);
 __decorateClass([
   watch(["token", "useSession"], { waitUntilFirstUpdate: true })
 ], CxContentBrowser.prototype, "handleAuthChange", 1);