Repository navigation
feat(docs): emerald homepage redesign with an interactive token graph - #17
Merged
Merged
Conversation
Expand the demo document to 15 tokens across three layers and project nodes, edges, and per-proposal outcomes straight from the engine at build time: a layer-skip violation with three PT1004 findings, a compliant alias that resolves to the brand emerald, and a five-change rename. The violation preset overlays the baseline wires so compliant references stay visible under the red lanes, consumer counts come from the wires in view, and the diff report renders single-line affected-token entries. Read the published package version for the nav chip.
…ument Replace the proof-panel-and-tree layout with the approved landing design: a hero install card with package-manager tabs and a row-wide copy control, a live check command line with proposal chips, an SVG token graph with hover-to-trace, click-to-inspect, hand-tuned wire routing, red bypass lanes and the layer-skip tag, a tinted verdict bar with a 700ms checking sweep, before/after review cards, a colorized diff transcript, quickstart steps, the standards strip, and a compact single-row footer. Every graph node is a keyboard-operable button with a 44px hit target, the drift and blink loops stop under prefers-reduced-motion, and a nav toggle switches the whole site between the dark and light themes through next-themes. Schibsted Grotesk and IBM Plex Mono replace Inter and Geist Mono, and Phosphor icons replace Lucide in the chrome.
Swap the docs and playground palettes to the landing design's emerald system, add the light-theme variable set to the contract, move the retired Lichen hexes onto the former-color blocklist, and point the favicons and README badge at the light-surface emerald. The brand checker now accepts one approved value per theme for each variable, requires the graph's structural classes and treatments, keeps the glow, pointer-tracking, and blur bans, and permits the design's wire drift and cursor loops. Playground buttons and filter chips drop their pill radii for the 8px control shape, and primary actions fill with the accent instead of white.
The approved homepage copy keeps 'what it reaches:', 'locally', and the violation note's 'directly' and 'only' word for word, so the prose gate carries exact-match exceptions for those four phrases.
Rewrite the homepage spec around the token graph: proposal chips retry until hydration lands, the violation preset asserts the three red lanes and the layer-skip tag, node clicks pin the inspect line, focus traces the dependency chain, the install card switches package managers, the graph scrolls in its own strip on compact screens, and a new spec drives the light theme end to end. Palette assertions across the shell and playground specs move to the emerald values, and the contrast helper composites the new surface and tint colors.
Rewrite the design-system reference around the shipped brand: emerald and forest tokens with the light overlay, Schibsted Grotesk and IBM Plex Mono, uppercase kickers, 8px controls and 12px surfaces, the sanctioned graph motion with its reduced-motion kill, and the token graph's interaction contract.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Key the diff transcript lines by content occurrence instead of array index, and document the deliberate ARIA patterns the a11y rule cannot infer: the package-manager tabs and proposal chips are WAI-ARIA radio groups of styled buttons with roving tabindex, and graph nodes carry role=button because HTML buttons cannot exist inside SVG.
There was a problem hiding this comment.
🟡 Changes recommended
A few correctness issues were found in new UI behavior and e2e contrast checking that should be fixed before approval.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR updates the Primitree docs homepage to the new “emerald” landing design, replacing the prior “Living Canopy” demo with a proposal-driven proof panel and interactive token graph, while enforcing the refreshed brand palette across docs + playground (including a new light theme).
Changes:
- Replaces the homepage governance demo UI with an interactive token graph + proposal chips + diff transcript, and removes the legacy
living-canopy.tsx. - Introduces brand/theme updates (emerald palette, light theme toggle, updated logo mark rendering) and updates corresponding tests and brand/prose enforcement rules.
- Aligns playground styling and e2e specs to the new palette and component shapes.
File summaries
| File | Description |
|---|---|
| tests/e2e/standalone-playground.spec.ts | Updates asserted playground UI colors to the new palette. |
| tests/e2e/docs-shell.spec.ts | Updates shell theme assertions for the new background/primary colors. |
| tests/e2e/docs-playground.spec.ts | Updates embedded playground assertions to the new palette. |
| tests/e2e/docs-home-governance.spec.ts | Updates/expands homepage governance e2e coverage for proposals, graph interactions, reduced motion, and theme toggle. |
| scripts/prose/rules.mjs | Adds targeted prose allowlist entries for approved landing copy. |
| scripts/check-brand.test.mjs | Updates brand contract tests for token graph + new approved palette roles. |
| scripts/brand-rules.mjs | Updates brand enforcement rules for the emerald palette, light theme variables, and token graph selectors. |
| README.md | Updates the DTCG badge color to match the new brand accent. |
| pnpm-lock.yaml | Locks new deps (@phosphor-icons/react, next-themes) and related resolution changes. |
| docs/superpowers/specs/2026-08-20-homepage-governance-proof-design.md | Adds the approved implementation spec for the homepage redesign. |
| apps/playground/src/styles.css | Updates playground palette, button styling, borders, and radii to match the new brand. |
| apps/playground/src/color-system.test.ts | Updates playground theme tests to assert the new palette + favicon fill. |
| apps/playground/public/favicon.svg | Updates playground favicon fill to the new accent color. |
| apps/docs/tests/governance-demo.test.ts | Extends governance demo tests for proposal deck, diff report, and layer snippet. |
| apps/docs/tests/color-system.test.ts | Updates docs palette tests, adds light theme assertions, and token-graph-specific expectations. |
| apps/docs/tests/brand-logo.test.ts | Updates BrandLogo tests for inline SVG mark rendering. |
| apps/docs/public/favicon.svg | Updates docs favicon fill to the new accent color. |
| apps/docs/package.json | Adds @phosphor-icons/react and next-themes dependencies. |
| apps/docs/lib/landing/release.ts | Adds build-time version reader for displaying the CLI/package version in the UI. |
| apps/docs/lib/landing/governance-demo.ts | Reworks demo generation to precompute proposal outcomes, graph projection, and diff report via @primitree/core. |
| apps/docs/DESIGN.md | Updates the documented design system (palette, typography, motion rules) to the new brand direction. |
| apps/docs/components/playground/playground.css | Updates embedded playground UI styling to match the new palette and shape system. |
| apps/docs/components/landing/token-graph.tsx | Adds the new interactive SVG token graph component (hover trace, click inspect, violation lanes). |
| apps/docs/components/landing/theme-toggle.tsx | Adds a theme toggle using next-themes. |
| apps/docs/components/landing/site-chrome.tsx | Updates header/footer chrome: GitHub icon via phosphor, theme toggle, version label, footer compaction. |
| apps/docs/components/landing/proof-panel.tsx | Adds the proposal-driven proof panel orchestrating graph, verdict, and inspection details. |
| apps/docs/components/landing/living-canopy.tsx | Removes the previous scroll-choreography “Living Canopy” implementation. |
| apps/docs/components/landing/install-card.tsx | Adds install card with package-manager tabs and click-to-copy behavior. |
| apps/docs/components/landing/governance-home.tsx | Rebuilds homepage sections to match the new governance proof design and content structure. |
| apps/docs/components/brand-logo.tsx | Switches BrandLogo to an inline SVG mark (BrandMark) and adjusts typography/spacing. |
| apps/docs/app/layout.tsx | Updates fonts and configures theme attributes for data-theme support. |
| apps/docs/app/(home)/page.tsx | Passes the version label into the marketing shell for display in the header. |
Review details
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
- Files reviewed: 31/34 changed files
- Comments generated: 4
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 35bba372ea
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Review findings from the PR bots, verified against the CLI: check only evaluates policy, so the install card and quickstart now run primitree build for the wrote line; the proposal id moves into a shell comment because check has no --proposal flag; the quickstart layers excerpt carries the roots and values fields config validation requires; the copy control reports copied only after the clipboard write succeeds; and the rename comparison names the stale reference that would block instead of implying the passing rename blocks anything.
Key the toggle label off the root data-theme attribute through CSS so the first paint is correct with no mounted-state flash, and memoize the package-manifest read the header and quickstart both use.
A two-value contract entry now demands both the dark value and the light override in the stylesheet, so deleting the light declaration or duplicating the dark one fails check:brand instead of passing.
Unlayered author rules already out-rank the layered utility styles the important flags were fighting, so the icon controls, sidebar border, and hover treatments drop them entirely. The two places important is load-bearing stay and say why: the scroll-lock rule beats react-remove-scroll's inline styles and the reduced-motion kill switch must out-rank every animation. Descending-specificity orderings are untangled, the redundant reduced-motion blocks are gone, and the version chip hides below 430px so the compact header never overflows.
Replace non-null assertions in the core and hooks tests with a must() narrowing helper, resolve the graph runtime's three assertions with real guards that reuse the existing unknown-token and unresolved-value diagnostics, use template literals and literal keys where the linter asked, and import path through the node: protocol in the hooks Vite config. biome lint now reports zero errors and zero warnings.
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Ships the approved landing redesign and makes its design system the enforced brand.
primitree checkcommand line with proposal chips, an interactive SVG token graph (hover-to-trace, click-to-inspect, red layer-skip bypass lanes, verdict bar with a 700ms checking sweep), before/after review cards, a colorizedprimitree difftranscript, quickstart steps, standards strip, and a compact footer.@primitree/coreat build time through the same functions the CLI calls; drift in engine behavior fails the docs build.data-themevia next-themes), Schibsted Grotesk + IBM Plex Mono, sanctioned graph motion (wire drift, block cursor, hero dot grid) that fully stops underprefers-reduced-motion. The brand contract inscripts/brand-rules.mjsnow enforces this system and blocklists the retired Lichen hexes. Playground palettes, favicons, and the README badge follow, and playground buttons drop their pill radii for the 8px control shape.Verification
check:brand,check:prose,check:links, typecheck, and production build all pass