@gentleduck/docs 0.0.13 → 0.0.16

package/package.json

@@ -4,15 +4,17 @@
     "node": ">=22.0.0"
   },
   "dependencies": {
-    "@shikijs/compat": "^1.12.1",
+    "@shikijs/compat": "^2.5.0",
+    "@tanstack/react-virtual": "^3.13.19",
     "@types/unist": "^3.0.3",
     "aria-hidden": "^1.2.6",
     "hast": "^1.0.0",
     "hast-util-to-string": "^3.0.1",
+    "lunr": "^2.3.9",
     "mdast-util-toc": "^7.1.0",
     "react-remove-scroll": "^2.7.2",
     "rehype-autolink-headings": "^7.1.0",
-    "rehype-pretty-code": "^0.6.0",
+    "rehype-pretty-code": "^0.14.3",
     "rehype-slug": "^6.0.0",
     "remark": "^15.0.1",
     "remark-code-import": "^1.2.0",
@@ -23,49 +25,45 @@
     "unist-builder": "4.0.0",
     "unist-util-visit": "^5.0.0",
     "velite": "^0.3.1",
-    "zod": "4.2.1"
+    "zod": "4.3.6"
   },
   "devDependencies": {
-    "@excalidraw/excalidraw": "^0.17.2",
+    "@excalidraw/excalidraw": "^0.18.0",
     "@gentleduck/hooks": "workspace:*",
     "@gentleduck/libs": "workspace:*",
-    "@gentleduck/registry-ui-duckui": "workspace:*",
-    "@gentleduck/tsdown-config": "workspace:*",
+    "@gentleduck/registry-ui": "workspace:*",
     "@gentleduck/typescript-config": "workspace:*",
     "@gentleduck/vim": "workspace:*",
-    "@testing-library/jest-dom": "^6.8.0",
-    "@testing-library/user-event": "^14.6.1",
     "@types/hast": "^3.0.4",
-    "@types/node": "22.19.3",
-    "@types/react": "19.2.7",
+    "@types/lunr": "^2.3.7",
+    "@types/node": "^25.3.0",
+    "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "clsx": "^2.1.1",
     "jotai": "^2.16.2",
-    "lucide-react": "0.562.0",
+    "lucide-react": "0.576.0",
     "next": "^16.1.1",
     "next-themes": "^0.4.6",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-resizable-panels": "^3.0.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-resizable-panels": "^4.7.0",
     "rimraf": "^6.0.1",
     "tailwind-merge": "^3.4.0",
     "tsdown": "0.18.3",
-    "typescript": "5.9.3",
-    "vite": "npm:rolldown-vite@^7.3.0",
-    "vitest": "^4.0.16"
+    "typescript": "5.9.3"
   },
   "peerDependencies": {
-    "@excalidraw/excalidraw": "^0.17.2",
+    "@excalidraw/excalidraw": "^0.18.0",
     "@gentleduck/hooks": "workspace:*",
     "@gentleduck/libs": "workspace:*",
     "@gentleduck/vim": "workspace:*",
     "jotai": "^2.14.0",
-    "lucide-react": "0.562.0",
+    "lucide-react": "0.576.0",
     "next": "^16.1.1",
     "next-themes": "^0.4.6",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-resizable-panels": "^3.0.6"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-resizable-panels": "^4.7.0"
   },
   "peerDependenciesMeta": {
     "@excalidraw/excalidraw": {
@@ -134,17 +132,16 @@
   "name": "@gentleduck/docs",
   "packageManager": "bun@1.3.5",
   "private": false,
-  "description": "Shared docs app kit used by the duck-ui docs apps.",
+  "description": "Shared docs app kit used by the gentleduck/ui docs apps.",
   "keywords": [
     "gentleduck",
-    "duck-ui",
     "docs",
     "documentation",
     "mdx",
     "nextjs"
   ],
   "license": "MIT",
-  "author": "duck-ui contributors",
+  "author": "gentleduck contributors",
   "homepage": "https://github.com/gentleeduck/duck-ui/tree/master/packages/duck-docs#readme",
   "bugs": {
     "url": "https://github.com/gentleeduck/duck-ui/issues"
@@ -158,12 +155,13 @@
     "access": "public"
   },
   "scripts": {
-    "build": "cp -r ../registers/registry-colors/registry-colors.ts ./src/lib/registry-colors-data.ts && tsdown && node ./scripts/patch-react-refresh.mjs && node ./scripts/copy-styles.mjs",
-    "dev": "vitest",
-    "check-types": "tsc -p tsconfig.json --noEmit --pretty false --skipLibCheck",
-    "test": "vitest run"
+    "build": "cp -r ../registers/registry-colors/registry-colors.ts ./src/lib/registry-colors-data.ts && tsdown && bun run scripts/copy-styles.ts",
+    "check-types:test": "tsc -p tsconfig.test.json --noEmit --pretty false --skipLibCheck",
+    "test": "bun test ./tests",
+    "dev": "tsdown --watch",
+    "check-types": "tsc -p tsconfig.json --noEmit --pretty false --skipLibCheck"
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.0.13"
+  "version": "0.0.16"
 }

package/src/components/copy-button.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { type Event, trackEvent } from '@duck-docs/lib/events'
+import { cn } from '@gentleduck/libs/cn'
+import { Button } from '@gentleduck/registry-ui/button'
+import { CheckIcon, Copy } from 'lucide-react'
+import * as React from 'react'
+
+export async function copyToClipboardWithMeta(value: string, event?: Event) {
+  navigator.clipboard.writeText(value)
+  if (event) {
+    trackEvent(event)
+  }
+}
+
+export type CopyButtonProps = import('@gentleduck/registry-ui/button').ButtonProps & {
+  value: string
+  event?: Event['name']
+}
+
+export function CopyButton({ value, className, variant = 'ghost', event, ...props }: CopyButtonProps) {
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false)
+    }, 3000)
+  }, [hasCopied])
+
+  return (
+    <Button
+      aria-label={hasCopied ? 'Copied' : 'Copy'}
+      className={cn('[&_svg]:!size-3.5 size-7 rounded-sm shadow-none', className)}
+      icon={hasCopied ? <CheckIcon aria-hidden="true" /> : <Copy aria-hidden="true" />}
+      onClick={() => {
+        copyToClipboardWithMeta(
+          value,
+          event
+            ? {
+                name: event,
+                properties: {
+                  code: value,
+                },
+              }
+            : undefined,
+        )
+        setHasCopied(true)
+      }}
+      size="icon"
+      variant={variant}
+      {...props}
+    />
+  )
+}

package/src/components/docs/docs-copy-page.tsx

@@ -1,28 +1,76 @@
 'use client'
 
 import { useCopyToClipboard } from '@gentleduck/hooks/use-copy-to-clipboard'
-import { Button } from '@gentleduck/registry-ui-duckui/button'
+import { Button } from '@gentleduck/registry-ui/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@gentleduck/registry-ui-duckui/dropdown-menu'
-import { Separator } from '@gentleduck/registry-ui-duckui/separator'
+} from '@gentleduck/registry-ui/dropdown-menu'
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '@gentleduck/registry-ui/popover'
+import { Separator } from '@gentleduck/registry-ui/separator'
 import { Check, ChevronDown, Copy } from 'lucide-react'
+import { usePathname } from 'next/navigation'
 import { useSiteConfig } from '../../context'
 
 function getPromptUrl(baseURL: string, url: string, siteName: string) {
   return `${baseURL}?q=${encodeURIComponent(
-    `I’m looking at this ${siteName} documentation: ${url}.
-Help me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.`,
+    `I'm looking at this ${siteName} documentation: ${url}.\nHelp me understand how to use it. Be ready to explain concepts, give examples, or help debug based on it.\n  `,
   )}`
 }
 
+function resolvePageUrl(url: string) {
+  if (url && (url.startsWith('http://') || url.startsWith('https://'))) {
+    return url.replace(/\/$/, '')
+  }
+
+  if (typeof window !== 'undefined') {
+    const fallback = `${window.location.origin}${window.location.pathname}`.replace(/\/$/, '')
+    if (!url || url.startsWith('undefined') || url.startsWith('null')) {
+      return fallback
+    }
+
+    try {
+      return new URL(url, window.location.origin).toString().replace(/\/$/, '')
+    } catch {
+      return fallback
+    }
+  }
+
+  return url?.replace(/\/$/, '') || ''
+}
+
 const menuItems = {
+  markdown: (url: string) => (
+    <a href={`${url}.md`} rel="noopener noreferrer" target="_blank">
+      <svg aria-hidden="true" strokeLinejoin="round" viewBox="0 0 22 16">
+        <path
+          clipRule="evenodd"
+          d="M19.5 2.25H2.5C1.80964 2.25 1.25 2.80964 1.25 3.5V12.5C1.25 13.1904 1.80964 13.75 2.5 13.75H19.5C20.1904 13.75 20.75 13.1904 20.75 12.5V3.5C20.75 2.80964 20.1904 2.25 19.5 2.25ZM2.5 1C1.11929 1 0 2.11929 0 3.5V12.5C0 13.8807 1.11929 15 2.5 15H19.5C20.8807 15 22 13.8807 22 12.5V3.5C22 2.11929 20.8807 1 19.5 1H2.5ZM3 4.5H4H4.25H4.6899L4.98715 4.82428L7 7.02011L9.01285 4.82428L9.3101 4.5H9.75H10H11V5.5V11.5H9V7.79807L7.73715 9.17572L7 9.97989L6.26285 9.17572L5 7.79807V11.5H3V5.5V4.5ZM15 8V4.5H17V8H19.5L17 10.5L16 11.5L15 10.5L12.5 8H15Z"
+          fill="currentColor"
+          fillRule="evenodd"
+        />
+      </svg>
+      View as Markdown
+    </a>
+  ),
+  v0: (url: string, siteName: string) => (
+    <a href={getPromptUrl('https://v0.dev', url, siteName)} rel="noopener noreferrer" target="_blank">
+      <svg
+        aria-hidden="true"
+        className="size-4.5 -translate-x-px"
+        fill="currentColor"
+        viewBox="0 0 147 70"
+        xmlns="http://www.w3.org/2000/svg">
+        <path d="M56 50.203V14h14v46.156C70 65.593 65.593 70 60.156 70c-2.596 0-5.158-1-7-2.843L0 14h19.797L56 50.203ZM147 56h-14V23.953L100.953 56H133v14H96.687C85.814 70 77 61.186 77 50.312V14h14v32.156L123.156 14H91V0h36.312C138.186 0 147 8.814 147 19.688V56Z" />
+      </svg>
+      <span className="-translate-x-[2px]">Open in v0</span>
+    </a>
+  ),
   chatgpt: (url: string, siteName: string) => (
     <a href={getPromptUrl('https://chatgpt.com', url, siteName)} rel="noopener noreferrer" target="_blank">
-      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <svg aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <path
           d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z"
           fill="currentColor"
@@ -33,7 +81,7 @@ const menuItems = {
   ),
   claude: (url: string, siteName: string) => (
     <a href={getPromptUrl('https://claude.ai/new', url, siteName)} rel="noopener noreferrer" target="_blank">
-      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <svg aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
         <path
           d="m4.714 15.956 4.718-2.648.079-.23-.08-.128h-.23l-.79-.048-2.695-.073-2.337-.097-2.265-.122-.57-.121-.535-.704.055-.353.48-.321.685.06 1.518.104 2.277.157 1.651.098 2.447.255h.389l.054-.158-.133-.097-.103-.098-2.356-1.596-2.55-1.688-1.336-.972-.722-.491L2 6.223l-.158-1.008.655-.722.88.06.225.061.893.686 1.906 1.476 2.49 1.833.364.304.146-.104.018-.072-.164-.274-1.354-2.446-1.445-2.49-.644-1.032-.17-.619a2.972 2.972 0 0 1-.103-.729L6.287.133 6.7 0l.995.134.42.364.619 1.415L9.735 4.14l1.555 3.03.455.898.243.832.09.255h.159V9.01l.127-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.583.28.48.685-.067.444-.286 1.851-.558 2.903-.365 1.942h.213l.243-.242.983-1.306 1.652-2.064.728-.82.85-.904.547-.431h1.032l.759 1.129-.34 1.166-1.063 1.347-.88 1.142-1.263 1.7-.79 1.36.074.11.188-.02 2.853-.606 1.542-.28 1.84-.315.832.388.09.395-.327.807-1.967.486-2.307.462-3.436.813-.043.03.049.061 1.548.146.662.036h1.62l3.018.225.79.522.473.638-.08.485-1.213.62-1.64-.389-3.825-.91-1.31-.329h-.183v.11l1.093 1.068 2.003 1.81 2.508 2.33.127.578-.321.455-.34-.049-2.204-1.657-.85-.747-1.925-1.62h-.127v.17l.443.649 2.343 3.521.122 1.08-.17.353-.607.213-.668-.122-1.372-1.924-1.415-2.168-1.141-1.943-.14.08-.674 7.254-.316.37-.728.28-.607-.461-.322-.747.322-1.476.388-1.924.316-1.53.285-1.9.17-.632-.012-.042-.14.018-1.432 1.967-2.18 2.945-1.724 1.845-.413.164-.716-.37.066-.662.401-.589 2.386-3.036 1.439-1.882.929-1.086-.006-.158h-.055L4.138 18.56l-1.13.146-.485-.456.06-.746.231-.243 1.907-1.312Z"
           fill="currentColor"
@@ -42,29 +90,62 @@ const menuItems = {
       Open in Claude
     </a>
   ),
-  markdown: (url: string) => (
-    <a href={`${url}.md`} rel="noopener noreferrer" target="_blank">
-      <svg strokeLinejoin="round" viewBox="0 0 22 16">
+  scira: (url: string, siteName: string) => (
+    <a
+      className="m-0 p-0"
+      href={getPromptUrl('https://scira.ai/', url, siteName)}
+      rel="noopener noreferrer"
+      target="_blank">
+      <svg fill="none" height="934" viewBox="0 0 910 934" width="910" xmlns="http://www.w3.org/2000/svg">
         <path
-          clipRule="evenodd"
-          d="M19.5 2.25H2.5C1.80964 2.25 1.25 2.80964 1.25 3.5V12.5C1.25 13.1904 1.80964 13.75 2.5 13.75H19.5C20.1904 13.75 20.75 13.1904 20.75 12.5V3.5C20.75 2.80964 20.1904 2.25 19.5 2.25ZM2.5 1C1.11929 1 0 2.11929 0 3.5V12.5C0 13.8807 1.11929 15 2.5 15H19.5C20.8807 15 22 13.8807 22 12.5V3.5C22 2.11929 20.8807 1 19.5 1H2.5ZM3 4.5H4H4.25H4.6899L4.98715 4.82428L7 7.02011L9.01285 4.82428L9.3101 4.5H9.75H10H11V5.5V11.5H9V7.79807L7.73715 9.17572L7 9.97989L6.26285 9.17572L5 7.79807V11.5H3V5.5V4.5ZM15 8V4.5H17V8H19.5L17 10.5L16 11.5L15 10.5L12.5 8H15Z"
+          d="M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z"
           fill="currentColor"
-          fillRule="evenodd"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="8"
+        />
+        <path
+          d="M516.774 304.217C510.299 275.491 498.208 252.087 480.335 234.214C462.462 216.341 439.058 204.251 410.333 197.775C439.059 191.3 462.462 179.209 480.335 161.336C498.208 143.463 510.299 120.06 516.774 91.334C523.25 120.059 535.34 143.463 553.213 161.336C571.086 179.209 594.49 191.3 623.216 197.775C594.49 204.251 571.086 216.341 553.213 234.214C535.34 252.087 523.25 275.491 516.774 304.217Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="8"
+        />
+        <path
+          d="M857.5 508.116C763.259 497.644 710.903 445.288 700.432 351.047C689.961 445.288 637.605 497.644 543.364 508.116C637.605 518.587 689.961 570.943 700.432 665.184C710.903 570.943 763.259 518.587 857.5 508.116Z"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="20"
+        />
+        <path
+          d="M700.432 615.957C691.848 589.05 678.575 566.357 660.383 548.165C642.191 529.973 619.499 516.7 592.593 508.116C619.499 499.533 642.191 486.258 660.383 468.066C678.575 449.874 691.848 427.181 700.432 400.274C709.015 427.181 722.289 449.874 740.481 468.066C758.673 486.258 781.365 499.533 808.271 508.116C781.365 516.7 758.673 529.973 740.481 548.165C722.289 566.357 709.015 589.05 700.432 615.957Z"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="20"
+        />
+        <path
+          d="M889.949 121.237C831.049 114.692 798.326 81.9698 791.782 23.0692C785.237 81.9698 752.515 114.692 693.614 121.237C752.515 127.781 785.237 160.504 791.782 219.404C798.326 160.504 831.049 127.781 889.949 121.237Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="8"
+        />
+        <path
+          d="M791.782 196.795C786.697 176.937 777.869 160.567 765.16 147.858C752.452 135.15 736.082 126.322 716.226 121.237C736.082 116.152 752.452 107.324 765.16 94.6152C777.869 81.9065 786.697 65.5368 791.782 45.6797C796.867 65.5367 805.695 81.9066 818.403 94.6152C831.112 107.324 847.481 116.152 867.338 121.237C847.481 126.322 831.112 135.15 818.403 147.858C805.694 160.567 796.867 176.937 791.782 196.795Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="8"
+        />
+        <path
+          d="M760.632 764.337C720.719 814.616 669.835 855.1 611.872 882.692C553.91 910.285 490.404 924.255 426.213 923.533C362.022 922.812 298.846 907.419 241.518 878.531C184.19 849.643 134.228 808.026 95.4548 756.863C56.6815 705.7 30.1238 646.346 17.8129 583.343C5.50207 520.339 7.76433 455.354 24.4266 393.359C41.089 331.364 71.7099 274.001 113.947 225.658C156.184 177.315 208.919 139.273 268.117 114.442"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="30"
         />
       </svg>
-      View as Markdown
-    </a>
-  ),
-  v0: (url: string, siteName: string) => (
-    <a href={getPromptUrl('https://v0.dev', url, siteName)} rel="noopener noreferrer" target="_blank">
-      <svg
-        className="size-4.5 -translate-x-px"
-        fill="currentColor"
-        viewBox="0 0 147 70"
-        xmlns="http://www.w3.org/2000/svg">
-        <path d="M56 50.203V14h14v46.156C70 65.593 65.593 70 60.156 70c-2.596 0-5.158-1-7-2.843L0 14h19.797L56 50.203ZM147 56h-14V23.953L100.953 56H133v14H96.687C85.814 70 77 61.186 77 50.312V14h14v32.156L123.156 14H91V0h36.312C138.186 0 147 8.814 147 19.688V56Z" />
-      </svg>
-      <span className="-translate-x-[2px]">Open in v0</span>
+      Open in Scira
     </a>
   ),
 }
@@ -73,34 +154,68 @@ export function DocsCopyPage({ page, url }: { page: string; url: string }) {
   const siteConfig = useSiteConfig()
   const siteName = siteConfig.name ?? 'documentation'
   const { copyToClipboard, isCopied } = useCopyToClipboard()
+  const pathname = usePathname()
+  const resolvedUrl = resolvePageUrl(url)
 
   const trigger = (
-    <Button className="peer [&>svg]:!size-4 size-8 shadow-none" size="sm" variant="secondary">
-      <ChevronDown />
+    <Button
+      aria-label="More options"
+      className="peer -ml-0.5 size-8 shadow-none md:size-7 md:text-[0.8rem]"
+      size="sm"
+      variant="secondary">
+      <ChevronDown aria-hidden="true" className="rotate-180 sm:rotate-0" />
     </Button>
   )
 
   return (
-    <div className="group/buttons relative flex rounded-lg bg-secondary *:[[data-slot=button]]:focus-visible:relative *:[[data-slot=button]]:focus-visible:z-10">
-      <Button className="[&_svg]:!size-3.5" onClick={() => copyToClipboard(page)} size="sm" variant="secondary">
-        {isCopied ? <Check /> : <Copy />}
-        Copy Page
-      </Button>
-      <Separator className="bg-foreground/25" orientation="vertical" />
-      <DropdownMenu placement="bottom-end">
-        <DropdownMenuTrigger asChild className="hidden sm:flex">
+    <Popover>
+      <div className="group/buttons relative flex rounded-lg bg-secondary *:[[data-slot=button]]:focus-visible:relative *:[[data-slot=button]]:focus-visible:z-10">
+        <PopoverAnchor />
+        <Button
+          className="h-8 shadow-none md:h-7 md:text-[0.8rem]"
+          onClick={() => copyToClipboard(page)}
+          size="sm"
+          variant="secondary">
+          {isCopied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}
+          Copy Page
+        </Button>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild className="hidden sm:flex">
+            {trigger}
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="animate-none! rounded-lg shadow-none">
+            {Object.entries(menuItems).map(([key, value]) => (
+              <DropdownMenuItem asChild key={key}>
+                {value(key === 'markdown' ? pathname : resolvedUrl, siteName)}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <Separator
+          className="!h-6 !bg-foreground/5 md:!h-5 absolute top-1 right-8 z-0 min-h-0 peer-focus-visible:opacity-0 md:right-7"
+          orientation="vertical"
+        />
+
+        <PopoverTrigger asChild className="flex sm:hidden">
           {trigger}
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="bg-muted shadow-none">
+        </PopoverTrigger>
+        <PopoverContent
+          align="start"
+          className="!origin-center w-52 rounded-lg bg-background/70 p-1 shadow-none backdrop-blur-sm dark:bg-background/60">
           {Object.entries(menuItems).map(([key, value]) => (
-            <DropdownMenuItem
-              className="flex [&>a]:flex [&>a]:items-center [&>a]:gap-2 [&[aria-selected]]:bg-zinc-600/40"
-              key={key}>
-              {value(url, siteName)}
-            </DropdownMenuItem>
+            <Button
+              asChild
+              className="w-full justify-start font-normal text-base *:[svg]:text-muted-foreground"
+              key={key}
+              size="lg"
+              variant="ghost">
+              {value(key === 'markdown' ? pathname : resolvedUrl, siteName)}
+            </Button>
           ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
+        </PopoverContent>
+      </div>
+    </Popover>
   )
 }

package/src/components/docs/docs-pager.tsx

@@ -3,7 +3,7 @@
 import { type DocsConfig, useDocsConfig } from '@duck-docs/context'
 import type { NavItem, NavItemWithChildren } from '@duck-docs/types/nav'
 import { cn } from '@gentleduck/libs/cn'
-import { buttonVariants } from '@gentleduck/registry-ui-duckui/button'
+import { buttonVariants } from '@gentleduck/registry-ui/button'
 import { ArrowLeft, ArrowRight, ChevronLeft, ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 
@@ -34,7 +34,7 @@ export function DocsPagerBottom({ doc }: DocsPagerProps) {
           )}
           href={pager.prev.href}
           scroll>
-          <ChevronLeft className="mr-2 size-4" />
+          <ChevronLeft aria-hidden="true" className="mr-2 size-4" />
           <span>{pager.prev.title}</span>
         </Link>
       )}
@@ -49,7 +49,7 @@ export function DocsPagerBottom({ doc }: DocsPagerProps) {
           href={pager.next.href}
           scroll>
           <span>{pager.next.title}</span>
-          <ChevronRight className="ml-2 size-4" />
+          <ChevronRight aria-hidden="true" className="ml-2 size-4" />
         </Link>
       )}
     </div>
@@ -67,30 +67,32 @@ export function DocsPagerTop({ doc }: DocsPagerProps) {
     <div className="flex flex-row items-center justify-between">
       {pager?.prev?.href && (
         <Link
+          aria-label={`Previous: ${pager.prev.title}`}
           className={cn(
             buttonVariants({
-              className: '[&>svg]:!size-4 size-8 items-center',
+              className: '[&>svg]:!size-4 size-8 items-center md:size-7',
               size: 'sm',
               variant: 'secondary',
             }),
           )}
           href={pager.prev.href}
           scroll>
-          <ArrowLeft />
+          <ArrowLeft aria-hidden="true" />
         </Link>
       )}
       {pager?.next?.href && (
         <Link
+          aria-label={`Next: ${pager.next.title}`}
           className={cn(
             buttonVariants({
-              className: '[&>svg]:!size-4 ml-2 size-8 items-center',
+              className: '[&>svg]:!size-4 ml-2 size-8 items-center md:size-7',
               size: 'sm',
               variant: 'secondary',
             }),
           )}
           href={pager.next.href}
           scroll>
-          <ArrowRight />
+          <ArrowRight aria-hidden="true" />
         </Link>
       )}
     </div>
@@ -98,11 +100,19 @@ export function DocsPagerTop({ doc }: DocsPagerProps) {
 }
 
 export function getPagerForDoc(doc: DocsPagerProps['doc'], docsConfig: DocsConfig) {
-  const nav = doc.title.startsWith('/docs/charts') ? docsConfig.chartsNav : docsConfig.sidebarNav
-  const flattenedLinks = [null, ...flatten(nav ?? []), null]
-  const activeIndex = flattenedLinks.findIndex((link) => link?.href?.includes(doc.slug ?? doc.title))
-  const prev = activeIndex !== 0 ? flattenedLinks[activeIndex - 1] : null
-  const next = activeIndex !== flattenedLinks.length - 1 ? flattenedLinks[activeIndex + 1] : null
+  const allNav = [...(docsConfig.sidebarNav ?? []), ...(docsConfig.chartsNav ?? [])]
+  const flattenedLinks = [null, ...flatten(allNav), null]
+
+  // Normalize slug: ensure leading /, strip trailing /index
+  const normalizedSlug = ('/' + (doc.slug ?? '')).replace(/\/+/g, '/').replace(/\/index$/, '')
+
+  const activeIndex = flattenedLinks.findIndex((link) => {
+    if (!link?.href) return false
+    return link.href.replace(/\/index$/, '') === normalizedSlug
+  })
+
+  const prev = activeIndex > 0 ? flattenedLinks[activeIndex - 1] : null
+  const next = activeIndex < flattenedLinks.length - 1 ? flattenedLinks[activeIndex + 1] : null
   return {
     next,
     prev,