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

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/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;
 }
 
 /**

package/src/utils/format.ts

@@ -1059,3 +1059,18 @@ export function formatWebinarTimeMeta(
   const time = formatProgramTimeRange(at, { startAt: opts.startAt, withZoneLabel: opts.withZoneLabel });
   return [time, duration].filter(Boolean).join(' · ');
 }
+
+/**
+ * A web address as it is shown to a person to read or type, not to follow: no
+ * scheme, no query or fragment, no trailing slash.
+ * `https://www.example.com/mobile?from=qr` reads `example.com/mobile`.
+ *
+ * `www` is dropped by default, because nobody types it; `keepWww` keeps it where
+ * the address is shown as the site's own name.
+ */
+export function formatUrlForDisplay(url: string, options: { keepWww?: boolean } = {}): string {
+  return url
+    .replace(options.keepWww ? /^https?:\/\//i : /^https?:\/\/(www\.)?/i, '')
+    .replace(/[?#].*$/, '')
+    .replace(/\/$/, '');
+}

package/src/utils/index.ts

@@ -16,7 +16,7 @@ export {
 // Number / currency / byte / date formatters live in `./format` (single
 // source of truth). Re-exported here so existing callers that pull from
 // the barrel keep working without changing imports.
-export { formatDate, formatNumber, formatPrice, formatBytes } from './format';
+export { formatDate, formatNumber, formatPrice, formatBytes, formatUrlForDisplay } from './format';
 export { TRIAL_DAYS, TRIAL_LABELS } from './trial';
 export {
   VENDOR_CLASSIFICATIONS,

package/src/utils/mobile-app.ts

@@ -1,8 +1,8 @@
 /**
- * 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`).
+ * The download page's address, and what a server needs to send a phone on to
+ * its store. No link lives here: the store listings, the installer links and
+ * the install link the QR code encodes are all 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.
@@ -13,37 +13,14 @@ import { detectVisitorOs } from './visitor-os';
 /** The website's download page: every installer and the mobile app. */
 export 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 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 const MOBILE_APP_INSTALL_URL = `https://www.flamingo.run${DOWNLOAD_PAGE_PATH}?${DOWNLOAD_PAGE_STORE_PARAM}=1`;
-
-/** The download page as it is printed for a human to read or type: no scheme, no `www`, no query. */
-export const MOBILE_APP_INSTALL_HOST_PATH = MOBILE_APP_INSTALL_URL.replace(/^https:\/\/(www\.)?/, '').replace(
-  /\?.*$/,
-  '',
-);
-
 /**
  * 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.
+ * The server passes the request's User-Agent (the install link's redirect).
+ * A browser may also pass `navigator.maxTouchPoints`, the only signal that tells
+ * an iPad asking for the desktop site (it calls itself a Macintosh) from a real
+ * Mac; the server cannot, so that iPad lands on the download page and its badges.
  */
 export function resolveMobileStoreUrl(
   links: MobileAppLinks,

package/dist/assets/mobile-app-qr.d.ts

@@ -1,17 +0,0 @@
-/**
- * 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 declare const MOBILE_APP_QR_VIEWBOX_SIZE = 37;
-/** The dark modules, as horizontal strokes one module tall (`stroke` draws them). */
-export declare 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";
-//# sourceMappingURL=mobile-app-qr.d.ts.map

package/dist/assets/mobile-app-qr.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mobile-app-qr.d.ts","sourceRoot":"","sources":["../../src/assets/mobile-app-qr.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,oGAAoG;AACpG,eAAO,MAAM,0BAA0B,KAAK,CAAC;AAE7C,qFAAqF;AACrF,eAAO,MAAM,kBAAkB,uyCACuwC,CAAC"}

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

@@ -1,19 +0,0 @@
-/**
- * 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';