@flamingo-stack/openframe-frontend-core 0.0.721 → 0.0.723

package/dist/utils/mobile-app.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-app.d.ts","sourceRoot":"","sources":["../../src/utils/mobile-app.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGzD,uEAAuE;AACvE,eAAO,MAAM,kBAAkB,cAAc,CAAC;AAE9C;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,UAAU,CAAC;AAEjD;;;;;;;;GAQG;AACH,eAAO,MAAM,sBAAsB,8CAAiF,CAAC;AAErH,qGAAqG;AACrG,eAAO,MAAM,4BAA4B,QAGxC,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACpC,cAAc,CAAC,EAAE,MAAM,GACtB,MAAM,GAAG,IAAI,CAKf"}
+{"version":3,"file":"mobile-app.d.ts","sourceRoot":"","sources":["../../src/utils/mobile-app.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGzD,uEAAuE;AACvE,eAAO,MAAM,kBAAkB,cAAc,CAAC;AAE9C;;;;;;;;GAQG;AACH,wBAAgB,qBAAqB,CACnC,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACpC,cAAc,CAAC,EAAE,MAAM,GACtB,MAAM,GAAG,IAAI,CAKf"}

package/dist/utils/mobile-app.js

@@ -24,12 +24,6 @@ function detectVisitorOs(userAgent, hints = {}) {
 
 // src/utils/mobile-app.ts
 var DOWNLOAD_PAGE_PATH = "/download";
-var DOWNLOAD_PAGE_STORE_PARAM = "store";
-var MOBILE_APP_INSTALL_URL = `https://www.flamingo.run${DOWNLOAD_PAGE_PATH}?${DOWNLOAD_PAGE_STORE_PARAM}=1`;
-var MOBILE_APP_INSTALL_HOST_PATH = MOBILE_APP_INSTALL_URL.replace(/^https:\/\/(www\.)?/, "").replace(
-  /\?.*$/,
-  ""
-);
 function resolveMobileStoreUrl(links, userAgent, maxTouchPoints) {
   const os = detectVisitorOs(userAgent, { maxTouchPoints });
   if (os === "ios") return links.appStoreUrl;
@@ -37,4 +31,4 @@ function resolveMobileStoreUrl(links, userAgent, maxTouchPoints) {
   return null;
 }
 
-export { DOWNLOAD_PAGE_PATH, DOWNLOAD_PAGE_STORE_PARAM, MOBILE_APP_INSTALL_HOST_PATH, MOBILE_APP_INSTALL_URL, resolveMobileStoreUrl };
+export { DOWNLOAD_PAGE_PATH, resolveMobileStoreUrl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.721",
+  "version": "0.0.723",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/assets/index.ts

@@ -5,4 +5,3 @@
 export const assets = {} as const;
 export * from './fae-avatar';
 export * from './sad-flamingo';
-export * from './mobile-app-qr';

package/src/components/features/remote-session/remote-access-request-card.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { formatUrlForDisplay } from '../../../utils/format';
 import { ExternalLinkIcon, InfoCircleIcon } from '../../icons-v2-generated';
 import { Button } from '../../ui/button/button';
 import { RemoteSessionOrgLogo } from './remote-session-parts';
@@ -21,11 +22,6 @@ export interface RemoteAccessRequestCardProps {
   onOpenSite?: (url: string) => void;
 }
 
-/** `https://www.techflow.com/` -> `www.techflow.com`. */
-function displaySiteUrl(url: string): string {
-  return url.replace(/^https?:\/\//, '').replace(/\/$/, '');
-}
-
 /** The end user's consent dialog for a remote access request: who is asking, what they get, Decline / Allow Access. */
 export function RemoteAccessRequestCard({
   party,
@@ -47,7 +43,11 @@ export function RemoteAccessRequestCard({
         <RemoteSessionOrgLogo name={organizationName} logoUrl={party.organizationLogoUrl} sizePx={64} />
         <div className="flex min-w-0 flex-1 flex-col">
           <p className="w-full truncate text-ods-text-primary text-h3">{organizationName}</p>
-          {siteUrl && <p className="w-full truncate text-ods-text-secondary text-h4">{displaySiteUrl(siteUrl)}</p>}
+          {siteUrl && (
+            <p className="w-full truncate text-ods-text-secondary text-h4">
+              {formatUrlForDisplay(siteUrl, { keepWww: true })}
+            </p>
+          )}
         </div>
         {openableSite && onOpenSite && (
           <Button variant="outline" size="icon" aria-label="Open website" onClick={() => onOpenSite(openableSite)}>

package/src/components/help-center-pages/download-apps-page.tsx

@@ -8,8 +8,14 @@
  *     when a visitor looks for another system). In a card the installer is THE
  *     action (the other architecture is a quieter button) and each package
  *     manager is one line under it, with its copy button.
- *   - The mobile app: the store badges, and the install QR code beside them.
- *   - `footer`: the host's own last word (the website's "start on the web" card).
+ *   - The mobile app: the store badges, and the install QR code beside them. The
+ *     code and the address it encodes are the server's (`mobile.install`): the
+ *     website's install link, which the server answers with a redirect to the
+ *     phone's store. This page redirects nobody, and with no install link from
+ *     the server it draws no code.
+ *   - `web`: the way in for someone who installs nothing (the website's trial
+ *     signup). The host names the words and the button; the page draws the card,
+ *     in the frame of every other card on it.
  *
  * DATA: all of it is the server's answer (`DownloadsPublic`), read by
  * `useDownloads` against `endpoint` (default `DOWNLOADS_API_PATH`; embedders
@@ -26,7 +32,7 @@
  * The chrome is the canonical `PageShell` + frozen `PageLayout`.
  */
 
-import { useEffect, type ComponentType, type ReactNode } from 'react';
+import type { ComponentType, ReactNode } from 'react';
 import { useRouter } from '../../embed-shims/next-navigation';
 import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard';
 import { useDownloads } from '../../hooks/use-downloads';
@@ -44,7 +50,7 @@ import {
   type MobileAppLinks,
 } from '../../types/downloads';
 import { cn } from '../../utils/cn';
-import { DOWNLOAD_PAGE_STORE_PARAM, MOBILE_APP_INSTALL_HOST_PATH, resolveMobileStoreUrl } from '../../utils/mobile-app';
+import { formatUrlForDisplay } from '../../utils/format';
 import { DESKTOP_OSES, type DesktopOs } from '../../utils/visitor-os';
 import { CommandBox } from '../features/command-box';
 import { AppleLogoIcon } from '../icons-v2-generated/brand-logos/apple-logo-icon';
@@ -78,8 +84,16 @@ export interface DownloadAppsPageProps {
   openStoresInNewTab?: boolean;
   /** Called when a visitor downloads an installer or copies an install command (the host's analytics). */
   onDownloadAction?: (event: DownloadActionEvent) => void;
-  /** The host's own closing block, under the mobile app. */
-  footer?: ReactNode;
+  /** The closing card, under the mobile app: using OpenFrame without installing anything. Default: none. */
+  web?: DownloadAppsWebOption;
+}
+
+/** The "no install" card: the host's words and its own button (the page holds no signup link). */
+export interface DownloadAppsWebOption {
+  title: string;
+  description: string;
+  /** The host's button (the website's trial signup). */
+  action: ReactNode;
 }
 
 const SECTIONS_CLASS = 'flex flex-col gap-[var(--spacing-system-xlf)]';
@@ -206,6 +220,24 @@ function SystemCard({
   );
 }
 
+/** The closing card: one line of what the web offers, and the host's button at the far end. */
+function WebCard({ web }: { web: DownloadAppsWebOption }) {
+  return (
+    <section
+      aria-labelledby="download-web"
+      className={cn(CARD_CLASS, 'content-md:flex-row content-md:items-center content-md:justify-between')}
+    >
+      <div className="flex flex-col gap-[var(--spacing-system-xsf)]">
+        <h2 id="download-web" className="m-0 text-ods-text-primary text-h3">
+          {web.title}
+        </h2>
+        <p className="m-0 text-ods-text-secondary text-h4">{web.description}</p>
+      </div>
+      <div className="shrink-0">{web.action}</div>
+    </section>
+  );
+}
+
 /** A section's cards while the server's answer loads: the same grid and card frame, a button's box in each. */
 function CardsSkeleton({ label }: { label: string }) {
   return (
@@ -248,7 +280,7 @@ export function DownloadAppsPage({
   showDesktop = true,
   openStoresInNewTab = true,
   onDownloadAction,
-  footer,
+  web,
 }: DownloadAppsPageProps) {
   const { data, isLoading, error, reload } = useDownloads({ endpoint, initialData });
   // The page adapts to the server's answer: a section exists only for what it names.
@@ -258,15 +290,6 @@ export function DownloadAppsPage({
   // Until the answer lands, a host that offers the desktop app is titled for it.
   const offersDesktop = showDesktop && (!data || systems.length > 0);
 
-  useEffect(() => {
-    // The install QR code arrives with this parameter: a phone or a tablet goes
-    // straight on to its store. `replace`, so Back returns to whatever sent the
-    // visitor here. Anyone else who opens the page on a phone reads it.
-    if (!mobile || !new URLSearchParams(window.location.search).has(DOWNLOAD_PAGE_STORE_PARAM)) return;
-    const storeUrl = resolveMobileStoreUrl(mobile, navigator.userAgent, navigator.maxTouchPoints);
-    if (storeUrl) window.location.replace(storeUrl);
-  }, [mobile]);
-
   let body: ReactNode;
   if (error && !data) {
     body = <LoadError message="Could not load the downloads" onRetry={reload} />;
@@ -298,7 +321,7 @@ export function DownloadAppsPage({
 
         {mobile && hasMobile && (
           <Section id="download-mobile" title="Mobile app">
-            <div className={CARDS_GRID_CLASS}>
+            <div className={cardsGridClass(mobile.install ? 2 : 1)}>
               <div className={CARD_CLASS}>
                 <CardHeader title={storeCardTitle(mobile)} />
                 <p className="m-0 text-ods-text-secondary text-h4">Get alerts and respond to tickets on the go.</p>
@@ -308,18 +331,19 @@ export function DownloadAppsPage({
                   openInNewTab={openStoresInNewTab}
                 />
               </div>
-              <div className={cn(CARD_CLASS, 'content-md:flex-row content-md:items-center content-md:justify-between')}>
-                <div className="flex flex-col gap-[var(--spacing-system-sf)]">
-                  <CardHeader title="Scan with your phone" />
-                  <p className="m-0 text-ods-text-secondary text-h4">
-                    Point your camera at the code, or open {MOBILE_APP_INSTALL_HOST_PATH} on your phone.
-                  </p>
-                </div>
-                {/* The plate is light on purpose: a QR code is read dark on light. */}
-                <div className="w-fit shrink-0 rounded-md bg-ods-bg-inverted p-[var(--spacing-system-sf)]">
-                  <MobileAppQr className="h-[120px] w-[120px]" />
+              {mobile.install && (
+                <div
+                  className={cn(CARD_CLASS, 'content-md:flex-row content-md:items-center content-md:justify-between')}
+                >
+                  <div className="flex flex-col gap-[var(--spacing-system-sf)]">
+                    <CardHeader title="Scan with your phone" />
+                    <p className="m-0 text-ods-text-secondary text-h4">
+                      Point your camera at the code, or open {formatUrlForDisplay(mobile.install.url)} on your phone.
+                    </p>
+                  </div>
+                  <MobileAppQr install={mobile.install} className="h-[144px] w-[144px] shrink-0" />
                 </div>
-              </div>
+              )}
             </div>
           </Section>
         )}
@@ -336,7 +360,7 @@ export function DownloadAppsPage({
     >
       <div className={SECTIONS_CLASS}>
         {body}
-        {footer}
+        {web && <WebCard web={web} />}
       </div>
     </DownloadAppsChrome>
   );

package/src/components/help-center-pages/index.ts

@@ -22,7 +22,7 @@ export { ProductReleasesListPage, type ProductReleasesListPageProps } from './pr
 export { DeliveryPage, type DeliveryPageProps } from './delivery-page';
 export { OnboardingGuidesCatalogPage, type OnboardingGuidesCatalogPageProps } from './onboarding-guides-catalog-page';
 export { TrustCenterPage, TrustCenterPageSkeleton, type TrustCenterPageProps } from './trust-center-page';
-export { DownloadAppsPage, type DownloadAppsPageProps } from './download-apps-page';
+export { DownloadAppsPage, type DownloadAppsPageProps, type DownloadAppsWebOption } from './download-apps-page';
 
 // Existing full-pages re-exported for a single Help Center import site.
 export { FaqDocumentPage, type FaqDocumentPageProps } from '../faq';

package/src/components/help-center-pages/trust-center-page.tsx

@@ -5,7 +5,7 @@
  *
  * ONE page, not tabs (2026 trust-center practice: buyers skim and Ctrl-F, and a
  * questionnaire needs a deep link per section): hero with the monitoring status
- * and the two actions, then anchored sections in reading order
+ * (with the page's PDF as a quiet link at its end) and the Request access action, then anchored sections in reading order
  * (`TRUST_CENTER_SECTIONS`: AI & data use → compliance → controls → documents →
  * subprocessors → FAQ → questions) with a sticky section rail on desktop
  * (`StickySectionNav` + `useScrollSpy`, the vendor-page / DocViewer pattern).
@@ -34,11 +34,12 @@ import { useSelfFetch } from '../../hooks/use-self-fetch';
 import {
   TRUST_CENTER_API_PATH,
   TRUST_CENTER_CACHE_SECONDS,
-  TRUST_CENTER_SECTIONS,
   TRUST_CENTER_TAGLINE,
   TRUST_CENTER_TITLE,
-  isTrustCenterMonitored,
+  trustCenterMonitoringStatus,
   trustCenterDocumentUrl,
+  trustCenterPdfUrl,
+  visibleTrustCenterSections,
   type TrustCenterControlsPage,
   type TrustCenterPublic,
   type TrustCenterSectionId,
@@ -50,6 +51,7 @@ import { PageShell } from '../layout/article-detail-layout';
 import { PageLayout } from '../layout/page-layout';
 import { StickySectionNav } from '../navigation/sticky-section-nav';
 import { DataAttribution } from '../ui/data-attribution';
+import { DownloadButton } from '../ui/download-button';
 import { EntityImage } from '../ui/entity-image';
 import { LoadError } from '../ui/error-state';
 import { StatusIndicator } from '../ui/status-indicator';
@@ -85,6 +87,13 @@ export interface TrustCenterPageProps {
   subtitle?: string;
   /** The FAQ section's "ask the assistant" card (`FaqSection`'s `ask`): the host states its topic. Absent: no card. */
   ask?: FaqSectionProps['ask'];
+  /**
+   * Host content shown after the trust sections and BEFORE the FAQ (the hub's
+   * own "why we build in the open" sections). The FAQ is the last thing on a
+   * page, so with this the page draws: trust sections, this content at the
+   * page's full width, then the FAQ. Absent: the FAQ closes the sections column.
+   */
+  beforeFaq?: ReactNode;
 }
 
 /** One section's page content. Its `h2` is the `TRUST_CENTER_SECTIONS` label — never a literal here. */
@@ -93,20 +102,6 @@ interface TrustSectionView {
   render: (data: TrustCenterPublic) => ReactNode;
 }
 
-/** Sections that have content, in page order. */
-function visibleSections(data: TrustCenterPublic): Array<(typeof TRUST_CENTER_SECTIONS)[number]> {
-  const hasContent: Record<TrustCenterSectionId, boolean> = {
-    ai: data.aiPractices.length > 0,
-    compliance: data.frameworks.length > 0,
-    controls: data.controlDomains.length > 0,
-    documents: data.documents.length > 0,
-    subprocessors: data.subprocessors.length > 0,
-    faq: data.faqs.length > 0,
-    contact: true,
-  };
-  return TRUST_CENTER_SECTIONS.filter(section => hasContent[section.id]);
-}
-
 /**
  * The Controls section's first answer, from the page's own server data: the
  * first category's controls with no query — exactly what the controls endpoint
@@ -136,12 +131,9 @@ function monitoringStatus(
   hydrated: boolean,
   nowMs: number,
 ): { status: 'success' | 'pending' | 'missing'; label: string } {
-  if (!data.connected) return { status: 'missing', label: 'Live control monitoring is not enabled yet' };
   // Before mount the clock is the server's, so the text claims nothing either way.
-  if (!hydrated) return { status: 'missing', label: 'Checking monitoring status' };
-  return isTrustCenterMonitored(data, nowMs)
-    ? { status: 'success', label: 'Controls continuously monitored' }
-    : { status: 'pending', label: 'Monitoring paused' };
+  if (data.connected && !hydrated) return { status: 'missing', label: 'Checking monitoring status' };
+  return trustCenterMonitoringStatus(data, nowMs);
 }
 
 export function TrustCenterPage({
@@ -152,6 +144,7 @@ export function TrustCenterPage({
   title = TRUST_CENTER_TITLE,
   subtitle = TRUST_CENTER_TAGLINE,
   ask,
+  beforeFaq,
 }: TrustCenterPageProps) {
   const { data, isLoading, error, reload } = useSelfFetch<TrustCenterPublic>(endpoint, {
     initialData,
@@ -180,7 +173,7 @@ export function TrustCenterPage({
     documentTitle: null,
   });
 
-  const sections = useMemo(() => (data ? visibleSections(data) : []), [data]);
+  const sections = useMemo(() => (data ? visibleTrustCenterSections(data) : []), [data]);
   // Anchors. The scroll spy lights the rail from whatever scrolls the sections
   // (the window, or a host shell's `<main overflow-y-auto>` — OpenFrame's
   // `AppLayout`) and keeps the URL's hash on the section in view (`syncHash`;
@@ -205,9 +198,15 @@ export function TrustCenterPage({
   const actions = hasGatedDocuments
     ? [{ label: 'Request access', variant: 'accent' as const, onClick: () => openRequest(null) }]
     : undefined;
+  // The page as a file (the hub's `pdf` route beside `endpoint`). An occasional
+  // utility on a read-only page, so it is NOT a header action (a button there,
+  // and a fixed bar on a phone, are for the page's task: Request access). It is
+  // the shared small `DownloadButton` at the end of the status line under the
+  // title, at every width.
+  const download = <DownloadButton label="Download PDF" href={trustCenterPdfUrl(endpoint)} />;
 
   // Section id → its content. Titles come from `TRUST_CENTER_SECTIONS`; which
-  // sections show comes from `visibleSections` — this map only says what each renders.
+  // sections show comes from `visibleTrustCenterSections` — this map only says what each renders.
   const views: Record<TrustCenterSectionId, TrustSectionView> = {
     ai: {
       lead: TRUST_SECTION_LEADS.ai,
@@ -239,6 +238,11 @@ export function TrustCenterPage({
     contact: { render: () => <ContactSection onContact={() => openRequest(null)} /> },
   };
 
+  // With host content before it, the FAQ leaves the sections column and closes the page (below).
+  const faqSection = sections.find(section => section.id === 'faq');
+  const faqLast = Boolean(beforeFaq) && Boolean(faqSection);
+  const columnSections = faqLast ? sections.filter(section => section.id !== 'faq') : sections;
+
   let body: ReactNode;
   if (error && !data) {
     body = <LoadError message="Could not load the trust center" onRetry={reload} />;
@@ -264,13 +268,16 @@ export function TrustCenterPage({
               }
               source={data.dataSource.name}
               lastUpdated={data.syncedAt}
+              action={download}
             />
-          ) : null}
+          ) : (
+            download
+          )}
         </div>
 
         <div className={TRUST_BODY_GRID_CLASS}>
           <div className={TRUST_SECTIONS_COLUMN_CLASS}>
-            {sections.map(section => {
+            {columnSections.map(section => {
               const view = views[section.id];
               return (
                 <TrustSection key={section.id} id={section.id} title={section.label} lead={view.lead}>
@@ -302,9 +309,23 @@ export function TrustCenterPage({
   }
 
   return (
-    <TrustCenterChrome shell={shell} title={title} subtitle={subtitle} backButton={backButton} actions={actions}>
-      {body}
-    </TrustCenterChrome>
+    <>
+      <TrustCenterChrome shell={shell} title={title} subtitle={subtitle} backButton={backButton} actions={actions}>
+        {body}
+      </TrustCenterChrome>
+      {beforeFaq}
+      {faqLast && faqSection && data ? (
+        // 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.
+        <div className={shell ? 'bg-ods-bg' : undefined}>
+          <div className={shell ? 'page-shell-content mx-auto max-w-[1920px]' : 'page-shell-content'}>
+            <TrustSection id={faqSection.id} title={faqSection.label} lead={views.faq.lead}>
+              {views.faq.render(data)}
+            </TrustSection>
+          </div>
+        </div>
+      ) : null}
+    </>
   );
 }
 

package/src/components/help-center-pages/trust-center-sections.tsx

@@ -72,7 +72,7 @@ const BODY_TEXT = 'text-h6 text-ods-text-secondary';
  * beside the section rail.
  */
 export const TRUST_STATUS_ROW_CLASS =
-  'flex flex-col gap-[var(--spacing-system-xs)] content-md:flex-row content-md:items-center content-md:justify-between';
+  'flex flex-col gap-[var(--spacing-system-xsf)] content-md:flex-row content-md:items-center content-md:justify-between';
 export const TRUST_BODY_GRID_CLASS =
   'grid grid-cols-1 gap-[var(--spacing-system-xl)] content-lg:grid-cols-[minmax(0,1fr)_12rem]';
 export const TRUST_SECTIONS_COLUMN_CLASS = 'flex min-w-0 flex-col gap-[var(--spacing-system-xxl)]';
@@ -675,7 +675,7 @@ export function TrustCenterSkeleton() {
           <TextSkeleton.Body className="w-44" />
         </div>
         {/* `DataAttribution`'s own layout: two lines below `sm`, one row above it. */}
-        <div className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)] content-sm:flex-row content-sm:items-center content-sm:gap-[var(--spacing-system-sf)]">
+        <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)]">
           <div className="flex items-center gap-[var(--spacing-system-xsf)]">
             <UnifiedSkeleton className="size-4 rounded" />
             <TextSkeleton.Body className="w-36" />

package/src/components/ui/data-attribution.tsx

@@ -8,6 +8,20 @@ export interface DataAttributionProps {
   source: string;
   /** ISO instant of the last successful sync, or null when it never ran. */
   lastUpdated: string | null;
+  /** One control at the end of the line: a way to take this data away (a `DownloadButton` for a file of it). */
+  action?: ReactNode;
+}
+
+const LINE_CLASS =
+  'flex shrink-0 flex-col gap-[var(--spacing-system-xsf)] text-ods-text-primary text-h6 content-sm:flex-row content-sm:items-center content-sm:gap-[var(--spacing-system-sf)]';
+const ITEM_CLASS = 'flex items-center gap-[var(--spacing-system-xsf)]';
+
+function Separator() {
+  return (
+    <span className="hidden text-ods-text-secondary content-sm:inline" aria-hidden="true">
+      &middot;
+    </span>
+  );
 }
 
 /**
@@ -16,17 +30,16 @@ export interface DataAttributionProps {
  * UTC (`formatDate`), so a server-rendered page and its hydrated copy print the
  * same text.
  */
-export function DataAttribution({ icon, source, lastUpdated }: DataAttributionProps) {
+export function DataAttribution({ icon, source, lastUpdated, action }: DataAttributionProps) {
   return (
-    <div className="flex shrink-0 flex-col gap-[var(--spacing-system-xxs)] text-ods-text-primary text-h6 content-sm:flex-row content-sm:items-center content-sm:gap-[var(--spacing-system-sf)]">
-      <div className="flex items-center gap-[var(--spacing-system-xsf)]">
+    <div className={LINE_CLASS}>
+      <div className={ITEM_CLASS}>
         {icon}
         <span>Data synced from {source}</span>
       </div>
-      <span className="hidden text-ods-text-secondary content-sm:inline" aria-hidden="true">
-        &middot;
-      </span>
+      <Separator />
       <span className="text-ods-text-secondary">Last updated: {lastUpdated ? formatDate(lastUpdated) : 'Never'}</span>
+      {action ? <div className="flex content-sm:pl-[var(--spacing-system-xs)]">{action}</div> : null}
     </div>
   );
 }

package/src/components/ui/download-button.tsx

@@ -0,0 +1,34 @@
+import { Download01Icon } from '../icons-v2-generated/interface/download-01-icon';
+import { Button, type ButtonProps } from './button/button';
+
+export type DownloadButtonProps = Omit<ButtonProps, 'leftIcon' | 'children'> & {
+  /** What is downloaded, as the button says it ("Download PDF"). */
+  label: string;
+};
+
+/**
+ * THE download button: a regular small `Button` in the quiet `link` variant
+ * (no surface, secondary text like the facts it sits beside, the accent on
+ * hover) with the download glyph, wherever a surface hands the reader a file of
+ * what it shows (the Trust Center's PDF, the margin report's PDF). One look and
+ * one size, so a download reads the same on every page and never louder than
+ * the page's own action.
+ *
+ * With `href` it is a link that opens in a new tab (an attachment downloads
+ * there without leaving the page). With `onClick` the host fetches the file
+ * itself and passes `loading` while it does.
+ */
+export function DownloadButton({ label, variant = 'link', size = 'small', href, ...props }: DownloadButtonProps) {
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      leftIcon={<Download01Icon aria-hidden="true" />}
+      href={href}
+      {...(href ? { openInNewTab: true, prefetch: false } : {})}
+      {...props}
+    >
+      {label}
+    </Button>
+  );
+}

package/src/components/ui/index.ts

@@ -108,6 +108,7 @@ export * from './device-card';
 export * from './device-card-compact';
 export * from './entity-image';
 export * from './data-attribution';
+export * from './download-button';
 export * from './compliance-badge';
 export * from './feature-card';
 export * from './feature-list';

package/src/components/ui/mobile-app-qr.tsx

@@ -1,40 +1,35 @@
-import { MOBILE_APP_QR_PATH, MOBILE_APP_QR_VIEWBOX_SIZE } from '../../assets/mobile-app-qr';
+import type { MobileAppInstallLink } from '../../types/downloads';
 import { cn } from '../../utils/cn';
-import { MOBILE_APP_INSTALL_URL } from '../../utils/mobile-app';
 
 export interface MobileAppQrProps {
+  /** The server's install link: the address and the artwork that encodes it. */
+  install: MobileAppInstallLink;
   /** Sizes the code; the caller owns its footprint. */
   className?: string;
 }
 
 /**
- * The install QR code, drawn inline rather than loaded from `/public` so the
- * modules take their colour from the surface they sit on.
+ * The install QR code, drawn inline: the modules are the ODS accent colour and
+ * the background is transparent, so the code sits directly on whatever surface
+ * it is placed on. The artwork and the address it encodes are the server's
+ * (`MobileAppInstallLink`): this component holds neither.
  *
- * Dark modules, and the caller supplies a light plate. Decoders binarize the
- * image and expect dark-on-light; inverting that is one of the two things they
- * reliably fail on. The other is a missing quiet zone, which is why the 4-module
- * margin is baked into the viewBox — keep it even when the plate is larger.
- *
- * That polarity holds only under the dark theme, where `text-ods-bg` is the dark
- * value and `bg-ods-bg-inverted` the light one; both flip under `.theme-light`.
- * Do not render this inside a light-theme scope: an inverted code is silently
- * unscannable rather than visibly broken.
- *
- * The artwork is the asset `MOBILE_APP_QR_PATH` (`assets/mobile-app-qr`), which
- * encodes {@link MOBILE_APP_INSTALL_URL}; the regeneration note lives there.
+ * On a dark surface that is a light-on-dark code. Phone cameras read both
+ * polarities; what they need is contrast between the accent and the surface, and
+ * the quiet zone, which the server bakes into the viewBox as a transparent
+ * margin. Place it on a plain surface (a card, the page), never over an image
+ * or a surface close to the accent in brightness.
  */
-export function MobileAppQr({ className }: MobileAppQrProps) {
+export function MobileAppQr({ install, className }: MobileAppQrProps) {
   return (
     <svg
-      viewBox={`0 0 ${MOBILE_APP_QR_VIEWBOX_SIZE} ${MOBILE_APP_QR_VIEWBOX_SIZE}`}
-      fill="none"
+      viewBox={`0 0 ${install.qrViewBoxSize} ${install.qrViewBoxSize}`}
       shapeRendering="crispEdges"
       role="img"
-      aria-label={`QR code for ${MOBILE_APP_INSTALL_URL}`}
-      className={cn('h-[120px] w-[120px] text-ods-bg', className)}
+      aria-label={`QR code for ${install.url}`}
+      className={cn('h-[120px] w-[120px] text-ods-accent', className)}
     >
-      <path stroke="currentColor" d={MOBILE_APP_QR_PATH} />
+      <path fill="currentColor" d={install.qrPath} />
     </svg>
   );
 }

package/src/types/downloads.ts

@@ -44,10 +44,27 @@ export interface AppDownload {
   label: string | null;
 }
 
+/**
+ * The install link a phone opens to reach its store, and the QR code that
+ * encodes it. Both are the server's: the link is an address on the website
+ * (answered there with a redirect by device), and the artwork is drawn from it
+ * on the server, so the two can never disagree and the lib names no host.
+ */
+export interface MobileAppInstallLink {
+  /** The absolute address the code encodes. */
+  url: string;
+  /** The side of the artwork's square viewBox, quiet zone included. */
+  qrViewBoxSize: number;
+  /** The dark modules as one SVG path of filled rectangles (`fill` draws them). */
+  qrPath: string;
+}
+
 /** Where the mobile app is installed from. A store the server names no listing for is null, and is not offered. */
 export interface MobileAppLinks {
   appStoreUrl: string | null;
   googlePlayUrl: string | null;
+  /** The install link and its QR code. Absent or null: no code is drawn. */
+  install?: MobileAppInstallLink | null;
 }
 
 /**