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

package/dist/source.mjs

@@ -0,0 +1,90 @@
+// src/source.ts
+var MARKER = "__fx_source";
+var COMPONENT_MARKER = "__fx_component";
+var HOLE_MARKER = "__fx_hole";
+var PROPS_MARKER = "__fx_props";
+var MARKS = "__FLUIXI_DEVTOOLS_MARKS__";
+var host = globalThis;
+var shared = host[MARKS] ?? {
+  pending: null,
+  expiring: false,
+  components: /* @__PURE__ */ new Map()
+};
+host[MARKS] = shared;
+function markReactiveSource(file, line, column, name) {
+  const location = locate(file, line, column);
+  if (shared.pending && location.external && !shared.pending.location?.external) return;
+  shared.pending = { name, location };
+  shared.expiring = false;
+}
+function locate(file, line, column) {
+  const external = !!file && (/^([a-zA-Z]:)?[\\/]/.test(file) || file.includes("node_modules/"));
+  return external ? { file, line, column, external } : { file, line, column };
+}
+function markComponentSource(name, file, line, column) {
+  const seen = shared.components.get(name);
+  const next = locate(file, line, column);
+  if (seen === void 0) {
+    shared.components.set(name, next);
+    return;
+  }
+  if (!seen || seen.file !== file || seen.line !== line) shared.components.set(name, null);
+}
+function componentSource(name) {
+  return shared.components.get(name) ?? void 0;
+}
+function takeReactiveSource() {
+  const mark = shared.pending;
+  if (mark) {
+    if (mark.name !== void 0) shared.pending = { location: mark.location };
+    if (!shared.expiring) {
+      shared.expiring = true;
+      queueMicrotask(() => {
+        shared.expiring = false;
+        shared.pending = null;
+      });
+    }
+  }
+  return mark;
+}
+var HOLES = /* @__PURE__ */ new WeakMap();
+var HOLE_TAG = "__fx_at";
+function markHole(accessor, line, column, name) {
+  if (accessor && (typeof accessor === "object" || typeof accessor === "function")) {
+    const at = name === void 0 ? { line, column } : { line, column, name };
+    HOLES.set(accessor, at);
+    try {
+      Object.defineProperty(accessor, HOLE_TAG, { value: at, configurable: true });
+    } catch {
+    }
+  }
+  shared.pending = null;
+  return accessor;
+}
+var PROPS = /* @__PURE__ */ new WeakMap();
+function markProps(props, at) {
+  if (props && typeof props === "object") PROPS.set(props, at);
+  return props;
+}
+function propsLocations(props) {
+  return props && typeof props === "object" ? PROPS.get(props) : void 0;
+}
+function holeLocation(accessor) {
+  if (!accessor || typeof accessor !== "object" && typeof accessor !== "function") return void 0;
+  return HOLES.get(accessor) ?? accessor[HOLE_TAG];
+}
+function installSourceMarker() {
+  if (typeof host[MARKER] !== "function") host[MARKER] = markReactiveSource;
+  if (typeof host[COMPONENT_MARKER] !== "function") host[COMPONENT_MARKER] = markComponentSource;
+  if (typeof host[HOLE_MARKER] !== "function") host[HOLE_MARKER] = markHole;
+  if (typeof host[PROPS_MARKER] !== "function") host[PROPS_MARKER] = markProps;
+}
+export {
+  componentSource,
+  holeLocation,
+  installSourceMarker,
+  markComponentSource,
+  markReactiveSource,
+  propsLocations,
+  takeReactiveSource
+};

package/dist/timeline.cjs

@@ -0,0 +1,350 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/timeline.ts
+var timeline_exports = {};
+__export(timeline_exports, {
+  TIMELINE_CSS: () => TIMELINE_CSS,
+  createTimeline: () => createTimeline
+});
+module.exports = __toCommonJS(timeline_exports);
+
+// 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}`;

package/dist/timeline.d.ts

@@ -0,0 +1,30 @@
+import { type Commit, type GraphEvent } from './history.js';
+import type { RNode } from './instrument.js';
+export interface Timeline {
+    /** Fold in what a snapshot carried. Events already seen are ignored, so polling is safe. */
+    push(events: readonly GraphEvent[]): void;
+    /** Stop taking new events, or start again. Paused, what is on screen holds still. */
+    setPaused(paused: boolean): void;
+    readonly paused: boolean;
+    /** Draw. `graph` supplies the labels, which the events only carry ids for. */
+    render(graph: Map<number, RNode>): void;
+    /** Node ids in the selected commit, for a view to highlight. Empty when none is selected. */
+    selected(): number[];
+    clear(): void;
+}
+export interface TimelineOptions {
+    /** What to say before anything has happened. */
+    empty?: string;
+    /** How many commits to keep. */
+    limit?: number;
+    /** A commit was selected, or deselected with null. */
+    onSelect?(ids: number[], commit: Commit | null): void;
+    /** A side panel can say six rows changed; it cannot show six before-and-after objects. */
+    onExpand?(commit: Commit): void;
+}
+/** The graph first, since a node can be renamed; then the name the event carried. */
+export type NameOf = (event: GraphEvent) => string;
+export declare function createTimeline(host: HTMLElement, options?: TimelineOptions): Timeline;
+/** Default styling for what createTimeline writes, in the shape DEVTOOLS_CSS is used. */
+export declare const TIMELINE_CSS = "\n.tl-head { position: relative; display: flex; gap: 4px; padding: 0 .25rem; }\n.tl-pause {\n  position: absolute; right: .4rem; top: 40%; transform: translateY(-50%);\n  flex: none; width: 26px; cursor: pointer; font: inherit; font-size: 10px;\n  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 4px;\n  background: transparent; color: var(--fx-muted, #8a90a2);\n}\n.tl-pause:hover { color: var(--fx-label, #e7e9ee); }\n.tl-pause.on { color: var(--fx-accent, #5eead4); border-color: var(--fx-accent, #5eead4); }\n.tl-filter {\n  flex: 1; min-width: 0; box-sizing: border-box; padding: 3px 6px;\n  font: inherit; font-size: 11.5px; border-radius: 4px;\n  border: 1px solid var(--fx-line, #ffffff1f);\n  background: var(--fx-input, transparent); color: var(--fx-label, #e7e9ee);\n  padding-inline-end: 2rem;\n}\n.tl-empty { color: var(--fx-muted, #8a90a2); font-size: 12px; }\n.tl-commit { padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 11.5px; }\n.tl-commit:hover { background: var(--fx-hover, #ffffff10); }\n.tl-commit.selected { background: var(--fx-selected, #ffffff1a); }\n.tl-line { display: flex; align-items: baseline; gap: 6px; }\n.tl-caret { color: var(--fx-muted, #8a90a2); font-size: 9px; flex: none; }\n.tl-time { font-family: ui-monospace, monospace; font-size: 10px; color: var(--fx-muted, #8a90a2); flex: none; }\n.tl-name { color: var(--fx-label, #e7e9ee); font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.tl-did { margin-left: auto; color: var(--fx-muted, #8a90a2); flex: none; }\n.tl-body { margin: 3px 0 2px 15px; }\n/* Wraps: an open entry exists to show the whole value. */\n.tl-change {\n  font-family: ui-monospace, monospace; font-size: 11px;\n  color: var(--fx-accent, #5eead4); overflow-wrap: anywhere; white-space: pre-wrap;\n}\n.tl-part { margin-top: 2px; color: var(--fx-label, #e7e9ee); font-size: 11px; overflow-wrap: anywhere; }\n.tl-verb { color: var(--fx-muted, #8a90a2); }\n.tl-more {\n  margin-top: 5px; padding: 2px 8px; font: inherit; font-size: 10.5px; cursor: pointer;\n  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 4px;\n  background: transparent; color: var(--fx-muted, #8a90a2);\n}\n.tl-more:hover { color: var(--fx-label, #e7e9ee); }\n\n.ch-list { margin-top: 4px; font-family: ui-monospace, monospace; font-size: 11px; }\n.ch-size { color: var(--fx-muted, #8a90a2); margin-bottom: 2px; }\n.ch-row { display: flex; gap: 6px; align-items: baseline; padding: 1px 0; }\n.ch-row.ch-stacked { align-items: flex-start; padding: 3px 0; }\n.ch-sign { flex: none; width: 9px; text-align: center; }\n.ch-added .ch-sign { color: var(--state, #34d399); }\n.ch-removed .ch-sign { color: var(--fx-write, #fb7185); }\n.ch-changed .ch-sign { color: var(--effect, #fbbf24); }\n.ch-key { flex: none; color: var(--fx-muted, #8a90a2); }\n.ch-sides { min-width: 0; flex: 1; overflow-wrap: anywhere; }\n.ch-stacked .ch-sides { display: flex; flex-direction: column; gap: 2px; }\n.ch-from { color: var(--fx-muted, #8a90a2); }\n.ch-row:not(.ch-stacked) .ch-from { text-decoration: line-through; }\n.ch-arrow { color: var(--fx-muted, #8a90a2); margin: 0 4px; }\n.ch-to { color: var(--fx-label, #e7e9ee); }\n.ch-more { color: var(--fx-muted, #8a90a2); margin-top: 2px; }\n/* In the corner: an object can be tall, and a button under it is a scroll away. */\n.ch-block { position: relative; border-radius: 4px; border: 1px solid var(--fx-line, #ffffff14); }\n.ch-block.ch-from { opacity: .72; }\n.ch-json { margin: 0; padding: 5px 7px; overflow-x: auto; white-space: pre; font: inherit; }\n.ch-copy {\n  position: absolute; top: 3px; right: 3px; padding: 1px 6px; cursor: pointer;\n  font: inherit; font-size: 9.5px; opacity: 0; transition: opacity .12s;\n  border: 1px solid var(--fx-line, #ffffff26); border-radius: 3px;\n  background: var(--fx-panel, #14161c); color: var(--fx-muted, #8a90a2);\n}\n.ch-block:hover .ch-copy, .ch-copy:focus { opacity: 1; }\n.ch-copy:hover { color: var(--fx-label, #e7e9ee); }\n";
+//# sourceMappingURL=timeline.d.ts.map

package/dist/timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../src/timeline.ts"],"names":[],"mappings":"AAOA,OAAO,EAAa,KAAK,MAAM,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAEvE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,WAAW,QAAQ;IACvB,4FAA4F;IAC5F,IAAI,CAAC,MAAM,EAAE,SAAS,UAAU,EAAE,GAAG,IAAI,CAAC;IAC1C,qFAAqF;IACrF,SAAS,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,8EAA8E;IAC9E,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC;IACxC,6FAA6F;IAC7F,QAAQ,IAAI,MAAM,EAAE,CAAC;IACrB,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IACtD,0FAA0F;IAC1F,QAAQ,CAAC,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC;AAWD,qFAAqF;AACrF,MAAM,MAAM,MAAM,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,MAAM,CAAC;AA6CnD,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,eAAoB,GAAG,QAAQ,CAwLzF;AAED,yFAAyF;AACzF,eAAO,MAAM,YAAY,o8HAwCX,CAAC"}