Frontend view-layer rebuild on V3 design system

[Dgetsylver]

Goal

From-scratch view-layer rebuild of the dapp against the V3 design system (Turbolong Design System_V3). Pure typed render functions (ts-port pattern) + V3 component contracts + V3 --tl-* tokens. Keep the entire data/service/wallet/contract layer — only rendering/markup/styles change. Supersedes the CSS-overlay attempt (#304, closed).

Decisions

• feat(ui): rebuild Dashboard (ts-port) + restyle Trade to the design system #304 closed (overlay was the wrong approach).
• Full module extraction: split main.ts (4,342-line monolith) — extract cross-cutting systems (wallet-init, network/theme/expert state, modal, TxStepper, toast, keyboard, tooltips, app-state) into their own modules; main.ts becomes a thin boot. View rendering moves to new ui/ + views/ modules.
• Branch feat/ui-rebuild-v3 off main.

REUSE / REPLACE / NEW

• REUSE verbatim: blend.ts, defindex.ts, aquarius.ts, aquarius_listings.ts, history.ts, i18n.ts, locales.ts, tour.ts (~80 data/XDR/submit exports — none missing for any screen).
• EXTRACT (keep behavior): wallet-kit init, setNetwork, theme, expert mode, modal system, TxStepper, toast, keyboard shortcuts, tooltips, data/selection/view state.
• REPLACE: ds/*.css → V3 tokens/*.css; old style.css presentation + (any) view CSS; the ~19 render*() HTML-string fns + static screen markup in index.html.
• NEW: src/ui/*.ts (17 component builders honoring each .d.ts), src/views/*.ts (6 screens), src/tokens/ (V3), thin main.ts.

Critical behavior to preserve (per SPECS)

• Boots to Dashboard. Nav: Dashboard · Trade · Vault · Compare · Swap.
• Account Health (PR fix(ui): pool-wide Account HF instead of scary per-asset HF (cross-asset positions) #295): per-pool, account-wide = Σ(collateralUsd × cFactor) ÷ Σ(debtUsd). Dashboard groups by pool account; legs tagged Looped/Collateral/Borrow; cross-asset pool → "Cross-collateralized" badge + explainer, no per-asset HF/liq line.
• APR vs APY: aprToApy(apr)=(Math.pow(1+apr/100/365,365)−1)*100; netSupplyApy=aprToApy(base)+blndEmissions; netBorrowApy=aprToApy(base)−blndEmissions.
• Trade: pool selector (frozen state) + asset tabs; pool stats incl Collateral Factor; supply/borrow APR breakdown; Current vs Projected (utilization-aware) APY; return calculator; Account Health + RiskBand; Adjust sub-tabs (Leverage/Add/Remove); BLND Claim & Convert (compound via Add Funds, no Resupply); activity timeline w/ Stellar Expert links; Close confirm. Every signable action → Sign→Submit→Confirmed TxStepper + toast.
• Dashboard lists Vault holdings in a separate "Vaults (passive · auto-rebalanced)" group.
• Use "DEX Rate" (never "Aqua rate"). Mobile <720px: single column + bottom tab bar.
• Settings (expert/theme/lang EN·ES·PT-BR/alerts/tour/shortcuts/status), network toggle + testnet banner, wallet picker (Freighter/Lobstr/xBull/Hana/Albedo/Ledger), first-visit risk disclaimer. Tokens-only (dark default + [data-theme=light]).

Phases (each: own commits, build+lint+boot-probe+screenshot-vs-ref, check-in before next)

• P1 Foundations — V3 tokens/fonts; el() helper; 17 component builders (+ CSS) to .d.ts contracts.
• P2 Shell + extraction — new index.html skeleton; extract cross-cutting systems to modules; top nav/settings/wallet/network/testnet/mobile-tab-bar; modal/toast/TxStepper mounts; routing (default Dashboard); thin main.ts boot.
• P3 Dashboard — port ts-port; wire fetchUserPositions + aggregatePoolAccount + vault reads.
• P4 — Trade → Vault → Compare → Swap → Status, wired to services (mocks marked TODO only where no source).
• P5 Landing — from ui_kits/marketing.
• P6 QA + cleanup — vs refs, dark/light, mobile, i18n, tx-stepper on all flows; remove dead old UI. Optional: _adherence.oxlintrc.json token-compliance check.

Discipline

Small reviewable commits per phase. After each screen: report which data fn it's wired to + anything still mocked. If a referenced data fn is missing → stop and ask. No contract/on-chain changes.