astro(fix[prompt-space]): Include trailing whitespace in non-selectable prefix

why: Cycle 75 split the bundled prompt into a select-none span,
but the trailing space stayed in the selectable rest-of-line span.
Triple-clicking the line still selected a leading space before
pip, which the user flagged as still-broken on /packages/sphinx-
autodoc-api-style/.

what:
- Widen the bundled-prompt regex to capture trailing whitespace
  in the non-selectable prefix. Selection now starts at the
  command body, not at a leading space.
- Add hoistTrailingWhitespace() running after the exact-match
  pass: when a prompt span was tagged, check its next-sibling
  span for leading whitespace and split it into a select-none
  prefix between them. Mirrors the bundled-prompt fix for
  Shikis Python tokenization where the prompt and its trailing
  space land in adjacent spans.

Verified live: pip install line splits as
  <span class=select-none>$ </span><span>pip install ...</span>
with computed user-select: none on the prefix. Triple-click
starts at pip.

1446 pytest, 246 vitest theme + 81 dogfood, biome/mypy/ruff
clean, 242-page build green.

Author: tony

astro/apps/gp-sphinx-docs/src/lib/code-copy.ts

@@ -99,53 +99,81 @@ export function formatCopyText(text: string): string {
 const PROMPT_TOKENS: ReadonlySet<string> = new Set(['>>>', '...', '$', '#'])
 
 /**
- * Regex matching a recognised prompt at the START of a string.
- * Capture group 1 is the prompt token ALONE (without trailing
- * whitespace) so the tagged span carries exactly the prompt; the
- * trailing space stays with the command body.
+ * Regex matching a recognised prompt at the START of a string,
+ * INCLUDING the trailing whitespace separator. The full match is
+ * what gets moved into a non-selectable prefix span so triple-
+ * click selection starts cleanly at the command body rather than
+ * at a leading space.
  */
-const PROMPT_PREFIX = /^(>>>|\.\.\.|\$|#)(\s)/
+const PROMPT_PREFIX = /^(>>>|\.\.\.|\$|#)(\s+)/
 
 function splitPromptIfBundled(span: HTMLElement): void {
   // Shiki's ``console`` (and some Python shell renderings)
-  // tokenize the entire line as a single coloured span:
-  // ``<span style="…">$ pip install foo</span>``. Triple-clicking
-  // selects the prompt because it's inside that span. Detect the
-  // leading prompt + space, split into a non-selectable prefix
-  // span carrying just the prompt, and shrink the original span
-  // to the trailing command body.
+  // tokenize the entire line as a single coloured span. Detect a
+  // leading prompt + whitespace, hoist BOTH into a non-selectable
+  // prefix so the selection cursor stops at the command body.
   if (span.children.length > 0) {
-    // Already split or contains nested markup — skip.
     return
   }
   const text = span.textContent ?? ''
   const match = text.match(PROMPT_PREFIX)
   if (match === null) {
     return
   }
-  const prompt = match[1] ?? ''
-  const separator = match[2] ?? ''
-  const rest = text.slice(prompt.length + separator.length)
-  // Build the prompt span carrying the prompt token, marked
-  // non-selectable. Inherit the inline style so the colour grammar
-  // stays consistent with the surrounding tokens.
+  const prefix = match[0]
+  const rest = text.slice(prefix.length)
   const promptSpan = document.createElement('span')
   promptSpan.classList.add('select-none')
   if (span.getAttribute('style') !== null) {
     promptSpan.setAttribute('style', span.getAttribute('style') ?? '')
   }
-  promptSpan.textContent = prompt
-  // Reduce the original span to the separator + remaining body.
-  span.textContent = `${separator}${rest}`
+  promptSpan.textContent = prefix
+  span.textContent = rest
   span.parentNode?.insertBefore(promptSpan, span)
 }
 
+/**
+ * After a span has been tagged exact-match as a prompt token
+ * (cycle 74's first pass), check its NEXT-sibling span. If that
+ * sibling starts with whitespace, hoist the leading whitespace
+ * into a select-none sibling between them so the selection cursor
+ * stops at the command body, not before the leading space. Mirrors
+ * the bundled-prompt split for the non-bundled case.
+ */
+function hoistTrailingWhitespace(promptSpan: HTMLElement): void {
+  const next = promptSpan.nextElementSibling
+  if (!(next instanceof HTMLElement)) {
+    return
+  }
+  if (next.children.length > 0) {
+    return
+  }
+  const text = next.textContent ?? ''
+  const wsMatch = text.match(/^(\s+)(.*)$/s)
+  if (wsMatch === null) {
+    return
+  }
+  const ws = wsMatch[1] ?? ''
+  const rest = wsMatch[2] ?? ''
+  const wsSpan = document.createElement('span')
+  wsSpan.classList.add('select-none')
+  if (next.getAttribute('style') !== null) {
+    wsSpan.setAttribute('style', next.getAttribute('style') ?? '')
+  }
+  wsSpan.textContent = ws
+  next.textContent = rest
+  next.parentNode?.insertBefore(wsSpan, next)
+}
+
 function markPromptSpans(code: Element): void {
   // First pass: tag spans whose text is exactly a prompt token
   // (Shiki's Python tokenization, where ``>>>`` is its own span).
+  // Then hoist the leading whitespace from the next sibling so the
+  // separator after the prompt is also non-selectable.
   for (const span of code.querySelectorAll<HTMLElement>('span')) {
     if (PROMPT_TOKENS.has(span.textContent ?? '')) {
       span.classList.add('select-none')
+      hoistTrailingWhitespace(span)
     }
   }
   // Second pass: split bundled-prompt spans (Shiki's ``console``
@@ -154,9 +182,6 @@ function markPromptSpans(code: Element): void {
   // ``<span class="line">`` — a ``$`` mid-line is not a prompt.
   const lines = code.querySelectorAll<HTMLElement>('span.line')
   if (lines.length === 0) {
-    // Some Shiki output (older versions, or when ``defaultColor``
-    // is set differently) skips the line wrapper. Fall back to the
-    // direct children of ``code``.
     for (const span of Array.from(code.children).filter(
       (c) => c instanceof HTMLElement,
     ) as HTMLElement[]) {

astro/apps/gp-sphinx-docs/test/lib/code-copy.test.ts

@@ -164,20 +164,30 @@ function makeShikiPre(html: string): HTMLPreElement {
 
 describe('enhanceCodeBlocks — prompt non-selection', () => {
   test('marks ``>>> `` Python REPL prompt spans as non-selectable', () => {
+    // Shiki's Python lexer puts ``>>>`` in its own span; the
+    // following space is typically inside the next span carrying
+    // the variable name. We split the next span's leading
+    // whitespace into the non-selectable prefix so triple-click
+    // selection starts at ``spec`` rather than `` spec``.
     const root = document.createElement('div')
     root.appendChild(
       makeShikiPre(
-        '<span class="line"><span style="color:#D73A49">&gt;&gt;&gt;</span> spec = 1</span>',
+        '<span class="line"><span style="color:#D73A49">&gt;&gt;&gt;</span><span style="color:#005CC5"> spec</span><span style="color:#000"> = 1</span></span>',
       ),
     )
     document.body.appendChild(root)
     enhanceCodeBlocks(root)
-    const spans = root.querySelectorAll('code span')
-    const promptSpan = Array.from(spans).find(
-      (s) => s.textContent === '>>>',
-    ) as HTMLElement | undefined
-    expect(promptSpan).toBeDefined()
+    const spans = Array.from(root.querySelectorAll('code span'))
+    const promptSpan = spans.find((s) => s.textContent === '>>>') as
+      | HTMLElement
+      | undefined
     expect(promptSpan?.classList.contains('select-none')).toBe(true)
+    // The leading space from the next span (`` spec``) is hoisted
+    // into a select-none sibling so selection starts at ``spec``.
+    const leadingSpaceSpan = spans.find(
+      (s) => s.textContent === ' ' && s.classList.contains('select-none'),
+    )
+    expect(leadingSpaceSpan).toBeDefined()
   })
 
   test('marks ``$`` shell prompt span as non-selectable', () => {
@@ -197,13 +207,12 @@ describe('enhanceCodeBlocks — prompt non-selection', () => {
     expect(promptSpan?.classList.contains('select-none')).toBe(true)
   })
 
-  test('splits ``$ `` prefix when Shiki bundles it into the rest of the line', () => {
+  test('splits ``$ `` prefix INCLUDING trailing space as non-selectable', () => {
     // Shiki's ``console`` language renders the whole line as a
-    // single span — ``<span>$ pip install foo</span>``. Triple-
-    // clicking the line still selects the ``$`` because it's
-    // inside the same selectable span. The fix is to split: emit a
-    // non-selectable span for the prompt prefix and a regular span
-    // for the rest.
+    // single span. The fix splits both the ``$`` AND the
+    // separator space into the non-selectable prefix so a
+    // triple-click selection starts cleanly at ``pip`` rather
+    // than ``  pip``.
     const root = document.createElement('div')
     root.appendChild(
       makeShikiPre(
@@ -213,19 +222,18 @@ describe('enhanceCodeBlocks — prompt non-selection', () => {
     document.body.appendChild(root)
     enhanceCodeBlocks(root)
     const line = root.querySelector('span.line')
-    expect(line).toBeDefined()
-    // After split there should be a span carrying just the prompt
-    // with select-none, plus a sibling carrying the rest.
     const promptSpan = Array.from(line?.querySelectorAll('span') ?? []).find(
-      (s) => s.textContent === '$' && s.classList.contains('select-none'),
+      (s) => s.classList.contains('select-none'),
     )
     expect(promptSpan).toBeDefined()
-    // The full line text content is preserved end-to-end (a single
-    // space between prompt and command).
+    // The non-selectable prefix carries BOTH the prompt token and
+    // the trailing space — so selection cleanly starts at ``pip``.
+    expect(promptSpan?.textContent).toBe('$ ')
+    // The full line text content is preserved end-to-end.
     expect(line?.textContent).toBe('$ pip install foo')
   })
 
-  test('splits ``>>> `` prefix when bundled with command in single span', () => {
+  test('splits ``>>> `` prefix INCLUDING trailing space when bundled with command', () => {
     const root = document.createElement('div')
     root.appendChild(
       makeShikiPre(
@@ -236,9 +244,9 @@ describe('enhanceCodeBlocks — prompt non-selection', () => {
     enhanceCodeBlocks(root)
     const line = root.querySelector('span.line')
     const promptSpan = Array.from(line?.querySelectorAll('span') ?? []).find(
-      (s) => s.textContent === '>>>' && s.classList.contains('select-none'),
+      (s) => s.classList.contains('select-none'),
     )
-    expect(promptSpan).toBeDefined()
+    expect(promptSpan?.textContent).toBe('>>> ')
     expect(line?.textContent).toBe('>>> print("hi")')
   })