Документация Strata

Используйте раздел blog: в первом блоке метаданных YAML для оформления опубликованной записи. Панель оформления изменяет тот же текст, сохраняя остальные ключи и комментарии.

Предпросмотр отражает черновик. Публикация сохраняет полное оформление, включая унаследованные настройки; последующие изменения черновика или темы профиля не меняют эту версию. У презентаций собственные настройки. Метаданные скрыты на публичных страницах и в описаниях.

Неизвестные ключи в blog:, некорректный YAML, недопустимые значения, отсутствующие или повторяющиеся именованные ссылки и недостаточный контраст блокируют публикацию. Исправьте все ошибки; изменения агента возвращают результаты blogValidation. Сброс настройки восстанавливает наследование. По умолчанию оглавление скрыто, а подложка текста непрозрачна.

Краткое описание ограничено 160 символами; теги — 10 значениями по 32 символа. Имя серии допускает 80 символов и требует положительного целого номера. Записи объединяются при точном совпадении имени серии; одинаковые номера вызывают предупреждение. noindex оставляет запись в профиле и лентах, но исключает её из карты сайта и просит поисковые системы не индексировать её. cover указывает имя изображения в документе; задайте его комментарием <!-- strata:name=cover --> прямо перед изображением.

Цвета задаются значениями #RRGGBB в кавычках для светлого и тёмного режимов. background окрашивает подложку текста, а без обоев — и страницу. Контраст текста и ссылок accent с фактической подложкой должен быть не ниже 4.5:1 в обоих режимах. Шрифты выбираются из списка ниже. Полупрозрачная подложка имеет непрозрачность 88% и допускается только поверх цвета или градиента с достаточным контрастом по всей его длине.

Выберите ровно один вид обоев. Градиенты допускают 2–5 цветов; узоры используют имена ниже. Обои-изображение ссылаются на именованное изображение документа. HTML-обои ссылаются на блок html и требуют статического запасного цвета или изображения. Они работают за статьёй в существующей песочнице, не получают клики или фокус и останавливаются при скрытии вкладки. Ограничение анимации или трафика, слабые устройства, отключённый HTML-предпросмотр и ошибки включают запасной фон. При печати и в PDF обои отсутствуют. Произвольные HTML или CSS страницы и полностью HTML-записи не поддерживаются.

HTML-блоки с uses="frontmatter" читают strata.data.get("frontmatter").values. Доступные ключи оформления: blog.typography, blog.palette, blog.readingWidth, blog.blockControls, blog.tableOfContents, blog.readingSurface, blog.accent, blog.background, blog.fonts.heading и blog.fonts.body. Цвета соответствуют текущему режиму. Неуказанные шрифты пропускаются. Опубликованные блоки получают только эти значения; остальные скалярные метаданные доступны лишь в редакторе. Обои получают только эти значения и цветовой режим, но не другие данные документа.

Поля и допустимые значения

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

Полный пример 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>
```

Блоки кода с тегом html отображаются как живые изолированные предпросмотры в редакторе Strata и в экспортированных PDF — диаграммы, схемы, 3D-сцены и небольшие интерактивные виджеты, оформленные как обычный ограждённый блок кода.

Создайте ограждённый блок кода с языковым тегом html. Его разметка, стили и скрипты автоматически выполняются в изолированном предпросмотре; каждое изменение заново рендерится из чистого состояния, а читатели могут переключаться между предпросмотром и исходным кодом.

Предпросмотр полностью изолирован: нет cookie и хранилища, нет доступа к окружающей странице и внешним URL. WebSocket, маяки и отправка форм удалены полностью, а fetch доступен только к проверенным ресурсам /sandbox/, перечисленным ниже, — именно так движок Doom загружает собственные игровые данные. Всё, что нарушает эти ограничения, завершается ошибкой внутри своего предпросмотра и нигде больше.

Дизайн-токены Strata предзагружены: CSS-переменные, такие как var(--color-foreground), var(--color-muted-foreground), var(--color-primary) и var(--color-border), соответствуют теме приложения, а предпросмотр автоматически следует светлой или тёмной теме читателя. Цвета, которые вы задаёте сами, используются ровно так, как написаны, и никогда не корректируются, поэтому задавайте фон и текст вместе — блок, в котором задано только одно из двух, может оказаться нечитаемым в той теме, которую вы не проверяли.

Предпросмотр начинается с высоты около 360 пикселей, а затем подстраивается под содержимое: более высокое содержимое увеличивает блок, более короткое — уменьшает. Эта начальная высота служит и точкой отсчёта для относительных единиц, поэтому height: 100%, 100vh и window.innerHeight работают — именно на это обычно и рассчитывают сцены three.js и диаграммы во всю область блока.

Ошибки скриптов, необработанные отклонения промисов и вывод console.error/console.warn изнутри предпросмотра собираются и показываются под ним — с номерами строк, если браузер их сообщает. У предпросмотра нет собственных инструментов разработчика, поэтому именно в этой панели блок объясняет, почему он не отрисовался.

Диаграммы по данным документа

Блок может читать данные, которые уже лежат в этом же документе, поэтому диаграмма соответствует числам, которые видит читатель. Именовать можно источники четырёх видов. Блок кода json, csv, tsv или yaml именуется в собственной строке открытия, например через name=sales. Таблица именуется строкой HTML-комментария, помещённой непосредственно над ней: <!-- strata:name=headcount -->. Frontmatter документа всегда доступен под зарезервированным именем frontmatter, только скалярные поля. Изображение в документе именуется так же, как таблица, строкой HTML-комментария непосредственно над ним: <!-- strata:name=hero -->. В редакторе выделите изображение и воспользуйтесь пунктом Имя для данных. Этими четырьмя видами и ограничены данные, к которым блок может привязаться. Имя начинается с буквы, продолжается буквами, цифрами, дефисами или подчёркиваниями, содержит не более 64 символов и должно быть уникальным в пределах документа.

Блок html объявляет то, что он использует, в собственной строке открытия, например через uses="sales,headcount". Блок получает только названные им источники и никогда весь остальной документ, он не может добраться до данных другого документа, и к нему не приходит ничего, чего его читатель уже не видит здесь. Правка кода блока или его объявления перезагружает предпросмотр с чистого состояния. Правка только данных за уже объявленным именем обновляет работающий предпросмотр на месте. Блок объявляет не более восьми имён, а каждое имя после восьмого приходит как unavailable с причиной oversize, а не отбрасывается молча.

Внутри предпросмотра объявленные данные появляются как strata.data ещё до запуска ваших скриптов. strata.data.get(name) возвращает один источник, а strata.data.names перечисляет объявленные блоком имена в порядке объявления. Источник json, csv, tsv или yaml приходит неразобранным, в виде { kind: 'text', format, text }, так что разбирает его сам блок тем парсером, который ему удобен. Таблица приходит как { kind: 'table', columns, rows }, каждая ячейка представляет собой обычный текст без преобразования в числа или даты. Frontmatter приходит как { kind: 'frontmatter', values }. Все переданные значения глубоко заморожены. Когда привязанный источник меняется, Strata отправляет новый снимок и вызывает на window событие strata:data, в detail которого лежат новые данные. К моменту события strata.data.get уже возвращает этот снимок. Предпросмотр никогда не запрашивает данные сам, поэтому блок, игнорирующий событие, продолжает работать с тем, что получил изначально.

Изображение приходит как { kind: 'image', url, width, height, alt }, где url — это data-URL с байтами самого изображения, так что блок может напрямую присвоить его элементу img без всякого сетевого доступа. Strata загружает эти байты с правами самого читателя и встраивает их до запуска предпросмотра; предпросмотр никогда не видит ссылки, по которой мог бы перейти, и никогда сам не запрашивает изображение. У изображений отдельный лимит: одно изображение — до 3 МиБ, все изображения одного предпросмотра — до 12 МиБ в сумме, а при превышении первыми отбрасываются самые крупные. Изображение, байты которого не удалось получить, приходит как unavailable с причиной unreachable. Презентация может показать именованное изображение совсем без кода: строка открытия слайда вида layout=image uses="hero" рисует его во весь экран и берёт подпись из тела слайда.

Какой вид выбрать, зависит от того, кому ещё придётся читать эти числа. Блок json или csv компактен, аккуратно сравнивается между версиями и держит длинный ряд в стороне от текста, но приходит как сырой текст, и разбирает его сам блок. Классической ошибкой является разбиение строки csv по запятым, потому что так рвётся любое поле в кавычках, внутри которого есть запятая. С именованной таблицей всё наоборот: читатель видит настоящую таблицу, а не блок кода, и блок получает её уже разделённой, где первая строка становится columns, а каждая следующая попадает в rows. Frontmatter подходит для отдельных значений, таких как заголовок или цель, а не для ряда.

Объявленное имя, которое не удалось разрешить, всё равно приходит, в виде { kind: 'unavailable', reason }, чтобы блок отличал пустой набор данных от отсутствующего. Причина равна unknown, если ни один источник документа не носит это имя, duplicate, если на имя претендуют два источника, removed, если источник удалили при открытом предпросмотре,, oversize, если источник превышает пределы доставки, и unreachable, если байты изображения не удалось получить. Отбрасывается только затронутый источник, остальные приходят по-прежнему, поэтому проверяйте вид unavailable и рисуйте сообщение, а не считайте, что данные на месте.

Проверенные библиотеки

• /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.

Никакие другие внешние URL скриптов или стилей внутри предпросмотра не загружаются. Чтобы зафиксировать версию, вставьте -<version> перед .min.js (старые версии остаются доступными).

Пример

<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>

Пример: диаграмма, привязанная к блоку кода 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>
```

Пример: диаграмма, привязанная к блоку кода 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>
```

Пример: диаграмма, привязанная к таблице документа

<!-- 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>
```

Пример: изображение, привязанное к изображению документа

<!-- 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>
```

Определение агента — это документ в формате Markdown, расположенный в папке /Agents. YAML-frontmatter объявляет идентичность агента, список разрешённых инструментов и видимость для оркестратора; текст под frontmatter — это системный промпт, которому оркестратор передаёт запрос пользователя дословно. Каждое поле проверяется сервером при сохранении.

Пример

---
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…

Шаблон промпта — это документ в формате Markdown, расположенный в папке /Prompts. YAML-frontmatter объявляет имя, описание, аргументы и видимость для оркестратора; текст под frontmatter — это шаблон промпта, в котором плейсхолдеры {{argument}} подставляются на этапе рендеринга. Значения аргументов собираются слэш-листом компоновщика чата или запросом MCP prompts/get.

PromptArgument

Каждая запись в массиве `arguments` выше имеет следующий вид:

Пример

---
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.

Шаблон документа — это Markdown-документ в папке шаблонов. YAML-фронтматтер объявляет имя шаблона, типизированные переменные и структуру разделов; тело под фронтматтером — переиспользуемое содержимое. Плейсхолдеры {{key}} подставляются при создании документа из шаблона: через галерею, действие MCP createFromTemplate или инструмент агента create_document_from_template.

TemplateVariable

Каждый элемент массива `variables` выше имеет следующий вид:

TemplateSection

Каждый элемент массива `sections` выше имеет следующий вид:

Пример

---
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…