Chore/finalize governance onboarding

[HushLuxe]

Finalize governance onboarding UI/components (#58)

Overview

This PR finalizes the AI-generated onboarding widget from PR #57 for human review.
It modularizes a 870-line monolith into 9 focused files, fixes a real stale-closure
state-update bug, makes the wizard responsive on mobile, hardens the accessibility
wiring, and updates the public design-system primitives (PageWizard, Stepper)
to support the onboarding flow cleanly without leaking widget-specific knowledge.
Three follow-up commits align the UI to the Stitch + Figma references.

Fixes #58.
References #55 (parent spec)
and #56 (plan).

Changes Made

Modularization

• packages/governance-widget/src/GovernanceOnboardingWidget.tsx reduced from
  870 LOC → 67 LOC (just PageWizardProvider wiring).
• New packages/governance-widget/src/onboarding/ tree:
  • constants.ts — step list, required fields, defaults
  • copy.ts — house-specific copy
  • validation.ts — pure field validation
  • resolveStakeSummary.ts — pure stake status resolver
  • OnboardingNotice.tsx, HouseSelectionCard.tsx, ProfileField.tsx,
    ProfileTextAreaField.tsx — leaf primitives
  • GovernanceOnboardingFlow.tsx — orchestration
  • steps/{Welcome,House,Profile,Stake,Success}StepContent.tsx — per-step views

Bug fixes

• Stale-closure in updateProfileField — made PageWizard.setData accept a
  functional (prev) => patch form so rapid typing can't lose characters.
  Added a Playwright regression test (Profile field handles rapid typing)
  that types 90+ chars into three different fields with delay: 0 and
  asserts the full value round-trips. The test also exercises the
  clear-then-retype path (overwrite, not just incremental typing).
• resolveStakeSummary all-pending → "Stake confirmed" bug — added an
  explicit allCompleted guard so all-pending lists correctly resolve to
  "Stake not yet started" instead of falling through to success.
• ensureScrollbarHidden ran in render — moved into useEffect.
• Stepper useEffect deps included raw steps array — trimmed to
  [resolvedActiveStepId] so consumer re-renders don't fight user scroll position.
• Step id/label mismatch (success vs Complete) — renamed visible label
  to "Success".
• Duplicate @goodwidget/governance-widget workspace dep in
  examples/storybook/package.json — removed.

Mobile responsiveness

• PageWizard.tsx: replaced the always-rendered scroll-row with two
  mutually-exclusive presentations:
  • <sm (≤480px): compact "Step N of 5 — Title" summary only
  • >sm (≥481px): full 5-circle horizontal track with connectors
• Added media: { sm, md, gtSm, gtMd } breakpoints to createTamagui config
  to enable responsive props throughout the design system.
• Added 2 new mobile-viewport Storybook stories (CustodialMobileWelcome,
  CustodialMobileDarkProfile) at 328px width.

Accessibility

• HouseOptionButton: replaced aria-pressed with role="radio" +
  aria-checked (correct ARIA pattern for single-select).
• HouseStepContent: wrapped house cards in role="radiogroup" with
  aria-label="Select your governance house".
• PageWizard step circles: per-step data-testid="PageWizardStep-${id}" and
  data-state="active|completed|pending" for testability and screen-reader
  introspection.

Theme-correctness / contrast

• PageWizard completed-step circle: previously hardcoded $white text on
  solid $success background. This failed WCAG AA in both themes:
  • Light: #FFFFFF on #13C636 ≈ 2.0:1
  • Dark: #FFFFFF on #13C636 ≈ 3.0:1
    Now uses $successMuted background with theme-aware $color text.
    Verified contrast:
  • Light: $color (#0D182D) on alpha-composited $successMuted ≈ 15.2:1 (WCAG AAA)
  • Dark: $color (#FFFFFF) on alpha-composited $successMuted ≈ 14.3:1 (WCAG AAA)
• HouseOptionButton: dropped the name from createComponent() so it
  no longer pollutes the shared @goodwidget/ui manifest namespace with a
  widget-internal component.
• ProfileTextAreaField: replaced the hand-rolled Stack-as-textarea with
  Tamagui's native TextArea primitive, including label association and
  focus/error styling.

Polish

• WelcomeStepContent: removed the original PR Add governance onboarding UI flow and reusable wizard primitives #57 descriptive paragraph
  ("This onboarding flow stays UI-only for now…") that was AI-draft
  developer-facing copy leaking into end-user UI. The screen now renders
  the OnboardingNotice only; copy is driven entirely by the
  verified/unverified state.
• StakeStepContent: added inline comment explaining why maxHeight={320}
  overrides the Stepper default of 360 (wizard vertical budget on a 720px
  mobile frame).

Type hygiene

• Extracted PageWizardDataPatch type alias from the inline union on setData.
• Moved GovernanceWizardData from two duplicated local interfaces into
  types.ts, exported via index.ts.

Verification Checklist

• pnpm install — clean
• pnpm --filter @goodwidget/ui build — clean
• pnpm --filter @goodwidget/governance-widget build — clean
• pnpm --filter @goodwidget/governance-widget lint — 0 errors, 0 warnings
• pnpm run build (full monorepo) — 8/8 packages green
• pnpm --filter @goodwidget/storybook build-storybook — clean
• npx playwright test onboarding.spec.ts --workers=1 — 8/8 passed
  • Includes new regression test for the stale-closure bug
  • Includes the multi-line missionStatement rapid-typing assertion
  • Includes clear-then-retype assertion for overwrite reconciliation
  • Mobile dark profile story renders correctly

[L03TJ3]

@HushLuxe Hi, whats the reason for closing?

[HushLuxe]

I pulled from a wrong base branch. I forked locally off copilot/plan-governance-ui-onboarding-components, but when I opened #59 I left the base at main, so the diff pulled in the whole copilot plan + homepage components commits (~4000+ LOC) on top of my finish work. I have already reopened #60 with the correct branch

[HushLuxe]

@L03TJ3