Banner
The real banner responds to the shared controls.
Checks
\n asks for a click. Write it immediately before the paragraph, list or block it annotates, and it comes out level with that block's first line; before a heading it sits above the heading instead, a heading carrying more room over it than the block before it leaves. A second note written soon after the first stacks under it, so a long note pushes the next one down the margin and away from its own block. It reaches the margin through any box that doesn't clip \u2014 a section, a tab panel, a disclosure; written inside one that does, a choose group or a board or a table, it is drawn nowhere at all, and `page check --render` refuses the version rather than letting it ship. It stands there where the window holds the strip beside the column, and beside a sidebar, which takes the margin first; the column moves left to make the room. Elsewhere, and on paper, it is a small indented block where it was written, so nothing it says rests on the margin being there. These are the page's own words, so the user can select, quote and comment on one. A stable id lets Alt-click point at the whole note. The margin holds about fifty-six characters to the line; a note running past a few lines wants to be a paragraph in the column instead.","x-example":"\n`, with `role=\"img\"` and a `` stating its claim. Its marks take classes whose paint is theme tokens, so the drawing follows the light and dark palettes: `.frame` and `.frame-head` for a window or pane and its header, `.line` (`.soft`) for a line of text, `.box` (`.hot` for the one that matters), `.highlight`, `.ghost` for where something would be, `.guide` and `.dim` for alignment and dimension lines, `.arrow` with `.tip` (`.hot`) on its marker, `.mark` for an accent dot and `.glyph` for the character on it, `.ok`, `.warn` and `.danger` fills, and `.strong`, `.small` and `.mono` for text, which is muted otherwise. Without a `width` it fills its figure; give a thumbnail one. A mark particular to the subject takes a page-local class on the same tokens.","x-example":"<figure id=\"sidebar-width\">\n <svg class=\"drawing\" viewBox=\"0 0 320 120\" role=\"img\" aria-labelledby=\"sidebar-width-t\">\n <title id=\"sidebar-width-t\">The sidebar takes 240px left of the column \n \n \n \n \n 240 \n \n In a narrow window the sidebar returns to the column. \n "},"table":{"description":"Rows of one shape, compared column by column: ceilings per plan, runs per configuration. Columns take the width of what they hold, and a table wider than the measure wraps its cells or, failing that, scrolls inside itself \u2014 so nothing in one needs a width. An identifier \u2014 a test name, a path \u2014 is one word to the line breaker: in `
Logout must revoke immediately, which rules out any store whose invalidation is eventually consistent.
"},".facts":{"description":"A label/value grid for summary facts, as a definition list. Inside a card that stands for one alternative in a group, it docks right as a fixed-width rail instead, aligning each item's scalars down the group.","x-example":"- \n
- Owner
- payments \n
- Rollout
- behind a flag \n
- \n
- Backfill the new store. \n
- Verify counts, then flip reads. \n
` it breaks inside its cell where it must, so a column of them takes a share of the measure beside the prose; bare, it holds its column to its own width and squeezes the rest to a word a line, and `page check --render` advises on a table that scrolls sideways with a cell in it wrapped at any width from a 360px phone to a wide desktop. `` names a row in the page's own voice; a bare ` ` is a column heading, set in small caps as one. A `` above the rows says what the columns mean where the section's heading doesn't. Reach for a KPI widget when the numbers are a handful of headline figures rather than a grid, and a decision widget when the rows are alternatives the user picks between.","x-example":"\n Ceilings per plan, and what each is counted against. \n Plan A minute Counted against Free 60 the token Team 600 the token
"},"td.num":{"description":"A cell holding a quantity, right-aligned so a column of them lines up on its last digit \u2014 the comparison a column of figures is there for. Say it on the column's heading cell too, or the heading hangs left of its own figures. Nothing is guessed from the text: \"60\" and \"60 sessions\" are the same shape and different things.","x-example":" Enterprise 6,000 12,000 , its backing collapsed beneath. Native disclosure; find-in-page reaches the collapsed content.","x-example":"\n The parser drops the slash on self-closed custom tags
\n document.querySelector(\"lf-code\").textContent\n// \u2192 \"rest of the paragraph\"
\n"},"pre > code[class*=\"language-\"]":{"description":"A literal the user can select and quote: a command to run, a config file, a snippet of output. Name the language to color it \u2014 one of $languages, the same list a widget's own language attribute is held to; a language outside it stays uncolored. Leave the class off where the body isn't source; nothing is guessed from the text. Reach for an annotated code block instead when the block is a walkthrough: numbered lines, highlighted ranges, remarks anchored at a line.","x-example":"leaf page check ~/.local/state/leaf/pages/auth-diagnosis --render
"},"lf-ask":{"description":"Prompt context and an arrival region shared by the independent asks nested within.","x-space":"column","x-instructions":"Begin with a direct heading that names the shared question or context without relying on surrounding prose. Include the evidence needed to answer. Each nested widget declaring x-awaits registers its own ask and keeps its source identity and answer. Keep an ordinary semantic section around the context when the document needs a section landmark.","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"}},"required":["id"],"additionalProperties":false,"x-content":"markup","x-ask-context":true,"x-upgrade":false,"x-example":"\n \n What should a full store do?
\n The beta never reached the cap. This decides what the first workspace at it sees; each option draws its document list once the store fills.
\n \n editing: continuesrecommendedDrop the oldest documents Editing continues. My take: this keeps work moving without losing server data.\n \n \n \n \n editing: pausedPause offline editing Nothing leaves.\n \n \n \n \n \n \n "},"lf-gloss":{"description":"A short explanation the reader can open beside a phrase without leaving its sentence.","x-instructions":"Write a self-contained explanation at the first useful occurrence rather than on every repetition. Keep the phrase out of authored parentheses: print adds the explanation as a parenthetical note.","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"tip":{"type":"string","minLength":1}},"required":["tip"],"additionalProperties":false,"x-content":"markup","x-inline":true,"x-says":{"tip":"after"},"x-upgrade":true,"x-verbatim":true,"x-example":"Deploy through a walking skeleton before parallelizing."},"lf-num":{"description":"A measured scalar embedded in prose, tied to the snapshot that established it.","x-instructions":"Write the displayed value with its unit as the element text. Bind source to the repeatable measurement feed and use the run receipt returned by leaf data set. Use via when the source id alone leaves the command or query unclear.","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"source":{"type":"string","pattern":"^[a-z][a-z0-9-]*$"},"run":{"type":"string","minLength":1},"via":{"type":"string","minLength":1}},"required":["source","run"],"additionalProperties":false,"x-content":"markup","x-data":{"measurement":{"contract":"measured-scalar","source":"source"}},"x-inline":true,"x-measured":{"input":"measurement","run":"run"},"x-upgrade":false,"x-example":"The import now takes 184 ms at p95."},"lf-text-document":{"description":"A file-backed text document with optional syntax coloring and rendered Markdown or HTML previews.","x-instructions":"Bind source to the page-owned feed. Use label to name the file. Set preview to markdown or html for Preview and Source tabs over the same text; language optionally overrides the source syntax. HTML is a separate document: its provider owns typography, spacing, and responsive CSS; it inherits no Leaf styles. Both readings share a scrollable viewport sized by --lf-bound (28rem by default). Compose ordinary lf-tabs for other kinds of preview. Put it inside details when it should begin collapsed.","x-name":"label","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"source":{"type":"string","pattern":"^[a-z][a-z0-9-]*$"},"label":{"type":"string","minLength":1},"preview":{"type":"string","enum":["markdown","html"]},"language":{"type":"string"}},"required":["id","source"],"additionalProperties":false,"x-content":"empty","x-data":{"document":{"contract":"text-document","source":"source"}},"x-language":"language","x-upgrade":true,"x-example":"Migration plan
\n\nPrepare
Take a snapshot.
Check capacity
Leave headroom for the copy.
Move
Shift one cohort at a time.
\n Recent activity
\n "},"lf-options":{"description":"Alternatives the user can choose individually or as a set to answer a question.","x-space":"column","x-instructions":"Keep shared premises and evidence with the group; lf-ask can frame its question and context. Keep each alternative's case and decision-relevant evidence inside its lf-option; an accept-or-reject proposal's figure of today beside the change compares both answers, so it stays with the group. Use multiple when the selections form one answer because they depend on each other, such as a limit on how many; leave it off for mutually exclusive alternatives. Items each answerable on its own are separate asks (references/authoring-asks.md). The built-in Another option field accepts unlisted answers, so author the alternatives you mean without a catch-all option. Use for only to select sections or work items that exist independently of the decision; do not create sections solely to hold alternatives. A user-added option stays in the group from the log, where the user put it; leave it out of revisions. A multiple-choice ask still needs the user's Done even when chosen is authored. Use settled to collapse a retired decision while preserving its options and anchors.","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"choose":{"type":"boolean"},"multiple":{"type":"boolean"},"settled":{"type":"boolean"},"restated":{"type":"boolean"}},"dependentRequired":{"choose":["id"],"settled":["id"],"multiple":["choose"]},"additionalProperties":false,"x-content":"members","x-word":"module","x-upgrade":true,"x-awaits":{"value":"choose","when":{"choose":[true],"settled":[false]},"retired":"settled","answered":{"choose":{"when":{"multiple":[false]}},"answer":{"when":{"multiple":[true]}}}},"x-state":{"choose":{"unit":"widget","record":{"kind":"attribute","attr":"chosen"}},"add":{"detail":{"type":"object","properties":{"option":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"text":{"type":"string","minLength":1}},"required":["option","text"],"additionalProperties":false},"unit":"option","creates":{"child":"lf-option","words":"text"}},"answer":{"detail":{"type":"object","additionalProperties":false},"unit":"widget"}},"x-example":"\n Where should run status appear?
\n Both choices preserve the existing run detail.
\n \n \n effort: lowrisk: medrecommended\n Status on the run list One join; failures are visible without a click.\n \n \n \n \n \n effort: nonerisk: low\n Leave the list alone No work; failures stay one click away.\n \n \n \n \n \n "},"lf-option":{"description":"One alternative in a decision: a compact label, or a card showing what choosing it gives the user.","x-instructions":"Lead a card with matching small.tag comparison labels naming the facts that distinguish the alternatives, then a `` title and a sentence naming its consequence. Mark the option you recommend with `recommended` after its comparison labels, and give the reason in prose. chosen records the user's pick. Under them, show what choosing it gives the user (references/authoring-asks.md): where alternatives differ in arrangement, structure, or mechanism, an svg.drawing thumbnail of each in the same frame, alike except where they differ; where they differ in how an existing interface looks, a capture of each; where they differ in how something behaves, that behavior working inside each option; where they differ in wording, the words as they would appear. Add paragraphs or a fact rail when the face alone cannot support the choice. A bare label suits an alternative needing no further case. Direct text uses inline Markdown; use HTML children for block content. A for target must remain useful independently of the decision and does not supply the option's words. Rewriting a picked option needs restated; read $restated for when to rewrite instead of correcting beside the ask.","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"for":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"chosen":{"type":"boolean"},"restated":{"type":"boolean"}},"required":["id"],"additionalProperties":false,"x-owners":["lf-options"],"x-content":"markup","x-text-format":"inline-markdown","x-refers":{"for":{}},"x-upgrade":false},"lf-code":{"description":"A source-code excerpt with syntax coloring, highlighted lines, and line-anchored remarks.","x-instructions":"Write the exact code inside pre at column 0, HTML-escaping & before < and >. Set language for source code and omit it for plain transcripts or command output. For excerpts, set lines to the ascending source ranges quoted, such as 1505-1507,1520-1527; hi and lf-note at then use those source numbers. A note addressed to an omitted line captions the elided row.","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"language":{"type":"string"},"hi":{"type":"string","pattern":"^[0-9]+(-[0-9]+)?(,[0-9]+(-[0-9]+)?)*$"},"lines":{"type":"string","pattern":"^[1-9][0-9]*(-[1-9][0-9]*)?(,[1-9][0-9]*(-[1-9][0-9]*)?)*$"}},"required":["id"],"additionalProperties":false,"x-content":"data","x-language":"language","x-upgrade":true,"x-example":"\ndef bracket(temp):\n if temp < 0:\n return \"steel\"\n return \"cedar\"\n
\n Freezing is the only threshold that matters. \n\n{\n ariaLabel: \"Hours to first review by week: backend fell from 31 to 12, frontend from 18 to 11\",\n x: {type: \"utc\", ticks: \"monday\", label: null},\n y: {grid: true, label: \"hours to first review\"},\n color: {legend: true, range: [\"var(--series-1)\", \"var(--series-2)\"]},\n marks: [\n Plot.lineY(\n [\n {week: \"2026-05-04\", team: \"backend\", hours: 31},\n {week: \"2026-05-11\", team: \"backend\", hours: 26},\n {week: \"2026-05-18\", team: \"backend\", hours: 12},\n {week: \"2026-05-04\", team: \"frontend\", hours: 18},\n {week: \"2026-05-11\", team: \"frontend\", hours: 21},\n {week: \"2026-05-18\", team: \"frontend\", hours: 11},\n ],\n {x: \"week\", y: \"hours\", stroke: \"team\", marker: true},\n ),\n ],\n}\nThe option cards
\nThe chips now sit above the title, so a scanning eye reads cost before prose.
\n\n \n Heated perch Wire the south feeder. \n Squirrel baffle \n \n \n Camera mount \n \n "},"lf-column":{"description":"One named board column, including empty columns the user can move a card into.","x-instructions":"Write a label that names the column on its own. Use tone when landing here carries a status judgment, such as blocked, needing review, or done; otherwise leave it neutral.","x-name":"label","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"label":{"type":"string"},"tone":{"type":"string"}},"required":["id","label"],"additionalProperties":false,"x-owners":["lf-board"],"x-content":"members","x-tone":"tone","x-upgrade":false,"x-says":{"label":"before"}},"lf-card":{"description":"One board card whose identity and comments survive user moves.","x-instructions":"Lead with a `` title and follow with prose. Keep its id stable across moves. Rewriting a card the user moved needs restated; read $restated.","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"restated":{"type":"boolean"}},"required":["id"],"additionalProperties":false,"x-owners":["lf-column"],"x-content":"markup","x-work":true,"x-upgrade":false},"lf-tabs":{"description":"Several views of one artifact, as page navigation, a local tabbed section, or a side-list queue.","x-instructions":"Place the first set directly in main for page navigation; other placements make a framed local tabbed section. Put the shared title and lede before page tabs and the primary current view first. Each lf-tab is a self-contained view, while history, Threads, the On panel, versions, and sign-off belong to the whole page. Retire obsolete views once current work no longer depends on them, preserving needed context and passages anchoring open threads or decisions in force in details within the relevant tab. Use list=\"side\" for a queue beside its selected item; it remains framed and its list does not stick.","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"list":{"type":"string","enum":["side"]}},"required":["id"],"additionalProperties":false,"x-content":"members","x-upgrade":true,"x-patch":"members","x-views":true,"x-example":"\n \n Wire the first site this week.
\n \n \n Keep the original outcome and constraints in reach.
\n \n "},"lf-tally":{"description":"A count of the asks a region still holds open, such as a queue's decisions left to make, with an optional control to the next one.","x-instructions":"Name the region whose asks it counts with for, such as a side-list lf-tabs queue, and place it where the reader looks for the queue's state, such as a workspace header beside its .tag chips. Add next for a Next on me control that steps through the region's asks waiting on the user. Write it empty with a stable id; it counts asks the page already poses, so state no count of them in prose or chips.","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"for":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"next":{"type":"boolean"}},"required":["id","for"],"additionalProperties":false,"x-content":"empty","x-inline":true,"x-prepaint":"00 of 00 to answerNothing to answer","x-refers":{"for":{}},"x-upgrade":true,"x-example":"\n Release triage
\n
\n \n\n \n \n Ship the retry cap?
\n \n Ship it \n Hold for a canary \n \n \n \n \n \n Remove the flag?
\n \n Remove it \n Keep it a release \n \n \n \n "},"lf-tab":{"description":"One labeled view in a tab set, optionally summarized and grouped in a side-list queue.","x-instructions":"A side-list queue shows summary under each label, so the user can choose an item without opening it. Start it with what the item is about in a few words, such as the problem a ticket reports, unless the label already says so, then add what sets the item apart from its neighbours, such as its age or suggested outcome. Leave out the item's group, which its heading already shows. Where a queue's items fall into kinds the user works through in turn, such as merge, close, and FYI, give each item its kind as group and place each kind's items together in the order the user should take them; neighbouring tabs with the same group stand under one heading. Keep ids distinct across tabs: they share the page's one id space.","x-name":"label","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"label":{"type":"string"},"summary":{"type":"string"},"group":{"type":"string"}},"required":["id","label"],"additionalProperties":false,"x-owners":["lf-tabs"],"x-content":"markup","x-upgrade":false},"lf-draft":{"description":"A block of text the user owns and can rewrite in place, with recorded revision history.","x-space":"column","x-instructions":"Write exact Markdown source as followed by one newline, the HTML-escaped source, and
immediately after the source. HTML consumes that first newline; every subsequent character, including indentation and trailing newlines, belongs to the draft. HTML-escape & before < and >. Use a suggestion for an agent-proposed change to existing prose. A draft asks for an edit when needed is present; otherwise it is an optional editing surface. Use lf-ask when that request needs its own heading and supporting evidence, or page sign-off to approve the whole page. Preserve the user\u2019s exact source on revision; read authoring-revisions.md, Honor user state. To replace an edited passage deliberately, write the new text and mark the draft restated; read $restated.","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"needed":{"type":"boolean"},"restated":{"type":"boolean"}},"required":["id"],"additionalProperties":false,"x-content":"data","x-word":"module","x-awaits":{"value":"edit","when":{"needed":[true]},"answered":{"edit":{}}},"x-upgrade":true,"x-verbatim":true,"x-text-format":"markdown","x-state":{"edit":{"unit":"widget","record":{"kind":"body"}}},"x-example":"\nAdds --dry-run to every mutating command.
\n \n effort: lowPaper maps Nothing to charge. \n effort: medrecommendedDedicated GPS Offline maps, week-long battery. My take: this is the better field tool. \n \n "},"lf-pane":{"description":"A reading region with an optional header and footer, independently scrollable inside a full-height workspace.","x-instructions":"For independent scrolling, place the pane as a full-height workspace\u2019s body or a direct cell; elsewhere the page scrolls. Wrap multiple body blocks in one div or section. Use label to name the region accessibly and its header for the visible heading. Put action widgets in the direct footer when they should remain reachable as the body scrolls.","x-name":"label","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"label":{"type":"string","minLength":1}},"required":["id","label"],"additionalProperties":false,"x-content":"markup","x-reading-role":"pane","x-upgrade":true,"x-verbatim":true,"x-example":"Read the selected record.
\nflowchart TD\n accTitle: Checkout from cart to receipt\n accDescr: The cart reaches a payment decision; a paid order produces a receipt.\n Cart([Cart]) --> Pay{Paid?}\n Pay --> Receipt[(Receipt)]\n\ndiff --git a/feeders/mount.py b/feeders/mount.py\n--- a/feeders/mount.py\n+++ b/feeders/mount.py\n@@ -1,2 +1,2 @@\n def bracket():\n- return \"plastic\"\n+ return \"steel\"\n
\n```\n\nKeep unchanged tree items as stable comparison landmarks. Prefer one focused file or entry point per widget for a large repository. Do not transcribe the output into markup, invent attribute reads as calls, or redraw separate before-and-after diagrams.","type":"object","properties":{"id":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"},"source":{"type":"string","pattern":"^[a-z][a-z0-9-]*$"},"diff":{"type":"string","pattern":"^[a-z0-9][a-z0-9-]*$"}},"required":["id","source","diff"],"additionalProperties":false,"x-content":"empty","x-data":{"document":{"contract":"text-document","source":"source"}},"x-refers":{"diff":{"via":"$diff.widgets","where":{"role":"patch"}}},"x-upgrade":true,"x-height":true,"x-example":"Which notification should we build?
Status strip
The real status strip responds to the same controls.
Build the Waiting for a Playwright recording.
"},"lf-trace-bookmark":{"description":"An authored, labeled jump to an exact captured image or action phase in its trace.","x-instructions":"Set target to an existing trace visual coordinate: trace-ARCHIVE_SHA256-image-IMAGE_ID or trace-ARCHIVE_SHA256-phase-ACTION_ID-PHASE. Read those ids from the imported source; phase is before, action, after, start or end. The widget derives elapsed time from the capture. A target absent from the recording is shown as unavailable. A key explicitly pairs this semantic result with bookmarks in the owner\u2019s compare group; elapsed times and label text are never used to infer correspondence.","type":"object","properties":{"label":{"type":"string","minLength":1},"target":{"type":"string","pattern":"^trace-[a-f0-9]{64}-(image|phase)-[a-z0-9-]+$"},"key":{"type":"string","pattern":"^[a-z][a-z0-9-]*$"}},"required":["label","target"],"additionalProperties":false,"x-content":"empty","x-owners":["lf-trace"],"x-name":"label","x-example":"Generative UI for your agent.
The agent builds the page your task needs.