feat: move Copy page button to H1 header row

Move the "Copy page" dropdown from the TOC sidebar into the main content
area, inline with the page H1. The button is right-aligned in a flex
header row using <header> (not <div>) to avoid the markdown-body CSS
column override. The dropdown panel is now absolutely positioned so it
floats over content without shifting layout.

Author: donjo

_components/CopyPage.tsx

@@ -9,7 +9,7 @@ export default function CopyPage({ file }: { file: string | undefined }) {
   }`;
 
   return (
-    <details class="copy-page-dropdown">
+    <details class="copy-page-dropdown relative">
       <summary class="btn list-none [&::-webkit-details-marker]:hidden flex items-center gap-2 cursor-pointer select-none">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -36,7 +36,7 @@ export default function CopyPage({ file }: { file: string | undefined }) {
         </svg>
       </summary>
 
-      <div class="mt-2 border border-foreground-tertiary rounded-md overflow-hidden bg-white dark:bg-gray-900">
+      <div class="absolute right-0 z-50 mt-1 w-72 border border-foreground-tertiary rounded-md overflow-hidden bg-white dark:bg-gray-900 shadow-lg">
         <button class="copy-page-link-btn flex items-start gap-3 w-full px-4 py-3 text-left hover:bg-background-secondary dark:hover:bg-gray-800 transition-colors">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -62,7 +62,7 @@ export default function CopyPage({ file }: { file: string | undefined }) {
         <a
           href={file}
           target="_blank"
-          class="flex items-start gap-3 px-4 py-3 border-t border-foreground-tertiary hover:bg-background-secondary dark:hover:bg-gray-800 transition-colors"
+          class="no-underline flex items-start gap-3 px-4 py-3 border-t border-foreground-tertiary hover:bg-background-secondary dark:hover:bg-gray-800 transition-colors"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -86,7 +86,7 @@ export default function CopyPage({ file }: { file: string | undefined }) {
         <a
           href={claudeUrl}
           target="_blank"
-          class="flex items-start gap-3 px-4 py-3 border-t border-foreground-tertiary hover:bg-background-secondary dark:hover:bg-gray-800 transition-colors"
+          class="no-underline flex items-start gap-3 px-4 py-3 border-t border-foreground-tertiary hover:bg-background-secondary dark:hover:bg-gray-800 transition-colors"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"

_components/TableOfContents.tsx

@@ -1,33 +1,23 @@
 import type { TableOfContentsItem as TableOfContentsItem_ } from "../types.ts";
 
-export default function TableOfContents({ data, toc, hasSubNav, file }: {
+export default function TableOfContents({ data, toc, hasSubNav }: {
   data: Lume.Data;
   toc: TableOfContentsItem_[];
   hasSubNav: boolean;
-  file?: string;
 }) {
   if (!toc || toc.length === 0) {
     return null;
   }
   const topClasses = hasSubNav ? "top-header-plus-subnav" : "top-header";
 
   return (
-    <div
-      className={`hidden sticky ${topClasses} h-screen-minus-header border-l border-l-foreground-tertiary lg:flex lg:flex-col lg:w-full`}
+    <ul
+      className={`toc-list hidden sticky ${topClasses} h-screen-minus-header overflow-y-auto border-l border-l-foreground-tertiary p-4 pr-0 lg:flex lg:flex-col lg:w-full`}
+      id="toc"
     >
-      {file && !file.includes("[") && (
-        <div class="px-4 pt-4 shrink-0">
-          <data.comp.CopyPage file={file} />
-        </div>
-      )}
-      <ul
-        className="toc-list overflow-y-auto flex-1 p-4 pr-0"
-        id="toc"
-      >
-        {toc.map((item: TableOfContentsItem_) => (
-          <data.comp.TableOfContentsItem item={item} />
-        ))}
-      </ul>
-    </div>
+      {toc.map((item: TableOfContentsItem_) => (
+        <data.comp.TableOfContentsItem item={item} />
+      ))}
+    </ul>
   );
 }

_includes/doc.tsx

@@ -69,12 +69,17 @@ export default function Doc(data: Lume.Data, helpers: Lume.Helpers) {
               class="markdown-body mt-6 sm:mt-6"
             >
               {!(isReference && !isApiLandingPage) && (
-                <h1
-                  dangerouslySetInnerHTML={{
-                    __html: helpers.md(data.title!, true),
-                  }}
-                >
-                </h1>
+                <header class="flex items-start justify-between gap-4">
+                  <h1
+                    dangerouslySetInnerHTML={{
+                      __html: helpers.md(data.title!, true),
+                    }}
+                  >
+                  </h1>
+                  {file && !file.includes("[") && file.endsWith(".md") && (
+                    <data.comp.CopyPage file={file} />
+                  )}
+                </header>
               )}
               {data.available_since && (
                 <div class="bg-gray-200 rounded-md text-sm py-3 px-4 mb-4 font-semibold">

_includes/layout.tsx

@@ -120,7 +120,6 @@ export default function Layout(data: Lume.Data) {
               toc={data.toc}
               data={data}
               hasSubNav={hasSubNav}
-              file={data.page?.sourcePath}
             />
           )}
         </div>