Leaf core product gallery

data-width

Responsive block widths

Prose keeps the reading column inside this wide section. Individual evidence blocks can instead use the shared wide measure or all space the shell has left.

lf-ask · lf-options · lf-option

Asks: decisions and answers

An lf-ask is one complete Ask: its heading names the question, and one nested widget owns the answer. This sample uses lf-options, which records a choice Leaf can replay as page state. The banner shows completed/total. Press a for the next Ask waiting on you; open Asks, or press g then Shift+A, to review every active Ask and its current answer.

The banner also shows Threads, the Versions menu, Page Map (g then Shift+M), Command reference (? twice), and All leaves when another Leaf page is live. A quiet status line at the bottom right reports the current keyboard walk or a useful command result. It moves above the bottom-left shortcuts when room is tight.

lf-suggestion · lf-old · lf-new

Suggestions: proposed text changes

Accept applies the proposed text; Reject keeps the original. Undo reverses either decision.

Replace. The sample meeting starts at nine.ten. Insert. Bring a notebook. A pencil is useful too. Delete. The room is upstairs. Please arrive an hour early.

Undo a proposal while keeping its choice

Pick a route inside the proposal, accept the proposal, then use its Undo control. The proposal becomes undecided again; your route remains chosen. Reload to check that both decisions survive.

lf-draft

Drafts: editable passages and history

Edit opens a draft. Save records the new text; Cancel closes the editor. Changes lists saved versions, and Restore reapplies one.

Write a different invitation here. Try a few lines to see the editor grow.

Picked up means the saved edit entered an agent turn. The receipt follows that edit through delivery and response. The banner describes the agent’s overall availability, including work on other parts of the page.

The sample workshop is in the blue room.

Threads: anchored threads

With Threads closed, a Thread control or marked passage opens the thread inline; t moves to the next inline card and T to the previous one. Open Threads while one is focused, including with g T, and the same thread stays focused in the panel. Under View, filters narrow the list to Open, On you, On agent, or Resolved, and combine Page or Anchored with Content or Layer. Order switches the list from the page's order to Recent, which puts the thread spoken in last first under its day. Collapsed titles retain their message count and current status; On you also names the action owed. Each thread has a short title chosen by the agent; open one to read the full messages beneath it.

New information. Have the agent add a message after the page opens: its status-line notice also reaches the live region without moving focus. A new question, response failure, request outcome, or return to page activity uses that same line. Replies still unread when the page opens are announced once on arrival; rereading a stage or tool update creates no new notice.

A clean passage. Select some of these words, or Alt-click this paragraph, to start a comment. On a touch screen, select words and tap Comment on selection in the banner. The field opens after the native selection menu closes. To comment on the whole paragraph, open More page controls, choose Select element, then tap it. Cancel selection leaves the page unchanged. Type into the floating field and send it. The thread opens with your words already in it, before the server has answered, and becomes another Thread control at this passage. In Threads, three dots pulse in its title row until the agent names it. A send slow enough to notice goes quiet until the log takes it. One the server refuses leaves the words on this passage, where opening the composer again finds them; the general box in Threads gets them back in place.

Thread states: live before and after examples

These passages have real threads in this gallery. Open Threads to compare each row's status, then open a row to inspect its messages. The first pair shows a title before and after naming.

Reactions: short verdicts on a passage

Select words and press E, or hover an agent reply and use its corner control. The picker is feedback for the agent, not chat decoration. A saved passage reaction leaves only its emoji; press it to reveal the separate Remove control, then press that control to take the reaction back.

1 · 👍 · keep. The spare key is with reception.

2 · ❌ · change. This sample claims Tuesday follows Thursday.

3 · 🤔 · clarify. Bring the thing from the other place.

4 · ✂️ · shorten. At this point in time, we can now begin.

5 · 🔎 · support. The exercise involves a map.

6 · 🎯 · prioritize. The side entrance closes early.

lf-margin-entry

Margin entries: every face, state, and projection

One inventory, using the production controls. A margin entry is runtime-owned chrome whose shared code name is lf-margin-entry, rather than an authored element type. Rank and behavior cover every action, disclosure, status, tone, and ordering rank. Message workflow follows one user move: Sent records admission, Queued means a later turn will handle it, Picked up means a turn accepted it, and Working or Replying reports progress on its answer. Turn ended and Update stale keep uncertainty visible without claiming an interruption. Pickup and work decorate the existing semantic control; a status face carries the same workflow when no control survives. Face anatomy shows the icon-or-glyph choice, a related-reading count, and the transient label with its quieter context. User interaction compares rest, hover or keyboard focus, an open disclosure, and a selected page reading. Hover and Tab onto the live specimens to exercise their real feedback. The projection specimen stands at this exhibit's margin; open Page Map to see that same contributed control as a full labeled row. Reload to see the one-time pulse as Working arrives. A control dims only while its user action is waiting for the log to confirm it.

Margin entry lifecycle: act, fail, settle, and hand off

Act, fail, and settle. Accept or Reject starts as an action. The content changes immediately, and Undo dims while the event travels. A refused send restores the suggestion and puts Failed in words beside Retry and Cancel. Success leaves the changed content and an Undo control alone in the cluster. The same Agent workflow reports the decision until the result settles it.

The practice route uses the open courtyard.the covered terrace.

Already settled. This second specimen arrives with an accepted decision in its history: meet outside.meet under the awning.

Edit and hand off. Opening the draft above replaces Edit with Save and Cancel controls; Save dims while it sends. Delivery and agent work share one workflow reading. Pickup decorates the draft's Edit control; current work fills its interior with one arrival pulse. An uncertain or ended turn loses the active treatment. Hover for the control's action and current work description.

Combine roles. Use the courtyardcovered terrace for the practice session. Accept and Reject act immediately; Thread and ⋯ disclose more; a reaction mark stands only while its reaction does. Delivery statuses below report what already happened without offering another press.

Rail and pins: where a marker stands, and hiding them

Two postures; nothing moves. A marker beside prose stands in the rail, 22px past the column. The schedule below is wider than the column and carries a comment, so its marker stands on the schedule as a pin at its top-right. Narrow the window below 863px and every marker becomes a pin. Press o to hide what is drawn over the page, the pins and the passage marks; the rail stays, and nothing on the page moves. Press it again to bring them back.

lf-ask · lf-options · lf-option

Decisions: answers in context

A recorded answer stays visible in the widget that owns it; the Page Map adds no second status.

User workflows: approval and interface comments

lf-text-document · lf-num

External data: live values and provenance

Evidence widgets: charts and structured views

These shipped widgets use synthetic data so each feature has a focused example.

run, baseline, candidate
1, 4, 5
2, 7, 9
3, 9, 12

run, checks
first, 5
second, 9
third, 12

run, passed, failed
first, 5, 3
second, 9, 2
third, 12, 0

12:00:01 runner   start run=3 checks=12
12:00:04 check    schema ok
12:00:07 check    migrations ok
12:00:09 check    importer-unit ok
12:00:12 check    importer-replay ok
12:00:15 check    ledger-parity ok
12:00:18 check    api-contract ok
12:00:21 check    sdk-build ok
12:00:24 check    docs-links ok
12:00:27 check    rollback ok
12:00:30 check    shadow-diff ok
12:00:33 check    load-p95 ok
12:00:36 check    canary-guardrails ok
12:00:39 runner   done run=3 passed=12 failed=0
12:00:41 runner   report uploaded
12:00:44 runner   baseline updated
12:00:46 runner   workers released
12:00:48 runner   idle
12:01:00 watcher  heartbeat seq=0
12:01:03 watcher  heartbeat seq=3
12:01:06 watcher  heartbeat seq=6
12:01:09 watcher  heartbeat seq=9
12:01:12 watcher  heartbeat seq=12
12:01:15 watcher  heartbeat seq=15
12:01:18 watcher  heartbeat seq=18
12:01:21 watcher  heartbeat seq=21
12:01:24 watcher  heartbeat seq=24
12:01:27 watcher  heartbeat seq=27
12:01:30 watcher  heartbeat seq=30
12:01:33 watcher  heartbeat seq=33
12:01:36 watcher  heartbeat seq=36
12:01:39 watcher  heartbeat seq=39
12:01:42 watcher  heartbeat seq=42
12:01:45 watcher  heartbeat seq=45

def route(weather):
    if weather == "rain":
        return "covered terrace"
    return "courtyard"
def seat(guest):
    return guest.table

gallery/
  index.html  +20 -1
  data.json  +2
  media/
    after.png

lf-workspace · lf-pane · lf-grid

Workspace regions: nested reading areas

This workspace is embedded in a document, so its list, detail regions, and action footer stay in document flow. The same panes in a grid fill a root workspace in columns and rows when the window has room, each scrolling on its own.

copy --source cache-v1 --target cache-v2 --active-only
verify --source cache-v1 --target cache-v2 --compare values
switch --readers checkout-api,orders-api

Version changes: comparison evidence

Open the versions menu and press Compare beside v1. The Change control appears by the edited passage and opens its text diff inline.

The sample walk follows the river to the footbridge.

lf-board · lf-column · lf-card

Board and delivery state: work and workflow state

Drag the card to Tried, use its grip with Enter and the arrows, or tap a destination on a phone. Sent, Picked up, and Working report the agent workflow. A refused send offers Retry and Cancel.

This board carries more columns than the page has room for, so it scrolls sideways. Its content fades at each edge with more beyond it: the right edge at first, both edges while crossing, and the left edge at the end. The layer writes these marks on any box in that state, because the platform’s own scrollbar draws nothing until something scrolls it. Boxes holding everything they have — the code block and the diagram above — wear none.

To ask for a refinement, comment on the sample that shows it and say what should change. Plain experiment clicks do not request implementation work.