Improve copy-paste portion of the tutorial#49
Merged
Conversation
Member
nedtwigg
commented
May 6, 2026
nedtwigg
commented
- added a "place to paste" to make it easier and more likely that people will actually do it
- added a mouse-reactive changelog component to give users a more useful sandbox
The right column now hosts `tut-boxed` (titled "changelog", still the SCENARIO_BOXED_PARAGRAPH target for Copy Rewrapped) on top, and a new `tut-splash` pane on the bottom that auto-launches AsciiSplashRunner on mount — so the cursor-override demo's prerequisite is already running when the user reaches it. Also titles the left pane "tutorial" instead of Wall's `<unnamed>` default. The dropped `tut-target` shell pane is no longer needed; kb-arrows / kb-move demos navigate among the remaining three panes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The cp-raw hint now points users at a draggable, CSS-resizable scratch modal where they can paste copied text and watch it reflow (or not) as they drag the corner. TutRunner intercepts `p`/`P` only while the copy section is open, mirroring the existing `s` busy-demo intercept in the alert section, and Playground flips a state flag that mounts the modal overlay above the wall. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The cp-raw item-level hint hid the `p` toggle whenever a different item was active. Hoist the prompt to a section-level line that renders above the prose paragraph so it's always visible inside the Copy paste section. Also bumped the modal's font to inherit the default size and replaced the single bottom-right CSS resize handle with eight pointer-event handles (four edges + four corners). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The hard-coded VSCode token fallbacks didn't track the playground theme. Switch to the project's `--color-header-active-*` for the draggable header (matches the active pane chrome) and `--color-terminal-*` for the textarea body, so the modal now re-themes alongside the rest of the wall. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The wall keyboard listener runs on window in the capture phase and preventDefault'd every Cmd/Ctrl+V to route paste through the terminal's clipboard pipeline. That swallowed paste events targeted at any other text input on the page (e.g. the playground's Place To Paste modal), so the textarea never received the pasted text. Skip the handler when `e.target` is a real text input — input, textarea (other than xterm's hidden helper textarea), or contenteditable element — and let the browser do the native paste. xterm's helper textarea still routes through the terminal path. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
A third interactive program (after `tut` and `ascii-splash`) that renders website/src/data/changelog.json as a two-column TUI: a release list on the left and the selected release's sections/items on the right. Enters the alt-screen and emits SGR mouse-reporting (?1000h/?1002h/?1003h/?1006h) so the wall flips into "trapping the mouse" mode (cursor-icon override appears in the pane header) and the runner parses the resulting `\x1b[<…M|m` events itself. - Keyboard: ↑↓/jk move the selection, g/G/Home/End jump, PgUp/PgDn page the detail, q/Esc/Ctrl+C exit. - Mouse: left-click on a version selects it; wheel scrolls the column the cursor is over (list or detail) independently. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
`tut-boxed` now auto-runs `changelog` on pty spawn (mirrors the existing tut-main / tut-splash auto-starts), so the playground opens with the changelog already on screen. Suppressed the pane's default shell-prompt scenario; otherwise the delayed prompt lands underneath the runner's alt-screen. Deleted SCENARIO_BOXED_PARAGRAPH along with it — the boxed paragraph was the previous Copy Rewrapped target, but the changelog runner's wrapped item lines exercise the rewrap path equally well (after the user overrides mouse capture, since the runner enables SGR mouse reporting). Spec updated accordingly. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The three-pane layout doesn't fit on phones — the changelog pane is too narrow to be readable, and the right-column split eats most of the tutorial. At mount, branch on `window.innerWidth < 768` (Tailwind md): phone gets a vertical two-pane layout (tutorial top, ascii-splash bottom), desktop keeps the existing three-pane layout including the changelog. The check is one-shot — not reactive to resize — so the layout never reshuffles mid-session. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The cursor-icon override step now points users at the changelog pane (which traps the mouse for its own click-to-pick-version handling) instead of `ascii-splash`, and explains *why* the icon exists: the TUI captures clicks, so copy-paste only works after disabling the trap. Section prose mentions both `ascii-splash` and `changelog` as cursor-trapping examples, alongside `lazygit`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Hoist MOUSE_ENABLE/DISABLE into ansi.ts (was duplicated across ascii-splash and changelog runners), name SGR wheel buttons, cache detail-line wrapping on (selection, width), and add a no-op guard for resize events. Collapse Playground's three auto-start callbacks and four `if (!isPhone)` branches into a single panes array, and merge PlaceToPaste's edge/corner handle arrays into one. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Deploying mouseterm with
|
| Latest commit: |
1241edf
|
| Status: | ⚡️ Build in progress... |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.