@fluixi/devtools 0.2.0-alpha.2 → 0.2.0-alpha.4

package/dist/timeline.js

@@ -0,0 +1,271 @@
+// The history, as something to read.
+//
+// Commits, not a flat log: one click makes a write, four runs and a disposal, interleaved with
+// whatever the router was doing. Grouped, they read as "this is what that click did".
+//
+// Newest first, and re-rendered only when it would say something different — a panel that
+// repaints on every poll cannot be scrolled or selected.
+import { toCommits } from './history.js';
+import { changeRows, handleCopyClick, CHANGE_CSS } from './change-view.js';
+const escape = (text) => text.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+const clock = (t) => {
+    const d = new Date(t);
+    const pad = (n, width = 2) => String(n).padStart(width, '0');
+    return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`;
+};
+/** The name of what the commit started from: `count`, or what to say when there is none. */
+function subject(commit, nameOf) {
+    if (!commit.cause)
+        return commit.commit === 0 ? 'first render' : 'continued';
+    return nameOf(commit.cause);
+}
+/** `0 → 1`, when the write carried both sides of it. */
+function change(commit) {
+    const cause = commit.cause;
+    if (!cause || cause.from === undefined || cause.to === undefined)
+        return '';
+    return `${cause.from} → ${cause.to}`;
+}
+/** The whole of it, for the tooltip: the row elides, this does not. */
+function detail(commit, nameOf) {
+    const lines = [`${subject(commit, nameOf)} ${change(commit)}`.trim()];
+    const named = (kind, verb) => {
+        const ids = commit.events.filter((e) => e.kind === kind && e !== commit.cause).map(nameOf);
+        if (ids.length)
+            lines.push(`${verb}: ${[...new Set(ids)].join(', ')}`);
+    };
+    named('ran', 'ran');
+    named('write', 'written');
+    named('created', 'made');
+    named('disposed', 'gone');
+    return lines.join('\n');
+}
+/** "2 ran · 1 created" — what the commit caused, without listing every line of it. */
+function summary(commit) {
+    const counts = { ran: 0, created: 0, disposed: 0, write: 0 };
+    for (const event of commit.events)
+        counts[event.kind]++;
+    // The opening write is the title, so it is not also a thing the commit did.
+    const writes = counts.write - (commit.cause ? 1 : 0);
+    return [
+        counts.ran && `${counts.ran} ran`,
+        writes > 0 && `${writes} written`,
+        counts.created && `${counts.created} made`,
+        counts.disposed && `${counts.disposed} gone`,
+    ]
+        .filter(Boolean)
+        .join(' · ');
+}
+export function createTimeline(host, options = {}) {
+    const empty = options.empty ?? 'nothing has happened yet';
+    const limit = options.limit ?? 100;
+    let events = [];
+    /** The highest seq folded in. Every producer counts up, so this is all dedupe needs. */
+    let seen = -1;
+    /** Selected, expanded and lit on the graph are one state: all three say "this one". */
+    let selected = null;
+    let filter = '';
+    let signature = '';
+    /**
+     * Held still on request.
+     *
+     * A page that writes on every frame fills this faster than anyone can read it, and the
+     * entry being looked at scrolls away. Dropped rather than buffered: catching up on a
+     * thousand events nobody watched is not what the button is for.
+     */
+    let paused = false;
+    // Built once: re-rendering the box being typed in would take the caret with it.
+    host.innerHTML =
+        '<div class="tl-head">' +
+            '<input class="tl-filter" type="search" placeholder="filter by name or value" aria-label="Filter the timeline" />' +
+            '<button type="button" class="tl-pause" title="Stop taking new updates, so the list holds still while you read it">❚❚</button>' +
+            '</div>' +
+            '<div class="tl-list"></div>';
+    const input = host.querySelector('.tl-filter');
+    const list = host.querySelector('.tl-list');
+    const pause = host.querySelector('.tl-pause');
+    const all = () => toCommits(events).slice(-limit).reverse();
+    const idsOf = (commit) => {
+        const ids = new Set();
+        for (const event of commit.events) {
+            ids.add(event.id);
+            if (event.by !== undefined)
+                ids.add(event.by);
+        }
+        return [...ids];
+    };
+    /** Everything the row says, which is what a reader is searching against. */
+    const haystack = (commit, nameOf) => `${detail(commit, nameOf)} ${summary(commit)}`.toLowerCase();
+    const shown = (nameOf) => filter ? all().filter((c) => haystack(c, nameOf).includes(filter)) : all();
+    input.addEventListener('input', () => {
+        filter = input.value.trim().toLowerCase();
+        signature = '';
+    });
+    const showPaused = () => {
+        pause.textContent = paused ? '▶' : '❚❚';
+        pause.classList.toggle('on', paused);
+        pause.title = paused
+            ? 'Taking updates again'
+            : 'Stop taking new updates, so the list holds still while you read it';
+    };
+    pause.addEventListener('click', () => {
+        paused = !paused;
+        showPaused();
+        signature = '';
+    });
+    list.addEventListener('click', (e) => {
+        // Copying from an open row must not also shut it.
+        if (handleCopyClick(e))
+            return;
+        const row = e.target?.closest?.('.tl-commit');
+        if (!row)
+            return;
+        const number = Number(row.dataset.commit);
+        // Inside the row, so it would otherwise shut what it was opening.
+        if (e.target.classList.contains('tl-more')) {
+            const full = all().find((c) => c.commit === number);
+            if (full)
+                options.onExpand?.(full);
+            return;
+        }
+        // Clicking the open one shuts it — the only way back to watching everything.
+        selected = selected === number ? null : number;
+        const commit = all().find((c) => c.commit === selected) ?? null;
+        options.onSelect?.(commit ? idsOf(commit) : [], commit);
+        signature = '';
+    });
+    return {
+        setPaused(next) {
+            paused = next;
+            showPaused();
+            signature = '';
+        },
+        get paused() {
+            return paused;
+        },
+        push(incoming) {
+            if (paused)
+                return;
+            let added = false;
+            for (const event of incoming) {
+                if (event.seq <= seen)
+                    continue;
+                events.push(event);
+                seen = event.seq;
+                added = true;
+            }
+            if (!added)
+                return;
+            // Bounded by commits: cutting mid-commit shows a click with half of what it caused.
+            if (events.length > limit * 40)
+                events = events.slice(-limit * 40);
+        },
+        render(graph) {
+            const nameOf = (e) => graph.get(e.id)?.label ?? e.label ?? `#${e.id}`;
+            const rows = shown(nameOf);
+            const next = `${seen}|${selected ?? ''}|${filter}|${rows.length}|${graph.size}`;
+            if (next === signature)
+                return;
+            signature = next;
+            if (!rows.length) {
+                // With a filter typed, "nothing has happened" would read as recording being broken.
+                list.innerHTML = `<span class="tl-empty">${escape(filter ? 'nothing matches' : empty)}</span>`;
+                return;
+            }
+            list.innerHTML = rows
+                .map((commit) => {
+                const open = commit.commit === selected;
+                const did = summary(commit);
+                const moved = change(commit);
+                const parts = [
+                    ['ran', 'ran'],
+                    ['write', 'written'],
+                    ['created', 'made'],
+                    ['disposed', 'gone'],
+                ];
+                const body = parts
+                    .map(([kind, verb]) => {
+                    const names = [
+                        ...new Set(commit.events.filter((e) => e.kind === kind && e !== commit.cause).map(nameOf)),
+                    ];
+                    return names.length
+                        ? `<div class="tl-part"><span class="tl-verb">${verb}</span> ${escape(names.join(', '))}</div>`
+                        : '';
+                })
+                    .join('');
+                return (`<div class="tl-commit${open ? ' selected' : ''}"` +
+                    ` data-commit="${commit.commit}" title="${escape(detail(commit, nameOf))}">` +
+                    '<div class="tl-line">' +
+                    `<span class="tl-caret">${open ? '▾' : '▸'}</span>` +
+                    `<span class="tl-time">${clock(commit.t)}</span>` +
+                    `<span class="tl-name">${escape(subject(commit, nameOf))}</span>` +
+                    (did ? `<span class="tl-did">${escape(did)}</span>` : '') +
+                    '</div>' +
+                    // Open, the value gets the width and wraps.
+                    (open
+                        ? `<div class="tl-body">${moved ? `<div class="tl-change">${escape(moved)}</div>` : ''}${changeRows(commit.cause?.change, 6)}${body}${
+                        // Only worth offering when there is more than the row can hold.
+                        options.onExpand && (commit.cause?.change || commit.events.length > 6)
+                            ? '<button type="button" class="tl-more">open in full</button>'
+                            : ''}</div>`
+                        : '') +
+                    '</div>');
+            })
+                .join('');
+        },
+        selected() {
+            const commit = all().find((c) => c.commit === selected);
+            return commit ? idsOf(commit) : [];
+        },
+        clear() {
+            events = [];
+            seen = -1;
+            selected = null;
+            signature = '';
+            // The filter box stays: a new run is usually a rerun of what they were narrowing to.
+            list.innerHTML = `<span class="tl-empty">${escape(empty)}</span>`;
+        },
+    };
+}
+/** Default styling for what createTimeline writes, in the shape DEVTOOLS_CSS is used. */
+export const TIMELINE_CSS = `
+.tl-head { position: relative; display: flex; gap: 4px; padding: 0 .25rem; }
+.tl-pause {
+  position: absolute; right: .4rem; top: 40%; transform: translateY(-50%);
+  flex: none; width: 26px; cursor: pointer; font: inherit; font-size: 10px;
+  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 4px;
+  background: transparent; color: var(--fx-muted, #8a90a2);
+}
+.tl-pause:hover { color: var(--fx-label, #e7e9ee); }
+.tl-pause.on { color: var(--fx-accent, #5eead4); border-color: var(--fx-accent, #5eead4); }
+.tl-filter {
+  flex: 1; min-width: 0; box-sizing: border-box; padding: 3px 6px;
+  font: inherit; font-size: 11.5px; border-radius: 4px;
+  border: 1px solid var(--fx-line, #ffffff1f);
+  background: var(--fx-input, transparent); color: var(--fx-label, #e7e9ee);
+  padding-inline-end: 2rem;
+}
+.tl-empty { color: var(--fx-muted, #8a90a2); font-size: 12px; }
+.tl-commit { padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 11.5px; }
+.tl-commit:hover { background: var(--fx-hover, #ffffff10); }
+.tl-commit.selected { background: var(--fx-selected, #ffffff1a); }
+.tl-line { display: flex; align-items: baseline; gap: 6px; }
+.tl-caret { color: var(--fx-muted, #8a90a2); font-size: 9px; flex: none; }
+.tl-time { font-family: ui-monospace, monospace; font-size: 10px; color: var(--fx-muted, #8a90a2); flex: none; }
+.tl-name { color: var(--fx-label, #e7e9ee); font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tl-did { margin-left: auto; color: var(--fx-muted, #8a90a2); flex: none; }
+.tl-body { margin: 3px 0 2px 15px; }
+/* Wraps: an open entry exists to show the whole value. */
+.tl-change {
+  font-family: ui-monospace, monospace; font-size: 11px;
+  color: var(--fx-accent, #5eead4); overflow-wrap: anywhere; white-space: pre-wrap;
+}
+.tl-part { margin-top: 2px; color: var(--fx-label, #e7e9ee); font-size: 11px; overflow-wrap: anywhere; }
+.tl-verb { color: var(--fx-muted, #8a90a2); }
+.tl-more {
+  margin-top: 5px; padding: 2px 8px; font: inherit; font-size: 10.5px; cursor: pointer;
+  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 4px;
+  background: transparent; color: var(--fx-muted, #8a90a2);
+}
+.tl-more:hover { color: var(--fx-label, #e7e9ee); }
+${CHANGE_CSS}`;

package/dist/timeline.mjs

@@ -0,0 +1,327 @@
+// src/history.ts
+function toCommits(events) {
+  const byNumber = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    const bucket = byNumber.get(event.commit);
+    if (bucket) bucket.push(event);
+    else byNumber.set(event.commit, [event]);
+  }
+  return [...byNumber.entries()].sort((a, b) => a[0] - b[0]).map(([commit, group]) => ({
+    commit,
+    t: group[0].t,
+    events: group,
+    cause: group.find((e) => e.kind === "write" && e.by === void 0)
+  }));
+}
+
+// src/copy.ts
+function confirmOn(button, said = "copied") {
+  if (!button) return;
+  const was = button.textContent;
+  button.textContent = said;
+  setTimeout(() => {
+    button.textContent = was;
+  }, 1200);
+}
+function fallback(text, button) {
+  try {
+    const doc = button?.ownerDocument ?? document;
+    const area = doc.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    doc.body.appendChild(area);
+    area.select();
+    doc.execCommand("copy");
+    area.remove();
+    confirmOn(button);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function copyText(text, button) {
+  const clipboard = globalThis.navigator?.clipboard;
+  if (clipboard?.writeText) {
+    try {
+      await clipboard.writeText(text);
+      confirmOn(button);
+      return true;
+    } catch {
+    }
+  }
+  return fallback(text, button);
+}
+
+// src/change-view.ts
+var escape = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+var SIGN = { added: "+", removed: "−", changed: "~" };
+function pretty(json) {
+  if (!json) return void 0;
+  try {
+    return JSON.stringify(JSON.parse(json), null, 2);
+  } catch {
+    return void 0;
+  }
+}
+function sideOf(text, json, cls) {
+  const block = pretty(json);
+  if (!block) return `<span class="ch-${cls}">${escape(text ?? "")}</span>`;
+  return `<div class="ch-block ch-${cls}"><button type="button" class="ch-copy" title="Copy" data-copy="${escape(block)}">copy</button><pre class="ch-json">${escape(block)}</pre></div>`;
+}
+function changeRows(change2, limit = Infinity) {
+  if (!change2?.entries?.length) return "";
+  const shown = change2.entries.slice(0, limit);
+  const hidden = change2.entries.length - shown.length + (change2.more ?? 0);
+  const rows = shown.map((entry) => {
+    const from = sideOf(entry.from, entry.fromJson, "from");
+    const to = sideOf(entry.to, entry.toJson, "to");
+    const sides = entry.op === "changed" ? `${from}<span class="ch-arrow">→</span>${to}` : entry.op === "added" ? to : from;
+    const stacked = entry.fromJson || entry.toJson ? " ch-stacked" : "";
+    return `<div class="ch-row ch-${entry.op}${stacked}"><span class="ch-sign">${SIGN[entry.op] ?? "·"}</span><span class="ch-key">${escape(entry.key)}</span><span class="ch-sides">${sides}</span></div>`;
+  }).join("");
+  const size = change2.length ? `<div class="ch-size">${change2.length.from} → ${change2.length.to} items</div>` : "";
+  return `<div class="ch-list">${size}${rows}${hidden > 0 ? `<div class="ch-more">and ${hidden} more</div>` : ""}</div>`;
+}
+function handleCopyClick(event) {
+  const button = event.target?.closest?.(".ch-copy");
+  if (!button) return false;
+  void copyText(button.dataset.copy ?? "", button);
+  return true;
+}
+var CHANGE_CSS = `
+.ch-list { margin-top: 4px; font-family: ui-monospace, monospace; font-size: 11px; }
+.ch-size { color: var(--fx-muted, #8a90a2); margin-bottom: 2px; }
+.ch-row { display: flex; gap: 6px; align-items: baseline; padding: 1px 0; }
+.ch-row.ch-stacked { align-items: flex-start; padding: 3px 0; }
+.ch-sign { flex: none; width: 9px; text-align: center; }
+.ch-added .ch-sign { color: var(--state, #34d399); }
+.ch-removed .ch-sign { color: var(--fx-write, #fb7185); }
+.ch-changed .ch-sign { color: var(--effect, #fbbf24); }
+.ch-key { flex: none; color: var(--fx-muted, #8a90a2); }
+.ch-sides { min-width: 0; flex: 1; overflow-wrap: anywhere; }
+.ch-stacked .ch-sides { display: flex; flex-direction: column; gap: 2px; }
+.ch-from { color: var(--fx-muted, #8a90a2); }
+.ch-row:not(.ch-stacked) .ch-from { text-decoration: line-through; }
+.ch-arrow { color: var(--fx-muted, #8a90a2); margin: 0 4px; }
+.ch-to { color: var(--fx-label, #e7e9ee); }
+.ch-more { color: var(--fx-muted, #8a90a2); margin-top: 2px; }
+/* In the corner: an object can be tall, and a button under it is a scroll away. */
+.ch-block { position: relative; border-radius: 4px; border: 1px solid var(--fx-line, #ffffff14); }
+.ch-block.ch-from { opacity: .72; }
+.ch-json { margin: 0; padding: 5px 7px; overflow-x: auto; white-space: pre; font: inherit; }
+.ch-copy {
+  position: absolute; top: 3px; right: 3px; padding: 1px 6px; cursor: pointer;
+  font: inherit; font-size: 9.5px; opacity: 0; transition: opacity .12s;
+  border: 1px solid var(--fx-line, #ffffff26); border-radius: 3px;
+  background: var(--fx-panel, #14161c); color: var(--fx-muted, #8a90a2);
+}
+.ch-block:hover .ch-copy, .ch-copy:focus { opacity: 1; }
+.ch-copy:hover { color: var(--fx-label, #e7e9ee); }
+`;
+
+// src/timeline.ts
+var escape2 = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+var clock = (t) => {
+  const d = new Date(t);
+  const pad = (n, width = 2) => String(n).padStart(width, "0");
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`;
+};
+function subject(commit, nameOf) {
+  if (!commit.cause) return commit.commit === 0 ? "first render" : "continued";
+  return nameOf(commit.cause);
+}
+function change(commit) {
+  const cause = commit.cause;
+  if (!cause || cause.from === void 0 || cause.to === void 0) return "";
+  return `${cause.from} → ${cause.to}`;
+}
+function detail(commit, nameOf) {
+  const lines = [`${subject(commit, nameOf)} ${change(commit)}`.trim()];
+  const named = (kind, verb) => {
+    const ids = commit.events.filter((e) => e.kind === kind && e !== commit.cause).map(nameOf);
+    if (ids.length) lines.push(`${verb}: ${[...new Set(ids)].join(", ")}`);
+  };
+  named("ran", "ran");
+  named("write", "written");
+  named("created", "made");
+  named("disposed", "gone");
+  return lines.join("\n");
+}
+function summary(commit) {
+  const counts = { ran: 0, created: 0, disposed: 0, write: 0 };
+  for (const event of commit.events) counts[event.kind]++;
+  const writes = counts.write - (commit.cause ? 1 : 0);
+  return [
+    counts.ran && `${counts.ran} ran`,
+    writes > 0 && `${writes} written`,
+    counts.created && `${counts.created} made`,
+    counts.disposed && `${counts.disposed} gone`
+  ].filter(Boolean).join(" · ");
+}
+function createTimeline(host, options = {}) {
+  const empty = options.empty ?? "nothing has happened yet";
+  const limit = options.limit ?? 100;
+  let events = [];
+  let seen = -1;
+  let selected = null;
+  let filter = "";
+  let signature = "";
+  let paused = false;
+  host.innerHTML = '<div class="tl-head"><input class="tl-filter" type="search" placeholder="filter by name or value" aria-label="Filter the timeline" /><button type="button" class="tl-pause" title="Stop taking new updates, so the list holds still while you read it">❚❚</button></div><div class="tl-list"></div>';
+  const input = host.querySelector(".tl-filter");
+  const list = host.querySelector(".tl-list");
+  const pause = host.querySelector(".tl-pause");
+  const all = () => toCommits(events).slice(-limit).reverse();
+  const idsOf = (commit) => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const event of commit.events) {
+      ids.add(event.id);
+      if (event.by !== void 0) ids.add(event.by);
+    }
+    return [...ids];
+  };
+  const haystack = (commit, nameOf) => `${detail(commit, nameOf)} ${summary(commit)}`.toLowerCase();
+  const shown = (nameOf) => filter ? all().filter((c) => haystack(c, nameOf).includes(filter)) : all();
+  input.addEventListener("input", () => {
+    filter = input.value.trim().toLowerCase();
+    signature = "";
+  });
+  const showPaused = () => {
+    pause.textContent = paused ? "▶" : "❚❚";
+    pause.classList.toggle("on", paused);
+    pause.title = paused ? "Taking updates again" : "Stop taking new updates, so the list holds still while you read it";
+  };
+  pause.addEventListener("click", () => {
+    paused = !paused;
+    showPaused();
+    signature = "";
+  });
+  list.addEventListener("click", (e) => {
+    if (handleCopyClick(e)) return;
+    const row = e.target?.closest?.(".tl-commit");
+    if (!row) return;
+    const number = Number(row.dataset.commit);
+    if (e.target.classList.contains("tl-more")) {
+      const full = all().find((c) => c.commit === number);
+      if (full) options.onExpand?.(full);
+      return;
+    }
+    selected = selected === number ? null : number;
+    const commit = all().find((c) => c.commit === selected) ?? null;
+    options.onSelect?.(commit ? idsOf(commit) : [], commit);
+    signature = "";
+  });
+  return {
+    setPaused(next) {
+      paused = next;
+      showPaused();
+      signature = "";
+    },
+    get paused() {
+      return paused;
+    },
+    push(incoming) {
+      if (paused) return;
+      let added = false;
+      for (const event of incoming) {
+        if (event.seq <= seen) continue;
+        events.push(event);
+        seen = event.seq;
+        added = true;
+      }
+      if (!added) return;
+      if (events.length > limit * 40) events = events.slice(-limit * 40);
+    },
+    render(graph) {
+      const nameOf = (e) => graph.get(e.id)?.label ?? e.label ?? `#${e.id}`;
+      const rows = shown(nameOf);
+      const next = `${seen}|${selected ?? ""}|${filter}|${rows.length}|${graph.size}`;
+      if (next === signature) return;
+      signature = next;
+      if (!rows.length) {
+        list.innerHTML = `<span class="tl-empty">${escape2(filter ? "nothing matches" : empty)}</span>`;
+        return;
+      }
+      list.innerHTML = rows.map((commit) => {
+        const open = commit.commit === selected;
+        const did = summary(commit);
+        const moved = change(commit);
+        const parts = [
+          ["ran", "ran"],
+          ["write", "written"],
+          ["created", "made"],
+          ["disposed", "gone"]
+        ];
+        const body = parts.map(([kind, verb]) => {
+          const names = [
+            ...new Set(
+              commit.events.filter((e) => e.kind === kind && e !== commit.cause).map(nameOf)
+            )
+          ];
+          return names.length ? `<div class="tl-part"><span class="tl-verb">${verb}</span> ${escape2(names.join(", "))}</div>` : "";
+        }).join("");
+        return `<div class="tl-commit${open ? " selected" : ""}" data-commit="${commit.commit}" title="${escape2(detail(commit, nameOf))}"><div class="tl-line"><span class="tl-caret">${open ? "▾" : "▸"}</span><span class="tl-time">${clock(commit.t)}</span><span class="tl-name">${escape2(subject(commit, nameOf))}</span>` + (did ? `<span class="tl-did">${escape2(did)}</span>` : "") + "</div>" + // Open, the value gets the width and wraps.
+        (open ? `<div class="tl-body">${moved ? `<div class="tl-change">${escape2(moved)}</div>` : ""}${changeRows(commit.cause?.change, 6)}${body}${// Only worth offering when there is more than the row can hold.
+        options.onExpand && (commit.cause?.change || commit.events.length > 6) ? '<button type="button" class="tl-more">open in full</button>' : ""}</div>` : "") + "</div>";
+      }).join("");
+    },
+    selected() {
+      const commit = all().find((c) => c.commit === selected);
+      return commit ? idsOf(commit) : [];
+    },
+    clear() {
+      events = [];
+      seen = -1;
+      selected = null;
+      signature = "";
+      list.innerHTML = `<span class="tl-empty">${escape2(empty)}</span>`;
+    }
+  };
+}
+var TIMELINE_CSS = `
+.tl-head { position: relative; display: flex; gap: 4px; padding: 0 .25rem; }
+.tl-pause {
+  position: absolute; right: .4rem; top: 40%; transform: translateY(-50%);
+  flex: none; width: 26px; cursor: pointer; font: inherit; font-size: 10px;
+  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 4px;
+  background: transparent; color: var(--fx-muted, #8a90a2);
+}
+.tl-pause:hover { color: var(--fx-label, #e7e9ee); }
+.tl-pause.on { color: var(--fx-accent, #5eead4); border-color: var(--fx-accent, #5eead4); }
+.tl-filter {
+  flex: 1; min-width: 0; box-sizing: border-box; padding: 3px 6px;
+  font: inherit; font-size: 11.5px; border-radius: 4px;
+  border: 1px solid var(--fx-line, #ffffff1f);
+  background: var(--fx-input, transparent); color: var(--fx-label, #e7e9ee);
+  padding-inline-end: 2rem;
+}
+.tl-empty { color: var(--fx-muted, #8a90a2); font-size: 12px; }
+.tl-commit { padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 11.5px; }
+.tl-commit:hover { background: var(--fx-hover, #ffffff10); }
+.tl-commit.selected { background: var(--fx-selected, #ffffff1a); }
+.tl-line { display: flex; align-items: baseline; gap: 6px; }
+.tl-caret { color: var(--fx-muted, #8a90a2); font-size: 9px; flex: none; }
+.tl-time { font-family: ui-monospace, monospace; font-size: 10px; color: var(--fx-muted, #8a90a2); flex: none; }
+.tl-name { color: var(--fx-label, #e7e9ee); font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tl-did { margin-left: auto; color: var(--fx-muted, #8a90a2); flex: none; }
+.tl-body { margin: 3px 0 2px 15px; }
+/* Wraps: an open entry exists to show the whole value. */
+.tl-change {
+  font-family: ui-monospace, monospace; font-size: 11px;
+  color: var(--fx-accent, #5eead4); overflow-wrap: anywhere; white-space: pre-wrap;
+}
+.tl-part { margin-top: 2px; color: var(--fx-label, #e7e9ee); font-size: 11px; overflow-wrap: anywhere; }
+.tl-verb { color: var(--fx-muted, #8a90a2); }
+.tl-more {
+  margin-top: 5px; padding: 2px 8px; font: inherit; font-size: 10.5px; cursor: pointer;
+  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 4px;
+  background: transparent; color: var(--fx-muted, #8a90a2);
+}
+.tl-more:hover { color: var(--fx-label, #e7e9ee); }
+${CHANGE_CSS}`;
+export {
+  TIMELINE_CSS,
+  createTimeline
+};