From 5ccab8cdfb523c09dc360237c294c35cea39a6ab Mon Sep 17 00:00:00 2001
From: vihar <vihar.kurama@gmail.com>
Date: Sun, 16 Aug 2026 19:54:41 +0530
Subject: [PATCH] docs: add Copy page menu to doc pages

Adds a split button on the page-title row of every doc page:

- Copy page: copies the page's raw Markdown to the clipboard
- View as Markdown: opens the page's .md in a new tab
- Open in ChatGPT / Open in Claude: hands the .md URL to the AI tool

Uses the per-page .md files buildEnd() already emits, so no config or
server changes. Pages can opt out with copyPage: false (home page does).
---
 docs/.vitepress/theme/Layout.vue              |  11 +-
 .../theme/components/CopyPageMenu.vue         | 457 ++++++++++++++++++
 .../theme/components/copy-page-icons.ts       |  15 +
 docs/.vitepress/theme/style.css               |  43 +-
 docs/index.md                                 |   1 +
 5 files changed, 519 insertions(+), 8 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/CopyPageMenu.vue
 create mode 100644 docs/.vitepress/theme/components/copy-page-icons.ts

diff --git a/docs/.vitepress/theme/Layout.vue b/docs/.vitepress/theme/Layout.vue
index b34b700f..0be3a6b6 100644
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@@ -1,10 +1,15 @@
 <script setup lang="ts">
 import { computed, useSlots } from "vue";
 import VoidZeroTheme from "@voidzero-dev/vitepress-theme";
+import CopyPageMenu from "./components/CopyPageMenu.vue";
 
 const BaseLayout = VoidZeroTheme.Layout;
 const slots = useSlots();
-const forwardSlotNames = computed(() => Object.keys(slots) as string[]);
+// `doc-before` is rendered explicitly below (it also hosts the "Copy page" control),
+// so keep it out of the dynamic forwarding loop.
+const forwardSlotNames = computed(() =>
+  (Object.keys(slots) as string[]).filter((name) => name !== "doc-before"),
+);
 </script>
 
 <template>
@@ -12,5 +17,9 @@ const forwardSlotNames = computed(() => Object.keys(slots) as string[]);
     <template v-for="name in forwardSlotNames" :key="name" #[name]="data">
       <slot :name="name" v-bind="data || {}" />
     </template>
+    <template #doc-before>
+      <slot name="doc-before" />
+      <CopyPageMenu />
+    </template>
   </BaseLayout>
 </template>
diff --git a/docs/.vitepress/theme/components/CopyPageMenu.vue b/docs/.vitepress/theme/components/CopyPageMenu.vue
new file mode 100644
index 00000000..e9d26391
--- /dev/null
+++ b/docs/.vitepress/theme/components/CopyPageMenu.vue
@@ -0,0 +1,457 @@
+<!-- @format -->
+
+<script setup lang="ts">
+/**
+ * "Copy page" split button + menu, rendered in the `doc-before` slot (see Layout.vue).
+ *
+ * The raw Markdown for every page is served next to the HTML at `<path>.md`
+ * (config.ts `buildEnd()` copies the source files into dist/), so this component
+ * only needs the current page's source path to copy / view / hand off to an AI tool.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useData, useRoute, withBase } from "vitepress";
+import { ArrowUpRight, Check, ChevronDown, Copy } from "lucide-vue-next";
+import { CLAUDE_ICON, MARKDOWN_ICON, OPENAI_ICON } from "./copy-page-icons";
+
+type Status = "idle" | "busy" | "copied" | "error";
+
+const { page, frontmatter } = useData();
+const route = useRoute();
+
+const root = ref<HTMLElement | null>(null);
+const toggleBtn = ref<HTMLButtonElement | null>(null);
+const menu = ref<HTMLElement | null>(null);
+const open = ref(false);
+const status = ref<Status>("idle");
+/** Filled on mount; only read inside the (client-only) menu. */
+const origin = ref("");
+let resetTimer: number | undefined;
+
+/** Hidden on the 404 page and on pages that opt out with `copyPage: false`. */
+const enabled = computed(
+  () => !page.value.isNotFound && !!page.value.filePath && frontmatter.value.copyPage !== false,
+);
+
+/** Source path of the current page, e.g. "/ai/mcp-server.md" or "/index.md". */
+const mdPath = computed(() => withBase("/" + page.value.filePath));
+
+const prompt = computed(() =>
+  encodeURIComponent(`Read ${origin.value}${mdPath.value} so I can ask questions about it.`),
+);
+
+const links = computed(() => [
+  {
+    title: "View as Markdown",
+    desc: "View this page as plain text",
+    href: mdPath.value,
+    icon: MARKDOWN_ICON,
+  },
+  {
+    title: "Open in ChatGPT",
+    desc: "Ask questions about this page",
+    href: `https://chatgpt.com/?hints=search&q=${prompt.value}`,
+    icon: OPENAI_ICON,
+  },
+  {
+    title: "Open in Claude",
+    desc: "Ask questions about this page",
+    href: `https://claude.ai/new?q=${prompt.value}`,
+    icon: CLAUDE_ICON,
+  },
+]);
+
+const label = computed(
+  () =>
+    ({ idle: "Copy page", busy: "Copy page", copied: "Copied", error: "Copy failed" })[
+      status.value
+    ],
+);
+
+/* ---------------------------------------------------------------------------
+ * Markdown source — cached per path and prefetched on hover/focus so the
+ * clipboard write can usually happen synchronously inside the click gesture.
+ * ------------------------------------------------------------------------- */
+
+interface MarkdownEntry {
+  path: string;
+  promise: Promise<string>;
+  text?: string;
+}
+
+let cache: MarkdownEntry | null = null;
+
+function loadMarkdown(): MarkdownEntry {
+  const path = mdPath.value;
+  if (cache?.path !== path) {
+    const entry: MarkdownEntry = {
+      path,
+      promise: fetch(path, { headers: { Accept: "text/markdown" } }).then((res) => {
+        if (!res.ok) throw new Error(`HTTP ${res.status} for ${path}`);
+        return res.text();
+      }),
+    };
+    entry.promise.then(
+      (text) => {
+        entry.text = text;
+      },
+      () => {
+        if (cache === entry) cache = null;
+      },
+    );
+    cache = entry;
+  }
+  return cache;
+}
+
+function prefetch(): void {
+  loadMarkdown().promise.catch(() => {});
+}
+
+async function writeClipboard(entry: MarkdownEntry): Promise<void> {
+  const clipboard = navigator.clipboard;
+
+  // Fast path: text already loaded — write synchronously inside the gesture.
+  if (clipboard && entry.text !== undefined) {
+    return clipboard.writeText(entry.text);
+  }
+
+  // Safari drops the user activation after an `await`, but accepts a
+  // promise-backed ClipboardItem, so register the write before fetching.
+  if (clipboard?.write && typeof ClipboardItem !== "undefined") {
+    const blob = entry.promise.then((text) => new Blob([text], { type: "text/plain" }));
+    return clipboard.write([new ClipboardItem({ "text/plain": blob })]);
+  }
+
+  const text = await entry.promise;
+  if (clipboard) return clipboard.writeText(text);
+
+  // Non-secure contexts (e.g. http:// on a LAN IP) have no navigator.clipboard.
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.readOnly = true;
+  textarea.style.cssText = "position:fixed;top:0;left:0;opacity:0";
+  document.body.append(textarea);
+  textarea.select();
+  const ok = document.execCommand("copy");
+  textarea.remove();
+  if (!ok) throw new Error("execCommand('copy') failed");
+}
+
+function setStatus(next: Status): void {
+  status.value = next;
+  window.clearTimeout(resetTimer);
+  if (next === "copied" || next === "error") {
+    resetTimer = window.setTimeout(
+      () => {
+        status.value = "idle";
+      },
+      next === "error" ? 2500 : 2000,
+    );
+  }
+}
+
+async function copy(): Promise<void> {
+  close();
+  if (status.value === "busy") return;
+  setStatus("busy");
+  try {
+    await writeClipboard(loadMarkdown());
+    setStatus("copied");
+  } catch (error) {
+    console.error("[copy-page]", error);
+    setStatus("error");
+  }
+}
+
+/* ---------------------------------------------------------------------------
+ * Menu open/close + keyboard handling
+ * ------------------------------------------------------------------------- */
+
+function menuItems(): HTMLElement[] {
+  return Array.from(menu.value?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? []);
+}
+
+function toggle(event: MouseEvent): void {
+  open.value = !open.value;
+  if (open.value) {
+    prefetch();
+    // Opened via keyboard (Enter/Space report detail === 0): move focus into the menu.
+    if (event.detail === 0) nextTick(() => menuItems()[0]?.focus());
+  }
+}
+
+function close(refocus = false): void {
+  if (!open.value) return;
+  open.value = false;
+  if (refocus) toggleBtn.value?.focus();
+}
+
+function onMenuKeydown(event: KeyboardEvent): void {
+  const items = menuItems();
+  if (items.length === 0) return;
+  const index = items.indexOf(document.activeElement as HTMLElement);
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    items[(index + 1) % items.length]?.focus();
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    items[(index - 1 + items.length) % items.length]?.focus();
+  }
+}
+
+function onDocumentPointerDown(event: PointerEvent): void {
+  if (open.value && !root.value?.contains(event.target as Node)) close();
+}
+
+function onDocumentKeydown(event: KeyboardEvent): void {
+  if (event.key === "Escape") close(true);
+}
+
+onMounted(() => {
+  origin.value = window.location.origin;
+  document.addEventListener("pointerdown", onDocumentPointerDown);
+  document.addEventListener("keydown", onDocumentKeydown);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("pointerdown", onDocumentPointerDown);
+  document.removeEventListener("keydown", onDocumentKeydown);
+  window.clearTimeout(resetTimer);
+});
+
+watch(
+  () => route.path,
+  () => {
+    open.value = false;
+    setStatus("idle");
+  },
+);
+</script>
+
+<template>
+  <div v-if="enabled" ref="root" class="copy-page" @pointerenter="prefetch" @focusin="prefetch">
+    <div class="copy-page__split">
+      <button type="button" class="copy-page__main" :disabled="status === 'busy'" @click="copy">
+        <component :is="status === 'copied' ? Check : Copy" :size="14" aria-hidden="true" />
+        <span aria-live="polite">{{ label }}</span>
+      </button>
+      <button
+        ref="toggleBtn"
+        type="button"
+        class="copy-page__toggle"
+        aria-label="More copy options"
+        aria-haspopup="menu"
+        :aria-expanded="open"
+        @click="toggle"
+      >
+        <ChevronDown :size="14" aria-hidden="true" />
+      </button>
+    </div>
+
+    <div
+      v-if="open"
+      ref="menu"
+      class="copy-page__menu"
+      role="menu"
+      aria-label="Copy page options"
+      @keydown="onMenuKeydown"
+    >
+      <button type="button" role="menuitem" class="copy-page__item" @click="copy">
+        <span class="copy-page__icon"><Copy :size="16" aria-hidden="true" /></span>
+        <span class="copy-page__text">
+          <span class="copy-page__title">Copy page</span>
+          <span class="copy-page__desc">Copy page as Markdown for LLMs</span>
+        </span>
+      </button>
+      <a
+        v-for="link in links"
+        :key="link.title"
+        role="menuitem"
+        class="copy-page__item"
+        :href="link.href"
+        target="_blank"
+        rel="noopener noreferrer"
+        @click="close()"
+      >
+        <span class="copy-page__icon" v-html="link.icon" />
+        <span class="copy-page__text">
+          <span class="copy-page__title">
+            {{ link.title }}
+            <ArrowUpRight :size="12" aria-hidden="true" />
+          </span>
+          <span class="copy-page__desc">{{ link.desc }}</span>
+        </span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Placement inside the doc column lives in theme/style.css ("COPY PAGE MENU"). */
+.copy-page {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  font-size: 13px;
+  line-height: 1;
+}
+
+.copy-page__split {
+  display: inline-flex;
+  height: 34px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  overflow: hidden;
+}
+
+.copy-page__main,
+.copy-page__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 100%;
+  padding: 0 10px;
+  font: inherit;
+  font-weight: 500;
+  color: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.copy-page__main {
+  /* "Copied" / "Copy failed" must not shift the chevron */
+  min-width: 104px;
+}
+
+.copy-page__toggle {
+  padding: 0 7px;
+  border-left: 1px solid var(--vp-c-divider);
+}
+
+.copy-page__toggle svg {
+  transition: transform 0.15s ease;
+}
+
+.copy-page__toggle[aria-expanded="true"] svg {
+  transform: rotate(180deg);
+}
+
+.copy-page__main:hover,
+.copy-page__toggle:hover,
+.copy-page__toggle[aria-expanded="true"] {
+  background: var(--vp-c-bg-soft);
+}
+
+.copy-page__main:disabled {
+  cursor: default;
+  opacity: 0.7;
+}
+
+.copy-page__main:focus-visible,
+.copy-page__toggle:focus-visible,
+.copy-page__item:focus-visible {
+  outline: 2px solid var(--vp-c-brand-1);
+  outline-offset: -2px;
+}
+
+.copy-page__menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 10;
+  width: min(280px, calc(100vw - 48px));
+  padding: 4px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  background: var(--vp-c-bg-elv);
+  box-shadow: var(--vp-shadow-3);
+}
+
+.copy-page__item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: 6px;
+  color: var(--vp-c-text-1);
+  text-align: left;
+  text-decoration: none;
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.copy-page__item:hover,
+.copy-page__item:focus-visible {
+  background: var(--vp-c-bg-soft);
+}
+
+.copy-page__icon {
+  flex: none;
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+  margin-top: 1px;
+}
+
+/* v-html content isn't covered by scoped attributes */
+.copy-page__icon :deep(svg) {
+  width: 16px;
+  height: 16px;
+}
+
+.copy-page__text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.copy-page__title {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.copy-page__desc {
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--vp-c-text-2);
+}
+
+/* Dark: the docs override --vp-c-bg/--vp-c-bg-soft but not --vp-c-bg-elv (≈ page bg),
+   so step the menu up with the docs' soft/mute tones. */
+html.dark .copy-page__menu,
+[data-theme="dark"] .copy-page__menu {
+  background: var(--vp-c-bg-soft);
+}
+
+html.dark .copy-page__item:hover,
+html.dark .copy-page__item:focus-visible,
+[data-theme="dark"] .copy-page__item:hover,
+[data-theme="dark"] .copy-page__item:focus-visible {
+  background: var(--vp-c-bg-mute);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .copy-page__main,
+  .copy-page__toggle,
+  .copy-page__toggle svg,
+  .copy-page__item {
+    transition: none;
+  }
+}
+
+@media print {
+  .copy-page {
+    display: none;
+  }
+}
+</style>
diff --git a/docs/.vitepress/theme/components/copy-page-icons.ts b/docs/.vitepress/theme/components/copy-page-icons.ts
new file mode 100644
index 00000000..9272c6f8
--- /dev/null
+++ b/docs/.vitepress/theme/components/copy-page-icons.ts
@@ -0,0 +1,15 @@
+/** @format */
+
+/**
+ * Inline SVG glyphs for the "Copy page" menu (rendered via v-html, sized by CSS).
+ * All paths use fill="currentColor" so they follow the surrounding text color.
+ */
+
+export const MARKDOWN_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M0 8a4 4 0 0 1 4-4h16a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4zm4-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm1.684 2.051A1 1 0 0 1 6.8 8.4L9 11.333 11.2 8.4A1 1 0 0 1 13 9v6a1 1 0 1 1-2 0v-3l-1.2 1.6a1 1 0 0 1-1.6 0L7 12v3a1 1 0 1 1-2 0V9a1 1 0 0 1 .684-.949M18 9a1 1 0 1 0-2 0v3.586l-.293-.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l2-2a1 1 0 0 0-1.414-1.414l-.293.293z" clip-rule="evenodd"/></svg>';
+
+export const OPENAI_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" aria-hidden="true"><path fill="currentColor" d="M101.228 164.247q-7.425 0-14.108-2.821a38.3 38.3 0 0 1-11.88-7.871q-5.643 1.93-11.731 1.931-9.95 0-18.414-4.901T31.433 137.22q-5.05-8.464-5.05-18.859 0-4.307 1.189-9.356-5.94-5.494-9.207-12.622-3.267-7.276-3.267-15.147 0-8.019 3.415-15.444t9.504-12.771q6.237-5.495 14.405-7.574 1.634-8.465 6.83-15.147 5.348-6.83 13.07-10.692t16.483-3.86q7.425 0 14.108 2.82a38.3 38.3 0 0 1 11.88 7.871q5.643-1.93 11.731-1.93 9.95 0 18.414 4.9t13.514 13.365q5.197 8.465 5.197 18.86 0 4.306-1.188 9.355 5.94 5.495 9.207 12.771a35.6 35.6 0 0 1 3.267 14.999q0 8.019-3.415 15.444t-9.653 12.919q-6.088 5.346-14.256 7.425-1.633 8.465-6.979 15.147-5.198 6.831-12.92 10.692t-16.483 3.861m-36.68-18.562q7.425 0 12.92-3.119l27.918-16.038q1.485-1.04 1.485-2.821v-12.771l-35.937 20.641q-3.267 1.93-6.534 0l-28.067-16.186q0 .445-.148 1.039v1.782q0 7.574 3.564 13.959 3.712 6.237 10.246 9.801 6.534 3.713 14.553 3.713m1.485-24.206q.891.446 1.634.446t1.485-.446l11.137-6.385-35.788-20.79q-3.267-1.93-3.267-5.792V56.288q-7.425 3.267-11.88 10.098-4.455 6.683-4.455 14.85 0 7.276 3.712 13.959t9.653 10.098zm35.195 32.967q7.87 0 14.256-3.564t10.098-9.801 3.712-13.959V95.046q0-1.782-1.485-2.673l-11.286-6.534v41.432q0 3.86-3.267 5.791L85.19 149.249q7.276 5.197 16.038 5.197m5.643-54.351V79.899L90.09 70.395 73.161 79.9v20.196L90.09 109.6zM63.509 52.724q0-3.861 3.267-5.792l28.066-16.186q-7.276-5.198-16.038-5.198-7.87 0-14.256 3.564-6.385 3.564-10.098 9.801-3.564 6.237-3.564 13.96V84.8q0 1.782 1.485 2.821l11.138 6.534zm75.438 70.983q7.425-3.267 11.731-10.098 4.455-6.831 4.455-14.85 0-7.276-3.712-13.96-3.713-6.681-9.653-10.097l-27.769-16.038q-.891-.594-1.634-.446-.743 0-1.485.446L99.743 64.9l35.937 20.938q1.633.891 2.376 2.376.891 1.337.891 3.267zm-29.849-75.438q3.267-2.079 6.534 0l28.215 16.483V62.08q0-7.128-3.564-13.513-3.415-6.534-9.949-10.395-6.386-3.861-14.85-3.861-7.425 0-12.92 3.118L74.646 53.466q-1.485 1.04-1.485 2.822v12.77z"/></svg>';
+
+export const CLAUDE_ICON =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 101" fill="none" aria-hidden="true"><path fill="currentColor" d="m96.138 40.515 3.5 2v1.5l-1 3.5-42.5 10-3.996-9.93zm0 0" transform-origin="50px 50px"/><path fill="currentColor" d="m80.626 11.495 4.894 1.027 1.299 1.6 1.239 3.837-.514 2.447-28.521 39-9.5-9.5 26.3-34.514zm0 0" transform-origin="50px 50px"/><path fill="currentColor" d="m56.537 5.537 3-2 2.5 1 2.5 3.5-6.849 41.162-4.65-3.162-2-5.5 3.5-31zm0 0" transform-origin="50px 50px"/><path fill="currentColor" d="m25.058 6.102 3.082-3.937 2.01-.46 3.99.584 1.968 1.54 14.345 31.804 5.19 15.11-6.071 3.376-23.139-41.987zm0 0" transform-origin="50px 50px"/><path fill="currentColor" d="m10.766 27.61-1-4.003 3-3.5 3.5.5h1l21 15.5 6.5 5 9 7-5 8.5-4.5-3.5-3-3-29-20.5zm0 0" transform-origin="50px 50px"/><path fill="currentColor" d="m4.856 53-2.263-2.5v-2.224l2.263-.776 25.5 1.5 25 2-.812 4.978L6.856 53.5zm0 0" transform-origin="50px 50px"/><path fill="currentColor" d="M19.428 78.51h-5l-1.988-2.29v-2.737l8.488-6 34.508-21.966 3.492 5.966zm0 0" transform-origin="50px 50px"/><path fill="currentColor" d="m28.59 92.082-2 .5-3-1.5.5-2.5 29.5-39 4 5.5-22 29zm0 0" transform-origin="50px 50px"/><path fill="currentColor" d="m53.09 96.91-1.5 2-3 1-2.5-2-1.5-3 7.5-40.5 4.5.5zm0 0" transform-origin="50px 50px"/><path fill="currentColor" d="M77.985 86.16v4l-.5 1.5-2 1-3.5-.466-24.033-35.77 9.533-7.264 8 14.5.75 5.25zm0 0" transform-origin="50px 50px"/><path fill="currentColor" d="m89.132 80.508.5 2.5-1.5 2-1.5-.5-8.5-6-13-11.5-10-7 3-9.5 5 3 3 5.5zm0 0" transform-origin="50px 50px"/><path fill="currentColor" d="m82.5 55.5 12.5 1 3 2 2 3v2.159L94.5 66l-28-7-11.5-.5L58 48l8 6zm0 0" transform-origin="50px 50px"/></svg>';
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 7727bb54..03a1e2f0 100644
--- a/docs/.vitepress/theme/style.css
+++ b/docs/.vitepress/theme/style.css
@@ -1048,13 +1048,10 @@ html.dark .docs-layout,
   }
 
   .docs-layout .VPDoc.has-aside .content {
-    /* Theme default adds large top padding here; remove it so only `.main` controls vertical offset */
-    padding: 0 32px 128px !important;
-  }
-
-  .docs-layout .VPDoc.has-aside .content .main {
-    /* Slightly lower than both side columns */
-    padding-top: 32px !important;
+    /* Theme default adds large top padding here; use 32px so the body copy sits slightly
+       lower than both side columns. Kept on `.content` (not `.main`) so the `doc-before`
+       slot — which hosts the "Copy page" control — shares the H1's vertical origin. */
+    padding: 32px 32px 128px !important;
   }
 
   /* Right "On this page" rail: the theme’s `.aside-container` is 224px, so the flex
@@ -1181,6 +1178,38 @@ html.dark .docs-layout,
   }
 }
 
+/* ================================================
+   COPY PAGE MENU — placement of components/CopyPageMenu.vue
+   Rendered in the `doc-before` slot (Layout.vue), i.e. as the first child of
+   `.VPDoc .content-container`, right above <main class="main">. The H1 lives inside the
+   markdown output, so the control is anchored to the content column and the H1
+   reserves room for it. Visual styles are scoped in the component.
+   ================================================ */
+.docs-layout .VPDoc .content-container {
+  position: relative; /* anchor for the absolutely positioned control */
+}
+
+/* < 768px: in-flow, right-aligned block above the title */
+.docs-layout .VPDoc .content-container > .copy-page {
+  margin: 0 0 16px;
+}
+
+@media (min-width: 768px) {
+  .docs-layout .VPDoc .content-container > .copy-page {
+    position: absolute;
+    top: 2px; /* (h1 line box ~38px − 34px button) / 2 */
+    right: 0;
+    margin: 0;
+    z-index: 10; /* below --vp-z-index-local-nav (20) and the image lightbox */
+  }
+
+  /* Reserve the control's footprint on the H1 only when it actually rendered
+     (sibling selector, so `copyPage: false` pages keep the full width). */
+  .docs-layout .VPDoc .content-container > .copy-page ~ .main .vp-doc > div > h1 {
+    padding-right: 156px; /* ≈ 132px control + 24px gap — re-measure if the label changes */
+  }
+}
+
 /* ================================================
    HERO IMAGE STYLES
    ================================================ */
diff --git a/docs/index.md b/docs/index.md
index 1c7e5a38..ca6d8d73 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -4,6 +4,7 @@ title: Plane Docs
 description: Everything you need to learn Plane, manage projects, and build powerful workflows.
 prev: false
 next: false
+copyPage: false
 ---
 
 <!-- @format -->