feat(a11y/ui): profile header skeleton, accessible metric tooltips, bio clamp, onboarding placeholders (#291/#290/#282/#273)

[pre-cious-Igwealor]

This PR closes #291, #290, #282, #273 — all four are creator-profile presentation/accessibility issues in adjacent components, so one PR keeps the diff coherent.

closes #291
closes #290
closes #282
closes #273

What's in this PR

#273 — Loading skeleton for the creator profile header

• New CreatorProfileHeaderSkeleton (exported alongside CreatorSkeleton in src/components/common/CreatorSkeleton.tsx).
• Block dimensions match CreatorProfileHeader's populated layout exactly: avatar size-24 md:size-32 rounded-2xl border-4, name h-9 md:h-12 w-3/4 max-w-md, handle h-6 w-1/2 max-w-xs, and a hidden md:block share-button block — so no visible layout shift when real data resolves.
• role="status" + sr-only label announces "Loading creator profile" to assistive tech.
• Reduced-motion is respected via the shared skeletonBlockClass (which already does motion-reduce:); disableShimmer is forwarded for callers that disable shimmer higher up the tree.
• Wired into LandingPage — when isLoading is true, the header section renders the skeleton instead of the populated CreatorProfileHeader.

#290 — Accessible tooltip trigger for creator metric explanations

The existing Tooltip wraps content in a non-focusable <div> and toggles via group-hover / group-focus-within. That's effectively hover-only — keyboard users can't reach the explanation on a plain label.

• New AccessibleInfoTrigger component:
  • The trigger is a real <button type="button"> with a metric-specific aria-label ("Explanation for: Audience"), so it's focusable and announced.
  • On focus / hover / click, an absolutely-positioned role="tooltip" element appears and the trigger gets aria-describedby={tooltipId} + aria-expanded={true}.
  • Escape dismisses while open, blur / mouse-leave also dismisses.
  • Trigger keeps a stable visual footprint; tooltip is absolutely positioned and doesn't shift surrounding layout.
• MiniStatChip accepts an optional explanation prop and renders the trigger when supplied.
• Applied to the LandingPage's profile-stat chips: Status / Audience / Access.

#282 — Helper for truncating long creator bio text to max display lines

• CreatorBio gains a maxLines?: number | null prop. Default 3 on the card variant; the profile variant always shows the full bio so the truncation stays purely cosmetic and the full text remains accessible on the creator profile page. Short bios are unaffected.
• The implementation maps maxLines 1..6 to a fixed Tailwind line-clamp-N class (capping higher values at line-clamp-6 to keep card heights bounded). Fixed class names are used so Tailwind's JIT keeps the utilities in the produced CSS.
• The full bio is preserved in the title attribute when clamped, so accessibility tooling and browser tooltips can read the unclamped text.
• Helper lives in src/utils/lineClamp.utils.ts rather than in the component file so the component keeps a clean Fast-Refresh boundary (one component per file).

#291 — Placeholder copy for creator profile with pending onboarding

• New PendingOnboardingPlaceholder component with inline and card variants and bio / links / stats / overview section presets. Centralising the copy keeps tone consistent across every empty-state surface — change once, propagates everywhere.
• CreatorBio accepts isOnboardingPending. When true and the bio is empty, the fallback swaps to the pending copy ("This creator is still setting up their profile. Bio coming soon.") and the aria-label flips to "Bio pending — onboarding in progress" so screen readers communicate the cause of the empty state.

Verification

$ pnpm install         # ok
$ pnpm test            # 110 passed | 1 failed (pre-existing, see disclosures)
$ pnpm lint            # clean
$ pnpm build           # clean (vite build, 7.27s)

14 new vitest cases, all passing:

• CreatorBio.test.tsx (added): 11 lineClampClassFor cases (profile, disabled, 1..6, cap), 5 clamp-integration cases (default 3-line, override, null disables, profile ignores, title preserves full text), 3 onboarding-pending cases (fallback swap, default branch, ignored when bio present).
• AccessibleInfoTrigger.test.tsx (new): focusable label, focus reveals tooltip + aria-describedby + aria-expanded, blur hides, Escape dismisses, click toggles back off, default-label fallback.

Disclosures (pre-existing on main, unrelated to this PR)

1. src/components/common/__tests__/CreatorInitialsAvatar.test.tsx fails on main. The test calls getByLabelText('Alex Rivers initials avatar') but the component renders the initials with aria-hidden="true" (no matching aria-label). Reproducible on unmodified upstream main; the failing component / test were modified independently of this PR (commits e92b472 / 0213bcd). Not touched here.
2. PendingOnboardingPlaceholder ships as a new component but is only consumed through CreatorBio's isOnboardingPending flag in this PR. Wiring it into CreatorProfileInfoGrid and the social links list would require those components to know about onboarding state, which they currently don't — that surface area is a logical follow-up, not part of the four issues' scope.

[drips-wave]

@pre-cious-Igwealor Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits