feat(registry): add diff-viewer and kbd components + docs polish

app/docs/changelog/page.tsx

@@ -4,7 +4,7 @@ import { join } from "node:path"
 import Link from "next/link"
 import { docsNav } from "@/lib/docs"
 import { getRegistryItem } from "@/lib/registry"
-import { ChangelogImage } from "@/components/changelog-image"
+import { ThemeImage } from "@/components/docs/theme-image"
 
 export const metadata: Metadata = {
   title: "Changelog",
@@ -134,16 +134,16 @@ export default function ChangelogPage() {
                   {entry.hasImage && (
                     <Link
                       href={entry.href}
-                      className="group overflow-hidden rounded-lg border border-border transition-colors hover:border-foreground/20"
+                      className="group overflow-hidden rounded-xl border border-border transition-colors hover:border-foreground/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                     >
-                      <ChangelogImage slug={entry.slug} title={entry.title} />
+                      <ThemeImage slug={entry.slug} title={entry.title} />
                     </Link>
                   )}
 
                   <div>
                     <Link
                       href={entry.href}
-                      className="inline-flex items-center gap-1.5 text-sm font-medium text-foreground hover:underline"
+                      className="inline-flex items-center gap-1.5 rounded-md text-sm font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                     >
                       View documentation →
                     </Link>

app/docs/components/activity-graph/page.tsx

@@ -144,7 +144,7 @@ export default async function ActivityGraphPage() {
         </p>
       </section>
 
-      <section className="flex flex-col gap-8">
+      <section className="flex flex-col gap-4">
         <h2 className="text-xl font-semibold tracking-tight">Examples</h2>
 
         <div className="flex flex-col gap-4">

app/docs/components/ai-copy-button/page.tsx

@@ -43,7 +43,7 @@ export default async function AiCopyButtonPage() {
       }
     >
       {/* Examples */}
-      <section className="flex flex-col gap-8">
+      <section className="flex flex-col gap-4">
         <h2 className="text-xl font-semibold tracking-tight">Examples</h2>
 
         <div className="flex flex-col gap-4">

app/docs/components/api-ref-table/page.tsx

@@ -79,7 +79,7 @@ export default async function ApiRefTablePage() {
       }
     >
       {/* Examples */}
-      <section className="flex flex-col gap-8">
+      <section className="flex flex-col gap-4">
         <h2 className="text-xl font-semibold tracking-tight">Examples</h2>
 
         <div className="flex flex-col gap-4">

app/docs/components/code-block-command/page.tsx

@@ -58,7 +58,7 @@ export default function CodeBlockCommandPage() {
       }
     >
       {/* Examples */}
-      <section className="flex flex-col gap-8">
+      <section className="flex flex-col gap-4">
         <h2 className="text-xl font-semibold tracking-tight">Examples</h2>
 
         <div className="flex flex-col gap-4">
@@ -186,7 +186,7 @@ export default function CodeBlockCommandPage() {
       </section>
 
       {/* Color themes */}
-      <section className="flex flex-col gap-8">
+      <section className="flex flex-col gap-4">
         <h2 className="text-xl font-semibold tracking-tight">Color themes</h2>
         <p className="text-sm text-muted-foreground">
           Pass a{" "}

app/docs/components/code-block/page.tsx

@@ -90,7 +90,7 @@ export default async function CodeBlockPage() {
       }
     >
       {/* Examples */}
-      <section className="flex flex-col gap-8">
+      <section className="flex flex-col gap-4">
         <h2 className="text-xl font-semibold tracking-tight">Examples</h2>
 
         <div className="flex flex-col gap-4">
@@ -213,7 +213,7 @@ export default async function CodeBlockPage() {
       </section>
 
       {/* Color themes */}
-      <section className="flex flex-col gap-8">
+      <section className="flex flex-col gap-4">
         <h2 className="text-xl font-semibold tracking-tight">Color themes</h2>
         <p className="text-sm text-muted-foreground">
           Pass a{" "}

app/docs/components/code-line/page.tsx

@@ -66,7 +66,7 @@ export default async function CodeLinePage() {
       }
     >
       {/* Examples */}
-      <section className="flex flex-col gap-8">
+      <section className="flex flex-col gap-4">
         <h2 className="text-xl font-semibold tracking-tight">Examples</h2>
 
         <div className="flex flex-col gap-4">
@@ -173,7 +173,7 @@ export default async function CodeLinePage() {
       </section>
 
       {/* Color themes */}
-      <section className="flex flex-col gap-8">
+      <section className="flex flex-col gap-4">
         <h2 className="text-xl font-semibold tracking-tight">Color themes</h2>
         <p className="text-sm text-muted-foreground">
           Pass a{" "}

app/docs/components/cron-schedule/page.tsx

@@ -70,7 +70,7 @@ export default function CronSchedulePage() {
       }
     >
       {/* Examples */}
-      <section className="flex flex-col gap-8">
+      <section className="flex flex-col gap-4">
         <h2 className="text-xl font-semibold tracking-tight">Examples</h2>
 
         <div className="flex flex-col gap-4">

app/docs/components/diff-viewer/page.tsx

@@ -0,0 +1,260 @@
+import type { Metadata } from "next"
+import { DiffViewer } from "@/registry/diff-viewer/diff-viewer"
+import { ApiRefTable } from "@/registry/api-ref-table/api-ref-table"
+import { ComponentDocsPage } from "@/components/docs/component-docs-page"
+import { VariantGrid } from "@/components/docs/variant-grid"
+import { CodeLine } from "@/registry/code-line/code-line"
+
+export const metadata: Metadata = {
+  title: "Diff Viewer",
+  description:
+    "Code diff viewer with line numbers and add/remove coloring. Supports unified and split layouts.",
+}
+
+const sourceFiles = [
+  "registry/diff-viewer/diff-viewer.tsx",
+  "registry/diff-viewer/diff-viewer-client.tsx",
+]
+
+const oldCode = `import { useState } from "react"
+
+function Counter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <button onClick={() => setCount(count + 1)}>
+      Count: {count}
+    </button>
+  )
+}`
+
+const newCode = `import { useState, useCallback } from "react"
+
+function Counter({ initial = 0 }) {
+  const [count, setCount] = useState(initial)
+
+  const increment = useCallback(() => {
+    setCount((prev) => prev + 1)
+  }, [])
+
+  return (
+    <button onClick={increment}>
+      Count: {count}
+    </button>
+  )
+}`
+
+const configOld = `{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "strict": true
+  }
+}`
+
+const configNew = `{
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true
+  }
+}`
+
+export default function DiffViewerPage() {
+  return (
+    <ComponentDocsPage
+      title="Diff Viewer"
+      description="Code diff viewer with line numbers and add/remove coloring. Supports unified and split layouts."
+      registryName="diff-viewer"
+      sourceFiles={sourceFiles}
+      preview={
+        <div className="w-full">
+          <DiffViewer
+            oldCode={oldCode}
+            newCode={newCode}
+            oldTitle="counter.tsx"
+            newTitle="counter.tsx"
+          />
+        </div>
+      }
+      usage={
+        <>
+          <CodeLine
+            code={`import { DiffViewer } from "@/components/diff-viewer"`}
+          />
+          <CodeLine
+            code={`<DiffViewer oldCode={before} newCode={after} />`}
+          />
+        </>
+      }
+    >
+      {/* Layouts */}
+      <section className="flex flex-col gap-4">
+        <h2 className="text-xl font-semibold tracking-tight">Layouts</h2>
+        <VariantGrid
+          items={[
+            {
+              label: "Unified",
+              preview: (
+                <DiffViewer
+                  oldCode={configOld}
+                  newCode={configNew}
+                  layout="unified"
+                  oldTitle="tsconfig.json"
+                  newTitle="tsconfig.json"
+                />
+              ),
+              code: `<DiffViewer oldCode={before} newCode={after} layout="unified" />`,
+            },
+            {
+              label: "Split",
+              preview: (
+                <DiffViewer
+                  oldCode={configOld}
+                  newCode={configNew}
+                  layout="split"
+                  oldTitle="tsconfig.json"
+                  newTitle="tsconfig.json"
+                />
+              ),
+              code: `<DiffViewer oldCode={before} newCode={after} layout="split" />`,
+            },
+          ]}
+          files={sourceFiles}
+          columns={1}
+          fullWidth
+          registryName="diff-viewer"
+        />
+      </section>
+
+      {/* Examples */}
+      <section className="flex flex-col gap-4">
+        <h2 className="text-xl font-semibold tracking-tight">Examples</h2>
+        <VariantGrid
+          items={[
+            {
+              label: "With file headers",
+              preview: (
+                <DiffViewer
+                  oldCode={oldCode}
+                  newCode={newCode}
+                  oldTitle="counter.tsx"
+                  newTitle="counter.tsx"
+                />
+              ),
+              code: `<DiffViewer oldCode={before} newCode={after} oldTitle="counter.tsx" newTitle="counter.tsx" />`,
+            },
+            {
+              label: "No header",
+              preview: (
+                <DiffViewer
+                  oldCode={configOld}
+                  newCode={configNew}
+                />
+              ),
+              code: `<DiffViewer oldCode={before} newCode={after} />`,
+            },
+          ]}
+          files={sourceFiles}
+          columns={1}
+          fullWidth
+          registryName="diff-viewer"
+        />
+      </section>
+
+      {/* API Reference */}
+      <section className="flex flex-col gap-4">
+        <h2 className="text-xl font-semibold tracking-tight">API Reference</h2>
+        <ApiRefTable
+          title="DiffViewer"
+          props={[
+            {
+              name: "oldCode",
+              type: "string",
+              description:
+                "Original code string. Used with newCode to compute the diff.",
+            },
+            {
+              name: "newCode",
+              type: "string",
+              description:
+                "Updated code string. Used with oldCode to compute the diff.",
+            },
+            {
+              name: "patch",
+              type: "string",
+              description:
+                "Pre-computed unified diff string. Alternative to oldCode/newCode.",
+            },
+            {
+              name: "layout",
+              type: '"unified" | "split"',
+              description:
+                "Diff display layout. Unified shows a single column, split shows side-by-side.",
+            },
+            {
+              name: "language",
+              type: "string",
+              description:
+                "Shiki language key for syntax highlighting. Plain text when omitted.",
+            },
+            {
+              name: "oldTitle",
+              type: "string",
+              description: "Label for the old file in the header.",
+            },
+            {
+              name: "newTitle",
+              type: "string",
+              description: "Label for the new file in the header.",
+            },
+            {
+              name: "className",
+              type: "string",
+              description: "Additional CSS classes on the root element.",
+            },
+          ]}
+        />
+      </section>
+
+      {/* Notes */}
+      <section className="flex flex-col gap-4">
+        <h2 className="text-xl font-semibold tracking-tight">Notes</h2>
+        <ul className="list-disc space-y-2 pl-6 text-sm text-muted-foreground">
+          <li>
+            <strong className="text-foreground">Two input modes.</strong>{" "}
+            Pass{" "}
+            <code className="rounded bg-muted px-1 py-0.5 text-xs">
+              oldCode
+            </code>{" "}
+            +{" "}
+            <code className="rounded bg-muted px-1 py-0.5 text-xs">
+              newCode
+            </code>{" "}
+            to compute the diff, or pass a{" "}
+            <code className="rounded bg-muted px-1 py-0.5 text-xs">
+              patch
+            </code>{" "}
+            string if you already have one.
+          </li>
+          <li>
+            <strong className="text-foreground">Icon library.</strong>{" "}
+            Uses{" "}
+            <a
+              href="https://lucide.dev"
+              className="underline hover:text-foreground"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Lucide
+            </a>{" "}
+            icons by default. Since this is copy-paste code, you can swap the
+            imports if your project uses a different icon library.
+          </li>
+        </ul>
+      </section>
+    </ComponentDocsPage>
+  )
+}

app/docs/components/env-table/page.tsx

@@ -154,7 +154,7 @@ export default function EnvTablePage() {
       }
     >
       {/* Examples */}
-      <section className="flex flex-col gap-8">
+      <section className="flex flex-col gap-4">
         <h2 className="text-xl font-semibold tracking-tight">Examples</h2>
 
         <div className="flex flex-col gap-4">

app/docs/components/file-tree/page.tsx

@@ -169,7 +169,7 @@ export default function FileTreePage() {
       }
     >
       {/* Examples */}
-      <section className="flex flex-col gap-8">
+      <section className="flex flex-col gap-4">
         <h2 className="text-xl font-semibold tracking-tight">Examples</h2>
 
         <div className="flex flex-col gap-4">