astro(fix[prompt-split]): Split bundled prompt prefix in Shiki spans

why: cycle 74 only handled Shikis Python tokenization where each
prompt is its own span. But Shikis console lexer tokenizes a
whole shell line as ONE span - the whole pip install line is
inside the same selectable span. Triple-clicking still selected
the leading prompt, which was the users exact complaint on
/packages/sphinx-autodoc-api-style/.

what:
- Add splitPromptIfBundled(span) running as a second pass after
  the exact-match pass. For each line span, find the first child
  span; if its textContent starts with a recognised prompt
  followed by whitespace, split into a new prompt-only span with
  select-none (inheriting the inline style for colour parity)
  and shrink the original to the trailing body.
- Idempotent: skip spans that already have child elements.
- Falls back to direct children of code when Shikis wrapper
  variant skips the line wrapper.
- 2 RED-first vitest cases for the split, plus 1 regression test
  for COPY button compatibility post-split.

Verified live: the pip install line at /packages/sphinx-autodoc-
api-style/ now has the dollar in its own select-none span; the
rest stays selectable.

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

@@ -98,12 +98,79 @@ 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.
+ */
+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.
+  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 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}`
+  span.parentNode?.insertBefore(promptSpan, span)
+}
+
 function markPromptSpans(code: Element): void {
-  for (const span of code.querySelectorAll('span')) {
+  // First pass: tag spans whose text is exactly a prompt token
+  // (Shiki's Python tokenization, where ``>>>`` is its own span).
+  for (const span of code.querySelectorAll<HTMLElement>('span')) {
     if (PROMPT_TOKENS.has(span.textContent ?? '')) {
       span.classList.add('select-none')
     }
   }
+  // Second pass: split bundled-prompt spans (Shiki's ``console``
+  // tokenization, where the entire line is one span). We only
+  // consider the FIRST text-bearing span inside each
+  // ``<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[]) {
+      splitPromptIfBundled(span)
+    }
+    return
+  }
+  for (const line of lines) {
+    const firstSpan = line.querySelector<HTMLElement>(':scope > span')
+    if (firstSpan === null) {
+      continue
+    }
+    splitPromptIfBundled(firstSpan)
+  }
 }
 
 export function enhanceCodeBlocks(root: ParentNode): void {

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

@@ -197,6 +197,74 @@ 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', () => {
+    // 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.
+    const root = document.createElement('div')
+    root.appendChild(
+      makeShikiPre(
+        '<span class="line"><span style="color:#000">$ pip install foo</span></span>',
+      ),
+    )
+    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'),
+    )
+    expect(promptSpan).toBeDefined()
+    // The full line text content is preserved end-to-end (a single
+    // space between prompt and command).
+    expect(line?.textContent).toBe('$ pip install foo')
+  })
+
+  test('splits ``>>> `` prefix when bundled with command in single span', () => {
+    const root = document.createElement('div')
+    root.appendChild(
+      makeShikiPre(
+        '<span class="line"><span style="color:#000">&gt;&gt;&gt; print("hi")</span></span>',
+      ),
+    )
+    document.body.appendChild(root)
+    enhanceCodeBlocks(root)
+    const line = root.querySelector('span.line')
+    const promptSpan = Array.from(line?.querySelectorAll('span') ?? []).find(
+      (s) => s.textContent === '>>>' && s.classList.contains('select-none'),
+    )
+    expect(promptSpan).toBeDefined()
+    expect(line?.textContent).toBe('>>> print("hi")')
+  })
+
+  test('after splitting a bundled prompt, copying still strips it correctly', async () => {
+    // Regression test for the interaction between
+    // ``splitPromptIfBundled`` and ``formatCopyText``: after the
+    // DOM split, the code's textContent is unchanged
+    // (``$ pip install foo``), so ``formatCopyText`` running on
+    // that text still correctly strips the ``$ `` prefix and
+    // writes ``pip install foo`` to the clipboard.
+    const root = document.createElement('div')
+    root.appendChild(
+      makeShikiPre(
+        '<span class="line"><span style="color:#000">$ pip install foo</span></span>',
+      ),
+    )
+    document.body.appendChild(root)
+    enhanceCodeBlocks(root)
+    const button = root.querySelector<HTMLButtonElement>(
+      '[data-test-id="code-copy"]',
+    )
+    button?.click()
+    await Promise.resolve()
+    expect(writeText).toHaveBeenCalledWith('pip install foo')
+  })
+
   test('does not tag spans whose text is incidentally a prompt-like substring', () => {
     // A span whose text is ``$`` AS PART OF a longer token — e.g.
     // a price ``$10`` — should NOT be marked non-selectable. We