+
+ );
+}
diff --git a/website/src/lib/__snapshots__/tut-runner.test.ts.snap b/website/src/lib/__snapshots__/tut-runner.test.ts.snap
index 18764ac..6e1dcee 100644
--- a/website/src/lib/__snapshots__/tut-runner.test.ts.snap
+++ b/website/src/lib/__snapshots__/tut-runner.test.ts.snap
@@ -27,13 +27,15 @@ exports[`TutRunner snapshots > renders Copy paste with all items incomplete 1`]
[3mThe paragraph below is a good example — "Some terminal programs..."[0m
[2m·[0m Copy-paste it somewhere else with "Copy Raw"
[2m·[0m Copy-paste it somewhere else with "Copy Rewrapped"
- [2m·[0m Run [36mascii-splash[39m, then click its cursor icon
+ [2m·[0m Click the cursor icon in [36mchangelog[39m
+
+ [2mPress [36mp[39m to toggle the Place To Paste.[0m
[2mSome terminal programs trap the cursor, and some do not. This tutorial pane[0m
[2mdoes not trap the cursor, so MouseTerm does not show a cursor icon. The[0m
- [2m[36mascii-splash[39m program traps the cursor — that is how it is able to respond to[0m
- [2mmouse movement. [36mlazygit[39m is an excellent and popular program which traps the[0m
- [2mcursor.[0m
+ [2m[36mascii-splash[39m and [36mchangelog[39m programs trap the cursor — that is how they are[0m
+ [2mable to respond to mouse movement. [36mlazygit[39m is an excellent and popular program[0m
+ [2mwhich traps the cursor.[0m
"
`;
diff --git a/website/src/lib/ascii-splash-runner.ts b/website/src/lib/ascii-splash-runner.ts
index 4299c44..9ce7f6b 100644
--- a/website/src/lib/ascii-splash-runner.ts
+++ b/website/src/lib/ascii-splash-runner.ts
@@ -55,7 +55,12 @@ import { StarfieldPattern } from "ascii-splash-internal/patterns/StarfieldPatter
import { TunnelPattern } from "ascii-splash-internal/patterns/TunnelPattern.js";
import { WavePattern } from "ascii-splash-internal/patterns/WavePattern.js";
import type { Cell, Color, Pattern, Point, Size, Theme } from "ascii-splash-internal/types/index.js";
-import { ENTER_ALT_SCREEN, LEAVE_ALT_SCREEN } from "mouseterm-lib/lib/ansi";
+import {
+ ENTER_ALT_SCREEN,
+ LEAVE_ALT_SCREEN,
+ MOUSE_DISABLE,
+ MOUSE_ENABLE,
+} from "mouseterm-lib/lib/ansi";
import type { FakePtyAdapter } from "mouseterm-lib/lib/platform/fake-adapter";
import type { InteractiveProgram } from "./tutorial-shell";
@@ -94,8 +99,6 @@ interface KeyInput {
}
const VERSION = "0.3.0";
-const MOUSE_ENABLE = "\x1b[?1000h\x1b[?1002h\x1b[?1003h\x1b[?1006h";
-const MOUSE_DISABLE = "\x1b[?1003l\x1b[?1002l\x1b[?1000l\x1b[?1006l";
const PATTERN_NAMES = [
"waves",
diff --git a/website/src/lib/changelog-runner.ts b/website/src/lib/changelog-runner.ts
new file mode 100644
index 0000000..36f1571
--- /dev/null
+++ b/website/src/lib/changelog-runner.ts
@@ -0,0 +1,317 @@
+import {
+ BOLD,
+ CLEAR_SCREEN,
+ CURSOR_HOME,
+ DIM,
+ ENTER_ALT_SCREEN,
+ FG_DEFAULT,
+ LEAVE_ALT_SCREEN,
+ MOUSE_DISABLE,
+ MOUSE_ENABLE,
+ RESET,
+ fg,
+} from "mouseterm-lib/lib/ansi";
+import type { FakePtyAdapter } from "mouseterm-lib/lib/platform/fake-adapter";
+import type { InteractiveProgram } from "./tutorial-shell";
+import changelogData from "../data/changelog.json";
+
+const LIST_WIDTH = 12;
+const SEPARATOR = "│";
+const HEADER_ROWS = 2; // title + blank
+const FOOTER_ROWS = 1; // hint line
+
+// SGR mouse button codes for wheel events.
+const WHEEL_UP = 64;
+const WHEEL_DOWN = 65;
+
+interface Item {
+ text: string;
+ children: Item[];
+}
+
+interface Section {
+ title: string;
+ items: Item[];
+}
+
+interface Release {
+ version: string;
+ tag: string;
+ date: string;
+ sections: Section[];
+}
+
+const RELEASES = (changelogData as { releases: Release[] }).releases;
+
+function stripLinks(text: string): string {
+ return text.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1");
+}
+
+function wrap(text: string, width: number): string[] {
+ if (width <= 1) return [text];
+ const out: string[] = [];
+ let line = "";
+ for (const word of text.split(/\s+/).filter(Boolean)) {
+ if (!line) {
+ line = word;
+ } else if (line.length + 1 + word.length <= width) {
+ line += " " + word;
+ } else {
+ out.push(line);
+ line = word;
+ }
+ }
+ if (line) out.push(line);
+ return out.length > 0 ? out : [""];
+}
+
+interface ChangelogRunnerOptions {
+ adapter: FakePtyAdapter;
+ terminalId: string;
+ onExit: () => void;
+}
+
+export class ChangelogRunner implements InteractiveProgram {
+ private adapter: FakePtyAdapter;
+ private terminalId: string;
+ private onExit: () => void;
+ private selectedIndex = 0;
+ private listOffset = 0;
+ private detailOffset = 0;
+ private resizeUnsub: (() => void) | null = null;
+ private disposed = false;
+ private detailCache: { index: number; width: number; lines: string[] } | null = null;
+ private lastSize = { cols: 0, rows: 0 };
+
+ constructor(options: ChangelogRunnerOptions) {
+ this.adapter = options.adapter;
+ this.terminalId = options.terminalId;
+ this.onExit = options.onExit;
+ }
+
+ start(): void {
+ this.write(ENTER_ALT_SCREEN);
+ this.write(MOUSE_ENABLE);
+ this.resizeUnsub = this.adapter.onPtyResize((d) => {
+ if (d.id !== this.terminalId) return;
+ const { cols, rows } = this.size;
+ if (cols === this.lastSize.cols && rows === this.lastSize.rows) return;
+ this.render();
+ });
+ this.render();
+ }
+
+ handleInput(data: string): void {
+ if (this.disposed) return;
+ let i = 0;
+ while (i < data.length) {
+ const ch = data[i];
+ if (ch === "\x03") { this.exit(); return; }
+ if (ch === "\x1b") {
+ const tail = data.slice(i);
+ const mouse = tail.match(/^\x1b\[<(\d+);(\d+);(\d+)([Mm])/);
+ if (mouse) {
+ this.handleMouse(Number(mouse[1]), Number(mouse[2]) - 1, Number(mouse[3]) - 1, mouse[4]);
+ i += mouse[0].length;
+ continue;
+ }
+ const csi = tail.match(/^\x1b\[(\d*)([A-Z~])/);
+ if (csi) {
+ this.handleCsi(csi[1], csi[2]);
+ i += csi[0].length;
+ continue;
+ }
+ // Bare Escape — exit.
+ this.exit();
+ return;
+ }
+ if (ch === "q" || ch === "Q") { this.exit(); return; }
+ if (ch === "j") this.moveSelection(1);
+ else if (ch === "k") this.moveSelection(-1);
+ else if (ch === "g") this.jumpFirst();
+ else if (ch === "G") this.jumpLast();
+ i++;
+ }
+ }
+
+ dispose(): void {
+ if (this.disposed) return;
+ this.disposed = true;
+ this.resizeUnsub?.();
+ this.resizeUnsub = null;
+ this.write(MOUSE_DISABLE);
+ this.write(LEAVE_ALT_SCREEN);
+ }
+
+ // --- input ---
+
+ private exit(): void {
+ if (this.disposed) return;
+ this.dispose();
+ this.onExit();
+ }
+
+ private handleCsi(num: string, code: string): void {
+ if (code === "A") this.moveSelection(-1);
+ else if (code === "B") this.moveSelection(1);
+ else if (code === "H") this.jumpFirst();
+ else if (code === "F") this.jumpLast();
+ else if (code === "~" && num === "5") this.scrollDetail(-Math.max(1, this.bodyHeight() - 1));
+ else if (code === "~" && num === "6") this.scrollDetail(Math.max(1, this.bodyHeight() - 1));
+ }
+
+ private handleMouse(button: number, col: number, row: number, finalByte: string): void {
+ // Wheel scroll routes to whichever column the cursor is over so each
+ // side scrolls independently.
+ if (button === WHEEL_UP) {
+ if (col < LIST_WIDTH) this.scrollList(-1);
+ else this.scrollDetail(-1);
+ return;
+ }
+ if (button === WHEEL_DOWN) {
+ if (col < LIST_WIDTH) this.scrollList(1);
+ else this.scrollDetail(1);
+ return;
+ }
+ // Left-button press on the version list selects that release.
+ if (button === 0 && finalByte === "M" && col < LIST_WIDTH) {
+ const bodyTop = HEADER_ROWS;
+ const idx = this.listOffset + (row - bodyTop);
+ if (idx >= 0 && idx < RELEASES.length) {
+ this.selectedIndex = idx;
+ this.detailOffset = 0;
+ this.ensureSelectionVisible();
+ this.render();
+ }
+ }
+ }
+
+ private moveSelection(delta: number): void {
+ const next = Math.max(0, Math.min(RELEASES.length - 1, this.selectedIndex + delta));
+ if (next === this.selectedIndex) return;
+ this.selectedIndex = next;
+ this.detailOffset = 0;
+ this.ensureSelectionVisible();
+ this.render();
+ }
+
+ private jumpFirst(): void {
+ this.selectedIndex = 0;
+ this.detailOffset = 0;
+ this.listOffset = 0;
+ this.render();
+ }
+
+ private jumpLast(): void {
+ this.selectedIndex = RELEASES.length - 1;
+ this.detailOffset = 0;
+ this.ensureSelectionVisible();
+ this.render();
+ }
+
+ private ensureSelectionVisible(): void {
+ const h = this.bodyHeight();
+ if (this.selectedIndex < this.listOffset) this.listOffset = this.selectedIndex;
+ else if (this.selectedIndex >= this.listOffset + h) this.listOffset = this.selectedIndex - h + 1;
+ const maxOffset = Math.max(0, RELEASES.length - h);
+ if (this.listOffset > maxOffset) this.listOffset = maxOffset;
+ }
+
+ private scrollList(delta: number): void {
+ const max = Math.max(0, RELEASES.length - this.bodyHeight());
+ const next = Math.max(0, Math.min(max, this.listOffset + delta));
+ if (next === this.listOffset) return;
+ this.listOffset = next;
+ this.render();
+ }
+
+ private scrollDetail(delta: number): void {
+ const lines = this.getDetailLines();
+ const max = Math.max(0, lines.length - this.bodyHeight());
+ const next = Math.max(0, Math.min(max, this.detailOffset + delta));
+ if (next === this.detailOffset) return;
+ this.detailOffset = next;
+ this.render();
+ }
+
+ // --- layout ---
+
+ private get size() { return this.adapter.getPtySize(this.terminalId); }
+
+ private bodyHeight(): number {
+ return Math.max(1, this.size.rows - HEADER_ROWS - FOOTER_ROWS);
+ }
+
+ private detailWidth(): number {
+ return Math.max(10, this.size.cols - LIST_WIDTH - SEPARATOR.length);
+ }
+
+ private getDetailLines(): string[] {
+ const w = this.detailWidth();
+ const cached = this.detailCache;
+ if (cached && cached.index === this.selectedIndex && cached.width === w) {
+ return cached.lines;
+ }
+ const release = RELEASES[this.selectedIndex];
+ const lines = release ? this.buildDetailLines(release, w) : ["No releases."];
+ this.detailCache = { index: this.selectedIndex, width: w, lines };
+ return lines;
+ }
+
+ private buildDetailLines(release: Release, w: number): string[] {
+ const out: string[] = [];
+ out.push(`${BOLD}${release.version}${RESET} ${DIM}— ${release.date}${RESET}`);
+ out.push("");
+ for (const section of release.sections) {
+ out.push(`${fg(33)}${section.title}${FG_DEFAULT}`);
+ for (const item of section.items) {
+ const wrapped = wrap(stripLinks(item.text), Math.max(10, w - 4));
+ wrapped.forEach((line, idx) => {
+ out.push(`${idx === 0 ? " • " : " "}${line}`);
+ });
+ }
+ out.push("");
+ }
+ return out;
+ }
+
+ // --- render ---
+
+ private render(): void {
+ if (this.disposed) return;
+ this.lastSize = { ...this.size };
+ const bodyH = this.bodyHeight();
+ const detailLines = this.getDetailLines();
+
+ let frame = `${CURSOR_HOME}${CLEAR_SCREEN}`;
+ frame += `${BOLD}MouseTerm changelog${RESET} ${DIM}${RELEASES.length} releases · \`q\` to quit · ↑↓ select · wheel scrolls${RESET}\r\n`;
+ frame += "\r\n";
+
+ for (let r = 0; r < bodyH; r++) {
+ const idx = this.listOffset + r;
+ const release = RELEASES[idx];
+ let leftCell: string;
+ if (release) {
+ const label = `v${release.version}`;
+ const padded = label.length > LIST_WIDTH - 2 ? label.slice(0, LIST_WIDTH - 2) : label.padEnd(LIST_WIDTH - 2);
+ if (idx === this.selectedIndex) {
+ leftCell = `${fg(36)}❯${RESET} ${BOLD}${padded}${RESET}`;
+ } else {
+ leftCell = ` ${padded}`;
+ }
+ } else {
+ leftCell = " ".repeat(LIST_WIDTH);
+ }
+ const detailLine = detailLines[this.detailOffset + r] ?? "";
+ frame += `${leftCell}${DIM}${SEPARATOR}${RESET}${detailLine}\r\n`;
+ }
+
+ const more = this.detailOffset + bodyH < detailLines.length ? "↓ more" : "";
+ frame += `${DIM}${more}${RESET}`;
+ this.write(frame);
+ }
+
+ private write(data: string): void {
+ this.adapter.sendOutput(this.terminalId, data);
+ }
+}
diff --git a/website/src/lib/tut-items.ts b/website/src/lib/tut-items.ts
index 92b7109..4bb111f 100644
--- a/website/src/lib/tut-items.ts
+++ b/website/src/lib/tut-items.ts
@@ -139,13 +139,13 @@ export const SECTIONS: readonly Section[] = [
},
{
id: 'cp-override',
- title: 'Run `ascii-splash`, then click its cursor icon',
+ title: 'Click the cursor icon in `changelog`',
hint:
- 'Use the demo pane prompt: run `ascii-splash`, click the cursor icon in its header, then drag-select. The animation cancels copying, but the same override works on real programs like `lazygit`.',
+ 'Try to click and drag in the changelog tab - you can\'t! That\'s because you can click the versions - the Terminal User Interface traps the mouse which breaks copy-paste. Click the cursor icon in its header, which disables the mouse tracking long enough for you to do a drag-select.',
},
],
prose: [
- 'Some terminal programs trap the cursor, and some do not. This tutorial pane does not trap the cursor, so MouseTerm does not show a cursor icon. The `ascii-splash` program traps the cursor — that is how it is able to respond to mouse movement. `lazygit` is an excellent and popular program which traps the cursor.',
+ 'Some terminal programs trap the cursor, and some do not. This tutorial pane does not trap the cursor, so MouseTerm does not show a cursor icon. The `ascii-splash` and `changelog` programs trap the cursor — that is how they are able to respond to mouse movement. `lazygit` is an excellent and popular program which traps the cursor.',
],
},
];
diff --git a/website/src/lib/tut-runner.ts b/website/src/lib/tut-runner.ts
index ea8f7b4..783f30f 100644
--- a/website/src/lib/tut-runner.ts
+++ b/website/src/lib/tut-runner.ts
@@ -61,6 +61,8 @@ interface TutRunnerOptions {
onExit: () => void;
/** Called when the user presses `s` inside the Alert section. */
onTriggerBusyDemo?: () => void;
+ /** Called when the user presses `p` inside the Copy paste section. */
+ onTogglePlaceToPaste?: () => void;
}
type Screen = "menu" | "section" | "reset";
@@ -73,6 +75,7 @@ export class TutRunner implements InteractiveProgram {
private state: TutorialState;
private onExit: () => void;
private onTriggerBusyDemo?: () => void;
+ private onTogglePlaceToPaste?: () => void;
private screen: Screen = "menu";
private menuIndex = 0;
@@ -92,6 +95,7 @@ export class TutRunner implements InteractiveProgram {
this.state = options.state;
this.onExit = options.onExit;
this.onTriggerBusyDemo = options.onTriggerBusyDemo;
+ this.onTogglePlaceToPaste = options.onTogglePlaceToPaste;
}
start(): void {
@@ -181,6 +185,15 @@ export class TutRunner implements InteractiveProgram {
i += 1;
continue;
}
+ if (
+ this.screen === "section" &&
+ this.sectionId === "copy" &&
+ (ch === "p" || ch === "P")
+ ) {
+ this.onTogglePlaceToPaste?.();
+ i += 1;
+ continue;
+ }
i += 1;
}
}
@@ -374,6 +387,15 @@ export class TutRunner implements InteractiveProgram {
lines.push(...this.renderItem(item, index, activeIndex));
});
+ if (section.id === "copy") {
+ lines.push("");
+ const indent = " ";
+ const text = "Press `p` to toggle the Place To Paste.";
+ for (const wrapped of this.wrapText(text, indent.length)) {
+ lines.push(`${indent}${DIM}${wrapped}${RESET}`);
+ }
+ }
+
if (section.prose && section.prose.length > 0) {
lines.push("");
const indent = " ";
diff --git a/website/src/lib/tutorial-shell.ts b/website/src/lib/tutorial-shell.ts
index 75641c3..c596385 100644
--- a/website/src/lib/tutorial-shell.ts
+++ b/website/src/lib/tutorial-shell.ts
@@ -166,7 +166,7 @@ export class TutorialShell {
});
if (!program) {
this.sendOutput(
- `${fg(90)}Unknown command. Try ${fg(36)}tut${fg(90)} or ${fg(36)}ascii-splash${fg(90)}.${RESET}\r\n`,
+ `${fg(90)}Unknown command. Try ${fg(36)}tut${fg(90)}, ${fg(36)}ascii-splash${fg(90)}, or ${fg(36)}changelog${fg(90)}.${RESET}\r\n`,
);
this.showPrompt();
return;
diff --git a/website/src/pages/Home.tsx b/website/src/pages/Home.tsx
index 4870980..f36ef89 100644
--- a/website/src/pages/Home.tsx
+++ b/website/src/pages/Home.tsx
@@ -29,7 +29,7 @@ const RUNWAY_VH = 300;
const ICON_INITIAL_HIDE_FRAC = 0.67; // Fraction of icon's rendered height hidden at load — leaves top third visible
const HOOK_FADE_REMAINING = 0.10; // Hook begins fading when bottom 10% of icon enters viewport
const WORD_THRESHOLDS = [0.25, 0.40, 0.55] as const;
-const ASTERISK_THRESHOLD = 0.65;
+const FOOTNOTE_THRESHOLD = 0.65;
const HEADER_REVEAL_LEAD = 0.04;
/** Fraction of runway where the hero text unpins and scrolls away (0–1).
@@ -251,7 +251,6 @@ function Home() {
const word0Ref = useRef
+ Place To Paste
+
+
+
+ {RESIZE_HANDLES.map((h) => (
+
+ ))}
+ - *supports (and teaches) tmux shortcuts + (and hotkey wizards too)
diff --git a/website/src/pages/Playground.tsx b/website/src/pages/Playground.tsx index e7a52cc..5a4b9b0 100644 --- a/website/src/pages/Playground.tsx +++ b/website/src/pages/Playground.tsx @@ -1,45 +1,73 @@ import { useState, useEffect, useCallback, useRef } from "react"; import SiteHeader from "../components/SiteHeader"; +import { PlaceToPaste } from "../components/PlaceToPaste"; import { ThemePicker } from "mouseterm-lib/components/ThemePicker"; import { PlaygroundShellRegistry } from "../lib/playground-shells"; import { TutorialState } from "../lib/tutorial-state"; import { TutDetector } from "../lib/tut-detector"; import { BUSY_DEMO_DURATION_MS, BUSY_DEMO_INTERVAL_MS, TutRunner } from "../lib/tut-runner"; +import { ChangelogRunner } from "../lib/changelog-runner"; export { Playground as Component }; const PANE_MAIN = "tut-main"; -const PANE_TARGET = "tut-target"; const PANE_BOXED = "tut-boxed"; +const PANE_SPLASH = "tut-splash"; type FakePtyAdapter = import("mouseterm-lib/lib/platform/fake-adapter").FakePtyAdapter; type WallEvent = import("mouseterm-lib/components/Wall").WallEvent; type DockviewDisposable = { dispose: () => void }; +// Tailwind's md breakpoint — matches the header's `md:top-20` so the pane +// area below begins at the same threshold. Locked at mount, not reactive +// to resize. +const isPhoneAtMount = () => + typeof window !== "undefined" && window.innerWidth < 768; + +interface PaneSpec { + id: string; + command: string; +} + function Playground() { const [WallModule, setWallModule] = useState<{ Wall: React.ComponentType