@flamingo-stack/openframe-frontend-core 0.0.668 → 0.0.669-snapshot.20260927145656

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

@@ -6,43 +6,42 @@ import {
   ProductReleasesView,
   ReleaseDetailPage,
   RoadmapView
-} from "../../chunk-GF6WJ4MG.js";
+} from "../../chunk-5Q6BE56A.js";
 import {
   DocsHubPage,
   useScrollSpy
-} from "../../chunk-YH3BUB4W.js";
-import "../../chunk-IBQT4RTS.js";
+} from "../../chunk-PTZKMV35.js";
+import "../../chunk-O3PPPILJ.js";
 import "../../chunk-7EI3NES7.js";
 import {
   FaqDocumentPage,
   FaqSection
-} from "../../chunk-FOH4MNOZ.js";
+} from "../../chunk-C5CTLTKJ.js";
 import {
   StickySectionNav
-} from "../../chunk-LJOELK7P.js";
+} from "../../chunk-RG7XYHN7.js";
 import {
   HelpCenterList
-} from "../../chunk-E5HUHKHH.js";
+} from "../../chunk-QGHMHW7R.js";
 import {
   ContactForm
-} from "../../chunk-CWK4QHVF.js";
+} from "../../chunk-OABFQXAI.js";
 import {
   DevSectionPage,
   ListEmptyState
-} from "../../chunk-IZ6F7LOE.js";
+} from "../../chunk-IHOSMLBC.js";
 import "../../chunk-5ONM3FHQ.js";
-import "../../chunk-NNYND3I4.js";
+import "../../chunk-XUHLWFEM.js";
 import {
   OnboardingGuideDetailView,
   OnboardingGuidesCatalogView
-} from "../../chunk-5CC33IJ7.js";
-import "../../chunk-DK3BHDUZ.js";
-import "../../chunk-5V3LERVC.js";
+} from "../../chunk-VXRWR56S.js";
+import "../../chunk-INIITSC3.js";
+import "../../chunk-6X66J23J.js";
 import {
   useSelfFetch
 } from "../../chunk-KKSSA4CS.js";
 import {
-  CardSkeletonGrid,
   ComplianceLogo,
   DataAttribution,
   EntityImage,
@@ -54,8 +53,9 @@ import {
   StatusIndicator,
   TabNavigation,
   TextSkeleton,
+  UnifiedSkeleton,
   getFlagFromCountryName
-} from "../../chunk-PHLBRU5P.js";
+} from "../../chunk-P7FKI2UW.js";
 import "../../chunk-L2SLFCXP.js";
 import "../../chunk-BJXDHKUX.js";
 import {
@@ -74,7 +74,7 @@ import {
   ScrollShadow,
   brandLogoForName,
   useIsHydrated
-} from "../../chunk-IJPV7OMA.js";
+} from "../../chunk-EHB5LETA.js";
 import {
   STICKY_HEADER_OFFSET_PX,
   navigateSamePageHash,
@@ -107,7 +107,7 @@ import {
   trustCenterDocumentUrl,
   trustFrameworkBadge,
   trustFrameworkMonitoringEntry
-} from "../../chunk-P6IJXAEE.js";
+} from "../../chunk-DLJGCDHX.js";
 import "../../chunk-MDKCTSDS.js";
 import "../../chunk-LZLT67PE.js";
 import "../../chunk-OTX6XNSA.js";
@@ -232,13 +232,22 @@ import { useCallback, useEffect, useMemo, useState as useState2 } from "react";
 
 // src/components/help-center-pages/trust-center-sections.tsx
 import { createElement, useState } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var FRAMEWORK_ICONS = {
   "shield-check": ShieldCheckIcon,
   "file-shield": FileShieldIcon
 };
-var STACK_CLASSES = "flex flex-col gap-[var(--spacing-system-l)]";
 var BODY_TEXT = "text-h6 text-ods-text-secondary";
+var TRUST_STATUS_ROW_CLASS = "flex flex-col gap-[var(--spacing-system-xs)] md:flex-row md:items-center md:justify-between";
+var TRUST_BODY_GRID_CLASS = "grid grid-cols-1 gap-[var(--spacing-system-xl)] lg:grid-cols-[minmax(0,1fr)_12rem]";
+var TRUST_SECTIONS_COLUMN_CLASS = "flex min-w-0 flex-col gap-[var(--spacing-system-xxl)]";
+var TRUST_SECTION_LEADS = {
+  compliance: "Frameworks we are audited against, and what is next.",
+  controls: "Security controls currently passing in continuous monitoring (via Vanta).",
+  documents: "Public documents open directly. Gated documents are shared under NDA after one short request.",
+  subprocessors: "Third parties that process customer data on our behalf.",
+  ai: "How customer data is handled by the AI in our products."
+};
 var ACTION_COLUMN = "shrink-0 md:w-36";
 function TrustSection({
   id,
@@ -542,15 +551,95 @@ function ContactSection({ onContact }) {
     }
   );
 }
+function SkeletonSection({ id, children }) {
+  const label = TRUST_CENTER_SECTIONS.find((section) => section.id === id)?.label ?? id;
+  const lead = TRUST_SECTION_LEADS[id];
+  return /* @__PURE__ */ jsxs5("section", { "aria-hidden": "true", className: "flex flex-col gap-[var(--spacing-system-m)]", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxs)]", children: [
+      /* @__PURE__ */ jsx5("h2", { className: SECTION_HEADING_CLASS, children: label }),
+      lead ? /* @__PURE__ */ jsx5("p", { className: BODY_TEXT, children: lead }) : null
+    ] }),
+    children
+  ] });
+}
+function skeletonRows(count, shape) {
+  return Array.from({ length: count }, (_, index) => ({
+    id: `skeleton-${index}`,
+    columns: [
+      {
+        key: "item",
+        content: /* @__PURE__ */ jsxs5("div", { className: "flex w-full items-center gap-[var(--spacing-system-s)]", children: [
+          /* @__PURE__ */ jsx5(
+            UnifiedSkeleton,
+            {
+              className: shape.mark === "logo" ? "size-10 shrink-0 rounded-full" : "size-6 shrink-0 rounded"
+            }
+          ),
+          /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-1 flex-col gap-[var(--spacing-system-xxs)]", children: [
+            /* @__PURE__ */ jsx5(UnifiedSkeleton, { variant: "text", className: "h-5 w-1/3 md:h-6" }),
+            /* @__PURE__ */ jsx5(TextSkeleton.Body, { className: "w-1/2" })
+          ] })
+        ] })
+      },
+      {
+        key: "action",
+        width: ACTION_COLUMN,
+        align: "right",
+        content: shape.action === "badge" ? /* @__PURE__ */ jsx5(UnifiedSkeleton, { className: "h-4 w-28 rounded" }) : /* @__PURE__ */ jsx5(UnifiedSkeleton, { className: "h-6 w-16 rounded md:h-8" })
+      }
+    ]
+  }));
+}
+function ControlsSectionSkeleton() {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-[var(--spacing-system-m)]", children: [
+    /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-[var(--spacing-system-xxs)] overflow-hidden", children: [0, 1, 2, 3].map((index) => /* @__PURE__ */ jsx5("div", { className: "shrink-0 p-[var(--spacing-system-m)]", children: /* @__PURE__ */ jsx5(UnifiedSkeleton, { variant: "text", className: "h-5 w-36 md:h-6" }) }, index)) }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-[var(--spacing-system-s)] md:flex-row md:items-center md:justify-between", children: [
+      /* @__PURE__ */ jsx5(TextSkeleton.Body, { className: "w-48" }),
+      /* @__PURE__ */ jsx5(UnifiedSkeleton, { className: "h-11 w-full rounded-[6px] md:h-12 md:w-80" })
+    ] }),
+    /* @__PURE__ */ jsx5("div", { className: CONTROLS_LIST_HEIGHT, children: /* @__PURE__ */ jsx5(ControlsListSkeleton, {}) })
+  ] });
+}
+function SectionRailSkeleton() {
+  return /* @__PURE__ */ jsx5("div", { className: "sticky", style: { top: STICKY_HEADER_OFFSET_PX }, children: /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: "absolute -left-0.5 top-0 w-px bg-ods-border",
+        style: { height: TRUST_CENTER_SECTIONS.length * 40 }
+      }
+    ),
+    TRUST_CENTER_SECTIONS.map((section) => /* @__PURE__ */ jsx5("div", { className: "flex h-10 items-center px-3 py-2", children: /* @__PURE__ */ jsx5(TextSkeleton.Body, { className: "w-24" }) }, section.id))
+  ] }) });
+}
 function TrustCenterSkeleton() {
-  return /* @__PURE__ */ jsxs5("div", { className: STACK_CLASSES, children: [
-    /* @__PURE__ */ jsx5(CardSkeletonGrid, { count: 2, variant: "category" }),
-    /* @__PURE__ */ jsx5(CardSkeletonGrid, { count: 4, variant: "category" })
+  return /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsxs5("div", { className: TRUST_STATUS_ROW_CLASS, "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx5(UnifiedSkeleton, { className: "size-3 rounded-full" }),
+        /* @__PURE__ */ jsx5(TextSkeleton.Body, { className: "w-44" })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 flex-col gap-[var(--spacing-system-xxs)] sm:flex-row sm:items-center sm:gap-[var(--spacing-system-sf)]", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-[var(--spacing-system-xsf)]", children: [
+          /* @__PURE__ */ jsx5(UnifiedSkeleton, { className: "size-4 rounded" }),
+          /* @__PURE__ */ jsx5(TextSkeleton.Body, { className: "w-36" })
+        ] }),
+        /* @__PURE__ */ jsx5(TextSkeleton.Body, { className: "w-44" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: TRUST_BODY_GRID_CLASS, "aria-busy": "true", "aria-label": "Loading the trust center", children: [
+      /* @__PURE__ */ jsxs5("div", { className: TRUST_SECTIONS_COLUMN_CLASS, children: [
+        /* @__PURE__ */ jsx5(SkeletonSection, { id: "compliance", children: /* @__PURE__ */ jsx5(StackedRowsPanel, { rows: skeletonRows(3, { mark: "logo", action: "badge" }) }) }),
+        /* @__PURE__ */ jsx5(SkeletonSection, { id: "controls", children: /* @__PURE__ */ jsx5(ControlsSectionSkeleton, {}) }),
+        /* @__PURE__ */ jsx5(SkeletonSection, { id: "documents", children: /* @__PURE__ */ jsx5(StackedRowsPanel, { rows: skeletonRows(2, { mark: "glyph", action: "button" }) }) })
+      ] }),
+      /* @__PURE__ */ jsx5("aside", { className: "hidden lg:block", "aria-hidden": "true", children: /* @__PURE__ */ jsx5(SectionRailSkeleton, {}) })
+    ] })
   ] });
 }
 
 // src/components/help-center-pages/trust-center-page.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function visibleSections(data) {
   const hasContent = {
     ai: data.aiPractices.length > 0,
@@ -587,7 +676,6 @@ function TrustCenterPage({
   title = TRUST_CENTER_TITLE,
   subtitle = TRUST_CENTER_TAGLINE
 }) {
-  const router = useRouter();
   const { data, isLoading, error, reload } = useSelfFetch(endpoint, {
     initialData,
     revalidateOnVisibleAfterMs: TRUST_CENTER_CACHE_SECONDS * 1e3
@@ -617,24 +705,23 @@ function TrustCenterPage({
   });
   const openRequest = useCallback((documentTitle) => setRequest({ open: true, documentTitle }), []);
   const closeRequest = useCallback(() => setRequest((current) => ({ ...current, open: false })), []);
-  const backCfg = backButton === false ? void 0 : { label: backButton.label ?? "Back to home", onClick: () => router.push(backButton.href ?? "/") };
   const hasGatedDocuments = data?.documents.some((document) => document.access === "request") ?? false;
   const actions = hasGatedDocuments ? [{ label: "Request access", variant: "accent", onClick: () => openRequest(null) }] : void 0;
   const views = {
     ai: {
-      lead: "How customer data is handled by the AI in our products.",
+      lead: TRUST_SECTION_LEADS.ai,
       render: (d) => /* @__PURE__ */ jsx6(AiSection, { practices: d.aiPractices })
     },
     compliance: {
-      lead: "Frameworks we are audited against, and what is next.",
+      lead: TRUST_SECTION_LEADS.compliance,
       render: (d) => /* @__PURE__ */ jsx6(ComplianceSection, { frameworks: d.frameworks })
     },
     controls: {
-      lead: "Security controls currently passing in continuous monitoring (via Vanta).",
+      lead: TRUST_SECTION_LEADS.controls,
       render: (d) => /* @__PURE__ */ jsx6(ControlsSection, { endpoint, seed: controlsSeed(d) })
     },
     documents: {
-      lead: "Public documents open directly. Gated documents are shared under NDA after one short request.",
+      lead: TRUST_SECTION_LEADS.documents,
       render: (d) => /* @__PURE__ */ jsx6(
         DocumentsSection,
         {
@@ -645,7 +732,7 @@ function TrustCenterPage({
       )
     },
     subprocessors: {
-      lead: "Third parties that process customer data on our behalf.",
+      lead: TRUST_SECTION_LEADS.subprocessors,
       render: (d) => /* @__PURE__ */ jsx6(SubprocessorsSection, { subprocessors: d.subprocessors })
     },
     faq: { render: (d) => /* @__PURE__ */ jsx6(FaqSection, { initialFaqs: d.faqs, heading: null }) },
@@ -658,8 +745,8 @@ function TrustCenterPage({
     body = isLoading ? /* @__PURE__ */ jsx6(TrustCenterSkeleton, {}) : null;
   } else {
     const status = monitoringStatus(data, hydrated, nowMs);
-    body = /* @__PURE__ */ jsxs6(Fragment, { children: [
-      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-[var(--spacing-system-xs)] md:flex-row md:items-center md:justify-between", children: [
+    body = /* @__PURE__ */ jsxs6(Fragment2, { children: [
+      /* @__PURE__ */ jsxs6("div", { className: TRUST_STATUS_ROW_CLASS, children: [
         /* @__PURE__ */ jsx6(StatusIndicator, { status: status.status, label: status.label }),
         data.connected ? /* @__PURE__ */ jsx6(
           DataAttribution,
@@ -678,8 +765,8 @@ function TrustCenterPage({
           }
         ) : null
       ] }),
-      /* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-1 gap-[var(--spacing-system-xl)] lg:grid-cols-[minmax(0,1fr)_12rem]", children: [
-        /* @__PURE__ */ jsx6("div", { className: "flex min-w-0 flex-col gap-[var(--spacing-system-xxl)]", children: sections.map((section) => {
+      /* @__PURE__ */ jsxs6("div", { className: TRUST_BODY_GRID_CLASS, children: [
+        /* @__PURE__ */ jsx6("div", { className: TRUST_SECTIONS_COLUMN_CLASS, children: sections.map((section) => {
           const view = views[section.id];
           return /* @__PURE__ */ jsx6(TrustSection, { id: section.id, title: section.label, lead: view.lead, children: view.render(data) }, section.id);
         }) }),
@@ -703,6 +790,18 @@ function TrustCenterPage({
       )
     ] });
   }
+  return /* @__PURE__ */ jsx6(TrustCenterChrome, { shell, title, subtitle, backButton, actions, children: body });
+}
+function TrustCenterChrome({
+  shell,
+  title,
+  subtitle,
+  backButton,
+  actions,
+  children
+}) {
+  const router = useRouter();
+  const backCfg = backButton === false ? void 0 : { label: backButton.label ?? "Back to home", onClick: () => router.push(backButton.href ?? "/") };
   const inner = /* @__PURE__ */ jsx6(
     PageLayout,
     {
@@ -713,11 +812,19 @@ function TrustCenterPage({
       titleWrap: true,
       actions,
       actionsVariant: "primary-buttons",
-      children: body
+      children
     }
   );
   return shell ? /* @__PURE__ */ jsx6(PageShell, { children: inner }) : /* @__PURE__ */ jsx6("div", { className: "page-shell-content", children: inner });
 }
+function TrustCenterPageSkeleton({
+  shell = true,
+  backButton = false,
+  title = TRUST_CENTER_TITLE,
+  subtitle = TRUST_CENTER_TAGLINE
+}) {
+  return /* @__PURE__ */ jsx6(TrustCenterChrome, { shell, title, subtitle, backButton, children: /* @__PURE__ */ jsx6(TrustCenterSkeleton, {}) });
+}
 export {
   DeliveryPage,
   DocsHubPage,
@@ -729,6 +836,7 @@ export {
   ProductReleasesListPage,
   ReleaseDetailPage,
   RoadmapPage,
-  TrustCenterPage
+  TrustCenterPage,
+  TrustCenterPageSkeleton
 };
 //# sourceMappingURL=index.js.map