Skip to content

Canonicalize document-side Buttons and Page map #233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
max-sixty merged 6 commits into from
Sep 3, 2026
Merged

Canonicalize document-side Buttons and Page map #233

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f44e252
Make Button explanations and controls one system
max-sixty Sep 2, 2026
4fe8c97
Merge main into canonical Button work
max-sixty Sep 2, 2026
d4cf605
Merge latest main into canonical Button work
max-sixty Sep 2, 2026
11fb19e
Merge current main into canonical Button work
max-sixty Sep 2, 2026
8d53693
Fix Button refresh and capacity review findings
max-sixty Sep 2, 2026
955b823
Clarify draft refresh coalescing
max-sixty Sep 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 53 additions & 66 deletions examples/corpus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1673,62 +1673,69 @@ <h1>Leaf feature gallery</h1>
<lf-toc id="bg-contents"></lf-toc>
</aside>
<p id="bg-start">
This gallery grows by feature, so a developer can add a focused specimen here
without inventing another example page. Hover over a Button for its label. Tab
into a cluster to expose its peers, then use ← / → and Enter. Press a to move
through Asks; while an Ask itself is focused, 1–9 activate its numbered actions.
The contents spine jumps between specimens; in a narrow window, Map collects
them. Undo takes back a decision, and a live preview keeps experiments on
reload.
Each section explains one promise beside the live control that makes it. Hover
over a Button for its label, or Tab into a cluster and use ← / → and Enter.
Press a to move through Asks; while an Ask itself is focused, 1–9 activate its
numbered actions. The contents spine jumps between specimens. In a narrow
window, open ⋯ in the top bar, then Map, to collect the page’s items. A live
preview keeps your experiments on reload.
</p>

<section id="bg-changes">
<h2>Accept, reject, undo</h2>
<h2>Action Buttons change something now</h2>
<p id="bg-changes-guide">
The heavier ring means an immediate action. Try either verdict, then the Undo
beside its receipt. Each row below changes a different amount of text.
A heavier ring means the press acts immediately. The green check accepts; the
red cross rejects. Try either verdict on each change, then use the Undo that
replaces it.
</p>
<p id="bg-replace-line">
<strong>Replace.</strong> The sample meeting starts at
<strong>Replace one word.</strong> The sample meeting starts at
<lf-suggestion id="bg-replace"
><lf-old>nine.</lf-old><lf-new>ten.</lf-new></lf-suggestion
>
</p>
<p id="bg-insert-line">
<strong>Insert.</strong> Bring a notebook.
<strong>Insert a sentence.</strong> Bring a notebook.
<lf-suggestion id="bg-insert"
><lf-new> A pencil is useful too.</lf-new></lf-suggestion
>
</p>
<p id="bg-delete-line">
<strong>Delete.</strong> The room is upstairs.
<strong>Delete a sentence.</strong> The room is upstairs.
<lf-suggestion id="bg-delete"
><lf-old> Please arrive an hour early.</lf-old></lf-suggestion
>
</p>
</section>

<section id="bg-editing">
<h2>Edit, save, restore</h2>
<h2>A Disclosure opens context first</h2>
<p id="bg-editing-guide">
Edit opens a field; Save commits its words; Cancel leaves them alone. While
the field is active, its completion Buttons stay exposed.
Edit has a light ring and an ellipsis because it only opens the field. Once
the field is open, Save and Cancel have heavier rings because they act now;
both stay exposed until editing ends.
</p>
<lf-draft id="bg-draft">
<pre>
Write a different invitation here. Try a few lines to see the editor grow.</pre>
</lf-draft>
<p id="bg-history-guide">
This second draft already has a saved edit. Open Changes, inspect its history,
then Restore the older wording or edit it again.
<strong>This saved draft shows two readings beside one item.</strong> Changes
opens its versions. Picked up reports that the saved edit reached an agent; it
does not repeat the edit. Restore acts on the version you choose.
</p>
<lf-draft id="bg-history">
<pre>The sample workshop is in the blue room.</pre>
</lf-draft>
</section>

<section id="bg-conversations">
<h2>Open a thread, or start one</h2>
<h2>Thread is another Disclosure</h2>
<p id="bg-conversations-guide">
The speech bubble identifies a Thread. Its light ring says that pressing it
opens the conversation without changing the document. Several conversations
share one Button and add a count.
</p>
<p id="bg-thread-text">
<strong>An existing conversation.</strong> The sample agenda has room for one
more topic. Open the speech-bubble Button, reply, then resolve the thread.
Expand All @@ -1746,38 +1753,40 @@ <h2>Open a thread, or start one</h2>
</section>

<section id="bg-reactions">
<h2>Leave a mark</h2>
<h2>Reaction Actions leave a short verdict</h2>
<p id="bg-reactions-guide">
Each row starts with a different standing reaction. Its small square marks it
as selected; press the same reaction to withdraw it. To try another, focus the
row’s Button and press R, or use the comment field’s reaction control.
Each selected reaction sits beside the words it marks. Its heavy ring means
pressing it acts immediately; its square corner means the reaction is settled.
Press it to take it back. To add one, select words and press R, then choose
with the matching digit or Button.
</p>
<p id="bg-react-ok">
<strong>Settled.</strong> The spare key is with reception.
<strong>1 · ok · settled.</strong> The spare key is with reception.
</p>
<p id="bg-react-no">
<strong>Wrong.</strong> This sample claims Tuesday follows Thursday.
<strong>2 · no · wrong.</strong> This sample claims Tuesday follows Thursday.
</p>
<p id="bg-react-lost">
<strong>Unclear.</strong> Bring the thing from the other place.
<strong>3 · lost · unclear.</strong> Bring the thing from the other place.
</p>
<p id="bg-react-cut">
<strong>Too long.</strong> At this point in time, we can now begin.
<strong>4 · cut · too long.</strong> At this point in time, we can now begin.
</p>
<p id="bg-react-more">
<strong>Needs detail.</strong> The exercise involves a map.
<strong>5 · more · needs detail.</strong> The exercise involves a map.
</p>
<p id="bg-react-this">
<strong>Attention.</strong> The side entrance closes early.
<strong>6 · this · look here.</strong> The side entrance closes early.
</p>
</section>

<section id="bg-clusters">
<h2>One item, many Buttons</h2>
<h2>Options unfolds peer Buttons in place</h2>
<p id="bg-clusters-guide">
The change below has a thread and all six reactions. At rest it stays compact.
Press … to unfold it, or Tab into it. When the row cannot fit every Button,
More opens the remaining controls in the Page map. Escape returns to the row.
The light-ring ⋯ is an Options Button, not a menu or dialog. Press it, or Tab
into the cluster, to expose up to six peer Buttons beside the same passage.
Use ← / → and Enter; Escape folds them. If they cannot all fit, More opens the
complete cluster in the Page map.
</p>
<lf-suggestion id="bg-crowded">
<lf-old><p>Use the courtyard for the practice session.</p></lf-old>
Expand Down Expand Up @@ -1805,11 +1814,10 @@ <h2>One item, many Buttons</h2>
</section>

<section id="bg-readings">
<h2>Asks and outcomes</h2>
<h2>Reading Disclosures report without acting</h2>
<p id="bg-readings-guide">
A Map Button can describe an item as well as offer an action. An unanswered
choice has an Ask; a recorded choice has an Outcome. Open each to inspect it.
These choices only change the sample page.
The ? opens an unanswered Ask. The light-ring check opens a recorded Outcome.
Press either to inspect its choice; neither press changes the document.
</p>
<lf-decision id="bg-choice-ask">
<h3>Which map should the sample team carry?</h3>
Expand All @@ -1828,40 +1836,19 @@ <h3>Where should the sample group meet?</h3>
</section>

<section id="bg-version-changes">
<h2>Changed since the earlier version</h2>
<h2>Change Disclosure points to evidence</h2>
<p id="bg-version-guide">
Open the version picker in the top bar and use Δ beside v1. The changed
passage below gets a Change marker; press it to find the changed passage.
Choose v1 in the picker to read the earlier wording, then return to the latest
version. Turn comparison off to clear the marker.
Open the version picker in the top bar and use Δ beside v1. Opposing arrows
then appear beside the changed passage. Their light ring promises navigation:
pressing the Button points to the evidence without changing the document.
</p>
<p id="bg-change">The sample walk follows the river to the footbridge.</p>
</section>

<section id="bg-delivery">
<h2>What happens after a press</h2>
<p id="bg-delivery-guide">
Sending can briefly show a busy mark. A definitive refusal offers Retry and
Cancel; an uncertain connection keeps the same attempt pending. Those states
depend on real delivery, so this gallery does not paint pretend failures.
Sent, Picked up, and Active describe the handoff to an agent, not a second
action.
</p>
<lf-board id="bg-work-board">
<lf-column id="bg-work-ready" label="Ready">
<lf-card id="bg-work"
><strong>Check the sample route</strong>
Drag this card to Tried, or use its grip with Enter and the arrows. An
agent’s live work claim can put an Active Button here.
</lf-card>
</lf-column>
<lf-column id="bg-work-tried" label="Tried"></lf-column>
</lf-board>
<p id="bg-feedback">
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.
</p>
</section>
<p id="bg-feedback">
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.
</p>
</lf-tab>

</lf-tabs>
Expand Down
Loading
Loading