Documentação do Strata

Use um mapa blog: no primeiro bloco de metadados YAML para definir a aparência de um post publicado. O painel de aparência edita esse mesmo texto e preserva as outras chaves e comentários.

A prévia acompanha o rascunho. Publicar salva o design completo, incluindo os padrões herdados da publicação; alterações posteriores no rascunho ou no tema do perfil não modificam essa versão. Apresentações usam suas próprias configurações. Os metadados ficam ocultos nas páginas públicas e nas descrições.

Chaves desconhecidas em blog:, YAML malformado, valores inválidos, referências ausentes ou duplicadas e contraste insuficiente impedem a publicação. Corrija todos os erros; edições por agentes retornam resultados blogValidation. Redefina uma configuração para herdar seu padrão. Por padrão, o sumário fica oculto e a superfície de leitura é opaca.

O resumo aceita até 160 caracteres; as tags, até 10 itens com 32 caracteres cada. Nomes de séries aceitam 80 caracteres e exigem uma ordem inteira positiva. Nomes exatos agrupam os posts; ordens duplicadas geram avisos. noindex mantém o post no perfil e nos feeds, mas o remove do mapa do site e solicita que os buscadores não o indexem. cover nomeia uma imagem do documento; use <!-- strata:name=cover --> imediatamente antes da imagem.

As cores exigem valores #RRGGBB entre aspas para os modos claro e escuro. background colore a superfície de leitura e, sem papel de parede, a página. Texto e links accent devem atingir contraste de 4.5:1 na superfície real em ambos os modos. As fontes vêm da lista abaixo. Uma superfície translúcida usa 88% de opacidade e só é permitida sobre cores ou gradientes com contraste suficiente em toda a extensão.

Escolha um único tipo de papel de parede. Gradientes aceitam de 2 a 5 cores; padrões usam os nomes abaixo. O papel de parede de imagem nomeia uma imagem do documento. O de HTML nomeia um bloco html e exige uma cor ou imagem estática de reserva. Ele é executado atrás do artigo no ambiente isolado existente, não recebe cliques ou foco e para quando a aba fica oculta. Movimento ou dados reduzidos, dispositivos limitados, prévias HTML desativadas e falhas ativam a reserva. Impressão e PDF omitem o papel de parede. HTML ou CSS direto na página e posts totalmente em HTML não são aceitos.

Blocos HTML com uses="frontmatter" leem strata.data.get("frontmatter").values. As chaves resolvidas são blog.typography, blog.palette, blog.readingWidth, blog.blockControls, blog.tableOfContents, blog.readingSurface, blog.accent, blog.background, blog.fonts.heading e blog.fonts.body. As cores seguem o modo atual. Fontes não configuradas são omitidas. Blocos publicados recebem apenas esses valores; outros metadados escalares só ficam disponíveis no editor. Um papel de parede recebe apenas esses valores e o modo de cor, nunca outros dados do documento.

Campos e valores permitidos

blog.typography

modern | editorial | expressive | technical

blog.palette

strata | paper

blog.readingWidth

focused | comfortable | wide | full

blog.blockControls

visible | hidden

blog.tableOfContents

visible | hidden

blog.accent

{ light: "#RRGGBB", dark: "#RRGGBB" }

blog.background

{ light: "#RRGGBB", dark: "#RRGGBB" }

blog.fonts.heading, blog.fonts.body

Manrope | Syne | Fira Code | Georgia | Times New Roman | Arial | Helvetica | Verdana | Trebuchet MS | Palatino | Courier New | IBM Plex Mono

blog.summary

string (1…160)

blog.cover

image.name

blog.tags

string[] (0…10 × 1…32)

blog.noindex

true | false

blog.series

{ name: string (1…80), order: integer (≥1) }

blog.wallpaper.color

{ light: "#RRGGBB", dark: "#RRGGBB" }

blog.wallpaper.gradient

{ type: linear | radial, stops: [{ light: "#RRGGBB", dark: "#RRGGBB" }, …] } (2…5)

blog.wallpaper.pattern

{ name: dots | grid | lines | paper | topographic | stars, tint: { light: "#RRGGBB", dark: "#RRGGBB" } }

blog.wallpaper.image

image.name

blog.wallpaper.html

codeBlock.name (language: html)

blog.wallpaper.fallback

{ color: { light: "#RRGGBB", dark: "#RRGGBB" } } | { image: image.name }

blog.readingSurface

opaque | translucent

Exemplo completo de papel de parede HTML

---
blog:
  typography: editorial
  palette: paper
  readingWidth: comfortable
  blockControls: hidden
  tableOfContents: visible
  accent: { light: "#8a3515", dark: "#ffb788" }
  background: { light: "#fffdf8", dark: "#272119" }
  fonts: { heading: Georgia, body: Georgia }
  summary: "An astronomy journal about the night sky."
  tags: [astronomy, observation]
  noindex: false
  series: { name: "Night notes", order: 1 }
  readingSurface: opaque
  wallpaper:
    html: starfield
    fallback:
      color: { light: "#e7e0d4", dark: "#111827" }
---

# Night notes

Our first observing session began at twilight.

## The northern sky

The article stays on an opaque reading surface above the animation.

```html name=starfield uses="frontmatter"
<style>
  html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
  canvas { display: block; width: 100%; height: 100%; }
</style>
<canvas id="sky"></canvas>
<script>
  const canvas = document.getElementById('sky');
  const ctx = canvas.getContext('2d');
  let color = '#8a3515';
  function readDesign() {
    const source = strata.data.get('frontmatter');
    if (source?.kind === 'frontmatter') color = source.values['blog.accent'];
  }
  readDesign();
  window.addEventListener('strata:data', readDesign);
  function paint(time) {
    const width = canvas.clientWidth, height = canvas.clientHeight;
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
    }
    ctx.clearRect(0, 0, width, height);
    ctx.fillStyle = color;
    for (let i = 0; i < 90; i++) {
      ctx.globalAlpha = 0.25 + 0.25 * Math.sin(time / 1800 + i);
      ctx.beginPath();
      ctx.arc((i * 137.508 % 100) / 100 * width,
        (i * 71.37 % 100) / 100 * height, 1 + i % 2, 0, Math.PI * 2);
      ctx.fill();
    }
    requestAnimationFrame(paint);
  }
  requestAnimationFrame(paint);
</script>
```

Blocos de código marcados como html são renderizados como pré-visualizações ao vivo e isoladas no editor do Strata e nos PDFs exportados — gráficos, diagramas, cenas 3D e pequenos widgets interativos, escritos como código delimitado comum.

Escreva um bloco de código delimitado com a tag de linguagem html. Sua marcação, estilos e scripts rodam automaticamente em uma pré-visualização isolada; cada edição renderiza de novo a partir de um estado limpo, e os leitores podem alternar entre a pré-visualização e o código-fonte.

A pré-visualização é totalmente isolada: sem cookies ou armazenamento, sem acesso à página ao redor e sem URLs externas. WebSocket, beacons e envios de formulário são removidos por completo, e o fetch alcança apenas os recursos verificados em /sandbox/ listados abaixo, que é como o motor do Doom carrega os próprios dados de jogo. Tudo que violar essas restrições falha dentro da própria pré-visualização e em nenhum outro lugar.

Os tokens de design do Strata vêm pré-carregados: variáveis CSS como var(--color-foreground), var(--color-muted-foreground), var(--color-primary) e var(--color-border) correspondem ao tema do aplicativo, e a pré-visualização segue automaticamente o modo claro ou escuro de quem está lendo. As cores que você mesmo define são usadas exatamente como você as escreve e nunca são ajustadas, então defina o fundo e o texto juntos — um bloco que define apenas um dos dois pode acabar ilegível no modo que você não testou.

Uma pré-visualização começa com cerca de 360 pixels de altura e depois acompanha o próprio conteúdo: conteúdo mais alto faz o bloco crescer, conteúdo mais curto o encolhe. Essa altura inicial também é a referência para as unidades relativas, então height: 100%, 100vh e window.innerHeight funcionam — que é justamente o que as cenas do three.js e os gráficos que ocupam todo o bloco costumam usar.

Erros de script, rejeições de promessa não tratadas e a saída de console.error/console.warn vinda de dentro da pré-visualização são coletados e exibidos abaixo dela, com números de linha quando o navegador os informa. Uma pré-visualização não tem ferramentas de desenvolvedor próprias, então é neste painel que um bloco explica por que não foi renderizado.

Gráficos com dados do documento

Um bloco pode ler dados que já vivem no mesmo documento, de modo que um gráfico continua alinhado aos números que seus leitores veem. Quatro tipos de fonte podem ser nomeados. Um bloco de código json, csv, tsv ou yaml é nomeado na própria linha de abertura, por exemplo com name=sales. Uma tabela é nomeada por uma linha de comentário HTML colocada imediatamente acima dela: <!-- strata:name=headcount -->. O frontmatter do documento está sempre disponível sob o nome reservado frontmatter, apenas com campos escalares. Uma imagem do documento é nomeada como uma tabela, por uma linha de comentário HTML colocada imediatamente acima dela: <!-- strata:name=hero -->. No editor, selecione a imagem e use Nome para dados. Esses quatro tipos são os únicos dados aos quais um bloco pode se vincular. Um nome começa com uma letra, continua com letras, dígitos, hifens ou sublinhados, tem no máximo 64 caracteres e precisa ser único dentro do documento.

Um bloco html declara o que consome na própria linha de abertura, por exemplo com uses="sales,headcount". O bloco recebe somente as fontes que nomeia e nunca o restante do documento, não alcança dados de outro documento e nada chega até ele que o leitor já não possa ver neste documento. Editar o código do bloco ou sua declaração recarrega a pré-visualização a partir de um estado limpo. Editar apenas os dados por trás de um nome já declarado atualiza a pré-visualização em execução no lugar. Um bloco declara no máximo oito nomes, e qualquer nome depois do oitavo chega como unavailable com o motivo oversize em vez de ser descartado em silêncio.

Dentro da pré-visualização, os dados declarados são instalados como strata.data antes que seus próprios scripts sejam executados. strata.data.get(name) devolve uma fonte e strata.data.names lista os nomes declarados pelo bloco, na ordem da declaração. Uma fonte json, csv, tsv ou yaml chega sem análise, como { kind: 'text', format, text }, então o próprio bloco a analisa com o parser que preferir. Uma tabela chega como { kind: 'table', columns, rows }, com cada célula em texto puro e sem conversão numérica ou de data. O frontmatter chega como { kind: 'frontmatter', values }. Todos os valores entregues estão profundamente congelados. Quando uma fonte vinculada muda, o Strata envia um novo instantâneo e dispara o evento strata:data em window, cujo detail carrega os dados novos. strata.data.get já devolve esse instantâneo no momento em que o evento é disparado. A pré-visualização nunca pede dados por conta própria, portanto um bloco que ignora o evento continua funcionando com o que recebeu no início.

Uma imagem chega como { kind: 'image', url, width, height, alt }, em que url é uma URL de dados que carrega os bytes da própria imagem, de modo que um bloco pode atribuí-la direto a um elemento img sem nenhum acesso à rede. O Strata busca esses bytes com o acesso do próprio leitor e os incorpora antes de a pré-visualização começar; a pré-visualização nunca vê um link que pudesse seguir nem pede uma imagem por conta própria. As imagens têm orçamento próprio: uma imagem pode entregar até 3 MiB e todas as imagens de uma pré-visualização até 12 MiB somadas, descartando primeiro as maiores se esse orçamento acabar. Uma imagem cujos bytes não puderam ser obtidos chega como unavailable com o motivo unreachable. Uma apresentação pode mostrar uma imagem nomeada sem nenhum código: uma linha de abertura de slide escrita como layout=image uses="hero" a desenha em tela cheia e lê a legenda do corpo do slide.

Qual tipo escolher depende de quem mais precisa ler os números. Um bloco json ou csv é compacto, compara bem entre versões e mantém uma série longa fora do texto, mas chega como texto puro e cabe ao bloco analisá-lo; dividir uma linha csv pelas vírgulas é o erro clássico, porque rompe qualquer campo entre aspas que contenha uma. Uma tabela nomeada faz a troca oposta: os leitores veem uma tabela de verdade em vez de um bloco de código, e o bloco a recebe já separada, com a primeira linha como columns e cada linha seguinte em rows. O frontmatter serve para valores isolados, como um título ou uma meta, e não para uma série.

Um nome declarado que não pode ser resolvido chega mesmo assim, como { kind: 'unavailable', reason }, para que o bloco distinga um conjunto de dados vazio de um ausente. O motivo é unknown quando nenhuma fonte do documento carrega aquele nome, duplicate quando duas fontes reivindicam o mesmo nome, removed quando a fonte foi excluída com a pré-visualização aberta, oversize quando a fonte ultrapassa os limites de entrega e unreachable quando não foi possível obter os bytes de uma imagem. Apenas a fonte afetada é descartada e as demais continuam chegando, então verifique o tipo unavailable e mostre uma mensagem em vez de supor que os dados estão lá.

Bibliotecas aprovadas

• /sandbox/libs/mermaid.min.js — <script src="/sandbox/libs/mermaid.min.js"></script> then mermaid.initialize({ startOnLoad: false }); mermaid.run()
• /sandbox/libs/d3.min.js — <script src="/sandbox/libs/d3.min.js"></script> — global `d3`
• /sandbox/libs/three.module.min.js — <script type="module">import * as THREE from '/sandbox/libs/three.module.min.js'</script>
• /sandbox/libs/doom.js — <script src="/sandbox/libs/doom.js"></script> is the whole block: it appends its own canvas and boots. Options go on the script tag: data-doom-warp="1,1", data-doom-skill="3", data-doom-manual (call Doom.start() yourself). To place the canvas, supply one with id="canvas". The reader clicks the preview once to give it keyboard focus; arrows move, Ctrl fires, Esc opens the menu. Music is off, sound effects work. First load pulls about 10 MB, then caches. Chocolate Doom compiled to WebAssembly (GPL-2.0-or-later, github.com/cloudflare/doom-wasm) with Freedoom game data (BSD-3-Clause, github.com/freedoom/freedoom). No commercial or shareware WAD is distributed.

Nenhuma outra URL externa de script ou de estilo carrega dentro da pré-visualização. Para fixar uma versão, insira -<version> antes de .min.js (versões mais antigas continuam disponíveis).

Exemplo

<div id="chart"></div>
<script src="/sandbox/libs/d3.min.js"></script>
<script>
  const data = [4, 8, 15, 16, 23, 42];
  d3.select('#chart')
    .selectAll('div')
    .data(data)
    .join('div')
    .style('height', '18px')
    .style('margin', '2px 0')
    .style('background', 'var(--color-primary, #2c7cb0)')
    .style('width', (d) => d * 6 + 'px');
</script>

Exemplo: um gráfico vinculado a um bloco json

```json name=sales
[
  { "quarter": "Q1", "revenue": 42 },
  { "quarter": "Q2", "revenue": 58 },
  { "quarter": "Q3", "revenue": 71 }
]
```

```html uses="sales"
<div id="chart"></div>
<script src="/sandbox/libs/d3.min.js"></script>
<script>
  function render() {
    const source = strata.data.get('sales');
    if (!source || source.kind !== 'text') return;
    d3.select('#chart')
      .selectAll('div')
      .data(JSON.parse(source.text))
      .join('div')
      .style('height', '18px')
      .style('margin', '2px 0')
      .style('background', 'var(--color-primary, #2c7cb0)')
      .style('width', (d) => d.revenue * 6 + 'px');
  }
  render();
  window.addEventListener('strata:data', render);
</script>
```

Exemplo: um gráfico vinculado a um bloco csv

```csv name=signups
week,signups
"Jan 1, 2026",120
"Jan 8, 2026",148
"Jan 15, 2026",173
"Jan 22, 2026",162
```

```html uses="signups"
<div id="chart"></div>
<script src="/sandbox/libs/d3.min.js"></script>
<script>
  function render() {
    const chart = d3.select('#chart');
    chart.selectAll('*').remove();
    const source = strata.data.get('signups');
    if (!source || source.kind !== 'text') {
      chart.text('No signups data.');
      return;
    }
    // A csv source arrives as raw text. text.split(',') would tear
    // "Jan 1, 2026" in half; d3.csvParse honours the quotes.
    const rows = d3.csvParse(source.text, (row) => ({
      week: row.week,
      signups: Number(row.signups),
    }));
    const scale = d3
      .scaleLinear()
      .domain([0, Math.max(1, d3.max(rows, (d) => d.signups) || 0)])
      .range([0, 100]);
    const line = chart.selectAll('div').data(rows).join('div');
    line
      .style('display', 'flex')
      .style('align-items', 'center')
      .style('gap', '8px')
      .style('margin', '2px 0');
    line
      .append('span')
      .style('flex', '0 0 7rem')
      .style('color', 'var(--color-muted-foreground, #6b7280)')
      .text((d) => d.week);
    line
      .append('span')
      .style('height', '18px')
      .style('background', 'var(--color-primary, #2c7cb0)')
      .style('width', (d) => scale(d.signups) + '%');
    line.append('span').text((d) => d.signups);
  }
  render();
  // Edit a number in the csv block and this chart follows it.
  window.addEventListener('strata:data', render);
</script>
```

Exemplo: um gráfico vinculado a uma tabela do documento

<!-- strata:name=headcount -->

| Team | People |
| --- | --- |
| Growth | 12 |
| Platform | 27 |
| Support | 8 |

```html uses="headcount"
<div id="chart"></div>
<script>
  function render() {
    const chart = document.getElementById('chart');
    chart.textContent = '';
    const source = strata.data.get('headcount');
    if (!source || source.kind !== 'table') {
      chart.textContent = 'No headcount table.';
      return;
    }
    // columns is the table's first row; rows is everything under it, and
    // every cell is a string, so the numbers are yours to convert.
    const team = source.columns.indexOf('Team');
    const people = source.columns.indexOf('People');
    const counts = source.rows.map((row) => Number(row[people]) || 0);
    const widest = Math.max(1, ...counts);
    source.rows.forEach((row, index) => {
      const line = document.createElement('div');
      line.style.display = 'flex';
      line.style.alignItems = 'center';
      line.style.gap = '8px';
      line.style.margin = '2px 0';
      const label = document.createElement('span');
      label.style.flex = '0 0 7rem';
      label.style.color = 'var(--color-muted-foreground, #6b7280)';
      label.textContent = row[team];
      const bar = document.createElement('span');
      bar.style.height = '18px';
      bar.style.width = (counts[index] / widest) * 100 + '%';
      bar.style.background = 'var(--color-primary, #2c7cb0)';
      const value = document.createElement('span');
      value.textContent = row[people];
      line.append(label, bar, value);
      chart.append(line);
    });
  }
  render();
  // Type a new number into the table and this chart follows it.
  window.addEventListener('strata:data', render);
</script>
```

Exemplo: uma imagem vinculada a uma imagem do documento

<!-- strata:name=hero -->

![The team on launch day](strata://image/img_01ARZ3NDEKTSV4RRFFQ69G5FAV)

```html uses="hero"
<figure id="card" style="margin:0"></figure>
<script>
  function render() {
    const card = document.getElementById('card');
    card.textContent = '';
    const source = strata.data.get('hero');
    if (!source || source.kind !== 'image') {
      card.textContent = 'No hero image.';
      return;
    }
    const image = document.createElement('img');
    // url already carries the bytes, so this needs no network access.
    image.src = source.url;
    image.alt = source.alt;
    image.style.width = '100%';
    image.style.borderRadius = '12px';
    const caption = document.createElement('figcaption');
    caption.style.color = 'var(--color-muted-foreground, #6b7280)';
    caption.textContent = source.width + '×' + source.height;
    card.append(image, caption);
  }
  render();
  // Swap the image in the document and this card follows it.
  window.addEventListener('strata:data', render);
</script>
```

A definição de um agente é um documento Markdown na sua pasta /Agents. O frontmatter YAML declara a identidade do agente, a lista de ferramentas permitidas e a visibilidade ao orquestrador; o corpo abaixo do frontmatter é o prompt de sistema que o orquestrador entrega literalmente à solicitação do usuário. Cada campo é validado no servidor ao salvar.

Exemplo

---
name: meeting-notes-summarizer
description: Summarizes meeting notes into a TL;DR with action items.
tools:
  - read_document
  - search_space
model: claude-sonnet-4-6
color: emerald
enabled: true
autoInvokable: false
---

You are a meeting-notes summarizer. Given the document body the
orchestrator hands you verbatim, produce a one-paragraph TL;DR and a
bulleted action-item list…

Um modelo de prompt é um documento Markdown na sua pasta /Prompts. O frontmatter YAML declara nome, descrição, argumentos e visibilidade ao orquestrador; o corpo abaixo do frontmatter é o modelo do prompt — placeholders {{argument}} são substituídos no momento da renderização. Os valores dos argumentos são coletados pela folha de slash do compositor de chat ou pela requisição MCP prompts/get.

PromptArgument

Cada entrada do array `arguments` acima tem o seguinte formato:

Exemplo

---
name: Summarize document
description: Summarize the active document for a chosen audience.
autoInvokable: false
arguments:
  - name: focus
    description: What the assistant should focus on.
    required: true
  - name: audience
    description: Target audience for the summary.
    required: false
---

Summarize this document for {{audience}}, focusing on {{focus}}. Keep
the summary under 200 words and finish with a short action-items list.

Um modelo de documento é um documento Markdown dentro de uma pasta de modelos. O frontmatter YAML declara o nome, as variáveis tipadas e o contrato de seções; o corpo abaixo do frontmatter é o conteúdo reutilizável — os marcadores {{key}} são substituídos ao criar um documento a partir do modelo, pela galeria, pela ação MCP createFromTemplate ou pela ferramenta de agente create_document_from_template.

TemplateVariable

Cada entrada do array `variables` acima tem o seguinte formato:

TemplateSection

Cada entrada do array `sections` acima tem o seguinte formato:

Exemplo

---
name: incident-postmortem
description: Standard postmortem with a verbatim escalation matrix.
variables:
  - key: incident_id
    label: Incident ID
    kind: text
    required: true
  - key: occurred_on
    label: Date of incident
    kind: date
    required: true
sections:
  - title: Timeline
    guidance: Chronological events from first alert to resolution.
    fill: required
  - title: Lessons learned
    guidance: What we change going forward.
    fill: optional
  - title: Escalation matrix
    fill: verbatim
---

## Timeline

Incident {{incident_id}} on {{occurred_on}}.

## Lessons learned

## Escalation matrix

Page the on-call lead, then the service owner…