docs(shell-docs): align docs page rendering

Updates the shell-docs route wrappers, MDX component chrome, page actions, snippets, and registry rendering so content pages inherit the refreshed theme and responsive sizing consistently.

Call-site enumeration:

- DocsPageView and mdx-components remain the route-level rendering path for docs, framework, AG-UI, and reference pages.

- CopyButton/Snippet/PropertyReference changes stay within MDX-rendered content surfaces.

Author: tylerslaton

showcase/shell-docs/src/app/[[...slug]]/error.tsx

@@ -38,7 +38,7 @@ export default function DocsError({
         )}
         <button
           onClick={reset}
-          className="px-4 py-2 rounded-lg border border-[var(--border)] text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] transition-colors"
+          className="shell-docs-radius-control h-10 border border-[var(--border)] px-4 text-sm text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-elevated)]"
         >
           Try again
         </button>

showcase/shell-docs/src/app/[[...slug]]/page.tsx

@@ -15,7 +15,6 @@ import { LandingSampleTabs } from "@/components/landing-sample-tabs";
 import { ShellDocsLayout } from "@/components/shell-docs-layout";
 import { SidebarFrameworkSelector } from "@/components/sidebar-framework-selector";
 import { UnscopedDocsPage } from "@/components/unscoped-docs-page";
-import { FrameworkLogo } from "@/components/icons/framework-icons";
 import {
   buildFrameworkNav,
   buildFrameworkOnlyNav,
@@ -144,18 +143,7 @@ function DocsOverview() {
         <section className="relative border-b border-[var(--border)] pb-6 sm:pb-7">
           <div className="flex max-w-[765px] flex-col">
             <div>
-              <div className="mb-5 flex items-center gap-3">
-                <div className="flex h-9 w-9 items-center justify-center rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] text-[var(--text)]">
-                  <FrameworkLogo
-                    slug={HOME_DEFAULT_FRAMEWORK}
-                    className="h-5 w-5"
-                  />
-                </div>
-                <span className="text-sm font-semibold tracking-tight text-[var(--text)] sm:text-base">
-                  Documentation
-                </span>
-              </div>
-              <h1 className="max-w-[24ch] text-[2rem] font-semibold leading-[1.08] tracking-[-0.02em] text-[var(--text)] sm:text-[2.5rem]">
+              <h1 className="max-w-[24ch] text-[2rem] font-semibold leading-[1.08] tracking-[-0.02em] text-[var(--text)] sm:text-[2.5rem] md:mt-3">
                 CopilotKit
               </h1>
               <p className="mt-3 max-w-[58ch] text-lg font-medium leading-snug text-[var(--text-muted)] sm:text-[1.375rem]">

showcase/shell-docs/src/app/[framework]/[[...slug]]/page.tsx

@@ -355,7 +355,7 @@ export default async function FrameworkScopedDocsPage({
     : [];
 
   const banner = missingCell ? (
-    <div className="mb-6 rounded-lg border border-yellow-500/40 bg-yellow-500/5 p-4">
+    <div className="shell-docs-radius-surface shell-docs-warning-surface mb-6 border p-4 shadow-[var(--shadow-control)]">
       <div className="text-sm font-semibold text-[var(--text)] mb-1">
         Not available for {frameworkName} yet
       </div>
@@ -653,7 +653,7 @@ function NotAvailableForFrameworkPage({
           <p className="text-base text-[var(--text-muted)] mb-6 leading-relaxed">
             This topic isn't available for {frameworkName}.
           </p>
-          <div className="rounded-lg border border-yellow-500/40 bg-yellow-500/5 p-5 mb-6">
+          <div className="shell-docs-radius-surface shell-docs-warning-surface mb-6 border p-5 shadow-[var(--shadow-control)]">
             <div className="text-sm font-semibold text-[var(--text)] mb-2">
               Available in other integrations
             </div>

showcase/shell-docs/src/app/ag-ui/[[...slug]]/error.tsx

@@ -38,7 +38,7 @@ export default function AgUiError({
         )}
         <button
           onClick={reset}
-          className="px-4 py-2 rounded-lg border border-[var(--border)] text-sm text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)] transition-colors"
+          className="shell-docs-radius-control h-10 border border-[var(--border)] px-4 text-sm text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-elevated)]"
         >
           Try again
         </button>

showcase/shell-docs/src/app/ag-ui/[[...slug]]/page.tsx

@@ -319,9 +319,9 @@ function OverviewContent() {
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-left mb-10">
         <Link
           href="/ag-ui/concepts/architecture"
-          className="group p-5 rounded-xl border border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--violet)] transition-all"
+          className="shell-docs-radius-surface group border border-[var(--border)] bg-[var(--bg-surface)] p-5 shadow-[var(--shadow-control)] transition-colors hover:border-[var(--accent)] hover:bg-[var(--bg-elevated)]"
         >
-          <h3 className="text-sm font-semibold text-[var(--text)] group-hover:text-[var(--violet)] mb-1">
+          <h3 className="text-sm font-semibold text-[var(--text)] group-hover:text-[var(--accent)] mb-1">
             Concepts
           </h3>
           <p className="text-xs text-[var(--text-muted)]">
@@ -330,9 +330,9 @@ function OverviewContent() {
         </Link>
         <Link
           href="/ag-ui/quickstart/introduction"
-          className="group p-5 rounded-xl border border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--violet)] transition-all"
+          className="shell-docs-radius-surface group border border-[var(--border)] bg-[var(--bg-surface)] p-5 shadow-[var(--shadow-control)] transition-colors hover:border-[var(--accent)] hover:bg-[var(--bg-elevated)]"
         >
-          <h3 className="text-sm font-semibold text-[var(--text)] group-hover:text-[var(--violet)] mb-1">
+          <h3 className="text-sm font-semibold text-[var(--text)] group-hover:text-[var(--accent)] mb-1">
             Quick Start
           </h3>
           <p className="text-xs text-[var(--text-muted)]">
@@ -341,9 +341,9 @@ function OverviewContent() {
         </Link>
         <Link
           href="/ag-ui/sdk/js/core/overview"
-          className="group p-5 rounded-xl border border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--violet)] transition-all"
+          className="shell-docs-radius-surface group border border-[var(--border)] bg-[var(--bg-surface)] p-5 shadow-[var(--shadow-control)] transition-colors hover:border-[var(--accent)] hover:bg-[var(--bg-elevated)]"
         >
-          <h3 className="text-sm font-semibold text-[var(--text)] group-hover:text-[var(--violet)] mb-1">
+          <h3 className="text-sm font-semibold text-[var(--text)] group-hover:text-[var(--accent)] mb-1">
             JavaScript SDK
           </h3>
           <p className="text-xs text-[var(--text-muted)]">
@@ -352,9 +352,9 @@ function OverviewContent() {
         </Link>
         <Link
           href="/ag-ui/sdk/python/core/overview"
-          className="group p-5 rounded-xl border border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--violet)] transition-all"
+          className="shell-docs-radius-surface group border border-[var(--border)] bg-[var(--bg-surface)] p-5 shadow-[var(--shadow-control)] transition-colors hover:border-[var(--accent)] hover:bg-[var(--bg-elevated)]"
         >
-          <h3 className="text-sm font-semibold text-[var(--text)] group-hover:text-[var(--violet)] mb-1">
+          <h3 className="text-sm font-semibold text-[var(--text)] group-hover:text-[var(--accent)] mb-1">
             Python SDK
           </h3>
           <p className="text-xs text-[var(--text-muted)]">
@@ -363,9 +363,9 @@ function OverviewContent() {
         </Link>
         <Link
           href="/ag-ui/tutorials/cursor"
-          className="group p-5 rounded-xl border border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--violet)] transition-all"
+          className="shell-docs-radius-surface group border border-[var(--border)] bg-[var(--bg-surface)] p-5 shadow-[var(--shadow-control)] transition-colors hover:border-[var(--accent)] hover:bg-[var(--bg-elevated)]"
         >
-          <h3 className="text-sm font-semibold text-[var(--text)] group-hover:text-[var(--violet)] mb-1">
+          <h3 className="text-sm font-semibold text-[var(--text)] group-hover:text-[var(--accent)] mb-1">
             Tutorials
           </h3>
           <p className="text-xs text-[var(--text-muted)]">
@@ -376,9 +376,9 @@ function OverviewContent() {
           href="https://github.com/ag-ui-protocol/ag-ui"
           target="_blank"
           rel="noopener noreferrer"
-          className="group p-5 rounded-xl border border-[var(--border)] bg-[var(--bg-surface)] hover:border-[var(--violet)] transition-all"
+          className="shell-docs-radius-surface group border border-[var(--border)] bg-[var(--bg-surface)] p-5 shadow-[var(--shadow-control)] transition-colors hover:border-[var(--accent)] hover:bg-[var(--bg-elevated)]"
         >
-          <h3 className="text-sm font-semibold text-[var(--text)] group-hover:text-[var(--violet)] mb-1">
+          <h3 className="text-sm font-semibold text-[var(--text)] group-hover:text-[var(--accent)] mb-1">
             GitHub
           </h3>
           <p className="text-xs text-[var(--text-muted)]">

showcase/shell-docs/src/app/not-found.tsx

@@ -38,13 +38,13 @@ export default function NotFound() {
         <div className="flex justify-center gap-3">
           <Link
             href="/"
-            className="inline-flex items-center px-4 py-2 rounded-lg border border-[var(--accent)] bg-[var(--accent)] text-white text-sm font-medium hover:opacity-90 transition-opacity"
+            className="shell-docs-radius-control inline-flex h-10 items-center border border-[var(--accent)] bg-[var(--accent)] px-4 text-sm font-medium text-[var(--primary-foreground)] transition-opacity hover:opacity-90"
           >
             Go to docs home
           </Link>
           <Link
             href="/reference"
-            className="inline-flex items-center px-4 py-2 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] text-[var(--text)] text-sm font-medium hover:border-[var(--accent)] transition-colors"
+            className="shell-docs-radius-control inline-flex h-10 items-center border border-[var(--border)] bg-[var(--bg-surface)] px-4 text-sm font-medium text-[var(--text)] transition-colors hover:border-[var(--accent)]"
           >
             API reference
           </Link>

showcase/shell-docs/src/app/reference/[...slug]/page.tsx

@@ -82,7 +82,7 @@ const mdxComponents = {
   OpsPlatformCTA,
   LinkIcon,
   Frame: ({ children }: { children: React.ReactNode }) => (
-    <div className="my-6 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-4">
+    <div className="shell-docs-radius-surface my-6 border border-[var(--border)] bg-[var(--bg-surface)] p-4 shadow-[var(--shadow-control)]">
       {children}
     </div>
   ),

showcase/shell-docs/src/app/reference/page.tsx

@@ -72,13 +72,13 @@ export default function ReferencePage() {
                     <Link
                       key={item.slug}
                       href={item.url}
-                      className="block rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-4 hover:bg-[var(--bg-elevated)] transition-colors"
+                      className="shell-docs-radius-surface block min-w-0 border border-[var(--border)] bg-[var(--bg-surface)] p-4 shadow-[var(--shadow-control)] transition-colors hover:border-[var(--accent)] hover:bg-[var(--bg-elevated)]"
                     >
-                      <div className="font-mono text-sm font-semibold text-[var(--accent)]">
+                      <div className="min-w-0 break-words font-mono text-sm font-semibold text-[var(--accent)] [overflow-wrap:anywhere]">
                         {displayTitle(item)}
                       </div>
                       {item.description && (
-                        <div className="text-xs text-[var(--text-muted)] mt-1">
+                        <div className="mt-1 min-w-0 break-words text-xs text-[var(--text-muted)] [overflow-wrap:anywhere]">
                           {item.description}
                         </div>
                       )}

showcase/shell-docs/src/components/ai/page-actions.tsx

@@ -138,7 +138,7 @@ export function MarkdownCopyButton({
         buttonVariants({
           color: "secondary",
           size: "sm",
-          className: "gap-2 [&_svg]:size-3.5 [&_svg]:text-fd-muted-foreground",
+          className: "gap-2 [&_svg]:size-3.5 [&_svg]:text-[var(--text-muted)]",
         }),
         props.className,
       )}
@@ -280,12 +280,12 @@ export function ViewOptionsPopover({
             color: "secondary",
             size: "sm",
           }),
-          "gap-2 data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground",
+          "gap-2 data-[state=open]:border-[var(--accent)] data-[state=open]:bg-[var(--accent-dim)] data-[state=open]:text-[var(--accent)]",
           props.className,
         )}
       >
         {props.children ?? "Open"}
-        <ChevronDown className="size-3.5 text-fd-muted-foreground" />
+        <ChevronDown className="size-3.5 text-[var(--text-muted)]" />
       </PopoverTrigger>
       <PopoverContent className="flex flex-col">
         {items.map((item) => (
@@ -311,11 +311,11 @@ export function ViewOptionsPopover({
                 path: pathname,
               })
             }
-            className="text-sm p-2 rounded-lg inline-flex items-center gap-2 hover:text-fd-accent-foreground hover:bg-fd-accent [&_svg]:size-4"
+            className="shell-docs-radius-control inline-flex items-center gap-2 p-2 text-sm text-[var(--text-secondary)] transition-colors hover:bg-[var(--bg-elevated)] hover:text-[var(--text)] [&_svg]:size-4"
           >
             {item.icon}
             {item.title}
-            <ExternalLinkIcon className="text-fd-muted-foreground size-3.5 ms-auto" />
+            <ExternalLinkIcon className="ms-auto size-3.5 text-[var(--text-muted)]" />
           </a>
         ))}
       </PopoverContent>

showcase/shell-docs/src/components/copy-button.tsx

@@ -54,26 +54,14 @@ export function CopyButton({ text }: { text: string }) {
         }
       }}
       aria-label={label}
-      style={{
-        padding: "2px 8px",
-        fontSize: "10px",
-        lineHeight: 1.2,
-        border: "1px solid var(--border)",
-        borderRadius: "4px",
-        background: copied
-          ? "var(--accent-light)"
+      className={[
+        "shell-docs-radius-control cursor-pointer border border-[var(--border)] px-2 py-0.5 text-[10px] leading-[1.2] transition-colors",
+        copied
+          ? "bg-[var(--accent-light)] text-[var(--accent)]"
           : error
-            ? "var(--bg-elevated)"
-            : "var(--bg-surface)",
-        color: copied
-          ? "var(--accent)"
-          : error
-            ? "var(--text)"
-            : "var(--text-muted)",
-        cursor: "pointer",
-        fontFamily: "inherit",
-        transition: "background 120ms, color 120ms",
-      }}
+            ? "bg-[var(--bg-elevated)] text-[var(--text)]"
+            : "bg-[var(--bg-surface)] text-[var(--text-muted)] hover:bg-[var(--bg-elevated)] hover:text-[var(--text)]",
+      ].join(" ")}
     >
       {label}
     </button>