Leaf core product gallery

lf-ask · lf-options · lf-option

On me: decisions and answers

An lf-ask puts a heading and context around the choice below. On me lists everything waiting on you: open obligations, a question in a thread among them (such as the gallery thread about a pasted image), and updates whose reply failed and need sending again. Each is answered where it asks: a widget's own controls, or a reply in its thread.

• Press m: the page moves to the next item on you in page order, and Shift+M walks back. Where that item is in another view, it appears at once and the view's tab name briefly highlights; with reduced motion, there is no glide or highlight.
• Look at Leaf's panel at the window's foot: the On me mark beside Threads counts what is on you.
• Press it, or g then Shift+M: the On view opens above the panel's row on On me, with a tab for the agent's list, such as On Claude, each tab counting its list. What left each list stands under it as Done: answered obligations under On me, sent replies and ended to-dos under the agent's. Press Enter on a row: it goes where m would.
• Find the sample picnic booking among the obligations. Its row takes you to the request, where a pick answers it and pressing it again reopens it.
• Comment on the map question, then press m until it lands there: the discussion stays closed while you read and choose, even when Tab enters the controls. Press c to reply in that discussion, t to read it, or, under a finger, its Thread marker to open it. Answer the question and come back to it: its controls stay clear.

The leaf's menu also holds Versions, Keyboard shortcuts (?), and under Navigate All pages when another Leaf page is live; Page Map is g then Shift+P. The empty comment field reports the current keyboard walk or a useful command result where it would show the agent's status.

On a local server, choose Copy link in the leaf's menu, then open the link in a fresh browser profile. The link keeps the current address and passage and includes the access key even after a reload. The row states that the key grants access to every Leaf page served by the same machine. Sample windows and the public website omit Copy link.

Follow the Resume writing sample, then use browser Back. The viewport and focus return to this link; press c to comment on the link. Forward returns to the sample.

Links into the page: a preview of where each points

Rest the pointer on a link here, Tab to it, or hold a finger on it: a preview stands beside it with what it points at, and the page stays where it is. A press, Enter or a tap still follows the link; letting go of a held finger leaves the preview standing. The stove decision shows its answer and the flask question its options waiting on you, the trailhead, settled when the page was written, its options with the pick checked; the packing board lists its columns, the session table its first rows and the thread about it, the On me steps their first items, the code sample its first lines, and the pasted screenshot its picture. Leaf's site is another document, so it keeps only the browser's status bar.

Changing text keeps its space

Cycle the short status messages. The following text stays in place because data-room reserves their width from first paint.

Next status Ready Following text

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 (the group is closed, so it offers only its two routes, with no field for another), 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

Drafts render Markdown as readable prose. Clicking the words, or the pencil on the box’s edge, which shows while the pointer is over the box, opens the exact source; the check saves it, and the cross or Escape discards the unsaved edit. The box keeps its size while editing, and these controls stay when annotations are hidden. Copy, beside them, copies its Markdown. Press z to undo a saved edit.

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

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

The sample workshop is in the blue room.

Reactions: short verdicts on a passage

Each reaction reaches the agent as feedback on a passage or a reply. The comment field keeps Dictate or Send beside its text. Other responses opens a picker for Suggest and reactions without moving the field; an agent reply has its own corner control for reactions.

• Select words below and press Other responses, press E, or focus the comment field and press Tab: the same picker opens. Press Escape to close it and return to the field.
• Press and hold a reaction: its word shows. Slide to another to read that one, then let go on the one you mean, or off the picker to choose none.
• Press a saved passage reaction, which shows only its emoji: a separate “Remove” control appears. Press it 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-ask · lf-options · lf-option

Decisions: settled answers in context

The meeting point is decided. Open Settled: At reception to inspect the alternatives, then close it. The spacious cards return to one disclosure line, leaving no empty card space before Permission.

User workflows: permission and interface comments

The revised message belongs here.

lf-options · lf-board · lf-card

One answer in its section and on a board: the card stands where the pick puts it

Each proposal is answered beside its case, and the board's cards show those answers. Pick Next for the flask, and its card moves to Next; drag the stove's card to Drop, or grab it and press the arrows, and its section's pick follows. Undo takes either gesture back in both places.

Threads in the panel

Choose a view to open its thread in this practice page's Leaf panel. The controls, messages, search, and unread state are live. Reset restores the seeded discussion after trying a reply or changing a thread.

Click a Sample width choice, then use Tab and the arrow keys: the keyboard cue encloses the label, while pointer selection keeps the native radio mark. Text-entry fields retain their focus cue.

Threads: anchored threads

Each thread has a short title the agent chose; open one to read its messages. With Threads closed, a thread opens inline beside its passage.

• Press a Thread control or a marked passage: its thread opens inline. Press t for the next inline card and T for the previous one.
• Scroll far from a commented passage and press t: the card enters with its passage as the page approaches it. Scroll away and back: the card leaves and returns with its passage.
• With a thread focused, open Threads, including with g then T: the same thread stays focused in the list.
• Read Threads down: the open threads, an unread one marked with a dot and a drafted one saying Draft, then the resolved ones under Resolved. Search the threads' words with the find button beside the tabs. The panel’s main field changes to “Search threads”; closing search brings back the unfinished comment.
• Look at a row: its title leads, and a thread waiting on you says so. Ordinary open threads carry no extra status label.
• Open a short thread: Reply follows its last message. In a long one, Reply stays visible while you scroll.
• Resolve an inline thread: its state changes immediately while its space folds away into Resolved. Open Threads during the fold to read it under Resolved immediately, or Undo to restore the open thread.
• Send a reply: focus stays on the card or its title, in the floating card too. Press c to write again, or Escape to leave a floating card for its target on the page.
• With a panel thread open and its reply box idle, have the agent add a message: it appears at once, Reply and later cards move down, and the existing messages keep their place. With an answer taller than the panel, what you were reading stays in view rather than jumping to the end.
• While you write in a short thread, have the agent reply: the reply waits behind “new reply” until you open it.
• Switch to another browser tab, have the agent reply, and return: held replies and the first new reply appear with the usual arrival tint, and your draft and caret stay in the same editor. If the page instead stays visible beside another focused window, new replies still wait behind the notice.

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, or return to page activity uses that same line. Replies still unread when the page opens are announced once on arrival; rereading a stage change or tool activity creates no new notice.

An unfinished reply. Open a thread inline or in Threads and begin a reply.

• Have the agent resolve the thread while the caret is in your words: the editor and caret stay put. Tab to Send and press Enter: the reply is sent and the thread reopens.
• Have the agent resolve another thread with an unfinished reply, then Tab past Send: the editor stays visible. Return to the reply and press Escape, or press elsewhere: the reply is put away with its words kept.
• Reopen the thread, start a reply, and press Resolve yourself: the editor closes and keeps its draft. Reload, open Threads, and open that thread under Resolved: the editor stays closed until Reopen recovers the words.

A clean passage. Select some of these words, or Alt-click this paragraph, to start a comment. Type into the floating field and send it.

• Look at the passage: the thread opens with your words already in it, before the server has answered, and becomes another Thread control here. In Threads, its collapsed row reads Generating title until the agent names it.
• If the send takes a moment, the message's header reads “Saving…” until the server records it.
• If the server refuses the send, the words stay on this passage, where opening the comment box again finds them; a page comment's words return to the panel's comment field.
• On a touch screen, select words and tap the panel's field, which quotes them: the comment field opens on them and the native selection menu closes.

A revised passage. Select “first draft” and send a comment, then select “early estimate” and send another. Keep both threads open and have the agent replace both phrases in the paragraph below. Each thread stays attached to that paragraph, without an answer being invented. Its Thread control opens the same conversation; a reply choosing new words can give it a precise passage again.

The first draft uses an early estimate for the rollout.

A passage in a wide block. Select the words in the description value below. The comment field follows the passage's inline start while standing clear of the code block. Send a comment: its thread keeps that attachment.

const command = {
  title: "Keep",
  description: "keep the active card",
};

Rewriting your own words. The thread on the line below holds a message of yours and the agent's answer.

• Double-click your message, or press the Edit control at the end of its header: its words open for editing where they stand, nothing around the message moves, and Cancel and Save take its header. A finger always sees the Edit control; a pointer finds it on hover.
• In the thread's empty reply box, press ↑: your latest message opens the same way. Press ↑ from the start of an open rewrite: your message before it opens.
• Press Enter to save: the new words show at once, labelled edited, with a tooltip saying what the message said before, and the agent owes the message, as it now reads, an answer.
• Press Escape or Discard instead: the message stays as it was and your words are dropped. Words a reload interrupts wait as an "unsaved edit". Saving, Escape, and Discard each put you back in the reply box.

The kickoff runs from nine to eleven.

Markdown as you type. Every box Leaf gives you to write in shows the draft the way the sent message will read. Type `code`, **bold**, *emphasis*, ~~struck~~ or [a link](https://leaf.page), or begin a line with # or >: the words take their style and the syntax steps aside until the caret enters it, so every character stays in reach. Shift+Enter starts a line and continues a list or quote. Type - First and press Shift+Enter: the empty next item already shows a bullet. Move left into its marker to reveal and edit the Markdown source. Mod+Z undoes only what you typed. The message sends exactly what you typed.

Thread states: live before and after examples

These passages have real threads in this gallery. Open Threads to compare each row's status and compact last-activity time, then open a row to inspect its messages. The title remains in the header when the card opens. The first pair shows a title before and after naming.

Thread title

Open the sample thread to see a pending title highlighted across its lettering. Reset starts a fresh untitled thread. Reduced motion shows solid muted text.

Open sample thread

Before · untitled

An untitled thread. The workshop schedule leaves lunch open. Open Threads to view it. The agent asked without naming the thread, so its row reads the question itself. A thread you open reads Generating title with a highlight sweeping across the lettering until the agent gives it a short name. With reduced motion, the text stays a solid muted color.

After · title assigned

An existing thread. The sample agenda has room for one more topic. Its speech-bubble control is green, and hovering it shows “Your turn” under the label. The image question still needs an answer even though the agent added a later progress message. In Threads, “Your turn” still says so. Open the control and reply: the control turns blue as the thread comes back to the agent. The same reading fills this target’s Page Map row.

Pasted images. That thread includes an image supplied by its companion thread log, outside this document. Click the image to inspect it in Leaf’s Image preview. Paste a screenshot into its reply box to see the thumbnail Leaf keeps in the draft without exposing image Markdown.

Callouts carry emphasis; disclosures hold support

Compare the tinted conclusion with its plain supporting detail in either color scheme. Open the disclosure by click, tap, or Tab and Enter: its chevron identifies the disclosure, and the conclusion keeps the tint. Click or Tab between the summaries: the same focus ring follows the summary that receives keyboard input.

The user's observed view

Resize this window, change its color scheme, or open another tab. The authoring agent reads each document's viewport, visible reading regions, revision, freshness, and passive geometry checks under user_views in leaf page state. The measurements leave the layout decision with the author.

Changes in place

Coming back after the agent has revised the page, a notice says how much changed since the version you last saw. Press v to mark those changes, or what changed since the latest version when you've seen them all, or open Versions (g V) and press Compare beside an earlier one. Each block changed since then has a green bar beside it and a Change entry; h and Shift+h step through them, o hides them with the other annotations, and v again takes them off. A revision that lands while you watch flashes. While the agent is On it for a comment, an accent bar stands beside the comment's block until it answers.

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-chart · lf-options

A question around its figure: options laid across

This question holds a chart and ends in one list of titled options marked across. Under the chart the three cards stand side by side, so the question, the chart and every option fit one window; narrow the window and the cards stack.

{
  ariaLabel: "Climb by sample trail: Ridge loop 900 m, Lake path 350 m, Pass traverse 1,250 m",
  marginLeft: 100,
  x: {grid: true, label: "climb (m)"},
  y: {label: null},
  marks: [
    Plot.barX(
      [
        {trail: "Ridge loop", climb: 900},
        {trail: "Lake path", climb: 350},
        {trail: "Pass traverse", climb: 1250},
      ],
      {y: "trail", x: "climb", fill: "var(--series-1)"},
    ),
    Plot.ruleX([0]),
  ],
}

lf-ask · lf-options · lf-option

Options that hold their pictures: each drawing over its own pick

Each option below holds the drawing of what choosing it gives, today's in the option that keeps it. The cards read down, so each drawing keeps the size it was drawn at, and stand apart, so no drawing runs into the next option's title.

lf-tabs · lf-tally

A queue beside the item it opens

The tab list stands left of the open item: each row shows its name and summary, with the chosen outcome on its own line. Rows sharing a group sit under that group's heading. The lf-tally above it counts the queue's obligations still to answer.

• Walk the list with the up and down arrows: they pass the headings by.
• Press Next on me in the tally: it opens the first obligation, whose row carries an open mark.
• Choose Fix, then Escalate to engineering: the row keeps its name and summary while the outcome changes on its own line. Undo restores Fix without moving the rows; undo again restores the open mark and tally.
• Narrow the window below the set's 36rem: the list becomes a row above the item, with each group's name before its first row. The chosen outcome remains below the summary; unusually long answers ellipsize.

lf-margin-entry

Margin entries: every face, state, and projection

One inventory, using the production controls. A margin entry is chrome the runtime draws, named lf-margin-entry in code, not an element an author writes. The Rank and behavior samples cover every action, disclosure, status, tone, and ordering rank.

• Read the Turn and agent workflow samples, which follow one update: “Saved” means the server recorded it, “Up next” that a later turn will handle it, “Delivered” that a turn accepted it, and “On it” or “Replying” that its answer is in progress. “Stopped” and “Gone quiet” show uncertainty without claiming an interruption.
• Compare thread colors: green marks a thread that needs an answer from you, and other threads are blue. Pickup and work add status words to the existing control; where no control remains, a status face carries the same workflow.
• Read Face anatomy: the choice of icon or glyph, a count of related readings, and the transient label with its quieter context. User interaction compares rest, hover or focus, an open disclosure, and a selected page reading.
• Click and Tab onto the live samples: each gives its real feedback. A control dims only while its action waits for the log to confirm it.
• Find the Projection sample in this exhibit's margin, then open Page Map: the same contributed control appears as a full labeled row.
• Reload: “Working” arrives with a one-time pulse.
• Open a thread and shorten the window: its messages scroll between the header and the reply field, and the scrollbar spans the messages alone. Scroll through a long message and into the next: its author's name stays visible, and words fade beneath its lower edge as it moves away. At the start the upper fade disappears; at the end the lower one does. Scroll the page to give a short conversation more room: the card expands once all its messages fit. The reply field keeps the same inset at both sides and below.

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 sample 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 “Discard” controls; “Save” dims while it sends. Delivery and agent work share one workflow reading. Pickup adds its status to the draft's “Edit” control; current work adds 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: annotations beside their targets

Leaf places threads, unanswered obligations, actions, changes, and delivery or work status beside the content they concern. With enough room beside the reading column, their controls stand in the rail. Where the rail is absent, the same controls appear as pins near their targets on the page. Every annotation uses the same filled face as a pin, one corner left square to point at its target. Its glyph and label keep their meaning: a Thread opens a conversation, Accept acts on a suggestion, and Sent reports delivery. Targets inside scrolling panes or extending into the rail also use pins. Related controls share a compact group; “More options” opens additional controls. When space is tight, a group can fold to one pin; opening it reveals its controls over the page. A workflow status can appear on an existing control, as the samples above show.

Pins sit clear of text and controls when nearby space permits. In a crowded view they can overlap content. They reserve no space, so their arrival, removal, or expansion leaves the page's layout unchanged. The schedule below extends beyond the column and carries a thread, so its Thread control already appears as a pin. Open it, or use the suggestion's “Accept” and “Reject” controls above. Narrow the window below about 960px to remove this page's rail and inspect those same controls beside their targets.

Press o to hide pins and passage marks while reading the content beneath them. Controls in the rail stay visible, and nothing on the page moves. Press it again to bring the annotations back. On a touch screen, open Annotations in the leaf's menu and choose “Hide annotations”, then “Show annotations”.

Action pins without a rail. This practice page has no rail. The suggestion's “Accept” and “Reject” controls appear as pins beside the proposed wording. Choose either, then use “Undo” to restore the suggestion. These annotations work without a thread or an obligation.

Quiet status pins without a rail. This sample starts with a recorded card move. The small upward arrow beside “Print the workshop map” says “Saved” on hover: the move was recorded, with nothing for you to answer. After two minutes undelivered, it becomes “Haven't seen it yet”; Reset starts a fresh example. Up next, Delivered, and On it follow the same placement rule. When a target already has a control, that control can carry the status instead of adding a separate pin.

Evidence widgets: charts and structured views

These widgets and page-owned HTML compositions use synthetic data so each has a focused example.

{
  ariaLabel: "Checks complete by run: baseline 4, 7, 9; candidate 5, 9, 12",
  marginBottom: 40,
  x: {label: "run", ticks: [1, 2, 3], tickFormat: "d"},
  y: {grid: true, label: "checks complete"},
  color: {legend: true, range: ["var(--series-1)", "var(--series-2)"]},
  marks: [
    Plot.lineY(
      [
        {run: 1, arm: "baseline", checks: 4},
        {run: 2, arm: "baseline", checks: 7},
        {run: 3, arm: "baseline", checks: 9},
        {run: 1, arm: "candidate", checks: 5},
        {run: 2, arm: "candidate", checks: 9},
        {run: 3, arm: "candidate", checks: 12},
      ],
      {x: "run", y: "checks", stroke: "arm", marker: true},
    ),
  ],
}

{
  ariaLabel: "Checks complete by run: first 5, second 9, third 12",
  x: {domain: ["first", "second", "third"], label: null},
  y: {grid: true, label: "checks complete"},
  marks: [
    Plot.barY(
      [{run: "first", checks: 5}, {run: "second", checks: 9}, {run: "third", checks: 12}],
      {x: "run", y: "checks", fill: "var(--series-1)"},
    ),
    Plot.ruleY([0]),
  ],
}

{
  ariaLabel: "Checks by run and outcome: first 5 passed and 3 failed, second 9 and 2, third 12 and 0",
  x: {domain: ["first", "second", "third"], label: null},
  y: {grid: true, label: "checks"},
  color: {
    legend: true,
    domain: ["passed", "failed"],
    range: ["var(--series-1)", "var(--series-2)"],
  },
  marks: [
    Plot.barY(
      [
        {run: "first", outcome: "passed", checks: 5},
        {run: "first", outcome: "failed", checks: 3},
        {run: "second", outcome: "passed", checks: 9},
        {run: "second", outcome: "failed", checks: 2},
        {run: "third", outcome: "passed", checks: 12},
        {run: "third", outcome: "failed", checks: 0},
      ],
      {x: "run", y: "checks", fill: "outcome"},
    ),
    Plot.ruleY([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

leaf page check ./proposal --render
leaf page stamp ./proposal --text "Ready for review"

const source = referencedElement(card, "for");
const api = widgetController(source);
// Read the source widget's current selection.
const ids = api.read().state.choose.value;

def load(path):
    data = read(path)
    return data

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
  recordings/
    evidence/
      rendered_first_paint_checkpoints_with_readable_path_names.json  +245 -93

lf-sample · lf-shot · lf-options · lf-option

Sample and Shot: fiction and before/after images

Paper signs Nothing to charge. Display signs Easy to update.

Live sample

Enter the practice page, accept its suggestion, and add a comment. Its decisions and Threads belong to that page alone. Close any open controls and press Escape to return here. Try “Full view” to use the whole window, then “Return to page”; your choices and drafts stay. “Reset” clears the practice page.

Window sample

A practice page as a whole window: its Leaf panel floats at the window's foot, and the frame keeps a window's height however short the page is. Press its Open threads button to see its authored conversation. Add a reply, then Reset: the original conversation returns, and this gallery gets no thread.

Recorded video and audio

Play the eight-second test pattern, then drag its timeline to a later frame. Pause and resume with the keyboard after tabbing to the player. The recording also plays in an offline export.

Play or seek the eight-second tone with the audio player's controls. Both recordings are fixed evidence; the samples above stay interactive.

Sample labels invented content. Slider starts the comparison; drag its divider to compare the same location. Choose Pair to see both run lists at the same scale, and click either image to open its original. Resize the window to inspect the paired layout. Pixels shows the changed pixels; the … menu holds its color key, the scale choices and Outline changes, which marks regions in Pair and Slider. Compare Fit with 100%: scrolling either image in Pair at 100% moves both to the same location. In Slider, a fully hidden image's label loses its shading. An outline preserves the image's colors inside each border. The controls stay in place across views and scales. Tab reaches the chosen view and each other control, and the arrow keys choose the next view.

This pair is one picture twice. The comparison reports identical images in every view.

Captures that differ by something other than a version, such as the moments of one journey, share a table whose heads name each column's and each row's value once. Open a capture: Image preview names it by its column and its row.

	Opened	Documentation reviewed	API changes reviewed
Release review

Framed rows

This row draws its own frame and declares that its items keep their margins. Both paragraphs start at the same height and leave equal space below them. Narrow the window to stack them: each item keeps the same spacing when the row wraps.

lf-pane

Workspace regions: panes that scroll on their own

A page whose work is a set of regions puts layout-workspace on main: the page fills the window, and each pane's body scrolls on its own under the pane's header and above its footer. The window below is such a page. Open its command trace: the evidence scrolls inside its pane, and the page and the decision under the follow-ups stay where they are. In a window too small to hold the panes, each takes its content's height and the page scrolls, and on a phone they stack.

Authenticated HTTP

Read /items from the host's example connection. A host grants its HTTPS origin and credential with leaf connection bind; this page has no grant by default. Pressing Read reports the missing grant, or displays the upstream status and text once connected. Each read consumes one request from its allowance; the result is not saved.

No HTTP read requested.

The GitHub discoveries page composes this capability with LLM generation. Its queries and editorial logic belong to the page; its saved stories work without a connection.

LLM generation

Press Generate to ask the host's model for a five-word headline about a library opening on Sundays. The response appears below with the model's name. A page without an active Codex, Claude Code or Pi claim reports that a claim is required. Each press can incur model usage; the result is not saved.

No generation requested.

lf-text-document · lf-num

External data: live values and provenance

Add a line under **Unreleased** for every change a user can see, and name the
flag or command it touches, such as `--config`.

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. “Saved”, “Delivered”, and “On it” report the agent workflow. A refused send offers “Retry” and “Cancel”.

This board has more columns than the page has room for, so it scrolls sideways. Scroll it: the 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. Leaf draws these fades because the browser's own scrollbar shows nothing until something scrolls it. The code block and the diagram above hold everything they have and show no fade.

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.

lf-sample · lf-suggestion · lf-old · lf-new

Interactions: core input sequences to try

Each sample below is a complete Leaf page running the production components and transitions. Do what its caption asks and watch the page answer. What you do stays in that sample's own log; “Reset” starts it again, and nothing reaches this page. To move a card, drag one on the delivery board.