);
// ── LoadingState (v01.03) ─────────────────────────────────────
// Replaces the plain "Loading…" text scattered across pages with
// a small animated pulse + label so loading reads as deliberate
// rather than as a stalled page. Single-color (signal-eff)
// pulse. Inline-block at typical body size by default; the
// `large` prop bumps padding for full-page loading panels.
const _loadingKeyframes = `
@keyframes pa-pulse-dot {
0% { transform: scale(0.6); opacity: 0.4; }
50% { transform: scale(1.0); opacity: 1.0; }
100% { transform: scale(0.6); opacity: 0.4; }
}`;
// Inject keyframes once.
if (typeof document !== 'undefined' && !document.getElementById('pa-pulse-style')) {
const s = document.createElement('style');
s.id = 'pa-pulse-style';
s.textContent = _loadingKeyframes;
document.head.appendChild(s);
}
const LoadingState = ({ label, large }) => (
{[0, 1, 2].map(i => (
))}
{label || 'Loading…'}
);
// ── EmptyState (v01.03) ───────────────────────────────────────
// Consistent shape for "nothing here yet" messages across the
// prototype. Eyebrow + display title + body + optional action
// button. Each section is optional so callers can keep things
// short ("No races yet") or add a CTA ("Request your first
// analysis").
const EmptyState = ({ eyebrow, title, body, action, dense }) => (
{eyebrow && (
{eyebrow}
)}
{title && (
{title}
)}
{body &&
{body}
}
{action &&
{action}
}
);
// ── ErrorState (v01.05) ───────────────────────────────────────
// Top-level error UI for failed data fetches. Shows a friendly
// title + the actual error message + a retry button. Optional
// `technical` slot collapses the verbose error details under
// a small "Details" disclosure for power users / debugging.
//
// Used by WebRaces / WebStarts / WebTurns / TeamBrowsePage when
// their lazy-fetch effects fail. The retry callback re-runs
// the query without a page reload — typical pattern is to
// increment a `refetchToken` state that the effect's
// dependency array includes.
// v01.25 — atom defaults translate via useT(). The eyebrow,
// title, RETRY button label, and Details summary all flip with
// the active language. `message` and `technical` come from the
// caller and stay as-passed (callers translate their own context-
// specific copy via the dict; see analysis.errorState.* etc.).
const ErrorState = ({ message, onRetry, technical, dense }) => {
const tFn = (window.useT || (() => (k) => k))();
return (
);
};
// ── useIsMobile (v01.06) ──────────────────────────────────────
// Boolean hook that flips at the configured breakpoint. Used by
// the web-shell (Sidebar drawer, Topbar collapse) and by any
// page-level layout that needs to stack columns or hide a panel.
//
// Default threshold: 768px — matches Tailwind's `md:` boundary
// and what most users intuit as "mobile". Every current iPhone
// (375-430px CSS width) falls below; iPad portrait (768) and up
// gets the desktop layout, which fits the 240px sidebar plus
// content cleanly.
//
// Subscribes to window resize and re-renders when the boolean
// flips. Safe during SSR (no window check needed in this
// prototype but keeping the early-return for portability).
const useIsMobile = (threshold = 768) => {
const [isMobile, setIsMobile] = React.useState(() => {
if (typeof window === 'undefined') return false;
return window.innerWidth < threshold;
});
React.useEffect(() => {
if (typeof window === 'undefined') return undefined;
const onResize = () => setIsMobile(window.innerWidth < threshold);
window.addEventListener('resize', onResize);
return () => window.removeEventListener('resize', onResize);
}, [threshold]);
return isMobile;
};
// ── useT (v01.20) ─────────────────────────────────────────────
// Bridges window.PA_I18N into React's render loop. Returns a
// `t(key, replacements)` function that re-binds whenever the
// current language changes — so any component using `useT()`
// re-renders cleanly when the user toggles EN ↔ ES via the
// Account modal Preferences tab (or via PA_DEV.setLang from the
// console).
//
// Two events drive re-renders:
// - pa:lang-changed — user (or dev hook) flipped the language.
// - pa:lang-loaded — async fetch of en.json / es.json finished.
// Any component that mounted before the
// dicts arrived needs to re-render with the
// real translations instead of key fallbacks.
//
// Falls back gracefully when PA_I18N hasn't loaded yet (the
// hook returns `t = (key) => key`, which renders the key
// literally — fine as a transient state during boot).
const useT = () => {
const [, bump] = React.useState(0);
React.useEffect(() => {
const onChange = () => bump((n) => n + 1);
window.addEventListener('pa:lang-changed', onChange);
window.addEventListener('pa:lang-loaded', onChange);
return () => {
window.removeEventListener('pa:lang-changed', onChange);
window.removeEventListener('pa:lang-loaded', onChange);
};
}, []);
// Returned function reads PA_I18N at call time, so components
// get the latest translations on every render.
return (key, replacements) => {
if (window.PA_I18N && typeof window.PA_I18N.t === 'function') {
return window.PA_I18N.t(key, replacements);
}
return key;
};
};
// ── Toaster (v01.26 — Batch 4.5) ─────────────────────────────
// Imperative, side-effect-style toast system used throughout the
// app for transient feedback ("Saved!", "Could not connect", etc.).
//
// API (window.PA_TOAST):
// show(message, opts) → id
// opts: { type?: 'info' | 'success' | 'warning' | 'error',
// duration?: number, // ms, default 3000
// action?: { label, onClick } } // optional CTA on the toast
// dismiss(id)
// clear() // dismiss all
//
// Mounting: renders ONCE from AuthGate (sibling to the
// rest of the tree). On mount, it installs its API on window. On
// unmount (rare — only on full app teardown), it deletes the API.
//
// Multiple toasts stack vertically, newest on top. Auto-dismiss
// after `duration` ms unless duration === 0 (sticky). Click X
// or click the toast body's "Dismiss" button to close early.
//
// Bilingual via the existing `toast.dismiss` key. Caller-supplied
// messages stay as-passed (callers translate their own context).
const Toaster = () => {
const [toasts, setToasts] = React.useState([]);
const isMobile = useIsMobile();
const tFn = useT();
const idRef = React.useRef(0);
React.useEffect(() => {
const api = {
show(message, opts = {}) {
idRef.current += 1;
const id = idRef.current;
const toast = {
id,
message: message == null ? '' : String(message),
type: opts.type || 'info',
action: opts.action || null,
duration: opts.duration == null ? 3000 : opts.duration,
};
setToasts((arr) => [toast, ...arr].slice(0, 5)); // cap stack at 5
if (toast.duration > 0) {
setTimeout(() => {
setToasts((arr) => arr.filter((t) => t.id !== id));
}, toast.duration);
}
return id;
},
dismiss(id) {
setToasts((arr) => arr.filter((t) => t.id !== id));
},
clear() { setToasts([]); },
};
window.PA_TOAST = api;
return () => { if (window.PA_TOAST === api) delete window.PA_TOAST; };
}, []);
if (!toasts.length) return null;
// Tone tokens per type. All four use the same card surface so
// the visual rhythm with the rest of the app stays consistent;
// only the accent border + eyebrow color shifts.
const accentFor = (type) => ({
info: 'var(--signal-eff)',
success: 'var(--lime-eff)',
warning: 'var(--amber-eff)',
error: 'var(--flag-eff)',
}[type] || 'var(--signal-eff)');
return (
);
};
// ── PreviewBanner (v01.50) ───────────────────────────────────
//
// Sticky banner rendered above the page content when a free
// user is in Preview Pro mode (PA_PREVIEW.isOn() === true).
// Offers two actions: Upgrade to Pro (opens Account modal
// subscription tab via dispatch) and Exit preview (calls
// PA_PREVIEW.exit()).
//
// ── ChartScroll (v03.12) ──────────────────────────────────────
// Responsive wrapper for the data-chart SVGs. The analysis charts
// use fixed viewBox widths (480-720 units) with width:100%, so on
// a phone (~345 px usable) the whole SVG scales to ~0.5x and all
// in-SVG text/dots shrink to unreadable size.
//
// On mobile this wraps the chart in a horizontal-scroll container
// with an inner div forced to the chart's natural width — the SVG
// then renders at ~1x scale (crisp text) and the user swipes
// sideways to see the full chart. On desktop it's a transparent
// passthrough (renders children directly, zero layout change, so
// no desktop regression risk).
//
// Usage:
// v03.20 — REVERTED to a passthrough. The horizontal-scroll
// approach (v03.12-v03.18) caused charts to overflow their cards
// and the document to scroll horizontally across the various
// flex/grid layout contexts on web + mobile. Charts now simply
// render at width:100% and scale to fit their card — the
// behavior before the iPhone-Pro readability experiment. The
// "small charts on a phone" cosmetic issue is accepted for now;
// if revisited, do it without a layout-affecting wrapper (e.g.
// larger in-SVG font sizes), not horizontal scroll.
const ChartScroll = ({ children }) => children;
// ── StuckBanner (v03.04) ──────────────────────────────────────
// Non-blocking top banner that appears when the supabase client
// gets internally wedged. Replaces the auto-reload behavior in
// withRecovery (Tier 2) and the always-on visibility probes
// (v01.73-v01.74) — both were too aggressive and disrupted the
// user's workflow with surprise reloads.
//
// Listens for `pa:client-stuck` events dispatched by:
// 1. withRecovery (supabase.js) — when a query hangs even after
// a forced token refresh + retry
// 2. probeStuckClient (supabase.js) — when the Stripe-return
// probe times out
//
// Banner offers a Reload button (user-initiated recovery) and a
// dismiss X. Stays visible until the user acts — no auto-hide.
// Mounted once at the App level in index.html.
const StuckBanner = () => {
const [active, setActive] = React.useState(false);
React.useEffect(() => {
const onStuck = () => setActive(true);
window.addEventListener('pa:client-stuck', onStuck);
return () => window.removeEventListener('pa:client-stuck', onStuck);
}, []);
if (!active) return null;
return (
Connection looks stuck. A page reload usually fixes it.
);
};
// Renders nothing when preview is off — zero overhead in the
// normal UX. Subscribes to pa:preview-changed via PA_PREVIEW's
// usePreview hook so it appears/disappears reactively.
const PreviewBanner = ({ onUpgrade }) => {
const t = (window.useT || (() => (k) => k))();
const previewOn = window.PA_PREVIEW?.usePreview?.() || false;
if (!previewOn) return null;
const exit = () => window.PA_PREVIEW?.exit?.();
return (
{t('preview.bannerEyebrow')}
{t('preview.bannerTitle')}
{t('preview.bannerBody')}
);
};
// ── RequestAnalysisInline (v01.59) ────────────────────────────
// Synced from mobile v02.12. Inline (non-overlay) variant of the
// Deck hero's RequestAnalysisButton. Used by the sidebar (always-
// visible global access) and by the Races page header (contextual).
// Self-contained: owns its own usePARequests() call and dispatches
// `pa:open-modal` on click — AthleteDeck's modal manager listens
// for that event and routes to the correct sub-modal (upload /
// buy / try) based on quota state.
//
// Why a NEW component instead of reusing RequestAnalysisButton from
// web-deck.jsx: the Deck button is positioned `absolute, top:14, right:14`
// to overlay the hero card. That positioning is wrong for inline
// placements. Rather than refactor the existing button (risk on the
// Deck), this component duplicates ~40 lines of label/tone/caption
// logic. If this becomes a third placement, factor a
// `useRequestAction(athleteUuid)` hook out of both into a shared lib.
const RequestAnalysisInline = ({ athleteUuid, fullWidth = true, compact = false }) => {
const tFn = (window.useT || (() => (k) => k))();
const requestsState = (window.usePARequests
? window.usePARequests(athleteUuid)
: { nextAction: 'loading', quota: null, isTrialing: false, trialDays: null, isPolling: false });
const { nextAction, quota, isTrialing, trialDays, isPolling } = requestsState;
const label =
nextAction === 'upload' ? tFn('deck.requestBtn.upload') :
nextAction === 'buy' ? tFn('deck.requestBtn.buy') :
nextAction === 'try' ? tFn('deck.requestBtn.try') :
tFn('deck.requestBtn.loading');
const tone =
nextAction === 'upload' ? { bg: 'var(--signal-eff)', fg: 'var(--ink)', border: 'transparent' } :
nextAction === 'buy' ? { bg: 'transparent', fg: 'var(--flag-eff)', border: 'color-mix(in oklch, var(--flag-eff) 50%, transparent)' } :
{ bg: 'transparent', fg: 'var(--signal-eff)', border: 'color-mix(in oklch, var(--signal-eff) 50%, transparent)' };
const R = window.PA_REQUESTS;
const caption = (() => {
if (isPolling) return tFn('deck.requestBtn.checking');
if (!quota) return '';
if (isTrialing && Number.isFinite(trialDays)) return 'Trial · ' + trialDays + 'd left';
if (quota.status === 'none') return tFn('deck.requestBtn.noSubscription');
return R ? R.quotaLabel(quota) : (quota.used + ' of ' + quota.limit + ' used');
})();
const onClick = () => {
const target = nextAction === 'upload' ? 'upload' : 'buy';
try {
window.dispatchEvent(new CustomEvent('pa:open-modal', { detail: { modal: target } }));
} catch (_) {}
};
return (
{caption && (
{isPolling && (
)}
{caption}
)}
);
};
// ── ProUpgradeBanner (v01.60 / 2026-05-12) ────────────────────
// Persistent "Upgrade to Pro" call-to-action shown above athlete
// surfaces (Deck / Races / Starts / Turns) for free users.
//
// Web variant: clicks open the Stripe pay-link directly (no Buy
// modal exists on web prototype-v03 — payment routing is handled
// by Stripe customer portal / pay-link, not a dedicated modal).
// Mobile variant (in prototype-v03-mobile) dispatches a
// pa:open-modal event instead, which routes through BuyAnalysisModal
// → IAP on native. Banner UI is otherwise identical.
//
// X dismisses for the session via sessionStorage. Visibility gating
// (free user, on athlete view) is done by the parent (index.html App
// render) — banner only handles its own dismissed state.
const ProUpgradeBanner = ({ authUserId, email }) => {
const { useState } = React;
const t = (window.useT || (() => (k) => k))();
const isMobile = (window.useIsMobile || (() => false))();
const [dismissed, setDismissed] = useState(() => {
try {
return typeof sessionStorage !== 'undefined'
&& sessionStorage.getItem('pa_pro_banner_dismissed') === '1';
} catch (_) { return false; }
});
if (dismissed) return null;
const openStripe = () => {
const url = window.PA_REQUESTS?.STRIPE_LINKS?.pro;
if (!url) return;
const finalUrl = window.PA_REQUESTS?.buildStripeUrl
? window.PA_REQUESTS.buildStripeUrl(url, { authUserId, email })
: url;
try { window.open(finalUrl, '_blank', 'noopener,noreferrer'); } catch (_) {}
};
const dismiss = (e) => {
e.stopPropagation();
try { sessionStorage.setItem('pa_pro_banner_dismissed', '1'); } catch (_) {}
setDismissed(true);
};
return (