Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0
bento
Two to four panels, each a claim with its own preview, laid out from their count.
Count
{
"kind": "section",
"shell": {
"inset": "contained",
"density": "section"
},
"block": {
"type": "bento",
"head": {
"eyebrow": "Where it runs",
"title": "Laptop, team, agent."
},
"panels": [
{
"title": "On a laptop",
"text": "Before the pull request.",
"specimen": {
"type": "terminal",
"variant": "plain",
"title": "zsh · feature/shorter-timeouts",
"lang": "console",
"lines": [
"$ diffkeel diff staging",
"rendered staging from 2 files in 18 ms",
"api.yaml timeout 30s -> 10s",
"api.yaml retries 3 -> 5",
"1 file, 2 changes, 0 secrets",
"$ diffkeel render staging --key api.timeout",
"10s from staging.yaml, line 12",
" over base.yaml, line 4 (30s)",
"$ diffkeel diff staging --json | wc -l",
"2"
]
}
},
{
"title": "For the team",
"text": "Stored diffs and approvals, on Team.",
"specimen": {
"type": "api-call",
"method": "POST",
"path": "/v1/diffs/{id}/approve",
"examples": [
{
"label": "Approve",
"request": "{ \"env\": \"prod\" }",
"status": "200 OK",
"response": "{ \"id\": \"df_8k2\", \"approved\": true }"
}
]
}
},
{
"title": "In an agent",
"text": "JSON output an agent reads.",
"specimen": {
"type": "agent-prompt",
"label": "Ask an agent",
"lines": [
"Run diffkeel diff prod --json and explain each change in one line."
]
}
}
]
}
}
{
"title": "bento",
"type": "object",
"properties": {
"type": {
"type": "string",
"const": "bento"
},
"head": {
"type": "object",
"properties": {
"eyebrow": {
"type": "string",
"minLength": 1,
"maxLength": 28
},
"title": {
"type": "string",
"minLength": 1,
"maxLength": 72
},
"lede": {
"type": "string",
"minLength": 1,
"maxLength": 300
},
"max": {
"type": "string",
"pattern": "^(none|\\d+(\\.\\d+)?(em|ch|px))$"
},
"ledeMax": {
"type": "string",
"pattern": "^(none|\\d+(\\.\\d+)?(em|ch|px))$"
},
"balance": {
"type": "boolean"
},
"scale": {
"type": "string",
"enum": [
"compact",
"large"
]
},
"tag": {
"type": "string",
"minLength": 1,
"maxLength": 8
},
"layout": {
"type": "string",
"enum": [
"split"
]
}
},
"required": [
"eyebrow"
],
"additionalProperties": false
},
"panels": {
"minItems": 2,
"maxItems": 4,
"type": "array",
"items": {
"type": "object",
"properties": {
"title": {
"type": "string",
"minLength": 1,
"maxLength": 48
},
"text": {
"type": "string",
"minLength": 1,
"maxLength": 120
},
"specimen": {
"$ref": "#"
}
},
"required": [
"title",
"specimen"
],
"additionalProperties": false
}
}
},
"required": [
"type",
"head",
"panels"
],
"additionalProperties": false
}When to use
Use a bento when each claim has its own proof: a script, a prompt, a call. It holds two to four panels under a head, and each panel holds a title, a line and one preview that is a terminal, an agent-prompt or an api-call.
The count lays the panels out; no field sizes them. For claims with no preview, use feature-grid.
Give each panel a claim a reader can check against its own preview, and make every preview different.
Use instead
feature-grid: claims with no preview
The record
{
"kind": "section",
"shell": { "inset": "contained", "density": "section" },
"block": {
"type": "bento",
"head": { "eyebrow": "Where it runs", "title": "Laptop, team, agent." },
"panels": [
{
"title": "On a laptop",
"text": "Before the pull request.",
"specimen": {
"type": "terminal",
"variant": "plain",
"title": "zsh · feature/shorter-timeouts",
"lang": "console",
"lines": [
"$ diffkeel diff staging",
"rendered staging from 2 files in 18 ms",
"api.yaml timeout 30s -> 10s",
"api.yaml retries 3 -> 5",
"1 file, 2 changes, 0 secrets",
"$ diffkeel render staging --key api.timeout",
"10s from staging.yaml, line 12",
" over base.yaml, line 4 (30s)",
"$ diffkeel diff staging --json | wc -l",
"2"
]
}
},
{
"title": "For the team",
"text": "Stored diffs and approvals, on Team.",
"specimen": {
"type": "api-call",
"method": "POST",
"path": "/v1/diffs/{id}/approve",
"examples": [
{ "label": "Approve", "request": "{ \"env\": \"prod\" }", "status": "200 OK", "response": "{ \"id\": \"df_8k2\", \"approved\": true }" }
]
}
},
{
"title": "In an agent",
"text": "JSON output an agent reads.",
"specimen": {
"type": "agent-prompt",
"label": "Ask an agent",
"lines": ["Run diffkeel diff prod --json and explain each change in one line."]
}
}
]
}
}Smallest that parses
{
"type": "bento",
"head": { "eyebrow": "Where it runs", "title": "Laptop, team, agent." },
"panels": [
{
"title": "On a laptop",
"text": "Before the pull request.",
"specimen": {
"type": "terminal",
"variant": "plain",
"title": "zsh · feature/shorter-timeouts",
"lang": "console",
"lines": [
"$ diffkeel diff staging",
"rendered staging from 2 files in 18 ms",
"api.yaml timeout 30s -> 10s",
"api.yaml retries 3 -> 5",
"1 file, 2 changes, 0 secrets",
"$ diffkeel render staging --key api.timeout",
"10s from staging.yaml, line 12",
" over base.yaml, line 4 (30s)",
"$ diffkeel diff staging --json | wc -l",
"2"
]
}
},
{
"title": "For the team",
"text": "Stored diffs and approvals, on Team.",
"specimen": {
"type": "api-call",
"method": "POST",
"path": "/v1/diffs/{id}/approve",
"examples": [
{ "label": "Approve", "request": "{ \"env\": \"prod\" }", "status": "200 OK", "response": "{ \"id\": \"df_8k2\", \"approved\": true }" }
]
}
},
{
"title": "In an agent",
"text": "JSON output an agent reads.",
"specimen": {
"type": "agent-prompt",
"label": "Ask an agent",
"lines": ["Run diffkeel diff prod --json and explain each change in one line."]
}
}
]
}Fields and bounds
From @mdxui/site@7.0.0-alpha.0. A count reads as min–max × item; a string bound is its maximum length in characters, and links its refusal.
| Prop | Type and bound | Required |
|---|---|---|
head | object | yes |
head.eyebrow | string ≤28 | yes |
head.title | string ≤72 | no |
head.lede | string ≤300 | no |
head.max | string (pattern) | no |
head.ledeMax | string (pattern) | no |
head.balance | boolean | no |
head.scale | "compact" | "large" | no |
head.tag | string ≤8 | no |
head.layout | "split" | no |
panels | 2–4 × object | yes |
panels[].title | string ≤48 | yes |
panels[].text | string ≤120 | no |
panels[].specimen | Section type (nested) | yes |
Variants and counts
Three designed counts, 2, 3 and 4, each with its own arrangement.
One record in five Themes
Shells
In three Businesses
Carried by the api-product, article and directory-product Templates. Seen on pages/diffkeel/home.json, section 5.
Do and do not
Each panel holds one of the three preview types.
{
"title": "From a shell",
"text": "One command.",
"specimen": {
"type": "command-row",
"command": "npm i harbor-tides"
}
}SectionSchema.safeParse(record)block.panels.1a bento panel holds one specimen: terminal, agent-prompt, api-call
A command row in a panel is refused: a panel holds a terminal, an agent-prompt or an api-call.
Each panel proves a different claim.
Three panels showing one call teach one thing three times.
Accessibility
| Check, on the exemplar render | Limit | Now | Pass |
|---|---|---|---|
| Skipped heading levels | 0 | 0 | yes |
| Unnamed nav landmarks | 0 | 0 of 0 | yes |
| Scroll regions a keyboard cannot reach | 0 | 1 of 1 | no |
| Copy controls that announce the result | all | 0 of 1 | no |
| Images and icons with no text alternative | 0 | 0 | yes |
Text pairs below AA across the 5 Themes and every scheme they emit: 5. See Render checks.
- Landmark The bento sits in
main. It adds no landmark. - Heading level The head title renders as an
h2and each panel title as anh3. - Focus order Tab reaches each panel copy control in record order. A window that scrolls sideways takes no focus, and a copy does not announce itself; both are counted above.