diff --git a/src/components/ButtonGroup.tsx b/src/components/ButtonGroup.tsx
index c22aa36f6..657635c3c 100644
--- a/src/components/ButtonGroup.tsx
+++ b/src/components/ButtonGroup.tsx
@@ -32,7 +32,7 @@ export function ButtonGroup({
         '[&>*]:border-0! [&>*+*]:border-l! [&>*+*]:border-border-default!',
         'bg-background-surface text-text-primary',
         'shadow-sm',
-        '[&>[aria-pressed=true]]:bg-text-primary [&>[aria-pressed=true]]:text-background-default [&>[aria-pressed=true]]:shadow-sm',
+        '[&>[aria-pressed=true]]:border-transparent [&>[aria-pressed=true]]:bg-text-primary [&>[aria-pressed=true]]:text-background-default [&>[aria-pressed=true]]:shadow-sm',
         className,
       )}
     >
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 6d2a637b3..e07cc0e1f 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -945,27 +945,24 @@ function MobileNavigation({
               <SparkleIcon className="size-8 shrink-0" />
               Ask AI
             </button>
-            {loadAuthControls ? (
-              <React.Suspense
-                fallback={
-                  userQuery.data || userQuery.isLoading ? (
-                    <div
-                      aria-hidden="true"
-                      className="h-16 w-full animate-pulse rounded-xl bg-[#171717]"
-                    />
-                  ) : (
-                    signIn
-                  )
-                }
-              >
-                <LazyMobileNavbarAuthControls
+            <React.Suspense
+              fallback={
+                <Link
+                  to="/login"
                   tabIndex={activeGroup ? -1 : 0}
-                  onNavigate={onNavigate}
-                />
-              </React.Suspense>
-            ) : (
-              signIn
-            )}
+                  onClick={onNavigate}
+                  className="flex w-full items-center gap-3.5 rounded-xl px-3 py-4 text-left font-ds-display text-ds-heading-3 text-[#a3a3a3] transition-colors hover:bg-[#171717] hover:text-white focus-visible:bg-[#171717] focus-visible:text-white focus-visible:outline-none"
+                >
+                  <SignInIcon className="size-8 shrink-0" />
+                  Sign In
+                </Link>
+              }
+            >
+              <LazyMobileNavbarAuthControls
+                tabIndex={activeGroup ? -1 : 0}
+                onNavigate={onNavigate}
+              />
+            </React.Suspense>
           </div>
         </div>
 
diff --git a/src/components/NavbarAuthControls.tsx b/src/components/NavbarAuthControls.tsx
index f15260943..1fd4d2688 100644
--- a/src/components/NavbarAuthControls.tsx
+++ b/src/components/NavbarAuthControls.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react'
-import { GearIcon } from '@phosphor-icons/react/Gear'
-import { KeyIcon } from '@phosphor-icons/react/Key'
-import { LockIcon } from '@phosphor-icons/react/Lock'
-import { HammerIcon } from '@phosphor-icons/react/Hammer'
-import { SignInIcon } from '@phosphor-icons/react/SignIn'
-import { SignOutIcon } from '@phosphor-icons/react/SignOut'
-import { SparkleIcon } from '@phosphor-icons/react/Sparkle'
+import {
+  GearIcon as Gear,
+  KeyIcon as Key,
+  LockIcon as Lock,
+  SignInIcon,
+  SignInIcon as SignIn,
+  SignOutIcon as SignOut,
+  SparkleIcon as Sparkle,
+} from '@phosphor-icons/react'
 import { Link, useNavigate } from '@tanstack/react-router'
 import { twMerge } from 'tailwind-merge'
 import {
@@ -137,21 +139,14 @@ export function MobileNavbarAuthControls({
       onClick={onNavigate}
       className={itemClassName}
     >
-      <SignInIcon className="size-8 shrink-0" />
+      <SignIn className="size-8 shrink-0" />
       Sign In
     </Link>
   )
 
-  const loadingPlaceholder = (
-    <div
-      aria-hidden="true"
-      className="h-16 w-full animate-pulse rounded-xl bg-[#171717]"
-    />
-  )
-
   return (
     <>
-      <AuthLoading>{loadingPlaceholder}</AuthLoading>
+      <AuthLoading>{signIn}</AuthLoading>
       <Unauthenticated>{signIn}</Unauthenticated>
       <Authenticated>
         <Link
@@ -160,25 +155,16 @@ export function MobileNavbarAuthControls({
           onClick={onNavigate}
           className={itemClassName}
         >
-          <GearIcon className="size-8 shrink-0" />
+          <Gear className="size-8 shrink-0" />
           Account
         </Link>
-        <Link
-          to="/builder"
-          tabIndex={tabIndex}
-          onClick={onNavigate}
-          className={itemClassName}
-        >
-          <HammerIcon className="size-8 shrink-0" />
-          My Projects
-        </Link>
         <Link
           to="/account/submissions"
           tabIndex={tabIndex}
           onClick={onNavigate}
           className={itemClassName}
         >
-          <SparkleIcon className="size-8 shrink-0" />
+          <Sparkle className="size-8 shrink-0" />
           My Showcases
         </Link>
         {user && (
@@ -188,7 +174,7 @@ export function MobileNavbarAuthControls({
             onClick={onNavigate}
             className={itemClassName}
           >
-            <KeyIcon className="size-8 shrink-0" />
+            <Key className="size-8 shrink-0" />
             Integrations
           </Link>
         )}
@@ -199,7 +185,7 @@ export function MobileNavbarAuthControls({
             onClick={onNavigate}
             className={itemClassName}
           >
-            <LockIcon className="size-8 shrink-0" />
+            <Lock className="size-8 shrink-0" />
             Admin
           </Link>
         )}
@@ -209,7 +195,7 @@ export function MobileNavbarAuthControls({
           onClick={signOut}
           className={itemClassName}
         >
-          <SignOutIcon className="size-8 shrink-0" />
+          <SignOut className="size-8 shrink-0" />
           Sign Out
         </button>
       </Authenticated>
diff --git a/src/components/ds/BrandAssets.tsx b/src/components/ds/BrandAssets.tsx
index 21bf1ca08..6a144da60 100644
--- a/src/components/ds/BrandAssets.tsx
+++ b/src/components/ds/BrandAssets.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import {
-  CaretDownIcon,
-  CheckIcon,
-  CopyIcon,
-  DownloadSimpleIcon,
+  CaretDownIcon as CaretDown,
+  CheckIcon as Check,
+  CopyIcon as Copy,
+  DownloadSimpleIcon as DownloadSimple,
 } from '@phosphor-icons/react'
 import { DsSection } from '~/components/ds/DsKit'
 import { useToast } from '~/components/ToastProvider'
@@ -100,13 +100,9 @@ function CopyAssetButton({
       }
 
       copied.trigger()
-      notify(<div className="font-medium">Copied {label}</div>, {
-        id: 'brand-asset-copied',
-      })
+      notify(<div className="font-medium">Copied {label}</div>)
     } catch {
-      notify(<div className="font-medium">Could not copy {label}</div>, {
-        id: 'brand-asset-copy-failed',
-      })
+      notify(<div className="font-medium">Could not copy {label}</div>)
     }
   }
 
@@ -121,9 +117,9 @@ function CopyAssetButton({
       onClick={copyAsset}
     >
       {copied.active ? (
-        <CheckIcon size={18} aria-hidden="true" />
+        <Check size={18} aria-hidden="true" />
       ) : (
-        <CopyIcon size={18} aria-hidden="true" />
+        <Copy size={18} aria-hidden="true" />
       )}
     </Button>
   )
@@ -237,7 +233,7 @@ function BrandLogoPicker() {
           <DropdownTrigger>
             <button type="button" className={socialControlClass}>
               <span>{logo.label}</span>
-              <CaretDownIcon size={13} className="text-text-muted" />
+              <CaretDown size={13} className="text-text-muted" />
             </button>
           </DropdownTrigger>
           <DropdownContent align="start" className="min-w-44">
@@ -248,7 +244,7 @@ function BrandLogoPicker() {
               >
                 <span className="flex-1">{option.label}</span>
                 {option.value === logo.value ? (
-                  <CheckIcon size={14} className="text-text-accent" />
+                  <Check size={14} className="text-text-accent" />
                 ) : null}
               </DropdownItem>
             ))}
@@ -264,7 +260,7 @@ function BrandLogoPicker() {
                 style={{ background: color.swatch }}
               />
               <span>{color.label}</span>
-              <CaretDownIcon size={13} className="text-text-muted" />
+              <CaretDown size={13} className="text-text-muted" />
             </button>
           </DropdownTrigger>
           <DropdownContent align="start" className="min-w-44">
@@ -280,7 +276,7 @@ function BrandLogoPicker() {
                 />
                 <span className="flex-1">{option.label}</span>
                 {option.value === color.value ? (
-                  <CheckIcon size={14} className="text-text-accent" />
+                  <Check size={14} className="text-text-accent" />
                 ) : null}
               </DropdownItem>
             ))}
@@ -291,7 +287,7 @@ function BrandLogoPicker() {
           <DropdownTrigger>
             <button type="button" className={socialControlClass}>
               <span>{format.label}</span>
-              <CaretDownIcon size={13} className="text-text-muted" />
+              <CaretDown size={13} className="text-text-muted" />
             </button>
           </DropdownTrigger>
           <DropdownContent align="start" className="min-w-36">
@@ -302,7 +298,7 @@ function BrandLogoPicker() {
               >
                 <span className="flex-1">{option.label}</span>
                 {option.value === format.value ? (
-                  <CheckIcon size={14} className="text-text-accent" />
+                  <Check size={14} className="text-text-accent" />
                 ) : null}
               </DropdownItem>
             ))}
@@ -326,7 +322,7 @@ function BrandLogoPicker() {
             aria-label={`Download ${logo.label} ${color.label} as ${format.label}`}
             title={`Download ${format.label}`}
           >
-            <DownloadSimpleIcon size={18} aria-hidden="true" />
+            <DownloadSimple size={18} aria-hidden="true" />
           </Button>
         </div>
       </div>
@@ -419,7 +415,7 @@ function SocialLogoPicker() {
           <DropdownTrigger>
             <button type="button" className={socialControlClass}>
               <span>{orientation.label}</span>
-              <CaretDownIcon size={13} className="text-text-muted" />
+              <CaretDown size={13} className="text-text-muted" />
             </button>
           </DropdownTrigger>
           <DropdownContent align="start" className="min-w-44">
@@ -430,7 +426,7 @@ function SocialLogoPicker() {
               >
                 <span className="flex-1">{option.label}</span>
                 {option.value === orientation.value ? (
-                  <CheckIcon size={14} className="text-text-accent" />
+                  <Check size={14} className="text-text-accent" />
                 ) : null}
               </DropdownItem>
             ))}
@@ -446,7 +442,7 @@ function SocialLogoPicker() {
                 style={{ background: color.swatch }}
               />
               <span>{color.label}</span>
-              <CaretDownIcon size={13} className="text-text-muted" />
+              <CaretDown size={13} className="text-text-muted" />
             </button>
           </DropdownTrigger>
           <DropdownContent align="start" className="min-w-44">
@@ -462,7 +458,7 @@ function SocialLogoPicker() {
                 />
                 <span className="flex-1">{option.label}</span>
                 {option.value === color.value ? (
-                  <CheckIcon size={14} className="text-text-accent" />
+                  <Check size={14} className="text-text-accent" />
                 ) : null}
               </DropdownItem>
             ))}
@@ -473,7 +469,7 @@ function SocialLogoPicker() {
           <DropdownTrigger>
             <button type="button" className={socialControlClass}>
               <span>{format.label}</span>
-              <CaretDownIcon size={13} className="text-text-muted" />
+              <CaretDown size={13} className="text-text-muted" />
             </button>
           </DropdownTrigger>
           <DropdownContent align="start" className="min-w-36">
@@ -484,7 +480,7 @@ function SocialLogoPicker() {
               >
                 <span className="flex-1">{option.label}</span>
                 {option.value === format.value ? (
-                  <CheckIcon size={14} className="text-text-accent" />
+                  <Check size={14} className="text-text-accent" />
                 ) : null}
               </DropdownItem>
             ))}
@@ -508,7 +504,7 @@ function SocialLogoPicker() {
             aria-label={`Download ${orientation.label} ${color.label} as ${format.label}`}
             title={`Download ${format.label}`}
           >
-            <DownloadSimpleIcon size={18} aria-hidden="true" />
+            <DownloadSimple size={18} aria-hidden="true" />
           </Button>
         </div>
       </div>
@@ -584,7 +580,7 @@ function AssetCard({ asset }: { asset: GalleryAsset }) {
                 title={`Download ${download.format}`}
                 className="text-white hover:bg-transparent hover:text-white/70 max-[899px]:bg-transparent"
               >
-                <DownloadSimpleIcon size={14} aria-hidden="true" />
+                <DownloadSimple size={14} aria-hidden="true" />
               </Button>
             </React.Fragment>
           ))}
diff --git a/src/components/ds/ds-nav.ts b/src/components/ds/ds-nav.ts
index 027387d0b..2fc0fcd7b 100644
--- a/src/components/ds/ds-nav.ts
+++ b/src/components/ds/ds-nav.ts
@@ -99,26 +99,6 @@ export const dsNav: Array<DsNavSection> = [
   {
     title: 'Components',
     items: [
-      {
-        label: 'Avatar',
-        to: '/ds/avatar',
-        sections: [
-          'Sizes',
-          'Fallbacks',
-          'Maintainer card',
-          'Responsive maintainer grid',
-        ],
-      },
-      {
-        label: 'Badges',
-        to: '/ds/badges',
-        sections: ['Variants', 'Corner styles', 'In context', 'Library status'],
-      },
-      {
-        label: 'Breadcrumbs',
-        to: '/ds/breadcrumbs',
-        sections: ['Section + on-this-page'],
-      },
       {
         label: 'Buttons',
         to: '/ds/buttons',
@@ -137,41 +117,9 @@ export const dsNav: Array<DsNavSection> = [
         ],
       },
       {
-        label: 'Cards & Surfaces',
-        to: '/ds/cards',
-        sections: ['Card', 'Inline code', 'Blog post card', 'Tooltip'],
-      },
-      {
-        label: 'Dialog',
-        to: '/ds/dialog',
-        sections: [
-          'Basic',
-          'Sizes',
-          'Scrolling body',
-          'Destructive confirm',
-          'Tinted header',
-          'Status panel',
-          'Token coverage',
-          'Behaviour from Radix',
-        ],
-      },
-      {
-        label: 'Drawer',
-        to: '/ds/drawer',
-        sections: [
-          'Sides',
-          'Sizes',
-          'Fit to content',
-          'Anchor',
-          'Header actions',
-          'With a footer',
-          'Motion',
-        ],
-      },
-      {
-        label: 'Dropdown',
-        to: '/ds/dropdown',
-        sections: ['Basic menu', 'Scrollable'],
+        label: 'Badges',
+        to: '/ds/badges',
+        sections: ['Variants', 'Corner styles', 'In context'],
       },
       {
         label: 'Eyebrow',
@@ -183,7 +131,7 @@ export const dsNav: Array<DsNavSection> = [
         to: '/ds/inputs',
         sections: [
           'Default',
-          'Focus',
+          'Focus rings',
           'With a label & disabled',
           'Progressive search',
           'Persistent search',
@@ -191,45 +139,39 @@ export const dsNav: Array<DsNavSection> = [
         ],
       },
       {
-        label: 'Navbar',
-        to: '/ds/navbar',
-        sections: [
-          'Anatomy',
-          'Mega menu item',
-          'Layout & spacing',
-          'Responsive behavior',
-          'Source',
-        ],
+        label: 'Dropdown',
+        to: '/ds/dropdown',
+        sections: ['Basic menu'],
       },
       {
-        label: 'Overlay Audit',
-        to: '/ds/overlays',
+        label: 'Avatar',
+        to: '/ds/avatar',
         sections: [
-          'Launch',
-          'Property matrix',
-          'Divergence',
-          'Notes per specimen',
+          'Sizes',
+          'Fallbacks',
+          'Maintainer card',
+          'Responsive maintainer grid',
         ],
       },
       {
-        label: 'Page Header',
-        to: '/ds/page-header',
-        sections: ['Left-aligned', 'Centered', 'Marks & actions'],
+        label: 'Spinner',
+        to: '/ds/spinner',
+        sections: ['Sizes & color', 'Headbanger'],
       },
       {
-        label: 'Panel',
-        to: '/ds/panel',
+        label: 'Collapsible',
+        to: '/ds/collapsible',
         sections: ['Disclosure'],
       },
       {
-        label: 'Partner Rail',
-        to: '/ds/partner-rail',
-        sections: ['Rail', 'Tiers', 'Per-logo scale'],
+        label: 'Breadcrumbs',
+        to: '/ds/breadcrumbs',
+        sections: ['Section + on-this-page'],
       },
       {
-        label: 'Spinner',
-        to: '/ds/spinner',
-        sections: ['Sizes & color', 'Headbanger'],
+        label: 'Cards & Surfaces',
+        to: '/ds/cards',
+        sections: ['Card', 'Inline code', 'Blog post card', 'Tooltip'],
       },
       {
         label: 'Stats Section',
@@ -237,14 +179,17 @@ export const dsNav: Array<DsNavSection> = [
         sections: ['Preview'],
       },
       {
-        label: 'Takeover',
-        to: '/ds/takeover',
-        sections: ['Scrims', 'Leading action', 'Notes'],
-      },
-      {
-        label: 'Tabs',
-        to: '/ds/tabs',
-        sections: ['Primary', 'Secondary', 'Icon only'],
+        label: 'Navbar',
+        to: '/ds/navbar',
+        sections: [
+          'Anatomy',
+          'Mega menu item',
+          'Menu variants',
+          'Regions',
+          'Layout & spacing',
+          'Responsive behavior',
+          'Source',
+        ],
       },
     ],
   },
diff --git a/src/components/ds/ui/index.tsx b/src/components/ds/ui/index.tsx
index b3725f4f6..564f35dab 100644
--- a/src/components/ds/ui/index.tsx
+++ b/src/components/ds/ui/index.tsx
@@ -2,11 +2,13 @@ import * as React from 'react'
 import { twMerge } from 'tailwind-merge'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { Link } from '@tanstack/react-router'
-import { CaretDownIcon } from '@phosphor-icons/react/CaretDown'
-import { CircleNotchIcon } from '@phosphor-icons/react/CircleNotch'
-import { MagnifyingGlassIcon } from '@phosphor-icons/react/MagnifyingGlass'
-import { UserIcon } from '@phosphor-icons/react/User'
-import { XIcon } from '@phosphor-icons/react/X'
+import {
+  CaretDownIcon,
+  CircleNotchIcon,
+  MagnifyingGlassIcon as MagnifyingGlass,
+  UserIcon,
+  XIcon as X,
+} from '@phosphor-icons/react'
 import type { MarkdownHeading } from '~/utils/markdown'
 import type { LibraryId } from '~/libraries/ids'
 import type { LibraryCategory } from '~/libraries/categories'
@@ -440,13 +442,11 @@ type SearchInputProps = Omit<
 > & {
   size?: 'default' | 'large'
   progressive?: boolean
-  /** Node rendered inside the field, right of the input (e.g. an RSS link). */
-  trailing?: React.ReactNode
 }
 
 export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
   function SearchInput(
-    { className, size = 'default', progressive = false, trailing, ...props },
+    { className, size = 'default', progressive = false, ...props },
     forwardedRef,
   ) {
     const [open, setOpen] = React.useState(!progressive)
@@ -494,36 +494,22 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
 
     if (!progressive) {
       return (
-        <div
+        <label
           className={twMerge(
-            // Search reads as a distinct, fully-rounded pill so it never
-            // reads as just another rounded-corner control (buttons, dropdowns).
-            'flex w-full items-center rounded-full border border-border-default bg-background-surface text-text-muted transition-[border-color,box-shadow] duration-150 focus-within:border-border-strong focus-within:text-text-primary motion-reduce:transition-none',
-            size === 'large' ? 'min-h-14 gap-3 px-4' : 'h-10 gap-2.5 px-3',
+            'flex w-full items-center border border-border-default bg-background-surface text-text-muted transition-[border-color,box-shadow] duration-150 focus-within:border-border-focus focus-within:text-text-primary focus-within:ring-2 focus-within:ring-border-focus/40 motion-reduce:transition-none',
+            size === 'large'
+              ? 'min-h-14 gap-3 rounded-xl px-4'
+              : 'h-10 gap-2.5 rounded-lg px-3',
           )}
         >
-          {/* The label wraps only the icon + input so clicking the field
-              focuses it. Interactive `trailing` controls (links, buttons) sit
-              outside the label — a form control inside a <label> that also
-              contains other interactive controls is invalid HTML. */}
-          <label
-            className={twMerge(
-              'flex min-w-0 flex-1 items-center',
-              size === 'large' ? 'gap-3' : 'gap-2.5',
-            )}
-          >
-            <MagnifyingGlassIcon
-              size={size === 'large' ? 21 : 18}
-              weight="bold"
-              aria-hidden="true"
-              className="shrink-0"
-            />
-            {input}
-          </label>
-          {trailing ? (
-            <span className="flex shrink-0 items-center">{trailing}</span>
-          ) : null}
-        </div>
+          <MagnifyingGlass
+            size={size === 'large' ? 21 : 18}
+            weight="bold"
+            aria-hidden="true"
+            className="shrink-0"
+          />
+          {input}
+        </label>
       )
     }
 
@@ -538,7 +524,7 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
             onClick={reveal}
             className="grid size-10 shrink-0 place-items-center transition-colors duration-150 hover:text-text-primary focus-visible:text-text-accent focus-visible:outline-none motion-reduce:transition-none"
           >
-            <MagnifyingGlassIcon size={18} weight="bold" aria-hidden="true" />
+            <MagnifyingGlass size={18} weight="bold" aria-hidden="true" />
           </button>
           {React.cloneElement(input, {
             tabIndex: open ? props.tabIndex : -1,
@@ -563,7 +549,7 @@ export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
               skipMotion && 'transition-none',
             )}
           >
-            <XIcon size={16} weight="bold" aria-hidden="true" />
+            <X size={16} weight="bold" aria-hidden="true" />
           </button>
           <span
             aria-hidden="true"
diff --git a/src/routes/-shop-browse.tsx b/src/routes/-shop-browse.tsx
index f26f3396c..b3d2036ce 100644
--- a/src/routes/-shop-browse.tsx
+++ b/src/routes/-shop-browse.tsx
@@ -117,7 +117,19 @@ export function ShopBrowsePage({
     [page.nodes, accumulated],
   )
 
-  const newProductCutoff = Date.now() - TWO_WEEKS_MS
+  const newestProduct = allProducts.reduce<ProductListItem | null>(
+    (newest, product) => {
+      if (!product.publishedAt) return newest
+      if (
+        !newest?.publishedAt ||
+        new Date(product.publishedAt) > new Date(newest.publishedAt)
+      ) {
+        return product
+      }
+      return newest
+    },
+    null,
+  )
 
   const typeOptions = React.useMemo(() => {
     const counts = new Map<string, { display: string; count: number }>()
@@ -210,10 +222,7 @@ export function ShopBrowsePage({
                 <ProductCard
                   key={product.id}
                   product={product}
-                  isNew={
-                    product.publishedAt !== null &&
-                    new Date(product.publishedAt).getTime() >= newProductCutoff
-                  }
+                  isNew={product.id === newestProduct?.id}
                   loading={i < 8 ? 'eager' : 'lazy'}
                   onQuickView={onProductSelect}
                 />
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 468c4cf40..7c9d92c41 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -345,64 +345,54 @@ function ShellComponent({ children }: { children: React.ReactNode }) {
         {hasBaseParent ? <base target="_parent" /> : null}
       </head>
       <body className="overflow-x-hidden">
-        <RouterContextProvider router={router}>
-          <QueryClientProvider client={queryClient}>
-            <ThemeProvider>
-              <SearchProvider>
-                <LoginModalProvider>
-                  <ToastProvider>
-                    <PageViewTracker />
-                    <LibrariesOverlayProvider>
-                      {hideNavbar ? (
-                        routeContent
-                      ) : (
-                        <Navbar>
-                          {routeContent}
-                          {hideFooter ? null : <Footer />}
-                        </Navbar>
-                      )}
-                    </LibrariesOverlayProvider>
-                    {showDevtools && LazyAppDevtools ? (
-                      <OptionalDevtoolsBoundary>
-                        <React.Suspense fallback={null}>
-                          <LazyAppDevtools />
-                        </React.Suspense>
-                      </OptionalDevtoolsBoundary>
-                    ) : null}
-                    <div
-                      aria-hidden="true"
-                      className={twMerge(
-                        'pointer-events-none fixed top-0 left-0 z-99999999 h-[320px] w-full select-none',
-                      )}
-                    >
-                      <div
-                        className={twMerge(
-                          'absolute top-0 w-full h-80 rounded-[100%] bg-amber-500/30 blur-3xl transition-all duration-500 dark:bg-sky-400/25',
-                          showNavigationSpinner
-                            ? '-translate-y-1/2 opacity-100'
-                            : '-translate-y-full opacity-0',
-                        )}
-                      />
-                      <div
-                        className={twMerge(
-                          'absolute top-6 left-1/2 -translate-x-1/2 rounded-full bg-white/75 p-2 shadow-lg backdrop-blur-lg transition-all duration-300 dark:bg-slate-900/40',
-                          showNavigationSpinner
-                            ? 'translate-y-0 opacity-100'
-                            : '-translate-y-6 opacity-0',
-                        )}
-                      >
-                        {isNavigating && showNavigationSpinner ? (
-                          <Spinner className="text-4xl" />
-                        ) : null}
-                      </div>
-                    </div>
-                  </ToastProvider>
-                </LoginModalProvider>
-              </SearchProvider>
-            </ThemeProvider>
-          </QueryClientProvider>
-          <Scripts />
-        </RouterContextProvider>
+        <LoginModalProvider>
+          <ToastProvider>
+            <PageViewTracker />
+            <LibrariesOverlayProvider>
+              {hideNavbar ? (
+                children
+              ) : (
+                <Navbar>
+                  {children}
+                  <Footer />
+                </Navbar>
+              )}
+            </LibrariesOverlayProvider>
+            {showDevtools && LazyAppDevtools ? (
+              <OptionalDevtoolsBoundary>
+                <React.Suspense fallback={null}>
+                  <LazyAppDevtools />
+                </React.Suspense>
+              </OptionalDevtoolsBoundary>
+            ) : null}
+            <div
+              aria-hidden="true"
+              className={twMerge(
+                'pointer-events-none fixed top-0 left-0 z-99999999 h-[320px] w-full select-none',
+              )}
+            >
+              <div
+                className={twMerge(
+                  'absolute top-0 w-full h-80 rounded-[100%] bg-amber-500/30 blur-3xl transition-all duration-500 dark:bg-sky-400/25',
+                  showNavigationSpinner
+                    ? '-translate-y-1/2 opacity-100'
+                    : '-translate-y-full opacity-0',
+                )}
+              />
+              <div
+                className={twMerge(
+                  'absolute top-6 left-1/2 -translate-x-1/2 rounded-full bg-white/75 p-2 shadow-lg backdrop-blur-lg transition-all duration-300 dark:bg-slate-900/40',
+                  showNavigationSpinner
+                    ? 'translate-y-0 opacity-100'
+                    : '-translate-y-6 opacity-0',
+                )}
+              >
+                <Spinner className="text-4xl" />
+              </div>
+            </div>
+          </ToastProvider>
+        </LoginModalProvider>
+        <Scripts />
       </body>
     </html>
   )
diff --git a/src/routes/ds.buttons.tsx b/src/routes/ds.buttons.tsx
index d90248302..68d2bd5f4 100644
--- a/src/routes/ds.buttons.tsx
+++ b/src/routes/ds.buttons.tsx
@@ -85,33 +85,24 @@ function ButtonMode({
   )
 }
 
-function Toolbar() {
-  const [showFiles, setShowFiles] = React.useState(true)
-  const [showConsole, setShowConsole] = React.useState(false)
+const PERIODS = ['Day', 'Week', 'Month'] as const
+
+function SegmentedButtonGroup() {
+  const [period, setPeriod] = React.useState<(typeof PERIODS)[number]>('Week')
 
   return (
-    <ButtonGroup aria-label="Editor actions">
-      <Button
-        variant="ghost"
-        size="xs"
-        rounded="none"
-        aria-pressed={showFiles}
-        onClick={() => setShowFiles((v) => !v)}
-      >
-        Files
-      </Button>
-      <Button
-        variant="ghost"
-        size="xs"
-        rounded="none"
-        aria-pressed={showConsole}
-        onClick={() => setShowConsole((v) => !v)}
-      >
-        Console
-      </Button>
-      <Button variant="primary" size="xs" rounded="none">
-        <PlayIcon className="h-3.5 w-3.5" weight="fill" /> Run
-      </Button>
+    <ButtonGroup>
+      {PERIODS.map((option) => (
+        <Button
+          key={option}
+          variant="ghost"
+          rounded="none"
+          aria-pressed={period === option}
+          onClick={() => setPeriod(option)}
+        >
+          {option}
+        </Button>
+      ))}
     </ButtonGroup>
   )
 }
@@ -294,13 +285,13 @@ function ButtonsPage() {
         description="The low-level toolbar primitive: bring your own buttons and ButtonGroup joins them with shared edges and one outer border. Reach for it when the group is heterogeneous — mixed toggles plus a primary action or a dropdown trigger. For a single-select control, prefer the SegmentedControl (see the Segmented control page). Source: src/components/ButtonGroup.tsx."
       >
         <ButtonPreview
-          code={`<ButtonGroup aria-label="Editor actions">
-  <Button variant="ghost" rounded="none" aria-pressed={showFiles}>Files</Button>
-  <Button variant="ghost" rounded="none" aria-pressed={showConsole}>Console</Button>
-  <Button variant="primary" rounded="none"><PlayIcon /> Run</Button>
+          code={`<ButtonGroup>
+  <Button variant="ghost" rounded="none" aria-pressed={period === 'day'}>Day</Button>
+  <Button variant="ghost" rounded="none" aria-pressed={period === 'week'}>Week</Button>
+  <Button variant="ghost" rounded="none" aria-pressed={period === 'month'}>Month</Button>
 </ButtonGroup>`}
         >
-          <Toolbar />
+          <SegmentedButtonGroup />
         </ButtonPreview>
       </DsSection>
 
diff --git a/src/routes/ds.tsx b/src/routes/ds.tsx
index f782ae451..d8bc60fae 100644
--- a/src/routes/ds.tsx
+++ b/src/routes/ds.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { CaretRightIcon } from '@phosphor-icons/react'
+import { CaretRightIcon as CaretRight } from '@phosphor-icons/react'
 import {
   Link,
   Outlet,
@@ -145,7 +145,7 @@ function DesignSystemSidebar() {
                             }
                             className="grid size-7 shrink-0 place-items-center rounded-md text-text-muted hover:bg-background-subtle hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus"
                           >
-                            <CaretRightIcon
+                            <CaretRight
                               size={14}
                               className={expanded ? 'rotate-90' : undefined}
                             />
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 04924831c..39edcd7b8 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -82,9 +82,7 @@ function Index() {
               always light, so text uses a mode-stable dark token (neutral-500)
               rather than a theme-flipping semantic. */}
           <div className="mx-0 rounded-none bg-background-subtle p-0 sm:mx-2 sm:rounded-2xl sm:p-1">
-            {/* `svh`, not `dvh` — the dynamic viewport grows as iOS collapses
-                the URL bar mid-scroll, visibly stretching the hero. */}
-            <div className="group relative isolate flex h-[calc(100svh-var(--navbar-height))] max-h-[720px] min-h-[560px] flex-col justify-between gap-8 overflow-hidden rounded-none px-6 py-10 [text-shadow:0_2px_8px_rgb(255_255_255/0.2)] sm:rounded-xl sm:px-10 md:flex-row md:items-end md:justify-between md:gap-8 md:[text-shadow:none] xl:gap-12 xl:px-16 xl:py-16">
+            <div className="group relative isolate flex h-[calc(100dvh-var(--navbar-height))] max-h-[720px] min-h-[560px] flex-col justify-between gap-8 overflow-hidden rounded-none px-6 py-10 [text-shadow:0_2px_8px_rgb(255_255_255/0.2)] sm:rounded-xl sm:px-10 md:flex-row md:items-end md:justify-between md:gap-8 md:[text-shadow:none] xl:gap-12 xl:px-16 xl:py-16">
               {/* The parent supplies the 4px frame shared by the hero and stats.
                   This wrapper clips the image to the inner radius so the <img>
                   fills it exactly instead of overflowing. Plain <img> (not OptimizedImage):
@@ -100,7 +98,7 @@ function Index() {
                 <br className="hidden md:block" /> for the web
               </h1>
               <div className="flex flex-col items-start gap-6 md:w-[29%] md:max-w-[454px]">
-                <p className="hidden text-ds-body-md text-ds-neutral-500 md:block md:text-ds-body-lg xl:text-ds-body-xl">
+                <p className="text-ds-body-md text-ds-neutral-500 md:text-ds-body-lg xl:text-ds-body-xl">
                   Headless, type-safe, composable tools for building modern web
                   applications that work naturally for developers and reliably
                   for agents
@@ -117,12 +115,16 @@ function Index() {
                   >
                     Browse the Stack
                   </Button>
+                  {/* Link-style button; color pinned to black because the photo
+                      is always light. The responsive override supersedes the
+                      link variant's mobile emphasis color. */}
                   <Button
                     as="a"
                     href="#start-with-a-prompt"
                     onClick={startWithPrompt}
                     variant="link"
                     size="md"
+                    className="text-black hover:text-black max-[899px]:text-black"
                   >
                     Start with a prompt <ArrowRightIcon className="h-4 w-4" />
                   </Button>
diff --git a/src/styles/app.css b/src/styles/app.css
index 7cb4d5e94..dff848e73 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -165,361 +165,6 @@ html.theme-switching *::after {
   --motion-duration-sheet: 280ms;
   --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
   --motion-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
-
-  /* Stacking tiers, shared by every modal posture (dialog, drawer, …).
-     Tailwind has no `--z-*` theme namespace, so these are applied as
-     `z-[var(--z-overlay)]`. Values match the 999/1000 pair already used by the
-     majority of overlays, so adopting them moves nothing. */
-  --z-scrim: 999;
-  --z-overlay: 1000;
-  /* Floats above an open overlay — a tooltip on a control inside a modal has
-     nowhere else to go. Kept well clear of --z-overlay so overlay-internal
-     chrome can still stack between them. */
-  --z-above-overlay: 1200;
-}
-
-/* ----------------------------------------------------------------- Dialog --
-   Enter/exit motion for the DS Dialog, driven off Radix's data-state rather
-   than utility classes. Written as real keyframes on purpose: the
-   `animate-in` / `fade-in-0` / `zoom-in-95` classes used elsewhere in this
-   codebase come from tailwindcss-animate, which is NOT installed — they match
-   no CSS rule and animate nothing. Timing reuses the existing motion tokens.
-
-   Radix's Presence waits for animationend before unmounting, so the closed
-   state genuinely plays instead of being cut off.
-
-   The panel keyframes animate `transform` only. Tailwind v4's
-   `-translate-x-1/2 -translate-y-1/2` compile to the independent `translate`
-   property, which composes with `transform` rather than being overwritten by
-   it — repeating the centring translate here would shift the panel a full
-   height instead of half and hang it off the top of the viewport.
-   -------------------------------------------------------------------------- */
-@keyframes dialog-scrim-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes dialog-scrim-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes dialog-panel-in {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes dialog-panel-out {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-}
-
-[data-ds-dialog-scrim][data-state='open'] {
-  animation: dialog-scrim-in var(--motion-duration-fast)
-    var(--motion-ease-standard) both;
-}
-[data-ds-dialog-scrim][data-state='closed'] {
-  animation: dialog-scrim-out var(--motion-duration-fast)
-    var(--motion-ease-standard) both;
-}
-[data-ds-dialog-panel][data-state='open'] {
-  animation: dialog-panel-in var(--motion-duration-fast)
-    var(--motion-ease-standard) both;
-}
-[data-ds-dialog-panel][data-state='closed'] {
-  animation: dialog-panel-out var(--motion-duration-fast)
-    var(--motion-ease-standard) both;
-}
-
-/* The dialog is the first DS component with real motion, so it states the
-   reduced-motion contract the rest of the system should follow: the state
-   change still happens, it just stops moving. */
-/* ------------------------------------------------- Transient surfaces & --
-   ------------------------------------------------- one-shot entrances --
-   Same reason as the dialog keyframes: the `animate-in` / `fade-in-0` /
-   `zoom-in-95` / `slide-in-from-*` classes these replaced come from
-   tailwindcss-animate, which is not installed. They matched no CSS rule and
-   animated nothing. The `duration-*` utilities alongside them were inert too —
-   Tailwind's duration sets transition-duration, not animation-duration.
-
-   `transform` carries scale/offset only, never a centring translate: Tailwind
-   v4 compiles `-translate-x-1/2` to the independent `translate` property,
-   which composes with `transform` rather than being replaced by it. That also
-   leaves Radix's --radix-*-content-transform-origin free to govern where a
-   popover grows from.
-   -------------------------------------------------------------------------- */
-@keyframes ds-pop-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes ds-pop-out {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
-
-/* Radix-driven transient surfaces: tooltips, dropdown menus.
-   Tooltip does not use `open` — it reports `delayed-open` when it appears
-   after the hover delay and `instant-open` inside the skip-delay window, so
-   all three have to be matched or tooltips silently never animate. */
-[data-ds-pop][data-state='open'],
-[data-ds-pop][data-state='delayed-open'],
-[data-ds-pop][data-state='instant-open'] {
-  animation: ds-pop-in var(--motion-duration-fast) var(--motion-ease-standard)
-    both;
-}
-[data-ds-pop][data-state='closed'] {
-  animation: ds-pop-out var(--motion-duration-fast) var(--motion-ease-standard)
-    both;
-}
-
-/* One-shot entrances for content that mounts already open. */
-@keyframes ds-enter-rise {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.ds-enter-fade {
-  animation: takeover-in var(--motion-duration-sheet)
-    var(--motion-ease-standard) both;
-}
-.ds-enter-rise {
-  animation: ds-enter-rise var(--motion-duration-sheet)
-    var(--motion-ease-standard) both;
-}
-.ds-enter-pop {
-  animation: ds-pop-in var(--motion-duration-sheet) var(--motion-ease-standard)
-    both;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-ds-pop],
-  .ds-enter-fade,
-  .ds-enter-rise,
-  .ds-enter-pop {
-    animation: none !important;
-  }
-}
-
-/* --------------------------------------------------------------- Takeover --
-   The full-bleed posture. Two scrims, which is what the overlay audit asked
-   for: `standard` is the same --color-scrim every other overlay uses, and
-   `glass` is the immersive treatment that dissolves the page behind a heavy
-   blur instead of dimming it. Seven hand-picked scrims existed before this.
-
-   The panel fades rather than slides — nothing is arriving from an edge, the
-   whole surface is being replaced.
-   -------------------------------------------------------------------------- */
-[data-ds-takeover-scrim='standard'] {
-  background: var(--color-scrim);
-}
-
-[data-ds-takeover-scrim='glass'] {
-  background: rgb(255 255 255 / 0.95);
-  -webkit-backdrop-filter: blur(40px) saturate(1.5);
-  backdrop-filter: blur(40px) saturate(1.5);
-}
-
-html.dark [data-ds-takeover-scrim='glass'] {
-  background: rgb(0 0 0 / 0.95);
-}
-
-@keyframes takeover-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes takeover-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-[data-ds-takeover-scrim][data-state='open'],
-[data-ds-takeover-panel][data-state='open'] {
-  animation: takeover-in var(--motion-duration-fast) var(--motion-ease-standard)
-    both;
-}
-[data-ds-takeover-scrim][data-state='closed'],
-[data-ds-takeover-panel][data-state='closed'] {
-  animation: takeover-out var(--motion-duration-fast)
-    var(--motion-ease-standard) both;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-ds-takeover-scrim],
-  [data-ds-takeover-panel] {
-    animation: none !important;
-  }
-}
-
-/* ----------------------------------------------------------------- Drawer --
-   Edge-anchored panels. Slides only — the panel does not fade, because a
-   sheet reads as a physical surface arriving from off-screen and a
-   simultaneous fade makes it read as a dissolve instead. The scrim fades.
-
-   Timing uses --motion-duration-sheet / --motion-ease-sheet, which already
-   existed for exactly this and were previously used only by /shop.
-
-   `bottom` is centred with `left-4 right-4 mx-auto` rather than a translate,
-   which deliberately leaves `transform` free for the slide. Do not swap that
-   for `left-1/2 -translate-x-1/2`: Tailwind v4 compiles those to the
-   independent `translate` property, which composes with `transform`.
-   -------------------------------------------------------------------------- */
-@keyframes drawer-right-in {
-  from {
-    transform: translateX(100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-@keyframes drawer-right-out {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-@keyframes drawer-left-in {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-@keyframes drawer-left-out {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-100%);
-  }
-}
-@keyframes drawer-bottom-in {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-@keyframes drawer-bottom-out {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(100%);
-  }
-}
-
-[data-ds-drawer-panel][data-side='right'][data-state='open'] {
-  animation: drawer-right-in var(--motion-duration-sheet)
-    var(--motion-ease-sheet) both;
-}
-[data-ds-drawer-panel][data-side='right'][data-state='closed'] {
-  animation: drawer-right-out var(--motion-duration-sheet)
-    var(--motion-ease-sheet) both;
-}
-[data-ds-drawer-panel][data-side='left'][data-state='open'] {
-  animation: drawer-left-in var(--motion-duration-sheet)
-    var(--motion-ease-sheet) both;
-}
-[data-ds-drawer-panel][data-side='left'][data-state='closed'] {
-  animation: drawer-left-out var(--motion-duration-sheet)
-    var(--motion-ease-sheet) both;
-}
-[data-ds-drawer-panel][data-side='bottom'][data-state='open'] {
-  animation: drawer-bottom-in var(--motion-duration-sheet)
-    var(--motion-ease-sheet) both;
-}
-[data-ds-drawer-panel][data-side='bottom'][data-state='closed'] {
-  animation: drawer-bottom-out var(--motion-duration-sheet)
-    var(--motion-ease-sheet) both;
-}
-
-/* Wizard step cross-fade. Steps swap instantly today, so an outcome can
-   replace a spinner with no visual connection between them. Short and
-   opacity-only: the panel must not resize or shift, or the footer buttons jump
-   under the cursor mid-click. */
-@keyframes dialog-step-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-[data-ds-dialog-step] {
-  animation: dialog-step-in var(--motion-duration-fast)
-    var(--motion-ease-standard) both;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-ds-dialog-step] {
-    animation: none !important;
-  }
-}
-
-[data-ds-drawer-scrim][data-state='open'] {
-  animation: dialog-scrim-in var(--motion-duration-sheet)
-    var(--motion-ease-sheet) both;
-}
-[data-ds-drawer-scrim][data-state='closed'] {
-  animation: dialog-scrim-out var(--motion-duration-sheet)
-    var(--motion-ease-sheet) both;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  [data-ds-dialog-scrim],
-  [data-ds-dialog-panel],
-  [data-ds-drawer-scrim],
-  [data-ds-drawer-panel] {
-    animation: none !important;
-  }
 }
 
 /* ============================================================================
diff --git a/src/styles/shop.css b/src/styles/shop.css
index 29ef79756..0fa3ecfc3 100644
--- a/src/styles/shop.css
+++ b/src/styles/shop.css
@@ -95,11 +95,16 @@ html.dark .shop-scope {
   min-height: 100%;
 }
 
-/* Height and enter/exit motion now come from the DS Drawer. This keeps only
-   the custom property, which descendant rules below still read, so the cap
-   has exactly one source of truth (applied as a max-h utility on the panel). */
+.shop-product-scrim {
+  transition-duration: var(--motion-duration-fast);
+}
+
 .shop-product-sheet {
   --shop-product-sheet-top: calc(var(--navbar-height, 56px) + 48px);
+
+  max-height: calc(100svh - var(--shop-product-sheet-top));
+  transition-duration: var(--motion-duration-sheet);
+  transition-timing-function: var(--motion-ease-sheet);
 }
 
 .shop-product-animate .shop-product-reveal {