Documentation Strata

Utilisez une section blog: dans le premier bloc de métadonnées YAML pour concevoir un article publié. Le panneau d’apparence modifie ce même texte et préserve les autres clés et commentaires.

L’aperçu suit le brouillon. La publication enregistre le design complet, y compris les valeurs héritées du thème de publication ; les modifications ultérieures du brouillon ou du thème du profil ne changent pas cette version. Les présentations utilisent leurs propres réglages. Les métadonnées sont masquées sur les pages publiques et dans les descriptions.

Les clés inconnues dans blog:, le YAML mal formé, les valeurs invalides, les références absentes ou en double et un contraste insuffisant empêchent la publication. Corrigez toutes les erreurs ; les modifications par agent renvoient des résultats blogValidation. Réinitialisez un réglage pour hériter de sa valeur par défaut. Par défaut, la table des matières est masquée et la surface de lecture est opaque.

Le résumé est limité à 160 caractères ; les étiquettes à 10 éléments de 32 caractères. Le nom d’une série accepte 80 caractères et exige un ordre entier positif. Les noms exacts regroupent les articles ; les numéros d’ordre identiques produisent des avertissements. noindex conserve l’article sur le profil et dans les flux, mais le retire du plan du site et demande aux moteurs de ne pas l’indexer. cover désigne une image du document ; nommez-la avec <!-- strata:name=cover --> juste avant l’image.

Les couleurs exigent des valeurs #RRGGBB entre guillemets pour les modes clair et sombre. background colore la surface de lecture et, sans fond décoratif, la page. Le texte et les liens accent doivent atteindre un contraste de 4.5:1 sur la surface réelle dans les deux modes. Les polices proviennent de la liste ci-dessous. Une surface translucide utilise une opacité de 88% et n’est autorisée que sur une couleur ou un dégradé dont le contraste reste suffisant sur toute son étendue.

Choisissez un seul type de fond. Les dégradés acceptent 2 à 5 couleurs ; les motifs utilisent les noms ci-dessous. Le fond image désigne une image du document. Le fond HTML désigne un bloc html et exige une couleur ou une image statique de secours. Il s’exécute derrière l’article dans le bac à sable existant, ne reçoit ni clics ni focus et s’arrête lorsque l’onglet est masqué. La réduction des animations ou des données, les appareils limités, les aperçus HTML désactivés et les erreurs activent le secours. L’impression et le PDF omettent le fond. Le HTML ou CSS direct de page et les articles entièrement HTML ne sont pas pris en charge.

Les blocs HTML déclarant uses="frontmatter" lisent strata.data.get("frontmatter").values. Les clés résolues sont blog.typography, blog.palette, blog.readingWidth, blog.blockControls, blog.tableOfContents, blog.readingSurface, blog.accent, blog.background, blog.fonts.heading et blog.fonts.body. Les couleurs suivent le mode courant. Les polices non définies sont omises. Les blocs publiés ne reçoivent que ces valeurs ; les autres métadonnées scalaires restent disponibles uniquement dans l’éditeur. Un fond reçoit seulement ces valeurs et le mode de couleur, jamais d’autres données du document.

Champs et valeurs autorisées

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

Exemple complet de fond 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>
```

Les blocs de code étiquetés html s'affichent sous forme d'aperçus en direct et isolés dans l'éditeur Strata et dans les PDF exportés — graphiques, diagrammes, scènes 3D et petits widgets interactifs, écrits comme un bloc de code délimité ordinaire.

Écrivez un bloc de code délimité avec le tag de langage html. Son balisage, ses styles et ses scripts s'exécutent automatiquement dans un aperçu isolé ; chaque modification relance le rendu depuis un état propre, et les lecteurs peuvent basculer entre l'aperçu et la source.

L'aperçu est totalement isolé : aucun cookie ni stockage, aucun accès à la page environnante et aucune URL externe. WebSocket, beacons et envois de formulaires sont purement et simplement supprimés, et fetch n'atteint que les ressources vérifiées de /sandbox/ listées ci-dessous, ce qui permet au moteur Doom de charger ses propres données de jeu. Tout ce qui enfreint ces contraintes échoue dans son propre aperçu et nulle part ailleurs.

Les tokens de design Strata sont préchargés : des variables CSS telles que var(--color-foreground), var(--color-muted-foreground), var(--color-primary) et var(--color-border) correspondent au thème de l'application, et l'aperçu suit automatiquement le mode clair ou sombre du lecteur. Les couleurs que vous définissez vous-même sont utilisées exactement telles que vous les écrivez et ne sont jamais ajustées ; définissez donc le fond et le texte ensemble — un bloc qui ne définit que l'un des deux peut se révéler illisible dans le mode que vous n'avez pas testé.

Un aperçu démarre à environ 360 pixels de hauteur, puis suit son contenu : un contenu plus haut agrandit le bloc, un contenu plus court le réduit. Cette hauteur de départ sert aussi de référence aux unités relatives, si bien que height: 100%, 100vh et window.innerHeight fonctionnent tous — c'est précisément ce qu'utilisent d'ordinaire les scènes three.js et les graphiques pleine surface.

Les erreurs de script, les rejets de promesses non gérés et les sorties console.error/console.warn produits à l'intérieur de l'aperçu sont collectés et affichés en dessous, avec les numéros de ligne lorsque le navigateur les signale. Un aperçu ne dispose pas de ses propres outils de développement : ce panneau est donc l'endroit où un bloc explique pourquoi il ne s'est pas affiché.

Créer un graphique à partir des données du document

Un bloc peut lire des données qui se trouvent déjà dans le même document, de sorte qu'un graphique reste en phase avec les chiffres que ses lecteurs voient. Quatre types de source peuvent être nommés. Un bloc de code json, csv, tsv ou yaml se nomme sur sa propre ligne d'ouverture, par exemple avec name=sales. Un tableau se nomme au moyen d'une ligne de commentaire HTML placée juste au-dessus : <!-- strata:name=headcount -->. Le frontmatter du document est toujours disponible sous le nom réservé frontmatter, avec ses champs scalaires uniquement. Une image du document se nomme comme un tableau, au moyen d'une ligne de commentaire HTML placée juste au-dessus : <!-- strata:name=hero -->. Dans l'éditeur, sélectionnez l'image et utilisez Nom pour les données. Ces quatre types sont les seules données auxquelles un bloc peut se lier. Un nom commence par une lettre, se poursuit avec des lettres, des chiffres, des traits d'union ou des tirets bas, compte au plus 64 caractères et doit être unique dans le document.

Un bloc html déclare ce qu'il consomme sur sa propre ligne d'ouverture, par exemple avec uses="sales,headcount". Un bloc ne reçoit que les sources qu'il nomme et jamais le reste du document, il ne peut pas atteindre les données d'un autre document, et rien ne lui parvient que son lecteur ne puisse déjà voir ici. Modifier le code du bloc ou sa déclaration recharge l'aperçu depuis un état propre. Modifier seulement les données derrière un nom déjà déclaré met à jour l'aperçu en cours sans le redémarrer. Un bloc déclare au plus huit noms, et tout nom au-delà du huitième arrive sous la forme unavailable avec la raison oversize plutôt que d'être abandonné sans bruit.

Dans l'aperçu, les données déclarées sont installées sous strata.data avant l'exécution de vos propres scripts. strata.data.get(name) renvoie une source et strata.data.names énumère les noms déclarés par le bloc, dans l'ordre de la déclaration. Une source json, csv, tsv ou yaml arrive non analysée sous la forme { kind: 'text', format, text }, le bloc l'analyse donc avec l'analyseur de son choix. Un tableau arrive sous la forme { kind: 'table', columns, rows }, chaque cellule étant du texte brut, sans conversion numérique ni conversion de date. Le frontmatter arrive sous la forme { kind: 'frontmatter', values }. Toutes les valeurs livrées sont figées en profondeur. Lorsqu'une source liée change, Strata envoie un nouvel instantané et déclenche l'événement strata:data sur window, dont le detail porte les nouvelles données. strata.data.get renvoie déjà cet instantané au moment où l'événement se déclenche. L'aperçu ne demande jamais de données de lui-même, un bloc qui ignore l'événement continue donc de fonctionner avec ce qu'il a reçu au départ.

Une image arrive sous la forme { kind: 'image', url, width, height, alt }, où url est une URL de données portant les octets de l'image elle-même : un bloc peut donc l'affecter directement à un élément img sans aucun accès réseau. Strata récupère ces octets avec les droits du lecteur et les intègre avant le démarrage de l'aperçu ; l'aperçu ne voit jamais de lien qu'il pourrait suivre et ne demande jamais d'image lui-même. Les images disposent d'un budget distinct : une image peut livrer jusqu'à 3 Mio, et toutes les images d'un aperçu jusqu'à 12 Mio au total, les plus grandes étant abandonnées en premier si ce budget est épuisé. Une image dont les octets n'ont pas pu être récupérés arrive comme unavailable avec la raison unreachable. Une présentation peut afficher une image nommée sans la moindre ligne de code : une ligne d'ouverture de diapositive écrite layout=image uses="hero" l'affiche en pleine page et lit sa légende dans le corps de la diapositive.

Le type à privilégier dépend de qui d'autre doit lire les chiffres. Un bloc json ou csv est compact, se compare proprement d'une version à l'autre et garde une longue série hors du texte, mais il arrive sous forme de texte brut et c'est au bloc de l'analyser ; découper une ligne csv sur les virgules est l'erreur classique, car cela déchire tout champ entre guillemets qui en contient une. Un tableau nommé fait le choix inverse : les lecteurs voient un vrai tableau plutôt qu'un bloc de code, et le bloc le reçoit déjà découpé, avec la première ligne comme columns et chaque ligne suivante dans rows. Le frontmatter convient à des valeurs isolées, comme un titre ou un objectif, pas à une série.

Un nom déclaré qui ne peut pas être résolu arrive quand même, sous la forme { kind: 'unavailable', reason }, afin qu'un bloc puisse distinguer un jeu de données vide d'un jeu de données absent. La raison est unknown lorsqu'aucune source du document ne porte ce nom, duplicate lorsque deux sources revendiquent le même nom, removed lorsque la source a été supprimée alors que l'aperçu était ouvert, oversize lorsque la source dépasse les limites de livraison, et unreachable lorsque les octets d'une image n'ont pas pu être récupérés. Seule la source concernée est abandonnée, les autres arrivent toujours. Vérifiez donc le type unavailable et affichez un message plutôt que de supposer que les données sont présentes.

Bibliothèques approuvées

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

Aucune autre URL externe de script ou de style ne se charge dans l'aperçu. Pour figer une version, insérez -<version> avant .min.js (les versions antérieures restent disponibles).

Exemple

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

Exemple : un graphique lié à un bloc 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>
```

Exemple : un graphique lié à un bloc 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>
```

Exemple : un graphique lié à un tableau du document

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

Exemple : une image liée à une image du document

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

Une définition d'agent est un document Markdown placé dans votre dossier /Agents. Le frontmatter YAML déclare l'identité de l'agent, la liste blanche d'outils et sa visibilité auprès de l'orchestrateur ; le corps situé sous le frontmatter est le prompt système que l'orchestrateur transmet textuellement à la requête de l'utilisateur. Chaque champ est validé côté serveur lors de l'enregistrement.

Exemple

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

Un modèle de prompt est un document Markdown placé dans votre dossier /Prompts. Le frontmatter YAML déclare le nom, la description, les arguments et la visibilité auprès de l'orchestrateur ; le corps situé sous le frontmatter est le modèle de prompt — les espaces réservés {{argument}} sont substitués lors du rendu. Les valeurs des arguments sont collectées par la fiche slash du compositeur de chat ou par la requête MCP prompts/get.

PromptArgument

Chaque entrée du tableau `arguments` ci-dessus a la forme suivante :

Exemple

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

Un modèle de document est un document Markdown dans un dossier de modèles. Le frontmatter YAML déclare le nom, les variables typées et le contrat de sections ; le corps sous le frontmatter est le contenu réutilisable — les espaces réservés {{key}} sont substitués lors de la création d'un document depuis le modèle, via la galerie, l'action MCP createFromTemplate ou l'outil d'agent create_document_from_template.

TemplateVariable

Chaque entrée du tableau `variables` ci-dessus a la forme suivante :

TemplateSection

Chaque entrée du tableau `sections` ci-dessus a la forme suivante :

Exemple

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