@shiyuphan/follow-me 0.1.1 → 0.3.0

package/dist/ui/index.html

@@ -1,40 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="color-scheme" content="light dark" />
-    <title>follow-me review</title>
-    <link rel="stylesheet" href="/style.css" />
-  </head>
-  <body>
-    <header class="topbar">
-      <strong>follow-me</strong>
-      <span id="summary" class="muted"></span>
-      <nav id="sessions" class="sessions" aria-label="Sessions" hidden></nav>
-      <span id="status" class="status" role="status"></span>
-      <button id="view-toggle" type="button" title="Play the branch commit by commit (space)">
-        Play
-      </button>
-      <button id="end" type="button" class="primary">End review</button>
-    </header>
-    <section id="player" class="player" aria-label="Playback" hidden>
-      <button id="play" type="button" class="primary" title="Play or pause (space)">Play</button>
-      <button id="prev" type="button" title="Previous commit (p)">Previous</button>
-      <button id="next" type="button" title="Next commit (n)">Next</button>
-      <label>Speed <select id="speed"></select></label>
-      <label>Voice <select id="voice"></select></label>
-      <button id="mute" type="button" aria-pressed="false">Mute</button>
-      <p id="caption" class="caption" aria-live="polite"></p>
-    </section>
-    <div id="app" class="layout">
-      <nav class="sidebar" aria-label="Commits">
-        <ol id="commits" class="commit-list"></ol>
-        <section id="plan-note" class="plan-note"></section>
-      </nav>
-      <main id="main" class="main"></main>
-    </div>
-    <div id="done" class="done" hidden></div>
-    <script src="/app.js" type="module"></script>
-  </body>
-</html>

package/dist/ui/playback.js

@@ -1,175 +0,0 @@
-// @ts-check
-// Pure playback logic. The browser imports it from /playback.js and the tests import it
-// directly, so nothing here may touch the DOM or speech APIs.
-
-/**
- * @typedef {{ op: " ", text: string } | { op: "+" | "-", text: string, change: number }} HunkLine
- * @typedef {{ kind: "hunk", id: string, path: string, body: HunkLine[] }
- *   | { kind: "file" | "mode", id: string, path: string }} Unit
- * @typedef {{ kind: "rest" } | { kind: "lines", changes: number[] }} Selection
- * @typedef {{ unit: string, select: Selection, narration?: string }} Ref
- * @typedef {{ index: number, message: string, narration?: string, refs: Ref[] }} Commit
- * @typedef {{ kind: "commit", commit: number, say: string }
- *   | { kind: "unit", commit: number, unit: string, say: string | null }
- *   | { kind: "line", commit: number, unit: string, line: number, change: number, op: "+" | "-" }} Step
- * @typedef {"hidden" | "shown" | "gone"} LineState
- * @typedef {{ name: string, lang: string, default: boolean }} VoiceInfo
- */
-
-export const SPEEDS = [0.5, 0.75, 1, 1.25, 1.5, 2, 3];
-
-const LINES_PER_SECOND = 4;
-const COMMIT_BEAT_MS = 700;
-const UNIT_BEAT_MS = 350;
-const WORDS_PER_SECOND = 2.5;
-
-/**
- * The key a diff line carries in the DOM, unit id plus its index in the hunk body.
- * @param {string} unit
- * @param {number} line
- */
-export function lineKey(unit, line) {
-  return `${unit}:${line}`;
-}
-
-/**
- * What is spoken when a commit starts: its narration, else its title.
- * @param {Commit} commit
- */
-export function commitNarration(commit) {
-  const narration = commit.narration?.trim();
-  if (narration) return narration;
-  return commit.message.split("\n")[0] ?? "";
-}
-
-/**
- * Every step of the playback in order: a commit begins, each of its units begins, and each of
- * the commit's own change lines appears (+) or fades out (-) in hunk order.
- * @param {readonly Commit[]} commits
- * @param {readonly Unit[]} units
- * @returns {Step[]}
- */
-export function buildScript(commits, units) {
-  const byId = new Map(units.map((u) => [u.id, u]));
-  /** @type {Step[]} */
-  const steps = [];
-  for (const commit of commits) {
-    steps.push({ kind: "commit", commit: commit.index, say: commitNarration(commit) });
-    for (const ref of commit.refs) {
-      const unit = byId.get(ref.unit);
-      if (unit === undefined) continue;
-      const say = ref.narration?.trim() || null;
-      steps.push({ kind: "unit", commit: commit.index, unit: unit.id, say });
-      if (unit.kind !== "hunk" || ref.select.kind !== "lines") continue;
-      const mine = new Set(ref.select.changes);
-      unit.body.forEach((line, i) => {
-        if (line.op === " " || !mine.has(line.change)) return;
-        steps.push({
-          kind: "line",
-          commit: commit.index,
-          unit: unit.id,
-          line: i,
-          change: line.change,
-          op: line.op,
-        });
-      });
-    }
-  }
-  return steps;
-}
-
-/**
- * How long to rest after a step at the given speed. Lines arrive a few per second; removals
- * take half as long because nothing new needs reading.
- * @param {Step} step
- * @param {number} speed
- */
-export function stepDelay(step, speed) {
-  if (step.kind === "commit") return COMMIT_BEAT_MS / speed;
-  if (step.kind === "unit") return UNIT_BEAT_MS / speed;
-  const line = 1000 / (LINES_PER_SECOND * speed);
-  return step.op === "+" ? line : line / 2;
-}
-
-/**
- * A generous upper bound on how long speaking the text takes, for when the browser never
- * reports the end of an utterance.
- * @param {string} text
- * @param {number} speed
- */
-export function speechTimeout(text, speed) {
-  const words = text.split(/\s+/).filter(Boolean).length;
-  return (2 * 1000 * words) / (WORDS_PER_SECOND * speed) + 2000;
-}
-
-/**
- * The first step of a commit, clamped to the script. Seeking past the end lands on the end.
- * @param {readonly Step[]} script
- * @param {number} commit
- */
-export function commitStart(script, commit) {
-  const at = script.findIndex((s) => s.kind === "commit" && s.commit === commit);
-  if (at !== -1) return at;
-  return commit < 0 ? 0 : script.length;
-}
-
-/**
- * The commit on screen at a position: the one whose step was performed last.
- * @param {readonly Step[]} script
- * @param {number} position
- */
-export function commitAt(script, position) {
-  return script[Math.max(0, Math.min(position, script.length) - 1)]?.commit ?? 0;
-}
-
-/**
- * How each change line of a commit looks after `position` steps, and which line was written
- * last. Added lines are hidden until typed; removed lines stay shown until their step.
- * @param {readonly Step[]} script
- * @param {number} position
- * @param {number} commit
- * @returns {{ states: Map<string, LineState>, current: string | null }}
- */
-export function lineStates(script, position, commit) {
-  /** @type {Map<string, LineState>} */
-  const states = new Map();
-  /** @type {string | null} */
-  let current = null;
-  script.forEach((step, i) => {
-    if (step.kind !== "line" || step.commit !== commit) return;
-    const key = lineKey(step.unit, step.line);
-    const done = i < position;
-    if (step.op === "+") states.set(key, done ? "shown" : "hidden");
-    else states.set(key, done ? "gone" : "shown");
-    if (done) current = key;
-  });
-  if (commitAt(script, position) !== commit) current = null;
-  return { states, current };
-}
-
-/**
- * A speed from storage or a select, snapped to the offered steps.
- * @param {unknown} value
- */
-export function parseSpeed(value) {
-  const n = Number(value);
-  return SPEEDS.includes(n) ? n : 1;
-}
-
-/**
- * The voice to preselect: the saved one if the browser still has it, else the browser's
- * default, else the first voice in the reader's language, else none.
- * @param {readonly VoiceInfo[]} voices
- * @param {string | null} saved
- * @param {string} language
- * @returns {string | null}
- */
-export function pickVoice(voices, saved, language) {
-  if (saved !== null && voices.some((v) => v.name === saved)) return saved;
-  const prefix = language.split("-")[0] ?? "";
-  const match =
-    voices.find((v) => v.default && v.lang.startsWith(prefix)) ??
-    voices.find((v) => v.lang === language) ??
-    voices.find((v) => v.lang.startsWith(prefix));
-  return match?.name ?? null;
-}

package/dist/ui/style.css

@@ -1,466 +0,0 @@
-:root {
-  color-scheme: light dark;
-  --bg: #ffffff;
-  --panel: #f6f7f9;
-  --border: #d8dce2;
-  --text: #1c2026;
-  --muted: #6a7280;
-  --accent: #2459d6;
-  --accent-text: #ffffff;
-  --add-bg: #e3f6e8;
-  --add-text: #0f5a26;
-  --del-bg: #fde7e7;
-  --del-text: #8a1c1c;
-  --select-bg: #fff3c4;
-  --comment-bg: #eef3ff;
-  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #14171c;
-    --panel: #1c2027;
-    --border: #2f353f;
-    --text: #e4e7ec;
-    --muted: #8d96a5;
-    --accent: #6c9bff;
-    --accent-text: #0b1220;
-    --add-bg: #12301c;
-    --add-text: #7fdc9a;
-    --del-bg: #3a1a1c;
-    --del-text: #ff9b9b;
-    --select-bg: #4a4012;
-    --comment-bg: #1b2538;
-  }
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  background: var(--bg);
-  color: var(--text);
-  font:
-    14px / 1.5 system-ui,
-    sans-serif;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.muted {
-  color: var(--muted);
-}
-
-.topbar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 16px;
-  border-bottom: 1px solid var(--border);
-  background: var(--panel);
-}
-
-.sessions {
-  display: flex;
-  gap: 8px;
-  font-size: 13px;
-}
-
-.sessions[hidden] {
-  display: none;
-}
-
-.sessions a {
-  color: var(--accent);
-}
-
-.sessions a[aria-current="page"] {
-  color: var(--text);
-  font-weight: 600;
-  text-decoration: none;
-}
-
-body.index {
-  display: block;
-  height: auto;
-  padding: 16px 24px;
-}
-
-.session-index {
-  padding-left: 18px;
-}
-
-.session-index a {
-  color: var(--accent);
-  font-weight: 600;
-}
-
-.status {
-  margin-left: auto;
-  color: var(--del-text);
-}
-
-button {
-  font: inherit;
-  padding: 3px 10px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg);
-  color: var(--text);
-  cursor: pointer;
-}
-
-button:hover {
-  border-color: var(--accent);
-}
-
-button.primary {
-  background: var(--accent);
-  color: var(--accent-text);
-  border-color: var(--accent);
-}
-
-button.link {
-  border: none;
-  background: none;
-  color: var(--accent);
-  padding: 0 4px;
-}
-
-.layout {
-  flex: 1;
-  display: grid;
-  grid-template-columns: 300px 1fr;
-  min-height: 0;
-}
-
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--border);
-  background: var(--panel);
-  min-height: 0;
-}
-
-.commit-list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  overflow-y: auto;
-  flex: 1;
-}
-
-.commit-list li {
-  display: flex;
-  gap: 8px;
-  padding: 8px 12px;
-  cursor: pointer;
-  border-left: 3px solid transparent;
-}
-
-.commit-list li:hover {
-  background: var(--bg);
-}
-
-.commit-list li.selected {
-  background: var(--bg);
-  border-left-color: var(--accent);
-  font-weight: 600;
-}
-
-.commit-list .index {
-  color: var(--muted);
-  min-width: 2ch;
-  text-align: right;
-}
-
-.commit-list .title {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.badge {
-  background: var(--accent);
-  color: var(--accent-text);
-  border-radius: 10px;
-  padding: 0 7px;
-  font-size: 12px;
-}
-
-.plan-note {
-  border-top: 1px solid var(--border);
-  padding: 10px 12px;
-}
-
-.main {
-  overflow-y: auto;
-  padding: 16px 24px 64px;
-}
-
-.commit-head h2 {
-  margin: 0 0 4px;
-  font-size: 16px;
-}
-
-.message {
-  font-family: var(--font-mono);
-  white-space: pre-wrap;
-  margin: 4px 0 8px;
-  padding: 8px 12px;
-  background: var(--panel);
-  border-radius: 6px;
-}
-
-.controls {
-  display: flex;
-  gap: 8px;
-  margin: 4px 0;
-}
-
-.file-group {
-  margin-top: 20px;
-}
-
-.file-group > h3 {
-  margin: 0 0 6px;
-  font: 600 13px var(--font-mono);
-  color: var(--muted);
-}
-
-.unit {
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  margin-bottom: 12px;
-  overflow: hidden;
-}
-
-.unit-head {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  padding: 3px 10px;
-  background: var(--panel);
-  color: var(--muted);
-  font: 12px var(--font-mono);
-}
-
-.unit-head .spacer {
-  flex: 1;
-}
-
-.card {
-  padding: 6px 10px;
-  font-family: var(--font-mono);
-}
-
-.diff {
-  font: 12.5px / 1.5 var(--font-mono);
-  overflow-x: auto;
-}
-
-.dl {
-  display: flex;
-  white-space: pre;
-  min-width: max-content;
-  max-height: 2em;
-}
-
-.dl .gutter {
-  width: 4ch;
-  text-align: right;
-  padding-right: 6px;
-  color: var(--muted);
-  user-select: none;
-}
-
-.dl .op {
-  width: 2ch;
-  user-select: none;
-}
-
-.dl .label {
-  margin-left: 12px;
-  font-size: 11px;
-  color: var(--muted);
-  font-style: italic;
-}
-
-.dl.add.mine {
-  background: var(--add-bg);
-  color: var(--add-text);
-}
-
-.dl.del.mine {
-  background: var(--del-bg);
-  color: var(--del-text);
-}
-
-.dl.other {
-  opacity: 0.4;
-}
-
-.dl.mine.pickable {
-  cursor: pointer;
-}
-
-.dl.picked {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
-  background: var(--select-bg);
-  color: var(--text);
-}
-
-.comments {
-  padding: 0 10px;
-}
-
-.comment {
-  background: var(--comment-bg);
-  border-radius: 6px;
-  margin: 8px 0;
-  padding: 6px 10px;
-}
-
-.comment .meta {
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.comment .text {
-  white-space: pre-wrap;
-}
-
-textarea {
-  width: 100%;
-  min-height: 64px;
-  font: inherit;
-  padding: 6px 8px;
-  color: var(--text);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  resize: vertical;
-}
-
-.box {
-  margin: 8px 0;
-}
-
-.box .row {
-  display: flex;
-  gap: 8px;
-  margin-top: 4px;
-}
-
-.done {
-  position: fixed;
-  inset: 0;
-  display: grid;
-  place-items: center;
-  background: var(--bg);
-  font-size: 16px;
-  padding: 24px;
-  text-align: center;
-}
-
-.done[hidden] {
-  display: none;
-}
-
-.done code {
-  font-family: var(--font-mono);
-  background: var(--panel);
-  padding: 1px 6px;
-  border-radius: 4px;
-}
-
-.player {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 12px;
-  padding: 6px 16px;
-  border-bottom: 1px solid var(--border);
-  background: var(--panel);
-}
-
-.player[hidden] {
-  display: none;
-}
-
-.player label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--muted);
-}
-
-select {
-  font: inherit;
-  padding: 2px 6px;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg);
-  color: var(--text);
-  max-width: 220px;
-}
-
-button:disabled,
-select:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.caption {
-  flex: 1 1 320px;
-  margin: 0;
-  font-style: italic;
-  color: var(--text);
-}
-
-.dl.pending {
-  display: none;
-}
-
-.dl.gone {
-  opacity: 0;
-  max-height: 0;
-  overflow: hidden;
-  transition:
-    opacity 0.5s ease,
-    max-height 0.3s ease 0.5s;
-}
-
-.dl.current {
-  outline: 2px solid var(--accent);
-  outline-offset: -2px;
-  animation: type-in 0.25s steps(16, end);
-}
-
-.dl.gone.current {
-  opacity: 0.45;
-  max-height: 2em;
-  text-decoration: line-through;
-}
-
-@keyframes type-in {
-  from {
-    clip-path: inset(0 100% 0 0);
-  }
-  to {
-    clip-path: inset(0 0 0 0);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .dl.current,
-  .dl.gone {
-    animation: none;
-    transition: none;
-  }
-}