Strata-Dokumentation

Gestalten Sie einen veröffentlichten Beitrag mit einer blog:-Zuordnung im ersten YAML-Metadatenblock. Das Erscheinungsbild-Panel bearbeitet denselben Text und erhält andere Schlüssel und Kommentare.

Die Vorschau folgt dem Entwurf. Beim Veröffentlichen wird das vollständige Design einschließlich geerbter Publikationsvorgaben gespeichert; spätere Entwurfsänderungen oder Profilthemen ändern diese Version nicht. Präsentationen verwenden eigene Einstellungen. Metadaten bleiben auf öffentlichen Seiten und in Beschreibungen verborgen.

Unbekannte Schlüssel in blog:, fehlerhaftes YAML, ungültige Werte, fehlende oder doppelte benannte Referenzen und unzureichender Kontrast verhindern die Veröffentlichung. Beheben Sie alle Fehler; Agentenbearbeitungen liefern blogValidation-Ergebnisse. Zurücksetzen übernimmt den Standardwert. Standardmäßig ist das Inhaltsverzeichnis verborgen und die Lesefläche undurchsichtig.

Die Zusammenfassung erlaubt 160 Zeichen; Tags höchstens 10 Einträge mit je 32 Zeichen. Seriennamen erlauben 80 Zeichen und erfordern eine positive ganze Zahl für die Reihenfolge. Exakte Namen gruppieren Beiträge; doppelte Positionsnummern erzeugen Warnungen. noindex erhält den Beitrag im Profil und in Feeds, entfernt ihn aber aus der Sitemap und bittet Suchmaschinen, ihn nicht zu indexieren. cover benennt ein Bild im Dokument; setzen Sie <!-- strata:name=cover --> unmittelbar vor das Bild.

Farben benötigen #RRGGBB-Werte in Anführungszeichen für den hellen und dunklen Modus. background färbt die Lesefläche und ohne Hintergrundgestaltung auch die Seite. Fließtext und accent-Links müssen auf der tatsächlichen Fläche in beiden Modi 4.5:1 Kontrast erreichen. Schriftarten stammen aus der folgenden Liste. Eine durchscheinende Fläche hat 88% Deckkraft und ist nur über Farben oder Verläufen mit durchgehend ausreichendem Kontrast zulässig.

Wählen Sie genau eine Hintergrundart. Verläufe erlauben 2–5 Farbstopps; Muster verwenden die folgenden Namen. Bildhintergründe benennen ein Bild im Dokument. HTML-Hintergründe benennen einen html-Codeblock und benötigen eine statische Ersatzfarbe oder ein Ersatzbild. Sie laufen hinter dem Artikel in der vorhandenen Sandbox, erhalten keine Klicks oder Tastaturfokus und stoppen bei ausgeblendetem Tab. Reduzierte Bewegung oder Daten, schwache Geräte, deaktivierte HTML-Vorschau oder Fehler aktivieren den Ersatz. Druck und PDF lassen Hintergründe aus. Direktes Seiten-HTML oder CSS sowie reine HTML-Beiträge werden nicht unterstützt.

HTML-Blöcke mit uses="frontmatter" lesen strata.data.get("frontmatter").values. Aufgelöste Designschlüssel sind blog.typography, blog.palette, blog.readingWidth, blog.blockControls, blog.tableOfContents, blog.readingSurface, blog.accent, blog.background, blog.fonts.heading und blog.fonts.body. Farben folgen dem aktuellen Modus. Nicht festgelegte Schriftarten werden ausgelassen. Veröffentlichte Blöcke erhalten nur diese Designwerte; andere skalare Metadaten sind nur im Editor verfügbar. Hintergründe erhalten nur diese Werte und den Farbmodus, niemals weitere Dokumentdaten.

Felder und zulässige Werte

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

Vollständiges Beispiel für einen HTML-Hintergrund

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

Codeblöcke mit dem Tag html werden im Strata-Editor und in exportierten PDFs als live gerenderte, sandboxte Vorschauen dargestellt — Diagramme, Schaubilder, 3D-Szenen und kleine interaktive Widgets, geschrieben als ganz normaler Fenced-Code-Block.

Schreibe einen Fenced-Code-Block mit dem Sprach-Tag html. Markup, Styles und Skripte laufen automatisch in einer isolierten Vorschau; jede Bearbeitung rendert von einem sauberen Zustand aus neu, und Lesende können zwischen Vorschau und Quelltext umschalten.

Die Vorschau ist vollständig isoliert: keine Cookies oder Speicher, kein Zugriff auf die umgebende Seite und keine externen URLs. WebSocket, Beacons und Formular-Posts sind vollständig entfernt, und fetch erreicht ausschließlich die unten aufgeführten geprüften /sandbox/-Assets — so lädt die Doom-Engine ihre eigenen Spieldaten. Alles, was gegen diese Einschränkungen verstößt, schlägt nur innerhalb der eigenen Vorschau fehl und nirgends sonst.

Strata-Design-Tokens sind vorgeladen: CSS-Variablen wie var(--color-foreground), var(--color-muted-foreground), var(--color-primary) und var(--color-border) entsprechen dem App-Theme, und die Vorschau folgt automatisch dem Hell- oder Dunkelmodus des Betrachters. Farben, die Sie selbst setzen, werden exakt so verwendet, wie Sie sie schreiben, und nie angepasst. Legen Sie Hintergrund und Text deshalb immer gemeinsam fest — ein Block, der nur eines von beidem setzt, kann in dem Modus, den Sie nicht getestet haben, unlesbar werden.

Eine Vorschau startet mit etwa 360 Pixeln Höhe und richtet sich danach nach ihrem Inhalt: höherer Inhalt lässt den Block wachsen, kürzerer lässt ihn schrumpfen. Diese Starthöhe ist zugleich der Bezugswert für relative Einheiten, sodass height: 100%, 100vh und window.innerHeight allesamt funktionieren — genau das, was three.js-Szenen und formatfüllende Diagramme üblicherweise verwenden.

Skriptfehler, nicht behandelte Promise-Rejections sowie console.error- und console.warn-Ausgaben aus dem Inneren der Vorschau werden gesammelt und darunter angezeigt, mit Zeilennummern, sofern der Browser sie meldet. Eine Vorschau hat keine eigenen Entwicklertools; in diesem Bereich erklärt ein Block daher, warum er nicht gerendert wurde.

Dokumentdaten visualisieren

Ein Block kann Daten lesen, die bereits im selben Dokument stehen, sodass ein Diagramm zu den Zahlen passt, die seine Leser sehen. Vier Arten von Quellen lassen sich benennen. Ein json-, csv-, tsv- oder yaml-Codeblock wird in seiner eigenen Anfangszeile benannt, etwa mit name=sales. Eine Tabelle wird über eine HTML-Kommentarzeile unmittelbar darüber benannt: <!-- strata:name=headcount -->. Das Frontmatter des Dokuments steht immer unter dem reservierten Namen frontmatter zur Verfügung, allerdings nur mit skalaren Feldern. Ein Bild im Dokument wird genauso benannt wie eine Tabelle, über eine HTML-Kommentarzeile unmittelbar darüber: <!-- strata:name=hero -->. Im Editor wählen Sie das Bild aus und verwenden Name für Daten. Nur an diese vier Arten kann ein Block gebunden werden. Ein Name beginnt mit einem Buchstaben, wird mit Buchstaben, Ziffern, Bindestrichen oder Unterstrichen fortgesetzt, umfasst höchstens 64 Zeichen und muss im Dokument eindeutig sein.

Ein html-Block gibt in seiner eigenen Anfangszeile an, was er verwendet, etwa mit uses="sales,headcount". Ein Block erhält ausschließlich die Quellen, die er benennt, und nie den Rest des Dokuments. Er kann keine Daten aus einem anderen Dokument erreichen, und es kommt nichts an, was seine Leser in diesem Dokument nicht ohnehin sehen. Wird der Code des Blocks oder seine Deklaration bearbeitet, startet die Vorschau in einem sauberen Zustand neu. Ändern sich dagegen nur die Daten hinter einem bereits deklarierten Namen, wird die laufende Vorschau an Ort und Stelle aktualisiert. Ein Block deklariert höchstens acht Namen. Jeder Name nach dem achten kommt als unavailable mit dem Grund oversize an, statt stillschweigend zu entfallen.

In der Vorschau stehen die deklarierten Daten als strata.data bereit, bevor eigene Skripte laufen. strata.data.get(name) liefert eine einzelne Quelle, strata.data.names listet die vom Block deklarierten Namen in der Reihenfolge der Deklaration. Eine json-, csv-, tsv- oder yaml-Quelle kommt unverarbeitet als { kind: 'text', format, text } an, der Block parst sie also selbst mit dem Parser seiner Wahl. Eine Tabelle kommt als { kind: 'table', columns, rows } an, jede Zelle als reiner Text und ohne Umwandlung in Zahlen oder Datumswerte. Frontmatter kommt als { kind: 'frontmatter', values } an. Alle gelieferten Werte sind tief eingefroren. Ändert sich eine gebundene Quelle, schickt Strata einen neuen Snapshot und löst am window das Ereignis strata:data aus, dessen detail die neuen Daten trägt. strata.data.get liefert diesen Snapshot bereits, wenn das Ereignis eintrifft. Die Vorschau fordert selbst nie Daten an, ein Block, der das Ereignis ignoriert, arbeitet also mit dem weiter, was er zuerst bekommen hat.

Ein Bild kommt als { kind: 'image', url, width, height, alt } an, wobei url eine Daten-URL mit den Bytes des Bildes selbst ist. Ein Block kann sie also ohne jeden Netzwerkzugriff direkt einem img-Element zuweisen. Strata lädt diese Bytes mit dem Zugriff des Lesers und bettet sie ein, bevor die Vorschau startet; die Vorschau sieht nie einen Link, dem sie folgen könnte, und fordert nie selbst ein Bild an. Bilder haben ein eigenes Budget: Ein einzelnes Bild darf bis zu 3 MiB liefern, alle Bilder einer Vorschau zusammen bis zu 12 MiB; reicht das Budget nicht, entfallen zuerst die größten. Ein Bild, dessen Bytes nicht geladen werden konnten, kommt als unavailable mit dem Grund unreachable an. Eine Präsentation zeigt ein benanntes Bild ganz ohne Code: Eine Folienanfangszeile mit layout=image uses="hero" stellt es formatfüllend dar und nimmt die Bildunterschrift aus dem Rumpf der Anfangszeile.

Welche Art die richtige ist, hängt davon ab, wer die Zahlen sonst noch lesen muss. Ein json- oder csv-Codeblock ist kompakt, lässt sich sauber vergleichen und hält eine lange Reihe aus dem Fließtext heraus, kommt aber als roher Text an, sodass der Block das Parsen selbst übernimmt. Eine csv-Zeile einfach an Kommas zu zerlegen, ist der klassische Fehler, denn das zerreißt jedes Feld in Anführungszeichen, das ein Komma enthält. Bei einer benannten Tabelle ist es genau umgekehrt: Leser sehen eine echte Tabelle statt eines Codeblocks, und der Block erhält sie bereits aufgeteilt, mit der ersten Zeile als columns und jeder weiteren Zeile in rows. Das Frontmatter eignet sich für einzelne Werte wie einen Titel oder ein Ziel, nicht für eine Reihe.

Ein deklarierter Name, der sich nicht auflösen lässt, kommt trotzdem an, und zwar als { kind: 'unavailable', reason }, damit ein Block einen leeren Datensatz von einem fehlenden unterscheiden kann. Der Grund ist unknown, wenn keine Quelle im Dokument diesen Namen trägt, duplicate, wenn zwei Quellen denselben Namen beanspruchen, removed, wenn die Quelle bei geöffneter Vorschau gelöscht wurde,, oversize, wenn die Quelle größer ist, als die Lieferlimits erlauben, und unreachable, wenn die Bytes eines Bildes nicht geladen werden konnten. Nur die betroffene Quelle entfällt, die übrigen kommen weiterhin an. Prüfen Sie deshalb auf die Art unavailable und zeigen Sie eine Meldung an, statt die Daten vorauszusetzen.

Geprüfte Bibliotheken

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

Keine andere externe Skript- oder Style-URL wird in der Vorschau geladen. Um eine Version festzupinnen, füge -<version> vor .min.js ein (ältere Versionen bleiben verfügbar).

Beispiel

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

Beispiel: ein an einen json-Codeblock gebundenes Diagramm

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

Beispiel: ein an einen csv-Codeblock gebundenes Diagramm

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

Beispiel: ein an eine Dokumenttabelle gebundenes Diagramm

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

Beispiel: ein Bild, das an ein Bild im Dokument gebunden ist

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

Eine Agent-Definition ist ein Markdown-Dokument im Ordner /Agents. Das YAML-Frontmatter deklariert Identität, Tool-Allowlist und Orchestrator-Sichtbarkeit; der Textkörper unter dem Frontmatter ist der Systemprompt, an den der Orchestrator die Benutzeranfrage wortwörtlich übergibt. Jedes Feld wird beim Speichern serverseitig validiert.

Beispiel

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

Eine Prompt-Vorlage ist ein Markdown-Dokument im Ordner /Prompts. Das YAML-Frontmatter deklariert Name, Beschreibung, Argumente und Orchestrator-Sichtbarkeit; der Textkörper unter dem Frontmatter ist die Prompt-Vorlage — {{argument}}-Platzhalter werden zum Renderzeitpunkt ersetzt. Argumentwerte werden vom Slash-Sheet im Chat-Composer oder vom MCP-Aufruf prompts/get gesammelt.

PromptArgument

Jeder Eintrag im obigen `arguments`-Array hat folgende Form:

Beispiel

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

Eine Dokumentvorlage ist ein Markdown-Dokument in einem Vorlagenordner. Das YAML-Frontmatter deklariert Name, typisierte Variablen und den Abschnittsvertrag der Vorlage; der Inhalt unter dem Frontmatter ist der wiederverwendbare Text — {{key}}-Platzhalter werden ersetzt, wenn ein Dokument aus der Vorlage erstellt wird: über die Galerie, die MCP-Aktion createFromTemplate oder das Agenten-Tool create_document_from_template.

TemplateVariable

Jeder Eintrag im obigen `variables`-Array hat folgende Form:

TemplateSection

Jeder Eintrag im obigen `sections`-Array hat folgende Form:

Beispiel

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