@docsector/docsector-reader 0.1.0

package/src/pages/manual/components/d-page-anchor.overview.en-US.md

@@ -0,0 +1,49 @@
+## Overview
+
+`DPageAnchor` renders the **Table of Contents (ToC) tree** in the right-side drawer. It displays a navigable tree of all headings on the current page, allowing users to jump directly to any section.
+
+## How It Works
+
+1. As each heading component (DH1–DH6) mounts, it registers itself in the `page/nodes` store via `useNavigator`
+2. `DPageAnchor` reads the `page/nodes` getter to render the tree
+3. When the user scrolls, the scroll observer in `DPage` updates the selected anchor
+4. Clicking a tree node navigates to the corresponding heading
+
+## Store Integration
+
+DPageAnchor interacts with these store state/getters:
+
+- `page/nodes` — The tree structure of headings
+- `page/nodesExpanded` — Which tree nodes are expanded
+- `page/anchor` — Currently selected heading ID
+- `layout/metaToggle` — Controls drawer visibility
+
+## Tree Rendering
+
+Uses Quasar's `QTree` component with `default-expand-all`. The node key is the heading's numeric `id`, and the label is the heading text.
+
+The root node (from DH1) shows the page title from i18n when no label is set:
+
+```html
+<template v-slot:default-header="props">
+  <b v-if="props.node.label">
+    &#123;&#123; props.node.label &#125;&#125;
+  </b>
+  <b v-else>
+    &#123;&#123; $t('_.' + $store.state.i18n.base + '._') &#125;&#125;
+  </b>
+</template>
+```
+
+## Scroll Synchronization
+
+When the user scrolls the page content, the `DPage` scroll observer calls `useNavigator().scrolling()`, which iterates over registered anchors and selects the one closest to the current scroll position. This keeps the ToC tree in sync with the visible content.
+
+## Lifecycle
+
+- **onMounted** — Enables meta toggle, starts scroll tracking after 1s delay, anchors to URL hash if present
+- **onBeforeUnmount** — Resets anchors, nodes, and disables scroll tracking
+
+## Styling
+
+The tree uses Quasar's default tree styling with custom colors for light/dark modes. Selected nodes get the primary color background. Heading text is displayed in bold at 15px.

package/src/pages/manual/components/d-page-anchor.overview.pt-BR.md

@@ -0,0 +1,49 @@
+## Visão Geral
+
+`DPageAnchor` renderiza a **árvore de Índice (ToC)** no drawer lateral direito. Exibe uma árvore navegável de todos os títulos na página atual, permitindo que os usuários saltem diretamente para qualquer seção.
+
+## Como Funciona
+
+1. Conforme cada componente de título (DH1–DH6) é montado, ele se registra no store `page/nodes` via `useNavigator`
+2. `DPageAnchor` lê o getter `page/nodes` para renderizar a árvore
+3. Quando o usuário faz scroll, o observador de scroll no `DPage` atualiza a âncora selecionada
+4. Clicar em um nó da árvore navega até o título correspondente
+
+## Integração com Store
+
+DPageAnchor interage com estes estados/getters da store:
+
+- `page/nodes` — A estrutura em árvore dos títulos
+- `page/nodesExpanded` — Quais nós da árvore estão expandidos
+- `page/anchor` — ID do título atualmente selecionado
+- `layout/metaToggle` — Controla visibilidade do drawer
+
+## Renderização da Árvore
+
+Usa o componente `QTree` do Quasar com `default-expand-all`. A chave do nó é o `id` numérico do título, e o label é o texto do título.
+
+O nó raiz (do DH1) mostra o título da página do i18n quando nenhum label é definido:
+
+```html
+<template v-slot:default-header="props">
+  <b v-if="props.node.label">
+    &#123;&#123; props.node.label &#125;&#125;
+  </b>
+  <b v-else>
+    &#123;&#123; $t('_.' + $store.state.i18n.base + '._') &#125;&#125;
+  </b>
+</template>
+```
+
+## Sincronização de Scroll
+
+Quando o usuário faz scroll no conteúdo da página, o observador de scroll do `DPage` chama `useNavigator().scrolling()`, que itera sobre as âncoras registradas e seleciona a mais próxima da posição de scroll atual. Isso mantém a árvore de ToC sincronizada com o conteúdo visível.
+
+## Ciclo de Vida
+
+- **onMounted** — Habilita toggle de meta, inicia rastreamento de scroll após 1s de delay, ancora no hash da URL se presente
+- **onBeforeUnmount** — Reseta âncoras, nós e desabilita rastreamento de scroll
+
+## Estilização
+
+A árvore usa a estilização padrão de árvore do Quasar com cores customizadas para modos claro/escuro. Nós selecionados recebem fundo com a cor primária. O texto dos títulos é exibido em negrito a 15px.

package/src/pages/manual/components/d-page-blockquote.overview.en-US.md

@@ -0,0 +1,44 @@
+## Overview
+
+`DPageBlockquote` renders **styled blockquotes** with semantic categorization. It supports three message types: important, warning, and note — each with a distinct visual label.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `message` | `String` | `''` | Type of blockquote: `'important'`, `'warning'`, or `'note'` |
+
+## Slot
+
+The default slot receives the blockquote content.
+
+## Message Types
+
+| Type | Label | Purpose |
+|------|-------|---------|
+| `important` | **Important** | Critical information the reader must know |
+| `warning` | **Warning** | Potential pitfalls or breaking changes |
+| `note` | **Note** | Additional context or tips |
+| (empty) | *(none)* | Generic blockquote with no label |
+
+## Usage
+
+DPageBlockquote is not currently auto-rendered by DPageSection from Markdown blockquotes. To use it, you would include it directly in a custom component:
+
+```html
+<d-page-blockquote message="important">
+  <p>This is critically important information.</p>
+</d-page-blockquote>
+
+<d-page-blockquote message="warning">
+  <p>Be careful with this operation!</p>
+</d-page-blockquote>
+
+<d-page-blockquote message="note">
+  <p>This is an optional tip for advanced users.</p>
+</d-page-blockquote>
+```
+
+## Styling
+
+The component renders a standard `<blockquote>` element. The `<strong>` label is conditionally shown based on the `message` prop. Customize the appearance in your global `app.sass` or by targeting `blockquote` in your CSS.

package/src/pages/manual/components/d-page-blockquote.overview.pt-BR.md

@@ -0,0 +1,44 @@
+## Visão Geral
+
+`DPageBlockquote` renderiza **blockquotes estilizados** com categorização semântica. Suporta três tipos de mensagem: important, warning e note — cada um com um label visual distinto.
+
+## Props
+
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| `message` | `String` | `''` | Tipo de blockquote: `'important'`, `'warning'` ou `'note'` |
+
+## Slot
+
+O slot padrão recebe o conteúdo do blockquote.
+
+## Tipos de Mensagem
+
+| Tipo | Label | Propósito |
+|------|-------|-----------|
+| `important` | **Important** | Informação crítica que o leitor precisa saber |
+| `warning` | **Warning** | Armadilhas potenciais ou breaking changes |
+| `note` | **Note** | Contexto adicional ou dicas |
+| (vazio) | *(nenhum)* | Blockquote genérico sem label |
+
+## Uso
+
+DPageBlockquote não é atualmente auto-renderizado pelo DPageSection a partir de blockquotes Markdown. Para usá-lo, inclua-o diretamente em um componente customizado:
+
+```html
+<d-page-blockquote message="important">
+  <p>Esta é uma informação criticamente importante.</p>
+</d-page-blockquote>
+
+<d-page-blockquote message="warning">
+  <p>Tenha cuidado com esta operação!</p>
+</d-page-blockquote>
+
+<d-page-blockquote message="note">
+  <p>Esta é uma dica opcional para usuários avançados.</p>
+</d-page-blockquote>
+```
+
+## Estilização
+
+O componente renderiza um elemento `<blockquote>` padrão. O label `<strong>` é exibido condicionalmente baseado na prop `message`. Customize a aparência no seu `app.sass` global ou direcionando `blockquote` no seu CSS.

package/src/pages/manual/components/d-page-blockquote.showcase.en-US.md

@@ -0,0 +1,27 @@
+## Showcase
+
+Here are the three blockquote types rendered:
+
+## Important
+
+Used for critical information:
+
+> **Important**: This setting cannot be reverted once applied. Make sure you have a backup before proceeding.
+
+## Warning
+
+Used for potential issues:
+
+> **Warning**: This API is deprecated and will be removed in the next major version. Migrate to the new endpoint as soon as possible.
+
+## Note
+
+Used for tips and additional context:
+
+> **Note**: You can override the default configuration by creating a `docsector.config.js` file in your project root. This is optional — sensible defaults are provided.
+
+## Generic
+
+A blockquote without a message type:
+
+> This is a standard blockquote with no special label or styling. It renders as a plain HTML blockquote element.

package/src/pages/manual/components/d-page-blockquote.showcase.pt-BR.md

@@ -0,0 +1,27 @@
+## Demonstração
+
+Aqui estão os três tipos de blockquote renderizados:
+
+## Important
+
+Usado para informações críticas:
+
+> **Important**: Esta configuração não pode ser revertida uma vez aplicada. Certifique-se de ter um backup antes de prosseguir.
+
+## Warning
+
+Usado para problemas potenciais:
+
+> **Warning**: Esta API está depreciada e será removida na próxima versão major. Migre para o novo endpoint o mais rápido possível.
+
+## Note
+
+Usado para dicas e contexto adicional:
+
+> **Note**: Você pode sobrescrever a configuração padrão criando um arquivo `docsector.config.js` na raiz do seu projeto. Isso é opcional — valores padrão sensatos são fornecidos.
+
+## Genérico
+
+Um blockquote sem tipo de mensagem:
+
+> Este é um blockquote padrão sem label ou estilização especial. Ele renderiza como um elemento blockquote HTML simples.

package/src/pages/manual/components/d-page-meta.overview.en-US.md

@@ -0,0 +1,51 @@
+## Overview
+
+`DPageMeta` is the **page footer** component that displays GitHub integration, translation progress, and prev/next navigation links.
+
+## Sections
+
+### Edit on GitHub
+
+A button that links to the Markdown source file on GitHub. The URL is composed of:
+
+- `docsector.config.js` → `github.editBaseUrl`
+- Current route path (transformed to match the file naming convention)
+- Current locale
+
+The button label changes based on page status:
+
+| Status | Label | Color |
+|--------|-------|-------|
+| `done` | "Edit this page" | White |
+| `draft` | "Complete this page" | Warning (orange) |
+| `empty` | "Start this page" | Red |
+
+### Translation Progress
+
+Two chips are displayed:
+
+- **Language progress** — Shows the translation completion percentage for the current locale based on `_sections.done / _sections.count` metadata
+- **Available translations** — Shows how many locales have translations compared to total available locales
+
+### Previous/Next Navigation
+
+Links to the previous and next pages in the route sequence. The page title is loaded from i18n. Links are only shown when adjacent pages exist.
+
+## Store Integration
+
+- `page/base` — Current page for finding prev/next routes
+- `i18n/absolute` — Path for loading translation metadata
+
+## Configuration
+
+The "Edit on GitHub" URL is built from `docsector.config.js`:
+
+```javascript
+github: {
+  editBaseUrl: 'https://github.com/org/docs/edit/main/src/pages'
+}
+```
+
+## Disabling
+
+DPageMeta is automatically excluded when `DPage` has `disableNav` prop set to `true`.

package/src/pages/manual/components/d-page-meta.overview.pt-BR.md

@@ -0,0 +1,51 @@
+## Visão Geral
+
+`DPageMeta` é o componente de **rodapé de página** que exibe integração com GitHub, progresso de tradução e links de navegação anterior/próximo.
+
+## Seções
+
+### Editar no GitHub
+
+Um botão que linka para o arquivo fonte Markdown no GitHub. A URL é composta de:
+
+- `docsector.config.js` → `github.editBaseUrl`
+- Caminho da rota atual (transformado para corresponder à convenção de nomes de arquivo)
+- Locale atual
+
+O label do botão muda baseado no status da página:
+
+| Status | Label | Cor |
+|--------|-------|-----|
+| `done` | "Edite esta página" | Branco |
+| `draft` | "Complete esta página" | Warning (laranja) |
+| `empty` | "Comece esta página" | Vermelho |
+
+### Progresso de Tradução
+
+Dois chips são exibidos:
+
+- **Progresso do idioma** — Mostra a porcentagem de conclusão da tradução para o locale atual baseado no metadata `_sections.done / _sections.count`
+- **Traduções disponíveis** — Mostra quantos locales têm traduções comparado ao total de locales disponíveis
+
+### Navegação Anterior/Próximo
+
+Links para as páginas anterior e próxima na sequência de rotas. O título da página é carregado do i18n. Links são mostrados apenas quando páginas adjacentes existem.
+
+## Integração com Store
+
+- `page/base` — Página atual para encontrar rotas prev/next
+- `i18n/absolute` — Caminho para carregar metadata de tradução
+
+## Configuração
+
+A URL "Editar no GitHub" é construída a partir do `docsector.config.js`:
+
+```javascript
+github: {
+  editBaseUrl: 'https://github.com/org/docs/edit/main/src/pages'
+}
+```
+
+## Desabilitando
+
+DPageMeta é automaticamente excluído quando `DPage` tem a prop `disableNav` definida como `true`.

package/src/pages/manual/components/d-page-section.overview.en-US.md

@@ -0,0 +1,55 @@
+## Overview
+
+`DPageSection` is the **Markdown rendering engine** at the heart of Docsector Reader. It tokenizes Markdown source from the current i18n path and renders each token as the appropriate Vue component.
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `id` | `Number` | Yes | Base ID used for anchor generation |
+
+## How It Works
+
+1. Reads the Markdown source from the i18n store path `_.{absolute}.source`
+2. Parses it with **markdown-it** + **markdown-it-attrs**
+3. Tokenizes the parsed AST into a flat array of renderable tokens
+4. Each token is rendered as the corresponding Docsector component
+
+## Token Types and Rendering
+
+| Markdown | Token Tag | Component |
+|----------|-----------|-----------|
+| `## Heading 2` | `h2` | `DH2` |
+| `### Heading 3` | `h3` | `DH3` |
+| `#### Heading 4` | `h4` | `DH4` |
+| `##### Heading 5` | `h5` | `DH5` |
+| `###### Heading 6` | `h6` | `DH6` |
+| Paragraph text | `p` | `<p v-html>` |
+| Unordered list | `ul` | `<ul v-html>` |
+| Ordered list | `ol` | `<ol v-html>` |
+| Table | `table` | `<table v-html>` |
+| Fenced code block | `code` | `DPageSourceCode` |
+
+## Nesting Support
+
+DPageSection handles one level of nesting for:
+
+- Bullet lists (`ul > li`)
+- Ordered lists (`ol > li`)
+- Tables (`table > thead/tbody > tr > th/td`)
+
+Nested content is accumulated into a single HTML string and rendered with `v-html`.
+
+## Custom Attributes
+
+The `markdown-it-attrs` plugin uses `:` and `;` as delimiters. Currently, only the `filename` attribute is used:
+
+```
+:filename="server.php";
+```
+
+This attribute is extracted from fenced code blocks and passed to `DPageSourceCode` for display.
+
+## Anchor IDs
+
+Each heading token receives an anchor ID calculated as `id + token.map[0]`, where `token.map[0]` is the source line number. This creates unique, deterministic anchors for the ToC tree.

package/src/pages/manual/components/d-page-section.overview.pt-BR.md

@@ -0,0 +1,55 @@
+## Visão Geral
+
+`DPageSection` é o **motor de renderização Markdown** no coração do Docsector Reader. Ele tokeniza o source Markdown a partir do caminho i18n atual e renderiza cada token como o componente Vue apropriado.
+
+## Props
+
+| Prop | Tipo | Obrigatório | Descrição |
+|------|------|-------------|-----------|
+| `id` | `Number` | Sim | ID base usado para geração de âncoras |
+
+## Como Funciona
+
+1. Lê o source Markdown do caminho da store i18n `_.{absolute}.source`
+2. Faz o parse com **markdown-it** + **markdown-it-attrs**
+3. Tokeniza o AST parseado em um array flat de tokens renderizáveis
+4. Cada token é renderizado como o componente Docsector correspondente
+
+## Tipos de Token e Renderização
+
+| Markdown | Tag do Token | Componente |
+|----------|-------------|-----------|
+| `## Título 2` | `h2` | `DH2` |
+| `### Título 3` | `h3` | `DH3` |
+| `#### Título 4` | `h4` | `DH4` |
+| `##### Título 5` | `h5` | `DH5` |
+| `###### Título 6` | `h6` | `DH6` |
+| Texto de parágrafo | `p` | `<p v-html>` |
+| Lista não ordenada | `ul` | `<ul v-html>` |
+| Lista ordenada | `ol` | `<ol v-html>` |
+| Tabela | `table` | `<table v-html>` |
+| Bloco de código cercado | `code` | `DPageSourceCode` |
+
+## Suporte a Aninhamento
+
+DPageSection lida com um nível de aninhamento para:
+
+- Listas com marcadores (`ul > li`)
+- Listas ordenadas (`ol > li`)
+- Tabelas (`table > thead/tbody > tr > th/td`)
+
+Conteúdo aninhado é acumulado em uma única string HTML e renderizado com `v-html`.
+
+## Atributos Customizados
+
+O plugin `markdown-it-attrs` usa `:` e `;` como delimitadores. Atualmente, apenas o atributo `filename` é utilizado:
+
+```
+:filename="servidor.php";
+```
+
+Este atributo é extraído de blocos de código cercados e passado ao `DPageSourceCode` para exibição.
+
+## IDs de Âncora
+
+Cada token de título recebe um ID de âncora calculado como `id + token.map[0]`, onde `token.map[0]` é o número da linha no source. Isso cria âncoras únicas e determinísticas para a árvore de ToC.

package/src/pages/manual/components/d-page-section.showcase.en-US.md

@@ -0,0 +1,43 @@
+## Showcase
+
+Here is the Markdown source that renders the content you see on the Overview tab:
+
+```
+## My Section Title
+
+Paragraph text with **bold** and *italic*.
+
+- Item one
+- Item two
+- Item three
+
+| Column A | Column B |
+|----------|----------|
+| Cell 1   | Cell 2   |
+
+### Sub-Section
+
+More content here.
+```
+
+Each element becomes a token in DPageSection's tokenizer. Headings create anchors in the right-side ToC tree.
+
+## Supported Markdown Elements
+
+DPageSection renders the following Markdown elements:
+
+- Headings (H2 through H6)
+- Paragraphs with inline formatting (bold, italic, links, code)
+- Unordered and ordered lists
+- Tables with headers
+- Fenced code blocks with syntax highlighting
+
+## Code Block with Filename
+
+Use the `:filename;` attribute to display a filename header:
+
+```php
+echo "Hello, Docsector!";
+```
+
+The filename appears in the info bar above the code block along with the language identifier.

package/src/pages/manual/components/d-page-section.showcase.pt-BR.md

@@ -0,0 +1,43 @@
+## Demonstração
+
+Aqui está o source Markdown que renderiza o conteúdo que você vê na aba Overview:
+
+```
+## Título da Seção
+
+Texto de parágrafo com **negrito** e *itálico*.
+
+- Item um
+- Item dois
+- Item três
+
+| Coluna A | Coluna B |
+|----------|----------|
+| Célula 1 | Célula 2 |
+
+### Sub-Seção
+
+Mais conteúdo aqui.
+```
+
+Cada elemento se torna um token no tokenizador do DPageSection. Títulos criam âncoras na árvore de ToC à direita.
+
+## Elementos Markdown Suportados
+
+DPageSection renderiza os seguintes elementos Markdown:
+
+- Títulos (H2 até H6)
+- Parágrafos com formatação inline (negrito, itálico, links, código)
+- Listas ordenadas e não ordenadas
+- Tabelas com cabeçalhos
+- Blocos de código cercados com syntax highlighting
+
+## Bloco de Código com Nome de Arquivo
+
+Use o atributo `:filename;` para exibir um cabeçalho com nome de arquivo:
+
+```php
+echo "Olá, Docsector!";
+```
+
+O nome do arquivo aparece na barra de info acima do bloco de código junto com o identificador de linguagem.

package/src/pages/manual/components/d-page-source-code.overview.en-US.md

@@ -0,0 +1,54 @@
+## Overview
+
+`DPageSourceCode` renders **fenced code blocks** with syntax highlighting, line numbers, copy-to-clipboard functionality, and optional filename display. It uses **Prism.js** for highlighting.
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `index` | `Number` | Yes | — | Unique index for anchor generation |
+| `language` | `String` | No | `'html'` | Programming language for highlighting |
+| `text` | `String` | Yes | — | Raw code text to display |
+| `filename` | `String` | No | `''` | Optional filename shown in the info bar |
+
+## Supported Languages
+
+Out of the box, DPageSourceCode supports:
+
+- **PHP** — via `prismjs/components/prism-php`
+- **Bash** — via `prismjs/components/prism-bash`
+- **HTML** — built-in Prism support
+- **JavaScript** — built-in Prism support
+
+To add more languages, import additional Prism components in `DPageSourceCode.vue`.
+
+## Features
+
+### Syntax Highlighting
+
+Code is highlighted at render time using `Prism.highlight()`. The highlighted HTML is injected via `v-html` into a `<code>` element.
+
+### Line Numbers
+
+When the code block has more than 1 line, line numbers are displayed on the left side. Each line number is a clickable anchor link.
+
+### Copy to Clipboard
+
+A copy button appears in the info bar. When clicked, it selects the code content and copies it to the clipboard using `document.execCommand('copy')`.
+
+### Filename Display
+
+When a `filename` prop is provided (extracted from the `:filename;` Markdown attribute), it appears in the info bar alongside the language identifier.
+
+## Dark/Light Theme
+
+DPageSourceCode has completely separate color schemes for:
+
+- **Light mode** (`.white` class) — Traditional light syntax colors
+- **Dark mode** (`.dark` class) — Dark background with vibrant token colors
+
+The color scheme is automatically selected based on `$q.dark.isActive`.
+
+## Anchor System
+
+Each code block gets a letter-based anchor (A, B, C, ..., Z, AA, AB, ...) generated from its index. Line numbers within the code block are appended to this anchor (e.g., `#A1`, `#A2`).

package/src/pages/manual/components/d-page-source-code.overview.pt-BR.md

@@ -0,0 +1,54 @@
+## Visão Geral
+
+`DPageSourceCode` renderiza **blocos de código cercados** com syntax highlighting, números de linha, funcionalidade de copiar para clipboard e exibição opcional de nome de arquivo. Usa **Prism.js** para highlighting.
+
+## Props
+
+| Prop | Tipo | Obrigatório | Padrão | Descrição |
+|------|------|-------------|--------|-----------|
+| `index` | `Number` | Sim | — | Índice único para geração de âncora |
+| `language` | `String` | Não | `'html'` | Linguagem de programação para highlighting |
+| `text` | `String` | Sim | — | Texto de código bruto para exibir |
+| `filename` | `String` | Não | `''` | Nome de arquivo opcional exibido na barra de info |
+
+## Linguagens Suportadas
+
+Por padrão, DPageSourceCode suporta:
+
+- **PHP** — via `prismjs/components/prism-php`
+- **Bash** — via `prismjs/components/prism-bash`
+- **HTML** — suporte embutido do Prism
+- **JavaScript** — suporte embutido do Prism
+
+Para adicionar mais linguagens, importe componentes adicionais do Prism em `DPageSourceCode.vue`.
+
+## Funcionalidades
+
+### Syntax Highlighting
+
+O código é destacado em tempo de renderização usando `Prism.highlight()`. O HTML destacado é injetado via `v-html` em um elemento `<code>`.
+
+### Números de Linha
+
+Quando o bloco de código tem mais de 1 linha, números de linha são exibidos no lado esquerdo. Cada número de linha é um link de âncora clicável.
+
+### Copiar para Clipboard
+
+Um botão de cópia aparece na barra de info. Quando clicado, seleciona o conteúdo do código e copia para o clipboard usando `document.execCommand('copy')`.
+
+### Exibição de Nome de Arquivo
+
+Quando a prop `filename` é fornecida (extraída do atributo Markdown `:filename;`), ela aparece na barra de info junto com o identificador de linguagem.
+
+## Tema Escuro/Claro
+
+DPageSourceCode tem esquemas de cores completamente separados para:
+
+- **Modo claro** (classe `.white`) — Cores de sintaxe tradicionais claras
+- **Modo escuro** (classe `.dark`) — Fundo escuro com cores vibrantes de token
+
+O esquema de cores é selecionado automaticamente baseado em `$q.dark.isActive`.
+
+## Sistema de Âncoras
+
+Cada bloco de código recebe uma âncora baseada em letras (A, B, C, ..., Z, AA, AB, ...) gerada a partir do seu índice. Números de linha dentro do bloco são adicionados a esta âncora (ex: `#A1`, `#A2`).