feat: add viewTransition to internal Link navigation

Apply React Router's viewTransition to all internal-navigation links.
Wrapper components (AppLink, Button, Card) set it as an overridable
default before the prop spread; direct Link/NavLink usages set it inline.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: jasonruesch

src/app/_components/app-link.tsx

@@ -56,7 +56,7 @@ export function AppLink(props: AppLinkProps) {
       "className" | "children"
     >;
     return (
-      <Link to={to} {...linkRest} className={merged}>
+      <Link to={to} viewTransition {...linkRest} className={merged}>
         {content}
       </Link>
     );

src/app/_components/button.tsx

@@ -80,7 +80,7 @@ export function Button(props: ButtonProps) {
       "className" | "children"
     >;
     return (
-      <Link to={to} {...linkRest} className={merged}>
+      <Link to={to} viewTransition {...linkRest} className={merged}>
         {children}
       </Link>
     );

src/app/_components/card.tsx

@@ -43,7 +43,7 @@ export function Card(props: CardProps) {
       "className" | "children"
     >;
     return (
-      <Link to={to} {...linkRest} className={merged}>
+      <Link to={to} viewTransition {...linkRest} className={merged}>
         {strip}
         {children}
       </Link>

src/app/_components/header.tsx

@@ -61,6 +61,7 @@ export function Header() {
 
         <Link
           to="/"
+          viewTransition
           className="flex items-center gap-2 text-base font-semibold tracking-tight"
         >
           <img src="/logo.svg" alt="" aria-hidden="true" className="h-7 w-7" />
@@ -95,6 +96,7 @@ export function Header() {
               <RRNavLink
                 to={item.to}
                 end={item.end}
+                viewTransition
                 className={({ isActive }) =>
                   [
                     "block rounded-lg px-3 py-2 text-base font-medium transition-colors",

src/app/packages/layout.tsx

@@ -21,6 +21,7 @@ export default function PackagesLayout() {
           <NavLink
             to="/packages"
             end
+            viewTransition
             className={({ isActive }) =>
               [
                 "block rounded-lg px-3 py-2",
@@ -36,6 +37,7 @@ export default function PackagesLayout() {
             <NavLink
               key={pkg.href}
               to={pkg.href}
+              viewTransition
               className={({ isActive }) =>
                 [
                   "block rounded-lg px-3 py-2 font-mono text-xs",

src/app/packages/page.tsx

@@ -29,6 +29,7 @@ export default function PackagesIndex() {
           <li key={pkg.href}>
             <Link
               to={pkg.href}
+              viewTransition
               className="group relative block overflow-hidden rounded-2xl bg-white p-6 ring-1 ring-zinc-200 transition hover:-translate-y-0.5 hover:shadow-lg dark:bg-zinc-900 dark:ring-zinc-800"
             >
               <div

src/app/packages/react-router-next/not-found.tsx

@@ -19,6 +19,7 @@ export default function ExampleNotFound() {
       </p>
       <Link
         to="/packages/react-router-next"
+        viewTransition
         className="bg-brand-600 hover:bg-brand-700 mt-5 inline-block rounded-full px-4 py-2 text-sm font-medium text-white"
       >
         Back to examples

src/app/page.tsx

@@ -61,12 +61,14 @@ export default function Home() {
           <div className="mt-10 flex flex-wrap gap-3">
             <Link
               to="/services"
+              viewTransition
               className="text-brand-700 rounded-full bg-white px-5 py-2.5 text-sm font-semibold shadow-sm hover:bg-zinc-100"
             >
               Explore services
             </Link>
             <Link
               to="/packages"
+              viewTransition
               className="rounded-full bg-white/10 px-5 py-2.5 text-sm font-semibold text-white ring-1 ring-white/30 ring-inset hover:bg-white/20"
             >
               Open source