From 071e2cdc99ede5083133296f8a409d9e3077d738 Mon Sep 17 00:00:00 2001
From: Radiumcoders <radiumcoders@gmail.com>
Date: Fri, 11 Sep 2026 16:51:31 +0530
Subject: [PATCH 1/2] feat: spring dashed leaders along the docs sidebar

Keep the selected trail on the current page and animate a second hover trail between items, including across section headings.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/docs-sidebar.tsx | 127 +++++++++++++++++++++++++++++-------
 1 file changed, 104 insertions(+), 23 deletions(-)

diff --git a/components/docs-sidebar.tsx b/components/docs-sidebar.tsx
index 3753080..d209174 100644
--- a/components/docs-sidebar.tsx
+++ b/components/docs-sidebar.tsx
@@ -3,6 +3,7 @@
 import * as React from "react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
+import { LayoutGroup, motion, useReducedMotion } from "motion/react"
 
 import { DocsSidebarTrigger } from "@/components/docs-sidebar-trigger"
 import { Logo } from "@/components/logo"
@@ -48,28 +49,78 @@ function isCurrent(pathname: string, url: string) {
   return pathname === url
 }
 
+const headingClassName =
+  "mt-4 mb-0.5 h-auto px-3 py-1 truncate text-[11px] font-medium tracking-[0.16em] text-foreground/35 uppercase first:mt-0"
+
+const markSpring = {
+  type: "spring" as const,
+  stiffness: 460,
+  damping: 34,
+  mass: 0.7,
+}
+
+function DashMark({
+  layoutId,
+  opacity,
+}: {
+  layoutId: string
+  opacity: number
+}) {
+  const reduce = useReducedMotion() ?? false
+
+  return (
+    <motion.span
+      layoutId={layoutId}
+      aria-hidden
+      className="pointer-events-none ml-2 h-px min-w-3 flex-1 bg-[repeating-linear-gradient(90deg,currentColor_0_5px,transparent_5px_8px)]"
+      initial={false}
+      animate={{ opacity }}
+      transition={reduce ? { duration: 0 } : markSpring}
+    />
+  )
+}
+
+type TabHover = {
+  hoveredUrl: string | null
+  onHover: (url: string) => void
+}
+
 function PageItem({
   node,
   pathname,
   indented = false,
+  hoveredUrl,
+  onHover,
 }: {
   node: PageNode
   pathname: string
   indented?: boolean
-}) {
+} & TabHover) {
+  const active = isCurrent(pathname, node.url)
+  const showHover = hoveredUrl === node.url && !active
+
   return (
-    <SidebarMenuItem>
+    <SidebarMenuItem
+      onPointerEnter={() => onHover(node.url)}
+      onMouseEnter={() => onHover(node.url)}
+    >
       <SidebarMenuButton
         render={
           <Link href={node.url} aria-label={String(node.name ?? "Page")} />
         }
-        isActive={isCurrent(pathname, node.url)}
+        isActive={active}
         className={cn(
-          "hover:bg-foreground/5 data-active:bg-foreground/10",
+          "h-8 gap-0 overflow-visible rounded-lg bg-transparent font-normal text-foreground/45 transition-colors duration-200 hover:bg-transparent hover:text-foreground/80 active:bg-transparent data-active:bg-transparent data-active:font-normal data-active:text-foreground data-active:hover:bg-transparent data-active:hover:text-foreground [&>span:last-child]:overflow-visible [&>span:last-child]:text-clip",
           indented && "pl-6"
         )}
       >
-        <span className="truncate">{node.name}</span>
+        <span className="min-w-0 truncate">{node.name}</span>
+        {active ? (
+          <DashMark layoutId="docs-sidebar-selected-dashes" opacity={0.85} />
+        ) : null}
+        {showHover ? (
+          <DashMark layoutId="docs-sidebar-hover-dashes" opacity={0.4} />
+        ) : null}
       </SidebarMenuButton>
     </SidebarMenuItem>
   )
@@ -81,9 +132,7 @@ function SeparatorItem({ node }: { node: SeparatorNode }) {
   }
 
   return (
-    <SidebarGroupLabel className="mt-3 truncate text-[11px] font-medium tracking-wide text-muted-foreground uppercase first:mt-0">
-      {node.name}
-    </SidebarGroupLabel>
+    <SidebarGroupLabel className={headingClassName}>{node.name}</SidebarGroupLabel>
   )
 }
 
@@ -95,28 +144,37 @@ function NavItems({
   nodes,
   pathname,
   indented = false,
+  hoveredUrl,
+  onHover,
 }: {
   nodes: TreeNode[]
   pathname: string
   indented?: boolean
-}) {
+} & TabHover) {
+  let inSection = indented
+
   return nodes.map((node, i) => {
-    if (isPage(node)) {
+    if (isSeparator(node)) {
+      if (node.name != null && node.name !== "") {
+        inSection = true
+      }
       return (
-        <PageItem
-          key={node.url}
+        <SeparatorItem
+          key={`sep-${String(node.name ?? "")}-${i}`}
           node={node}
-          pathname={pathname}
-          indented={indented}
         />
       )
     }
 
-    if (isSeparator(node)) {
+    if (isPage(node)) {
       return (
-        <SeparatorItem
-          key={`sep-${String(node.name ?? "")}-${i}`}
+        <PageItem
+          key={node.url}
           node={node}
+          pathname={pathname}
+          indented={inSection}
+          hoveredUrl={hoveredUrl}
+          onHover={onHover}
         />
       )
     }
@@ -127,14 +185,24 @@ function NavItems({
       return (
         <React.Fragment key={folderKey(node, i)}>
           {node.index ? (
-            <PageItem node={node.index} pathname={pathname} />
+            <PageItem
+              node={node.index}
+              pathname={pathname}
+              indented={inSection}
+              hoveredUrl={hoveredUrl}
+              onHover={onHover}
+            />
           ) : hasSectionedChildren ? null : (
-            <SidebarGroupLabel>{node.name}</SidebarGroupLabel>
+            <SidebarGroupLabel className={headingClassName}>
+              {node.name}
+            </SidebarGroupLabel>
           )}
           <NavItems
             nodes={node.children}
             pathname={pathname}
-            indented={Boolean(node.index) || !hasSectionedChildren}
+            indented={inSection || hasSectionedChildren || !node.index}
+            hoveredUrl={hoveredUrl}
+            onHover={onHover}
           />
         </React.Fragment>
       )
@@ -153,10 +221,23 @@ function NavList({
   pathname: string
   indented?: boolean
 }) {
+  const [hoveredUrl, setHoveredUrl] = React.useState<string | null>(null)
+
   return (
-    <SidebarMenu>
-      <NavItems nodes={nodes} pathname={pathname} indented={indented} />
-    </SidebarMenu>
+    <LayoutGroup id="docs-sidebar-tabs">
+      <SidebarMenu
+        onPointerLeave={() => setHoveredUrl(null)}
+        onMouseLeave={() => setHoveredUrl(null)}
+      >
+        <NavItems
+          nodes={nodes}
+          pathname={pathname}
+          indented={indented}
+          hoveredUrl={hoveredUrl}
+          onHover={(url) => setHoveredUrl(url)}
+        />
+      </SidebarMenu>
+    </LayoutGroup>
   )
 }
 

From 7ee0f72aa98924c0afb3e2316706f019861d3e60 Mon Sep 17 00:00:00 2001
From: Radiumcoders <radiumcoders@gmail.com>
Date: Fri, 11 Sep 2026 16:51:40 +0530
Subject: [PATCH 2/2] fix: fill the Phosphor Score demo with the dark CRT
 ground

The stage was using the page background, so the score sat on a mismatched field in dark mode.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 registry/phosphor-score/phosphor-score-demo.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/registry/phosphor-score/phosphor-score-demo.tsx b/registry/phosphor-score/phosphor-score-demo.tsx
index 1d4c9d8..5737f75 100644
--- a/registry/phosphor-score/phosphor-score-demo.tsx
+++ b/registry/phosphor-score/phosphor-score-demo.tsx
@@ -12,6 +12,7 @@ import { ComponentPreview } from "@/components/component-preview"
 import { useHydratedTheme } from "@/hooks/use-hydrated-theme"
 import { usePreviewProps } from "@/hooks/use-preview-props"
 import {
+  DARK_BG,
   DARK_COLOR,
   DEFAULT_DENSITY,
   DEFAULT_GLOW,
@@ -60,9 +61,12 @@ export function PhosphorScoreDemo() {
     <>
       <ComponentPreview
         title="Phosphor Score"
-        stageClassName="min-h-0 overflow-hidden bg-background p-0"
+        stageClassName="min-h-0 overflow-hidden p-0"
       >
-        <div className="relative h-[56svh] w-full bg-background">
+        <div
+          className="relative h-[56svh] w-full overflow-hidden rounded-[inherit] bg-background"
+          style={theme === "dark" ? { backgroundColor: DARK_BG } : undefined}
+        >
           <PhosphorScore
             color={useAutoColor ? undefined : props.color}
             glow={props.glow}