upcontent 0.0.0-stage → 0.1.0

package/src/lib/sidebar.test.ts

@@ -0,0 +1,142 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+vi.mock('node:fs', () => ({
+  readdirSync: vi.fn(),
+  statSync: vi.fn(),
+  existsSync: vi.fn(),
+  readFileSync: vi.fn(),
+}))
+
+import * as fs from 'node:fs'
+import { buildSidebar } from './sidebar'
+import { _resetPortalConfigCache } from './portal-config'
+
+interface Tree {
+  [name: string]: Tree | null
+}
+
+// Monta um FS falso em memória: null = arquivo, objeto = diretório.
+function mountFs(root: string, tree: Tree) {
+  function lookup(path: string): Tree | null | undefined {
+    if (path === root) return tree
+    const rel = path.slice(root.length + 1)
+    let node: Tree | null = tree
+    for (const part of rel.split('/')) {
+      if (node === null || typeof node !== 'object') return undefined
+      const next: Tree | null | undefined = node[part]
+      if (next === undefined) return undefined
+      node = next
+    }
+    return node
+  }
+
+  vi.mocked(fs.readdirSync).mockImplementation((path: unknown) => {
+    const node = lookup(String(path))
+    if (!node || typeof node !== 'object') return [] as never
+    return Object.keys(node) as never
+  })
+
+  vi.mocked(fs.statSync).mockImplementation((path: unknown) => {
+    const node = lookup(String(path))
+    return { isDirectory: () => node !== null && typeof node === 'object' } as never
+  })
+}
+
+const ROOT = '/content'
+
+beforeEach(() => {
+  _resetPortalConfigCache()
+  vi.mocked(fs.existsSync).mockReturnValue(false)
+})
+
+describe('buildSidebar', () => {
+  it('achata domains/ e shared/ um nível, promovendo os filhos pro topo', () => {
+    mountFs(ROOT, {
+      domains: { historico: { 'prd.md': null }, licencas: { 'issues.md': null } },
+      shared: { docs: { 'guide.md': null } },
+    })
+    const sidebar = buildSidebar(ROOT) as { label: string }[]
+    expect(sidebar.map(e => e.label)).toEqual(['Docs', 'Historico', 'Licencas'])
+  })
+
+  it('aplica Title Case em todo nível, não só no topo', () => {
+    mountFs(ROOT, { domains: { licencas: { 'consistencia-licencas': { 'plan.md': null } } } })
+    const sidebar = buildSidebar(ROOT) as { label: string; items: { label: string }[] }[]
+    expect(sidebar[0].label).toBe('Licencas')
+    expect(sidebar[0].items[0].label).toBe('Consistencia Licencas')
+  })
+
+  it('gera slug em minúsculo sem extensão pra arquivos', () => {
+    mountFs(ROOT, { domains: { historico: { 'PRD.md': null } } })
+    const sidebar = buildSidebar(ROOT) as { label: string; items: { slug: string }[] }[]
+    expect(sidebar[0].items[0]).toEqual({ slug: 'domains/historico/prd' })
+  })
+
+  it('usa o slug da pasta para páginas index', () => {
+    mountFs(ROOT, { customization: { 'index.md': null, 'config-json.md': null } })
+    const sidebar = buildSidebar(ROOT) as { label: string; items: { slug: string }[] }[]
+
+    expect(sidebar[0].items.map(item => item.slug)).toEqual(['customization', 'customization/config-json'])
+  })
+
+  it('limita a navegação às raízes configuradas pelo consumer repo', () => {
+    vi.mocked(fs.existsSync).mockReturnValue(true)
+    vi.mocked(fs.readFileSync).mockReturnValue(JSON.stringify({ navigation: { roots: ['docs'] } }))
+    mountFs(ROOT, { docs: { guide: { 'index.md': null } }, internal: { 'notes.md': null } })
+
+    const sidebar = buildSidebar(ROOT) as { label: string }[]
+
+    expect(sidebar.map(entry => entry.label)).toEqual(['Docs'])
+  })
+
+  it('ignora dotfiles e dot-directories', () => {
+    mountFs(ROOT, { '.claude': { 'x.md': null }, domains: { historico: { 'a.md': null } } })
+    const sidebar = buildSidebar(ROOT) as { label: string }[]
+    expect(sidebar).toEqual([{ label: 'Historico', items: [{ slug: 'domains/historico/a' }] }])
+  })
+
+  it('ignora arquivos bloqueados (floor hardcoded)', () => {
+    mountFs(ROOT, { 'CLAUDE.md': null, 'README.md': null })
+    const sidebar = buildSidebar(ROOT)
+    expect(sidebar).toEqual([{ slug: 'readme', label: 'Home' }])
+  })
+
+  it('fixa o README em primeiro, relabelado como Home, na frente de tudo', () => {
+    mountFs(ROOT, { 'README.md': null, domains: { historico: { 'a.md': null } } })
+    const sidebar = buildSidebar(ROOT) as { label: string }[]
+    expect(sidebar[0]).toEqual({ slug: 'readme', label: 'Home' })
+    expect(sidebar[1].label).toBe('Historico')
+  })
+
+  it('aplica labelOverrides do .upcontent/config.json em cima do Title Case', () => {
+    vi.mocked(fs.existsSync).mockReturnValue(true)
+    vi.mocked(fs.readFileSync).mockReturnValue(
+      JSON.stringify({ navigation: { labelOverrides: { historico: 'Histórico' } } }),
+    )
+    mountFs(ROOT, { domains: { historico: { 'a.md': null }, licencas: { 'b.md': null } } })
+    const sidebar = buildSidebar(ROOT) as { label: string }[]
+    expect(sidebar.map(e => e.label)).toEqual(['Histórico', 'Licencas'])
+  })
+
+  it('não inclui diretório que fica vazio após filtragem', () => {
+    mountFs(ROOT, { domains: { historico: {} } })
+    expect(buildSidebar(ROOT)).toEqual([])
+  })
+
+  it('retorna [] quando o content root não existe', () => {
+    vi.mocked(fs.readdirSync).mockImplementation(() => {
+      throw new Error('ENOENT')
+    })
+    expect(buildSidebar('/nao-existe')).toEqual([])
+  })
+
+  it('respeita blocklist configurável via .upcontent/config.json', () => {
+    vi.mocked(fs.existsSync).mockReturnValue(true)
+    vi.mocked(fs.readFileSync).mockReturnValue(
+      JSON.stringify({ navigation: { blocklist: { prefixes: ['docs/'] } } }),
+    )
+    mountFs(ROOT, { docs: { 'x.md': null }, domains: { historico: { 'a.md': null } } })
+    const sidebar = buildSidebar(ROOT) as { label: string }[]
+    expect(sidebar.map(e => e.label)).toEqual(['Historico'])
+  })
+})

package/src/lib/sidebar.ts

@@ -0,0 +1,113 @@
+import { readdirSync, statSync } from 'node:fs'
+import { isBlocked, resolveLabel } from './content-blocklist'
+import { getPortalConfig } from './portal-config'
+
+// Diretórios de topo que existem só como agrupamento estrutural do
+// repositório de conteúdo, sem valor de navegação — seus filhos diretos
+// são promovidos pra sidebar de topo em vez de aparecerem aninhados um
+// nível a mais (ex: "domains/historico" vira grupo "Historico" direto,
+// não "domains" > "historico").
+const FLATTEN_TOP_LEVEL_DIRS = new Set(['domains', 'shared'])
+
+interface SidebarGroup {
+  label: string
+  items: SidebarEntry[]
+}
+
+interface SidebarLink {
+  slug: string
+  label?: string
+}
+
+type SidebarEntry = SidebarGroup | SidebarLink
+
+function isSidebarGroup(entry: SidebarEntry): entry is SidebarGroup {
+  return 'items' in entry
+}
+
+function labelOf(entry: SidebarEntry): string {
+  return isSidebarGroup(entry) ? entry.label : entry.slug
+}
+
+function sortEntries(entries: SidebarEntry[]): SidebarEntry[] {
+  return [...entries].sort((a, b) => labelOf(a).localeCompare(labelOf(b), 'pt-BR'))
+}
+
+function toSidebarSlug(relativePath: string): string {
+  const slug = relativePath.replace(/\.mdx?$/i, '').toLowerCase()
+  return slug.endsWith('/index') ? slug.slice(0, -'/index'.length) : slug
+}
+
+// Lista uma pasta ignorando dotfiles/dot-dirs e caminhos bloqueados
+// (ver content-blocklist.ts) — relPath é relativo à raiz do content, sem
+// barra inicial (ex: "domains/historico").
+function listVisible(absDir: string, relPath: string): { name: string; isDir: boolean }[] {
+  return readdirSync(absDir)
+    .filter(name => !name.startsWith('.'))
+    .map(name => {
+      const abs = `${absDir}/${name}`
+      const isDir = statSync(abs).isDirectory()
+      const rel = relPath ? `${relPath}/${name}` : name
+      return { name, isDir, rel }
+    })
+    .filter(({ isDir, rel }) => !isBlocked(isDir ? `${rel}/` : rel))
+    .map(({ name, isDir }) => ({ name, isDir }))
+}
+
+// Constrói recursivamente o grupo de sidebar de um diretório — cada nível
+// (não só o de topo) recebe label em Title Case, porque o autogenerate
+// nativo do Starlight usa o nome literal da pasta em todo nível abaixo do
+// primeiro e não expõe nenhum jeito de sobrescrever isso via config.
+function buildDir(absDir: string, relPath: string): SidebarEntry[] {
+  const entries: SidebarEntry[] = []
+  for (const { name, isDir } of listVisible(absDir, relPath)) {
+    const rel = relPath ? `${relPath}/${name}` : name
+    if (isDir) {
+      const items = buildDir(`${absDir}/${name}`, rel)
+      if (items.length > 0) entries.push({ label: resolveLabel(name), items })
+    } else if (/\.mdx?$/i.test(name)) {
+      // Slug do Starlight = path relativo ao content root, sem extensão,
+      // minúsculo (ver ADR/nota em Footer.astro — mesmo mecanismo).
+      entries.push({ slug: toSidebarSlug(rel) })
+    }
+  }
+  return sortEntries(entries)
+}
+
+// Ponto de entrada: monta a sidebar completa a partir da raiz do content,
+// achatando FLATTEN_TOP_LEVEL_DIRS um nível. docsRoot deve ser um path
+// absoluto sem barra final; retorna [] se não existir (ex: astro check
+// rodando sem o symlink de conteúdo criado).
+export function buildSidebar(docsRoot: string): SidebarEntry[] {
+  let topLevel: { name: string; isDir: boolean }[]
+  try {
+    topLevel = listVisible(docsRoot, '')
+  } catch {
+    return []
+  }
+
+  const configuredRoots = getPortalConfig().navigation?.roots
+  const visibleTopLevel = configuredRoots
+    ? topLevel.filter(({ name }) => configuredRoots.includes(name))
+    : topLevel
+
+  const entries: SidebarEntry[] = []
+  for (const { name, isDir } of visibleTopLevel) {
+    if (isDir && FLATTEN_TOP_LEVEL_DIRS.has(name)) {
+      entries.push(...buildDir(`${docsRoot}/${name}`, name))
+    } else if (isDir) {
+      const items = buildDir(`${docsRoot}/${name}`, name)
+      if (items.length > 0) entries.push({ label: resolveLabel(name), items })
+    } else if (/\.mdx?$/i.test(name)) {
+      entries.push({ slug: toSidebarSlug(name) })
+    }
+  }
+
+  // README fica fixo em primeiro, relabelado como "Home" — é a landing
+  // page do portal, não deveria competir alfabeticamente nem aparecer com
+  // o nome literal do arquivo.
+  const readmeIndex = entries.findIndex(e => !isSidebarGroup(e) && e.slug === 'readme')
+  const readme = readmeIndex >= 0 ? entries.splice(readmeIndex, 1)[0] : undefined
+  const sorted = sortEntries(entries)
+  return readme ? [{ slug: 'readme', label: 'Home' }, ...sorted] : sorted
+}

package/src/lib/structured-data-tree.test.ts

@@ -0,0 +1,75 @@
+import { describe, it, expect } from 'vitest'
+import { renderCsvTable, renderStructuredDataTree } from './structured-data-tree'
+
+describe('renderStructuredDataTree', () => {
+  it('renderiza objeto simples como details com entradas', () => {
+    const html = renderStructuredDataTree({ name: 'Ana', age: 30 })
+    expect(html).toContain('<details class="sdp-node" open>')
+    expect(html).toContain('{ name, age }')
+    expect(html).toContain('class="sdp-copy"')
+    expect(html).toContain('Copy')
+    expect(html).toContain('<span class="sdp-key">name</span>')
+    expect(html).toContain('<span class="sdp-string">"Ana"</span>')
+    expect(html).toContain('<span class="sdp-number">30</span>')
+  })
+
+  it('renderiza array com itens indexados', () => {
+    const html = renderStructuredDataTree(['a', 'b'])
+    expect(html).toContain('[ 2 items ]')
+    expect(html).toContain('<span class="sdp-key">0</span>')
+    expect(html).toContain('<span class="sdp-key">1</span>')
+  })
+
+  it('objeto/array aninhado gera details aninhado', () => {
+    const html = renderStructuredDataTree({ user: { name: 'Ana' } })
+    const detailsCount = (html.match(/<details/g) ?? []).length
+    expect(detailsCount).toBe(2)
+    expect(html).toContain('<details class="sdp-node" open><summary>{ user }</summary>')
+    expect(html).toContain('<details class="sdp-node"><summary>{ name }</summary>')
+  })
+
+  it('valores null e boolean renderizam corretamente', () => {
+    const html = renderStructuredDataTree({ active: true, deleted: false, parent: null })
+    expect(html).toContain('<span class="sdp-boolean">true</span>')
+    expect(html).toContain('<span class="sdp-boolean">false</span>')
+    expect(html).toContain('<span class="sdp-null">null</span>')
+  })
+
+  it('escapa HTML em strings pra evitar quebra de markup', () => {
+    const html = renderStructuredDataTree({ label: '<script>alert(1)</script>' })
+    expect(html).not.toContain('<script>alert(1)</script>')
+    expect(html).toContain('&lt;script&gt;')
+  })
+
+  it('valor folha único (não objeto/array) renderiza sem details', () => {
+    const html = renderStructuredDataTree(42)
+    expect(html).not.toContain('<details')
+    expect(html).toContain('<span class="sdp-number">42</span>')
+  })
+
+  it('objeto vazio renderiza details sem entradas', () => {
+    const html = renderStructuredDataTree({})
+    expect(html).toContain('{}')
+  })
+
+  it('botão de cópia preserva a fonte original', () => {
+    const source = '{\n  "name": "Ana"\n}'
+    const html = renderStructuredDataTree({ name: 'Ana' }, source)
+    expect(html).toContain(`data-sdp-copy="${encodeURIComponent(source)}"`)
+  })
+})
+
+describe('renderCsvTable', () => {
+  it('renderiza cabeçalho como thead e demais linhas como tbody', () => {
+    const html = renderCsvTable([['nome', 'idade'], ['Ana', '30']])
+    expect(html).toContain('<table class="sdp-csv-table">')
+    expect(html).toContain('<thead><tr><th>nome</th><th>idade</th></tr></thead>')
+    expect(html).toContain('<tbody><tr><td>Ana</td><td>30</td></tr></tbody>')
+  })
+
+  it('escapa HTML nas células pra evitar quebra de markup', () => {
+    const html = renderCsvTable([['label'], ['<script>alert(1)</script>']])
+    expect(html).not.toContain('<script>alert(1)</script>')
+    expect(html).toContain('&lt;script&gt;')
+  })
+})

package/src/lib/structured-data-tree.ts

@@ -0,0 +1,55 @@
+export function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+function renderLeaf(value: string | number | boolean | null): string {
+  if (value === null) return '<span class="sdp-null">null</span>'
+  if (typeof value === 'string') return `<span class="sdp-string">"${escapeHtml(value)}"</span>`
+  if (typeof value === 'boolean') return `<span class="sdp-boolean">${value}</span>`
+  return `<span class="sdp-number">${value}</span>`
+}
+
+function renderEntry(key: string, value: unknown): string {
+  return `<div class="sdp-entry"><span class="sdp-key">${escapeHtml(key)}</span><span class="sdp-colon">:</span> ${renderNode(value, false)}</div>`
+}
+
+// Recursivo: o nó raiz fica aberto para dar contexto imediato; objetos e arrays
+// aninhados começam fechados para manter documentos grandes escaneáveis.
+export function renderNode(value: unknown, open = true): string {
+  if (value === null || typeof value !== 'object') {
+    return renderLeaf(value as string | number | boolean | null)
+  }
+
+  if (Array.isArray(value)) {
+    const summary = value.length === 0 ? '[]' : `[ ${value.length} ${value.length === 1 ? 'item' : 'items'} ]`
+    const children = value.map((item, index) => renderEntry(String(index), item)).join('')
+    return `<details class="sdp-node"${open ? ' open' : ''}><summary>${summary}</summary><div class="sdp-children">${children}</div></details>`
+  }
+
+  const entries = Object.entries(value as Record<string, unknown>)
+  const summary = entries.length === 0
+    ? '{}'
+    : `{ ${entries.map(([key]) => escapeHtml(key)).join(', ')} }`
+  const children = entries.map(([key, val]) => renderEntry(key, val)).join('')
+  return `<details class="sdp-node"${open ? ' open' : ''}><summary>${summary}</summary><div class="sdp-children">${children}</div></details>`
+}
+
+export function renderStructuredDataTree(value: unknown, source = JSON.stringify(value, null, 2) ?? ''): string {
+  const encodedSource = encodeURIComponent(source)
+  return `<div class="sdp-root"><div class="sdp-toolbar"><button class="sdp-copy" type="button" aria-label="Copy structured data" data-sdp-copy="${encodedSource}"><span class="sdp-copy-label" aria-live="polite">Copy</span></button></div>${renderNode(value)}</div>`
+}
+
+// Tabela HTML semântica pra blocos ```csv — reaproveita o mesmo escapeHtml
+// da árvore JSON/YAML, mas a saída é <table>, não <details>.
+export function renderCsvTable(rows: string[][]): string {
+  const [header, ...body] = rows
+  const theadRow = `<tr>${header.map(cell => `<th>${escapeHtml(cell)}</th>`).join('')}</tr>`
+  const tbodyRows = body
+    .map(row => `<tr>${row.map(cell => `<td>${escapeHtml(cell)}</td>`).join('')}</tr>`)
+    .join('')
+  return `<table class="sdp-csv-table"><thead>${theadRow}</thead><tbody>${tbodyRows}</tbody></table>`
+}

package/src/overrides/Footer.astro

@@ -0,0 +1,114 @@
+---
+// Override do Footer.astro do Starlight (registrado via starlight({ components })
+// no astro.config.mjs) — reintroduz os links "Ver/Editar no GitHub" e a seção
+// "Documentos relacionados" que existiam no DocLayout.astro custom antes da
+// migração pro Starlight (ticket 02), agora via mecanismo de component override.
+import Default from '@astrojs/starlight/components/Footer.astro'
+import { getCollection } from 'astro:content'
+import { toRelativeDocPath } from '../content.config'
+import { buildGitHubUrl, resolveRelated } from '../lib/doc-links'
+import { getPortalConfig } from '../lib/portal-config'
+
+const { entry } = Astro.locals.starlightRoute
+
+// entry.id é o slug de rota do Starlight (sem extensão) — buildGitHubUrl e o
+// matching de resolveRelated precisam do path de arquivo real (com .md) pra
+// apontar pro repositório de conteúdo corretamente.
+const filePath = entry.filePath ? toRelativeDocPath(entry.filePath) : entry.id
+
+const repoUrl = (import.meta.env.REPO_URL as string | undefined) || getPortalConfig().repo?.url
+const viewUrl = buildGitHubUrl(repoUrl, filePath, 'view')
+const editUrl = buildGitHubUrl(repoUrl, filePath, 'edit')
+
+const related = entry.data.related?.length
+  ? resolveRelated(
+      entry.data.related,
+      (await getCollection('docs')).map(doc => ({
+        ...doc,
+        id: doc.filePath ? toRelativeDocPath(doc.filePath) : doc.id,
+      })),
+    )
+  : []
+---
+
+<Default><slot /></Default>
+
+{
+  (viewUrl || editUrl) && (
+    <div class="doc-actions">
+      {viewUrl && (
+        <a href={viewUrl} target="_blank" rel="noopener noreferrer" class="doc-action-link">
+          View on GitHub
+        </a>
+      )}
+      {editUrl && (
+        <a href={editUrl} target="_blank" rel="noopener noreferrer" class="doc-action-link">
+          Edit on GitHub
+        </a>
+      )}
+    </div>
+  )
+}
+
+{
+  related.length > 0 && (
+    <section class="related-docs">
+       <h2>Related documents</h2>
+      <ul>
+        {related.map(doc => (
+          <li><a href={`/${doc.slug}`}>{doc.title}</a></li>
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+<style>
+  @layer starlight.components {
+    .doc-actions {
+      display: flex;
+      gap: 0.5rem;
+      margin-top: 1.5rem;
+    }
+    .doc-action-link {
+      font-size: var(--sl-text-xs);
+      color: var(--sl-color-gray-3);
+      text-decoration: none;
+      padding: 0.2rem 0.5rem;
+      border: 1px solid var(--sl-color-gray-5);
+      border-radius: 4px;
+    }
+    .doc-action-link:hover {
+      color: var(--sl-color-white);
+      background: var(--sl-color-gray-6);
+    }
+
+    .related-docs {
+      margin-top: 1.5rem;
+      padding-top: 1.5rem;
+      border-top: 1px solid var(--sl-color-gray-5);
+    }
+    .related-docs h2 {
+      font-size: var(--sl-text-sm);
+      font-weight: 600;
+      color: var(--sl-color-gray-3);
+      margin-bottom: 0.75rem;
+    }
+    .related-docs ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    .related-docs li {
+      margin: 0.3rem 0;
+    }
+    .related-docs a {
+      font-size: var(--sl-text-sm);
+      color: var(--sl-color-accent);
+      text-decoration: none;
+    }
+    .related-docs a:hover {
+      text-decoration: underline;
+    }
+  }
+</style>

package/src/overrides/Head.astro

@@ -0,0 +1,20 @@
+---
+// Override do Head.astro do Starlight (registrado via starlight({ components })
+// no astro.config.mjs). A homepage usa o mesmo nome do produto como título da
+// página e do site; remova o título duplicado só nessa rota.
+import MermaidLoader from '../components/MermaidLoader.astro'
+import StructuredDataCopy from '../components/StructuredDataCopy.astro'
+import { getPortalConfig } from '../lib/portal-config'
+import { PRODUCT_NAME } from '../lib/product-identity'
+
+const { head } = Astro.locals.starlightRoute
+const isHome = Astro.locals.starlightRoute.id === 'readme'
+const pageHead = isHome ? head.filter(({ tag }) => tag !== 'title') : head
+const siteTitle = getPortalConfig().site?.title ?? PRODUCT_NAME
+---
+
+{pageHead.map(({ tag: Tag, attrs, content }) => <Tag {...attrs} set:html={content} />)}
+<slot />
+{isHome && <title>{siteTitle}</title>}
+<MermaidLoader />
+<StructuredDataCopy />

package/src/pages/index.astro

@@ -0,0 +1,20 @@
+---
+// Redireciona pro README (raiz do conteúdo) — Starlight não tem homepage
+// própria sem um index.md na collection.
+import { getCollection } from 'astro:content'
+import { PRODUCT_NAME } from '../lib/product-identity'
+
+const all = await getCollection('docs')
+const readme = all.find(e => e.id.toLowerCase() === 'readme')
+---
+
+{readme ? (
+  <meta http-equiv="refresh" content={`0;url=/${readme.id}/`} />
+) : (
+  <html lang="pt-BR">
+    <body>
+      <h1>{PRODUCT_NAME}</h1>
+      <p>Rode <code>make dev</code> para visualizar os documentos.</p>
+    </body>
+  </html>
+)}

package/src/styles/callouts.css

@@ -0,0 +1,29 @@
+.callout {
+  margin: 1rem 0;
+  padding: 0.85rem 1rem;
+  border-inline-start: 0.25rem solid var(--sl-color-accent);
+  border-radius: 0.25rem;
+  background: var(--sl-color-gray-6);
+}
+
+.callout-title {
+  display: flex;
+  gap: 0.4rem;
+  align-items: center;
+  margin-bottom: 0.35rem;
+  color: var(--sl-color-text-accent);
+  font-weight: 650;
+}
+
+.callout > :last-child {
+  margin-bottom: 0;
+}
+
+.callout-warning,
+.callout-caution {
+  border-inline-start-color: var(--sl-color-orange, #d97706);
+}
+
+.callout-danger {
+  border-inline-start-color: var(--sl-color-red, #dc2626);
+}

package/src/styles/structured-data-preview.css

@@ -0,0 +1,95 @@
+/* Tree view estática de blocos ```json/```yaml (ver ADR-0007) — usa os
+   tokens de cor do próprio Starlight, sem depender de tokens.css (não
+   conectado ao tema desde a migração). */
+.sdp-root {
+  font-family: var(--__sl-font-mono, ui-monospace, monospace);
+  font-size: var(--sl-text-sm);
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.5rem;
+  padding: 0.75rem 1rem;
+  background: var(--sl-color-gray-6);
+  overflow-x: auto;
+}
+
+.sdp-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  margin-block-end: 0.5rem;
+}
+
+.sdp-copy {
+  color: var(--sl-color-gray-2);
+  background: transparent;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.25rem;
+  padding: 0.2rem 0.5rem;
+  font: inherit;
+  font-size: var(--sl-text-xs);
+  cursor: pointer;
+}
+
+.sdp-copy:hover,
+.sdp-copy:focus-visible {
+  color: var(--sl-color-white);
+  border-color: var(--sl-color-accent);
+}
+
+.sdp-node {
+  margin: 0;
+}
+.sdp-node > summary {
+  cursor: pointer;
+  color: var(--sl-color-gray-3);
+  user-select: none;
+}
+.sdp-node > summary:hover {
+  color: var(--sl-color-white);
+}
+
+.sdp-children {
+  margin-inline-start: 1.25rem;
+  border-inline-start: 1px solid var(--sl-color-gray-5);
+  padding-inline-start: 0.75rem;
+}
+
+.sdp-entry {
+  white-space: nowrap;
+}
+
+.sdp-key {
+  color: var(--sl-color-accent-high, var(--sl-color-accent));
+}
+.sdp-colon {
+  color: var(--sl-color-gray-3);
+  margin-inline-end: 0.25rem;
+}
+.sdp-string {
+  color: var(--sl-color-green-high);
+}
+.sdp-number {
+  color: var(--sl-color-orange, #e6a13d);
+}
+.sdp-boolean {
+  color: var(--sl-color-purple, #b58cf2);
+}
+.sdp-null {
+  color: var(--sl-color-gray-3);
+  font-style: italic;
+}
+
+.sdp-csv-table {
+  font-size: var(--sl-text-sm);
+  border-collapse: collapse;
+  width: 100%;
+  overflow-x: auto;
+}
+.sdp-csv-table th,
+.sdp-csv-table td {
+  border: 1px solid var(--sl-color-gray-5);
+  padding: 0.4rem 0.75rem;
+  text-align: left;
+}
+.sdp-csv-table th {
+  background: var(--sl-color-gray-6);
+  color: var(--sl-color-gray-2);
+}