feat(ui): ship canonical single-column library and interactive lab - #7
Conversation
Carry the OpenCoven Chat visual language onto the specimen browser so the two products read as cut from one material: near-black surfaces separated by depth rather than borders alone, violet depth under the shell, cyan reserved for circuitry and focus, and a hexagonal field held at texture strength. The shared token set already made this mostly a matter of arrangement -- the dark `--presence` is byte-identical to chat's `--accent-violet`. Cyan is the one hue that had to be introduced, and it resolves per scheme: against near-black it earns its keep, on the light paper surface it goes weak, so light falls back to the semantic presence and ring tokens that already own accent duty there. Nothing here reaches into packages/ui tokens or a public component's own surface; the design doc holds package and registry output fixed. Also adopts the in-flight CLI / React API tab split left behind in the working tree by a session that has since exited, and updates the contract that still described the previous single Install tab. Replace the blanket `gradient(` ban in verify-contracts with the intent it was standing in for. That ban was a blunt proxy added while recovering a broken shell, and the approved layout-parity design and plan both now specify gradient treatments in this exact file, so it had begun failing the repository's own accepted direction. Three precise contracts replace it: decorative layers stay out of public component surfaces, they yield to prefers-contrast and forced-colors, and the chrome never animates perpetually. Each was mutation-tested to confirm it fails when violated. Verification: pnpm check exit 0 (49 architecture contracts, 11 package tests, build, deploy and package export checks); 9/9 visual-review scenarios captured passing across dark, light, compact, mobile, 200% text and both routes; a 3x detail probe confirms the circuitry trace paints real cyan and that zero animations run on load. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
🟡 Changes recommended
The new scripts/serve-dist.mjs path join logic currently prevents serving static assets, and scripts/zoom-probe.mjs can fail on first run because it doesn’t create its output directory.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR updates the specimens app shell to match the OpenCoven Chat visual language, while also adopting an in-flight “CLI / React API” split in the specimen card code panels and tightening CSS contract verification around decorative/animation constraints.
Changes:
- Adds “ritual-tech finish” styling to the specimens shell (depth layers, card gradients/trace, chrome/glass topbar/rail, contrast + forced-colors fallbacks).
- Reworks specimen card code panels into separate CLI and React API tabs, and updates the visual-review scenarios accordingly.
- Replaces the previous “no gradients” CSS contract with more targeted contracts, and adds new scripts to support capture workflows.
File summaries
| File | Description |
|---|---|
scripts/zoom-probe.mjs |
New Playwright probe for 3x card capture + computed-style checks and “no running animations” runtime check. |
scripts/visual-review.mjs |
Updates scenarios/assertions to match the new “CLI / React API” code tab split and mobile tab scroll validation. |
scripts/verify-contracts.mjs |
Replaces the blanket gradient ban with targeted CSS contracts; updates tab trigger expectations. |
scripts/serve-dist.mjs |
New minimal SPA static server for serving apps/specimens/dist during capture. |
apps/specimens/src/specimens.css |
Adds the ritual-tech finish styling and accessibility fallbacks; removes old install-grid styling. |
apps/specimens/src/app.tsx |
Splits the prior combined install/usage content into distinct “CLI” and “React API” tabs per specimen card. |
.gitignore |
Ignores agent scratch dir and new visual capture output directories. |
Review details
- Files reviewed: 6/7 changed files
- Comments generated: 3
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
|
@copilot Fix the code for all comments in this review thread. When a review comment includes a suggested change, apply the suggestion exactly. Do not make changes beyond what is described in the linked review thread. |
Co-authored-by: BunsDev <68980965+BunsDev@users.noreply.github.com>
Co-authored-by: BunsDev <68980965+BunsDev@users.noreply.github.com>
Addressed in 3e84ca3 (with the earlier thread fixes landed in 8885dd3). |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…esthetic # Conflicts: # apps/specimens/src/app.tsx # apps/specimens/src/specimens.css # scripts/verify-contracts.mjs Co-authored-by: BunsDev <68980965+BunsDev@users.noreply.github.com>
Co-authored-by: BunsDev <68980965+BunsDev@users.noreply.github.com>
Co-authored-by: BunsDev <68980965+BunsDev@users.noreply.github.com>
Addressed in |
Refresh the specimens app with a six-scene lab, fixed-viewport navigation, live previews, and syntax-highlighted copyable source snippets, plus the OpenCoven mark favicon and updated docs. Enrich the Composer and Run Rail blocks with tool slots, keyboard send, plan/resources support, stronger visual guidance, and matching registry metadata, and add coverage for the new specimen and block behaviors.
Align the specimen library with canonical OpenCoven branding, present one preview-first card per row, and preserve layout and demo state across Preview/Source tabs. Complete the interactive six-scene Lab and synchronize package and registry output. Polish enlarged-text layouts, mobile skip navigation, forced-colors selection and asynchronous copy focus. Expand browser coverage to every specimen, all Lab scenes, native interaction journeys, source fidelity and accessibility modes. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
BunsDev
changed the title
Keep the fixed skip link inside the viewport and reserve enough inline space for mobile rail labels when fallback fonts grow at 200% text. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Record which layout regions own document overflow and report rail label sizing without weakening the mobile assertions. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Trace Linux overflow to unbroken hero text and oversized rail labels. Allow headings to wrap, omit redundant counts in compact navigation, and exercise wide display fonts at 200% text. Keep strict hit-testing while waiting for browser controls to settle before native clicks. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
Final audit follow-up: Linux CI isolated the remaining enlarged-text overflow to the hero heading and rail label/count combination. The latest commit corrects both and adds a ninth mobile case using wide display fonts. Native click audits now wait for controls to settle while retaining strict hit-testing. Deployment note: the secondary Vercel project |
Summary
Audit-driven polish
Verification
pnpm check: passing, including all 24 tests, 51 architecture contracts, registry freshness, clean-consumer installation of both blocks, builds and public exports.This supersedes the earlier decorative ritual-tech proposal with the requested canonical brand treatment. Existing branch history and contributor attribution are preserved.