From 49d717575af46ea3989817f5d9b474417c83df96 Mon Sep 17 00:00:00 2001
From: Hunter Garrett <hunter@hunterbecton.com>
Date: Tue, 8 Sep 2026 21:47:53 -0400
Subject: [PATCH 01/10] feat(docs): add the Copy React split button and menu to
 the component header

The header becomes a two-column row with the mock's split button on the
right. The menu is Base UI's Menu, styled after the updated Figma frame,
and the floating table of contents takes the same 10px padding and 6px
corners so the two popups match. Nothing is wired yet.
---
 .../src/app/components/[slug]/page.module.css |  15 ++
 apps/docs/src/app/components/[slug]/page.tsx  |  11 +-
 .../page-actions/page-actions.module.css      | 165 ++++++++++++++++++
 .../components/page-actions/page-actions.tsx  |  72 ++++++++
 .../components/page-toc/page-toc.module.css   |  13 +-
 5 files changed, 267 insertions(+), 9 deletions(-)
 create mode 100644 apps/docs/src/components/page-actions/page-actions.module.css
 create mode 100644 apps/docs/src/components/page-actions/page-actions.tsx

diff --git a/apps/docs/src/app/components/[slug]/page.module.css b/apps/docs/src/app/components/[slug]/page.module.css
index f6fdb074..df416237 100644
--- a/apps/docs/src/app/components/[slug]/page.module.css
+++ b/apps/docs/src/app/components/[slug]/page.module.css
@@ -15,11 +15,26 @@
   margin: var(--spacing-4) 0 0;
 }
 
+/* The header is two columns: the title and description on the left, the
+   copy actions on the right, bottom-aligned so the button sits on the
+   description's line as in the mock. The text column wraps below a
+   comfortable reading width (the sm container) rather than squeezing, which
+   drops the actions onto their own line under it on a narrow viewport. */
 .header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--spacing-4) var(--spacing-6);
   max-width: var(--container-4xl);
   margin: var(--spacing-6) 0 0;
 }
 
+.heading {
+  flex: 1 1 var(--container-sm);
+  min-width: 0;
+}
+
 .title {
   font-size: var(--font-size-4xl);
   font-weight: var(--font-weight-semibold);
diff --git a/apps/docs/src/app/components/[slug]/page.tsx b/apps/docs/src/app/components/[slug]/page.tsx
index dd2d2e26..b9dea5bd 100644
--- a/apps/docs/src/app/components/[slug]/page.tsx
+++ b/apps/docs/src/app/components/[slug]/page.tsx
@@ -1,7 +1,8 @@
 /**
  * Shared shell for every converted component page, in the mock's section
  * order: breadcrumbs and header above the demo, Usage and API Reference
- * below it, then prev/next pagination. Titles and descriptions come from the
+ * below it, then prev/next pagination. The header carries the page's copy
+ * actions beside the title (page-actions/). Titles and descriptions come from the
  * catalog (content/components.ts) and page order from its taxonomy tree; the
  * interactive demo and Usage content come from the demo registry, which
  * every component page has an entry in.
@@ -18,6 +19,7 @@ import { notFound } from 'next/navigation';
 import { Breadcrumbs } from '@/components/breadcrumbs/breadcrumbs';
 import { CodeBlock } from '@/components/code-block/code-block';
 import { ChevronDownIcon } from '@/components/icons/chevron-down';
+import { PageActions } from '@/components/page-actions/page-actions';
 import { PageToc, type PageTocSection } from '@/components/page-toc/page-toc';
 import { PropsTable } from '@/components/props-table/props-table';
 import { getComponentsCatalog, getComponentsTree } from '@/content/catalog';
@@ -88,8 +90,11 @@ export default async function ComponentPage({ params }: PageProps) {
       <Breadcrumbs className={styles.breadcrumbs} crumbs={crumbs} />
       <div id={slug}>
         <header className={styles.header}>
-          <h1 className={styles.title}>{record.label}</h1>
-          <p className={styles.description}>{record.description}</p>
+          <div className={styles.heading}>
+            <h1 className={styles.title}>{record.label}</h1>
+            <p className={styles.description}>{record.description}</p>
+          </div>
+          <PageActions slug={slug} />
         </header>
         <Island />
       </div>
diff --git a/apps/docs/src/components/page-actions/page-actions.module.css b/apps/docs/src/components/page-actions/page-actions.module.css
new file mode 100644
index 00000000..220d3987
--- /dev/null
+++ b/apps/docs/src/components/page-actions/page-actions.module.css
@@ -0,0 +1,165 @@
+/* The header's split "Copy React" button and the menu it opens. The box,
+   its two buttons, and the menu follow the Figma mock; the button's hover
+   and press feel copy the control panel's text button, and the menu's
+   panel and rows copy the floating table of contents, so the site's three
+   popups read as one family. */
+
+/* ---- The box ---- */
+
+/* One bordered 32px box around two buttons: the mock's darkest gray with
+   the hairline and 6px corners. The buttons carry no border of their own,
+   so the box's hairline is the only line around them. */
+.actions {
+  display: inline-flex;
+  flex: none;
+  align-items: stretch;
+  height: var(--spacing-8);
+  background: var(--gray-900);
+  border: var(--border-width-1) solid var(--white-a5);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-sm);
+  line-height: var(--leading-5);
+}
+
+/* Shared by both buttons: the label gray on a transparent fill, hover to
+   the faint white fill under full-white text, and a press felt through a
+   slight scale rather than seen. Each button rounds only its outer corners,
+   so the hover fill follows the box's shape without clipping the focus
+   ring. */
+.copy,
+.more {
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  color: var(--gray-50);
+  border: 0;
+  font: inherit;
+  cursor: pointer;
+  transition:
+    color var(--fade-xs) var(--ease-hover),
+    background-color var(--fade-xs) var(--ease-hover),
+    transform var(--duration-sm) var(--ease-out);
+}
+
+.copy svg,
+.more svg {
+  flex: none;
+  transition: color var(--fade-xs) var(--ease-hover);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .copy:hover,
+  .more:hover {
+    background: var(--white-a5);
+    color: var(--fg);
+  }
+
+  .copy:hover svg,
+  .more:hover svg {
+    color: var(--fg);
+  }
+}
+
+.copy:active,
+.more:active {
+  transform: scale(0.97);
+}
+
+.copy:focus-visible,
+.more:focus-visible {
+  outline: 1px solid var(--accent);
+  outline-offset: 1px;
+}
+
+/* The copy action: a 16px glyph and the label, 8px apart, with 8px on each
+   side. The mock draws the glyph one step lighter than the chevron. */
+.copy {
+  gap: var(--spacing-2);
+  padding: 0 var(--spacing-2);
+  border-radius: var(--radius-md) 0 0 var(--radius-md);
+}
+
+.copy svg {
+  color: var(--gray-100);
+}
+
+/* The chevron cell: a 32px square behind a hairline, with the glyph
+   centered. The rule is drawn as a left border so the cell and its divider
+   are one box, and it stops 1px short of the top and bottom as in the mock
+   because the box's own border already covers those pixels. */
+.more {
+  justify-content: center;
+  width: var(--spacing-8);
+  border-left: var(--border-width-1) solid var(--white-a5);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  color: var(--gray-200);
+}
+
+/* ---- The menu ---- */
+
+/* Portaled to <body>, so it sets its own type. The mock's panel, shared
+   with the table of contents: 256px wide, 10px of padding, the darkest
+   gray with a hairline and 6px corners. It scales in from the edge nearest
+   the chevron, the site's popup pattern; Base UI sets --transform-origin
+   from where the popup was placed. */
+.popup {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-0-5);
+  width: var(--container-3xs);
+  padding: var(--spacing-2-5);
+  background: var(--gray-900);
+  color: var(--fg);
+  border: var(--border-width-1) solid var(--white-a5);
+  border-radius: var(--radius-md);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
+  font-size: var(--font-size-sm);
+  line-height: var(--leading-5);
+  transform-origin: var(--transform-origin);
+  transition:
+    transform var(--duration-sm) var(--ease-out),
+    opacity var(--fade-sm) var(--ease-out);
+}
+
+.popup[data-starting-style],
+.popup[data-ending-style] {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+/* A row is a title over a one-line description: 8px of padding with 12px
+   on the left, 6px corners, and the two lines 2px apart. Base UI marks the
+   row under the pointer or the keyboard cursor as highlighted, which the
+   mock draws as the darker gray fill, the same fill the table of contents
+   gives its current row. */
+.row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-0-5);
+  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-md);
+  color: var(--fg);
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  transition: background-color var(--fade-xs) var(--ease-hover);
+}
+
+.row[data-highlighted] {
+  background: var(--gray-800);
+  text-decoration: none;
+}
+
+.rowTitle {
+  font-size: var(--font-size-sm);
+  line-height: var(--leading-5);
+}
+
+.rowDescription {
+  color: var(--gray-100);
+  font-size: var(--font-size-xs);
+  line-height: var(--leading-4);
+}
diff --git a/apps/docs/src/components/page-actions/page-actions.tsx b/apps/docs/src/components/page-actions/page-actions.tsx
new file mode 100644
index 00000000..02e0326c
--- /dev/null
+++ b/apps/docs/src/components/page-actions/page-actions.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+/**
+ * The split "Copy React" button in a component page's header, after the
+ * Figma mock: a bordered box holding the copy action on the left and a
+ * chevron cell on the right that opens a menu of three actions. Copy React
+ * copies the demo's current props as JSX, and the two markdown rows copy
+ * and open the page's markdown export (SHA-115). The shared
+ * components/[slug] template renders it beside the title and description.
+ * The menu is Base UI's Menu rather than the controls' Select, because the
+ * rows are actions and not a value, but it borrows the select's popup
+ * pattern: portaled, offset from its trigger, and scaled in from the edge
+ * nearest it.
+ */
+import { Menu } from '@base-ui/react/menu';
+
+import { ChevronDownIcon } from '@/components/icons/chevron-down';
+import { CopyIcon } from '@/components/icons/copy';
+
+import styles from './page-actions.module.css';
+
+interface PageActionsProps {
+  /** The component page's slug, which names its markdown export. */
+  slug: string;
+}
+
+// The 12-unit copy glyph drawn on a 16px box, which is exactly the mock's
+// 16px export of the same icon (every coordinate is the 12-unit path times
+// four thirds).
+const COPY_ICON_SIZE = 16;
+
+export function PageActions({ slug }: PageActionsProps) {
+  const markdownHref = `/components/${slug}/index.md`;
+
+  return (
+    <div className={styles.actions}>
+      <button className={styles.copy} type="button">
+        <CopyIcon height={COPY_ICON_SIZE} width={COPY_ICON_SIZE} />
+        Copy React
+      </button>
+      <Menu.Root>
+        <Menu.Trigger aria-label="More copy options" className={styles.more}>
+          <ChevronDownIcon />
+        </Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Positioner align="end" side="bottom" sideOffset={4}>
+            <Menu.Popup className={styles.popup}>
+              <Menu.Item className={styles.row}>
+                <span className={styles.rowTitle}>Copy React</span>
+                <span className={styles.rowDescription}>Copy this component as React</span>
+              </Menu.Item>
+              <Menu.Item className={styles.row}>
+                <span className={styles.rowTitle}>Copy as markdown</span>
+                <span className={styles.rowDescription}>Copy this page as markdown for LLMs</span>
+              </Menu.Item>
+              <Menu.LinkItem
+                className={styles.row}
+                closeOnClick
+                href={markdownHref}
+                rel="noreferrer"
+                target="_blank"
+              >
+                <span className={styles.rowTitle}>View as markdown</span>
+                <span className={styles.rowDescription}>View this page as plain text</span>
+              </Menu.LinkItem>
+            </Menu.Popup>
+          </Menu.Positioner>
+        </Menu.Portal>
+      </Menu.Root>
+    </div>
+  );
+}
diff --git a/apps/docs/src/components/page-toc/page-toc.module.css b/apps/docs/src/components/page-toc/page-toc.module.css
index bba9728c..bf3ddd8d 100644
--- a/apps/docs/src/components/page-toc/page-toc.module.css
+++ b/apps/docs/src/components/page-toc/page-toc.module.css
@@ -114,18 +114,19 @@
 
 /* ---- The menu ---- */
 
-/* Portaled to <body>, so it sets its own type. The mock's panel: 256px
-   wide, 12px of padding, the darkest gray with a hairline and 12px corners.
-   It scales in from the edge nearest the lines, the site's popup pattern;
-   Base UI sets --transform-origin from where the popup was placed. */
+/* Portaled to <body>, so it sets its own type. The mock's panel, shared
+   with the header's copy menu (page-actions/): 256px wide, 10px of padding,
+   the darkest gray with a hairline and 6px corners. It scales in from the
+   edge nearest the lines, the site's popup pattern; Base UI sets
+   --transform-origin from where the popup was placed. */
 .popup {
   box-sizing: border-box;
   width: var(--container-3xs);
-  padding: var(--spacing-3);
+  padding: var(--spacing-2-5);
   background: var(--gray-900);
   color: var(--fg);
   border: var(--border-width-1) solid var(--white-a5);
-  border-radius: var(--radius-xl);
+  border-radius: var(--radius-md);
   box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
   font-size: var(--font-size-sm);
   line-height: var(--leading-5);

From 6f2fb4475504e1737dc233993c459f4eb12decd4 Mon Sep 17 00:00:00 2001
From: Hunter Garrett <hunter@hunterbecton.com>
Date: Tue, 8 Sep 2026 22:49:36 -0400
Subject: [PATCH 02/10] feat(docs): give both popups the mock's 12px panel and
 8px offset

---
 .../components/page-actions/page-actions.module.css  | 12 ++++++------
 .../src/components/page-actions/page-actions.tsx     |  2 +-
 .../docs/src/components/page-toc/page-toc.module.css | 12 ++++++------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/docs/src/components/page-actions/page-actions.module.css b/apps/docs/src/components/page-actions/page-actions.module.css
index 220d3987..2bb939fa 100644
--- a/apps/docs/src/components/page-actions/page-actions.module.css
+++ b/apps/docs/src/components/page-actions/page-actions.module.css
@@ -100,21 +100,21 @@
 /* ---- The menu ---- */
 
 /* Portaled to <body>, so it sets its own type. The mock's panel, shared
-   with the table of contents: 256px wide, 10px of padding, the darkest
-   gray with a hairline and 6px corners. It scales in from the edge nearest
-   the chevron, the site's popup pattern; Base UI sets --transform-origin
-   from where the popup was placed. */
+   with the table of contents: 256px wide, 12px of padding, the darkest
+   gray with a hairline and 12px corners, 8px below the chevron. It scales
+   in from the edge nearest the chevron, the site's popup pattern; Base UI
+   sets --transform-origin from where the popup was placed. */
 .popup {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-0-5);
   width: var(--container-3xs);
-  padding: var(--spacing-2-5);
+  padding: var(--spacing-3);
   background: var(--gray-900);
   color: var(--fg);
   border: var(--border-width-1) solid var(--white-a5);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-xl);
   box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
   font-size: var(--font-size-sm);
   line-height: var(--leading-5);
diff --git a/apps/docs/src/components/page-actions/page-actions.tsx b/apps/docs/src/components/page-actions/page-actions.tsx
index 02e0326c..090be92f 100644
--- a/apps/docs/src/components/page-actions/page-actions.tsx
+++ b/apps/docs/src/components/page-actions/page-actions.tsx
@@ -43,7 +43,7 @@ export function PageActions({ slug }: PageActionsProps) {
           <ChevronDownIcon />
         </Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner align="end" side="bottom" sideOffset={4}>
+          <Menu.Positioner align="end" side="bottom" sideOffset={8}>
             <Menu.Popup className={styles.popup}>
               <Menu.Item className={styles.row}>
                 <span className={styles.rowTitle}>Copy React</span>
diff --git a/apps/docs/src/components/page-toc/page-toc.module.css b/apps/docs/src/components/page-toc/page-toc.module.css
index bf3ddd8d..f3deeb02 100644
--- a/apps/docs/src/components/page-toc/page-toc.module.css
+++ b/apps/docs/src/components/page-toc/page-toc.module.css
@@ -115,18 +115,18 @@
 /* ---- The menu ---- */
 
 /* Portaled to <body>, so it sets its own type. The mock's panel, shared
-   with the header's copy menu (page-actions/): 256px wide, 10px of padding,
-   the darkest gray with a hairline and 6px corners. It scales in from the
-   edge nearest the lines, the site's popup pattern; Base UI sets
-   --transform-origin from where the popup was placed. */
+   with the header's copy menu (page-actions/): 256px wide, 12px of padding,
+   the darkest gray with a hairline and 12px corners, 8px from the lines. It
+   scales in from the edge nearest the lines, the site's popup pattern; Base
+   UI sets --transform-origin from where the popup was placed. */
 .popup {
   box-sizing: border-box;
   width: var(--container-3xs);
-  padding: var(--spacing-2-5);
+  padding: var(--spacing-3);
   background: var(--gray-900);
   color: var(--fg);
   border: var(--border-width-1) solid var(--white-a5);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-xl);
   box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
   font-size: var(--font-size-sm);
   line-height: var(--leading-5);

From 22ae814ec874d9f86ddbe3935d2f2b74d7003a03 Mon Sep 17 00:00:00 2001
From: Hunter Garrett <hunter@hunterbecton.com>
Date: Wed, 9 Sep 2026 06:21:09 -0400
Subject: [PATCH 03/10] feat(docs): shape both popups like the header button

Panels keep the 12px corners but drop to 6px of padding and sit 6px from
their triggers. Rows are the button's 32px box with 12px on the left and
8px on the right. The copy menu is 208px wide and single-line, its
descriptions gone from the mock.
---
 .../page-actions/page-actions.module.css      | 41 ++++++++-----------
 .../components/page-actions/page-actions.tsx  | 15 ++-----
 .../components/page-toc/page-toc.module.css   | 23 ++++++-----
 .../docs/src/components/page-toc/page-toc.tsx |  2 +-
 4 files changed, 33 insertions(+), 48 deletions(-)

diff --git a/apps/docs/src/components/page-actions/page-actions.module.css b/apps/docs/src/components/page-actions/page-actions.module.css
index 2bb939fa..da3dee4a 100644
--- a/apps/docs/src/components/page-actions/page-actions.module.css
+++ b/apps/docs/src/components/page-actions/page-actions.module.css
@@ -100,17 +100,19 @@
 /* ---- The menu ---- */
 
 /* Portaled to <body>, so it sets its own type. The mock's panel, shared
-   with the table of contents: 256px wide, 12px of padding, the darkest
-   gray with a hairline and 12px corners, 8px below the chevron. It scales
-   in from the edge nearest the chevron, the site's popup pattern; Base UI
-   sets --transform-origin from where the popup was placed. */
+   with the table of contents: the darkest gray with a hairline and 12px
+   corners, 6px of padding, 6px below the chevron. This one is 208px wide,
+   the three labels' width with room to spare, where the table of contents
+   takes the 3xs container. It scales in from the edge nearest the chevron,
+   the site's popup pattern; Base UI sets --transform-origin from where the
+   popup was placed. */
 .popup {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-0-5);
-  width: var(--container-3xs);
-  padding: var(--spacing-3);
+  width: var(--spacing-52);
+  padding: var(--spacing-1-5);
   background: var(--gray-900);
   color: var(--fg);
   border: var(--border-width-1) solid var(--white-a5);
@@ -130,16 +132,16 @@
   transform: scale(0.95);
 }
 
-/* A row is a title over a one-line description: 8px of padding with 12px
-   on the left, 6px corners, and the two lines 2px apart. Base UI marks the
-   row under the pointer or the keyboard cursor as highlighted, which the
-   mock draws as the darker gray fill, the same fill the table of contents
-   gives its current row. */
+/* A row is the button's shape: a 14px label in a 32px box with 12px on the
+   left and 8px on the right, 6px corners, 2px from the next row. Base UI
+   marks the row under the pointer or the keyboard cursor as highlighted,
+   which the mock draws as the darker gray fill, the same fill the table of
+   contents gives its current row. */
 .row {
   display: flex;
-  flex-direction: column;
-  gap: var(--spacing-0-5);
-  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
+  align-items: center;
+  height: var(--spacing-8);
+  padding: 0 var(--spacing-2) 0 var(--spacing-3);
   border-radius: var(--radius-md);
   color: var(--fg);
   text-decoration: none;
@@ -152,14 +154,3 @@
   background: var(--gray-800);
   text-decoration: none;
 }
-
-.rowTitle {
-  font-size: var(--font-size-sm);
-  line-height: var(--leading-5);
-}
-
-.rowDescription {
-  color: var(--gray-100);
-  font-size: var(--font-size-xs);
-  line-height: var(--leading-4);
-}
diff --git a/apps/docs/src/components/page-actions/page-actions.tsx b/apps/docs/src/components/page-actions/page-actions.tsx
index 090be92f..f980b001 100644
--- a/apps/docs/src/components/page-actions/page-actions.tsx
+++ b/apps/docs/src/components/page-actions/page-actions.tsx
@@ -43,16 +43,10 @@ export function PageActions({ slug }: PageActionsProps) {
           <ChevronDownIcon />
         </Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner align="end" side="bottom" sideOffset={8}>
+          <Menu.Positioner align="end" side="bottom" sideOffset={6}>
             <Menu.Popup className={styles.popup}>
-              <Menu.Item className={styles.row}>
-                <span className={styles.rowTitle}>Copy React</span>
-                <span className={styles.rowDescription}>Copy this component as React</span>
-              </Menu.Item>
-              <Menu.Item className={styles.row}>
-                <span className={styles.rowTitle}>Copy as markdown</span>
-                <span className={styles.rowDescription}>Copy this page as markdown for LLMs</span>
-              </Menu.Item>
+              <Menu.Item className={styles.row}>Copy React</Menu.Item>
+              <Menu.Item className={styles.row}>Copy as markdown</Menu.Item>
               <Menu.LinkItem
                 className={styles.row}
                 closeOnClick
@@ -60,8 +54,7 @@ export function PageActions({ slug }: PageActionsProps) {
                 rel="noreferrer"
                 target="_blank"
               >
-                <span className={styles.rowTitle}>View as markdown</span>
-                <span className={styles.rowDescription}>View this page as plain text</span>
+                View as markdown
               </Menu.LinkItem>
             </Menu.Popup>
           </Menu.Positioner>
diff --git a/apps/docs/src/components/page-toc/page-toc.module.css b/apps/docs/src/components/page-toc/page-toc.module.css
index f3deeb02..94ee7cf1 100644
--- a/apps/docs/src/components/page-toc/page-toc.module.css
+++ b/apps/docs/src/components/page-toc/page-toc.module.css
@@ -115,14 +115,14 @@
 /* ---- The menu ---- */
 
 /* Portaled to <body>, so it sets its own type. The mock's panel, shared
-   with the header's copy menu (page-actions/): 256px wide, 12px of padding,
-   the darkest gray with a hairline and 12px corners, 8px from the lines. It
+   with the header's copy menu (page-actions/): 256px wide, 6px of padding,
+   the darkest gray with a hairline and 12px corners, 6px from the lines. It
    scales in from the edge nearest the lines, the site's popup pattern; Base
    UI sets --transform-origin from where the popup was placed. */
 .popup {
   box-sizing: border-box;
   width: var(--container-3xs);
-  padding: var(--spacing-3);
+  padding: var(--spacing-1-5);
   background: var(--gray-900);
   color: var(--fg);
   border: var(--border-width-1) solid var(--white-a5);
@@ -151,15 +151,16 @@
   list-style: none;
 }
 
-/* A row is the sidebar's row: 14px muted text in a 36px box with 12px on
-   the left and 8px elsewhere, 6px corners. Hover borrows the sidebar's
-   faint white fill. The current section is the mock's darker gray fill
-   under full-white text, rather than the sidebar's lime, because it marks
-   where the reader is on the page and not a page they chose. */
+/* A row is the header button's shape: 14px muted text in a 32px box with
+   12px on the left and 8px on the right, 6px corners. Hover borrows the
+   sidebar's faint white fill. The current section is the mock's darker
+   gray fill under full-white text, rather than the sidebar's lime, because
+   it marks where the reader is on the page and not a page they chose. */
 .row {
-  display: block;
-  height: var(--spacing-9);
-  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-3);
+  display: flex;
+  align-items: center;
+  height: var(--spacing-8);
+  padding: 0 var(--spacing-2) 0 var(--spacing-3);
   border-radius: var(--radius-md);
   color: var(--fg-muted);
   text-decoration: none;
diff --git a/apps/docs/src/components/page-toc/page-toc.tsx b/apps/docs/src/components/page-toc/page-toc.tsx
index b1ad2204..e0956fab 100644
--- a/apps/docs/src/components/page-toc/page-toc.tsx
+++ b/apps/docs/src/components/page-toc/page-toc.tsx
@@ -137,7 +137,7 @@ export function PageToc({ sections }: { sections: PageTocSection[] }) {
             the lines with a document-coordinate update one frame behind the
             scroll, which reads as jitter. */}
         <Popover.Portal container={dockRef}>
-          <Popover.Positioner align="center" side="right" sideOffset={8}>
+          <Popover.Positioner align="center" side="right" sideOffset={6}>
             <Popover.Popup className={styles.popup}>
               <nav aria-label="On this page">
                 <ul className={styles.list}>

From 445a6ec9aee488ed515bdf66776b0039dadc61d9 Mon Sep 17 00:00:00 2001
From: Hunter Garrett <hunter@hunterbecton.com>
Date: Wed, 9 Sep 2026 06:35:36 -0400
Subject: [PATCH 04/10] feat(docs): wire Copy React to the demo's live props

The island's controls provider publishes its store up through a copy
source context that the page template mounts around header and island,
so the header button reads the current params at click time. The copied
snippet carries the derived import line and, on the four pages whose
scene composes a background, that layer too. A successful copy swaps the
glyph for a lime check. The picker's copy button now shares the same
clipboard hook.
---
 apps/docs/src/app/components/[slug]/page.tsx  | 26 ++++---
 .../docs/src/app/components/demo-registry.tsx | 13 ++++
 .../controls/ColorPopoverContents.tsx         | 39 +----------
 apps/docs/src/components/controls/context.tsx | 55 ++++++++++++++-
 apps/docs/src/components/controls/index.ts    |  9 ++-
 apps/docs/src/components/icons/check.tsx      | 25 +++++++
 .../page-actions/page-actions.module.css      | 69 ++++++++++++++++++-
 .../components/page-actions/page-actions.tsx  | 50 ++++++++++++--
 apps/docs/src/lib/use-clipboard-copy.ts       | 56 +++++++++++++++
 9 files changed, 284 insertions(+), 58 deletions(-)
 create mode 100644 apps/docs/src/components/icons/check.tsx
 create mode 100644 apps/docs/src/lib/use-clipboard-copy.ts

diff --git a/apps/docs/src/app/components/[slug]/page.tsx b/apps/docs/src/app/components/[slug]/page.tsx
index b9dea5bd..d750cf18 100644
--- a/apps/docs/src/app/components/[slug]/page.tsx
+++ b/apps/docs/src/app/components/[slug]/page.tsx
@@ -18,6 +18,7 @@ import { notFound } from 'next/navigation';
 
 import { Breadcrumbs } from '@/components/breadcrumbs/breadcrumbs';
 import { CodeBlock } from '@/components/code-block/code-block';
+import { CopySourceProvider } from '@/components/controls';
 import { ChevronDownIcon } from '@/components/icons/chevron-down';
 import { PageActions } from '@/components/page-actions/page-actions';
 import { PageToc, type PageTocSection } from '@/components/page-toc/page-toc';
@@ -88,16 +89,21 @@ export default async function ComponentPage({ params }: PageProps) {
   return (
     <main>
       <Breadcrumbs className={styles.breadcrumbs} crumbs={crumbs} />
-      <div id={slug}>
-        <header className={styles.header}>
-          <div className={styles.heading}>
-            <h1 className={styles.title}>{record.label}</h1>
-            <p className={styles.description}>{record.description}</p>
-          </div>
-          <PageActions slug={slug} />
-        </header>
-        <Island />
-      </div>
+      {/* The header's Copy React reads the island's control store through
+          this provider; see the copy source in controls/context.tsx. The
+          catalog label doubles as the JSX tag name. */}
+      <CopySourceProvider>
+        <div id={slug}>
+          <header className={styles.header}>
+            <div className={styles.heading}>
+              <h1 className={styles.title}>{record.label}</h1>
+              <p className={styles.description}>{record.description}</p>
+            </div>
+            <PageActions componentName={record.label} siblings={entry.copySiblings} slug={slug} />
+          </header>
+          <Island />
+        </div>
+      </CopySourceProvider>
       {/* Sits right after the demo grid so its lines can measure back up to
           the shader's center; see .dock in page-toc.module.css. */}
       <PageToc sections={sections} />
diff --git a/apps/docs/src/app/components/demo-registry.tsx b/apps/docs/src/app/components/demo-registry.tsx
index bcfb5dd3..47dea07e 100644
--- a/apps/docs/src/app/components/demo-registry.tsx
+++ b/apps/docs/src/app/components/demo-registry.tsx
@@ -34,6 +34,13 @@ export interface ComponentPageEntry {
    * component tag used in the snippet lands in the import automatically.
    */
   usageSnippet: string;
+  /**
+   * Layers the demo scene renders under the component, as JSX, for pages
+   * whose scene composes a background. Copy React (page-actions/) emits them
+   * ahead of the component so the copied snippet reproduces the demo. Absent
+   * when the component fills the scene by itself.
+   */
+  copySiblings?: readonly string[];
   /**
    * Optional prose above the snippet. Single-paragraph notes are bare
    * content; multi-paragraph notes bring their own <p> tags.
@@ -58,6 +65,9 @@ export const COMPONENT_PAGES: Record<string, ComponentPageEntry> = {
   },
   blobs: {
     Island: BlobsIsland,
+    copySiblings: [
+      "<LinearGradient angle={90} speed={0} stops={[{ color: 'oklch(0.18 0.02 265)' }, { color: 'oklch(0.26 0.04 300)' }]} />",
+    ],
     usageSnippet: `<ShaderScene>
   <LinearGradient />
   <Blobs />
@@ -77,6 +87,7 @@ export const COMPONENT_PAGES: Record<string, ComponentPageEntry> = {
   },
   dither: {
     Island: DitherIsland,
+    copySiblings: ['<MeshGradient />'],
     usageSnippet: `<ShaderScene>
   <MeshGradient />
   <Dither pattern="bayer-8x8" pixelSize={4} levels={4} />
@@ -127,6 +138,7 @@ export const COMPONENT_PAGES: Record<string, ComponentPageEntry> = {
   },
   grain: {
     Island: GrainIsland,
+    copySiblings: ['<LinearGradient />'],
     usageSnippet: `<ShaderScene>
   <LinearGradient />
   <Grain intensity={0.45} speed={1} blend="additive" />
@@ -179,6 +191,7 @@ export const COMPONENT_PAGES: Record<string, ComponentPageEntry> = {
   },
   vignette: {
     Island: VignetteIsland,
+    copySiblings: ['<LinearGradient />'],
     usageSnippet: `<ShaderScene>
   <LinearGradient />
   <Vignette intensity={0.5} radius={0.6} feather={0.5} />
diff --git a/apps/docs/src/components/controls/ColorPopoverContents.tsx b/apps/docs/src/components/controls/ColorPopoverContents.tsx
index e7a0d4b4..921a0f37 100644
--- a/apps/docs/src/components/controls/ColorPopoverContents.tsx
+++ b/apps/docs/src/components/controls/ColorPopoverContents.tsx
@@ -13,6 +13,7 @@ import { oklchInGamut, oklchToGamut } from '@camp-dev/shaders/color';
 import { useDisplayGamut } from '@camp-dev/shaders/gamut';
 
 import { CopyIcon } from '@/components/icons/copy';
+import { COPY_ANNOUNCEMENTS, useClipboardCopy } from '@/lib/use-clipboard-copy';
 
 import { ChannelSlider } from './color/ChannelSlider';
 import { formatOklch, type OklchColor, parseToOklch } from './color/oklch';
@@ -139,16 +140,6 @@ export function ColorPopoverContents({ path, label }: { path: PathInput; label:
   );
 }
 
-const COPIED_FEEDBACK_MS = 1200;
-
-type CopyStatus = 'idle' | 'copied' | 'failed';
-
-const COPY_ANNOUNCEMENTS: Record<CopyStatus, string> = {
-  idle: '',
-  copied: 'Copied',
-  failed: 'Copy failed',
-};
-
 /**
  * Copies the current color string. The glyph turns lime for a moment as the
  * only visible feedback, and a live region says "Copied" for screen readers,
@@ -158,31 +149,7 @@ const COPY_ANNOUNCEMENTS: Record<CopyStatus, string> = {
  * way rather than left as a silent rejection.
  */
 function CopyButton({ label, text }: { label: string; text: string }) {
-  const [status, setStatus] = useState<CopyStatus>('idle');
-  const feedbackTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (feedbackTimeoutRef.current !== null) clearTimeout(feedbackTimeoutRef.current);
-    };
-  }, []);
-
-  const copy = () => {
-    // The write starts inside a promise chain: `navigator.clipboard` is
-    // undefined outside a secure context, and a plain call would throw out
-    // of the click handler, whereas here the throw lands in the rejection
-    // path with every other failure.
-    void Promise.resolve()
-      .then(() => navigator.clipboard.writeText(text))
-      .then(
-        () => setStatus('copied'),
-        () => setStatus('failed'),
-      );
-
-    if (feedbackTimeoutRef.current !== null) clearTimeout(feedbackTimeoutRef.current);
-
-    feedbackTimeoutRef.current = setTimeout(() => setStatus('idle'), COPIED_FEEDBACK_MS);
-  };
+  const { status, copy } = useClipboardCopy();
 
   return (
     <>
@@ -190,7 +157,7 @@ function CopyButton({ label, text }: { label: string; text: string }) {
         aria-label={`Copy ${label}`}
         className={styles.copyButton}
         data-copied={status === 'copied' || undefined}
-        onClick={copy}
+        onClick={() => copy(text)}
         title="Copy"
         type="button"
       >
diff --git a/apps/docs/src/components/controls/context.tsx b/apps/docs/src/components/controls/context.tsx
index 7ca810b1..23395709 100644
--- a/apps/docs/src/components/controls/context.tsx
+++ b/apps/docs/src/components/controls/context.tsx
@@ -1,21 +1,56 @@
 'use client';
 
 /**
- * Three contexts. ControlsProvider carries the page's store down to every
+ * Four contexts. ControlsProvider carries the page's store down to every
  * control. PathPrefixProvider is how list rows work: ListInput wraps each row
  * in a prefix like ['stops', 2], so the ColorInput inside that row can say
  * path="color" and land on stops[2].color without knowing its own index.
  * ListRowProvider carries the row's name ("stop 2") alongside, so a control
  * inside a row can drop its own visible label and still name itself fully
- * for a screen reader.
+ * for a screen reader. CopySourceProvider runs the other way: it sits above
+ * the island, ControlsProvider publishes its store up into it, and the page
+ * header's Copy React button (page-actions/) reads the store from there.
  */
-import { createContext, type ReactNode, useContext, useMemo } from 'react';
+import { createContext, type ReactNode, useContext, useEffect, useMemo, useState } from 'react';
 
 import type { ControlPath, ControlStore, PathSegment } from './store';
 
 const StoreContext = createContext<ControlStore<object> | null>(null);
 const PathPrefixContext = createContext<ControlPath>([]);
 
+// ----------------------------------------------------------------------------
+// The copy source
+// ----------------------------------------------------------------------------
+
+/**
+ * The page's store as seen from outside the island. The component page
+ * template renders the header and the demo island as siblings, and only
+ * the island creates the store, so the header can't reach it through
+ * ordinary context. This pair of contexts bridges the gap: the outer one
+ * hands ControlsProvider a setter to publish into, the inner one hands the
+ * header whatever was published. Null until an island has mounted, and on
+ * pages with no island.
+ */
+const CopySourceContext = createContext<ControlStore<object> | null>(null);
+const PublishCopySourceContext = createContext<
+  ((store: ControlStore<object> | null) => void) | null
+>(null);
+
+export function CopySourceProvider({ children }: { children: ReactNode }) {
+  const [store, setStore] = useState<ControlStore<object> | null>(null);
+
+  return (
+    <PublishCopySourceContext.Provider value={setStore}>
+      <CopySourceContext.Provider value={store}>{children}</CopySourceContext.Provider>
+    </PublishCopySourceContext.Provider>
+  );
+}
+
+/** The mounted island's store, or null before it mounts. */
+export function useCopySource(): ControlStore<object> | null {
+  return useContext(CopySourceContext);
+}
+
 /**
  * Trail of ancestor row labels, outermost first ("line 5", then "stop 2").
  * Empty outside any list. Controls read it for two things: whether they are
@@ -35,6 +70,20 @@ export function ControlsProvider({
   store: ControlStore<object>;
   children: ReactNode;
 }) {
+  const publish = useContext(PublishCopySourceContext);
+
+  // Publishes the store to the page header for as long as this island is
+  // mounted. Islands render inside CopySourceProvider only on the component
+  // pages; the dev playgrounds have no header and no provider, so there is
+  // nothing to publish to there.
+  useEffect(() => {
+    if (publish === null) return;
+
+    publish(store);
+
+    return () => publish(null);
+  }, [publish, store]);
+
   return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
 }
 
diff --git a/apps/docs/src/components/controls/index.ts b/apps/docs/src/components/controls/index.ts
index 13fd03bf..6afd1416 100644
--- a/apps/docs/src/components/controls/index.ts
+++ b/apps/docs/src/components/controls/index.ts
@@ -1,5 +1,12 @@
 export { ColorInput } from './ColorInput';
-export { ControlsProvider, ListRowProvider, PathPrefixProvider, useListRowTrail } from './context';
+export {
+  ControlsProvider,
+  CopySourceProvider,
+  ListRowProvider,
+  PathPrefixProvider,
+  useCopySource,
+  useListRowTrail,
+} from './context';
 export { ControlPanel } from './ControlPanel';
 export { formatJsx, formatParams } from './copy';
 export type { CopyConfig } from './copy';
diff --git a/apps/docs/src/components/icons/check.tsx b/apps/docs/src/components/icons/check.tsx
new file mode 100644
index 00000000..2ce9775b
--- /dev/null
+++ b/apps/docs/src/components/icons/check.tsx
@@ -0,0 +1,25 @@
+/**
+ * Pixel-style check from the Figma icon set (component "icons", name
+ * "check"): a short and a long stroke of 2-unit pixels on a 24-unit grid,
+ * which is the export's own grid. The path is the export's data on whole
+ * units. The fill is swapped for currentColor so the icon takes its color
+ * from the surrounding button, and it draws at 16px by default, the size
+ * the header's copy button swaps it in at.
+ */
+import type { SVGProps } from 'react';
+
+export function CheckIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="currentColor"
+      height="16"
+      viewBox="0 0 24 24"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M10 18H8V16H10V18ZM8 16H6V14H8V16ZM12 14V16H10V14H12ZM6 14H4V12H6V14ZM14 14H12V12H14V14ZM16 12H14V10H16V12ZM18 10H16V8H18V10ZM20 8H18V6H20V8Z" />
+    </svg>
+  );
+}
diff --git a/apps/docs/src/components/page-actions/page-actions.module.css b/apps/docs/src/components/page-actions/page-actions.module.css
index da3dee4a..ac8f1d8d 100644
--- a/apps/docs/src/components/page-actions/page-actions.module.css
+++ b/apps/docs/src/components/page-actions/page-actions.module.css
@@ -56,7 +56,7 @@
     color: var(--fg);
   }
 
-  .copy:hover svg,
+  .copy:hover .copyGlyph,
   .more:hover svg {
     color: var(--fg);
   }
@@ -81,10 +81,67 @@
   border-radius: var(--radius-md) 0 0 var(--radius-md);
 }
 
-.copy svg {
+.copy .copyGlyph {
   color: var(--gray-100);
 }
 
+.copy:disabled {
+  cursor: default;
+}
+
+/* ---- The copied swap ---- */
+
+/* The glyph is a 16px box with both icons laid over each other, and a
+   successful copy swaps one for the other: the copy glyph fades and shrinks
+   a touch as the check fades in and grows to full size, in lime, the same
+   lime the picker's copy button turns. The two run together so the swap
+   reads as one glyph changing rather than one leaving and another arriving.
+   The check starts at 0.9 and not 0, so it reads as already almost there;
+   opacity rides a fade token and the scale a duration token, so Reduce
+   Motion keeps the crossfade and drops the growth. */
+.glyph {
+  position: relative;
+  flex: none;
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+}
+
+.copyGlyph,
+.checkGlyph {
+  position: absolute;
+  inset: 0;
+  transition:
+    opacity var(--fade-sm) var(--ease-out),
+    transform var(--duration-sm) var(--ease-out);
+}
+
+.copy .checkGlyph {
+  opacity: 0;
+  transform: scale(0.9);
+  color: var(--accent);
+}
+
+.copy[data-copied] .copyGlyph {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.copy[data-copied] .checkGlyph {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
 /* The chevron cell: a 32px square behind a hairline, with the glyph
    centered. The rule is drawn as a left border so the cell and its divider
    are one box, and it stops 1px short of the top and bottom as in the mock
@@ -136,7 +193,8 @@
    left and 8px on the right, 6px corners, 2px from the next row. Base UI
    marks the row under the pointer or the keyboard cursor as highlighted,
    which the mock draws as the darker gray fill, the same fill the table of
-   contents gives its current row. */
+   contents gives its current row. A disabled row, Copy React before the
+   island has mounted, dims to the muted gray. */
 .row {
   display: flex;
   align-items: center;
@@ -154,3 +212,8 @@
   background: var(--gray-800);
   text-decoration: none;
 }
+
+.row[data-disabled] {
+  color: var(--fg-muted);
+  cursor: default;
+}
diff --git a/apps/docs/src/components/page-actions/page-actions.tsx b/apps/docs/src/components/page-actions/page-actions.tsx
index f980b001..b01a0749 100644
--- a/apps/docs/src/components/page-actions/page-actions.tsx
+++ b/apps/docs/src/components/page-actions/page-actions.tsx
@@ -6,7 +6,9 @@
  * chevron cell on the right that opens a menu of three actions. Copy React
  * copies the demo's current props as JSX, and the two markdown rows copy
  * and open the page's markdown export (SHA-115). The shared
- * components/[slug] template renders it beside the title and description.
+ * components/[slug] template renders it beside the title and description,
+ * inside the CopySourceProvider that the demo island publishes its control
+ * store into (controls/context.tsx).
  * The menu is Base UI's Menu rather than the controls' Select, because the
  * rows are actions and not a value, but it borrows the select's popup
  * pattern: portaled, offset from its trigger, and scaled in from the edge
@@ -14,14 +16,22 @@
  */
 import { Menu } from '@base-ui/react/menu';
 
+import { formatJsx, useCopySource } from '@/components/controls';
+import { CheckIcon } from '@/components/icons/check';
 import { ChevronDownIcon } from '@/components/icons/chevron-down';
 import { CopyIcon } from '@/components/icons/copy';
+import { deriveUsageImport } from '@/lib/usage-import';
+import { COPY_ANNOUNCEMENTS, useClipboardCopy } from '@/lib/use-clipboard-copy';
 
 import styles from './page-actions.module.css';
 
 interface PageActionsProps {
   /** The component page's slug, which names its markdown export. */
   slug: string;
+  /** The component as written in JSX, e.g. 'WaveLines'. */
+  componentName: string;
+  /** Layers the demo renders under the component, as JSX, if any. */
+  siblings?: readonly string[];
 }
 
 // The 12-unit copy glyph drawn on a 16px box, which is exactly the mock's
@@ -29,15 +39,43 @@ interface PageActionsProps {
 // four thirds).
 const COPY_ICON_SIZE = 16;
 
-export function PageActions({ slug }: PageActionsProps) {
+export function PageActions({ slug, componentName, siblings }: PageActionsProps) {
+  const store = useCopySource();
+  const { status, copy } = useClipboardCopy();
   const markdownHref = `/components/${slug}/index.md`;
 
+  // The demo as it stands right now: the import line for every tag in the
+  // snippet, then the scene with the store's current params as props. Read
+  // at click time rather than subscribed, so dragging a slider never
+  // re-renders the header.
+  const copyReact = () => {
+    if (store === null) return;
+
+    const jsx = formatJsx({ componentName, siblings }, store.getSnapshot());
+
+    copy(`${deriveUsageImport(jsx)}\n\n${jsx}`);
+  };
+
   return (
     <div className={styles.actions}>
-      <button className={styles.copy} type="button">
-        <CopyIcon height={COPY_ICON_SIZE} width={COPY_ICON_SIZE} />
+      {/* Until the island mounts there is no store to read, and the button
+          is disabled rather than copying nothing. */}
+      <button
+        className={styles.copy}
+        data-copied={status === 'copied' || undefined}
+        disabled={store === null}
+        onClick={copyReact}
+        type="button"
+      >
+        <span aria-hidden="true" className={styles.glyph}>
+          <CopyIcon className={styles.copyGlyph} height={COPY_ICON_SIZE} width={COPY_ICON_SIZE} />
+          <CheckIcon className={styles.checkGlyph} />
+        </span>
         Copy React
       </button>
+      <span aria-live="polite" className={styles.srOnly}>
+        {COPY_ANNOUNCEMENTS[status]}
+      </span>
       <Menu.Root>
         <Menu.Trigger aria-label="More copy options" className={styles.more}>
           <ChevronDownIcon />
@@ -45,7 +83,9 @@ export function PageActions({ slug }: PageActionsProps) {
         <Menu.Portal>
           <Menu.Positioner align="end" side="bottom" sideOffset={6}>
             <Menu.Popup className={styles.popup}>
-              <Menu.Item className={styles.row}>Copy React</Menu.Item>
+              <Menu.Item className={styles.row} disabled={store === null} onClick={copyReact}>
+                Copy React
+              </Menu.Item>
               <Menu.Item className={styles.row}>Copy as markdown</Menu.Item>
               <Menu.LinkItem
                 className={styles.row}
diff --git a/apps/docs/src/lib/use-clipboard-copy.ts b/apps/docs/src/lib/use-clipboard-copy.ts
new file mode 100644
index 00000000..43c8fe43
--- /dev/null
+++ b/apps/docs/src/lib/use-clipboard-copy.ts
@@ -0,0 +1,56 @@
+/**
+ * One clipboard write with the feedback state every copy button on the
+ * site shows: "copied" for a moment after a successful write, "failed" when
+ * the browser refused it, and back to idle. The color picker's copy button
+ * and the header's Copy React button both build on it, so a copy behaves
+ * the same wherever it lives.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export type CopyStatus = 'idle' | 'copied' | 'failed';
+
+/**
+ * What a live region reads out for each state. A changed aria-label on the
+ * button itself would go unannounced, so callers render this in a polite
+ * live region beside the button.
+ */
+export const COPY_ANNOUNCEMENTS: Record<CopyStatus, string> = {
+  idle: '',
+  copied: 'Copied',
+  failed: 'Copy failed',
+};
+
+// How long the copied or failed state shows before the button returns to
+// idle, in ms. Long enough to read, short enough that a second copy right
+// after the first still gets fresh feedback.
+const FEEDBACK_MS = 1200;
+
+export function useClipboardCopy(): { status: CopyStatus; copy: (text: string) => void } {
+  const [status, setStatus] = useState<CopyStatus>('idle');
+  const feedbackTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (feedbackTimeoutRef.current !== null) clearTimeout(feedbackTimeoutRef.current);
+    };
+  }, []);
+
+  const copy = useCallback((text: string) => {
+    // The write starts inside a promise chain: `navigator.clipboard` is
+    // undefined outside a secure context, and a plain call would throw out
+    // of the click handler, whereas here the throw lands in the rejection
+    // path with every other failure.
+    void Promise.resolve()
+      .then(() => navigator.clipboard.writeText(text))
+      .then(
+        () => setStatus('copied'),
+        () => setStatus('failed'),
+      );
+
+    if (feedbackTimeoutRef.current !== null) clearTimeout(feedbackTimeoutRef.current);
+
+    feedbackTimeoutRef.current = setTimeout(() => setStatus('idle'), FEEDBACK_MS);
+  }, []);
+
+  return { status, copy };
+}

From f331604b179f802d8d81978862d1434f8cabb3a9 Mon Sep 17 00:00:00 2001
From: Hunter Garrett <hunter@hunterbecton.com>
Date: Wed, 9 Sep 2026 06:40:01 -0400
Subject: [PATCH 05/10] fix(docs): anchor the copy menu to the button box, not
 the chevron

The chevron sits 1px inside the box's border, so aligning the menu's end
to it left a 1px sliver of shader showing past the menu's right edge.
---
 .../docs/src/components/page-actions/page-actions.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/docs/src/components/page-actions/page-actions.tsx b/apps/docs/src/components/page-actions/page-actions.tsx
index b01a0749..e3224845 100644
--- a/apps/docs/src/components/page-actions/page-actions.tsx
+++ b/apps/docs/src/components/page-actions/page-actions.tsx
@@ -14,6 +14,8 @@
  * pattern: portaled, offset from its trigger, and scaled in from the edge
  * nearest it.
  */
+import { useRef } from 'react';
+
 import { Menu } from '@base-ui/react/menu';
 
 import { formatJsx, useCopySource } from '@/components/controls';
@@ -42,6 +44,7 @@ const COPY_ICON_SIZE = 16;
 export function PageActions({ slug, componentName, siblings }: PageActionsProps) {
   const store = useCopySource();
   const { status, copy } = useClipboardCopy();
+  const boxRef = useRef<HTMLDivElement>(null);
   const markdownHref = `/components/${slug}/index.md`;
 
   // The demo as it stands right now: the import line for every tag in the
@@ -57,7 +60,7 @@ export function PageActions({ slug, componentName, siblings }: PageActionsProps)
   };
 
   return (
-    <div className={styles.actions}>
+    <div className={styles.actions} ref={boxRef}>
       {/* Until the island mounts there is no store to read, and the button
           is disabled rather than copying nothing. */}
       <button
@@ -81,7 +84,11 @@ export function PageActions({ slug, componentName, siblings }: PageActionsProps)
           <ChevronDownIcon />
         </Menu.Trigger>
         <Menu.Portal>
-          <Menu.Positioner align="end" side="bottom" sideOffset={6}>
+          {/* Anchored to the whole box rather than the chevron, so the
+              menu's right edge meets the box's outer edge, which is the
+              shader's edge on a wide viewport. The chevron button sits
+              1px inside that edge, behind the box's border. */}
+          <Menu.Positioner align="end" anchor={boxRef} side="bottom" sideOffset={6}>
             <Menu.Popup className={styles.popup}>
               <Menu.Item className={styles.row} disabled={store === null} onClick={copyReact}>
                 Copy React

From 83e9c7248228cfcb87344bc50f9cc82c90e21097 Mon Sep 17 00:00:00 2001
From: Hunter Garrett <hunter@hunterbecton.com>
Date: Wed, 9 Sep 2026 06:50:32 -0400
Subject: [PATCH 06/10] test(docs): cover Copy React, its menu, and the menu's
 alignment

The two markdown rows stay disabled until the export lands, so the menu
ships with nothing that looks broken.
---
 apps/docs-tests/docs/copy-react.spec.ts       | 84 +++++++++++++++++++
 apps/docs/src/app/components/[slug]/page.tsx  |  2 +-
 .../components/page-actions/page-actions.tsx  | 27 +++---
 3 files changed, 97 insertions(+), 16 deletions(-)
 create mode 100644 apps/docs-tests/docs/copy-react.spec.ts

diff --git a/apps/docs-tests/docs/copy-react.spec.ts b/apps/docs-tests/docs/copy-react.spec.ts
new file mode 100644
index 00000000..3c5ef42e
--- /dev/null
+++ b/apps/docs-tests/docs/copy-react.spec.ts
@@ -0,0 +1,84 @@
+import { expect, test } from '@playwright/test';
+
+/**
+ * The component page header's Copy React button and its menu. The button
+ * reads the demo's control store through the copy source bridge, so the
+ * copied snippet has to carry the current params, and the menu has to line
+ * up with the button box rather than the chevron inside it.
+ */
+
+// Wide enough that the shader column reaches the 4xl cap the header shares,
+// so the button box, the menu, and the shader all end on one edge.
+test.use({ viewport: { width: 1728, height: 1000 } });
+
+test.beforeEach(async ({ context }) => {
+  await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+});
+
+test('Copy React copies the demo with its current params', async ({ page }) => {
+  await page.goto('/components/vignette');
+  await page.waitForLoadState('networkidle');
+
+  const button = page.getByRole('button', { name: 'Copy React' });
+
+  await expect(button).toBeEnabled();
+
+  // A slider write lands in the store immediately, so the copied snippet
+  // has to show the new value rather than the page's initial one.
+  const intensity = page.getByRole('slider', { name: 'Intensity' });
+
+  await intensity.focus();
+  await page.keyboard.press('End');
+
+  await button.click();
+
+  await expect(button).toHaveAttribute('data-copied', 'true');
+  await expect(page.getByText('Copied', { exact: true })).toBeAttached();
+
+  const copied = await page.evaluate(() => navigator.clipboard.readText());
+
+  expect(copied).toContain(
+    "import { LinearGradient, ShaderScene, Vignette } from '@camp-dev/shaders'",
+  );
+  expect(copied).toContain('<LinearGradient />');
+  expect(copied).toContain('intensity={1}');
+
+  // The feedback clears on its own.
+  await expect(button).not.toHaveAttribute('data-copied', 'true', { timeout: 3000 });
+});
+
+test('the menu copies the same snippet and lines up with the button box', async ({ page }) => {
+  await page.goto('/components/aurora');
+  await page.waitForLoadState('networkidle');
+
+  await page.evaluate(() => navigator.clipboard.writeText('sentinel'));
+
+  const chevron = page.getByRole('button', { name: 'More copy options' });
+
+  await chevron.click();
+
+  const menu = page.getByRole('menu');
+
+  await expect(menu).toBeVisible();
+
+  const [boxRight, menuRight, shaderRight] = await Promise.all([
+    chevron.evaluate((element) => element.parentElement!.getBoundingClientRect().right),
+    menu.evaluate((element) => element.getBoundingClientRect().right),
+    page.locator('[data-shader-demo]').evaluate((element) => element.getBoundingClientRect().right),
+  ]);
+
+  expect(menuRight).toBe(boxRight);
+  expect(shaderRight).toBe(boxRight);
+
+  await page.getByRole('menuitem', { name: 'Copy React' }).click();
+
+  await expect(menu).toBeHidden();
+  await expect(page.getByRole('button', { name: 'Copy React' })).toHaveAttribute(
+    'data-copied',
+    'true',
+  );
+
+  const copied = await page.evaluate(() => navigator.clipboard.readText());
+
+  expect(copied).toContain('<Aurora');
+});
diff --git a/apps/docs/src/app/components/[slug]/page.tsx b/apps/docs/src/app/components/[slug]/page.tsx
index d750cf18..789d4b22 100644
--- a/apps/docs/src/app/components/[slug]/page.tsx
+++ b/apps/docs/src/app/components/[slug]/page.tsx
@@ -99,7 +99,7 @@ export default async function ComponentPage({ params }: PageProps) {
               <h1 className={styles.title}>{record.label}</h1>
               <p className={styles.description}>{record.description}</p>
             </div>
-            <PageActions componentName={record.label} siblings={entry.copySiblings} slug={slug} />
+            <PageActions componentName={record.label} siblings={entry.copySiblings} />
           </header>
           <Island />
         </div>
diff --git a/apps/docs/src/components/page-actions/page-actions.tsx b/apps/docs/src/components/page-actions/page-actions.tsx
index e3224845..db8590ba 100644
--- a/apps/docs/src/components/page-actions/page-actions.tsx
+++ b/apps/docs/src/components/page-actions/page-actions.tsx
@@ -4,8 +4,8 @@
  * The split "Copy React" button in a component page's header, after the
  * Figma mock: a bordered box holding the copy action on the left and a
  * chevron cell on the right that opens a menu of three actions. Copy React
- * copies the demo's current props as JSX, and the two markdown rows copy
- * and open the page's markdown export (SHA-115). The shared
+ * copies the demo's current props as JSX; the two markdown rows will copy
+ * and open the page's markdown export once it ships (SHA-115). The shared
  * components/[slug] template renders it beside the title and description,
  * inside the CopySourceProvider that the demo island publishes its control
  * store into (controls/context.tsx).
@@ -28,8 +28,6 @@ import { COPY_ANNOUNCEMENTS, useClipboardCopy } from '@/lib/use-clipboard-copy';
 import styles from './page-actions.module.css';
 
 interface PageActionsProps {
-  /** The component page's slug, which names its markdown export. */
-  slug: string;
   /** The component as written in JSX, e.g. 'WaveLines'. */
   componentName: string;
   /** Layers the demo renders under the component, as JSX, if any. */
@@ -41,11 +39,10 @@ interface PageActionsProps {
 // four thirds).
 const COPY_ICON_SIZE = 16;
 
-export function PageActions({ slug, componentName, siblings }: PageActionsProps) {
+export function PageActions({ componentName, siblings }: PageActionsProps) {
   const store = useCopySource();
   const { status, copy } = useClipboardCopy();
   const boxRef = useRef<HTMLDivElement>(null);
-  const markdownHref = `/components/${slug}/index.md`;
 
   // The demo as it stands right now: the import line for every tag in the
   // snippet, then the scene with the store's current params as props. Read
@@ -93,16 +90,16 @@ export function PageActions({ slug, componentName, siblings }: PageActionsProps)
               <Menu.Item className={styles.row} disabled={store === null} onClick={copyReact}>
                 Copy React
               </Menu.Item>
-              <Menu.Item className={styles.row}>Copy as markdown</Menu.Item>
-              <Menu.LinkItem
-                className={styles.row}
-                closeOnClick
-                href={markdownHref}
-                rel="noreferrer"
-                target="_blank"
-              >
+              {/* Disabled until the markdown export ships (SHA-115): the
+                  copy row will run through the same clipboard hook as Copy
+                  React, and the view row becomes a Menu.LinkItem to the
+                  export in a new tab. */}
+              <Menu.Item className={styles.row} disabled>
+                Copy as markdown
+              </Menu.Item>
+              <Menu.Item className={styles.row} disabled>
                 View as markdown
-              </Menu.LinkItem>
+              </Menu.Item>
             </Menu.Popup>
           </Menu.Positioner>
         </Menu.Portal>

From 4953fc91ad6c00e6f0f70235e9dc0bc7348981ca Mon Sep 17 00:00:00 2001
From: Hunter Garrett <hunter@hunterbecton.com>
Date: Wed, 9 Sep 2026 08:36:43 -0400
Subject: [PATCH 07/10] feat(docs): drop the menu's Copy React row

The left half of the button is Copy React, so the menu only repeated it.
Each remaining row runs its own action on click.
---
 apps/docs-tests/docs/copy-react.spec.ts       | 20 +++++++-----------
 .../components/page-actions/page-actions.tsx  | 21 ++++++++++---------
 2 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/apps/docs-tests/docs/copy-react.spec.ts b/apps/docs-tests/docs/copy-react.spec.ts
index 3c5ef42e..3e802fd3 100644
--- a/apps/docs-tests/docs/copy-react.spec.ts
+++ b/apps/docs-tests/docs/copy-react.spec.ts
@@ -47,12 +47,10 @@ test('Copy React copies the demo with its current params', async ({ page }) => {
   await expect(button).not.toHaveAttribute('data-copied', 'true', { timeout: 3000 });
 });
 
-test('the menu copies the same snippet and lines up with the button box', async ({ page }) => {
+test('the menu lines up with the button box', async ({ page }) => {
   await page.goto('/components/aurora');
   await page.waitForLoadState('networkidle');
 
-  await page.evaluate(() => navigator.clipboard.writeText('sentinel'));
-
   const chevron = page.getByRole('button', { name: 'More copy options' });
 
   await chevron.click();
@@ -70,15 +68,11 @@ test('the menu copies the same snippet and lines up with the button box', async
   expect(menuRight).toBe(boxRight);
   expect(shaderRight).toBe(boxRight);
 
-  await page.getByRole('menuitem', { name: 'Copy React' }).click();
-
-  await expect(menu).toBeHidden();
-  await expect(page.getByRole('button', { name: 'Copy React' })).toHaveAttribute(
-    'data-copied',
-    'true',
-  );
-
-  const copied = await page.evaluate(() => navigator.clipboard.readText());
+  // The left half of the button is Copy React, so the menu holds only the
+  // markdown rows, both disabled until the export ships.
+  const rows = page.getByRole('menuitem');
 
-  expect(copied).toContain('<Aurora');
+  await expect(rows).toHaveText(['Copy as markdown', 'View as markdown']);
+  await expect(rows.first()).toHaveAttribute('aria-disabled', 'true');
+  await expect(rows.last()).toHaveAttribute('aria-disabled', 'true');
 });
diff --git a/apps/docs/src/components/page-actions/page-actions.tsx b/apps/docs/src/components/page-actions/page-actions.tsx
index db8590ba..6fbe518a 100644
--- a/apps/docs/src/components/page-actions/page-actions.tsx
+++ b/apps/docs/src/components/page-actions/page-actions.tsx
@@ -3,9 +3,10 @@
 /**
  * The split "Copy React" button in a component page's header, after the
  * Figma mock: a bordered box holding the copy action on the left and a
- * chevron cell on the right that opens a menu of three actions. Copy React
- * copies the demo's current props as JSX; the two markdown rows will copy
- * and open the page's markdown export once it ships (SHA-115). The shared
+ * chevron cell on the right that opens a menu of further actions. Copy
+ * React copies the demo's current props as JSX; the menu's two markdown
+ * rows will copy and open the page's markdown export once it ships
+ * (SHA-115). The shared
  * components/[slug] template renders it beside the title and description,
  * inside the CopySourceProvider that the demo island publishes its control
  * store into (controls/context.tsx).
@@ -87,13 +88,13 @@ export function PageActions({ componentName, siblings }: PageActionsProps) {
               1px inside that edge, behind the box's border. */}
           <Menu.Positioner align="end" anchor={boxRef} side="bottom" sideOffset={6}>
             <Menu.Popup className={styles.popup}>
-              <Menu.Item className={styles.row} disabled={store === null} onClick={copyReact}>
-                Copy React
-              </Menu.Item>
-              {/* Disabled until the markdown export ships (SHA-115): the
-                  copy row will run through the same clipboard hook as Copy
-                  React, and the view row becomes a Menu.LinkItem to the
-                  export in a new tab. */}
+              {/* Each row is its own action and runs on click; the left
+                  half of the button always means Copy React, so the menu
+                  does not repeat it. Both rows are disabled until the
+                  markdown export ships (SHA-115): the copy row will run
+                  through the same clipboard hook as Copy React, and the
+                  view row becomes a Menu.LinkItem to the export in a new
+                  tab. */}
               <Menu.Item className={styles.row} disabled>
                 Copy as markdown
               </Menu.Item>

From 289b75f30c7864da27487487b707006a93b2a924 Mon Sep 17 00:00:00 2001
From: Hunter Garrett <hunter@hunterbecton.com>
Date: Wed, 9 Sep 2026 08:39:32 -0400
Subject: [PATCH 08/10] fix(docs): press the whole copy button box, not one
 half

Scaling one half alone pulled it away from the border and showed the box
behind it.
---
 .../page-actions/page-actions.module.css      | 26 ++++++++++---------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/apps/docs/src/components/page-actions/page-actions.module.css b/apps/docs/src/components/page-actions/page-actions.module.css
index ac8f1d8d..6beb5248 100644
--- a/apps/docs/src/components/page-actions/page-actions.module.css
+++ b/apps/docs/src/components/page-actions/page-actions.module.css
@@ -8,7 +8,10 @@
 
 /* One bordered 32px box around two buttons: the mock's darkest gray with
    the hairline and 6px corners. The buttons carry no border of their own,
-   so the box's hairline is the only line around them. */
+   so the box's hairline is the only line around them. The press is felt
+   through a slight scale of the whole box, whichever half is pressed:
+   scaling one half alone pulls it away from the border and shows the box
+   behind it, so the box is the thing that moves. */
 .actions {
   display: inline-flex;
   flex: none;
@@ -19,13 +22,18 @@
   border-radius: var(--radius-md);
   font-size: var(--font-size-sm);
   line-height: var(--leading-5);
+  transition: transform var(--duration-sm) var(--ease-out);
+}
+
+.actions:has(.copy:active),
+.actions:has(.more:active) {
+  transform: scale(0.97);
 }
 
 /* Shared by both buttons: the label gray on a transparent fill, hover to
-   the faint white fill under full-white text, and a press felt through a
-   slight scale rather than seen. Each button rounds only its outer corners,
-   so the hover fill follows the box's shape without clipping the focus
-   ring. */
+   the faint white fill under full-white text. Each button rounds only its
+   outer corners, so the hover fill follows the box's shape without clipping
+   the focus ring. */
 .copy,
 .more {
   display: inline-flex;
@@ -39,8 +47,7 @@
   cursor: pointer;
   transition:
     color var(--fade-xs) var(--ease-hover),
-    background-color var(--fade-xs) var(--ease-hover),
-    transform var(--duration-sm) var(--ease-out);
+    background-color var(--fade-xs) var(--ease-hover);
 }
 
 .copy svg,
@@ -62,11 +69,6 @@
   }
 }
 
-.copy:active,
-.more:active {
-  transform: scale(0.97);
-}
-
 .copy:focus-visible,
 .more:focus-visible {
   outline: 1px solid var(--accent);

From 47b52a274814c983895e012f04926f43954d8fab Mon Sep 17 00:00:00 2001
From: Hunter Garrett <hunter@hunterbecton.com>
Date: Wed, 9 Sep 2026 08:44:34 -0400
Subject: [PATCH 09/10] fix(docs): soften the copy button's press to 0.98

The box is about twice the width of the panel's text button, so 3% was
nearly twice the travel. 2% lands within a pixel of the Reset button.
---
 .../src/components/page-actions/page-actions.module.css    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/docs/src/components/page-actions/page-actions.module.css b/apps/docs/src/components/page-actions/page-actions.module.css
index 6beb5248..75f654b6 100644
--- a/apps/docs/src/components/page-actions/page-actions.module.css
+++ b/apps/docs/src/components/page-actions/page-actions.module.css
@@ -11,7 +11,10 @@
    so the box's hairline is the only line around them. The press is felt
    through a slight scale of the whole box, whichever half is pressed:
    scaling one half alone pulls it away from the border and shows the box
-   behind it, so the box is the thing that moves. */
+   behind it, so the box is the thing that moves. It scales to 0.98 rather
+   than the site's usual 0.97 because the box is about twice the width of
+   the panel's text button, and 2% of it is the same pixel of give that 3%
+   is there. */
 .actions {
   display: inline-flex;
   flex: none;
@@ -27,7 +30,7 @@
 
 .actions:has(.copy:active),
 .actions:has(.more:active) {
-  transform: scale(0.97);
+  transform: scale(0.98);
 }
 
 /* Shared by both buttons: the label gray on a transparent fill, hover to

From 0e935230c70800c7dca5241161e90de3e5eeae80 Mon Sep 17 00:00:00 2001
From: Hunter Garrett <hunter@hunterbecton.com>
Date: Wed, 9 Sep 2026 08:55:00 -0400
Subject: [PATCH 10/10] fix(docs): address CodeRabbit review feedback on PR
 #160

Copy React wrote the catalog's display label as the JSX tag, so two-word
pages copied <Conic Gradient>. The catalog now carries the PascalCase
tag name beside the label. The copy hook starts its reset timer once
the clipboard write settles, so a slow write cannot leave the check up
for good.
---
 apps/docs-tests/docs/copy-react.spec.ts      | 17 +++++++++++++++
 apps/docs/src/app/components/[slug]/page.tsx |  5 ++---
 apps/docs/src/content/catalog.ts             | 21 ++++++++++++++-----
 apps/docs/src/lib/use-clipboard-copy.ts      | 22 ++++++++++++++------
 4 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/apps/docs-tests/docs/copy-react.spec.ts b/apps/docs-tests/docs/copy-react.spec.ts
index 3e802fd3..98bba361 100644
--- a/apps/docs-tests/docs/copy-react.spec.ts
+++ b/apps/docs-tests/docs/copy-react.spec.ts
@@ -47,6 +47,23 @@ test('Copy React copies the demo with its current params', async ({ page }) => {
   await expect(button).not.toHaveAttribute('data-copied', 'true', { timeout: 3000 });
 });
 
+test('a two-word page copies its PascalCase tag, not its label', async ({ page }) => {
+  await page.goto('/components/conic-gradient');
+  await page.waitForLoadState('networkidle');
+
+  const button = page.getByRole('button', { name: 'Copy React' });
+
+  await expect(button).toBeEnabled();
+  await button.click();
+  await expect(button).toHaveAttribute('data-copied', 'true');
+
+  const copied = await page.evaluate(() => navigator.clipboard.readText());
+
+  expect(copied).toContain("import { ConicGradient, ShaderScene } from '@camp-dev/shaders'");
+  expect(copied).toContain('<ConicGradient');
+  expect(copied).not.toContain('Conic Gradient');
+});
+
 test('the menu lines up with the button box', async ({ page }) => {
   await page.goto('/components/aurora');
   await page.waitForLoadState('networkidle');
diff --git a/apps/docs/src/app/components/[slug]/page.tsx b/apps/docs/src/app/components/[slug]/page.tsx
index 789d4b22..7abee492 100644
--- a/apps/docs/src/app/components/[slug]/page.tsx
+++ b/apps/docs/src/app/components/[slug]/page.tsx
@@ -90,8 +90,7 @@ export default async function ComponentPage({ params }: PageProps) {
     <main>
       <Breadcrumbs className={styles.breadcrumbs} crumbs={crumbs} />
       {/* The header's Copy React reads the island's control store through
-          this provider; see the copy source in controls/context.tsx. The
-          catalog label doubles as the JSX tag name. */}
+          this provider; see the copy source in controls/context.tsx. */}
       <CopySourceProvider>
         <div id={slug}>
           <header className={styles.header}>
@@ -99,7 +98,7 @@ export default async function ComponentPage({ params }: PageProps) {
               <h1 className={styles.title}>{record.label}</h1>
               <p className={styles.description}>{record.description}</p>
             </div>
-            <PageActions componentName={record.label} siblings={entry.copySiblings} />
+            <PageActions componentName={record.componentName} siblings={entry.copySiblings} />
           </header>
           <Island />
         </div>
diff --git a/apps/docs/src/content/catalog.ts b/apps/docs/src/content/catalog.ts
index 8b296505..8ad55ab4 100644
--- a/apps/docs/src/content/catalog.ts
+++ b/apps/docs/src/content/catalog.ts
@@ -13,16 +13,26 @@ interface CatalogRecord {
 }
 
 /* Component records also carry the leaf group the taxonomy files them
-   under, which is what the sidebar groups by. */
+   under, which is what the sidebar groups by, and the component's JSX tag
+   name, which the page header's Copy React writes into the copied snippet.
+   The label is for reading ("Conic Gradient") and the tag name is for code
+   ("ConicGradient"), so a page cannot use one for the other. */
 export interface ComponentCatalogRecord extends CatalogRecord {
   category: CategorySlug;
+  componentName: string;
 }
 
+const capitalize = (word: string) => word.charAt(0).toUpperCase() + word.slice(1);
+
 function prettifySlug(slug: string): string {
-  return slug
-    .split('-')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
+  return slug.split('-').map(capitalize).join(' ');
+}
+
+// The slug doubles as the component's folder name under
+// packages/shaders/src/components, and every component there is named as
+// the PascalCase of its folder, so the tag name derives from the slug too.
+function pascalizeSlug(slug: string): string {
+  return slug.split('-').map(capitalize).join('');
 }
 
 // eslint-disable-next-line @typescript-eslint/require-await -- kept async so every catalog getter has one shape
@@ -34,6 +44,7 @@ export const getComponentsCatalog = cache(async (): Promise<ComponentCatalogReco
     .map(([slug, info], index) => ({
       url: `/components/${slug}`,
       label: prettifySlug(slug),
+      componentName: pascalizeSlug(slug),
       description: info.description,
       category: info.category,
       order: index * 10,
diff --git a/apps/docs/src/lib/use-clipboard-copy.ts b/apps/docs/src/lib/use-clipboard-copy.ts
index 43c8fe43..5b291b56 100644
--- a/apps/docs/src/lib/use-clipboard-copy.ts
+++ b/apps/docs/src/lib/use-clipboard-copy.ts
@@ -36,6 +36,20 @@ export function useClipboardCopy(): { status: CopyStatus; copy: (text: string) =
   }, []);
 
   const copy = useCallback((text: string) => {
+    // A reset still pending from an earlier copy is dropped now, so it
+    // cannot fire while this write is in flight and blank the feedback the
+    // write is about to set.
+    if (feedbackTimeoutRef.current !== null) clearTimeout(feedbackTimeoutRef.current);
+
+    // Shows the outcome, then clears it. The timer starts here, after the
+    // write has settled, rather than at click time: a write slower than the
+    // feedback window would otherwise be reset before it reported, and the
+    // status it then set would stay up for good.
+    const settle = (outcome: CopyStatus) => {
+      setStatus(outcome);
+      feedbackTimeoutRef.current = setTimeout(() => setStatus('idle'), FEEDBACK_MS);
+    };
+
     // The write starts inside a promise chain: `navigator.clipboard` is
     // undefined outside a secure context, and a plain call would throw out
     // of the click handler, whereas here the throw lands in the rejection
@@ -43,13 +57,9 @@ export function useClipboardCopy(): { status: CopyStatus; copy: (text: string) =
     void Promise.resolve()
       .then(() => navigator.clipboard.writeText(text))
       .then(
-        () => setStatus('copied'),
-        () => setStatus('failed'),
+        () => settle('copied'),
+        () => settle('failed'),
       );
-
-    if (feedbackTimeoutRef.current !== null) clearTimeout(feedbackTimeoutRef.current);
-
-    feedbackTimeoutRef.current = setTimeout(() => setStatus('idle'), FEEDBACK_MS);
   }, []);
 
   return { status, copy };