Preview Contract Explorer design directions

[willemneal]

Review the directions

This PR includes isolated Cloudflare hosted-preview support. The one-time Cloudflare GitHub connection is still required before a hosted URL appears; see Hosted preview setup. Until then, the full-size screenshots below and local interactive preview remain available.

Run the interactive preview

git fetch origin pull/60/head:pr-60
git switch pr-60
npm ci
npm run dev

Open http://localhost:5173/explorer-preview. The comparison page links to all three directions:

• /explorer-preview/continuum
• /explorer-preview/workbench
• /explorer-preview/console

The fixtures are deterministic and do not make network calls, request real signatures, or submit transactions. Use the fixture picker, screen tabs, theme toggle, and mobile control to exercise each direction.

01 — Registry Continuum

Quiet and provenance-first; the screen unfolds from identity to code to interaction.

02 — Focused Workbench

Task-first, dense, and closest to the current Registry UI language.

03 — Collaborative Console

Execution and Nido approval state are peers when a call becomes a proposal.

Responsive example (320px)

Current design lean

Use Focused Workbench as the structural foundation, import Registry Continuum provenance hierarchy, and reveal Collaborative Console approval state when an invocation becomes a proposal.

Included behavior

• search/open, overview, invocation, simulation, generated TypeScript/CLI, submission, and proposal screens
• Token transfer, Registry deploy, and Nido policy fixtures
• temporary Testnet account creation without exposing Friendbot
• retractable proposal approval and stable proposal-link states
• light/dark themes and desktop/mobile layouts
• existing Registry pages and navigation remain unchanged outside /explorer-preview

Hosted preview support

• separate wrangler.preview.jsonc enables preview URLs on the dedicated registry-ui Worker
• npm run build:preview uses Testnet endpoints, clears inherited named environments, and validates the generated upload configuration
• GitHub CI validates previews without deployment secrets or uploads
• live Testnet and Mainnet configuration and deployment workflow remain unchanged
• the setup guide covers Cloudflare GitHub connection, branch URLs, public/private access, and first-build verification
• hosting is not activated by this commit alone; the Cloudflare account setup remains outstanding

Validation

• npm ci with the repository-required npm 10.9.0
• npm run typecheck
• npm run lint
• npm run build
• npm run build:preview
• default, Testnet, Mainnet, and preview build regression checks; preview validation rejects all non-preview outputs
• preview build remains Testnet-only even with an inherited CLOUDFLARE_ENV=stellar
• browser pass across all routes at 1280px and 320px
• exercised simulation reset, temporary Testnet account creation, proposal approval, and approval retraction
• zero browser console errors and zero horizontal overflow

The same gallery and instructions live in docs/contract-explorer-previews/README.md.