Spring dashed leaders on the docs sidebar

[radiumcoders]

Summary

• Add a dashed trail on the selected docs sidebar item, with a second hover trail that springs between rows without moving the selected mark.
• Keep the hover trail across section headings so it no longer jumps back to the current page.
• Fill the Phosphor Score demo stage with the dark CRT ground so the score no longer sits on the page background.

Test plan

• Open /docs and confirm the current page shows a dashed trail, with no x.
• Hover other items, including across Background / Shaders / Footers, and confirm a second trail springs over while the selected trail stays put.
• Click a new page and confirm the selected trail springs to that item.
• Open Phosphor Score in dark mode and confirm the preview stage matches the CRT ground.

Made with Cursor

Summary by CodeRabbit

• UI Improvements

  • Added an animated dashed marker for active and hovered items in the documentation sidebar.
  • Improved sidebar navigation styling for separators, folders, and nested pages.
  • Respects reduced-motion preferences by minimizing marker animations.

• Visual Updates

  • Refined the Phosphor Score demo preview with improved background handling, rounded clipping, and overflow behavior across themes.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: e22fc0da-eff8-4441-b027-6f5933053948

📥 Commits

Reviewing files that changed from the base of the PR and between 4682612 and 7ee0f72.

📒 Files selected for processing (2)

• components/docs-sidebar.tsx
• registry/phosphor-score/phosphor-score-demo.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The docs sidebar now tracks hovered navigation items and displays animated dashed markers. Section indentation and heading styles were updated. The Phosphor Score preview now uses an inner background container with dark-theme support.

Changes

Docs sidebar interaction

Layer / File(s)	Summary
Sidebar hover marker rendering components/docs-sidebar.tsx	The sidebar adds DashMark with motion/react animations. Active and hovered page items render the marker with different opacity values.
Sidebar navigation state and indentation components/docs-sidebar.tsx	NavList stores and clears the hovered URL. Navigation items receive hover state, and folder indentation uses section-aware logic. Shared heading styles apply to separators and folder labels.

Phosphor Score preview styling

Layer / File(s)	Summary
Preview background container registry/phosphor-score/phosphor-score-demo.tsx	The preview uses an inner rounded, clipped container and applies DARK_BG in dark mode.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Suggested reviewers: cursoragent

Merge Risk: ⚪ Minimal · up to 7ee0f

The sidebar interaction and preview background changes have no identified merge-blocking risk.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 7 functions across 2 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: animated dashed trails on the docs sidebar.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch improve/docs-sidebar

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Cloudflare preview is ready.

Preview	https://pr-27-23rd-dev.radiumcoders.workers.dev
This commit	https://f50f0129-23rd-dev.radiumcoders.workers.dev

Production (23rd.dev) is unchanged. This preview URL stays the same as you push to this PR.