blume 1.6.2 → 1.6.3

package/docs/content/components.mdx

@@ -251,7 +251,7 @@ Lay cards or blocks out in a responsive grid of equal columns that reflows on mo
 
 ## CodeGroup
 
-Group several code blocks into one tabbed switcher — a tab per language or file. The tab label is each block's title (the text after the language). Add `dropdown` to switch with a menu instead of a tab bar.
+Group several code blocks into one tabbed switcher — a tab per language or file. The tab label is each block's title (the text after the language), and the group's copy button sits in the tab bar and copies the block that is showing. Add `dropdown` to switch with a menu instead of a tab bar.
 
 <CodeGroup>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "blume",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "Documentation that's fast, AI-ready, and zero-config.",
   "keywords": [
     "astro",

package/src/components/content/Component.astro

@@ -10,10 +10,7 @@
 // examples are all supported. The source is highlighted with the same Shiki
 // setup as ordinary code fences.
 import data from "blume:data";
-import {
-  CODE_PADDING_BLOCK_REM,
-  FLUSH_CODE_PADDING_TOP_REM,
-} from "../../theme/code-block-padding.ts";
+import { CODE_PADDING_BLOCK_REM } from "../../theme/code-block-padding.ts";
 
 import { highlightCode } from "../../markdown/index.ts";
 import { withBase } from "../islands/base-path.ts";
@@ -63,11 +60,10 @@ const codeHtml = entry
 // readers aren't hurt by the cap, since the source scrolls at any height.
 const LINE_PX = 21;
 const REM_PX = 16;
-// The pre's vertical padding, from the same constants the theme emits: the
-// copy-button strip on top (the pane is a flush block inside tabs) and the
-// plain inset below. The tab panel and the pre carry no border of their own.
-const PADDING_PX =
-  (FLUSH_CODE_PADDING_TOP_REM + CODE_PADDING_BLOCK_REM) * REM_PX;
+// The pre's vertical padding, from the same constant the theme emits: the
+// plain inset above and below (the pane is a flush block inside tabs, with no
+// language bar). The tab panel and the pre carry no border of their own.
+const PADDING_PX = 2 * CODE_PADDING_BLOCK_REM * REM_PX;
 const ESTIMATE_MAX_PX = 400;
 // The floor also clamps the measured height client-side; it rides along on the
 // iframe as `data-blume-min-pane` so the script and this estimate can't drift.

package/src/components/content/Tabs.astro

@@ -62,19 +62,34 @@ const useDropdown = dropdown && !inline;
   data-sync={sync ? "true" : "false"}
   data-sync-key={syncKey}
 >
-  <div
-    class:list={[
-      inline ? "not-prose" : "",
-      useDropdown ? "" : "overflow-x-auto",
-    ]}
-  >
+  {/*
+    Header row: the scrolling tab strip (or the dropdown) grows, and an
+    actions slot sits fixed at the inline end, outside the scroller so it
+    never rides along with an overflowing strip. The docs layout fills it
+    with one copy button when every panel is a bare code block (CodeGroup,
+    ts2js pairs) — the strip is that group's chrome, so the button belongs
+    there rather than painted over the first line of each block. Empty
+    otherwise, and hidden so it adds no padding.
+  */}
+  <div class:list={["flex", inline ? "not-prose" : ""]}>
+    <div class:list={["min-w-0 grow", useDropdown ? "" : "overflow-x-auto"]}>
+      <div
+        class:list={[
+          useDropdown || borderBottom ? "border-border border-b" : "",
+          useDropdown ? "p-3" : inline ? "flex gap-4" : "flex gap-4 px-3",
+        ]}
+        data-blume-tablist
+        role={useDropdown ? undefined : "tablist"}
+      >
+      </div>
+    </div>
     <div
       class:list={[
+        "flex shrink-0 items-center gap-2 ps-2 empty:hidden",
+        inline ? "" : "pe-3",
         useDropdown || borderBottom ? "border-border border-b" : "",
-        useDropdown ? "p-3" : inline ? "flex gap-4" : "flex gap-4 px-3",
       ]}
-      data-blume-tablist
-      role={useDropdown ? undefined : "tablist"}
+      data-blume-tab-actions
     >
     </div>
   </div>

package/src/components/layout/RootLayout.astro

@@ -798,9 +798,55 @@ const bannerKey = banner?.dismissible ? banner.key : null;
       // Opaque icon chip over the code (in the style of Lina's code block),
       // with the check icon scale-swapping in over the copy icon after a copy.
       const buttonClass =
-        "absolute right-3 z-[2] inline-flex size-[1.875rem] select-none items-center justify-center rounded-md text-muted-foreground bg-background transition-colors [&_svg]:pointer-events-none [&_svg]:shrink-0";
+        "inline-flex size-[1.875rem] select-none items-center justify-center rounded-md text-muted-foreground bg-background transition-colors [&_svg]:pointer-events-none [&_svg]:shrink-0";
+      // Pinned over the block's top-right corner when the button lives in
+      // the pre; a strip-hosted button (see codeGroupActions) is in flow.
+      const overlayClass = "absolute right-3 z-[2]";
       const idleClasses = ["hover:bg-muted", "hover:text-foreground"];
 
+      // A tab panel that is nothing but code: a CodeGroup/ts2js block (the
+      // pre is the panel) or a <Tab> holding only fences and the icon
+      // template — the same predicate Tab.astro's flush-padding selector uses.
+      const isCodePanel = (panel: Element) =>
+        panel.matches("pre, figure") ||
+        (panel.matches("[data-blume-tab-panel]") &&
+          panel.querySelector(":scope > pre") !== null &&
+          Array.from(panel.children).every((child) =>
+            child.matches("pre, template")
+          ));
+
+      // The tab group's actions slot, when the group is a code switcher —
+      // every panel a bare block — so one copy button in the strip serves
+      // whichever panel is showing. A group with prose panels (or none) gets
+      // null and keeps a button in each pre.
+      const codeGroupActions = (pre: Element) => {
+        const tabs = pre.closest("blume-tabs");
+        const content = tabs?.querySelector(":scope > [data-blume-tab-content]");
+        const panels = content ? Array.from(content.children) : [];
+        if (!tabs || panels.length === 0 || !panels.every(isCodePanel)) {
+          return null;
+        }
+        return tabs.querySelector<HTMLElement>(
+          ":scope > * > [data-blume-tab-actions]"
+        );
+      };
+
+      // The block the strip's copy button should read: the visible panel's
+      // pre. Panels toggle a `hidden` class once the tabs element upgrades;
+      // before that only the first is painted, and it is also the first
+      // match here.
+      const activeCodePre = (tabs: Element) => {
+        const content = tabs.querySelector(":scope > [data-blume-tab-content]");
+        const panel =
+          Array.from(content?.children ?? []).find(
+            (child) => !child.classList.contains("hidden")
+          ) ?? content?.firstElementChild;
+        if (!panel) {
+          return null;
+        }
+        return panel.matches("pre") ? panel : panel.querySelector("pre");
+      };
+
       const languageLabels: Record<string, string> = {
         astro: "Astro",
         bash: "Bash",
@@ -836,41 +882,16 @@ const bannerKey = banner?.dismissible ? banner.key : null;
         const copiedLabel =
           document.body.getAttribute("data-i18n-copied") || "Copied!";
 
-        for (const pre of document.querySelectorAll(".prose pre")) {
-          if (pre.querySelector("[data-blume-copy]")) {
-            continue;
-          }
-          // Skip nested <pre>: Twoslash renders each hover popup's type signature
-          // as a <pre> inside the code block, which shouldn't get its own button.
-          if (pre.parentElement?.closest("pre")) {
-            continue;
-          }
-          const language = pre.getAttribute("data-language");
-          if (language) {
-            pre.setAttribute(
-              "data-language",
-              languageLabels[language.toLowerCase()] ?? language
-            );
-          }
-          pre.classList.add("group", "relative");
-          // The code element is the scroll container (see the theme entry), but
-          // Shiki's tab stop lands on the pre, which no longer scrolls. Move the
-          // stop to the code so keyboard users can actually scroll the block
-          // (WCAG 2.1.1 — the same rule the table wrapper handles). Twoslash and
-          // API-panel blocks keep the pre as their scroller, so theirs stays.
-          const scroller = pre.querySelector("code");
-          if (scroller && !pre.matches(".twoslash, blume-panel-tabs *")) {
-            scroller.setAttribute("tabindex", "0");
-            pre.removeAttribute("tabindex");
-          }
+        // `placement` is the extra class set for an overlay button (empty for
+        // one hosted by a tab strip); `readPre` resolves the block to copy at
+        // click time, since a strip button follows the active panel.
+        const createCopyButton = (
+          placement: string,
+          readPre: () => Element | null
+        ) => {
           const button = document.createElement("button");
           button.type = "button";
-          // The language-label bar (prose) vs flush code (tabs) need a different
-          // offset; pick the Tailwind class by context instead of a CSS override.
-          const topClass = pre.closest("blume-tabs, .not-prose")
-            ? "top-2.5"
-            : "top-2";
-          button.className = `${buttonClass} ${idleClasses.join(" ")} ${topClass}`;
+          button.className = `${buttonClass} ${idleClasses.join(" ")} ${placement}`;
           button.setAttribute("data-blume-copy", "");
           button.setAttribute("aria-label", copyCodeLabel);
           button.innerHTML =
@@ -896,7 +917,7 @@ const bannerKey = banner?.dismissible ? banner.key : null;
           };
           const flash = createCopyFlash(setChecked, copiedLabel);
           button.addEventListener("click", async () => {
-            const code = pre.querySelector("code");
+            const code = readPre()?.querySelector("code");
             let text = code?.textContent ?? "";
             // Twoslash nests each hover popup's type signature and docs inside
             // the <code>; copying textContent verbatim would interleave them
@@ -914,7 +935,55 @@ const bannerKey = banner?.dismissible ? banner.key : null;
               flash();
             }
           });
-          pre.appendChild(button);
+          return button;
+        };
+
+        for (const pre of document.querySelectorAll(".prose pre")) {
+          if (pre.querySelector("[data-blume-copy]")) {
+            continue;
+          }
+          // Skip nested <pre>: Twoslash renders each hover popup's type signature
+          // as a <pre> inside the code block, which shouldn't get its own button.
+          if (pre.parentElement?.closest("pre")) {
+            continue;
+          }
+          const language = pre.getAttribute("data-language");
+          if (language) {
+            pre.setAttribute(
+              "data-language",
+              languageLabels[language.toLowerCase()] ?? language
+            );
+          }
+          pre.classList.add("group", "relative");
+          // The code element is the scroll container (see the theme entry), but
+          // Shiki's tab stop lands on the pre, which no longer scrolls. Move the
+          // stop to the code so keyboard users can actually scroll the block
+          // (WCAG 2.1.1 — the same rule the table wrapper handles). Twoslash and
+          // API-panel blocks keep the pre as their scroller, so theirs stays.
+          const scroller = pre.querySelector("code");
+          if (scroller && !pre.matches(".twoslash, blume-panel-tabs *")) {
+            scroller.setAttribute("tabindex", "0");
+            pre.removeAttribute("tabindex");
+          }
+          const actions = codeGroupActions(pre);
+          if (actions) {
+            // One button per code switcher, reading whichever panel shows.
+            if (!actions.querySelector("[data-blume-copy]")) {
+              const tabs = actions.closest("blume-tabs");
+              actions.appendChild(
+                createCopyButton("", () => (tabs ? activeCodePre(tabs) : null))
+              );
+            }
+            continue;
+          }
+          // The language-label bar (prose) vs flush code (tabs) need a different
+          // offset; pick the Tailwind class by context instead of a CSS override.
+          const topClass = pre.closest("blume-tabs, .not-prose")
+            ? "top-2.5"
+            : "top-2";
+          pre.appendChild(
+            createCopyButton(`${overlayClass} ${topClass}`, () => pre)
+          );
         }
 
         // Click-to-zoom for content images (gated by `markdown.imageZoom`),

package/src/theme/code-block-padding.ts

@@ -6,11 +6,3 @@
 
 /** Top and bottom inset of a plain prose block with no chrome, in rem. */
 export const CODE_PADDING_BLOCK_REM = 1;
-
-/**
- * Top inset of a flush block — inside tabs or a `not-prose` component, or an
- * untitled block with no language bar — where the layout's copy button is
- * absolutely positioned over the first line: `top-2.5` plus a 1.875rem button
- * lands at 2.5rem, so the first line starts there.
- */
-export const FLUSH_CODE_PADDING_TOP_REM = 2.5;

package/src/theme/entry.ts

@@ -1,7 +1,4 @@
-import {
-  CODE_PADDING_BLOCK_REM,
-  FLUSH_CODE_PADDING_TOP_REM,
-} from "./code-block-padding.ts";
+import { CODE_PADDING_BLOCK_REM } from "./code-block-padding.ts";
 
 interface TailwindEntryOptions {
   /**
@@ -614,27 +611,19 @@ blume-tabs pre[data-language],
   padding-top: ${CODE_PADDING_BLOCK_REM}rem;
 }
 
-/* Room for the copy button. The docs layout injects it into every \`.prose pre\`
-   — absolutely positioned against the pre's border box, 1.875rem tall, at
-   \`top-2.5\` in the flush contexts above and \`top-2\` elsewhere — and it is
-   unconditional, so wherever no language bar exists to hold it, it painted
-   over the first line of code: any line long enough to reach the button's
-   strip (a curl invocation, an install command, an import path) went under
-   it. Keyed on the attribute the docs layout stamps on <body>, so the strip
-   only appears where the injector runs (PageLayout pages run none), and on
-   \`.astro-code\` so the playground's response pre — created after the
-   injector ran, never given a button — keeps its plain inset. The first
-   selector is the injector's own flush predicate; the second covers the
-   remaining bar-less Shiki case, an untitled <CodeBlock> in plain prose, from
-   first paint. The third covers a raw \`<pre><code>\` written in prose — no
-   \`.astro-code\`, no language bar, but the injector gives it a button all
-   the same — keyed on that injected button, which is exactly what separates
-   it from the playground's pre. API panel blocks match, but their own
-   !important padding wins and they hide the injected button. */
-[data-blume-code-copy] :is(blume-tabs, .not-prose) pre.astro-code,
-[data-blume-code-copy] .prose pre.astro-code:not([data-language]),
-[data-blume-code-copy] .prose pre:not([data-language]):has(> [data-blume-copy]) {
-  padding-top: ${FLUSH_CODE_PADDING_TOP_REM}rem;
+/* Where no language bar holds the copy button — a flush block in tabs or a
+   not-prose component, a bar-less block in prose — the docs layout still pins
+   one over the block's top-right corner, so a first line long enough to reach
+   it would end underneath. A code switcher (CodeGroup, ts2js) hosts the button
+   in its tab strip instead and needs nothing here; for every block that keeps
+   an overlay button, give the scrolling code element enough end padding that
+   the line's tail clears the button at the end of its scroll. Keyed on the
+   injected button itself (which the playground's client-created response pre
+   never gets), and \`.prose\`-scoped to outrank the base \`:where(pre code)\`
+   inset. Not a vertical inset — that reserved a strip above every one-line
+   command and read as a rendering bug. */
+.prose :is(blume-tabs pre, .not-prose pre, pre:not([data-language])):not(.twoslash, .twoslash pre, blume-panel-tabs *):has(> [data-blume-copy]) > code {
+  padding-inline-end: 3.5rem;
 }
 
 blume-tabs pre[data-language]::before,