@orangelogic/orange-dam-content-browser-sdk 2.4.8 → 2.4.9

package/build/content-browser.mjs

@@ -147,6 +147,7 @@ import CxResizeObserver from "@orangelogic/design-system/components/resize-obser
 import CxArrayLineClamp from "@orangelogic/design-system/components/array-line-clamp";
 import CxCard from "@orangelogic/design-system/components/card";
 import CxCheckbox from "@orangelogic/design-system/components/checkbox";
+import CxColorSwatchGroup from "@orangelogic/design-system/components/color-swatch-group";
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -1165,13 +1166,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 +1299,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) {
@@ -5750,7 +5751,7 @@ function watch(propertyName, options) {
     };
   };
 }
-const styles$e = i$7`
+const styles$f = i$7`
   :host {
     display: contents;
   }
@@ -5839,14 +5840,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";
@@ -6115,7 +6116,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,
@@ -6125,70 +6126,70 @@ 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: "bearer-token", type: String })
 ], CxContentBrowserBrowser.prototype, "bearerToken", 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);
 /**
@@ -6319,6 +6320,7 @@ var GridView = /* @__PURE__ */ ((GridView2) => {
   GridView2["Small"] = "small";
   return GridView2;
 })(GridView || {});
+const TABLE_VIEW = "table";
 const ASSET_SIZE = {
   [
     "small"
@@ -6351,19 +6353,46 @@ 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() !== "";
+}
+function toTableRowActionPosition(value) {
+  return value === "row-end" ? "row-end" : "host-edge";
+}
 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;
+function toFieldKey(field) {
+  return field.trim().toLowerCase();
+}
+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 {
@@ -6499,37 +6528,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);
 
@@ -6554,14 +6583,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 {
@@ -6786,7 +6815,7 @@ let CxContentBrowserControlFilter = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserControlFilter.styles = [componentStyles, styles$d];
+CxContentBrowserControlFilter.styles = [componentStyles, styles$e];
 CxContentBrowserControlFilter.dependencies = {
   "cx-badge": CxBadge,
   "cx-button": CxButton,
@@ -6807,52 +6836,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 {
@@ -6991,7 +7020,7 @@ let CxContentBrowserControlSort = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserControlSort.styles = [componentStyles, styles$c];
+CxContentBrowserControlSort.styles = [componentStyles, styles$d];
 CxContentBrowserControlSort.dependencies = {
   "cx-divider": CxDivider,
   "cx-dropdown": CxDropdown,
@@ -7002,57 +7031,62 @@ 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;
   }
 
+  cx-menu[key='default-menu'] > cx-menu-item::part(checked-icon),
+  cx-menu[name='main'] > cx-menu-item::part(checked-icon) {
+    display: none;
+  }
+
   .menu-item--switch {
     --submenu-icon-display: none;
     --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 {
@@ -7063,6 +7097,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();
@@ -7082,6 +7120,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);
   }
@@ -7099,7 +7152,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>
@@ -7113,7 +7166,8 @@ let CxContentBrowserControlView = class extends CortexElement {
                 <cx-menu-label>${this.localize.term("view")}</cx-menu-label>
                 <cx-menu-item
                   menu="submenu"
-                  always-show-checked-icon
+                  type="checkbox"
+                  ?checked=${!this.isTable}
                 >
                   ${this.localize.term("grid")}
                   ${n$5(
@@ -7126,6 +7180,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">
@@ -7159,7 +7214,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,
@@ -7188,6 +7243,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">
@@ -7205,7 +7261,7 @@ let CxContentBrowserControlView = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserControlView.styles = [componentStyles, styles$b];
+CxContentBrowserControlView.styles = [componentStyles, styles$c];
 CxContentBrowserControlView.dependencies = {
   "cx-divider": CxDivider,
   "cx-dropdown": CxDropdown,
@@ -7219,28 +7275,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;
   }
@@ -7263,14 +7322,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 {
@@ -7291,6 +7350,7 @@ let CxContentBrowserControlBar = class extends CortexElement {
     this.loading = false;
     this.searchText = "";
     this.isMobile = false;
+    this.canUseTable = false;
   }
   handleSearchChange(event) {
     this.searchText = event.target.value;
@@ -7338,6 +7398,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>
@@ -7354,7 +7415,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,
@@ -7366,52 +7427,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);
 /**
@@ -7718,14 +7782,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 {
@@ -7841,40 +7905,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;
@@ -8021,14 +8085,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";
@@ -8193,53 +8257,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);
@@ -8249,14 +8313,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 {
@@ -8365,7 +8429,7 @@ let CxContentBrowserAssetTrackingParameters = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserAssetTrackingParameters.styles = [componentStyles, styles$8];
+CxContentBrowserAssetTrackingParameters.styles = [componentStyles, styles$9];
 CxContentBrowserAssetTrackingParameters.dependencies = {
   "cx-button": CxButton,
   "cx-icon": CxIcon,
@@ -8374,13 +8438,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;
   }
@@ -8489,14 +8553,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";
@@ -8750,7 +8814,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,
@@ -8760,49 +8824,49 @@ 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: "proxies-failed", reflect: true, type: Boolean })
 ], CxContentBrowserAssetProxySelector.prototype, "proxiesFailed", 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%;
@@ -8875,14 +8939,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 {
@@ -8954,7 +9018,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,
@@ -8966,13 +9030,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`
@@ -9023,7 +9087,7 @@ const drawerStyles = i$7`
     padding: var(--cx-spacing-medium);
   }
 `;
-const styles$5 = i$7`
+const styles$6 = i$7`
   :host {
     display: block;
   }
@@ -9063,14 +9127,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 = [{
@@ -9112,6 +9176,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;
@@ -9165,18 +9230,50 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
     }
     return this.filteredProxies.some((proxy) => proxy.id === this.selectedProxy);
   }
-  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,
@@ -9184,16 +9281,51 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
     proxies,
     proxiesFailed = false
   }) {
+    var _a2, _b2;
     this.asset = asset;
     this.isFavorite = isFavorite;
     this.isAssetPinned = isAssetPinned;
     this.proxies = proxies;
     this.proxiesFailed = proxiesFailed;
+    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;
+    }
+    const autoSelection = this.resolveAutoSelection();
+    if (autoSelection == null ? void 0 : autoSelection.proxy) {
+      this.selectedProxy = autoSelection.proxy.id;
+    }
+    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;
@@ -9675,7 +9807,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>
@@ -9740,7 +9872,7 @@ let CxContentBrowserFormatDialog = class extends CortexElement {
     `;
   }
   handleRequestClose(event) {
-    if (this.loadingFavorites || this.loadingPinAsset) {
+    if (this.loadingConfirm || this.loadingFavorites || this.loadingPinAsset) {
       event.preventDefault();
       return;
     }
@@ -9802,7 +9934,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,
@@ -9818,16 +9950,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: {
@@ -9838,7 +9970,7 @@ __decorateClass$5([
     type: Array
   })
 ], CxContentBrowserFormatDialog.prototype, "supportedExtensions", 2);
-__decorateClass$5([
+__decorateClass$6([
   n$6({
     attribute: "supported-representative-subtypes",
     converter: {
@@ -9849,116 +9981,119 @@ __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, "proxiesFailed", 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) {
@@ -11757,7 +11892,7 @@ class GridLayout extends GridBaseLayout {
     this._scrollSize = size;
   }
 }
-const styles$4 = i$7`
+const styles$5 = i$7`
   :host {
     display: block;
   }
@@ -11796,31 +11931,80 @@ const styles$4 = i$7`
     line-height: var(--cx-line-height-small);
   }
 
-  .content-browser-asset-card__checkbox {
+  /*
+   * 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;
-    top: 2px;
-    right: 2px;
+    inset: var(--cx-spacing-x-small);
+    bottom: auto;
+    aspect-ratio: 246 / 180;
+    /*
+     * The image slot's overflow clip does not reach an overlay positioned against the base, so the
+     * rounding is restated. Inherited, not a token: the overlay is slotted into that image slot, so
+     * it takes whatever radius the thumbnail is clipped to, overrides of ::part(image) included.
+     */
+    border-radius: inherit;
     z-index: 1;
-  }
-
-  .content-browser-asset-card--disabled {
+    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;
+    right: 2px;
+    z-index: 1;
+  }
+
+  .content-browser-asset-card--disabled {
     cursor: default;
     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;
+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 = "";
@@ -11887,6 +12071,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,
@@ -11997,9 +12201,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,
@@ -12008,46 +12213,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) : [],
@@ -12062,25 +12279,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;
@@ -12105,14 +12322,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 {
@@ -12131,17 +12348,17 @@ 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 {
@@ -12193,8 +12410,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, _getContainer).call(this)) == null ? void 0 : _a2.layoutComplete) == null ? void 0 : _b2.catch(() => void 0);
       if (sequence !== __privateGet(this, _restoreSequence)) {
         return;
       }
@@ -12271,7 +12488,7 @@ _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;
@@ -12313,24 +12530,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();
@@ -12345,12 +12562,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),
@@ -12363,7 +12584,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();
@@ -12381,17 +12602,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: {
@@ -12411,12 +12632,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;
     }
@@ -12460,6 +12681,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>
@@ -12514,7 +12739,7 @@ let CxContentBrowserGrid = class extends CortexElement {
         class="content-browser-grid__list"
         scroller
         .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`
@@ -12540,7 +12765,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>
@@ -12554,9 +12779,9 @@ 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-button": CxButton,
   "cx-content-browser-asset-card": CxContentBrowserAssetCard,
@@ -12565,61 +12790,73 @@ CxContentBrowserGrid.dependencies = {
   "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: "error", reflect: true, type: Boolean })
 ], CxContentBrowserGrid.prototype, "error", 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;
   }
@@ -12678,14 +12915,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";
@@ -12818,50 +13055,1373 @@ let CxContentBrowserHeader = class extends CortexElement {
     `;
   }
 };
-CxContentBrowserHeader.styles = [componentStyles, styles$1];
+CxContentBrowserHeader.styles = [componentStyles, styles$2];
 CxContentBrowserHeader.dependencies = {
   "cx-avatar": CxAvatar,
   "cx-divider": CxDivider,
   "cx-dropdown": CxDropdown,
   "cx-icon": CxIcon,
-  "cx-icon-button": CxIconButton,
+  "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 MIN_COLUMN_WIDTH = 92;
+let canvasContext = null;
+function measureTextWidth(text, font) {
+  canvasContext != null ? canvasContext : canvasContext = document.createElement("canvas").getContext("2d");
+  if (!canvasContext) {
+    return 0;
+  }
+  canvasContext.font = font;
+  return Math.ceil(canvasContext.measureText(text).width);
+}
+function fillSpareWidth(widths, columns, available) {
+  const autoFit = columns.flatMap(({ saved }, index) => saved === void 0 ? [index] : []);
+  const spare = available - widths.reduce((sum, width) => sum + width, 0);
+  if (autoFit.length === 0 || spare <= 0) {
+    return;
+  }
+  const part = Math.floor(spare / autoFit.length);
+  autoFit.forEach((index) => {
+    widths[index] += part;
+  });
+  widths[autoFit[autoFit.length - 1]] += spare - part * autoFit.length;
+}
+function layoutColumnWidths(columns, available) {
+  const widths = columns.map(({ saved }) => saved === void 0 ? 0 : Math.max(MIN_COLUMN_WIDTH, Math.round(saved)));
+  let left = available - widths.reduce((sum, width) => sum + width, 0);
+  let open = columns.flatMap(({ saved }, index) => saved === void 0 ? [index] : []);
+  const natural = (index) => Math.max(MIN_COLUMN_WIDTH, Math.ceil(columns[index].natural));
+  let fitCount = 1;
+  while (fitCount > 0 && open.length > 0) {
+    const share = left / open.length;
+    const fits = open.filter((index) => natural(index) <= share);
+    for (const index of fits) {
+      widths[index] = natural(index);
+      left -= widths[index];
+    }
+    open = open.filter((index) => !fits.includes(index));
+    fitCount = fits.length;
+  }
+  open.forEach((index) => {
+    widths[index] = Math.max(MIN_COLUMN_WIDTH, Math.floor(left / open.length));
+  });
+  fillSpareWidth(widths, columns, available);
+  return widths;
+}
+const styles$1 = i$7`
+  /* Containing block for the absolutely positioned loading bar, which is a direct child. */
+  :host {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    box-sizing: border-box;
+    /*
+     * A multi-line flex parent stretches an item to its own flex line's cross size rather than to
+     * the container's width, and a row parent's automatic minimum refuses to shrink below content.
+     * A definite width and a zero minimum keep a wide table scrolling inside the picker instead of
+     * widening it (L-429EVG).
+     */
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    /*
+     * The gap under the control bar belongs to the table, not to the shared cx-space above it, which
+     * spaces the grid too. Fallback because an unthemed host resolves the token to nothing.
+     */
+    padding-top: var(--cx-spacing-medium, 16px);
+  }
+
+  /*
+   * The table is positioned out of flow, so the rows can never size this box: its height comes from
+   * the container alone, in every host shape. A host slot that takes its height from a flex line
+   * cannot be shorter than the height its contents report, and a table in flow reports every row it
+   * holds, which paints the picker over the page below (L-42BBKC) and makes a row count read off it
+   * grow with each page (L-42BFJC). The floor is the grid's own (lit-virtualizer's scroller
+   * minimum), so a host that gives the picker no height gets a short table that scrolls, never one
+   * that collapses to nothing.
+   */
+  .content-browser-table {
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 150px;
+  }
+
+  .content-browser-table__table {
+    --table-height: 100%;
+    --content-browser-action-boundary: 100%;
+
+    position: absolute;
+    inset: 0;
+  }
+
+  :host([row-action-position='row-end']) .content-browser-table__table {
+    --content-browser-action-boundary: var(--content-browser-table-width);
+  }
+
+  .content-browser-table__table::part(content-browser-header),
+  .content-browser-table__table::part(content-browser-frame)::before {
+    box-sizing: border-box;
+    width: min(100%, var(--content-browser-table-width, 100%));
+  }
+
+  .content-browser-table__table::part(content-browser-header) {
+    background-color: var(--header-background-color, var(--cx-color-neutral-50));
+    border-top-left-radius: var(--border-radius);
+    border-top-right-radius: var(--border-radius);
+  }
+
+  .content-browser-table__table::part(content-browser-scrollport) {
+    scrollbar-width: thin;
+  }
+
+  .content-browser-table__table::part(content-browser-row) {
+    min-width: 100%;
+  }
+
+  /* The zero-width anchor follows the viewport edge without space in the column layout. */
+  .content-browser-table__table::part(content-browser-action-anchor) {
+    position: sticky;
+    right: 0;
+    width: 0;
+    min-width: 0;
+    flex: 0 0 0;
+    margin-left: auto;
+    margin-right: max(0px, calc(100% - var(--content-browser-action-boundary)));
+    align-self: stretch;
+    background-color: inherit;
+    /* The frame can cross the action after a small shrink. Keep its border below the button. */
+    z-index: 2;
+  }
+
+  .content-browser-table__table::part(content-browser-action) {
+    position: absolute;
+    inset: 0 0 0 auto;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    padding: 0 var(--cell-padding-right, 8px) 0 var(--cell-padding-left, 8px);
+    background-color: inherit;
+    /* Leave the data-cell separator visible without a line across empty space. */
+    background-clip: padding-box;
+    border-bottom: var(--border-width, 1px) solid transparent;
+    border-right: var(--border-width, 1px) solid transparent;
+  }
+
+  .content-browser-table-loading {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: var(--cx-z-index-drawer);
+  }
+
+  .content-browser-table-loading cx-progress-bar {
+    --height: 4px;
+  }
+
+  .content-browser-table__empty {
+    height: 100%;
+  }
+
+  .content-browser-table__page-error {
+    flex: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--cx-spacing-small, 8px);
+    padding: var(--cx-spacing-small, 8px);
+    border-top: 1px solid var(--cx-color-neutral-200, #e5e5e5);
+    background-color: var(--cx-color-neutral-0, #fff);
+    color: var(--cx-color-neutral);
+  }
+`;
+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 _columnDefinitions, _columnsSignature, _columnKeys, _rowsNeedRebuild, _heldRowKeys, _resizedWidths, _sessionWidths, _ctas, _renderedCtas, _pointerTrackedRows, _hoveredRow, _focusedCta, _ctaFocusedAtRender, _noHoverQueries, _hasNoHover, _builtTable, _syncedAssets, _pendingReplaces, _lastHeight, _containerSize, _lastRowCount, _rowCountHeld, _lastRowObserver, _layoutScrollbarWidth, _naturalWidths, _layoutPending, _fontsPending, _frameWidthObserver;
+const CxTable = CxColorSwatchGroup.dependencies["cx-table"];
+const ROW_HEIGHT = 48;
+const FILLER_FIELD = "filler";
+const RESIZE_BUFFER_WIDTH = 6;
+const NO_HOVER_QUERIES = ["(hover: none)"];
+const COLUMN_DEFAULTS = {
+  headerSort: false,
+  resizable: true
+};
+function canvasFont(element) {
+  const { fontFamily, fontSize, fontStyle, fontWeight } = getComputedStyle(element);
+  return `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
+}
+function horizontalPadding(element) {
+  const style = getComputedStyle(element);
+  return (Number.parseFloat(style.paddingLeft) || 0) + (Number.parseFloat(style.paddingRight) || 0) + (Number.parseFloat(style.borderLeftWidth) || 0) + (Number.parseFloat(style.borderRightWidth) || 0);
+}
+function unroundedClientWidth(element) {
+  const style = getComputedStyle(element);
+  const width = Number.parseFloat(style.width) || 0;
+  if (style.boxSizing === "border-box") {
+    return width - (Number.parseFloat(style.borderLeftWidth) || 0) - (Number.parseFloat(style.borderRightWidth) || 0);
+  }
+  return width + (Number.parseFloat(style.paddingLeft) || 0) + (Number.parseFloat(style.paddingRight) || 0);
+}
+function readCellValue(asset, field) {
+  if (!Object.prototype.hasOwnProperty.call(asset, field)) {
+    return "";
+  }
+  const value = asset[field];
+  if (value === void 0 || value === null || typeof value === "object") {
+    return "";
+  }
+  return String(value);
+}
+function columnsSignature(columns) {
+  return JSON.stringify(columns.map(({ field, title }) => [field, title]));
+}
+function isAppendOf(previous, next) {
+  return previous.length > 0 && next.length > previous.length && previous.every((asset, index) => next[index] === asset);
+}
+function renderCellContent(value, inColdStorage) {
+  const content = document.createElement("cx-line-clamp");
+  content.setAttribute("lines", "1");
+  if (value) {
+    content.title = value;
+  }
+  if (inColdStorage) {
+    content.style.opacity = "0.5";
+  }
+  content.textContent = value;
+  return content;
+}
+let CxContentBrowserTable = class extends CortexElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.assets = [];
+    this.columns = [];
+    this.ctaText = "";
+    this.ctaTextTransform = "capitalize";
+    this.empty = false;
+    this.error = false;
+    this.hasMore = false;
+    this.loading = false;
+    this.selectedAssetId = void 0;
+    this.busyAssetId = void 0;
+    this.hiddenFields = [];
+    this.savedWidths = {};
+    this.widthScope = void 0;
+    this.rowActionPosition = "host-edge";
+    this.assetMap = /* @__PURE__ */ new Map();
+    __privateAdd$1(this, _columnDefinitions, []);
+    __privateAdd$1(this, _columnsSignature, "");
+    __privateAdd$1(this, _columnKeys, /* @__PURE__ */ new Map());
+    __privateAdd$1(this, _rowsNeedRebuild, false);
+    __privateAdd$1(this, _heldRowKeys, /* @__PURE__ */ new Set());
+    __privateAdd$1(this, _resizedWidths, /* @__PURE__ */ new Map());
+    __privateAdd$1(this, _sessionWidths, /* @__PURE__ */ new Map());
+    __privateAdd$1(this, _ctas, /* @__PURE__ */ new WeakMap());
+    __privateAdd$1(this, _renderedCtas, /* @__PURE__ */ new Set());
+    __privateAdd$1(this, _pointerTrackedRows, /* @__PURE__ */ new WeakSet());
+    __privateAdd$1(this, _hoveredRow);
+    __privateAdd$1(this, _focusedCta);
+    __privateAdd$1(this, _ctaFocusedAtRender);
+    __privateAdd$1(this, _noHoverQueries, []);
+    __privateAdd$1(this, _hasNoHover, false);
+    __privateAdd$1(this, _builtTable);
+    __privateAdd$1(this, _syncedAssets, []);
+    __privateAdd$1(this, _pendingReplaces, 0);
+    __privateAdd$1(this, _lastHeight, 0);
+    __privateAdd$1(this, _containerSize);
+    __privateAdd$1(this, _lastRowCount);
+    __privateAdd$1(this, _rowCountHeld, false);
+    __privateAdd$1(this, _lastRowObserver);
+    __privateAdd$1(this, _layoutScrollbarWidth, 0);
+    __privateAdd$1(this, _naturalWidths, /* @__PURE__ */ new Map());
+    __privateAdd$1(this, _layoutPending, false);
+    __privateAdd$1(this, _fontsPending, false);
+    __privateAdd$1(this, _frameWidthObserver);
+    this.debouncedApplyColumnLayout = debounce(this.applyColumnLayout, 100);
+    this.handleNoHoverChange = () => {
+      this.setNoHover(__privateGet$1(this, _noHoverQueries).some((list) => list.matches));
+    };
+    this.debouncedRedrawTable = debounce(this.redrawTable, 100);
+    this.debouncedCalculatePageSize = debounce(this.calculatePageSize, 200);
+    this.debouncedHandleLastRowVisible = debounce(this.handleLastRowVisible, 200);
+    this.handleResizeHandleDoubleClick = (event) => {
+      var _a2, _b2, _c2, _d2;
+      const handle = (_b2 = (_a2 = event.target) == null ? void 0 : _a2.closest) == null ? void 0 : _b2.call(_a2, ".tabulator-col-resize-handle");
+      if (!handle) {
+        return;
+      }
+      event.stopPropagation();
+      const key = (_c2 = handle.previousElementSibling) == null ? void 0 : _c2.getAttribute("tabulator-field");
+      const field = this.fieldOfKey(key);
+      const column = key ? (_d2 = this.tabulator) == null ? void 0 : _d2.getColumn(key) : void 0;
+      if (field === void 0 || !column) {
+        return;
+      }
+      __privateGet$1(this, _resizedWidths).delete(field.trim());
+      __privateGet$1(this, _sessionWidths).delete(field.trim());
+      this.applyColumnLayout();
+      this.emit("cx-content-browser-table-column-resize", {
+        detail: {
+          field,
+          reset: true,
+          width: Math.round(column.getWidth())
+        }
+      });
+    };
+    this.debouncedHandleScrollEnd = debounce(this.handleScrollEnd, 200);
+  }
+  get tabulator() {
+    var _a2, _b2;
+    const instance2 = (_b2 = (_a2 = this.tableEl) == null ? void 0 : _a2.tabulatorInstance) != null ? _b2 : void 0;
+    return instance2 !== void 0 && instance2 === __privateGet$1(this, _builtTable) && !instance2.destroyed ? instance2 : void 0;
+  }
+  /**
+   * The current Tabulator instance, built or not. Tabulator shows its header and frame as it builds,
+   * but fires `tableBuilt` only after its data-load debounce.
+   */
+  get buildingTabulator() {
+    var _a2, _b2;
+    const instance2 = (_b2 = (_a2 = this.tableEl) == null ? void 0 : _a2.tabulatorInstance) != null ? _b2 : void 0;
+    return instance2 && !instance2.destroyed ? instance2 : void 0;
+  }
+  /** Tabulator's row holder: the one element that scrolls the rows. */
+  get scrollport() {
+    var _a2, _b2, _c2;
+    return (_c2 = (_b2 = (_a2 = this.tabulator) == null ? void 0 : _a2.rowManager) == null ? void 0 : _b2.element) != null ? _c2 : void 0;
+  }
+  /** Each host column's row key, in order: a field the host repeats takes a key per occurrence. */
+  resolveColumnKeys() {
+    const occurrences = /* @__PURE__ */ new Map();
+    return this.columns.map(({ field }) => {
+      var _a2, _b2;
+      const occurrence = (_a2 = occurrences.get(field)) != null ? _a2 : 0;
+      const identity2 = `${field}\0${occurrence}`;
+      const key = (_b2 = __privateGet$1(this, _columnKeys).get(identity2)) != null ? _b2 : `column${__privateGet$1(this, _columnKeys).size}`;
+      occurrences.set(field, occurrence + 1);
+      __privateGet$1(this, _columnKeys).set(identity2, key);
+      return key;
+    });
+  }
+  buildColumnDefinitions() {
+    return [...this.buildDataColumnDefinitions(), this.buildFillerColumnDefinition()];
+  }
+  /**
+   * A pixel width for each column, so the `fitData` layout never sizes it from its content. The
+   * auto-fit sets the real width once the columns are built (see `applyColumnLayout`). Until then a
+   * column keeps the width it had in the previous definitions.
+   */
+  buildDataColumnDefinitions() {
+    const hidden = new Set(this.hiddenFields);
+    const keys2 = this.resolveColumnKeys();
+    const previousWidths = new Map(__privateGet$1(this, _columnDefinitions).map(({ field, width }) => [String(field), width]));
+    return this.columns.map((column, index) => {
+      var _a2, _b2;
+      const previous = previousWidths.get(keys2[index]);
+      return {
+        field: keys2[index],
+        formatter: (cell) => {
+          var _a3;
+          const row = cell.getRow();
+          const inColdStorage = Boolean(row.getData().inColdStorage);
+          if (inColdStorage) {
+            row.getElement().style.pointerEvents = "none";
+          }
+          return renderCellContent(String((_a3 = cell.getValue()) != null ? _a3 : ""), inColdStorage);
+        },
+        // Never `false`: Tabulator awaits a `show()` for it as it builds the header.
+        hidden: hidden.has(column.field) || void 0,
+        minWidth: MIN_COLUMN_WIDTH,
+        title: column.title,
+        // A node, as for a cell: `cx-table` parses a title string as HTML.
+        titleFormatter: (cell) => {
+          var _a3;
+          return renderCellContent(String((_a3 = cell.getValue()) != null ? _a3 : ""), false);
+        },
+        width: (_b2 = (_a2 = __privateGet$1(this, _resizedWidths).get(column.field.trim())) != null ? _a2 : __privateGet$1(this, _sessionWidths).get(column.field.trim())) != null ? _b2 : typeof previous === "number" ? previous : MIN_COLUMN_WIDTH
+      };
+    });
+  }
+  /**
+   * Tabulator replaces its rows with a placeholder when no columns remain visible. This invisible
+   * column keeps the rows and their actions available when the host hides every data column.
+   * Its small, fixed width gives the final resize handle a buffer without a visible empty column.
+   */
+  buildFillerColumnDefinition() {
+    return {
+      field: FILLER_FIELD,
+      formatter: (cell) => {
+        const element = cell.getElement();
+        if (element) {
+          element.style.padding = "0";
+          element.style.visibility = "hidden";
+          element.style.pointerEvents = "none";
+          element.setAttribute("aria-hidden", "true");
+        }
+        return "";
+      },
+      headerSort: false,
+      // A column laid out at 0 loses its width style, and renders as wide as its content.
+      minWidth: RESIZE_BUFFER_WIDTH,
+      resizable: false,
+      title: "",
+      titleFormatter: (cell) => {
+        const header = cell.getColumn().getElement();
+        header.style.opacity = "0";
+        header.style.borderRight = "none";
+        header.style.pointerEvents = "none";
+        header.setAttribute("aria-label", this.ctaLabel);
+        return "";
+      },
+      width: RESIZE_BUFFER_WIDTH
+    };
+  }
+  get ctaLabel() {
+    return this.ctaText || this.localize.term("insert");
+  }
+  /** The action overlays its row and takes no column width. */
+  renderRowAction(row) {
+    var _a2;
+    const data = row.getData();
+    const rowElement = row.getElement();
+    const previous = __privateGet$1(this, _ctas).get(rowElement);
+    rowElement.part.add("content-browser-row");
+    previous == null ? void 0 : previous.container.remove();
+    if (previous) {
+      __privateGet$1(this, _renderedCtas).delete(previous);
+      __privateGet$1(this, _ctas).delete(rowElement);
+    }
+    if (data.inColdStorage) {
+      rowElement.style.pointerEvents = "none";
+      return;
+    }
+    rowElement.style.pointerEvents = "";
+    const container = document.createElement("div");
+    const overlay = document.createElement("div");
+    const button = document.createElement("cx-button");
+    const label = document.createElement("span");
+    const cta = { assetId: String((_a2 = data.id) != null ? _a2 : ""), button, container, label, rowElement };
+    container.part.add("content-browser-action-anchor");
+    container.setAttribute("role", "gridcell");
+    overlay.part.add("content-browser-action");
+    overlay.append(button);
+    container.append(overlay);
+    rowElement.append(container);
+    rowElement.style.cursor = "default";
+    button.classList.add("content-browser-table__cta");
+    button.setAttribute("size", "small");
+    button.setAttribute("variant", "primary");
+    button.style.width = "max-content";
+    button.style.maxWidth = "none";
+    label.style.whiteSpace = "nowrap";
+    button.append(label);
+    button.addEventListener("click", (event) => {
+      if (event.detail <= 1) {
+        this.insertAsset(cta.assetId);
+      }
+    });
+    button.addEventListener("focusin", () => {
+      __privateSet$1(this, _focusedCta, cta);
+      this.paintCta(cta);
+    });
+    button.addEventListener("focusout", () => {
+      if (__privateGet$1(this, _focusedCta) === cta) {
+        __privateSet$1(this, _focusedCta, void 0);
+      }
+      this.paintCta(cta);
+    });
+    __privateGet$1(this, _ctas).set(rowElement, cta);
+    __privateGet$1(this, _renderedCtas).add(cta);
+    this.trackPointer(rowElement);
+    this.paintCta(cta);
+  }
+  isCtaShown(cta) {
+    return __privateGet$1(this, _hasNoHover) || cta.assetId === this.busyAssetId || cta.assetId === this.selectedAssetId || cta.rowElement === __privateGet$1(this, _hoveredRow) || cta === __privateGet$1(this, _focusedCta) && cta.button.matches(":focus-within");
+  }
+  /** In place, never rebuilt: a new button would drop the keyboard focus the old one held. */
+  paintCta(cta) {
+    const text = this.ctaLabel;
+    if (cta.label.textContent !== text) {
+      cta.label.textContent = text;
+    }
+    cta.label.style.textTransform = this.ctaTextTransform;
+    cta.button.loading = cta.assetId === this.busyAssetId;
+    const shown = this.isCtaShown(cta);
+    cta.container.style.opacity = shown ? "1" : "0";
+    cta.container.style.pointerEvents = shown ? "" : "none";
+  }
+  paintRowCta(rowElement) {
+    const cta = rowElement ? __privateGet$1(this, _ctas).get(rowElement) : void 0;
+    if (cta) {
+      this.paintCta(cta);
+    }
+  }
+  paintAssetCta(assetId) {
+    var _a2;
+    this.paintRowCta((_a2 = this.findRow(assetId)) == null ? void 0 : _a2.getElement());
+  }
+  trackPointer(rowElement) {
+    if (__privateGet$1(this, _pointerTrackedRows).has(rowElement)) {
+      return;
+    }
+    __privateGet$1(this, _pointerTrackedRows).add(rowElement);
+    rowElement.addEventListener("mouseenter", () => this.setHoveredRow(rowElement));
+    rowElement.addEventListener("mouseleave", () => {
+      if (__privateGet$1(this, _hoveredRow) === rowElement) {
+        this.setHoveredRow(void 0);
+      }
+    });
+  }
+  setHoveredRow(rowElement) {
+    const previous = __privateGet$1(this, _hoveredRow);
+    __privateSet$1(this, _hoveredRow, rowElement);
+    this.paintRowCta(previous);
+    this.paintRowCta(rowElement);
+  }
+  /**
+   * Tabulator takes a row that scrolls out of its render window off the page, and a row taken off
+   * the page gets no `mouseleave` to hide its CTA, nor need its button get a `focusout` for the
+   * focus it drops.
+   */
+  releaseDetachedCta() {
+    var _a2;
+    if (((_a2 = __privateGet$1(this, _hoveredRow)) == null ? void 0 : _a2.isConnected) === false) {
+      this.setHoveredRow(void 0);
+    }
+    const focused = __privateGet$1(this, _focusedCta);
+    if ((focused == null ? void 0 : focused.button.isConnected) === false) {
+      __privateSet$1(this, _focusedCta, void 0);
+      this.paintCta(focused);
+    }
+  }
+  /** Lays the columns and the rendered rows out again. */
+  redrawTable() {
+    var _a2;
+    (_a2 = this.tabulator) == null ? void 0 : _a2.redraw();
+    this.syncTableFrame();
+  }
+  /** The frame ends at the data columns. The scrollport remains available to the row actions. */
+  syncTableFrame() {
+    var _a2, _b2, _c2;
+    const columns = (_a2 = this.buildingTabulator) == null ? void 0 : _a2.getColumns();
+    const widths = (_b2 = columns == null ? void 0 : columns.filter((column) => column.getField() !== FILLER_FIELD && column.isVisible()).map((column) => column.getWidth())) != null ? _b2 : [];
+    const width = widths.every((value) => value > 0) ? widths.reduce((total, value) => total + value, 0) : 0;
+    (_c2 = this.tableEl) == null ? void 0 : _c2.style.setProperty("--content-browser-table-width", width > 0 ? `${width + RESIZE_BUFFER_WIDTH}px` : "100%");
+  }
+  /**
+   * Tabulator renders the rows again -- for an appended page, a redraw of its own or one of ours --
+   * by taking every rendered row off the page and back, which drops the keyboard focus, so the CTA
+   * that held it gets it back.
+   */
+  handleRenderStarted(event) {
+    var _a2;
+    event.stopPropagation();
+    const button = (_a2 = __privateGet$1(this, _focusedCta)) == null ? void 0 : _a2.button;
+    __privateSet$1(this, _ctaFocusedAtRender, (button == null ? void 0 : button.matches(":focus-within")) ? button : void 0);
+  }
+  handleRenderComplete(event) {
+    event.stopPropagation();
+    if (this.getScrollbarWidth() !== __privateGet$1(this, _layoutScrollbarWidth)) {
+      this.applyColumnLayout(false);
+    }
+    this.syncTableFrame();
+    const button = __privateGet$1(this, _ctaFocusedAtRender);
+    __privateSet$1(this, _ctaFocusedAtRender, void 0);
+    if ((button == null ? void 0 : button.isConnected) && !button.matches(":focus-within")) {
+      button.focus({ preventScroll: true });
+    }
+  }
+  toRow(asset, keys2) {
+    const row = {
+      id: asset.id,
+      inColdStorage: Boolean(asset.inColdStorage)
+    };
+    this.columns.forEach((column, index) => {
+      row[keys2[index]] = readCellValue(asset, column.field);
+    });
+    return row;
+  }
+  findRow(assetId) {
+    var _a2;
+    if (!assetId) {
+      return void 0;
+    }
+    return ((_a2 = this.tabulator) == null ? void 0 : _a2.getRow(assetId)) || void 0;
+  }
+  /**
+   * `aria-current`, not `aria-selected`: this is a `grid` with no selection model of its own. The
+   * row is never selected in Tabulator, so an import does not paint `cx-table`'s selected-row highlight.
+   */
+  markCurrentRow(assetId, current) {
+    const row = this.findRow(assetId);
+    if (!row) {
+      return;
+    }
+    row.getElement().setAttribute("aria-current", current ? "true" : "false");
+  }
+  /**
+   * The fonts and the padding of a rendered header title and data cell. A table with no rendered
+   * cell measures the values in the header font, with the header padding.
+   */
+  readColumnMetrics(columns) {
+    var _a2, _b2, _c2, _d2, _e2;
+    const header = columns.map((column) => column.getElement()).find((element) => element.isConnected);
+    const title = (_a2 = header == null ? void 0 : header.querySelector(".tabulator-col-title cx-line-clamp")) != null ? _a2 : header == null ? void 0 : header.querySelector(".tabulator-col-title");
+    if (!header || !title) {
+      return void 0;
+    }
+    const headerFont = canvasFont(title);
+    const headerContent = header.querySelector(".tabulator-col-content");
+    const headerPadding = horizontalPadding(header) + (headerContent ? horizontalPadding(headerContent) : 0) + horizontalPadding((_b2 = title.closest(".tabulator-col-title")) != null ? _b2 : title);
+    const key = (_c2 = header.getAttribute("tabulator-field")) != null ? _c2 : "";
+    const cell = (_e2 = (_d2 = this.tableEl) == null ? void 0 : _d2.shadowRoot) == null ? void 0 : _e2.querySelector(`.tabulator-row .tabulator-cell[tabulator-field="${key}"]`);
+    const text = cell == null ? void 0 : cell.querySelector("cx-line-clamp");
+    if (!cell || !text) {
+      return { cellFont: headerFont, headerFont, padding: headerPadding };
+    }
+    return { cellFont: canvasFont(text), headerFont, padding: Math.max(headerPadding, horizontalPadding(cell)) };
+  }
+  getScrollbarWidth() {
+    var _a2, _b2, _c2;
+    const scrollport = (_c2 = (_b2 = (_a2 = this.tableEl) == null ? void 0 : _a2.tabulatorInstance) == null ? void 0 : _b2.rowManager) == null ? void 0 : _c2.element;
+    return scrollport ? scrollport.offsetWidth - scrollport.clientWidth : 0;
+  }
+  /** The widest of the title and the values of the loaded rows, plus the padding. */
+  measureNaturalWidth(column, metrics) {
+    const widest = __privateGet$1(this, _syncedAssets).reduce(
+      (width, asset) => Math.max(width, measureTextWidth(readCellValue(asset, column.field), metrics.cellFont)),
+      measureTextWidth(column.title, metrics.headerFont)
+    );
+    return Math.ceil(widest + metrics.padding);
+  }
+  /**
+   * Sets the width of each visible host column: a saved or session width as is, and an auto-fit
+   * width for the other columns, inside the width of the table (see `layoutColumnWidths`). A hidden
+   * column keeps its width. A table with no width, as one in a hidden panel, keeps its widths until
+   * it is shown.
+   * @param measure Measure the natural widths again. Leave it false to reuse the natural widths of
+   * the last full layout, for a change of the available width only.
+   */
+  applyColumnLayout(measure = true) {
+    var _a2;
+    const tabulator = (_a2 = this.tableEl) == null ? void 0 : _a2.tabulatorInstance;
+    const element = tabulator && !tabulator.destroyed ? tabulator.element : void 0;
+    if (!tabulator || !element) {
+      return;
+    }
+    if (element.clientWidth === 0) {
+      __privateGet$1(this, _layoutPending) || __privateSet$1(this, _layoutPending, measure);
+      return;
+    }
+    if (measure) {
+      __privateSet$1(this, _layoutPending, false);
+      this.layoutAgainWhenFontsLoad();
+    }
+    const hidden = new Set(this.hiddenFields);
+    const keys2 = this.resolveColumnKeys();
+    const shown = this.columns.flatMap((column, index) => {
+      const tabulatorColumn = hidden.has(column.field) ? false : tabulator.getColumn(keys2[index]);
+      return tabulatorColumn ? [{ column, key: keys2[index], tabulatorColumn }] : [];
+    });
+    const metrics = this.readColumnMetrics(shown.map(({ tabulatorColumn }) => tabulatorColumn));
+    if (!metrics) {
+      return;
+    }
+    const scrollbar = this.getScrollbarWidth();
+    __privateSet$1(this, _layoutScrollbarWidth, scrollbar);
+    const widths = layoutColumnWidths(shown.map(({ column, key }) => {
+      var _a3;
+      let natural = measure ? void 0 : __privateGet$1(this, _naturalWidths).get(key);
+      if (natural === void 0) {
+        natural = this.measureNaturalWidth(column, metrics);
+        __privateGet$1(this, _naturalWidths).set(key, natural);
+      }
+      return { natural, saved: (_a3 = __privateGet$1(this, _resizedWidths).get(column.field.trim())) != null ? _a3 : __privateGet$1(this, _sessionWidths).get(column.field.trim()) };
+    }), Math.floor(unroundedClientWidth(element) - scrollbar) - RESIZE_BUFFER_WIDTH);
+    shown.forEach(({ key, tabulatorColumn }, index) => {
+      const width = widths[index];
+      void tabulatorColumn.setWidth(width);
+      tabulatorColumn.getDefinition().width = width;
+      const definition = __privateGet$1(this, _columnDefinitions).find(({ field }) => field === key);
+      if (definition) {
+        definition.width = width;
+      }
+    });
+    this.syncTableFrame();
+  }
+  /**
+   * The canvas measures with a fallback font while a web font loads, so measure again once the fonts
+   * are ready. Guarded by one pending wait, and by the connection of the element.
+   */
+  layoutAgainWhenFontsLoad() {
+    var _a2;
+    if (__privateGet$1(this, _fontsPending) || ((_a2 = document.fonts) == null ? void 0 : _a2.status) !== "loading") {
+      return;
+    }
+    __privateSet$1(this, _fontsPending, true);
+    void document.fonts.ready.then(() => {
+      __privateSet$1(this, _fontsPending, false);
+      if (this.isConnected) {
+        this.applyColumnLayout();
+      }
+    });
+  }
+  /**
+   * `content-browser` hands over the whole list on every page, so a list that only grows by a page
+   * is appended: reassigning it would call `setData`, which scrolls the table back to the top. Any
+   * other list -- a new search, sort, filter or folder, or a refetch that brings the assets the rows
+   * show as new objects -- replaces the rows.
+   */
+  syncRows(replace = false) {
+    return __async(this, null, function* () {
+      const tabulator = this.tabulator;
+      if (!tabulator) {
+        return;
+      }
+      const columnKeys = this.resolveColumnKeys();
+      const synced = __privateGet$1(this, _syncedAssets);
+      const isNextPage = !replace && __privateGet$1(this, _pendingReplaces) === 0 && isAppendOf(synced, this.assets);
+      __privateSet$1(this, _syncedAssets, [...this.assets]);
+      if (isNextPage) {
+        __privateSet$1(this, _heldRowKeys, new Set(columnKeys.filter((key) => __privateGet$1(this, _heldRowKeys).has(key))));
+        yield tabulator.addData(this.assets.slice(synced.length).map((asset) => this.toRow(asset, columnKeys)));
+      } else {
+        __privateSet$1(this, _heldRowKeys, new Set(columnKeys));
+        __privateSet$1(this, _pendingReplaces, __privateGet$1(this, _pendingReplaces) + 1);
+        try {
+          yield tabulator.setData(this.assets.map((asset) => this.toRow(asset, columnKeys)));
+        } finally {
+          __privateSet$1(this, _pendingReplaces, __privateGet$1(this, _pendingReplaces) - 1);
+        }
+        this.applyColumnLayout();
+      }
+      this.markCurrentRow(this.selectedAssetId, true);
+      this.observeLastRow();
+      this.reportRestartedRowCount();
+      this.reportHeldRowCount();
+    });
+  }
+  handleTableBuilt(event) {
+    var _a2, _b2;
+    event.stopPropagation();
+    __privateSet$1(this, _builtTable, (_b2 = (_a2 = this.tableEl) == null ? void 0 : _a2.tabulatorInstance) != null ? _b2 : void 0);
+    if (__privateGet$1(this, _builtTable)) {
+      __privateGet$1(this, _builtTable).options.rowFormatter = (row) => this.renderRowAction(row);
+    }
+    this.prepareFrame();
+    __privateSet$1(this, _syncedAssets, []);
+    void this.syncRows();
+  }
+  /**
+   * Gives the frame, the scrollport and the header their styles. Runs as soon as Tabulator lays out its
+   * columns: until then the frame takes the width of its content, which is not the width of the header.
+   */
+  prepareFrame() {
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g;
+    const scrollport = (_b2 = (_a2 = this.buildingTabulator) == null ? void 0 : _a2.rowManager) == null ? void 0 : _b2.element;
+    const frame = scrollport == null ? void 0 : scrollport.parentElement;
+    frame == null ? void 0 : frame.style.setProperty("width", "100%");
+    frame == null ? void 0 : frame.part.add("content-browser-frame");
+    scrollport == null ? void 0 : scrollport.part.add("content-browser-scrollport");
+    const header = (_d2 = (_c2 = this.tableEl) == null ? void 0 : _c2.shadowRoot) == null ? void 0 : _d2.querySelector(".tabulator-header");
+    const columns = header == null ? void 0 : header.querySelector(".tabulator-headers");
+    header == null ? void 0 : header.part.add("content-browser-header");
+    (_f2 = (_e2 = this.tableEl) == null ? void 0 : _e2.shadowRoot) == null ? void 0 : _f2.addEventListener("dblclick", this.handleResizeHandleDoubleClick, { capture: true });
+    (_g = __privateGet$1(this, _frameWidthObserver)) == null ? void 0 : _g.disconnect();
+    if (columns) {
+      __privateSet$1(this, _frameWidthObserver, new ResizeObserver(() => this.syncTableFrame()));
+      __privateGet$1(this, _frameWidthObserver).observe(columns);
+    }
+    this.syncTableFrame();
+  }
+  /**
+   * `setData` replaces the rows only once its debounce runs out, and Tabulator emits `dataLoaded` just
+   * before it does. Until then, the old rows stay on the page with their hover and focus.
+   */
+  handleDataLoaded(event) {
+    event.stopPropagation();
+    __privateSet$1(this, _hoveredRow, void 0);
+    __privateSet$1(this, _focusedCta, void 0);
+    __privateGet$1(this, _renderedCtas).clear();
+  }
+  /**
+   * Every `setColumns` builds the columns again from the definitions: Tabulator calls it as it builds,
+   * before `tableBuilt`. `cx-table` calls it again from its own `tableBuilt` handler, after this
+   * component's has run, and for every new column set.
+   */
+  handleColumnsLoaded(event) {
+    event.stopPropagation();
+    this.prepareFrame();
+    this.applyColumnLayout();
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    const signature = columnsSignature(this.columns);
+    const columnsChanged = signature !== __privateGet$1(this, _columnsSignature);
+    const tableRemounts = changedProperties.get("empty") === true && !this.empty;
+    if (columnsChanged) {
+      __privateSet$1(this, _columnsSignature, signature);
+      __privateSet$1(this, _rowsNeedRebuild, this.hasUpdated && this.resolveColumnKeys().some((key) => !__privateGet$1(this, _heldRowKeys).has(key)));
+    }
+    const savedWidthsChanged = changedProperties.has("savedWidths");
+    const widthScopeChanged = changedProperties.has("widthScope");
+    if (widthScopeChanged) {
+      __privateGet$1(this, _sessionWidths).clear();
+    }
+    if (savedWidthsChanged) {
+      this.applySavedWidths();
+    }
+    if (columnsChanged || tableRemounts) {
+      __privateSet$1(this, _columnDefinitions, this.buildColumnDefinitions());
+    } else if (changedProperties.has("hiddenFields")) {
+      this.applyHiddenFields();
+    } else if (savedWidthsChanged || widthScopeChanged) {
+      this.applyColumnLayout();
+    }
+  }
+  /**
+   * The new saved widths replace all the widths in memory: a width that the new map does not hold,
+   * for example one of another site, goes away. Only a positive width counts: a bad entry has no effect.
+   */
+  applySavedWidths() {
+    var _a2;
+    __privateSet$1(this, _resizedWidths, new Map(Object.entries((_a2 = this.savedWidths) != null ? _a2 : {}).flatMap(([field, width]) => typeof width === "number" && Number.isFinite(width) && width > 0 ? [[field.trim(), Math.round(width)]] : [])));
+  }
+  /**
+   * Through Tabulator's own column visibility: new definitions would reach it through `setColumns`,
+   * and the rows would have to be rebuilt, which scrolls back to the top.
+   */
+  applyHiddenFields() {
+    const hidden = new Set(this.hiddenFields);
+    const keys2 = this.resolveColumnKeys();
+    const shows = [];
+    __privateGet$1(this, _columnDefinitions).forEach((definition) => {
+      var _a2;
+      const field = String(definition.field);
+      const hostColumn = this.columns[keys2.indexOf(field)];
+      if (!hostColumn) {
+        return;
+      }
+      const isHidden = hidden.has(hostColumn.field);
+      const column = (_a2 = this.tabulator) == null ? void 0 : _a2.getColumn(field);
+      definition.hidden = isHidden || void 0;
+      if (column && column.isVisible() === isHidden) {
+        if (isHidden) {
+          column.hide();
+        } else {
+          shows.push(column.show());
+        }
+      }
+    });
+    void Promise.all(shows).then(() => this.applyColumnLayout());
+  }
+  updated(changedProperties) {
+    var _a2;
+    super.updated(changedProperties);
+    if (this.empty) {
+      (_a2 = __privateGet$1(this, _frameWidthObserver)) == null ? void 0 : _a2.disconnect();
+    }
+    if (__privateGet$1(this, _rowsNeedRebuild)) {
+      __privateSet$1(this, _rowsNeedRebuild, false);
+      void this.rebuildRows();
+    }
+  }
+  /** Once `cx-table` has taken the new column definitions. */
+  rebuildRows() {
+    return __async(this, null, function* () {
+      var _a2;
+      yield (_a2 = this.tableEl) == null ? void 0 : _a2.updateComplete;
+      yield this.syncRows(true);
+    });
+  }
+  handleAssetsChange(previous) {
+    const previousAssets = previous != null ? previous : [];
+    if (this.assets.length === previousAssets.length && this.assets.every((asset, index) => asset === previousAssets[index])) {
+      return;
+    }
+    this.assetMap.clear();
+    this.assets.forEach((item) => this.assetMap.set(item.id, item));
+    if (!isAppendOf(previousAssets, this.assets)) {
+      __privateSet$1(this, _lastRowCount, void 0);
+    }
+    void this.syncRows();
+  }
+  handleLoadingChange() {
+    return __async(this, null, function* () {
+      if (this.loading) {
+        return;
+      }
+      yield this.updateComplete;
+      if (__privateGet$1(this, _pendingReplaces) === 0) {
+        this.reportHeldRowCount();
+      }
+    });
+  }
+  handleSelectedAssetIdChange(previous) {
+    this.markCurrentRow(previous, false);
+    this.markCurrentRow(this.selectedAssetId, true);
+    this.paintAssetCta(previous);
+    this.paintAssetCta(this.selectedAssetId);
+  }
+  handleBusyAssetIdChange(previous) {
+    this.paintAssetCta(previous);
+    this.paintAssetCta(this.busyAssetId);
+  }
+  handleCtaTextChange() {
+    var _a2, _b2;
+    (_b2 = ((_a2 = this.tabulator) == null ? void 0 : _a2.getColumn(FILLER_FIELD)) || void 0) == null ? void 0 : _b2.getElement().setAttribute("aria-label", this.ctaLabel);
+    __privateGet$1(this, _renderedCtas).forEach((cta) => this.paintCta(cta));
+  }
+  /** In place, as a relabel is: a CTA built again would drop the keyboard focus the old one held. */
+  setNoHover(noHover) {
+    if (noHover === __privateGet$1(this, _hasNoHover)) {
+      return;
+    }
+    __privateSet$1(this, _hasNoHover, noHover);
+    __privateGet$1(this, _renderedCtas).forEach((cta) => this.paintCta(cta));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateSet$1(this, _noHoverQueries, NO_HOVER_QUERIES.map((media) => window.matchMedia(media)));
+    __privateGet$1(this, _noHoverQueries).forEach((list) => list.addEventListener("change", this.handleNoHoverChange));
+    this.handleNoHoverChange();
+    if (this.hasUpdated) {
+      __privateSet$1(this, _columnDefinitions, this.buildColumnDefinitions());
+      this.requestUpdate();
+    }
+  }
+  disconnectedCallback() {
+    var _a2, _b2;
+    super.disconnectedCallback();
+    __privateGet$1(this, _noHoverQueries).forEach((list) => list.removeEventListener("change", this.handleNoHoverChange));
+    __privateSet$1(this, _noHoverQueries, []);
+    (_a2 = __privateGet$1(this, _lastRowObserver)) == null ? void 0 : _a2.disconnect();
+    (_b2 = __privateGet$1(this, _frameWidthObserver)) == null ? void 0 : _b2.disconnect();
+    this.debouncedCalculatePageSize.cancel();
+    this.debouncedHandleScrollEnd.cancel();
+    this.debouncedHandleLastRowVisible.cancel();
+    this.debouncedRedrawTable.cancel();
+    this.debouncedApplyColumnLayout.cancel();
+  }
+  handleResize(event) {
+    event.stopPropagation();
+    const entries = event.detail.entries;
+    if (entries[0].target !== this.containerEl) {
+      return;
+    }
+    const { height, width } = entries[0].contentRect;
+    this.debouncedCalculatePageSize(height);
+    this.refitToContainer(width, height);
+    if (__privateGet$1(this, _layoutPending)) {
+      this.applyColumnLayout();
+    }
+  }
+  /**
+   * A new container width changes the space that the auto-fit shares out, so the columns are laid
+   * out again. `cx-table` renders its rows again for a new container height only until the first drag
+   * of a column divider, so a new height redraws the rows, which leaves no blank area under them.
+   */
+  refitToContainer(width, height) {
+    const size = { height: Math.round(height), width: Math.round(width) };
+    const previous = __privateGet$1(this, _containerSize);
+    __privateSet$1(this, _containerSize, size);
+    if (previous === void 0) {
+      return;
+    }
+    if (previous.width !== size.width) {
+      this.debouncedApplyColumnLayout();
+    }
+    if (previous.height !== size.height) {
+      this.debouncedRedrawTable();
+    }
+  }
+  calculatePageSize(height) {
+    if (Math.abs(__privateGet$1(this, _lastHeight) - height) < 10) {
+      return;
+    }
+    __privateSet$1(this, _lastHeight, height);
+    this.reportRowCount();
+  }
+  /** Counts the rows the last measured height shows, and tells the host when the count changes. */
+  reportRowCount() {
+    const rowCount = Math.ceil(this.resolveVisibleHeight(__privateGet$1(this, _lastHeight)) / ROW_HEIGHT);
+    __privateSet$1(this, _rowCountHeld, this.loading && this.assets.length > 0);
+    if (rowCount === __privateGet$1(this, _lastRowCount) || __privateGet$1(this, _rowCountHeld)) {
+      return;
+    }
+    __privateSet$1(this, _lastRowCount, rowCount);
+    this.emit("cx-content-browser-grid-resize", {
+      detail: {
+        columnCount: 1,
+        rowCount
+      }
+    });
+  }
+  /**
+   * Only once the restarted rows are in: the host asks for the next page at once, and a page that
+   * lands while `setData` waits replaces the rows again and holds them back for another half second.
+   * A measurement still in its debounce reports in the same count, because a second count inside the
+   * host's 200 ms fetch debounce cancels the page the first count asked for.
+   */
+  reportRestartedRowCount() {
+    if (!this.isConnected || __privateGet$1(this, _lastRowCount) !== void 0 || __privateGet$1(this, _lastHeight) === 0) {
+      return;
+    }
+    this.debouncedCalculatePageSize.flush();
+    this.reportRowCount();
+  }
+  /**
+   * Once the load ends and any rows it brings are in, the count measured meanwhile can ask for the
+   * page after it. A table that is not built yet reports it at once.
+   */
+  reportHeldRowCount() {
+    if (!__privateGet$1(this, _rowCountHeld) || !this.isConnected) {
+      return;
+    }
+    this.debouncedCalculatePageSize.flush();
+    this.reportRowCount();
+  }
+  /**
+   * The rows never size the container (see the styles), so this is the height the host gives the
+   * picker, and it can run past the viewport. No scrollport shows more rows than the viewport, so
+   * while the rows do not overflow the scrollport the count stops there, and the page scrolls to the
+   * rest, where the last row coming into view asks for more (`observeLastRow`). One that overflows,
+   * or holds no rows yet, measures the space its container gives it and is used as is.
+   */
+  resolveVisibleHeight(height) {
+    return this.isSizedByRows() ? Math.min(height, window.innerHeight) : height;
+  }
+  isSizedByRows() {
+    var _a2, _b2;
+    const scrollport = this.scrollport;
+    return ((_b2 = (_a2 = this.tabulator) == null ? void 0 : _a2.getDataCount()) != null ? _b2 : 0) > 0 && scrollport !== void 0 && scrollport.scrollHeight <= scrollport.clientHeight + 1;
+  }
+  /**
+   * A scrollport that holds its rows without overflowing never scrolls, so its own scroll never
+   * reaches the end: the page scrolls instead. Once the table is taller than the viewport its count
+   * is capped and stops fetching, which leaves the last row coming into view as the only sign the
+   * user wants more.
+   */
+  observeLastRow() {
+    var _a2, _b2, _c2, _d2;
+    (_a2 = __privateGet$1(this, _lastRowObserver)) == null ? void 0 : _a2.disconnect();
+    const rows = (_c2 = (_b2 = this.tabulator) == null ? void 0 : _b2.getRows()) != null ? _c2 : [];
+    const lastRow = rows[rows.length - 1];
+    if (!lastRow) {
+      return;
+    }
+    (_d2 = __privateGet$1(this, _lastRowObserver)) != null ? _d2 : __privateSet$1(this, _lastRowObserver, new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        this.debouncedHandleLastRowVisible();
+      }
+    }));
+    __privateGet$1(this, _lastRowObserver).observe(lastRow.getElement());
+  }
+  handleLastRowVisible() {
+    if (this.isSizedByRows() && this.containerEl.clientHeight > window.innerHeight) {
+      this.handleScrollEnd();
+    }
+  }
+  insertAsset(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
+      }
+    });
+  }
+  /** The host field of a row key, or `undefined` for the filler. */
+  fieldOfKey(key) {
+    var _a2;
+    return key ? (_a2 = this.columns[this.resolveColumnKeys().indexOf(key)]) == null ? void 0 : _a2.field : void 0;
+  }
+  handleColumnResized(event) {
+    event.stopPropagation();
+    const [column] = event.detail.args;
+    const field = this.fieldOfKey(column.getField());
+    if (field === void 0) {
+      return;
+    }
+    const width = Math.round(column.getWidth());
+    column.getDefinition().width = width;
+    __privateGet$1(this, _resizedWidths).set(field.trim(), width);
+    this.holdOtherAutoFitWidths(field);
+    this.emit("cx-content-browser-table-column-resize", {
+      detail: {
+        field,
+        reset: false,
+        width
+      }
+    });
+    this.applyColumnLayout();
+  }
+  /**
+   * Holds each other visible auto-fit column at its width when the drag ends, for the session. A drag
+   * on one column must not change the width of another column (L-42CA9K issue 2).
+   */
+  holdOtherAutoFitWidths(dragged) {
+    const hidden = new Set(this.hiddenFields);
+    const keys2 = this.resolveColumnKeys();
+    this.columns.forEach((column, index) => {
+      var _a2;
+      const field = column.field.trim();
+      if (field === dragged.trim() || hidden.has(column.field) || __privateGet$1(this, _resizedWidths).has(field)) {
+        return;
+      }
+      const tabulatorColumn = (_a2 = this.tabulator) == null ? void 0 : _a2.getColumn(keys2[index]);
+      const width = tabulatorColumn ? Math.round(tabulatorColumn.getWidth()) : 0;
+      if (width > 0) {
+        __privateGet$1(this, _sessionWidths).set(field, width);
+      }
+    });
+  }
+  handleScrollVertical(event) {
+    event.stopPropagation();
+    this.releaseDetachedCta();
+    const scrollport = this.scrollport;
+    if (scrollport && scrollport.scrollTop + scrollport.clientHeight >= scrollport.scrollHeight - ROW_HEIGHT) {
+      this.debouncedHandleScrollEnd();
+    }
+  }
+  handleScrollEnd() {
+    if (this.hasMore && !this.loading) {
+      this.emit("cx-content-browser-grid-scroll-end");
+    }
+  }
+  handleRetry() {
+    this.emit("cx-content-browser-grid-retry");
+  }
+  renderRetry() {
+    return b`
+      <cx-button class="content-browser-table__retry" variant="primary" @click=${this.handleRetry}>
+        ${this.localize.term("retry")}
+      </cx-button>
+    `;
+  }
+  renderContent() {
+    if (this.error && this.assets.length === 0) {
+      return b`
+        <cx-content-browser-no-result
+          class="content-browser-table__empty"
+          icon="error_outline"
+          message=${this.localize.term("oopsSomethingWentWrong")}
+          role="alert"
+        >
+          ${this.renderRetry()}
+        </cx-content-browser-no-result>
+      `;
+    }
+    if (this.empty) {
+      return b`
+        <cx-content-browser-no-result
+          class="content-browser-table__empty"
+          icon="search_off"
+          message=${this.localize.term("noResults")}
+        ></cx-content-browser-no-result>
+      `;
+    }
+    return b`
+      <cx-table
+        class="content-browser-table__table"
+        layout="fitData"
+        placeholder=""
+        no-selectable
+        no-clipboard
+        .columns=${__privateGet$1(this, _columnDefinitions)}
+        .columnDefaults=${COLUMN_DEFAULTS}
+        .rowHeight=${ROW_HEIGHT}
+        @cx-table.tableBuilt=${this.handleTableBuilt}
+        @cx-table.dataLoaded=${this.handleDataLoaded}
+        @cx-table.columnsLoaded=${this.handleColumnsLoaded}
+        @cx-table.columnResized=${this.handleColumnResized}
+        @cx-table.scrollVertical=${this.handleScrollVertical}
+        @cx-table.renderStarted=${this.handleRenderStarted}
+        @cx-table.renderComplete=${this.handleRenderComplete}
+      ></cx-table>
+    `;
+  }
+  render() {
+    return b`
+      <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">
+          ${this.renderContent()}
+        </div>
+      </cx-resize-observer>
+      ${n$5(this.error && this.assets.length > 0, () => b`
+        <div class="content-browser-table__page-error" role="alert">
+          <cx-icon name="error_outline"></cx-icon>
+          ${this.localize.term("oopsSomethingWentWrong")}
+          ${this.renderRetry()}
+        </div>
+      `)}
+    `;
+  }
+};
+_columnDefinitions = /* @__PURE__ */ new WeakMap();
+_columnsSignature = /* @__PURE__ */ new WeakMap();
+_columnKeys = /* @__PURE__ */ new WeakMap();
+_rowsNeedRebuild = /* @__PURE__ */ new WeakMap();
+_heldRowKeys = /* @__PURE__ */ new WeakMap();
+_resizedWidths = /* @__PURE__ */ new WeakMap();
+_sessionWidths = /* @__PURE__ */ new WeakMap();
+_ctas = /* @__PURE__ */ new WeakMap();
+_renderedCtas = /* @__PURE__ */ new WeakMap();
+_pointerTrackedRows = /* @__PURE__ */ new WeakMap();
+_hoveredRow = /* @__PURE__ */ new WeakMap();
+_focusedCta = /* @__PURE__ */ new WeakMap();
+_ctaFocusedAtRender = /* @__PURE__ */ new WeakMap();
+_noHoverQueries = /* @__PURE__ */ new WeakMap();
+_hasNoHover = /* @__PURE__ */ new WeakMap();
+_builtTable = /* @__PURE__ */ new WeakMap();
+_syncedAssets = /* @__PURE__ */ new WeakMap();
+_pendingReplaces = /* @__PURE__ */ new WeakMap();
+_lastHeight = /* @__PURE__ */ new WeakMap();
+_containerSize = /* @__PURE__ */ new WeakMap();
+_lastRowCount = /* @__PURE__ */ new WeakMap();
+_rowCountHeld = /* @__PURE__ */ new WeakMap();
+_lastRowObserver = /* @__PURE__ */ new WeakMap();
+_layoutScrollbarWidth = /* @__PURE__ */ new WeakMap();
+_naturalWidths = /* @__PURE__ */ new WeakMap();
+_layoutPending = /* @__PURE__ */ new WeakMap();
+_fontsPending = /* @__PURE__ */ new WeakMap();
+_frameWidthObserver = /* @__PURE__ */ new WeakMap();
+CxContentBrowserTable.styles = [componentStyles, styles$1];
+CxContentBrowserTable.dependencies = {
+  "cx-button": CxButton,
+  "cx-content-browser-no-result": CxContentBrowserNoResult,
+  "cx-icon": CxIcon,
   "cx-line-clamp": CxLineClamp,
-  "cx-menu": CxMenu,
-  "cx-menu-item": CxMenuItem,
-  "cx-skeleton": CxSkeleton,
-  "cx-space": CxSpace,
-  "cx-typography": CxTypography
+  "cx-progress-bar": CxProgressBar,
+  "cx-resize-observer": CxResizeObserver,
+  "cx-table": CxTable
 };
 __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("cx-table")
+], CxContentBrowserTable.prototype, "tableEl", 2);
 __decorateClass$1([
-  n$6({ type: Boolean })
-], CxContentBrowserHeader.prototype, "loading", 2);
+  n$6({ attribute: "assets", reflect: false, type: Array })
+], CxContentBrowserTable.prototype, "assets", 2);
 __decorateClass$1([
-  n$6({ attribute: "is-fetching", type: Boolean })
-], CxContentBrowserHeader.prototype, "isFetching", 2);
+  n$6({ attribute: "columns", reflect: false, type: Array })
+], CxContentBrowserTable.prototype, "columns", 2);
 __decorateClass$1([
-  n$6({ attribute: "avatar", type: String })
-], CxContentBrowserHeader.prototype, "avatar", 2);
+  n$6({ attribute: "cta-text", reflect: false, type: String })
+], CxContentBrowserTable.prototype, "ctaText", 2);
 __decorateClass$1([
-  n$6({ attribute: "full-name", type: String })
-], CxContentBrowserHeader.prototype, "fullName", 2);
+  n$6({ attribute: "cta-text-transform", reflect: false, type: String })
+], CxContentBrowserTable.prototype, "ctaTextTransform", 2);
 __decorateClass$1([
-  n$6({ attribute: "folder-title", type: String })
-], CxContentBrowserHeader.prototype, "folderTitle", 2);
+  n$6({ attribute: "empty", reflect: true, type: Boolean })
+], CxContentBrowserTable.prototype, "empty", 2);
 __decorateClass$1([
-  n$6({ attribute: "show-close-button", type: Boolean })
-], CxContentBrowserHeader.prototype, "showCloseButton", 2);
+  n$6({ attribute: "error", reflect: true, type: Boolean })
+], CxContentBrowserTable.prototype, "error", 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([
+  n$6({ attribute: false })
+], CxContentBrowserTable.prototype, "hiddenFields", 2);
+__decorateClass$1([
+  n$6({ attribute: false })
+], CxContentBrowserTable.prototype, "savedWidths", 2);
+__decorateClass$1([
+  n$6({ attribute: false })
+], CxContentBrowserTable.prototype, "widthScope", 2);
+__decorateClass$1([
+  n$6({ attribute: "row-action-position", reflect: true })
+], CxContentBrowserTable.prototype, "rowActionPosition", 2);
+__decorateClass$1([
+  watch("assets")
+], CxContentBrowserTable.prototype, "handleAssetsChange", 1);
+__decorateClass$1([
+  watch("loading", { waitUntilFirstUpdate: true })
+], CxContentBrowserTable.prototype, "handleLoadingChange", 1);
+__decorateClass$1([
+  watch("selectedAssetId", { waitUntilFirstUpdate: true })
+], CxContentBrowserTable.prototype, "handleSelectedAssetIdChange", 1);
+__decorateClass$1([
+  watch("busyAssetId", { waitUntilFirstUpdate: true })
+], CxContentBrowserTable.prototype, "handleBusyAssetIdChange", 1);
+__decorateClass$1([
+  watch(["ctaText", "ctaTextTransform"], { waitUntilFirstUpdate: true })
+], CxContentBrowserTable.prototype, "handleCtaTextChange", 1);
+CxContentBrowserTable = __decorateClass$1([
+  customElement("cx-content-browser-table")
+], CxContentBrowserTable);
 const appendPathAndQuery = (baseUrl, pathSuffix, extraQueryParams = []) => {
   const questionMarkIndex = baseUrl.indexOf("?");
   const hashIndex = baseUrl.indexOf("#");
@@ -13264,8 +14824,26 @@ function apiGetAssetsByIDs(_0) {
     }
   });
 }
+const ASSET_LIST_FIELDS = [
+  DEFAULT_VIEW_SIZE,
+  FIELD_DOC_TITLE,
+  FIELD_DOC_TYPE,
+  FIELD_EXTENSION,
+  FIELD_FILE_SIZE,
+  FIELD_IDENTIFIER,
+  FIELD_KEYWORDS,
+  FIELD_MAX_HEIGHT,
+  FIELD_MAX_WIDTH,
+  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 = [],
@@ -13276,25 +14854,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_TITLE,
-            FIELD_DOC_TYPE,
-            FIELD_EXTENSION,
-            FIELD_FILE_SIZE,
-            FIELD_IDENTIFIER,
-            FIELD_KEYWORDS,
-            FIELD_MAX_HEIGHT,
-            FIELD_MAX_WIDTH,
-            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,
@@ -13310,23 +14880,31 @@ function apiGetAssets(_0) {
         transformResponse: [
           ...Array.isArray(http.defaults.transformResponse) ? http.defaults.transformResponse : [],
           (rawResponse) => {
-            var _a2, _b2;
+            var _a3, _b2;
             if (!isSearchResponse(rawResponse)) {
               return {
                 facets: [],
                 isError: true,
                 items: [],
-                totalCount: 0
+                totalCount: 0,
+                unreadableFields: []
               };
             }
-            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 : "";
+            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 = resolveAssetCaption(item.fields);
               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 : "",
@@ -13343,13 +14921,14 @@ 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,
               isError: false,
               items: mappedItems,
-              totalCount: rawResponse.totalCount
+              totalCount: rawResponse.totalCount,
+              unreadableFields: Array.isArray(rawResponse.unreadableFields) ? rawResponse.unreadableFields.filter((field) => typeof field === "string") : []
             };
           }
         ],
@@ -13361,7 +14940,8 @@ function apiGetAssets(_0) {
         facets: [],
         isError: true,
         items: [],
-        totalCount: 0
+        totalCount: 0,
+        unreadableFields: []
       };
     }
   });
@@ -13828,8 +15408,16 @@ var intersection = baseRest(function(arrays) {
   var mapped = arrayMap(arrays, castArrayLikeObject);
   return mapped.length && mapped[0] === arrays[0] ? baseIntersection(mapped) : [];
 });
+function narrowUnreadableFields(unreadableFields, page) {
+  if (page.items.length === 0) {
+    return unreadableFields;
+  }
+  const flagged = new Set(page.unreadableFields.map(toFieldKey));
+  return unreadableFields.filter((field) => flagged.has(toFieldKey(field)));
+}
 class FetchAndMergeAssetsController {
   constructor(host, {
+    additionalFields,
     availableDocTypes,
     baseUrl,
     bearerToken,
@@ -13856,6 +15444,7 @@ class FetchAndMergeAssetsController {
     this.facets = [];
     this.items = [];
     this.totalCount = 0;
+    this.unreadableFields = [];
     this.lastRequest = null;
     this.failedRequest = null;
     this.sortOrders = {};
@@ -13881,6 +15470,7 @@ class FetchAndMergeAssetsController {
     __privateSet(this, _lastPage, null);
     this.host = host;
     this.availableDocTypes = availableDocTypes;
+    this.additionalFields = additionalFields != null ? additionalFields : [];
     this.defaultFolderId = defaultFolderId;
     this.defaultIsSeeThrough = defaultIsSeeThrough;
     this.defaultSearchText = defaultSearchText;
@@ -14017,6 +15607,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, bearerToken) {
     if (this.useSiteSession) {
       return;
@@ -14183,6 +15781,7 @@ class FetchAndMergeAssetsController {
             }
           }
           request = __spreadProps(__spreadValues({}, request), {
+            fields: this.additionalFields,
             limitedToDocTypes: this.availableDocTypes
           });
           this.lastRequest = request;
@@ -14197,12 +15796,15 @@ class FetchAndMergeAssetsController {
             if (isRestart) {
               this.items = [];
               this.totalCount = 0;
+              this.unreadableFields = [];
             }
           } else {
             if (isRestart) {
               this.items = assets.items;
+              this.unreadableFields = assets.unreadableFields;
             } else {
               this.items = uniqBy([...this.items, ...assets.items], "recordId");
+              this.unreadableFields = narrowUnreadableFields(this.unreadableFields, assets);
             }
             this.facets = this.mergeFacetsWithSelected(assets.facets, this.facets, request.selectedFacets);
             this.totalCount = assets.totalCount;
@@ -14424,6 +16026,7 @@ class FetchAndMergeAssetsController {
       searchError: this.failedRequest !== null,
       sortOrders: this.sortOrders,
       totalCount: this.totalCount,
+      unreadableFields: this.unreadableFields,
       userInfo: this.userInfo
     });
     return __privateGet(this, _lastData);
@@ -14443,6 +16046,7 @@ class FetchAndMergeAssetsController {
     this.facets = [];
     this.items = [];
     this.totalCount = 0;
+    this.unreadableFields = [];
     this.sortOrders = {};
     __privateSet(this, _lastPage, null);
   }
@@ -14461,6 +16065,241 @@ function safeInteger(value) {
   }
   return value;
 }
+const DATA_EXPIRE_TIME_POSTFIX = "_valid_until";
+const DEFAULT_EXPIRED_DURATION = 1 * 24 * 60 * 60 * 1e3;
+const isLocalStorageAvailable = () => {
+  const mod = "test-storage";
+  try {
+    localStorage.setItem(mod, mod);
+    localStorage.removeItem(mod);
+    return true;
+  } catch (e2) {
+    return false;
+  }
+};
+const isSessionStorageAvailable = () => {
+  const mod = "test-storage";
+  try {
+    sessionStorage.setItem(mod, mod);
+    sessionStorage.removeItem(mod);
+    return true;
+  } catch (e2) {
+    return false;
+  }
+};
+const isCookiesAvailable = () => {
+  try {
+    document.cookie = "test-cookie=test";
+    const available = document.cookie.indexOf("test-cookie=test") !== -1;
+    document.cookie = "test-cookie=; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/";
+    return available;
+  } catch (e2) {
+    return false;
+  }
+};
+const isCustomStorageAvailable = () => {
+  try {
+    return !!window.OrangeDAMContentBrowser._customStorage && typeof window.OrangeDAMContentBrowser._customStorage.get === "function" && typeof window.OrangeDAMContentBrowser._customStorage.set === "function" && typeof window.OrangeDAMContentBrowser._customStorage.delete === "function";
+  } catch (e2) {
+    return false;
+  }
+};
+const createCookie = (key, value, expireDate = null) => {
+  let expires = "";
+  if (expireDate) {
+    expires = "; expires=" + expireDate;
+  }
+  document.cookie = key + "=" + value + expires + "; path=/";
+};
+const getCookie = (key) => {
+  const nameEQ = key + "=";
+  const ca = document.cookie.split(";");
+  for (const c2 of ca) {
+    const cookie = c2.trim();
+    if (cookie.startsWith(nameEQ)) {
+      return cookie.substring(nameEQ.length);
+    }
+  }
+  return null;
+};
+const getData = (key, storageType) => __async(null, null, function* () {
+  var _a2, _b2;
+  if (!storageType) {
+    let hasAvailableStorage = false;
+    if (isCustomStorageAvailable()) {
+      hasAvailableStorage = true;
+      const result = yield getData(key, "CustomStorage");
+      if (result !== null) return result;
+    }
+    if (isLocalStorageAvailable()) {
+      hasAvailableStorage = true;
+      const result = yield getData(key, "LocalStorage");
+      if (result !== null) return result;
+    }
+    if (isSessionStorageAvailable()) {
+      hasAvailableStorage = true;
+      const result = yield getData(key, "SessionStorage");
+      if (result !== null) return result;
+    }
+    if (isCookiesAvailable()) {
+      hasAvailableStorage = true;
+      const result = yield getData(key, "Cookies");
+      if (result !== null) return result;
+    }
+    if (!hasAvailableStorage) {
+      throw new Error("No storage is available");
+    }
+    return null;
+  }
+  switch (storageType) {
+    case "CustomStorage":
+      return !isCustomStorageAvailable() || (yield isValueExpired(key, "CustomStorage")) ? null : (_b2 = (_a2 = window.OrangeDAMContentBrowser._customStorage) == null ? void 0 : _a2.get(key)) != null ? _b2 : null;
+    case "SessionStorage":
+      return !isSessionStorageAvailable() || (yield isValueExpired(key, "SessionStorage")) ? null : sessionStorage.getItem(key);
+    case "Cookies":
+      return !isCookiesAvailable() ? null : getCookie(key);
+    case "LocalStorage":
+    default:
+      return !isLocalStorageAvailable() || (yield isValueExpired(key, "LocalStorage")) ? null : localStorage.getItem(key);
+  }
+});
+const isValueExpired = (key, type) => __async(null, null, function* () {
+  if (key.endsWith(DATA_EXPIRE_TIME_POSTFIX)) {
+    return false;
+  }
+  const dataExpireTimeKey = key + DATA_EXPIRE_TIME_POSTFIX;
+  const expireDateStr = yield getData(dataExpireTimeKey, type);
+  if (expireDateStr) {
+    const expireDate = new Date(expireDateStr).getTime();
+    const currentTime = (/* @__PURE__ */ new Date()).getTime();
+    if (expireDate < currentTime) {
+      deleteData(key);
+      deleteData(dataExpireTimeKey);
+      return true;
+    }
+  }
+  return false;
+});
+const storeData = (key, value, storageType, ttl = 0) => {
+  var _a2;
+  const dataExpireTimeKey = key + DATA_EXPIRE_TIME_POSTFIX;
+  const expireDate = /* @__PURE__ */ new Date();
+  expireDate.setTime(expireDate.getTime() + (ttl || DEFAULT_EXPIRED_DURATION));
+  const expireDateStr = expireDate.toUTCString();
+  if (!storageType) {
+    if (isCustomStorageAvailable()) {
+      storageType = "CustomStorage";
+    } else if (isLocalStorageAvailable()) {
+      storageType = "LocalStorage";
+    } else if (isSessionStorageAvailable()) {
+      storageType = "SessionStorage";
+    } else if (isCookiesAvailable()) {
+      storageType = "Cookies";
+    } else {
+      throw new Error("No storage is available");
+    }
+  }
+  switch (storageType) {
+    case "CustomStorage":
+      if (!isCustomStorageAvailable()) {
+        throw new Error("CustomStorage is not available");
+      }
+      const set = (_a2 = window.OrangeDAMContentBrowser._customStorage) == null ? void 0 : _a2.set;
+      if (ttl) {
+        set(dataExpireTimeKey, expireDateStr);
+      }
+      return set(key, value);
+    case "SessionStorage":
+      if (!isSessionStorageAvailable()) {
+        throw new Error("SessionStorage is not available");
+      }
+      if (ttl) {
+        sessionStorage.setItem(dataExpireTimeKey, expireDateStr);
+      }
+      return sessionStorage.setItem(key, value);
+    case "Cookies":
+      if (!isCookiesAvailable()) {
+        throw new Error("Cookies are not available");
+      }
+      return createCookie(key, value, !ttl ? void 0 : expireDateStr);
+    case "LocalStorage":
+    default:
+      if (!isLocalStorageAvailable()) {
+        throw new Error("LocalStorage is not available");
+      }
+      if (ttl) {
+        localStorage.setItem(dataExpireTimeKey, expireDateStr);
+      }
+      return localStorage.setItem(key, value);
+  }
+};
+const deleteData = (key) => {
+  var _a2;
+  let hasAvailableStorage = false;
+  if (isSessionStorageAvailable()) {
+    sessionStorage.removeItem(key);
+    hasAvailableStorage = true;
+  }
+  if (isLocalStorageAvailable()) {
+    localStorage.removeItem(key);
+    hasAvailableStorage = true;
+  }
+  if (isCookiesAvailable()) {
+    document.cookie = key + "=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;";
+    hasAvailableStorage = true;
+  }
+  if (isCustomStorageAvailable()) {
+    (_a2 = window.OrangeDAMContentBrowser._customStorage) == null ? void 0 : _a2.delete(key);
+    hasAvailableStorage = true;
+  }
+  if (!hasAvailableStorage) {
+    throw new Error("No storage is available");
+  }
+};
+function tableColumnWidthsKey(siteUrl) {
+  return `tableColumnWidths:${siteUrl.replace(/\/+$/, "")}`;
+}
+const parseTableColumnWidths = (raw) => {
+  if (!raw) return {};
+  try {
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+    const widths = {};
+    for (const [field, width] of Object.entries(parsed)) {
+      if (typeof width === "number" && Number.isFinite(width) && width > 0) {
+        widths[field] = width;
+      }
+    }
+    return widths;
+  } catch (e2) {
+    return {};
+  }
+};
+function readTableColumnWidths(siteUrl) {
+  return __async(this, null, function* () {
+    try {
+      return parseTableColumnWidths(yield getData(tableColumnWidthsKey(siteUrl)));
+    } catch (e2) {
+      return {};
+    }
+  });
+}
+function writeTableColumnWidth(siteUrl, field, width) {
+  return __async(this, null, function* () {
+    const widths = yield readTableColumnWidths(siteUrl);
+    const pixels = width === void 0 ? 0 : Math.round(width);
+    if (pixels > 0) {
+      widths[field] = pixels;
+    } else {
+      delete widths[field];
+    }
+    try {
+      storeData(tableColumnWidthsKey(siteUrl), JSON.stringify(widths));
+    } catch (e2) {
+    }
+    return widths;
+  });
+}
 const styles = i$7`
   :host {
     --cx-button-text-transform: none;
@@ -14503,6 +16342,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--)
@@ -14511,11 +16353,35 @@ 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;
 const INITIAL_FOLDER_TIMEOUT_MS = 3e3;
+function resolvePageSize(view) {
+  switch (view) {
+    case GridView.Large:
+      return 15;
+    case GridView.Small:
+    case TABLE_VIEW:
+      return 30;
+    default:
+      return 20;
+  }
+}
+const NO_HIDDEN_FIELDS = [];
+function findUnreadableColumnFields(columns, unreadableFields) {
+  if (unreadableFields.length === 0) {
+    return NO_HIDDEN_FIELDS;
+  }
+  const unreadable = new Set(unreadableFields.map(toFieldKey));
+  return columns.map((column) => column.field).filter((field) => unreadable.has(toFieldKey(field)));
+}
 let CxContentBrowser = class extends CortexElement {
   constructor() {
     super(...arguments);
@@ -14542,6 +16408,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;
@@ -14550,6 +16417,12 @@ let CxContentBrowser = class extends CortexElement {
     this.ctaTextTransform = "capitalize";
     this.extraFields = [];
     this.defaultGridView = GridView.Medium;
+    this.tableColumns = [];
+    this.tableRowActionPosition = "host-edge";
+    this.tableColumnWidths = {};
+    this.tableWidthQueue = Promise.resolve();
+    this.tableWidthTasks = 0;
+    this.tableWidthsChangedInTable = false;
     this.defaultSortOrderName = "";
     this.defaultSortDirection = "ascending";
     this.defaultSelectedFacets = {};
@@ -14589,28 +16462,98 @@ let CxContentBrowser = class extends CortexElement {
     this.isMobile = false;
     this.defaultPageSize = 10;
     this.initialFolderPending = false;
+    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 [];
+    }
+    const seen = /* @__PURE__ */ new Set();
+    return columns.flatMap((column) => {
+      if (!column || typeof column !== "object") {
+        return [];
+      }
+      const { field } = column;
+      if (typeof field !== "string") {
+        return [];
+      }
+      const trimmed = field.trim();
+      if (trimmed.length === 0 || seen.has(trimmed.toLowerCase())) {
+        return [];
+      }
+      seen.add(trimmed.toLowerCase());
+      return [trimmed === field ? column : __spreadProps(__spreadValues({}, column), { field: trimmed })];
+    });
+  }
+  /**
+   * This reads the configured columns, not the shown ones. The shown columns can change with each
+   * response, and a table view that goes away with them flips the view and its page size. When
+   * Cortex flags each column, the rows stay with only the filler and the CTA column.
+   */
+  get canUseTable() {
+    return this.tableColumnList.length > 0;
+  }
+  /**
+   * Runs a read or a write of the saved widths after the ones queued before it. The table gets the
+   * map of the last task only: an earlier map does not hold the drags and resets that came after it,
+   * and the table already shows them. A map for a site that is no longer the current one is dropped.
+   */
+  queueTableWidthTask(task) {
+    const { baseUrl } = this;
+    const taskNumber = this.tableWidthTasks + 1;
+    this.tableWidthTasks = taskNumber;
+    this.tableWidthQueue = this.tableWidthQueue.then(() => task(baseUrl)).then((widths) => {
+      if (taskNumber === this.tableWidthTasks && baseUrl === this.baseUrl) {
+        this.setTableColumnWidths(widths);
+      }
+    }).catch(() => void 0);
+  }
+  /**
+   * A map with the same entries keeps the old one, so that the table does not lay out its columns
+   * again. After a drag or a reset the table can show widths that the old map does not hold, so the
+   * new map always replaces them.
+   */
+  setTableColumnWidths(widths) {
+    const current = this.tableColumnWidths;
+    const fields = Object.keys(widths);
+    if (this.tableWidthsChangedInTable || fields.length !== Object.keys(current).length || fields.some((field) => current[field] !== widths[field])) {
+      this.tableWidthsChangedInTable = false;
+      this.tableColumnWidths = widths;
     }
   }
+  loadTableColumnWidths() {
+    this.queueTableWidthTask(readTableColumnWidths);
+  }
+  handleBaseUrlChangeForTableWidths() {
+    this.loadTableColumnWidths();
+  }
+  handleTableColumnResize(event) {
+    const { field, reset, width } = event.detail;
+    this.tableWidthsChangedInTable = true;
+    this.queueTableWidthTask((baseUrl) => writeTableColumnWidth(baseUrl, field, reset ? void 0 : width));
+  }
   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.loadTableColumnWidths();
+    this.defaultPageSize = resolvePageSize(this.view);
     this.lastRequest = __spreadProps(__spreadValues({}, this.lastRequest), {
       folderId: this.defaultFolderId,
       isSeeThrough: this.defaultIsSeeThrough,
@@ -14626,6 +16569,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,
         bearerToken: this.bearerToken,
@@ -14677,7 +16621,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,
@@ -14685,6 +16634,7 @@ let CxContentBrowser = class extends CortexElement {
         });
         if (!asset) {
           this.selectedAssetId = void 0;
+          this.busyAssetId = void 0;
           return;
         }
         let isAssetPinned = false;
@@ -14695,8 +16645,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);
       }
     });
   }
@@ -14711,6 +16667,18 @@ 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 });
+    if (!this.initialFolderPending) {
+      void this.fetchAndMergeAssetsController.fetchAndMergeAssets(this.lastRequest);
+    }
+  }
   handleAuthChange() {
     var _a2;
     (_a2 = this.fetchAndMergeAssetsController) == null ? void 0 : _a2.updateAuth(this.token, this.useSession, this.bearerToken);
@@ -14775,17 +16743,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;
     });
   }
@@ -14947,15 +16905,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({
@@ -14965,12 +16925,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],
@@ -14989,6 +16960,9 @@ let CxContentBrowser = class extends CortexElement {
         this.formatDialog.hide();
       } catch (e2) {
         this.formatDialog.setLoadingConfirm(false);
+      } finally {
+        __privateSet2(this, _insertInFlight, false);
+        this.busyAssetId = void 0;
       }
     });
   }
@@ -15067,6 +17041,7 @@ let CxContentBrowser = class extends CortexElement {
       searchError,
       sortOrders,
       totalCount,
+      unreadableFields,
       userInfo
     } = this.fetchAndMergeAssetsController.getData({
       allowedExtensions: this.allowedExtensions,
@@ -15136,6 +17111,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}
@@ -15151,23 +17127,55 @@ 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}
-            ?empty=${!loading && !this.initialFolderPending && !searchError && items.length === 0}
-            ?error=${searchError}
-            ?has-more=${items.length < totalCount}
-            ?loading=${loading || this.initialFolderPending}
-            ?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-retry=${this.handleRetry}
-            @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}
+                .hiddenFields=${findUnreadableColumnFields(this.tableColumnList, unreadableFields)}
+                .savedWidths=${this.tableColumnWidths}
+                .widthScope=${this.baseUrl}
+                row-action-position=${toTableRowActionPosition(this.tableRowActionPosition)}
+                @cx-content-browser-table-column-resize=${this.handleTableColumnResize}
+                ?empty=${!loading && !this.initialFolderPending && !searchError && items.length === 0}
+                ?error=${searchError}
+                cta-text=${this.ctaText}
+                cta-text-transform=${this.ctaTextTransform}
+                ?has-more=${items.length < totalCount}
+                ?loading=${loading || this.initialFolderPending}
+                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-retry=${this.handleRetry}
+                @cx-content-browser-grid-click=${this.handleGridClick}
+              ></cx-content-browser-table>
+            `,
+      () => b`
+              <cx-content-browser-grid
+                .assets=${items}
+                ?empty=${!loading && !this.initialFolderPending && !searchError && items.length === 0}
+                ?error=${searchError}
+                ?has-more=${items.length < totalCount}
+                ?loading=${loading || this.initialFolderPending}
+                ?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-retry=${this.handleRetry}
+                @cx-content-browser-grid-click=${this.handleGridClick}
+              ></cx-content-browser-grid>
+            `
+    )}
         </cx-resize-observer>
         <cx-content-browser-format-dialog
           .availableExtensions=${availableExtensions}
@@ -15180,6 +17188,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}
@@ -15199,6 +17208,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,
@@ -15207,6 +17218,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,
@@ -15301,6 +17313,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);
@@ -15333,6 +17348,38 @@ __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: "table-row-action-position", type: String })
+], CxContentBrowser.prototype, "tableRowActionPosition", 2);
+__decorateClass([
+  r$6()
+], CxContentBrowser.prototype, "tableColumnWidths", 2);
 __decorateClass([
   n$6({ attribute: "default-sort-order-name", type: String })
 ], CxContentBrowser.prototype, "defaultSortOrderName", 2);
@@ -15403,8 +17450,17 @@ __decorateClass([
   r$6()
 ], CxContentBrowser.prototype, "initialFolderPending", 2);
 __decorateClass([
-  watch("lastRequest", { waitUntilFirstUpdate: true })
+  watch("baseUrl", { waitUntilFirstUpdate: true })
+], CxContentBrowser.prototype, "handleBaseUrlChangeForTableWidths", 1);
+__decorateClass([
+  r$6()
+], CxContentBrowser.prototype, "busyAssetId", 2);
+__decorateClass([
+  watch(["lastRequest", "view"], { waitUntilFirstUpdate: true })
 ], CxContentBrowser.prototype, "handleLastRequestChange", 1);
+__decorateClass([
+  watch("tableColumns", { waitUntilFirstUpdate: true })
+], CxContentBrowser.prototype, "handleTableColumnsChange", 1);
 __decorateClass([
   watch(["token", "useSession", "bearerToken"], { waitUntilFirstUpdate: true })
 ], CxContentBrowser.prototype, "handleAuthChange", 1);