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

package/dist/utils/index.js

@@ -2874,6 +2874,21 @@ function usesCommandKey(os) {
 function shortcutLabel(os, key) {
   return usesCommandKey(os) ? `\u2318${key}` : `Ctrl ${key}`;
 }
+
+// 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;
+  if (os === "android") return links.googlePlayUrl;
+  return null;
+}
 var PRIORITY_CODES = ["US", "CA", "GB", "AU"];
 var COUNTRY_NAME_ALIASES = {
   // United States
@@ -6452,4 +6467,4 @@ function pathMatchesAny(pathname, patterns) {
   return (patterns ?? []).some((pattern) => matchesPathPattern(pathname, pattern));
 }
 
-export { ACTIVE_ANCHOR_ATTRIBUTE, ANTHROPIC_SUPPORTED_IMAGE_MIME, AUTO_CONTINUATION_DIRECTIVE_PREFIX, BADGE_PALETTE, BITE_ID_RE, BRAND_MARK_SVGS, CHAT_ATTACHMENT_MARKDOWN_PATTERN, CHAT_ATTACHMENT_VIEW_TOKEN_QUERY_PARAM, CHAT_ATTACHMENT_VIEW_URL_PREFIX, CHAT_ATTACHMENT_VIEW_URL_PREFIX_REGEX_ESCAPED, COMPLIANCE_STANDARDS, CONTENT_REF_GROUPS, CSV_CONTENT_TYPE, CUSTOM_ITEM_ID, DEFAULT_CONTENT_SUFFIXES, DEFAULT_FOLDER_INDEX_FILE, DEFAULT_MIN_FILL_MS, DEFAULT_OS_PLATFORM, DELIVERY_TASK_TYPE_OPTIONS, DESIGN_DOC_READINESS, DESIGN_DOC_READINESS_DISPLAY, DESIGN_PALETTE, DESKTOP_OSES, DEV_SECTION_PARAM_KEYS, DOC_TABLE_TYPES, ELAPSED_MS_FIELD, EMBED_PROXY_OPTIONAL_HEADERS, FIRST_TOUCH_ATTRIBUTION_KEY, FORM_DRAFT_STATUSES, FORM_RESCUE_ATTEMPT_FIELD, FORM_RESCUE_DEBOUNCE_MS, FORM_RESCUE_EVENTS, FORM_RESCUE_MAX_FIELDS, FORM_RESCUE_MAX_VALUE_CHARS, FORM_RESCUE_RESUME_FIELD, FORM_RESCUE_RESUME_PARAM, FORM_RESCUE_SKIP_REASONS, FORM_RESCUE_SUBMIT_KEYS, FORM_RESCUE_VALUE_FIELDS, FullscreenSwitchController, GENERIC_EMAIL_DOMAINS, HEADING_EMOJI_RE, HEX_PATTERN, HONEYPOT_FIELD, HUBSPOT_DO_NOT_COLLECT_FORM_PROPS, HUB_HEADER_OFFSET_PX, HUMANITY_SIGNAL_KEYS, ICON_REGISTRY, IMAGE_FILE_ACCEPT, LOCATION_HASH_SYNC_EVENT, MAX_MONTH_OFFSET, MEDIA_FILE_ACCEPT, MEDIA_TYPE, NO_CLIENT_CACHE, ODS_SPACING_PROPS, ODS_SPACING_TOKENS, ODS_SPACING_TOKEN_PATTERN, ODS_STEM_CLASSES, ODS_STEM_TOKENS, OPENFRAME_CLASSIFICATIONS, OPENFRAME_DEV_SECTIONS, OS_PLATFORMS, PAGE_PARAM_LIMITS, PLATFORM_BRAND, PLATFORM_SURFACE, PLATFORM_THEME, PLAY_ICON_PATH, PROGRAM_META_RENDERERS, RESCUE_FORMS, ROADMAP_STATUS_OPTIONS, SCHEDULING_SLUG_SHAPE, SCROLL_ANCHOR, SCROLL_ANCHOR_WIRE_KEY, SECTION_HERO_ICON_CLASS, SEO_DESCRIPTION_MAX_LENGTH, SEO_TITLE_MAX_LENGTH, SOCIAL_PLATFORM_ALIASES, SOCIAL_PLATFORM_ALT_HOSTS, SOURCE_ICON_NAMES, SOURCE_LABELS_BY_TABLE, STICKY_HEADER_OFFSET_PX, TAILWIND_STEP_TO_ODS_TOKEN, TICKET_OPEN_PARAM, TICKET_STATUS_OPTIONS, TRIAL_DAYS, TRIAL_LABELS, VENDOR_CLASSIFICATIONS, VIEWER_TIMEZONE, WALKTHROUGH_OPEN_QUERY_PARAM, WALKTHROUGH_VIDEO_DISMISS_KEY, analyzeImageColor, announcementDismissCookieName, applyProxyAuth, brandMarkDataUri, buildAutoContinuationDirective, buildChatAttachmentViewUrl, buildDefaultHref, buildDiscussAddendum, buildDocumentTree, buildGroupedSource, buildListUrl, buildOgPlaceholderUrl, buildSuggestionUrl, buildTicketOpenHref, canonicalContentRefType, captureFirstTouchAttribution, captureFormRescueEvent, clamp, clampPageToTotal, classifySocialHost, cleanEmailDomain, clearAnnouncementDismissals, clearDismissCookie, clearEmbedProxyAuth, clearFirstTouchAttribution, clearLegacyAnnouncementCache, clearWalkthroughDismissal, clickupTaskUrl, cn, complianceStandardForName, consumeAccessCode, copyrightLine, createFenceTracker, createHeadingIdDeduper, createSearchParams, createSseSubscription, createUTCTimestamp, csvEscape, deepClone, defineParamSchema, defineRescueForm, delay, deriveActiveColor, deriveHoverColor, designDocReadiness, desktopOsOf, detectDesktopOs, detectVisitorOs, devSectionAnchorId, dismissAnnouncement, dismissWalkthrough, embedAuthedFetch, ensureBiteIds, errorMessage, escapeMarkdownInline, escapeRegExp, evaluateHumanitySignals, eventAudience, extractCardItems, extractDomainFromEmail, extractDominantColor, extractEntityIdFilter, extractHumanitySignals, extractImageEdgeColorAsync, extractItemId, extractItems, extractSections, faqItemAnchor, faqSectionSlug, fetchPriorityProp, fileContentKey, fileMediaType, filledRescueFields, findAnchorElementByNormalizedId, findDocNodeByPath, findHoneypotCopySource, firstParamValue, flattenAssistantContent, formatAbbreviatedNumber, formatAbsoluteDate, formatBioText, formatBytes, formatBytesShort, formatChatAttachmentMarkdownForBubble, formatCitationIndices, formatClassification, formatCompactMetric, formatCompletionLabel, formatCompletionLabelWithBlockers, formatCurrency, formatDate, formatDateRange, formatDateShort, formatDateSlashUTC, formatDateTime, formatDateTimeAt, formatDateTimeYmd, formatDateUTC, formatDateWithTimezone, formatDocName, formatDuration, formatDurationCompact, formatDurationFromMs, formatDurationFromRange, formatDurationMMSS, formatEntryMonthUTC, formatFileSize, formatLargeNumber, formatLegalDate, formatNumber, formatPercent, formatPhoneE164, formatPrice, formatPricingModel, formatProgramDate, formatProgramDateRange, formatProgramTimeRange, formatRelativeTime, formatReleaseDate, formatSingularLookupInvocation, formatTicketFullTimestamp, formatTicketRelativeTime, formatTimeWithTimezone, formatUnderscoreText, formatWebinarTimeMeta, formatWholeDollars, fromKeys, generateBiteId, generateImageSizes, generateRandomString, getAllPlatformBaseDomains, getBestContrastColor, getConfidenceBgClass, getConfidenceBorderClass, getConfidenceColorClass, getConfidenceLabel, getConfidenceLevel, getConfidenceTextClass, getContentRefLabel, getContentRefLabelOrTitleCase, getContrastRatio, getCountryByCode, getCountryByName, getCountryPhoneData, getCurrentPlatform, getDefaultColorForPlatform, getDefaultIconForPlatform, getDeploymentUrl, getDetailedTimeDifference, getDocAncestorNodeIds, getDocSourceDefaultPath, getDynamicIcon, getEmbedProxyAuth, getFirstTouchAttribution, getFlagFromCountryName, getIconComponent, getInitialExpandedNodeIds, getOSIcon, getOSLabel, getOSPlatformId, getOSTypeDefinition, getPersistedProxyEmail, getPlatformAccentColor, getPlatformBackgroundVarName, getPlatformBrand, getPlatformBrandClasses, getPlatformColor, getPlatformConfig, getPlatformDescription, getPlatformDisplayName, getPlatformIcon, getPlatformIconComponent, getPlatformIconComponent as getPlatformLogo, getPlatformProductionUrl, getPlatformSecondaryColor, getPlatformShortName, getPlatformSlogan, getPlatformTextVarName, getPlatformUrl, getProxiedImageUrl, getReadableTextColor, getRequestOrigin, getRescueForm, getSemanticColor, getShellIcon, getShellLabel, getSlackCommunityJoinUrl, getSmallPlatformIcon, getSourceIconName, getSourceLabel, getStatusColorScheme, getTaskTypeLabel, getToolLabel, getToolTypeAliases, getTrendColors, groupSourcesByTable, groupsByTable, hasGenericEmailDomain, hexToRgb2 as hexToRgb, hostMatches, isAnnouncementDismissed, isBadgePaletteKey, isBlankLine, isCrossOriginUrl, isDismissedCookieValue, isExcludedRescueField, isFigmaSlidesUrl, isFormAttemptId, isGenericDomain, isGenericWebsiteDomain, isHumanitySignalKey, isImageMedia, isListedSchedulingName, isLocalUrl, isOSPlatform, isOpenFrameClassification, isOrderedRange, isPublishableMediaType, isRescueEmail, isResumeToken, isScrollSyncedHash, isToday, isValidEmailDomain, isValidPathPattern, isValidSchedulingSlug, isValidToolType, isVendorClassification, isVideoMedia, isWalkthroughDismissed, isWithinMinutes, listRescueForms, makeComposeContentUrl, markdownToPlainText, matchBiteElement, matchesPathPattern, mediaNameKey, nameInitials, navigateSamePageHash, normalizeAnchorId, normalizeDocPath, normalizeDomain, normalizeHashFragment, normalizeIconKey, normalizeOSType, normalizeSchedulingSlug, normalizeSocialPlatform, normalizeToolType, normalizeToolTypeWithFallback, openInNewTab, orderContentRefTypes, pageCount, parseAttributionFromUrl, parseFaqHash, parseFormDraftSaveRequest, parseSchedulingLinkName, parseSchemaParams, parseScrollAnchor, parseWireCommandOverride, partitionMediaByType, pathMatchesAny, pathToNodeId, personFirstName, personInitials, pick, pickBadgePaletteColor, pickReadableTextColor, pickSocialLink, platformAccentToken, platformAccentVarName, platformColors, platformDescriptions, platformDisplayNames, platformHexColors, platformIconNames, platformIcons, platformSecondaryToken, platformSecondaryVarName, platformShortNames, platformSlogans, positiveInt, programDateInstant, programMetaFormatters, programMetaLine, programStr, readDismissCookie, readLeadingDecisionFrame, recordCountLabel, releaseTypeToBadgeColor, replaceLocationHash, rescueCompletionPct, resolveContentFetchPath, resolveRedirectTarget, resolveReleaseCover, rgbToHex, sanitizeLandingUrl, sanitizeRescueFieldName, sanitizeRescueValues, sanitizeTitleForChat, scanHeadings, schedulingAudienceKey, scrollElementIntoView, serializeJsonLd, serializeSchemaParams, setEmbedAuthAdapter, setEmbedProxyAuth, shortcutLabel, shouldIncludeInUrl, shouldProxyImage, singleInitial, skipsImageOptimizer, slugifyHeadingBase, slugifyHeadingText, socialPlatformHosts, sortTreeChildren, splitCsvEnv, stripChatAttachmentMarkdown, stripFolderIndexFromPath, stripHeadingEmojis, stripHtml, stripInlineMarkdown, switchPlatformTheme, titleCaseFromSlug, toClaudeEmbedUrl, toClaudeMirrorPath, toCsv, toDocSlug, toFigmaEmbedUrl, toFigmaOriginalUrl, toGoogleSheetsEmbedUrl, toGoogleSheetsOriginalUrl, toToolLabel, transformPlatformConfigsToOptions, truncateString, urlPathLooksLikeSvg, usePlatformColors, usesCommandKey, validateAccessCode, validateAndConsumeAccessCode, validateEmailDomain, validateEmailDomainList, validatePhoneNumber, walkthroughDismissCookieName, webinarTiming, withFirstTouchAttribution, withQuery, withWalkthroughOpenParam, writeDismissCookie };
+export { ACTIVE_ANCHOR_ATTRIBUTE, ANTHROPIC_SUPPORTED_IMAGE_MIME, AUTO_CONTINUATION_DIRECTIVE_PREFIX, BADGE_PALETTE, BITE_ID_RE, BRAND_MARK_SVGS, CHAT_ATTACHMENT_MARKDOWN_PATTERN, CHAT_ATTACHMENT_VIEW_TOKEN_QUERY_PARAM, CHAT_ATTACHMENT_VIEW_URL_PREFIX, CHAT_ATTACHMENT_VIEW_URL_PREFIX_REGEX_ESCAPED, COMPLIANCE_STANDARDS, CONTENT_REF_GROUPS, CSV_CONTENT_TYPE, CUSTOM_ITEM_ID, DEFAULT_CONTENT_SUFFIXES, DEFAULT_FOLDER_INDEX_FILE, DEFAULT_MIN_FILL_MS, DEFAULT_OS_PLATFORM, DELIVERY_TASK_TYPE_OPTIONS, DESIGN_DOC_READINESS, DESIGN_DOC_READINESS_DISPLAY, DESIGN_PALETTE, DESKTOP_OSES, DEV_SECTION_PARAM_KEYS, DOC_TABLE_TYPES, DOWNLOAD_PAGE_PATH, DOWNLOAD_PAGE_STORE_PARAM, ELAPSED_MS_FIELD, EMBED_PROXY_OPTIONAL_HEADERS, FIRST_TOUCH_ATTRIBUTION_KEY, FORM_DRAFT_STATUSES, FORM_RESCUE_ATTEMPT_FIELD, FORM_RESCUE_DEBOUNCE_MS, FORM_RESCUE_EVENTS, FORM_RESCUE_MAX_FIELDS, FORM_RESCUE_MAX_VALUE_CHARS, FORM_RESCUE_RESUME_FIELD, FORM_RESCUE_RESUME_PARAM, FORM_RESCUE_SKIP_REASONS, FORM_RESCUE_SUBMIT_KEYS, FORM_RESCUE_VALUE_FIELDS, FullscreenSwitchController, GENERIC_EMAIL_DOMAINS, HEADING_EMOJI_RE, HEX_PATTERN, HONEYPOT_FIELD, HUBSPOT_DO_NOT_COLLECT_FORM_PROPS, HUB_HEADER_OFFSET_PX, HUMANITY_SIGNAL_KEYS, ICON_REGISTRY, IMAGE_FILE_ACCEPT, LOCATION_HASH_SYNC_EVENT, MAX_MONTH_OFFSET, MEDIA_FILE_ACCEPT, MEDIA_TYPE, MOBILE_APP_INSTALL_HOST_PATH, MOBILE_APP_INSTALL_URL, NO_CLIENT_CACHE, ODS_SPACING_PROPS, ODS_SPACING_TOKENS, ODS_SPACING_TOKEN_PATTERN, ODS_STEM_CLASSES, ODS_STEM_TOKENS, OPENFRAME_CLASSIFICATIONS, OPENFRAME_DEV_SECTIONS, OS_PLATFORMS, PAGE_PARAM_LIMITS, PLATFORM_BRAND, PLATFORM_SURFACE, PLATFORM_THEME, PLAY_ICON_PATH, PROGRAM_META_RENDERERS, RESCUE_FORMS, ROADMAP_STATUS_OPTIONS, SCHEDULING_SLUG_SHAPE, SCROLL_ANCHOR, SCROLL_ANCHOR_WIRE_KEY, SECTION_HERO_ICON_CLASS, SEO_DESCRIPTION_MAX_LENGTH, SEO_TITLE_MAX_LENGTH, SOCIAL_PLATFORM_ALIASES, SOCIAL_PLATFORM_ALT_HOSTS, SOURCE_ICON_NAMES, SOURCE_LABELS_BY_TABLE, STICKY_HEADER_OFFSET_PX, TAILWIND_STEP_TO_ODS_TOKEN, TICKET_OPEN_PARAM, TICKET_STATUS_OPTIONS, TRIAL_DAYS, TRIAL_LABELS, VENDOR_CLASSIFICATIONS, VIEWER_TIMEZONE, WALKTHROUGH_OPEN_QUERY_PARAM, WALKTHROUGH_VIDEO_DISMISS_KEY, analyzeImageColor, announcementDismissCookieName, applyProxyAuth, brandMarkDataUri, buildAutoContinuationDirective, buildChatAttachmentViewUrl, buildDefaultHref, buildDiscussAddendum, buildDocumentTree, buildGroupedSource, buildListUrl, buildOgPlaceholderUrl, buildSuggestionUrl, buildTicketOpenHref, canonicalContentRefType, captureFirstTouchAttribution, captureFormRescueEvent, clamp, clampPageToTotal, classifySocialHost, cleanEmailDomain, clearAnnouncementDismissals, clearDismissCookie, clearEmbedProxyAuth, clearFirstTouchAttribution, clearLegacyAnnouncementCache, clearWalkthroughDismissal, clickupTaskUrl, cn, complianceStandardForName, consumeAccessCode, copyrightLine, createFenceTracker, createHeadingIdDeduper, createSearchParams, createSseSubscription, createUTCTimestamp, csvEscape, deepClone, defineParamSchema, defineRescueForm, delay, deriveActiveColor, deriveHoverColor, designDocReadiness, desktopOsOf, detectDesktopOs, detectVisitorOs, devSectionAnchorId, dismissAnnouncement, dismissWalkthrough, embedAuthedFetch, ensureBiteIds, errorMessage, escapeMarkdownInline, escapeRegExp, evaluateHumanitySignals, eventAudience, extractCardItems, extractDomainFromEmail, extractDominantColor, extractEntityIdFilter, extractHumanitySignals, extractImageEdgeColorAsync, extractItemId, extractItems, extractSections, faqItemAnchor, faqSectionSlug, fetchPriorityProp, fileContentKey, fileMediaType, filledRescueFields, findAnchorElementByNormalizedId, findDocNodeByPath, findHoneypotCopySource, firstParamValue, flattenAssistantContent, formatAbbreviatedNumber, formatAbsoluteDate, formatBioText, formatBytes, formatBytesShort, formatChatAttachmentMarkdownForBubble, formatCitationIndices, formatClassification, formatCompactMetric, formatCompletionLabel, formatCompletionLabelWithBlockers, formatCurrency, formatDate, formatDateRange, formatDateShort, formatDateSlashUTC, formatDateTime, formatDateTimeAt, formatDateTimeYmd, formatDateUTC, formatDateWithTimezone, formatDocName, formatDuration, formatDurationCompact, formatDurationFromMs, formatDurationFromRange, formatDurationMMSS, formatEntryMonthUTC, formatFileSize, formatLargeNumber, formatLegalDate, formatNumber, formatPercent, formatPhoneE164, formatPrice, formatPricingModel, formatProgramDate, formatProgramDateRange, formatProgramTimeRange, formatRelativeTime, formatReleaseDate, formatSingularLookupInvocation, formatTicketFullTimestamp, formatTicketRelativeTime, formatTimeWithTimezone, formatUnderscoreText, formatWebinarTimeMeta, formatWholeDollars, fromKeys, generateBiteId, generateImageSizes, generateRandomString, getAllPlatformBaseDomains, getBestContrastColor, getConfidenceBgClass, getConfidenceBorderClass, getConfidenceColorClass, getConfidenceLabel, getConfidenceLevel, getConfidenceTextClass, getContentRefLabel, getContentRefLabelOrTitleCase, getContrastRatio, getCountryByCode, getCountryByName, getCountryPhoneData, getCurrentPlatform, getDefaultColorForPlatform, getDefaultIconForPlatform, getDeploymentUrl, getDetailedTimeDifference, getDocAncestorNodeIds, getDocSourceDefaultPath, getDynamicIcon, getEmbedProxyAuth, getFirstTouchAttribution, getFlagFromCountryName, getIconComponent, getInitialExpandedNodeIds, getOSIcon, getOSLabel, getOSPlatformId, getOSTypeDefinition, getPersistedProxyEmail, getPlatformAccentColor, getPlatformBackgroundVarName, getPlatformBrand, getPlatformBrandClasses, getPlatformColor, getPlatformConfig, getPlatformDescription, getPlatformDisplayName, getPlatformIcon, getPlatformIconComponent, getPlatformIconComponent as getPlatformLogo, getPlatformProductionUrl, getPlatformSecondaryColor, getPlatformShortName, getPlatformSlogan, getPlatformTextVarName, getPlatformUrl, getProxiedImageUrl, getReadableTextColor, getRequestOrigin, getRescueForm, getSemanticColor, getShellIcon, getShellLabel, getSlackCommunityJoinUrl, getSmallPlatformIcon, getSourceIconName, getSourceLabel, getStatusColorScheme, getTaskTypeLabel, getToolLabel, getToolTypeAliases, getTrendColors, groupSourcesByTable, groupsByTable, hasGenericEmailDomain, hexToRgb2 as hexToRgb, hostMatches, isAnnouncementDismissed, isBadgePaletteKey, isBlankLine, isCrossOriginUrl, isDismissedCookieValue, isExcludedRescueField, isFigmaSlidesUrl, isFormAttemptId, isGenericDomain, isGenericWebsiteDomain, isHumanitySignalKey, isImageMedia, isListedSchedulingName, isLocalUrl, isOSPlatform, isOpenFrameClassification, isOrderedRange, isPublishableMediaType, isRescueEmail, isResumeToken, isScrollSyncedHash, isToday, isValidEmailDomain, isValidPathPattern, isValidSchedulingSlug, isValidToolType, isVendorClassification, isVideoMedia, isWalkthroughDismissed, isWithinMinutes, listRescueForms, makeComposeContentUrl, markdownToPlainText, matchBiteElement, matchesPathPattern, mediaNameKey, nameInitials, navigateSamePageHash, normalizeAnchorId, normalizeDocPath, normalizeDomain, normalizeHashFragment, normalizeIconKey, normalizeOSType, normalizeSchedulingSlug, normalizeSocialPlatform, normalizeToolType, normalizeToolTypeWithFallback, openInNewTab, orderContentRefTypes, pageCount, parseAttributionFromUrl, parseFaqHash, parseFormDraftSaveRequest, parseSchedulingLinkName, parseSchemaParams, parseScrollAnchor, parseWireCommandOverride, partitionMediaByType, pathMatchesAny, pathToNodeId, personFirstName, personInitials, pick, pickBadgePaletteColor, pickReadableTextColor, pickSocialLink, platformAccentToken, platformAccentVarName, platformColors, platformDescriptions, platformDisplayNames, platformHexColors, platformIconNames, platformIcons, platformSecondaryToken, platformSecondaryVarName, platformShortNames, platformSlogans, positiveInt, programDateInstant, programMetaFormatters, programMetaLine, programStr, readDismissCookie, readLeadingDecisionFrame, recordCountLabel, releaseTypeToBadgeColor, replaceLocationHash, rescueCompletionPct, resolveContentFetchPath, resolveMobileStoreUrl, resolveRedirectTarget, resolveReleaseCover, rgbToHex, sanitizeLandingUrl, sanitizeRescueFieldName, sanitizeRescueValues, sanitizeTitleForChat, scanHeadings, schedulingAudienceKey, scrollElementIntoView, serializeJsonLd, serializeSchemaParams, setEmbedAuthAdapter, setEmbedProxyAuth, shortcutLabel, shouldIncludeInUrl, shouldProxyImage, singleInitial, skipsImageOptimizer, slugifyHeadingBase, slugifyHeadingText, socialPlatformHosts, sortTreeChildren, splitCsvEnv, stripChatAttachmentMarkdown, stripFolderIndexFromPath, stripHeadingEmojis, stripHtml, stripInlineMarkdown, switchPlatformTheme, titleCaseFromSlug, toClaudeEmbedUrl, toClaudeMirrorPath, toCsv, toDocSlug, toFigmaEmbedUrl, toFigmaOriginalUrl, toGoogleSheetsEmbedUrl, toGoogleSheetsOriginalUrl, toToolLabel, transformPlatformConfigsToOptions, truncateString, urlPathLooksLikeSvg, usePlatformColors, usesCommandKey, validateAccessCode, validateAndConsumeAccessCode, validateEmailDomain, validateEmailDomainList, validatePhoneNumber, walkthroughDismissCookieName, webinarTiming, withFirstTouchAttribution, withQuery, withWalkthroughOpenParam, writeDismissCookie };

package/dist/utils/mobile-app.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+// src/utils/visitor-os.ts
+var HINT_PLATFORMS = {
+  macos: "mac",
+  windows: "windows",
+  linux: "linux",
+  "chrome os": "linux",
+  "chromium os": "linux",
+  android: "android",
+  ios: "ios"
+};
+function detectVisitorOs(userAgent, hints = {}) {
+  const touchMac = (os) => os === "mac" && (hints.maxTouchPoints ?? 0) > 1 ? "ios" : os;
+  const hinted = HINT_PLATFORMS[(hints.platform ?? "").replace(/"/g, "").trim().toLowerCase()];
+  if (hinted) return touchMac(hinted);
+  const ua = userAgent ?? "";
+  if (!ua) return null;
+  if (/iPhone|iPad|iPod/i.test(ua)) return "ios";
+  if (/Android/i.test(ua)) return "android";
+  if (/Windows NT|Win64|Win32/i.test(ua)) return "windows";
+  if (/Macintosh|Mac OS X/i.test(ua)) return touchMac("mac");
+  if (/Linux|X11|CrOS/i.test(ua)) return "linux";
+  return null;
+}
+
+// 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;
+  if (os === "android") return links.googlePlayUrl;
+  return null;
+}
+
+exports.DOWNLOAD_PAGE_PATH = DOWNLOAD_PAGE_PATH;
+exports.DOWNLOAD_PAGE_STORE_PARAM = DOWNLOAD_PAGE_STORE_PARAM;
+exports.MOBILE_APP_INSTALL_HOST_PATH = MOBILE_APP_INSTALL_HOST_PATH;
+exports.MOBILE_APP_INSTALL_URL = MOBILE_APP_INSTALL_URL;
+exports.resolveMobileStoreUrl = resolveMobileStoreUrl;

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

@@ -0,0 +1,40 @@
+/**
+ * The download page's own addresses: where it lives, the parameter that sends a
+ * phone on to its store, and the URL the install QR code encodes. The store
+ * listings and installer links are NOT here: they are the server's
+ * (`DownloadsPublic`, read through `useDownloads`).
+ *
+ * Pure and server-safe; also published as the granular subpath
+ * `./utils/mobile-app`, for an Edge proxy and other server-only consumers.
+ */
+import type { MobileAppLinks } from '../types/downloads';
+/** The website's download page: every installer and the mobile app. */
+export declare const DOWNLOAD_PAGE_PATH = "/download";
+/**
+ * On the download page: "send a phone or a tablet on to its store". The install
+ * QR code carries it, because whoever scans a code is holding the phone the app
+ * goes on. Anyone who opens the page without it reads the page.
+ */
+export declare const DOWNLOAD_PAGE_STORE_PARAM = "store";
+/**
+ * The one URL the install QR code encodes: the website's download page, asking
+ * it to send a phone on to its store.
+ *
+ * Absolute and on the production host on purpose: a code must point at
+ * production whichever deployment rendered the page it came from. `MobileAppQr`
+ * draws this value as committed path data, so the two change together: see the
+ * regeneration note on that component.
+ */
+export declare const MOBILE_APP_INSTALL_URL = "https://www.flamingo.run/download?store=1";
+/** The download page as it is printed for a human to read or type: no scheme, no `www`, no query. */
+export declare const MOBILE_APP_INSTALL_HOST_PATH: string;
+/**
+ * The store for a phone or tablet, or `null` for every other system and for a
+ * store the server names no listing for (`links` is the server's answer).
+ *
+ * The server passes the request's User-Agent; a browser also passes
+ * `navigator.maxTouchPoints`, the only signal that tells an iPad asking for the
+ * desktop site (it calls itself a Macintosh) from a real Mac.
+ */
+export declare function resolveMobileStoreUrl(links: MobileAppLinks, userAgent: string | null | undefined, maxTouchPoints?: number): string | null;
+//# sourceMappingURL=mobile-app.d.ts.map

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

@@ -0,0 +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"}

package/dist/utils/mobile-app.js

@@ -0,0 +1,40 @@
+// src/utils/visitor-os.ts
+var HINT_PLATFORMS = {
+  macos: "mac",
+  windows: "windows",
+  linux: "linux",
+  "chrome os": "linux",
+  "chromium os": "linux",
+  android: "android",
+  ios: "ios"
+};
+function detectVisitorOs(userAgent, hints = {}) {
+  const touchMac = (os) => os === "mac" && (hints.maxTouchPoints ?? 0) > 1 ? "ios" : os;
+  const hinted = HINT_PLATFORMS[(hints.platform ?? "").replace(/"/g, "").trim().toLowerCase()];
+  if (hinted) return touchMac(hinted);
+  const ua = userAgent ?? "";
+  if (!ua) return null;
+  if (/iPhone|iPad|iPod/i.test(ua)) return "ios";
+  if (/Android/i.test(ua)) return "android";
+  if (/Windows NT|Win64|Win32/i.test(ua)) return "windows";
+  if (/Macintosh|Mac OS X/i.test(ua)) return touchMac("mac");
+  if (/Linux|X11|CrOS/i.test(ua)) return "linux";
+  return null;
+}
+
+// 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;
+  if (os === "android") return links.googlePlayUrl;
+  return null;
+}
+
+export { DOWNLOAD_PAGE_PATH, DOWNLOAD_PAGE_STORE_PARAM, MOBILE_APP_INSTALL_HOST_PATH, MOBILE_APP_INSTALL_URL, resolveMobileStoreUrl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.720",
+  "version": "0.0.721",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",
@@ -255,6 +255,12 @@
       "require": "./dist/utils/form-rescue.cjs",
       "default": "./dist/utils/form-rescue.js"
     },
+    "./utils/mobile-app": {
+      "types": "./dist/utils/mobile-app.d.ts",
+      "import": "./dist/utils/mobile-app.js",
+      "require": "./dist/utils/mobile-app.cjs",
+      "default": "./dist/utils/mobile-app.js"
+    },
     "./utils/platform-identity": {
       "types": "./dist/utils/platform-identity.d.ts",
       "import": "./dist/utils/platform-identity.js",

package/src/assets/index.ts

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

package/src/assets/mobile-app-qr.ts

@@ -0,0 +1,19 @@
+/**
+ * The install QR code's artwork: the modules of `MOBILE_APP_INSTALL_URL`
+ * (`utils/mobile-app`) at version 3, ECC level M, as one SVG path. Packaged with
+ * the library like the other assets, so every consumer draws the same code with
+ * no host-asset serving. `MobileAppQr` (components/ui) is the component that
+ * renders it.
+ *
+ * It changes WITH that URL. To regenerate: with the `qrcode` package,
+ * `QRCode.create(url, { errorCorrectionLevel: 'M' })` gives the modules; each
+ * row is one `M{x+4} {y+4}.5h{run}` followed by `m{gap} 0h{run}` per further
+ * run (the 4 is the quiet zone), and the viewBox side is `size + 8`.
+ */
+
+/** The side of the artwork's square viewBox: 29 modules plus a 4-module quiet zone on each side. */
+export const MOBILE_APP_QR_VIEWBOX_SIZE = 37;
+
+/** The dark modules, as horizontal strokes one module tall (`stroke` draws them). */
+export const MOBILE_APP_QR_PATH =
+  'M4 4.5h7m2 0h2m2 0h1m2 0h1m2 0h2m1 0h7M4 5.5h1m5 0h1m2 0h2m2 0h3m6 0h1m5 0h1M4 6.5h1m1 0h3m1 0h1m1 0h3m1 0h1m1 0h3m2 0h1m2 0h1m1 0h3m1 0h1M4 7.5h1m1 0h3m1 0h1m1 0h1m1 0h1m1 0h6m2 0h1m1 0h1m1 0h3m1 0h1M4 8.5h1m1 0h3m1 0h1m1 0h3m1 0h1m1 0h1m1 0h5m1 0h1m1 0h3m1 0h1M4 9.5h1m5 0h1m1 0h1m1 0h2m1 0h1m1 0h3m4 0h1m5 0h1M4 10.5h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7M12 11.5h1m2 0h2m5 0h3M4 12.5h1m1 0h5m3 0h1m1 0h8m2 0h5M4 13.5h4m4 0h2m2 0h1m3 0h4m1 0h4m3 0h1M6 14.5h1m3 0h3m1 0h1m3 0h4m2 0h1M4 15.5h1m2 0h3m2 0h2m1 0h2m1 0h1m1 0h1m2 0h5m1 0h1m1 0h1M4 16.5h1m4 0h2m1 0h2m1 0h1m1 0h1m2 0h2m1 0h1m5 0h2M16 17.5h3m3 0h5m1 0h1m3 0h1M5 18.5h1m3 0h2m1 0h1m5 0h2m4 0h1m1 0h2m1 0h2M4 19.5h6m1 0h1m3 0h1m2 0h3m1 0h4m1 0h2m2 0h1M8 20.5h1m1 0h1m2 0h2m1 0h2m1 0h1m1 0h1m5 0h1m1 0h2M4 21.5h1m1 0h2m7 0h1m2 0h1m1 0h9m1 0h1m1 0h1M4 22.5h1m3 0h3m2 0h1m1 0h2m2 0h3m3 0h1m1 0h1m2 0h1M4 23.5h1m6 0h4m3 0h2m3 0h2m2 0h2m2 0h1M4 24.5h1m2 0h4m4 0h1m3 0h1m1 0h1m1 0h6m1 0h3M12 25.5h6m2 0h1m3 0h1m3 0h5M4 26.5h7m3 0h8m1 0h2m1 0h1m1 0h3M4 27.5h1m5 0h1m1 0h2m1 0h3m2 0h1m2 0h2m3 0h1M4 28.5h1m1 0h3m1 0h1m1 0h2m2 0h1m1 0h1m2 0h1m2 0h5m1 0h3M4 29.5h1m1 0h3m1 0h1m1 0h2m1 0h2m3 0h4m3 0h1m1 0h4M4 30.5h1m1 0h3m1 0h1m1 0h1m3 0h4m1 0h1m2 0h8M4 31.5h1m5 0h1m4 0h1m1 0h1m1 0h2m1 0h1m1 0h1m1 0h2m1 0h1m1 0h1M4 32.5h7m1 0h1m2 0h2m4 0h1m1 0h1m3 0h4';

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

@@ -0,0 +1,364 @@
+'use client';
+
+/**
+ * `<DownloadAppsPage>`: every way to install OpenFrame, on one page.
+ *
+ *   - The desktop app: every system at once, one card each (a download page
+ *     lists its platforms; it does not hide them behind tabs, so nothing moves
+ *     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).
+ *
+ * DATA: all of it is the server's answer (`DownloadsPublic`), read by
+ * `useDownloads` against `endpoint` (default `DOWNLOADS_API_PATH`; embedders
+ * pass their `/content` proxy path), the one request every download button on
+ * the page shares. `initialData` (hub SSR) is the answer, with no fetch. The
+ * lib holds no link of its own and no fallback: the page ADAPTS, so a system
+ * with no installer and no command has no card, a store with no listing has no
+ * badge, and a section with nothing to offer is not drawn.
+ *
+ * A HOST DECIDES `showDesktop`: the website shows the desktop app only to a
+ * visitor whose main action is the download; the desktop shell hides it (it is
+ * the app already running).
+ *
+ * The chrome is the canonical `PageShell` + frozen `PageLayout`.
+ */
+
+import { useEffect, type ComponentType, type ReactNode } from 'react';
+import { useRouter } from '../../embed-shims/next-navigation';
+import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard';
+import { useDownloads } from '../../hooks/use-downloads';
+import {
+  DESKTOP_OS_LABELS,
+  DOWNLOAD_ARCHITECTURE_LABELS,
+  DOWNLOADS_API_PATH,
+  DOWNLOADS_MOBILE_TAGLINE,
+  DOWNLOADS_MOBILE_TITLE,
+  DOWNLOADS_TAGLINE,
+  DOWNLOADS_TITLE,
+  type AppDownload,
+  type DownloadActionEvent,
+  type DownloadsPublic,
+  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 { 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';
+import { WindowsLogoGreyIcon } from '../icons-v2-generated/brand-logos/windows-logo-grey-icon';
+import { Download01Icon } from '../icons-v2-generated/interface/download-01-icon';
+import { PageShell } from '../layout/article-detail-layout';
+import { PageLayout } from '../layout/page-layout';
+import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { Button } from '../ui/button/button';
+import { LoadError } from '../ui/error-state';
+import { MobileAppQr } from '../ui/mobile-app-qr';
+import { StoreBadgeLinks } from '../ui/store-badges';
+
+export interface DownloadAppsPageProps {
+  /** GET endpoint for the public projection. Default `DOWNLOADS_API_PATH`. */
+  endpoint?: string;
+  /** Optional SSR hydrate (hub server-read): skips the initial client fetch. */
+  initialData?: DownloadsPublic;
+  /** Render the standalone `<PageShell>`. Default true. Pass false when the host
+   *  layout already provides the page container (e.g. openframe-frontend). */
+  shell?: boolean;
+  /** Back-button config. Default: none. */
+  backButton?: { label?: string; href?: string } | false;
+  /** Page title. Default by what is offered (`DOWNLOADS_TITLE` / `DOWNLOADS_MOBILE_TITLE`). */
+  title?: string;
+  /** Page subtitle. Default by what is offered. */
+  subtitle?: string;
+  /** Offer the desktop app. Default true. False: the mobile app only. */
+  showDesktop?: boolean;
+  /** Open the store listings in a new tab. Default true. */
+  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;
+}
+
+const SECTIONS_CLASS = 'flex flex-col gap-[var(--spacing-system-xlf)]';
+const SECTION_CLASS = 'flex flex-col gap-[var(--spacing-system-lf)]';
+const CARDS_GRID_CLASS = 'grid grid-cols-1 gap-[var(--spacing-system-lf)] content-md:grid-cols-2';
+/** One card takes the row; two or more share it. */
+const cardsGridClass = (cards: number) => (cards > 1 ? CARDS_GRID_CLASS : 'grid grid-cols-1');
+const CARD_CLASS =
+  'flex flex-col gap-[var(--spacing-system-lf)] rounded-md border border-ods-border bg-ods-card p-[var(--spacing-system-lf)]';
+const CARD_HEADER_CLASS = 'flex items-center gap-[var(--spacing-system-sf)]';
+const BUTTONS_CLASS = 'flex flex-wrap gap-[var(--spacing-system-sf)]';
+const COMMANDS_CLASS = 'flex flex-col gap-[var(--spacing-system-mf)]';
+
+const OS_ICONS: Partial<Record<DesktopOs, ComponentType<{ className?: string }>>> = {
+  mac: AppleLogoIcon,
+  windows: WindowsLogoGreyIcon,
+};
+
+/** A card's heading row: a small logo, the name, and one quiet line of detail at the far end. */
+function CardHeader({
+  icon: Icon,
+  title,
+  detail,
+}: {
+  icon?: ComponentType<{ className?: string }>;
+  title: string;
+  detail?: string;
+}) {
+  return (
+    <div className={CARD_HEADER_CLASS}>
+      {Icon && <Icon className="h-6 w-6 shrink-0 text-ods-text-secondary" />}
+      <h3 className="m-0 text-ods-text-primary text-h3">{title}</h3>
+      {detail && <p className="m-0 ml-auto text-right text-ods-text-secondary text-h6">{detail}</p>}
+    </div>
+  );
+}
+
+interface SystemRows {
+  os: DesktopOs;
+  installers: AppDownload[];
+  commands: AppDownload[];
+}
+
+/**
+ * The rows per system, in the order they arrived. The page adapts to what the
+ * deployment names: a system is offered when it has an installer OR a package
+ * manager command, and a system with neither has no card at all.
+ */
+function rowsBySystem(downloads: readonly AppDownload[]): SystemRows[] {
+  return 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),
+  })).filter(system => system.installers.length > 0 || system.commands.length > 0);
+}
+
+function installerLabel(download: AppDownload, siblings: number): string {
+  if (download.label) return download.label;
+  const label = `Download for ${DESKTOP_OS_LABELS[download.os]}`;
+  const architecture = download.architecture ? DOWNLOAD_ARCHITECTURE_LABELS[download.architecture] : null;
+  // One installer for a system needs no qualifier; two are told apart by their architecture.
+  return siblings > 1 && architecture ? `${label} (${architecture})` : label;
+}
+
+/** One system's card: its logo and name, its installers side by side, then each package manager as one line. */
+function SystemCard({
+  system,
+  onDownloadAction,
+}: {
+  system: SystemRows;
+  onDownloadAction?: DownloadAppsPageProps['onDownloadAction'];
+}) {
+  const { copy } = useCopyToClipboard({
+    successTitle: 'Copied',
+    successDescription: 'Paste it into your terminal and press Return.',
+  });
+  const requirements = [...new Set(system.installers.map(d => d.minOsLabel).filter((l): l is string => !!l))];
+  const report = (action: DownloadActionEvent['action'], row: AppDownload) =>
+    onDownloadAction?.({ action, id: row.id, os: row.os, architecture: row.architecture });
+  return (
+    <div className={CARD_CLASS}>
+      <CardHeader
+        icon={OS_ICONS[system.os]}
+        title={DESKTOP_OS_LABELS[system.os]}
+        detail={requirements.length > 0 ? `Requires ${requirements.join(' or ')}` : undefined}
+      />
+      {system.installers.length > 0 && (
+        <div className={BUTTONS_CLASS}>
+          {system.installers.map((download, index) => (
+            <Button
+              key={download.id}
+              variant={index === 0 ? 'accent' : 'outline'}
+              href={download.url ?? undefined}
+              download
+              leftIcon={<Download01Icon className="h-5 w-5" />}
+              onClick={() => report('installer', download)}
+            >
+              {installerLabel(download, system.installers.length)}
+            </Button>
+          ))}
+        </div>
+      )}
+      {system.commands.length > 0 && (
+        <div className={COMMANDS_CLASS}>
+          {system.commands.map(row =>
+            row.command ? (
+              <CommandBox
+                key={row.id}
+                title={row.label ?? undefined}
+                command={row.command}
+                maxLines={1}
+                commandClassName="text-ods-accent"
+                copyAriaLabel={`Copy the ${row.label ?? 'install'} command`}
+                onCopy={() => {
+                  void copy(row.command as string);
+                  report('command', row);
+                }}
+              />
+            ) : null,
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** 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 (
+    <div className={CARDS_GRID_CLASS} aria-busy="true" aria-label={label}>
+      {[0, 1].map(card => (
+        <div key={card} className={CARD_CLASS}>
+          <UnifiedSkeleton className="h-6 w-32 rounded" />
+          <UnifiedSkeleton className="h-12 w-56 rounded-md" />
+          <UnifiedSkeleton className="h-14 w-full rounded-md" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function Section({ id, title, children }: { id: string; title: string; children: ReactNode }) {
+  return (
+    <section aria-labelledby={id} className={SECTION_CLASS}>
+      <h2 id={id} className="m-0 text-ods-text-primary text-h2">
+        {title}
+      </h2>
+      {children}
+    </section>
+  );
+}
+
+/** Which devices the store card names: only the stores the server has a listing for. */
+function storeCardTitle(links: MobileAppLinks): string {
+  if (links.appStoreUrl && links.googlePlayUrl) return 'iPhone, iPad and Android';
+  return links.appStoreUrl ? 'iPhone and iPad' : 'Android';
+}
+
+export function DownloadAppsPage({
+  endpoint = DOWNLOADS_API_PATH,
+  initialData,
+  shell = true,
+  backButton = false,
+  title,
+  subtitle,
+  showDesktop = true,
+  openStoresInNewTab = true,
+  onDownloadAction,
+  footer,
+}: 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.
+  const systems = showDesktop && data ? rowsBySystem(data.desktop) : [];
+  const mobile = data?.mobile ?? null;
+  const hasMobile = !!mobile && (!!mobile.appStoreUrl || !!mobile.googlePlayUrl);
+  // 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} />;
+  } else if (!data) {
+    body = isLoading ? (
+      <>
+        {showDesktop && (
+          <Section id="download-desktop" title="Desktop app">
+            <CardsSkeleton label="Loading the installers" />
+          </Section>
+        )}
+        <Section id="download-mobile" title="Mobile app">
+          <CardsSkeleton label="Loading the mobile app" />
+        </Section>
+      </>
+    ) : null;
+  } else {
+    body = (
+      <>
+        {systems.length > 0 && (
+          <Section id="download-desktop" title="Desktop app">
+            <div className={cardsGridClass(systems.length)}>
+              {systems.map(system => (
+                <SystemCard key={system.os} system={system} onDownloadAction={onDownloadAction} />
+              ))}
+            </div>
+          </Section>
+        )}
+
+        {mobile && hasMobile && (
+          <Section id="download-mobile" title="Mobile app">
+            <div className={CARDS_GRID_CLASS}>
+              <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>
+                <StoreBadgeLinks
+                  appStoreUrl={mobile.appStoreUrl}
+                  googlePlayUrl={mobile.googlePlayUrl}
+                  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]" />
+                </div>
+              </div>
+            </div>
+          </Section>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <DownloadAppsChrome
+      shell={shell}
+      backButton={backButton}
+      title={title ?? (offersDesktop ? DOWNLOADS_TITLE : DOWNLOADS_MOBILE_TITLE)}
+      subtitle={subtitle ?? (offersDesktop ? DOWNLOADS_TAGLINE : DOWNLOADS_MOBILE_TAGLINE)}
+    >
+      <div className={SECTIONS_CLASS}>
+        {body}
+        {footer}
+      </div>
+    </DownloadAppsChrome>
+  );
+}
+
+/** The page's chrome: the standalone `PageShell` or the host's padded box, and the frozen `PageLayout` header. */
+function DownloadAppsChrome({
+  shell,
+  title,
+  subtitle,
+  backButton,
+  children,
+}: Required<Pick<DownloadAppsPageProps, 'shell' | 'title' | 'subtitle' | 'backButton'>> & { children: ReactNode }) {
+  const router = useRouter();
+  const backCfg =
+    backButton === false
+      ? undefined
+      : { label: backButton.label ?? 'Back to home', onClick: () => router.push(backButton.href ?? '/') };
+  const inner = (
+    <PageLayout title={title} subtitle={subtitle} backButton={backCfg} titleSize="h1" titleWrap>
+      {children}
+    </PageLayout>
+  );
+  return shell ? <PageShell>{inner}</PageShell> : <div className="page-shell-content">{inner}</div>;
+}

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

@@ -22,6 +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';
 
 // Existing full-pages re-exported for a single Help Center import site.
 export { FaqDocumentPage, type FaqDocumentPageProps } from '../faq';

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

@@ -339,6 +339,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function ButtonI
           download={download}
           prefetch={false}
           className={cn(shellClasses, isDisabled && 'pointer-events-none')}
+          // The click still reaches the caller (a download is what analytics counts).
+          onClick={onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined}
           aria-label={props['aria-label']}
         >
           {splitContent}
@@ -423,6 +425,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function ButtonI
         download={download}
         prefetch={false}
         className={cn(classes, isDisabled && 'pointer-events-none')}
+        onClick={onClick as unknown as React.MouseEventHandler<HTMLAnchorElement> | undefined}
         aria-label={props['aria-label']}
       >
         {content}

package/src/components/ui/index.ts

@@ -73,6 +73,7 @@ export * from './status-badge';
 export * from './palette-badge';
 export * from './department-badge';
 export * from './store-badges';
+export * from './mobile-app-qr';
 export * from './status-indicator';
 export * from './toaster';
 // TODO: Add other UI components as they are moved to ui-kit