@flamingo-stack/openframe-frontend-core 0.0.764 → 0.0.766

package/dist/components/help-center-pages/index.cjs

@@ -6,42 +6,41 @@
 
 
 
-var _chunkIDGOMHTCcjs = require('../../chunk-IDGOMHTC.cjs');
+var _chunkNF3PBWDJcjs = require('../../chunk-NF3PBWDJ.cjs');
 
 
-var _chunkJJ2S6C5Ucjs = require('../../chunk-JJ2S6C5U.cjs');
-require('../../chunk-XFNWHCRM.cjs');
-require('../../chunk-LVKUMVUJ.cjs');
+var _chunkUW7UWUZUcjs = require('../../chunk-UW7UWUZU.cjs');
+require('../../chunk-WO3XO27C.cjs');
 
 
-var _chunkJD7CL2I6cjs = require('../../chunk-JD7CL2I6.cjs');
+var _chunkJGWN6GH5cjs = require('../../chunk-JGWN6GH5.cjs');
 
 
 
-var _chunkNJS7FQRWcjs = require('../../chunk-NJS7FQRW.cjs');
+var _chunkVYYLYZUCcjs = require('../../chunk-VYYLYZUC.cjs');
 
 
-var _chunkRYSNH2VYcjs = require('../../chunk-RYSNH2VY.cjs');
+var _chunkJKQVKWLBcjs = require('../../chunk-JKQVKWLB.cjs');
 
 
-var _chunk7GUWPGB4cjs = require('../../chunk-7GUWPGB4.cjs');
+var _chunkNJMZ3N7Qcjs = require('../../chunk-NJMZ3N7Q.cjs');
 
 
 
-var _chunkLNGR4DXAcjs = require('../../chunk-LNGR4DXA.cjs');
-require('../../chunk-TSJUL6IH.cjs');
+var _chunk7U3ELNGCcjs = require('../../chunk-7U3ELNGC.cjs');
+require('../../chunk-YRFWOJF4.cjs');
 
 
 
-var _chunk3FC6AKEJcjs = require('../../chunk-3FC6AKEJ.cjs');
+var _chunkHNQRY6RUcjs = require('../../chunk-HNQRY6RU.cjs');
 require('../../chunk-HEVW75L3.cjs');
-require('../../chunk-PERN37KO.cjs');
+require('../../chunk-F7R3U5EN.cjs');
 
 
 
-var _chunkFQWBIKF4cjs = require('../../chunk-FQWBIKF4.cjs');
-require('../../chunk-RM6AHNM4.cjs');
-require('../../chunk-5AV5R5RC.cjs');
+var _chunkINI4ADPTcjs = require('../../chunk-INI4ADPT.cjs');
+require('../../chunk-RMUSPTJN.cjs');
+require('../../chunk-7XFVUUVZ.cjs');
 
 
 
@@ -55,13 +54,18 @@ require('../../chunk-5AV5R5RC.cjs');
 
 
 
-var _chunkVL6IXTAIcjs = require('../../chunk-VL6IXTAI.cjs');
-require('../../chunk-ZCU2PYCW.cjs');
-require('../../chunk-GY2JESOC.cjs');
 
 
 
-var _chunk2IFCRPNPcjs = require('../../chunk-2IFCRPNP.cjs');
+
+
+var _chunkVRDHAR3Xcjs = require('../../chunk-VRDHAR3X.cjs');
+require('../../chunk-MPTMT773.cjs');
+require('../../chunk-RB7VLVMD.cjs');
+
+
+
+var _chunkZV45VS6Kcjs = require('../../chunk-ZV45VS6K.cjs');
 require('../../chunk-HQQE74RO.cjs');
 require('../../chunk-DEY6XXGO.cjs');
 
@@ -75,29 +79,29 @@ require('../../chunk-DEY6XXGO.cjs');
 
 
 
-var _chunkXCH7SPGIcjs = require('../../chunk-XCH7SPGI.cjs');
-require('../../chunk-FQSXZC2K.cjs');
+var _chunkXVFM6SJAcjs = require('../../chunk-XVFM6SJA.cjs');
+require('../../chunk-2JRSYWFP.cjs');
 require('../../chunk-24I6RFVU.cjs');
 require('../../chunk-A6P6DHEZ.cjs');
 require('../../chunk-MZ4KBSH7.cjs');
-require('../../chunk-RO72PRQI.cjs');
-require('../../chunk-YUMFVQIN.cjs');
+require('../../chunk-ZRDMGMY7.cjs');
+require('../../chunk-C42WIUH6.cjs');
 
 
-var _chunkT5FRANE6cjs = require('../../chunk-T5FRANE6.cjs');
+var _chunk7VI7TOGIcjs = require('../../chunk-7VI7TOGI.cjs');
 
 
 
-var _chunk74ALTXXCcjs = require('../../chunk-74ALTXXC.cjs');
-require('../../chunk-BIA77I6B.cjs');
-require('../../chunk-3RFQPQ7Z.cjs');
+var _chunkYL6ZB2SRcjs = require('../../chunk-YL6ZB2SR.cjs');
+require('../../chunk-GTONIRJU.cjs');
+require('../../chunk-RNLRS4ID.cjs');
 
 
 
 
 
-var _chunkGZKWF6NHcjs = require('../../chunk-GZKWF6NH.cjs');
-require('../../chunk-EFTUFJS2.cjs');
+var _chunkXZ6DKGT4cjs = require('../../chunk-XZ6DKGT4.cjs');
+require('../../chunk-LELS4XMX.cjs');
 require('../../chunk-ZOZR3QI2.cjs');
 require('../../chunk-OMV5S5PI.cjs');
 require('../../chunk-KHPX3KU4.cjs');
@@ -1907,12 +1911,12 @@ var _chunkXIBCMGBWcjs = require('../../chunk-XIBCMGBW.cjs');
 
 
 
-var _chunkNET74KSQcjs = require('../../chunk-NET74KSQ.cjs');
+var _chunkTZ4GKUO2cjs = require('../../chunk-TZ4GKUO2.cjs');
 
 
 
-var _chunk3RYIF4OWcjs = require('../../chunk-3RYIF4OW.cjs');
-require('../../chunk-SVP6DJFL.cjs');
+var _chunkXXJL5GY3cjs = require('../../chunk-XXJL5GY3.cjs');
+require('../../chunk-57B5RUYD.cjs');
 require('../../chunk-JKX2C3I2.cjs');
 
 
@@ -1922,7 +1926,8 @@ require('../../chunk-SKI6NKOE.cjs');
 require('../../chunk-EWPR7662.cjs');
 
 
-var _chunkNS64LMVEcjs = require('../../chunk-NS64LMVE.cjs');
+var _chunkFZB4RMRKcjs = require('../../chunk-FZB4RMRK.cjs');
+
 
 
 
@@ -1940,13 +1945,13 @@ var _chunkNS64LMVEcjs = require('../../chunk-NS64LMVE.cjs');
 
 
 
-var _chunk22XAPV6Ncjs = require('../../chunk-22XAPV6N.cjs');
-require('../../chunk-OJJ4RL2T.cjs');
-require('../../chunk-63N4FN5V.cjs');
-require('../../chunk-M7YZGRAV.cjs');
+var _chunkDGNBXZXTcjs = require('../../chunk-DGNBXZXT.cjs');
+require('../../chunk-R3JX4MXD.cjs');
+require('../../chunk-SETFUCZA.cjs');
+require('../../chunk-AAECWUNV.cjs');
 
 
-var _chunkEQZXJUYVcjs = require('../../chunk-EQZXJUYV.cjs');
+var _chunkJTSUAHDLcjs = require('../../chunk-JTSUAHDL.cjs');
 require('../../chunk-S5C3OZCO.cjs');
 require('../../chunk-32ASZMTV.cjs');
 require('../../chunk-OOYBIS7D.cjs');
@@ -1955,40 +1960,42 @@ require('../../chunk-6VOOPMP5.cjs');
 require('../../chunk-ORO54HDF.cjs');
 require('../../chunk-RUHKTWGB.cjs');
 require('../../chunk-BLH2SFOO.cjs');
-require('../../chunk-I5MSCD57.cjs');
+require('../../chunk-3LW5TD54.cjs');
 require('../../chunk-ASMNNSUQ.cjs');
 require('../../chunk-CW3ML76U.cjs');
-require('../../chunk-MWLD6NXV.cjs');
+require('../../chunk-VFZFCRAL.cjs');
 
 
-var _chunkR3TWQ3ZJcjs = require('../../chunk-R3TWQ3ZJ.cjs');
+var _chunk5P4TDV7Vcjs = require('../../chunk-5P4TDV7V.cjs');
 require('../../chunk-DGFDBPO7.cjs');
-require('../../chunk-HOTM4UM6.cjs');
+require('../../chunk-E76ONBKF.cjs');
 require('../../chunk-UJ7AXHRZ.cjs');
-require('../../chunk-HTRILBJD.cjs');
-require('../../chunk-K6VWTUCH.cjs');
-require('../../chunk-AKK3EO37.cjs');
+require('../../chunk-YXDHVHB2.cjs');
+require('../../chunk-FL2RMEDX.cjs');
+require('../../chunk-XIFEZ2JT.cjs');
 require('../../chunk-Z74QE57T.cjs');
 require('../../chunk-XZJCBIYR.cjs');
 
 
-var _chunkNO5UJLLQcjs = require('../../chunk-NO5UJLLQ.cjs');
+var _chunkWEANWBJHcjs = require('../../chunk-WEANWBJH.cjs');
+
+
+
+
+
 
 
-var _chunk2QMBXGMQcjs = require('../../chunk-2QMBXGMQ.cjs');
-require('../../chunk-V45KLJQP.cjs');
-require('../../chunk-KHKPLOU4.cjs');
-require('../../chunk-L4UI63K6.cjs');
-require('../../chunk-OF336YWG.cjs');
-require('../../chunk-3LU4UFPS.cjs');
-require('../../chunk-RB6BSE3O.cjs');
 
 
+var _chunkXFRBEXQNcjs = require('../../chunk-XFRBEXQN.cjs');
 
-var _chunkH3RYUTNDcjs = require('../../chunk-H3RYUTND.cjs');
+
+var _chunkTF5D5MNOcjs = require('../../chunk-TF5D5MNO.cjs');
+require('../../chunk-V45KLJQP.cjs');
 
 
-var _chunk3ATAYP36cjs = require('../../chunk-3ATAYP36.cjs');
+var _chunk65VVJSQZcjs = require('../../chunk-65VVJSQZ.cjs');
+require('../../chunk-KHKPLOU4.cjs');
 
 // src/components/help-center-pages/roadmap-page.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -2007,7 +2014,7 @@ function RoadmapPage({
   shell
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunkLNGR4DXAcjs.DevSectionPage,
+    _chunk7U3ELNGCcjs.DevSectionPage,
     {
       sectionKey: "roadmap",
       backButton,
@@ -2017,7 +2024,7 @@ function RoadmapPage({
       shell,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkIDGOMHTCcjs.RoadmapView,
+          _chunkNF3PBWDJcjs.RoadmapView,
           {
             endpoint: roadmapEndpoint,
             initialItems,
@@ -2047,7 +2054,7 @@ function ProductReleasesListPage({
   shell
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunkLNGR4DXAcjs.DevSectionPage,
+    _chunk7U3ELNGCcjs.DevSectionPage,
     {
       sectionKey: "releases",
       backButton,
@@ -2057,7 +2064,7 @@ function ProductReleasesListPage({
       shell,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkIDGOMHTCcjs.ProductReleasesView,
+          _chunkNF3PBWDJcjs.ProductReleasesView,
           {
             endpoint: releasesEndpoint,
             basePath,
@@ -2084,7 +2091,7 @@ function DeliveryPage({
   shell
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunkLNGR4DXAcjs.DevSectionPage,
+    _chunk7U3ELNGCcjs.DevSectionPage,
     {
       sectionKey: "delivery",
       backButton,
@@ -2093,7 +2100,7 @@ function DeliveryPage({
       faq,
       shell,
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIDGOMHTCcjs.DeliveryLists, { completedApiEndpoint: completedEndpoint, inProgressApiEndpoint: inProgressEndpoint }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNF3PBWDJcjs.DeliveryLists, { completedApiEndpoint: completedEndpoint, inProgressApiEndpoint: inProgressEndpoint }),
         belowContent
       ]
     }
@@ -2117,7 +2124,7 @@ function OnboardingGuidesCatalogPage({
   shell
 }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunkLNGR4DXAcjs.DevSectionPage,
+    _chunk7U3ELNGCcjs.DevSectionPage,
     {
       sectionKey: "onboarding",
       backButton,
@@ -2127,7 +2134,7 @@ function OnboardingGuidesCatalogPage({
       shell,
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkFQWBIKF4cjs.OnboardingGuidesCatalogView,
+          _chunkINI4ADPTcjs.OnboardingGuidesCatalogView,
           {
             guidesEndpoint,
             sectionsEndpoint,
@@ -2178,10 +2185,10 @@ function TrustSection({
       id,
       "aria-labelledby": headingId,
       className: "flex flex-col gap-[var(--spacing-system-m)]",
-      style: { scrollMarginTop: _chunk3RYIF4OWcjs.STICKY_HEADER_OFFSET_PX },
+      style: { scrollMarginTop: _chunkXXJL5GY3cjs.STICKY_HEADER_OFFSET_PX },
       children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { id: headingId, className: _chunk22XAPV6Ncjs.SECTION_HEADING_CLASS, children: title }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { id: headingId, className: _chunkDGNBXZXTcjs.SECTION_HEADING_CLASS, children: title }),
           lead ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: BODY_TEXT, children: lead }) : null
         ] }),
         children
@@ -2189,7 +2196,11 @@ function TrustSection({
     }
   );
 }
-function AiSection({ practices }) {
+function AiSection({
+  practices,
+  skeletonRows
+}) {
+  if (_chunkXFRBEXQNcjs.useLoadingScope.call(void 0, )) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TrustPanelSkeleton, { panel: "ai", rows: skeletonRows });
   const rows = practices.map((practice) => ({
     id: practice.label,
     columns: [
@@ -2202,18 +2213,22 @@ function AiSection({ practices }) {
       }
     ]
   }));
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.StackedRowsPanel, { rows });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.StackedRowsPanel, { rows, listItems: true });
 }
-function ComplianceSection({ frameworks }) {
+function ComplianceSection({
+  frameworks,
+  skeletonRows
+}) {
+  if (_chunkXFRBEXQNcjs.useLoadingScope.call(void 0, )) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TrustPanelSkeleton, { panel: "compliance", rows: skeletonRows });
   const rows = frameworks.map((framework) => {
-    const entry = _chunk22XAPV6Ncjs.trustFrameworkMonitoringEntry.call(void 0, framework.monitoring);
+    const entry = _chunkDGNBXZXTcjs.trustFrameworkMonitoringEntry.call(void 0, framework.monitoring);
     const Icon = FRAMEWORK_ICONS[entry.icon];
     return {
       id: framework.id,
       columns: [
         {
           key: "framework",
-          leadingIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.ComplianceLogo, { names: [framework.standard, framework.label], fallback: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { "aria-hidden": "true" }) }),
+          leadingIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.ComplianceLogo, { names: [framework.standard, framework.label], fallback: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { "aria-hidden": "true" }) }),
           value: framework.label,
           label: _nullishCoalesce(framework.description, () => ( void 0)),
           wrap: true
@@ -2222,14 +2237,14 @@ function ComplianceSection({ frameworks }) {
           key: "monitoring",
           width: ACTION_COLUMN,
           align: "right",
-          content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk22XAPV6Ncjs.StatusBadge, { text: _chunk22XAPV6Ncjs.trustFrameworkBadge.call(void 0, framework), colorScheme: entry.color, singleLine: true })
+          content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDGNBXZXTcjs.StatusBadge, { text: _chunkDGNBXZXTcjs.trustFrameworkBadge.call(void 0, framework), colorScheme: entry.color, singleLine: true })
         }
       ]
     };
   });
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.StackedRowsPanel, { rows });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.StackedRowsPanel, { rows, listItems: true });
 }
-var CONTROL_ROW_CLASS = "h-14 content-md:h-20 overflow-hidden";
+var CONTROL_ROW_CLASS = "h-[var(--control-row-h)] overflow-hidden";
 function controlRows(controls) {
   return controls.map((control) => ({
     id: control.id,
@@ -2247,12 +2262,18 @@ function controlRows(controls) {
 function countLabel(n, noun) {
   return `${n} ${noun}${n === 1 ? "" : "s"}`;
 }
-var CONTROLS_LIST_HEIGHT = "h-[calc(5*3.5rem+7px)] content-md:h-[calc(5*5rem+7px)]";
+var CONTROLS_LIST_HEIGHT = "h-[calc(var(--controls-rows)*(var(--control-row-h)+1px)+2px)]";
+var CONTROLS_SECTION_CLASS = "flex flex-col gap-[var(--spacing-system-m)] [--control-row-h:3.5rem] content-md:[--control-row-h:5rem]";
+var CONTROLS_TOOLBAR_CLASS = "flex flex-col gap-[var(--spacing-system-s)] content-md:flex-row content-md:items-center content-md:justify-between";
+var CONTROLS_SEARCH_CLASS = "w-full content-md:w-80";
+var CONTROLS_SEARCH_PLACEHOLDER = "Search controls";
+var CONTROLS_SKELETON_TABS = 4;
 var CONTROLS_SKELETON_ROWS = 5;
+var controlsSectionStyle = { "--controls-rows": CONTROLS_SKELETON_ROWS };
 function controlsTabId(domain) {
   return `domain-${domain.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`;
 }
-function ControlsListSkeleton() {
+function ControlsListSkeleton({ region = true } = {}) {
   const rows = Array.from({ length: CONTROLS_SKELETON_ROWS }, (_, index) => ({
     id: `skeleton-${index}`,
     className: CONTROL_ROW_CLASS,
@@ -2260,22 +2281,26 @@ function ControlsListSkeleton() {
       {
         key: "control",
         content: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full flex-col gap-[var(--spacing-system-xs)]", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.TextSkeleton.Body, { className: "w-2/3" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.TextSkeleton.Caption, { className: "w-full" })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextSkeleton.Body, { className: "w-2/3" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextSkeleton.Caption, { className: "w-full" })
         ] })
       }
     ]
   }));
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.StackedRowsPanel, { rows });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEANWBJHcjs.LoadingRegion, { label: "Loading the controls", announce: region, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.StackedRowsPanel, { rows }) });
 }
 function ControlsSection({ endpoint, seed }) {
+  if (_chunkXFRBEXQNcjs.useLoadingScope.call(void 0, )) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ControlsSectionSkeleton, {});
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ControlsSectionLoaded, { endpoint, seed });
+}
+function ControlsSectionLoaded({ endpoint, seed }) {
   const [domain, setDomain] = _react.useState.call(void 0, seed.domain);
   const [typed, setTyped] = _react.useState.call(void 0, "");
-  const query = _chunk3RYIF4OWcjs.useDebounce.call(void 0, _chunk22XAPV6Ncjs.normalizeTrustControlQuery.call(void 0, typed), _chunk22XAPV6Ncjs.TRUST_CENTER_SEARCH_DEBOUNCE_MS);
-  const url = _chunk22XAPV6Ncjs.trustCenterControlsUrl.call(void 0, endpoint, { domain, query });
-  const seedUrl = _chunk22XAPV6Ncjs.trustCenterControlsUrl.call(void 0, endpoint, { domain: seed.domain, query: "" });
-  const answer = _chunkNS64LMVEcjs.useSelfFetch.call(void 0, url, url === seedUrl ? { initialData: seed } : void 0);
-  const typedQuery = _chunk22XAPV6Ncjs.normalizeTrustControlQuery.call(void 0, typed);
+  const query = _chunkXXJL5GY3cjs.useDebounce.call(void 0, _chunkDGNBXZXTcjs.normalizeTrustControlQuery.call(void 0, typed), _chunkDGNBXZXTcjs.TRUST_CENTER_SEARCH_DEBOUNCE_MS);
+  const url = _chunkDGNBXZXTcjs.trustCenterControlsUrl.call(void 0, endpoint, { domain, query });
+  const seedUrl = _chunkDGNBXZXTcjs.trustCenterControlsUrl.call(void 0, endpoint, { domain: seed.domain, query: "" });
+  const answer = _chunkFZB4RMRKcjs.useSelfFetch.call(void 0, url, url === seedUrl ? { initialData: seed } : void 0);
+  const typedQuery = _chunkDGNBXZXTcjs.normalizeTrustControlQuery.call(void 0, typed);
   const current = answer.data && !answer.isLoading && typedQuery === query && answer.data.query === query ? answer.data : null;
   const [categories, setCategories] = _react.useState.call(void 0, seed.categories);
   if (current && current.categories !== categories) setCategories(current.categories);
@@ -2288,18 +2313,19 @@ function ControlsSection({ endpoint, seed }) {
   const activeTab = activeDomain ? controlsTabId(activeDomain) : "";
   let summary;
   if (answer.error && !current) summary = "Controls are unavailable";
-  else if (!current) summary = typedQuery ? `Searching for \u201C${typedQuery}\u201D\u2026` : "Loading\u2026";
+  else if (!current && typedQuery) summary = `Searching for \u201C${typedQuery}\u201D\u2026`;
+  else if (!current) summary = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ControlsSummarySkeleton, {});
   else if (query)
     summary = `${current.controls.length} in ${current.domain} match \u201C${query}\u201D \xB7 ${countLabel(total, "control")} in total`;
   else summary = `${countLabel(current.controls.length, "passing control")} in ${current.domain}`;
   let body;
   if (answer.error && !current) {
-    body = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.LoadError, { message: "Could not load the controls", onRetry: answer.reload });
+    body = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.LoadError, { message: "Could not load the controls", onRetry: answer.reload });
   } else if (!current) {
     body = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ControlsListSkeleton, {});
   } else if (current.controls.length === 0) {
     body = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkLNGR4DXAcjs.ListEmptyState,
+      _chunk7U3ELNGCcjs.ListEmptyState,
       {
         isFiltered: true,
         filtered: {
@@ -2312,23 +2338,23 @@ function ControlsSection({ endpoint, seed }) {
       }
     );
   } else {
-    body = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.StackedRowsPanel, { rows: controlRows(current.controls) });
+    body = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.StackedRowsPanel, { rows: controlRows(current.controls) });
   }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-m)]", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CONTROLS_SECTION_CLASS, style: controlsSectionStyle, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkVL6IXTAIcjs.TabNavigation,
+      _chunkVRDHAR3Xcjs.TabNavigation,
       {
         tabs,
         activeTab,
         onTabChange: (tabId) => setDomain(_nullishCoalesce(_optionalChain([categories, 'access', _4 => _4.find, 'call', _5 => _5((category) => controlsTabId(category.domain) === tabId), 'optionalAccess', _6 => _6.domain]), () => ( null)))
       }
     ),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-s)] content-md:flex-row content-md:items-center content-md:justify-between", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CONTROLS_TOOLBAR_CLASS, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: BODY_TEXT, "aria-live": "polite", children: summary }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full content-md:w-80", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkVL6IXTAIcjs.SearchInput,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CONTROLS_SEARCH_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkVRDHAR3Xcjs.SearchInput,
         {
-          placeholder: "Search controls",
+          placeholder: CONTROLS_SEARCH_PLACEHOLDER,
           value: typed,
           onChange: setTyped,
           debounceMs: 0,
@@ -2336,14 +2362,16 @@ function ControlsSection({ endpoint, seed }) {
         }
       ) })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk74ALTXXCcjs.ScrollShadow, { className: CONTROLS_LIST_HEIGHT, scrollClassName: "h-full", "data-testid": "controls-list", children: body })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYL6ZB2SRcjs.ScrollShadow, { className: CONTROLS_LIST_HEIGHT, scrollClassName: "h-full", "data-testid": "controls-list", children: body })
   ] });
 }
 function DocumentsSection({
   documents,
   documentUrl,
-  onRequest
+  onRequest,
+  skeletonRows
 }) {
+  if (_chunkXFRBEXQNcjs.useLoadingScope.call(void 0, )) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TrustPanelSkeleton, { panel: "documents", rows: skeletonRows });
   const rows = documents.map((document) => {
     const gated = document.access === "request";
     const href = gated ? null : documentUrl(document);
@@ -2362,7 +2390,7 @@ function DocumentsSection({
           width: ACTION_COLUMN,
           align: "right",
           content: href === null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunk2QMBXGMQcjs.Button,
+            _chunkTF5D5MNOcjs.Button,
             {
               variant: "outline",
               size: "small",
@@ -2370,12 +2398,12 @@ function DocumentsSection({
               "aria-label": `Request ${document.title}`,
               children: "Request"
             }
-          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "outline", size: "small", href, openInNewTab: true, "aria-label": `View ${document.title}`, children: "View" })
+          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { variant: "outline", size: "small", href, openInNewTab: true, "aria-label": `View ${document.title}`, children: "View" })
         }
       ]
     };
   });
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.StackedRowsPanel, { rows });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.StackedRowsPanel, { rows, listItems: true });
 }
 function DocumentRequestModal({
   open,
@@ -2384,14 +2412,14 @@ function DocumentRequestModal({
   onClose
 }) {
   const message = documentTitle ? `I'd like access to: ${documentTitle}.` : "I'd like access to your gated security documentation.";
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkGZKWF6NHcjs.Modal, { isOpen: open, onClose, size: "medium", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZKWF6NHcjs.ModalHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZKWF6NHcjs.ModalTitle, { children: "Request access" }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGZKWF6NHcjs.ModalContent, { children: open ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-m)]", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkXZ6DKGT4cjs.Modal, { isOpen: open, onClose, size: "medium", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZ6DKGT4cjs.ModalHeader, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZ6DKGT4cjs.ModalTitle, { children: "Request access" }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXZ6DKGT4cjs.ModalContent, { children: open ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-m)]", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: BODY_TEXT, children: "We share gated security documents under NDA. Leave your work email and our security team will follow up with access, usually within one business day." }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunk7GUWPGB4cjs.ContactForm,
+        _chunkNJMZ3N7Qcjs.ContactForm,
         {
-          rescue: _chunkNET74KSQcjs.RESCUE_FORMS.trustCenterRequest,
+          rescue: _chunkTZ4GKUO2cjs.RESCUE_FORMS.trustCenterRequest,
           title: "",
           noBorder: true,
           noPadding: true,
@@ -2406,16 +2434,22 @@ function DocumentRequestModal({
     ] }) : null })
   ] });
 }
+var TRUST_GLYPH_SIZE_CLASS = _chunkXFRBEXQNcjs.ICON_SIZE.lg;
 function subprocessorMark({ name, logoUrl }) {
-  if (logoUrl) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2IFCRPNPcjs.EntityImage, { src: logoUrl, alt: name, fallbackText: name, sizeClassName: "size-6" });
-  const logo = _chunkR3TWQ3ZJcjs.brandLogoForName.call(void 0, name);
-  return logo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { role: "img", "aria-label": name, className: "flex", children: _react.createElement.call(void 0, logo, { className: "size-6" }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2IFCRPNPcjs.EntityImage, { alt: name, fallbackText: name, sizeClassName: "size-6" });
+  if (logoUrl)
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZV45VS6Kcjs.EntityImage, { src: logoUrl, alt: name, fallbackText: name, sizeClassName: TRUST_GLYPH_SIZE_CLASS });
+  const logo = _chunk5P4TDV7Vcjs.brandLogoForName.call(void 0, name);
+  return logo ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { role: "img", "aria-label": name, className: "flex", children: _react.createElement.call(void 0, logo, { className: TRUST_GLYPH_SIZE_CLASS }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZV45VS6Kcjs.EntityImage, { alt: name, fallbackText: name, sizeClassName: TRUST_GLYPH_SIZE_CLASS });
 }
 function countryWithFlag(country) {
-  const flag = _chunkT5FRANE6cjs.getFlagFromCountryName.call(void 0, country);
+  const flag = _chunk7VI7TOGIcjs.getFlagFromCountryName.call(void 0, country);
   return flag ? `${flag} ${country}` : country;
 }
-function SubprocessorsSection({ subprocessors }) {
+function SubprocessorsSection({
+  subprocessors,
+  skeletonRows
+}) {
+  if (_chunkXFRBEXQNcjs.useLoadingScope.call(void 0, )) return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TrustPanelSkeleton, { panel: "subprocessors", rows: skeletonRows });
   const anyLocation = subprocessors.some((subprocessor) => subprocessor.location);
   const rows = subprocessors.map((subprocessor) => ({
     id: subprocessor.name,
@@ -2439,11 +2473,11 @@ function SubprocessorsSection({ subprocessors }) {
       ] : []
     ]
   }));
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.StackedRowsPanel, { rows });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.StackedRowsPanel, { rows, listItems: true });
 }
 function ContactSection({ onContact }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkVL6IXTAIcjs.StackedRowsPanel,
+    _chunkVRDHAR3Xcjs.StackedRowsPanel,
     {
       rows: [
         {
@@ -2460,7 +2494,7 @@ function ContactSection({ onContact }) {
               key: "action",
               width: ACTION_COLUMN,
               align: "right",
-              content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2QMBXGMQcjs.Button, { variant: "outline", size: "small", onClick: onContact, children: "Get in touch" })
+              content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTF5D5MNOcjs.Button, { variant: "outline", size: "small", onClick: onContact, children: "Get in touch" })
             }
           ]
         }
@@ -2468,92 +2502,91 @@ function ContactSection({ onContact }) {
     }
   );
 }
-function SkeletonSection({ id, children }) {
-  const label = _nullishCoalesce(_optionalChain([_chunk22XAPV6Ncjs.TRUST_CENTER_SECTIONS, 'access', _7 => _7.find, 'call', _8 => _8((section) => section.id === id), 'optionalAccess', _9 => _9.label]), () => ( id));
-  const lead = TRUST_SECTION_LEADS[id];
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { "aria-hidden": "true", className: "flex flex-col gap-[var(--spacing-system-m)]", children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: _chunk22XAPV6Ncjs.SECTION_HEADING_CLASS, children: label }),
-      lead ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: BODY_TEXT, children: lead }) : null
-    ] }),
-    children
-  ] });
+var TRUST_PANEL_FOLD = { phone: 4, wide: 5 };
+var TRUST_PANEL_SHAPES = {
+  compliance: { mark: "logo", action: "badge", lines: { phone: 4, wide: 1 } },
+  documents: { mark: "glyph", action: "button", lines: { phone: 1, wide: 1 } },
+  subprocessors: { mark: "glyph", action: "none", lines: { phone: 1, wide: 1 } },
+  ai: { mark: "glyph", action: "none", lines: { phone: 6, wide: 2 } }
+};
+function panelFold(rows) {
+  if (rows === void 0) return TRUST_PANEL_FOLD;
+  return typeof rows === "number" ? { phone: rows, wide: rows } : rows;
 }
-function skeletonRows(count, shape) {
-  return Array.from({ length: count }, (_, index) => ({
+function TrustPanelSkeleton({ panel, rows }) {
+  const shape = TRUST_PANEL_SHAPES[panel];
+  const fold = panelFold(rows);
+  const panelRows = Array.from({ length: Math.max(fold.phone, fold.wide) }, (_, index) => ({
     id: `skeleton-${index}`,
+    // A row past a breakpoint's fold is not drawn there; the last row drawn on a phone drops its divider like the
+    // panel's last row (`last:` cannot see a hidden sibling).
+    className: _chunk65VVJSQZcjs.cn.call(void 0, 
+      index >= fold.phone && "hidden content-md:flex",
+      index >= fold.wide && "content-md:hidden",
+      fold.phone < fold.wide && index === fold.phone - 1 && "content-max-md:border-b-0",
+      fold.wide < fold.phone && index === fold.wide - 1 && "content-md:border-b-0"
+    ),
     columns: [
       {
+        // The loaded rows' own cell (leading mark, `text-h4` value over a wrapping `text-h6` label): the panel lays
+        // the bars out exactly as it lays out the text.
         key: "item",
-        content: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-full items-center gap-[var(--spacing-system-s)]", children: [
+        leadingIcon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkXFRBEXQNcjs.UnifiedSkeleton,
+          {
+            className: shape.mark === "logo" ? _chunk65VVJSQZcjs.cn.call(void 0, _chunkVRDHAR3Xcjs.COMPLIANCE_LOGO_SIZE_CLASS, "shrink-0 rounded-full") : _chunk65VVJSQZcjs.cn.call(void 0, TRUST_GLYPH_SIZE_CLASS, "shrink-0 rounded")
+          }
+        ),
+        value: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", className: "w-1/3" }),
+        label: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "inherit", as: "span", lines: shape.lines.phone, className: "w-full content-md:hidden" }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkH3RYUTNDcjs.UnifiedSkeleton,
+            _chunkXFRBEXQNcjs.TextLineSkeleton,
             {
-              className: shape.mark === "logo" ? "size-10 shrink-0 rounded-full" : "size-6 shrink-0 rounded"
+              type: "inherit",
+              as: "span",
+              lines: shape.lines.wide,
+              className: "hidden w-full content-md:block"
             }
-          ),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { variant: "text", className: "h-5 w-1/3 content-md:h-6" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.TextSkeleton.Body, { className: "w-1/2" })
-          ] })
-        ] })
+          )
+        ] }),
+        wrap: true
       },
-      {
-        key: "action",
-        width: ACTION_COLUMN,
-        align: "right",
-        content: shape.action === "badge" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-4 w-28 rounded" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-6 w-16 rounded content-md:h-8" })
-      }
+      ...shape.action === "none" ? [] : [
+        {
+          key: "action",
+          width: ACTION_COLUMN,
+          align: "right",
+          content: shape.action === "badge" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkDGNBXZXTcjs.StatusBadgeSkeleton, {}) : (
+            // The rows' action is a `size="small"` Button: its own size classes.
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.InteractiveSkeleton.Button, { size: "small", className: "w-16" })
+          )
+        }
+      ]
     ]
   }));
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.StackedRowsPanel, { rows: panelRows, listItems: true });
 }
-function ControlsSectionSkeleton() {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-m)]", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xxs)] overflow-hidden", children: [0, 1, 2, 3].map((index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "shrink-0 p-[var(--spacing-system-m)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { variant: "text", className: "h-5 w-36 content-md:h-6" }) }, index)) }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-s)] content-md:flex-row content-md:items-center content-md:justify-between", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.TextSkeleton.Body, { className: "w-48" }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-11 w-full rounded-[6px] content-md:h-12 content-md:w-80" })
-    ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CONTROLS_LIST_HEIGHT, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ControlsListSkeleton, {}) })
-  ] });
-}
-function SectionRailSkeleton() {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sticky", style: { top: _chunk3RYIF4OWcjs.STICKY_HEADER_OFFSET_PX }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "div",
-      {
-        className: "absolute -left-0.5 top-0 w-px bg-ods-border",
-        style: { height: _chunk22XAPV6Ncjs.TRUST_CENTER_SECTIONS.length * 40 }
-      }
-    ),
-    _chunk22XAPV6Ncjs.TRUST_CENTER_SECTIONS.map((section) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-10 items-center px-3 py-2", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.TextSkeleton.Body, { className: "w-24" }) }, section.id))
-  ] }) });
+function ControlsSummarySkeleton() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { as: "span", type: "h6", className: "w-48" });
 }
-function TrustCenterSkeleton({
-  region = true
-} = {}) {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: TRUST_STATUS_ROW_CLASS, "aria-hidden": "true", children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "size-3 rounded-full" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.TextSkeleton.Body, { className: "w-44" })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex shrink-0 flex-col gap-[var(--spacing-system-xsf)] content-sm:flex-row content-sm:items-center content-sm:gap-[var(--spacing-system-sf)]", children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-[var(--spacing-system-xsf)]", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "size-4 rounded" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.TextSkeleton.Body, { className: "w-36" })
-        ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.TextSkeleton.Body, { className: "w-44" })
-      ] })
+function ControlsSectionSkeleton() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CONTROLS_SECTION_CLASS, style: controlsSectionStyle, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.TabNavigationSkeleton, { count: CONTROLS_SKELETON_TABS }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CONTROLS_TOOLBAR_CLASS, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: BODY_TEXT, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ControlsSummarySkeleton, {}) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CONTROLS_SEARCH_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _chunkVRDHAR3Xcjs.SearchInput,
+        {
+          placeholder: CONTROLS_SEARCH_PLACEHOLDER,
+          value: "",
+          onChange: () => void 0,
+          debounceMs: 0,
+          showDropdown: false
+        }
+      ) })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkNO5UJLLQcjs.LoadingRegion, { label: "Loading the trust center", announce: region, className: TRUST_BODY_GRID_CLASS, children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: TRUST_SECTIONS_COLUMN_CLASS, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SkeletonSection, { id: "compliance", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.StackedRowsPanel, { rows: skeletonRows(3, { mark: "logo", action: "badge" }) }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SkeletonSection, { id: "controls", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ControlsSectionSkeleton, {}) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SkeletonSection, { id: "documents", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.StackedRowsPanel, { rows: skeletonRows(2, { mark: "glyph", action: "button" }) }) })
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "aside", { className: "hidden content-lg:block", "aria-hidden": "true", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SectionRailSkeleton, {}) })
-    ] })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CONTROLS_LIST_HEIGHT, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ControlsListSkeleton, { region: false }) })
   ] });
 }
 
@@ -2562,34 +2595,52 @@ function TrustCenterSkeleton({
 function controlsSeed(data) {
   const first = _nullishCoalesce(data.controlDomains[0], () => ( null));
   return {
-    domain: _nullishCoalesce(_optionalChain([first, 'optionalAccess', _10 => _10.domain]), () => ( null)),
+    domain: _nullishCoalesce(_optionalChain([first, 'optionalAccess', _7 => _7.domain]), () => ( null)),
     query: "",
     categories: data.controlDomains.map((domain) => ({ domain: domain.domain, count: domain.controls.length })),
-    controls: _nullishCoalesce(_optionalChain([first, 'optionalAccess', _11 => _11.controls]), () => ( [])),
+    controls: _nullishCoalesce(_optionalChain([first, 'optionalAccess', _8 => _8.controls]), () => ( [])),
     total: data.controlDomains.reduce((sum, domain) => sum + domain.controls.length, 0)
   };
 }
+var EMPTY_TRUST_CENTER = {
+  frameworks: [],
+  controlDomains: [],
+  policies: [],
+  documents: [],
+  subprocessors: [],
+  aiPractices: [],
+  faqs: [],
+  checkedAt: null,
+  syncedAt: null,
+  monitoredWindowMs: 0,
+  connected: true,
+  dataSource: { name: "", logoUrl: null },
+  documentRequestCategory: ""
+};
 var MONITORING_CLOCK_TICK_MS = 6e4;
 function monitoringStatus(data, hydrated, nowMs) {
   if (data.connected && !hydrated) return { status: "missing", label: "Checking monitoring status" };
-  return _chunk22XAPV6Ncjs.trustCenterMonitoringStatus.call(void 0, data, nowMs);
+  return _chunkDGNBXZXTcjs.trustCenterMonitoringStatus.call(void 0, data, nowMs);
 }
 function TrustCenterPage({
-  endpoint = _chunk22XAPV6Ncjs.TRUST_CENTER_API_PATH,
+  endpoint = _chunkDGNBXZXTcjs.TRUST_CENTER_API_PATH,
   initialData,
   shell = true,
   backButton = false,
-  title = _chunk22XAPV6Ncjs.TRUST_CENTER_TITLE,
-  subtitle = _chunk22XAPV6Ncjs.TRUST_CENTER_TAGLINE,
+  title = _chunkDGNBXZXTcjs.TRUST_CENTER_TITLE,
+  subtitle = _chunkDGNBXZXTcjs.TRUST_CENTER_TAGLINE,
   ask,
   beforeFaq,
-  attribution = true
+  attribution = true,
+  faqSkeletonShape,
+  panelSkeletonRows
 }) {
-  const { data, isLoading, error, reload } = _chunkNS64LMVEcjs.useSelfFetch.call(void 0, endpoint, {
+  const scoped = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
+  const { data, isLoading, error, reload } = _chunkFZB4RMRKcjs.useSelfFetch.call(void 0, endpoint, {
     initialData,
-    revalidateOnVisibleAfterMs: _chunk22XAPV6Ncjs.TRUST_CENTER_CACHE_SECONDS * 1e3
+    revalidateOnVisibleAfterMs: _chunkDGNBXZXTcjs.TRUST_CENTER_CACHE_SECONDS * 1e3
   });
-  const hydrated = _chunk74ALTXXCcjs.useIsHydrated.call(void 0, );
+  const hydrated = _chunkYL6ZB2SRcjs.useIsHydrated.call(void 0, );
   const [clock, setClock] = _react.useState.call(void 0, () => ({ data, nowMs: Date.now() }));
   if (clock.data !== data) {
     setClock(() => ({ data, nowMs: Date.now() }));
@@ -2604,27 +2655,32 @@ function TrustCenterPage({
     open: false,
     documentTitle: null
   });
-  const sections = _react.useMemo.call(void 0, () => data ? _chunk22XAPV6Ncjs.visibleTrustCenterSections.call(void 0, data) : [], [data]);
-  const { activeSection, handleSectionClick } = _chunkNJS7FQRWcjs.useScrollSpy.call(void 0, sections, {
+  const loading = scoped || !data && isLoading && !error;
+  const view = loading ? EMPTY_TRUST_CENTER : data;
+  const sections = _react.useMemo.call(void 0, 
+    () => loading ? [..._chunkDGNBXZXTcjs.TRUST_CENTER_SECTIONS] : data ? _chunkDGNBXZXTcjs.visibleTrustCenterSections.call(void 0, data) : [],
+    [loading, data]
+  );
+  const { activeSection, handleSectionClick } = _chunkVYYLYZUCcjs.useScrollSpy.call(void 0, sections, {
     syncHash: true,
-    headerOffset: _chunk3RYIF4OWcjs.STICKY_HEADER_OFFSET_PX
+    headerOffset: _chunkXXJL5GY3cjs.STICKY_HEADER_OFFSET_PX
   });
-  _chunkXCH7SPGIcjs.useScrollToHash.call(void 0, sections.length > 0 ? sections.map((section) => section.id).join("|") : null, {
-    headerOffset: _chunk3RYIF4OWcjs.STICKY_HEADER_OFFSET_PX
+  _chunkXVFM6SJAcjs.useScrollToHash.call(void 0, !loading && sections.length > 0 ? sections.map((section) => section.id).join("|") : null, {
+    headerOffset: _chunkXXJL5GY3cjs.STICKY_HEADER_OFFSET_PX
   });
   const openRequest = _react.useCallback.call(void 0, (documentTitle) => setRequest({ open: true, documentTitle }), []);
   const closeRequest = _react.useCallback.call(void 0, () => setRequest((current) => ({ ...current, open: false })), []);
-  const hasGatedDocuments = _nullishCoalesce(_optionalChain([data, 'optionalAccess', _12 => _12.documents, 'access', _13 => _13.some, 'call', _14 => _14((document) => document.access === "request")]), () => ( false));
+  const hasGatedDocuments = _nullishCoalesce(_optionalChain([view, 'optionalAccess', _9 => _9.documents, 'access', _10 => _10.some, 'call', _11 => _11((document) => document.access === "request")]), () => ( false));
   const actions = hasGatedDocuments ? [{ label: "Request access", variant: "accent", onClick: () => openRequest(null) }] : void 0;
-  const download = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.DownloadButton, { label: "Download PDF", href: _chunk22XAPV6Ncjs.trustCenterPdfUrl.call(void 0, endpoint) });
+  const download = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.DownloadButton, { label: "Download PDF", href: _chunkDGNBXZXTcjs.trustCenterPdfUrl.call(void 0, endpoint) });
   const views = {
     ai: {
       lead: TRUST_SECTION_LEADS.ai,
-      render: (d) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AiSection, { practices: d.aiPractices })
+      render: (d) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AiSection, { practices: d.aiPractices, skeletonRows: _optionalChain([panelSkeletonRows, 'optionalAccess', _12 => _12.ai]) })
     },
     compliance: {
       lead: TRUST_SECTION_LEADS.compliance,
-      render: (d) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComplianceSection, { frameworks: d.frameworks })
+      render: (d) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ComplianceSection, { frameworks: d.frameworks, skeletonRows: _optionalChain([panelSkeletonRows, 'optionalAccess', _13 => _13.compliance]) })
     },
     controls: {
       lead: TRUST_SECTION_LEADS.controls,
@@ -2636,84 +2692,101 @@ function TrustCenterPage({
         DocumentsSection,
         {
           documents: d.documents,
-          documentUrl: (document) => _chunk22XAPV6Ncjs.trustCenterDocumentUrl.call(void 0, endpoint, document),
-          onRequest: openRequest
+          documentUrl: (document) => _chunkDGNBXZXTcjs.trustCenterDocumentUrl.call(void 0, endpoint, document),
+          onRequest: openRequest,
+          skeletonRows: _optionalChain([panelSkeletonRows, 'optionalAccess', _14 => _14.documents])
         }
       )
     },
     subprocessors: {
       lead: TRUST_SECTION_LEADS.subprocessors,
-      render: (d) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubprocessorsSection, { subprocessors: d.subprocessors })
+      render: (d) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubprocessorsSection, { subprocessors: d.subprocessors, skeletonRows: _optionalChain([panelSkeletonRows, 'optionalAccess', _15 => _15.subprocessors]) })
+    },
+    // The FAQ's skeleton props shape only its loading state (in the scope it draws its own skeleton).
+    faq: {
+      render: (d) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHNQRY6RUcjs.FaqSection, { initialFaqs: d.faqs, heading: null, ask, skeletonShape: faqSkeletonShape })
     },
-    faq: { render: (d) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3FC6AKEJcjs.FaqSection, { initialFaqs: d.faqs, heading: null, ask }) },
     contact: { render: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ContactSection, { onContact: () => openRequest(null) }) }
   };
   const faqSection = sections.find((section) => section.id === "faq");
   const faqLast = Boolean(beforeFaq) && Boolean(faqSection);
   const columnSections = faqLast ? sections.filter((section) => section.id !== "faq") : sections;
+  const inLoadingScope = (node, label) => loading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEANWBJHcjs.LoadingRegion, { label, announce: !scoped, className: "contents", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.LoadingScope, { className: "contents", children: node }) }) : node;
   let body;
-  if (error && !data) {
-    body = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.LoadError, { message: "Could not load the trust center", onRetry: reload });
-  } else if (!data) {
-    body = isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TrustCenterSkeleton, {}) : null;
+  if (!loading && error && !data) {
+    body = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.LoadError, { message: "Could not load the trust center", onRetry: reload });
+  } else if (!view) {
+    body = null;
   } else {
-    const status = monitoringStatus(data, hydrated, nowMs);
-    body = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: TRUST_STATUS_ROW_CLASS, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.StatusIndicator, { status: status.status, label: status.label }),
-        data.connected && attribution ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkVL6IXTAIcjs.DataAttribution,
-          {
-            icon: data.dataSource.logoUrl ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunk2IFCRPNPcjs.EntityImage,
-              {
-                src: data.dataSource.logoUrl,
-                alt: data.dataSource.name,
-                fallbackText: data.dataSource.name,
-                sizeClassName: "size-4"
-              }
-            ) : void 0,
-            source: data.dataSource.name,
-            lastUpdated: data.syncedAt,
-            action: download
-          }
-        ) : attribution ? download : null
-      ] }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: TRUST_BODY_GRID_CLASS, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: TRUST_SECTIONS_COLUMN_CLASS, children: columnSections.map((section) => {
-          const view = views[section.id];
-          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TrustSection, { id: section.id, title: section.label, lead: view.lead, children: view.render(data) }, section.id);
-        }) }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "aside", { className: "hidden content-lg:block", "aria-label": "Trust center sections", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sticky", style: { top: _chunk3RYIF4OWcjs.STICKY_HEADER_OFFSET_PX }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkNJS7FQRWcjs.StickySectionNav,
+    const status = monitoringStatus(view, hydrated, nowMs);
+    body = inLoadingScope(
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: TRUST_STATUS_ROW_CLASS, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.StatusIndicator, { status: status.status, label: status.label }),
+          view.connected && attribution ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkVRDHAR3Xcjs.DataAttribution,
+            {
+              icon: view.dataSource.logoUrl ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _chunkZV45VS6Kcjs.EntityImage,
+                {
+                  src: view.dataSource.logoUrl,
+                  alt: view.dataSource.name,
+                  fallbackText: view.dataSource.name,
+                  sizeClassName: "size-4"
+                }
+              ) : void 0,
+              source: view.dataSource.name,
+              lastUpdated: view.syncedAt,
+              action: download
+            }
+          ) : attribution ? download : null
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: TRUST_BODY_GRID_CLASS, children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: TRUST_SECTIONS_COLUMN_CLASS, children: columnSections.map((section) => {
+            const sectionView = views[section.id];
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TrustSection, { id: section.id, title: section.label, lead: sectionView.lead, children: sectionView.render(view) }, section.id);
+          }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "aside", { className: "hidden content-lg:block", "aria-label": "Trust center sections", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sticky", style: { top: _chunkXXJL5GY3cjs.STICKY_HEADER_OFFSET_PX }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkVYYLYZUCcjs.StickySectionNav,
+            {
+              sections: sections.map((section) => ({ id: section.id, label: section.label })),
+              activeSection,
+              onSectionClick: handleSectionClick
+            }
+          ) }) })
+        ] }),
+        loading ? null : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          DocumentRequestModal,
           {
-            sections: sections.map((section) => ({ id: section.id, label: section.label })),
-            activeSection,
-            onSectionClick: handleSectionClick
+            open: request.open,
+            documentTitle: request.documentTitle,
+            category: view.documentRequestCategory,
+            onClose: closeRequest
           }
-        ) }) })
+        )
       ] }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        DocumentRequestModal,
-        {
-          open: request.open,
-          documentTitle: request.documentTitle,
-          category: data.documentRequestCategory,
-          onClose: closeRequest
-        }
-      )
-    ] });
+      "Loading the trust center"
+    );
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TrustCenterChrome, { shell, title, subtitle, backButton, actions, children: body }),
     beforeFaq,
-    faqLast && faqSection && data ? (
+    faqLast && faqSection && view ? (
       // The page's own content box at its FULL width (no section-rail column): a closing FAQ takes the
       // same space the FAQ block takes at the foot of every other page.
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: shell ? "bg-ods-bg" : void 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: shell ? "page-shell-content mx-auto max-w-[1920px]" : "page-shell-content", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TrustSection, { id: faqSection.id, title: faqSection.label, lead: views.faq.lead, children: views.faq.render(data) }) }) })
+      inLoadingScope(
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: shell ? "bg-ods-bg" : void 0, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: shell ? "page-shell-content mx-auto max-w-[1920px]" : "page-shell-content", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TrustSection, { id: faqSection.id, title: faqSection.label, lead: views.faq.lead, children: views.faq.render(view) }) }) }),
+        "Loading the FAQ"
+      )
     ) : null
   ] });
 }
+function TrustCenterPageSkeleton({
+  region: _region,
+  ...chrome
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.LoadingScope, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TrustCenterPage, { ...chrome }) });
+}
 function TrustCenterChrome({
   shell,
   title,
@@ -2725,7 +2798,7 @@ function TrustCenterChrome({
   const router = _chunk7DNL734Scjs.useRouter.call(void 0, );
   const backCfg = backButton === false ? void 0 : { label: _nullishCoalesce(backButton.label, () => ( "Back to home")), onClick: () => router.push(_nullishCoalesce(backButton.href, () => ( "/"))) };
   const inner = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk2IFCRPNPcjs.PageLayout,
+    _chunkZV45VS6Kcjs.PageLayout,
     {
       title,
       subtitle,
@@ -2737,16 +2810,7 @@ function TrustCenterChrome({
       children
     }
   );
-  return shell ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.PageShell, { children: inner }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "page-shell-content", children: inner });
-}
-function TrustCenterPageSkeleton({
-  shell = true,
-  backButton = false,
-  title = _chunk22XAPV6Ncjs.TRUST_CENTER_TITLE,
-  subtitle = _chunk22XAPV6Ncjs.TRUST_CENTER_TAGLINE,
-  region = true
-}) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TrustCenterChrome, { shell, title, subtitle, backButton, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TrustCenterSkeleton, { region }) });
+  return shell ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.PageShell, { children: inner }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "page-shell-content", children: inner });
 }
 
 // src/components/help-center-pages/download-apps-page.tsx
@@ -2759,6 +2823,12 @@ var CARD_CLASS = "flex flex-col gap-[var(--spacing-system-lf)] rounded-md border
 var CARD_HEADER_CLASS = "flex items-center gap-[var(--spacing-system-sf)]";
 var BUTTONS_CLASS = "flex flex-wrap gap-[var(--spacing-system-sf)]";
 var COMMANDS_CLASS = "flex flex-col gap-[var(--spacing-system-mf)]";
+var SCAN_CARD_CLASS = "content-md:flex-row content-md:items-center content-md:justify-between";
+var QR_CLASS = `${_chunkXFRBEXQNcjs.TILE_SIZE.qr} shrink-0`;
+var STORE_BADGES_CLASS = "flex flex-wrap items-center gap-[var(--spacing-system-lf)]";
+var STORE_BADGE_CLASS = "h-12 w-auto";
+var MOBILE_STORE_CARD_LINE = "Get alerts and respond to tickets on the go.";
+var MOBILE_SCAN_TITLE = "Scan with your phone";
 var OS_ICONS = {
   mac: _chunkBFMRU3R6cjs.AppleLogoIcon,
   windows: _chunkRIYAW5XQcjs.WindowsLogoGreyIcon
@@ -2775,7 +2845,7 @@ function CardHeader({
   ] });
 }
 function rowsBySystem(downloads) {
-  return _chunkNET74KSQcjs.DESKTOP_OSES.map((os) => ({
+  return _chunkTZ4GKUO2cjs.DESKTOP_OSES.map((os) => ({
     os,
     installers: downloads.filter((d) => d.os === os && d.kind === "binary" && d.url),
     commands: downloads.filter((d) => d.os === os && d.kind === "command" && d.command)
@@ -2783,31 +2853,31 @@ function rowsBySystem(downloads) {
 }
 function installerLabel(download, siblings) {
   if (download.label) return download.label;
-  const label = `Download for ${_chunkXCH7SPGIcjs.DESKTOP_OS_LABELS[download.os]}`;
-  const architecture = download.architecture ? _chunkXCH7SPGIcjs.DOWNLOAD_ARCHITECTURE_LABELS[download.architecture] : null;
+  const label = `Download for ${_chunkXVFM6SJAcjs.DESKTOP_OS_LABELS[download.os]}`;
+  const architecture = download.architecture ? _chunkXVFM6SJAcjs.DOWNLOAD_ARCHITECTURE_LABELS[download.architecture] : null;
   return siblings > 1 && architecture ? `${label} (${architecture})` : label;
 }
 function SystemCard({
   system,
   onDownloadAction
 }) {
-  const { copy } = _chunkXCH7SPGIcjs.useCopyToClipboard.call(void 0, {
+  const { copy } = _chunkXVFM6SJAcjs.useCopyToClipboard.call(void 0, {
     successTitle: "Copied",
     successDescription: "Paste it into your terminal and press Return."
   });
   const requirements = [...new Set(system.installers.map((d) => d.minOsLabel).filter((l) => !!l))];
-  const report = (action, row) => _optionalChain([onDownloadAction, 'optionalCall', _15 => _15({ action, id: row.id, os: row.os, architecture: row.architecture })]);
+  const report = (action, row) => _optionalChain([onDownloadAction, 'optionalCall', _16 => _16({ action, id: row.id, os: row.os, architecture: row.architecture })]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CARD_CLASS, children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       CardHeader,
       {
         icon: OS_ICONS[system.os],
-        title: _chunkXCH7SPGIcjs.DESKTOP_OS_LABELS[system.os],
+        title: _chunkXVFM6SJAcjs.DESKTOP_OS_LABELS[system.os],
         detail: requirements.length > 0 ? `Requires ${requirements.join(" or ")}` : void 0
       }
     ),
     system.installers.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: BUTTONS_CLASS, children: system.installers.map((download, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunk2QMBXGMQcjs.Button,
+      _chunkTF5D5MNOcjs.Button,
       {
         variant: index === 0 ? "accent" : "outline",
         href: _nullishCoalesce(download.url, () => ( void 0)),
@@ -2820,7 +2890,7 @@ function SystemCard({
     )) }),
     system.commands.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: COMMANDS_CLASS, children: system.commands.map(
       (row) => row.command ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkVL6IXTAIcjs.CommandBox,
+        _chunkVRDHAR3Xcjs.CommandBox,
         {
           title: _nullishCoalesce(row.label, () => ( void 0)),
           command: row.command,
@@ -2842,7 +2912,7 @@ function WebCard({ web }) {
     "section",
     {
       "aria-labelledby": "download-web",
-      className: _chunk3ATAYP36cjs.cn.call(void 0, CARD_CLASS, "content-md:flex-row content-md:items-center content-md:justify-between"),
+      className: _chunk65VVJSQZcjs.cn.call(void 0, CARD_CLASS, "content-md:flex-row content-md:items-center content-md:justify-between"),
       children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-xsf)]", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { id: "download-web", className: "m-0 text-ods-text-primary text-h3", children: web.title }),
@@ -2853,12 +2923,38 @@ function WebCard({ web }) {
     }
   );
 }
-function CardsSkeleton({ label }) {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkNO5UJLLQcjs.LoadingRegion, { label, className: CARDS_GRID_CLASS, children: [0, 1].map((card) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CARD_CLASS, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-6 w-32 rounded" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-12 w-56 rounded-md" }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkH3RYUTNDcjs.UnifiedSkeleton, { className: "h-14 w-full rounded-md" })
-  ] }, card)) });
+function SystemCardsSkeleton() {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cardsGridClass(_chunkTZ4GKUO2cjs.DESKTOP_OSES.length), children: _chunkTZ4GKUO2cjs.DESKTOP_OSES.map((os) => {
+    const Icon = OS_ICONS[os];
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CARD_CLASS, children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CARD_HEADER_CLASS, children: [
+        Icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { className: "h-6 w-6 shrink-0 text-ods-text-secondary" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "m-0 text-ods-text-primary text-h3", children: _chunkXVFM6SJAcjs.DESKTOP_OS_LABELS[os] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h6", className: "ml-auto w-32" })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: BUTTONS_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.InteractiveSkeleton.Button, { size: "default", className: "w-56" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: COMMANDS_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.CommandBoxSkeleton, { lines: 1, showCopy: true }) })
+    ] }, os);
+  }) });
+}
+function MobileCardsSkeleton() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cardsGridClass(2), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CARD_CLASS, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: CARD_HEADER_CLASS, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h3", className: "w-48" }) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "m-0 text-ods-text-secondary text-h4", children: MOBILE_STORE_CARD_LINE }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: STORE_BADGES_CLASS, inert: true, "aria-hidden": true, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.AppStoreBadge, { className: STORE_BADGE_CLASS }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.GooglePlayBadge, { className: STORE_BADGE_CLASS })
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, CARD_CLASS, SCAN_CARD_CLASS), children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-sf)]", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardHeader, { title: MOBILE_SCAN_TITLE }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.TextLineSkeleton, { type: "h4", lines: 2, className: "w-full" })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkXFRBEXQNcjs.UnifiedSkeleton, { className: QR_CLASS })
+    ] })
+  ] });
 }
 function Section({ id, title, children }) {
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "section", { "aria-labelledby": id, className: SECTION_CLASS, children: [
@@ -2871,7 +2967,7 @@ function storeCardTitle(links) {
   return links.appStoreUrl ? "iPhone and iPad" : "Android";
 }
 function DownloadAppsPage({
-  endpoint = _chunkXCH7SPGIcjs.DOWNLOADS_API_PATH,
+  endpoint = _chunkXVFM6SJAcjs.DOWNLOADS_API_PATH,
   initialData,
   shell = true,
   backButton = false,
@@ -2883,28 +2979,32 @@ function DownloadAppsPage({
   web,
   faq
 }) {
-  const { data, isLoading, error, reload } = _chunkXCH7SPGIcjs.useDownloads.call(void 0, { endpoint, initialData });
+  const { data, isLoading, error, reload } = _chunkXVFM6SJAcjs.useDownloads.call(void 0, { endpoint, initialData });
+  const scoped = _chunkXFRBEXQNcjs.useLoadingScope.call(void 0, );
   const systems = showDesktop && data ? rowsBySystem(data.desktop) : [];
-  const mobile = _nullishCoalesce(_optionalChain([data, 'optionalAccess', _16 => _16.mobile]), () => ( null));
+  const mobile = _nullishCoalesce(_optionalChain([data, 'optionalAccess', _17 => _17.mobile]), () => ( null));
   const hasMobile = !!mobile && (!!mobile.appStoreUrl || !!mobile.googlePlayUrl);
   const offersDesktop = showDesktop && (!data || systems.length > 0);
   let body;
-  if (error && !data) {
-    body = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.LoadError, { message: "Could not load the downloads", onRetry: reload });
-  } else if (!data) {
-    body = isLoading ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      showDesktop && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Section, { id: "download-desktop", title: "Desktop app", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardsSkeleton, { label: "Loading the installers" }) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Section, { id: "download-mobile", title: "Mobile app", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardsSkeleton, { label: "Loading the mobile app" }) })
-    ] }) : null;
+  if (error && !data && !scoped) {
+    body = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.LoadError, { message: "Could not load the downloads", onRetry: reload });
+  } else if (!data || scoped) {
+    body = isLoading || scoped ? (
+      // ONE region announces the page's loading; the sections inside it are silent.
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkWEANWBJHcjs.LoadingRegion, { label: "Loading the downloads", className: SECTIONS_CLASS, children: [
+        showDesktop && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Section, { id: "download-desktop", title: "Desktop app", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SystemCardsSkeleton, {}) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Section, { id: "download-mobile", title: "Mobile app", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MobileCardsSkeleton, {}) })
+      ] })
+    ) : null;
   } else {
     body = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       systems.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Section, { id: "download-desktop", title: "Desktop app", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cardsGridClass(systems.length), children: systems.map((system) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SystemCard, { system, onDownloadAction }, system.os)) }) }),
       mobile && hasMobile && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Section, { id: "download-mobile", title: "Mobile app", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cardsGridClass(mobile.install ? 2 : 1), children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: CARD_CLASS, children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardHeader, { title: storeCardTitle(mobile) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "m-0 text-ods-text-secondary text-h4", children: "Get alerts and respond to tickets on the go." }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "m-0 text-ods-text-secondary text-h4", children: MOBILE_STORE_CARD_LINE }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkVL6IXTAIcjs.StoreBadgeLinks,
+            _chunkVRDHAR3Xcjs.StoreBadgeLinks,
             {
               appStoreUrl: mobile.appStoreUrl,
               googlePlayUrl: mobile.googlePlayUrl,
@@ -2912,23 +3012,17 @@ function DownloadAppsPage({
             }
           )
         ] }),
-        mobile.install && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          "div",
-          {
-            className: _chunk3ATAYP36cjs.cn.call(void 0, CARD_CLASS, "content-md:flex-row content-md:items-center content-md:justify-between"),
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-sf)]", children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardHeader, { title: "Scan with your phone" }),
-                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "m-0 text-ods-text-secondary text-h4", children: [
-                  "Point your camera at the code, or open ",
-                  _chunkEQZXJUYVcjs.formatUrlForDisplay.call(void 0, mobile.install.url),
-                  " on your phone."
-                ] })
-              ] }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.MobileAppQr, { install: mobile.install, className: "h-[144px] w-[144px] shrink-0" })
-            ]
-          }
-        )
+        mobile.install && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunk65VVJSQZcjs.cn.call(void 0, CARD_CLASS, SCAN_CARD_CLASS), children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col gap-[var(--spacing-system-sf)]", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CardHeader, { title: MOBILE_SCAN_TITLE }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "m-0 text-ods-text-secondary text-h4", children: [
+              "Point your camera at the code, or open ",
+              _chunkJTSUAHDLcjs.formatUrlForDisplay.call(void 0, mobile.install.url),
+              " on your phone."
+            ] })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.MobileAppQr, { install: mobile.install, className: QR_CLASS })
+        ] })
       ] }) })
     ] });
   }
@@ -2937,14 +3031,14 @@ function DownloadAppsPage({
     {
       shell,
       backButton,
-      title: _nullishCoalesce(title, () => ( (offersDesktop ? _chunkXCH7SPGIcjs.DOWNLOADS_TITLE : _chunkXCH7SPGIcjs.DOWNLOADS_MOBILE_TITLE))),
-      subtitle: _nullishCoalesce(subtitle, () => ( (offersDesktop ? _chunkXCH7SPGIcjs.DOWNLOADS_TAGLINE : _chunkXCH7SPGIcjs.DOWNLOADS_MOBILE_TAGLINE))),
+      title: _nullishCoalesce(title, () => ( (offersDesktop ? _chunkXVFM6SJAcjs.DOWNLOADS_TITLE : _chunkXVFM6SJAcjs.DOWNLOADS_MOBILE_TITLE))),
+      subtitle: _nullishCoalesce(subtitle, () => ( (offersDesktop ? _chunkXVFM6SJAcjs.DOWNLOADS_TAGLINE : _chunkXVFM6SJAcjs.DOWNLOADS_MOBILE_TAGLINE))),
       children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: SECTIONS_CLASS, children: [
           body,
           web && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WebCard, { web })
         ] }),
-        faq && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk3FC6AKEJcjs.FaqSection, { ..._chunk3FC6AKEJcjs.pageFaqProps.call(void 0, faq) })
+        faq && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHNQRY6RUcjs.FaqSection, { ..._chunkHNQRY6RUcjs.pageFaqProps.call(void 0, faq) })
       ]
     }
   );
@@ -2958,8 +3052,8 @@ function DownloadAppsChrome({
 }) {
   const router = _chunk7DNL734Scjs.useRouter.call(void 0, );
   const backCfg = backButton === false ? void 0 : { label: _nullishCoalesce(backButton.label, () => ( "Back to home")), onClick: () => router.push(_nullishCoalesce(backButton.href, () => ( "/"))) };
-  const inner = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2IFCRPNPcjs.PageLayout, { title, subtitle, backButton: backCfg, titleSize: "h1", titleWrap: true, children });
-  return shell ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVL6IXTAIcjs.PageShell, { children: inner }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "page-shell-content", children: inner });
+  const inner = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkZV45VS6Kcjs.PageLayout, { title, subtitle, backButton: backCfg, titleSize: "h1", titleWrap: true, children });
+  return shell ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkVRDHAR3Xcjs.PageShell, { children: inner }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "page-shell-content", children: inner });
 }
 
 
@@ -2975,4 +3069,4 @@ function DownloadAppsChrome({
 
 
 
-exports.DeliveryPage = DeliveryPage; exports.DocsHubPage = _chunkJJ2S6C5Ucjs.DocsHubPage; exports.DownloadAppsPage = DownloadAppsPage; exports.FaqDocumentPage = _chunkJD7CL2I6cjs.FaqDocumentPage; exports.HelpCenterList = _chunkRYSNH2VYcjs.HelpCenterList; exports.LegalDocumentPage = _chunkIDGOMHTCcjs.LegalDocumentPage; exports.OnboardingGuideDetailView = _chunkFQWBIKF4cjs.OnboardingGuideDetailView; exports.OnboardingGuidesCatalogPage = OnboardingGuidesCatalogPage; exports.ProductReleasesListPage = ProductReleasesListPage; exports.ReleaseDetailPage = _chunkIDGOMHTCcjs.ReleaseDetailPage; exports.RoadmapPage = RoadmapPage; exports.TrustCenterPage = TrustCenterPage; exports.TrustCenterPageSkeleton = TrustCenterPageSkeleton;
+exports.DeliveryPage = DeliveryPage; exports.DocsHubPage = _chunkUW7UWUZUcjs.DocsHubPage; exports.DownloadAppsPage = DownloadAppsPage; exports.FaqDocumentPage = _chunkJGWN6GH5cjs.FaqDocumentPage; exports.HelpCenterList = _chunkJKQVKWLBcjs.HelpCenterList; exports.LegalDocumentPage = _chunkNF3PBWDJcjs.LegalDocumentPage; exports.OnboardingGuideDetailView = _chunkINI4ADPTcjs.OnboardingGuideDetailView; exports.OnboardingGuidesCatalogPage = OnboardingGuidesCatalogPage; exports.ProductReleasesListPage = ProductReleasesListPage; exports.ReleaseDetailPage = _chunkNF3PBWDJcjs.ReleaseDetailPage; exports.RoadmapPage = RoadmapPage; exports.TrustCenterPage = TrustCenterPage; exports.TrustCenterPageSkeleton = TrustCenterPageSkeleton;