vocs 2.5.2 → 2.6.0

package/src/internal/mdx.test.ts

@@ -20,6 +20,7 @@ import {
   remarkFilename,
   remarkFileTree,
   remarkLangCommaAttrs,
+  remarkPrompt,
   remarkRestoreUnknownTextDirectives,
   remarkSubheading,
 } from './mdx.js'
@@ -128,11 +129,63 @@ describe('remarkSubheading', () => {
   })
 })
 
+describe('remarkPrompt', () => {
+  it('turns prompt directives into opaque prompt blocks', async () => {
+    const value = [
+      'Read https://vocs.dev.',
+      '',
+      'Requirements:',
+      '- Run `pnpm build`.',
+      '- Replace <PROJECT_NAME>.',
+      '- Preserve {literal} braces.',
+    ].join('\n')
+    const tree = await runRemark(`:::prompt\n${value}\n:::`, [remarkDirective, remarkPrompt])
+
+    expect(tree.children[0]).toMatchObject({
+      type: 'paragraph',
+      children: [],
+      data: {
+        hName: 'pre',
+        hProperties: { 'data-v-prompt': value },
+      },
+    })
+  })
+
+  it('leaves prompt examples in code fences unchanged', async () => {
+    const value = ':::prompt\nReplace <PROJECT_NAME>.\n:::'
+    const tree = await runRemark(`\`\`\`md\n${value}\n\`\`\``, [remarkDirective, remarkPrompt])
+
+    expect(tree.children[0]).toMatchObject({ type: 'code', lang: 'md', value })
+  })
+
+  it('restores prompt directives as code blocks for markdown output', async () => {
+    const value = 'Replace <PROJECT_NAME> and preserve {literal} braces.'
+    const tree = await runRemark(`:::prompt\n${value}\n:::`, [
+      remarkDirective,
+      [remarkPrompt, { output: 'code' }],
+    ])
+
+    expect(tree.children[0]).toMatchObject({ type: 'code', lang: 'prompt', value })
+  })
+
+  it('leaves other directives unchanged', async () => {
+    const tree = await runRemark(':::note\nhello\n:::', [remarkDirective, remarkPrompt])
+
+    expect(tree.children[0]).toMatchObject({
+      type: 'containerDirective',
+      name: 'note',
+    })
+  })
+})
+
 async function runRemark(markdown: string, plugins: unknown[]) {
   const processor = unified().use(remarkParse)
-  for (const plugin of plugins) processor.use(plugin as never)
+  for (const plugin of plugins) {
+    if (Array.isArray(plugin)) processor.use(plugin[0] as never, plugin[1] as never)
+    else processor.use(plugin as never)
+  }
   const tree = processor.parse(markdown) as MdAst.Root
-  await processor.run(tree)
+  await processor.run(tree, markdown)
   return tree
 }
 

package/src/internal/mdx.ts

@@ -29,7 +29,7 @@ import solidity from 'shiki/langs/solidity.mjs'
 import sql from 'shiki/langs/sql.mjs'
 import toml from 'shiki/langs/toml.mjs'
 import yamlLang from 'shiki/langs/yaml.mjs'
-import { type Pluggable, type PluggableList, unified } from 'unified'
+import { type Pluggable, type PluggableList, type Processor, unified } from 'unified'
 import * as UnistUtil from 'unist-util-visit'
 import type { VFile } from 'vfile'
 import { createLogger } from 'vite'
@@ -125,6 +125,104 @@ export declare namespace remarkMermaid {
   type ReturnType = (tree: MdAst.Root) => void
 }
 
+/** Masks prompt bodies during parsing so MDX syntax remains literal prompt text. */
+function maskPromptBodies(markdown: string): string {
+  let codeFence: string | undefined
+  let promptFenceSize = 0
+
+  return markdown
+    .split(/(?<=\n)/)
+    .map((line) => {
+      const value = line.replace(/\r?\n$/, '')
+
+      if (promptFenceSize) {
+        const closing = value.match(/^ {0,3}(:{3,})[ \t]*$/)?.[1]
+        if (closing && closing.length >= promptFenceSize) {
+          promptFenceSize = 0
+          return line
+        }
+        return line.replace(/[^\r\n]/g, 'x')
+      }
+
+      if (codeFence) {
+        const closing = value.match(/^ {0,3}(`{3,}|~{3,})[ \t]*$/)?.[1]
+        if (closing && closing[0] === codeFence[0] && closing.length >= codeFence.length)
+          codeFence = undefined
+        return line
+      }
+
+      const nextCodeFence = value.match(/^ {0,3}(`{3,}|~{3,})/)?.[1]
+      if (nextCodeFence) {
+        const info = value.slice(value.indexOf(nextCodeFence) + nextCodeFence.length)
+        if (nextCodeFence[0] === '~' || !info.includes('`')) codeFence = nextCodeFence
+        return line
+      }
+
+      const promptFence = value.match(/^ {0,3}(:{3,})prompt[ \t]*$/)?.[1]
+      if (promptFence) promptFenceSize = promptFence.length
+      return line
+    })
+    .join('')
+}
+
+/** Transforms prompt directives into prompt blocks. */
+export function remarkPrompt(
+  this: Processor,
+  options: remarkPrompt.Options = {},
+): remarkPrompt.ReturnType {
+  const parser = this.parser
+  if (!parser) throw new Error('`remarkPrompt` requires a parser')
+  this.parser = (document, file) => parser(maskPromptBodies(document), file)
+
+  return (tree: MdAst.Root, file: VFile) => {
+    const raw = typeof file.value === 'string' ? file.value : file.value?.toString()
+    if (!raw) return
+
+    UnistUtil.visit(tree, (node, index, parent) => {
+      if (node.type !== 'containerDirective') return
+      if (node.name !== 'prompt') return
+      if (index === undefined || !parent) return
+
+      const start = node.position?.start.offset
+      const end = node.position?.end.offset
+      if (start === undefined || end === undefined) return
+
+      const source = raw.slice(start, end)
+      const bodyStart = source.indexOf('\n')
+      if (bodyStart === -1) return
+
+      const closingStart = source.lastIndexOf('\n')
+      const closingLine = source.slice(closingStart + 1).replace(/\r$/, '')
+      const bodyEnd = /^[ \t]*:{3,}[ \t]*$/.test(closingLine) ? closingStart : source.length
+      const value = source.slice(bodyStart + 1, bodyEnd)
+
+      const replacement =
+        options.output === 'code'
+          ? ({ type: 'code', lang: 'prompt', value } satisfies MdAst.Code)
+          : ({
+              type: 'paragraph',
+              children: [],
+              data: {
+                hName: 'pre',
+                hProperties: {
+                  'data-v-prompt': value,
+                },
+              },
+            } satisfies MdAst.Paragraph)
+
+      parent.children.splice(index, 1, replacement)
+      return UnistUtil.SKIP
+    })
+  }
+}
+
+export declare namespace remarkPrompt {
+  type Options = {
+    output?: 'code' | 'element' | undefined
+  }
+  type ReturnType = (tree: MdAst.Root, file: VFile) => void
+}
+
 /**
  * Remark plugin that injects an ephemeral source-map comment into the body of
  * each `twoslash` code block. The comment carries the block's source position
@@ -220,6 +318,7 @@ export function getCompileOptions(
           // directives can render real markdown below. Unhandled directives
           // round-trip back to their source form on stringify.
           remarkDirective,
+          [remarkPrompt, { output: 'code' }] as Pluggable,
           [remarkChangelogMarkdown, config] as Pluggable,
           // User plugins extend the parser (e.g. `remark-math`) so syntax
           // recognized in the React build also parses for llms/search.
@@ -287,15 +386,16 @@ export function getCompileOptions(
         remarkPlugins: [
           remarkMermaid,
           remarkFrontmatter,
+          remarkDirective,
           [remarkFileTree, config] as Pluggable,
           remarkCallout,
           remarkChangelog,
           remarkCodeGroup,
+          remarkPrompt,
           remarkLangCommaAttrs,
           [remarkCodeTitle, { additionalLanguages: additionalLanguageNames }] as Pluggable,
           remarkDefaultFrontmatter,
           remarkDetails,
-          remarkDirective,
           remarkBadge,
           remarkFilename,
           remarkGfm,

package/src/internal/openapi/openapi.ts

@@ -55,9 +55,9 @@ export type SidebarExtras = {
    */
   intro?: SidebarItem[] | undefined
   /**
-   * Collapse the generated category groups by default. The group matching the
-   * active page still auto-expands, so deep links stay navigable. The generated
-   * `Introduction` entry is unaffected.
+   * Collapse the generated category groups and `x-tagGroups` sections by default.
+   * Groups containing the active page still auto-expand, so deep links stay
+   * navigable. The generated `Introduction` entry is unaffected.
    *
    * @default false
    */

package/src/internal/openapi/sidebar.test.ts

@@ -94,7 +94,7 @@ describe('toSidebar', () => {
     expect((sidebar[1] as { collapsed: boolean }).collapsed).toBe(true)
   })
 
-  test('nests claimed groups under static section headers from tagGroups', () => {
+  test('nests claimed groups under collapsible section headers from tagGroups', () => {
     const sectioned: Ir = {
       ...ir,
       groups: [
@@ -121,13 +121,11 @@ describe('toSidebar', () => {
     }
     const sidebar = toSidebar(sectioned, { collapsed: true })
     expect(sidebar.map((item) => item.text)).toEqual(['Introduction', 'Data API', 'Platform API'])
-    // Sections are static headers (not collapsible); nested groups keep the
-    // `collapsed` behavior.
     const section = sidebar[1] as {
       collapsed?: boolean
       items: { text?: string; collapsed?: boolean }[]
     } // prettier-ignore
-    expect(section.collapsed).toBeUndefined()
+    expect(section.collapsed).toBe(true)
     expect(section.items.map((item) => item.text)).toEqual(['pets'])
     expect(section.items[0]?.collapsed).toBe(true)
   })
@@ -171,7 +169,7 @@ describe('toSidebar', () => {
     }
     const sidebar = toSidebar(sectioned, { flatten: ['Data API'] })
     // `pets` renders top-level where its section would sit; `Platform API`
-    // keeps its section header.
+    // keeps its static section header.
     expect(sidebar.map((item) => item.text)).toEqual(['Introduction', 'pets', 'Platform API'])
     const pets = sidebar[1] as { collapsed?: boolean }
     const section = sidebar[2] as { collapsed?: boolean; items: { text?: string }[] }

package/src/internal/openapi/sidebar.ts

@@ -61,8 +61,8 @@ export function toSidebar(ir: Ir, options: toSidebar.Options = {}): SidebarItem<
   // group id, rendered after the group's "Overview" link.
   const groupExtras = options.groupExtras ?? new Map<string, SidebarItem[]>()
 
-  // Generated category groups start collapsed when `collapsed` is set (the
-  // active group still auto-expands at render). `Introduction` is unaffected.
+  // Generated category groups and sections start collapsed when `collapsed` is
+  // set. Active groups still auto-expand at render. `Introduction` is unaffected.
   const groupCollapsed = options.collapsed ?? false
 
   const groupItem = (group: Ir['groups'][number]): SidebarItem<true> => ({
@@ -89,9 +89,8 @@ export function toSidebar(ir: Ir, options: toSidebar.Options = {}): SidebarItem<
   const tagGroups = ir.tagGroups ?? []
   if (tagGroups.length === 0) return [introduction, ...ir.groups.map(groupItem)]
 
-  // `x-tagGroups` sections render as static headers (no `collapsed`, so not
-  // collapsible); the per-category `collapsed` behavior applies unchanged.
-  // Sections named in `flatten` spread their categories in place instead.
+  // `x-tagGroups` sections render as collapsible headers. Sections named in
+  // `flatten` spread their categories in place instead.
   const flatten = new Set(options.flatten ?? [])
   const groupById = new Map(ir.groups.map((group) => [group.id, group]))
   const claimed = new Set(tagGroups.flatMap((tagGroup) => tagGroup.groupIds))
@@ -101,7 +100,7 @@ export function toSidebar(ir: Ir, options: toSidebar.Options = {}): SidebarItem<
       return group ? [groupItem(group)] : []
     })
     if (flatten.has(tagGroup.name)) return items
-    return [{ text: tagGroup.name, items }]
+    return [{ text: tagGroup.name, collapsed: options.collapsed, items }]
   })
   return [
     introduction,
@@ -117,8 +116,8 @@ export declare namespace toSidebar {
     /** Extra items injected into a generated group, keyed by group id. */
     groupExtras?: Map<string, SidebarItem[]> | undefined
     /**
-     * Collapse the generated category groups by default (the active group still
-     * auto-expands). `Introduction` is unaffected. @default false
+     * Collapse generated category groups and `x-tagGroups` sections by default.
+     * Active groups still auto-expand. `Introduction` is unaffected. @default false
      */
     collapsed?: boolean | undefined
     /**

package/src/internal/search.test.ts

@@ -40,6 +40,22 @@ Some text.
     expect(sections.length).toBe(1)
   })
 
+  it('strips inline twoslash cache comments from code blocks', () => {
+    const content = `
+# Getting Started
+
+Set up your client.
+
+\`\`\`ts twoslash
+// @twoslash-cache: {"v":1,"hash":"abc123","data":"N4Igdg9gJgpgziAXAbVAFwJ4AcZJACwgDcYAnEAGhDRgA808AKAQwBsBLZuASgAIAzAK5gAxmnYQwvEaRjMaABUEAjDiIDCHGMBpQ4vACqHjps+YvT8zdlKvbbvdR5evAA+vMKw/F4wULwAvGE2MJFg0W7MIiIQwmgA8qQAglBQsnB2PjZ2+RlZOiG8hcXwdqHhSVEx8a3JqbykWCIAyiL4MAC2zJb0vnYASv1DI+N1Xe1xCRHtbpnGFmgQANbaZVMVDgdHy4ndHettKVAAfIxYzIajMDSkcIi8SqrsGi06nUiA"]}
+import { createPublicClient } from 'viem'
+\`\`\`
+`
+    const [section] = Search.extract(content, config).sections
+    expect(section?.text).not.toContain('@twoslash-cache')
+    expect(section?.text).toContain("import { createPublicClient } from 'viem'")
+  })
+
   it('extracts sections from headings', () => {
     const content = `
 # Getting Started
@@ -843,6 +859,28 @@ const x = 1
     `)
   })
 
+  it('includes literal prompt directive content', () => {
+    const content = `
+# Agent Setup
+
+:::prompt
+Replace <PROJECT_NAME> and preserve {literal} braces.
+:::
+`
+    expect(Search.extract(content, config).sections).toMatchInlineSnapshot(`
+      [
+        {
+          "anchor": "agent-setup",
+          "isPage": true,
+          "subtitle": "",
+          "text": " Replace <PROJECT_NAME> and preserve {literal} braces.",
+          "title": "Agent Setup",
+          "titles": [],
+        },
+      ]
+    `)
+  })
+
   it('skips imports at the top of MDX files', () => {
     const content = `import { Example } from '../components/Example'
 import { useState } from 'react'

package/src/internal/search.ts

@@ -9,12 +9,17 @@ import remarkFrontmatter from 'remark-frontmatter'
 import remarkGfm from 'remark-gfm'
 import remarkMdx from 'remark-mdx'
 import remarkParse from 'remark-parse'
-import { unified } from 'unified'
+import { type Pluggable, unified } from 'unified'
 import * as UnistUtil from 'unist-util-visit'
 import * as yaml from 'yaml'
 import type * as Config from './config.js'
 import * as MarkdownImports from './markdown-imports.js'
-import { extractSubheading, getPhrasingContentText } from './mdx.js'
+import {
+  extractSubheading,
+  getPhrasingContentText,
+  remarkPrompt,
+  remarkStripInlineCache,
+} from './mdx.js'
 import * as OpenApiRegistry from './openapi/registry.js'
 import * as OpenApiSearch from './openapi/search.js'
 import * as Path from './path.js'
@@ -320,9 +325,13 @@ export function extract(source: string, config: Config.Config): extract.ReturnTy
   const remarkPlugins = [
     remarkFrontmatter,
     remarkDirective,
+    [remarkPrompt, { output: 'code' }] as Pluggable,
     remarkGfm,
     remarkStripJsx,
     remarkStripDirectives,
+    // Persisted twoslash cache comments are giant base64 blobs; without this
+    // they leak into section text (and search snippets/embeddings).
+    remarkStripInlineCache,
     // User plugins extend the parser (e.g. `remark-math`) so syntax
     // recognized in the React build also parses during indexing.
     ...(config.markdown?.remarkPlugins ?? []),
@@ -340,7 +349,7 @@ export function extract(source: string, config: Config.Config): extract.ReturnTy
   // Single parse for both positions and text extraction
   const processor = unified().use(remarkParse).use(remarkMdx).use(remarkPlugins)
   const tree = processor.parse(source)
-  processor.runSync(tree)
+  processor.runSync(tree, source)
 
   // Collect headings (plugins strip JSX/directives but preserve headings)
   const headingPositions = tree.children

package/src/internal/vite-plugins.ts

@@ -186,6 +186,7 @@ export function llms(config: Config.Config): PluginOption {
       pages: [...openapiPages, ...pages],
       title,
       description,
+      pagePrelude: Llms.getMarkdownPagePrelude(config),
       rehypePlugins,
       remarkPlugins,
       sidebar: config.sidebar,

package/src/mdx.tsx

@@ -12,6 +12,7 @@ import { Terminal } from './react/internal/Terminal.mdx.js'
 import { TwoslashCompletionList } from './react/internal/TwoslashCompletionList.js'
 import { TwoslashHover } from './react/internal/TwoslashHover.js'
 import { Link } from './react/Link.js'
+import { Prompt } from './react/Prompt.js'
 
 export const components: MDXComponents = {
   a(props: React.ComponentProps<'a'> & { children: React.ReactNode }) {
@@ -52,9 +53,16 @@ export const components: MDXComponents = {
       'data-v-codeToHtml'?: string | undefined
       'data-v-code'?: string | undefined
       'data-v-lang'?: string | undefined
+      'data-v-prompt'?: string | undefined
     },
   ) {
-    const { 'data-v-codeToHtml': codeToHtml, 'data-v-code': code, 'data-v-lang': lang } = props
+    const {
+      'data-v-codeToHtml': codeToHtml,
+      'data-v-code': code,
+      'data-v-lang': lang,
+      'data-v-prompt': prompt,
+    } = props
+    if (prompt !== undefined) return <Prompt value={prompt} />
     if (codeToHtml && code && lang) return <CodeToHtml code={code} lang={lang} />
     return <CodeBlock {...props} />
   },

package/src/react/Prompt.test.tsx

@@ -0,0 +1,27 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Prompt } from './Prompt.js'
+
+describe('Prompt', () => {
+  it('renders detected tokens and copy controls', () => {
+    const html = renderToStaticMarkup(
+      <Prompt
+        className="custom"
+        value={'Read https://vocs.dev and update `vocs.config.ts`.\n\nRequirements:'}
+      />,
+    )
+
+    expect(html).toContain('class="custom"')
+    expect(html).toContain('data-v-prompt="true"')
+    expect(html).toContain('data-v-prompt-token="url"')
+    expect(html).toContain('href="https://vocs.dev"')
+    expect(html).toContain('data-v-prompt-token="code"')
+    expect(html).toContain('data-v-prompt-token="label"')
+    expect(html).toContain('data-v-prompt-icon="true"')
+    expect(html).toContain('aria-label="Copy instructions for agent"')
+    expect(html).toContain('aria-expanded="false"')
+    expect(html).toContain('aria-label="View Prompt"')
+    expect(html).toContain('https://chatgpt.com?hints=search&amp;q=')
+    expect(html).toContain('https://claude.ai/new?q=')
+  })
+})

package/src/react/Prompt.tsx

@@ -0,0 +1,47 @@
+import { PromptFrame } from './internal/Prompt.client.js'
+import * as PromptTokens from './internal/prompt.js'
+
+export function Prompt(props: Prompt.Props) {
+  const { className, value } = props
+  const tokens = PromptTokens.tokenize(value)
+
+  return (
+    <PromptFrame className={className} value={value}>
+      {tokens.map((token, index) => {
+        const key = `${token.type}-${index.toString()}`
+        if (token.type === 'url')
+          return (
+            <a
+              data-v-prompt-token={token.type}
+              href={token.value}
+              key={key}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              {token.value}
+            </a>
+          )
+        if (token.type === 'code')
+          return (
+            <span data-v-prompt-token={token.type} key={key}>
+              <span data-v-prompt-delimiter>`</span>
+              {token.value.slice(1, -1)}
+              <span data-v-prompt-delimiter>`</span>
+            </span>
+          )
+        return (
+          <span data-v-prompt-token={token.type} key={key}>
+            {token.value}
+          </span>
+        )
+      })}
+    </PromptFrame>
+  )
+}
+
+export declare namespace Prompt {
+  type Props = {
+    className?: string | undefined
+    value: string
+  }
+}

package/src/react/internal/Prompt.client.test.tsx

@@ -0,0 +1,115 @@
+/** @vitest-environment jsdom */
+
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { PromptFrame } from './Prompt.client.js'
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  container = document.createElement('div')
+  document.body.append(container)
+  root = createRoot(container)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  container.remove()
+  vi.restoreAllMocks()
+})
+
+describe('PromptFrame', () => {
+  it('starts collapsed and toggles prompt visibility without copying', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    setClipboard({ writeText })
+    await render('Prompt')
+
+    const content = container.querySelector<HTMLElement>('[data-v-prompt-content]')
+    const toggle = container.querySelector<HTMLButtonElement>('[data-v-prompt-toggle]')
+    expect(content?.hidden).toBe(true)
+    expect(toggle?.getAttribute('aria-expanded')).toBe('false')
+    expect(toggle?.getAttribute('aria-label')).toBe('View Prompt')
+    expect(container.querySelectorAll('[data-v-prompt-action]')).toHaveLength(3)
+
+    await act(async () => toggle?.click())
+
+    expect(content?.hidden).toBe(false)
+    expect(toggle?.getAttribute('aria-expanded')).toBe('true')
+    expect(toggle?.getAttribute('aria-label')).toBe('Hide Prompt')
+    expect(writeText).not.toHaveBeenCalled()
+
+    await act(async () => toggle?.click())
+
+    expect(content?.hidden).toBe(true)
+    expect(toggle?.getAttribute('aria-label')).toBe('View Prompt')
+  })
+
+  it('copies the exact prompt from the primary action and expanded body', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    setClipboard({ writeText })
+    await render('First line\n\nSecond line')
+
+    await act(async () =>
+      container.querySelector<HTMLButtonElement>('[data-v-prompt-copy]')?.click(),
+    )
+    await act(async () =>
+      container.querySelector<HTMLButtonElement>('[data-v-prompt-toggle]')?.click(),
+    )
+    await act(async () => container.querySelector('pre')?.click())
+
+    expect(writeText).toHaveBeenNthCalledWith(1, 'First line\n\nSecond line')
+    expect(writeText).toHaveBeenNthCalledWith(2, 'First line\n\nSecond line')
+    expect(container.querySelector('figure')?.getAttribute('data-state')).toBe('copied')
+  })
+
+  it('preserves links and text selection', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    setClipboard({ writeText })
+    await render('Prompt', <a href="#target">Link</a>)
+
+    await act(async () =>
+      container.querySelector<HTMLButtonElement>('[data-v-prompt-toggle]')?.click(),
+    )
+    await act(async () => container.querySelector('a')?.click())
+    vi.spyOn(window, 'getSelection').mockReturnValue({ isCollapsed: false } as Selection)
+    await act(async () => container.querySelector('pre')?.click())
+
+    expect(writeText).not.toHaveBeenCalled()
+  })
+
+  it('reports rejected copies', async () => {
+    setClipboard({ writeText: vi.fn().mockRejectedValue(new Error('denied')) })
+    await render('Prompt')
+
+    await act(async () =>
+      container.querySelector<HTMLButtonElement>('[data-v-prompt-copy]')?.click(),
+    )
+
+    expect(container.querySelector('[data-v-prompt-copy]')?.getAttribute('data-state')).toBe(
+      'error',
+    )
+  })
+
+  it('reports unavailable clipboard access', async () => {
+    setClipboard(undefined)
+    await render('Prompt')
+
+    await act(async () =>
+      container.querySelector<HTMLButtonElement>('[data-v-prompt-copy]')?.click(),
+    )
+
+    expect(container.querySelector('[data-v-prompt-copy]')?.getAttribute('data-state')).toBe(
+      'error',
+    )
+  })
+})
+
+async function render(value: string, children: React.ReactNode = value) {
+  await act(async () => root.render(<PromptFrame value={value}>{children}</PromptFrame>))
+}
+
+function setClipboard(clipboard: Pick<Clipboard, 'writeText'> | undefined) {
+  Object.defineProperty(navigator, 'clipboard', { configurable: true, value: clipboard })
+}