@singapore-editor/scope-lines 0.1.1

package/dist/stickyScroll.js

@@ -0,0 +1,302 @@
+import "./style.css";
+import { createEditorSecondaryTextView } from "@singapore-editor/core/secondary-views";
+//#region src/stickyScroll.ts
+var DEFAULT_MAX_LINE_COUNT = 5;
+var EMPTY_HEADER = {
+	rows: [],
+	key: "",
+	top: 0,
+	bottom: 0,
+	stackHeight: 0
+};
+function createStickyScrollPlugin(options = {}) {
+	const resolved = resolveStickyScrollOptions(options);
+	return {
+		name: "sticky-scroll",
+		activate(context) {
+			return context.registerViewContribution({ createContribution: (contributionContext) => createStickyScrollContribution(contributionContext, resolved) });
+		}
+	};
+}
+function createStickyScrollContribution(context, options) {
+	if (!options.enabled) return null;
+	return new StickyScrollContribution(context, options);
+}
+var StickyScrollContribution = class {
+	inputs = [
+		"content",
+		"tokens",
+		"viewport",
+		"layout"
+	];
+	context;
+	options;
+	root;
+	lineView = null;
+	appliedText = "";
+	appliedTokens = null;
+	appliedTheme = null;
+	appliedMetrics = null;
+	contentKey = "";
+	layoutKey = "";
+	constructor(context, options) {
+		this.context = context;
+		this.options = options;
+		this.root = createRoot(context);
+		this.update(context.getSnapshot(), "document");
+	}
+	update(snapshot, _kind, _change) {
+		this.renderSnapshot(snapshot);
+	}
+	dispose() {
+		this.lineView?.dispose();
+		this.lineView = null;
+		this.root.remove();
+	}
+	renderSnapshot(snapshot) {
+		const header = stickyScrollHeader(snapshot, this.options);
+		if (header.rows.length === 0) {
+			this.root.hidden = true;
+			this.layoutKey = "";
+			return;
+		}
+		const lineView = this.ensureLineView(snapshot);
+		this.syncMetrics(lineView, snapshot);
+		this.syncTheme(lineView, snapshot);
+		this.syncContent(lineView, snapshot, header);
+		this.syncLayout(lineView, snapshot, header);
+	}
+	ensureLineView(snapshot) {
+		const existing = this.lineView;
+		if (existing) return existing;
+		const created = createLineView(this.root, this.context, snapshot);
+		this.lineView = created;
+		this.appliedMetrics = snapshot.metrics;
+		return created;
+	}
+	syncMetrics(lineView, snapshot) {
+		const metrics = snapshot.metrics;
+		const applied = this.appliedMetrics;
+		if (applied?.rowHeight === metrics.rowHeight && applied.characterWidth === metrics.characterWidth) return;
+		this.appliedMetrics = metrics;
+		lineView.setTextMetrics(metrics);
+	}
+	syncTheme(lineView, snapshot) {
+		const theme = snapshot.theme ?? null;
+		if (theme === this.appliedTheme) return;
+		this.appliedTheme = theme;
+		lineView.setTheme(theme);
+	}
+	syncContent(lineView, snapshot, header) {
+		const key = `${snapshot.documentId}:${header.key}:${snapshot.textVersion}`;
+		if (key === this.contentKey && snapshot.tokens === this.appliedTokens) return;
+		this.contentKey = key;
+		this.appliedTokens = snapshot.tokens;
+		const content = stickyScrollContent(snapshot, header.rows);
+		if (content.text !== this.appliedText) {
+			this.appliedText = content.text;
+			lineView.setText(content.text);
+		}
+		lineView.setTokens(content.tokens);
+	}
+	syncLayout(lineView, snapshot, header) {
+		const key = [
+			header.top,
+			header.bottom,
+			header.stackHeight,
+			snapshot.viewport.scrollWidth,
+			snapshot.viewport.clientWidth
+		].join(":");
+		this.root.hidden = false;
+		if (key === this.layoutKey) return;
+		this.layoutKey = key;
+		this.root.style.top = `${header.top}px`;
+		this.root.style.height = `${header.bottom - header.top}px`;
+		this.root.style.setProperty("--editor-sticky-scroll-content-width", `${snapshot.viewport.scrollWidth}px`);
+		this.root.style.setProperty("--editor-sticky-scroll-viewport-width", `${snapshot.viewport.clientWidth}px`);
+		lineView.setHeight(header.stackHeight);
+	}
+};
+function resolveStickyScrollOptions(options) {
+	return {
+		enabled: options.enabled ?? true,
+		maxLineCount: normalizeMaxLineCount(options.maxLineCount)
+	};
+}
+function normalizeMaxLineCount(value) {
+	if (value === void 0) return DEFAULT_MAX_LINE_COUNT;
+	if (!Number.isFinite(value)) return DEFAULT_MAX_LINE_COUNT;
+	return Math.max(1, Math.floor(value));
+}
+function createRoot(context) {
+	const root = context.scrollElement.ownerDocument.createElement("div");
+	root.className = "editor-sticky-scroll";
+	root.setAttribute("aria-hidden", "true");
+	root.hidden = true;
+	context.contentElement.appendChild(root);
+	return root;
+}
+/**
+* The stack is a text view of its own rather than a second renderer, so its lines carry the tokens,
+* chunking and inline replacements of the rows they mirror instead of an approximation of them.
+*/
+function createLineView(root, context, snapshot) {
+	return createEditorSecondaryTextView(root, {
+		className: "editor-sticky-scroll-lines",
+		scrollMode: "static",
+		overscan: 0,
+		lineHeight: snapshot.metrics.rowHeight,
+		tabSize: snapshot.tabSize,
+		textMetrics: snapshot.metrics,
+		selectionHighlightName: `${context.highlightPrefix}-sticky-scroll-selection`
+	});
+}
+function stickyScrollHeader(snapshot, options) {
+	const geometry = stickyScrollRowGeometry(snapshot);
+	if (!geometry) return EMPTY_HEADER;
+	const rows = [];
+	let top = 0;
+	let bottom = 0;
+	for (const marker of stickyScrollCandidates(snapshot, geometry)) {
+		if (rows.at(-1) === marker.startRow) continue;
+		const headerRowTop = contentRowTop(geometry, marker.startRow);
+		const scopeBottom = contentRowBottom(geometry, marker.endRow);
+		const slotTop = rows.length * geometry.rowHeight;
+		if (slotTop <= headerRowTop - geometry.scrollTop) continue;
+		if (slotTop > scopeBottom - geometry.scrollTop) continue;
+		if (rows.length === 0) top = headerRowTop;
+		bottom = scopeBottom;
+		rows.push(marker.startRow);
+		if (rows.length === options.maxLineCount) break;
+	}
+	if (rows.length === 0) return EMPTY_HEADER;
+	return {
+		rows,
+		key: rows.join(","),
+		top,
+		bottom,
+		stackHeight: rows.length * geometry.rowHeight
+	};
+}
+/**
+* Scopes reaching into the viewport, outermost first, for the header to slot in that order.
+*
+* Fold ranges never cross, so the ones still open at a given range are exactly its ancestors. A
+* scope inside a collapsed one is dropped: the rows it heads are not on screen to be headed, even in
+* the window where the marker set and the hidden rows disagree.
+*/
+function stickyScrollCandidates(snapshot, geometry) {
+	const candidates = [];
+	const open = [];
+	for (const marker of visibleFoldMarkers(snapshot, geometry)) {
+		while (open.length > 0 && open.at(-1).endOffset <= marker.startOffset) open.pop();
+		const insideCollapsed = open.some((ancestor) => ancestor.collapsed);
+		open.push(marker);
+		if (marker.collapsed || insideCollapsed) continue;
+		candidates.push(marker);
+	}
+	return candidates;
+}
+/**
+* Inclusive at both ends, unlike a scope guide's: a scope whose last row is the first mounted one is
+* exactly the scope whose header the stack is there to hold.
+*/
+function visibleFoldMarkers(snapshot, geometry) {
+	const markers = [];
+	for (const marker of snapshot.foldMarkers) {
+		if (marker.startRow > geometry.lastRow) continue;
+		if (marker.endRow < geometry.firstRow) continue;
+		markers.push(marker);
+	}
+	return markers.toSorted(compareMarkersByContainment);
+}
+/** Outermost first, which is the order a containment stack can be built in one pass. */
+function compareMarkersByContainment(left, right) {
+	return left.startOffset - right.startOffset || right.endOffset - left.endOffset;
+}
+function stickyScrollRowGeometry(snapshot) {
+	const tops = /* @__PURE__ */ new Map();
+	const bottoms = /* @__PURE__ */ new Map();
+	let firstRow = Number.POSITIVE_INFINITY;
+	let lastRow = Number.NEGATIVE_INFINITY;
+	for (const row of snapshot.visibleRows) {
+		if (row.kind !== "text") continue;
+		const top = tops.get(row.bufferRow);
+		const bottom = bottoms.get(row.bufferRow);
+		tops.set(row.bufferRow, top === void 0 ? row.top : Math.min(top, row.top));
+		bottoms.set(row.bufferRow, bottom === void 0 ? row.top + row.height : Math.max(bottom, row.top + row.height));
+		firstRow = Math.min(firstRow, row.bufferRow);
+		lastRow = Math.max(lastRow, row.bufferRow);
+	}
+	if (!Number.isFinite(firstRow) || !Number.isFinite(lastRow)) return null;
+	return {
+		rowHeight: snapshot.metrics.rowHeight,
+		scrollTop: snapshot.viewport.scrollTop,
+		firstRow,
+		firstTop: tops.get(firstRow),
+		lastRow,
+		lastBottom: bottoms.get(lastRow),
+		tops,
+		bottoms
+	};
+}
+function contentRowTop(geometry, row) {
+	const top = geometry.tops.get(row);
+	if (top !== void 0) return top;
+	if (row < geometry.firstRow) return geometry.firstTop - (geometry.firstRow - row) * geometry.rowHeight;
+	return geometry.lastBottom + (row - geometry.lastRow - 1) * geometry.rowHeight;
+}
+function contentRowBottom(geometry, row) {
+	const bottom = geometry.bottoms.get(row);
+	if (bottom !== void 0) return bottom;
+	if (row > geometry.lastRow) return geometry.lastBottom + (row - geometry.lastRow) * geometry.rowHeight;
+	return geometry.firstTop - (geometry.firstRow - row - 1) * geometry.rowHeight;
+}
+/**
+* The stack's own text, and the document's tokens rewritten into it. Both come out of one pass over
+* the same row ranges, because a token offset that disagrees with the text by even one character
+* paints the wrong word.
+*/
+function stickyScrollContent(snapshot, rows) {
+	const textSnapshot = snapshot.textSnapshot;
+	const lines = [];
+	const tokens = [];
+	let base = 0;
+	for (const row of rows) {
+		const range = rowTextRange(snapshot, textSnapshot, row);
+		lines.push(range ? textSnapshot.readRange(range.start, range.end) : "");
+		if (range) appendRowTokens(tokens, snapshot.tokens, range, base);
+		base += (range ? range.end - range.start : 0) + 1;
+	}
+	return {
+		text: lines.join("\n"),
+		tokens
+	};
+}
+function appendRowTokens(tokens, documentTokens, range, base) {
+	const last = documentTokens.firstStartingAtOrAfter(range.end);
+	const first = documentTokens.firstEndingAfter(range.start, last);
+	documentTokens.forEachInRange(first, last, (start, end, styleId) => {
+		tokens.push({
+			start: base + Math.max(start, range.start) - range.start,
+			end: base + Math.min(end, range.end) - range.start,
+			style: documentTokens.styles[styleId]
+		});
+	});
+}
+function rowTextRange(snapshot, textSnapshot, row) {
+	const start = lineStartOffset(snapshot, row);
+	if (start === void 0) return null;
+	const nextStart = lineStartOffset(snapshot, row + 1) ?? textSnapshot.length + 1;
+	return {
+		start,
+		end: Math.max(start, Math.min(textSnapshot.length, nextStart - 1))
+	};
+}
+function lineStartOffset(snapshot, row) {
+	return snapshot.lineStartsView.at(row);
+}
+//#endregion
+export { createStickyScrollPlugin };
+
+//# sourceMappingURL=stickyScroll.js.map

package/dist/stickyScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stickyScroll.js","names":[],"sources":["../src/stickyScroll.ts"],"sourcesContent":["import type { TextReadSnapshot } from '@singapore-editor/core/document'\nimport type { EditorTheme, VirtualizedFoldMarker } from '@singapore-editor/core/rendering'\nimport type { EditorToken, EditorTokenStore } from '@singapore-editor/core/syntax'\nimport type {\n  EditorContributionChange,\n  EditorPlugin,\n  EditorViewContribution,\n  EditorViewContributionContext,\n  EditorViewContributionUpdateKind,\n  EditorViewSnapshot,\n} from '@singapore-editor/core/extensions'\nimport {\n  createEditorSecondaryTextView,\n  type EditorSecondaryTextView,\n} from '@singapore-editor/core/secondary-views'\nimport './style.css'\n\nexport type StickyScrollPluginOptions = {\n  readonly enabled?: boolean\n  readonly maxLineCount?: number\n}\n\ntype ResolvedStickyScrollOptions = {\n  readonly enabled: boolean\n  readonly maxLineCount: number\n}\n\ntype StickyScrollHeader = {\n  /** Header rows of the enclosing scopes, outermost first. */\n  readonly rows: readonly number[]\n  readonly key: string\n  /** The headed scope in content coordinates: the top of its header row, and where it ends. */\n  readonly top: number\n  readonly bottom: number\n  readonly stackHeight: number\n}\n\n/**\n * Where rows sit, in content coordinates, for as far as the mounted band reaches. Rows past it are\n * extrapolated from the row height, which is wrong wherever something out there is collapsed or\n * taller than a row — but every row that decides the stack is within a stack's height of the\n * viewport top, and those are mounted.\n */\ntype StickyScrollRowGeometry = {\n  readonly rowHeight: number\n  readonly scrollTop: number\n  readonly firstRow: number\n  readonly firstTop: number\n  readonly lastRow: number\n  readonly lastBottom: number\n  readonly tops: ReadonlyMap<number, number>\n  readonly bottoms: ReadonlyMap<number, number>\n}\n\ntype StickyScrollContent = {\n  readonly text: string\n  readonly tokens: readonly EditorToken[]\n}\n\ntype StickyScrollRowRange = {\n  readonly start: number\n  readonly end: number\n}\n\nconst DEFAULT_MAX_LINE_COUNT = 5\n\nconst EMPTY_HEADER: StickyScrollHeader = {\n  rows: [],\n  key: '',\n  top: 0,\n  bottom: 0,\n  stackHeight: 0,\n}\n\nexport function createStickyScrollPlugin(options: StickyScrollPluginOptions = {}): EditorPlugin {\n  const resolved = resolveStickyScrollOptions(options)\n\n  return {\n    name: 'sticky-scroll',\n    activate(context) {\n      return context.registerViewContribution({\n        createContribution: (contributionContext) =>\n          createStickyScrollContribution(contributionContext, resolved),\n      })\n    },\n  }\n}\n\nfunction createStickyScrollContribution(\n  context: EditorViewContributionContext,\n  options: ResolvedStickyScrollOptions,\n): EditorViewContribution | null {\n  if (!options.enabled) return null\n  return new StickyScrollContribution(context, options)\n}\n\nclass StickyScrollContribution implements EditorViewContribution {\n  // Which scopes the viewport hides is the whole input; the caret changes none of it.\n  readonly inputs = ['content', 'tokens', 'viewport', 'layout'] as const\n  private readonly context: EditorViewContributionContext\n  private readonly options: ResolvedStickyScrollOptions\n  private readonly root: HTMLDivElement\n  private lineView: EditorSecondaryTextView | null = null\n  private appliedText = ''\n  private appliedTokens: EditorTokenStore | null = null\n  private appliedTheme: EditorTheme | null = null\n  private appliedMetrics: EditorViewSnapshot['metrics'] | null = null\n  private contentKey = ''\n  private layoutKey = ''\n\n  public constructor(context: EditorViewContributionContext, options: ResolvedStickyScrollOptions) {\n    this.context = context\n    this.options = options\n    this.root = createRoot(context)\n    this.update(context.getSnapshot(), 'document')\n  }\n\n  public update(\n    snapshot: EditorViewSnapshot,\n    _kind: EditorViewContributionUpdateKind,\n    _change?: EditorContributionChange | null,\n  ): void {\n    this.renderSnapshot(snapshot)\n  }\n\n  public dispose(): void {\n    this.lineView?.dispose()\n    this.lineView = null\n    this.root.remove()\n  }\n\n  private renderSnapshot(snapshot: EditorViewSnapshot): void {\n    const header = stickyScrollHeader(snapshot, this.options)\n    if (header.rows.length === 0) {\n      this.root.hidden = true\n      this.layoutKey = ''\n      return\n    }\n\n    const lineView = this.ensureLineView(snapshot)\n    this.syncMetrics(lineView, snapshot)\n    this.syncTheme(lineView, snapshot)\n    this.syncContent(lineView, snapshot, header)\n    this.syncLayout(lineView, snapshot, header)\n  }\n\n  private ensureLineView(snapshot: EditorViewSnapshot): EditorSecondaryTextView {\n    const existing = this.lineView\n    if (existing) return existing\n\n    const created = createLineView(this.root, this.context, snapshot)\n    this.lineView = created\n    this.appliedMetrics = snapshot.metrics\n    return created\n  }\n\n  // Character width too: a font change moves every column the mirrored rows draw at.\n  private syncMetrics(lineView: EditorSecondaryTextView, snapshot: EditorViewSnapshot): void {\n    const metrics = snapshot.metrics\n    const applied = this.appliedMetrics\n    if (\n      applied?.rowHeight === metrics.rowHeight &&\n      applied.characterWidth === metrics.characterWidth\n    )\n      return\n\n    this.appliedMetrics = metrics\n    lineView.setTextMetrics(metrics)\n  }\n\n  private syncTheme(lineView: EditorSecondaryTextView, snapshot: EditorViewSnapshot): void {\n    const theme = snapshot.theme ?? null\n    if (theme === this.appliedTheme) return\n\n    this.appliedTheme = theme\n    lineView.setTheme(theme)\n  }\n\n  private syncContent(\n    lineView: EditorSecondaryTextView,\n    snapshot: EditorViewSnapshot,\n    header: StickyScrollHeader,\n  ): void {\n    // Keyed by document as well as by version, because opening another document starts its versions\n    // over and the same rows there hold different text.\n    const key = `${snapshot.documentId}:${header.key}:${snapshot.textVersion}`\n    if (key === this.contentKey && snapshot.tokens === this.appliedTokens) return\n\n    this.contentKey = key\n    this.appliedTokens = snapshot.tokens\n    const content = stickyScrollContent(snapshot, header.rows)\n    if (content.text !== this.appliedText) {\n      this.appliedText = content.text\n      lineView.setText(content.text)\n    }\n    lineView.setTokens(content.tokens)\n  }\n\n  private syncLayout(\n    lineView: EditorSecondaryTextView,\n    snapshot: EditorViewSnapshot,\n    header: StickyScrollHeader,\n  ): void {\n    const key = [\n      header.top,\n      header.bottom,\n      header.stackHeight,\n      snapshot.viewport.scrollWidth,\n      snapshot.viewport.clientWidth,\n    ].join(':')\n    this.root.hidden = false\n    if (key === this.layoutKey) return\n\n    this.layoutKey = key\n    this.root.style.top = `${header.top}px`\n    this.root.style.height = `${header.bottom - header.top}px`\n    this.root.style.setProperty(\n      '--editor-sticky-scroll-content-width',\n      `${snapshot.viewport.scrollWidth}px`,\n    )\n    this.root.style.setProperty(\n      '--editor-sticky-scroll-viewport-width',\n      `${snapshot.viewport.clientWidth}px`,\n    )\n    lineView.setHeight(header.stackHeight)\n  }\n}\n\nfunction resolveStickyScrollOptions(\n  options: StickyScrollPluginOptions,\n): ResolvedStickyScrollOptions {\n  return {\n    enabled: options.enabled ?? true,\n    maxLineCount: normalizeMaxLineCount(options.maxLineCount),\n  }\n}\n\nfunction normalizeMaxLineCount(value: number | undefined): number {\n  if (value === undefined) return DEFAULT_MAX_LINE_COUNT\n  if (!Number.isFinite(value)) return DEFAULT_MAX_LINE_COUNT\n  return Math.max(1, Math.floor(value))\n}\n\nfunction createRoot(context: EditorViewContributionContext): HTMLDivElement {\n  const root = context.scrollElement.ownerDocument.createElement('div')\n  root.className = 'editor-sticky-scroll'\n  root.setAttribute('aria-hidden', 'true')\n  root.hidden = true\n  context.contentElement.appendChild(root)\n  return root\n}\n\n/**\n * The stack is a text view of its own rather than a second renderer, so its lines carry the tokens,\n * chunking and inline replacements of the rows they mirror instead of an approximation of them.\n */\nfunction createLineView(\n  root: HTMLDivElement,\n  context: EditorViewContributionContext,\n  snapshot: EditorViewSnapshot,\n): EditorSecondaryTextView {\n  return createEditorSecondaryTextView(root, {\n    className: 'editor-sticky-scroll-lines',\n    // Static: every line of the stack is on screen at once, so there is nothing to virtualize away.\n    scrollMode: 'static',\n    overscan: 0,\n    lineHeight: snapshot.metrics.rowHeight,\n    tabSize: snapshot.tabSize,\n    // Measuring the font again could land a fraction of a pixel away from the rows being mirrored.\n    textMetrics: snapshot.metrics,\n    selectionHighlightName: `${context.highlightPrefix}-sticky-scroll-selection`,\n  })\n}\n\nfunction stickyScrollHeader(\n  snapshot: EditorViewSnapshot,\n  options: ResolvedStickyScrollOptions,\n): StickyScrollHeader {\n  const geometry = stickyScrollRowGeometry(snapshot)\n  if (!geometry) return EMPTY_HEADER\n\n  const rows: number[] = []\n  let top = 0\n  let bottom = 0\n  for (const marker of stickyScrollCandidates(snapshot, geometry)) {\n    // Scopes that open on one row — an arrow function and the object it returns — head the same row,\n    // so the first of them to be accepted has already said everything the stack can say about it.\n    if (rows.at(-1) === marker.startRow) continue\n\n    const headerRowTop = contentRowTop(geometry, marker.startRow)\n    const scopeBottom = contentRowBottom(geometry, marker.endRow)\n    // The slot is the one this scope would actually be given, which is the next free row of the\n    // stack: a slot counted from containment depth instead skips ahead over every enclosing scope\n    // the filters below rejected, and a slot the stack never reaches admits its scope too early.\n    const slotTop = rows.length * geometry.rowHeight\n    // A slot above the row it would stand in for is a slot for a row still on screen, which needs no\n    // stand-in; a slot below the end of its scope belongs to a scope already behind us.\n    if (slotTop <= headerRowTop - geometry.scrollTop) continue\n    if (slotTop > scopeBottom - geometry.scrollTop) continue\n\n    if (rows.length === 0) top = headerRowTop\n    // Each scope accepted after the first is nested in the one before it, so the last one accepted is\n    // the first to end — and the stack travels with whichever ends first.\n    bottom = scopeBottom\n    rows.push(marker.startRow)\n    if (rows.length === options.maxLineCount) break\n  }\n\n  if (rows.length === 0) return EMPTY_HEADER\n\n  return { rows, key: rows.join(','), top, bottom, stackHeight: rows.length * geometry.rowHeight }\n}\n\n/**\n * Scopes reaching into the viewport, outermost first, for the header to slot in that order.\n *\n * Fold ranges never cross, so the ones still open at a given range are exactly its ancestors. A\n * scope inside a collapsed one is dropped: the rows it heads are not on screen to be headed, even in\n * the window where the marker set and the hidden rows disagree.\n */\nfunction stickyScrollCandidates(\n  snapshot: EditorViewSnapshot,\n  geometry: StickyScrollRowGeometry,\n): readonly VirtualizedFoldMarker[] {\n  const candidates: VirtualizedFoldMarker[] = []\n  const open: VirtualizedFoldMarker[] = []\n\n  for (const marker of visibleFoldMarkers(snapshot, geometry)) {\n    while (open.length > 0 && open.at(-1)!.endOffset <= marker.startOffset) open.pop()\n\n    const insideCollapsed = open.some((ancestor) => ancestor.collapsed)\n    open.push(marker)\n    if (marker.collapsed || insideCollapsed) continue\n\n    candidates.push(marker)\n  }\n\n  return candidates\n}\n\n/**\n * Inclusive at both ends, unlike a scope guide's: a scope whose last row is the first mounted one is\n * exactly the scope whose header the stack is there to hold.\n */\nfunction visibleFoldMarkers(\n  snapshot: EditorViewSnapshot,\n  geometry: StickyScrollRowGeometry,\n): readonly VirtualizedFoldMarker[] {\n  const markers: VirtualizedFoldMarker[] = []\n  for (const marker of snapshot.foldMarkers) {\n    if (marker.startRow > geometry.lastRow) continue\n    if (marker.endRow < geometry.firstRow) continue\n\n    markers.push(marker)\n  }\n\n  return markers.toSorted(compareMarkersByContainment)\n}\n\n/** Outermost first, which is the order a containment stack can be built in one pass. */\nfunction compareMarkersByContainment(\n  left: VirtualizedFoldMarker,\n  right: VirtualizedFoldMarker,\n): number {\n  return left.startOffset - right.startOffset || right.endOffset - left.endOffset\n}\n\nfunction stickyScrollRowGeometry(snapshot: EditorViewSnapshot): StickyScrollRowGeometry | null {\n  const tops = new Map<number, number>()\n  const bottoms = new Map<number, number>()\n  let firstRow = Number.POSITIVE_INFINITY\n  let lastRow = Number.NEGATIVE_INFINITY\n\n  // A buffer row can hold several display rows — wrapped, or with rows injected beneath it — so its\n  // box is the union of them, which is what a scope starting or ending on it is measured against.\n  for (const row of snapshot.visibleRows) {\n    if (row.kind !== 'text') continue\n\n    const top = tops.get(row.bufferRow)\n    const bottom = bottoms.get(row.bufferRow)\n    tops.set(row.bufferRow, top === undefined ? row.top : Math.min(top, row.top))\n    bottoms.set(\n      row.bufferRow,\n      bottom === undefined ? row.top + row.height : Math.max(bottom, row.top + row.height),\n    )\n    firstRow = Math.min(firstRow, row.bufferRow)\n    lastRow = Math.max(lastRow, row.bufferRow)\n  }\n\n  if (!Number.isFinite(firstRow) || !Number.isFinite(lastRow)) return null\n\n  return {\n    rowHeight: snapshot.metrics.rowHeight,\n    scrollTop: snapshot.viewport.scrollTop,\n    firstRow,\n    firstTop: tops.get(firstRow)!,\n    lastRow,\n    lastBottom: bottoms.get(lastRow)!,\n    tops,\n    bottoms,\n  }\n}\n\nfunction contentRowTop(geometry: StickyScrollRowGeometry, row: number): number {\n  const top = geometry.tops.get(row)\n  if (top !== undefined) return top\n  if (row < geometry.firstRow) {\n    return geometry.firstTop - (geometry.firstRow - row) * geometry.rowHeight\n  }\n\n  return geometry.lastBottom + (row - geometry.lastRow - 1) * geometry.rowHeight\n}\n\nfunction contentRowBottom(geometry: StickyScrollRowGeometry, row: number): number {\n  const bottom = geometry.bottoms.get(row)\n  if (bottom !== undefined) return bottom\n  if (row > geometry.lastRow) {\n    return geometry.lastBottom + (row - geometry.lastRow) * geometry.rowHeight\n  }\n\n  return geometry.firstTop - (geometry.firstRow - row - 1) * geometry.rowHeight\n}\n\n/**\n * The stack's own text, and the document's tokens rewritten into it. Both come out of one pass over\n * the same row ranges, because a token offset that disagrees with the text by even one character\n * paints the wrong word.\n */\nfunction stickyScrollContent(\n  snapshot: EditorViewSnapshot,\n  rows: readonly number[],\n): StickyScrollContent {\n  const textSnapshot = snapshot.textSnapshot\n  const lines: string[] = []\n  const tokens: EditorToken[] = []\n  let base = 0\n\n  for (const row of rows) {\n    const range = rowTextRange(snapshot, textSnapshot, row)\n    lines.push(range ? textSnapshot.readRange(range.start, range.end) : '')\n    if (range) appendRowTokens(tokens, snapshot.tokens, range, base)\n    base += (range ? range.end - range.start : 0) + 1\n  }\n\n  return { text: lines.join('\\n'), tokens }\n}\n\nfunction appendRowTokens(\n  tokens: EditorToken[],\n  documentTokens: EditorTokenStore,\n  range: StickyScrollRowRange,\n  base: number,\n): void {\n  const last = documentTokens.firstStartingAtOrAfter(range.end)\n  const first = documentTokens.firstEndingAfter(range.start, last)\n  documentTokens.forEachInRange(first, last, (start, end, styleId) => {\n    tokens.push({\n      start: base + Math.max(start, range.start) - range.start,\n      end: base + Math.min(end, range.end) - range.start,\n      style: documentTokens.styles[styleId]!,\n    })\n  })\n}\n\nfunction rowTextRange(\n  snapshot: EditorViewSnapshot,\n  textSnapshot: TextReadSnapshot,\n  row: number,\n): StickyScrollRowRange | null {\n  const start = lineStartOffset(snapshot, row)\n  if (start === undefined) return null\n\n  const nextStart = lineStartOffset(snapshot, row + 1) ?? textSnapshot.length + 1\n  return { start, end: Math.max(start, Math.min(textSnapshot.length, nextStart - 1)) }\n}\n\nfunction lineStartOffset(snapshot: EditorViewSnapshot, row: number): number | undefined {\n  return snapshot.lineStartsView.at(row)\n}\n"],"mappings":"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"}

package/dist/style.css

@@ -0,0 +1,153 @@
+.editor-scope-lines {
+  --editor-scope-line-color: rgba(161, 161, 170, 0.26);
+  --editor-scope-line-active-color: rgba(212, 212, 216, 0.52);
+  --editor-scope-line-color-0: color-mix(in srgb, var(--editor-syntax-type) 34%, transparent);
+  --editor-scope-line-color-1: color-mix(in srgb, var(--editor-syntax-keyword) 30%, transparent);
+  --editor-scope-line-color-2: color-mix(in srgb, var(--editor-syntax-string) 28%, transparent);
+  --editor-scope-line-color-3: color-mix(in srgb, var(--editor-syntax-number) 32%, transparent);
+  --editor-scope-line-color-4: color-mix(in srgb, var(--editor-syntax-function) 30%, transparent);
+  --editor-scope-line-color-5: color-mix(
+    in srgb,
+    var(--editor-syntax-variable-builtin) 30%,
+    transparent
+  );
+  --editor-scope-line-active-color-0: color-mix(
+    in srgb,
+    var(--editor-syntax-type) 58%,
+    transparent
+  );
+  --editor-scope-line-active-color-1: color-mix(
+    in srgb,
+    var(--editor-syntax-keyword) 54%,
+    transparent
+  );
+  --editor-scope-line-active-color-2: color-mix(
+    in srgb,
+    var(--editor-syntax-string) 50%,
+    transparent
+  );
+  --editor-scope-line-active-color-3: color-mix(
+    in srgb,
+    var(--editor-syntax-number) 56%,
+    transparent
+  );
+  --editor-scope-line-active-color-4: color-mix(
+    in srgb,
+    var(--editor-syntax-function) 54%,
+    transparent
+  );
+  --editor-scope-line-active-color-5: color-mix(
+    in srgb,
+    var(--editor-syntax-variable-builtin) 54%,
+    transparent
+  );
+  --editor-scope-line-width: 1px;
+
+  height: 0;
+  left: var(--editor-gutter-width, 0px);
+  min-width: max(100%, var(--editor-scope-lines-content-width, 0px));
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  /* Own compositor layer: WebKit re-resolves all CSS Highlight ranges when
+     children of an in-flow layer churn; see .editor-virtualized-row. */
+  will-change: transform;
+  z-index: 1;
+}
+
+.editor-scope-line {
+  background: var(--editor-scope-line-color);
+  position: absolute;
+  width: var(--editor-scope-line-width);
+}
+
+.editor-virtualized[data-editor-presentation='provisional'] .editor-scope-lines {
+  visibility: hidden;
+}
+
+.editor-scope-line[data-editor-scope-line-level='0'] {
+  background: var(--editor-scope-line-color-0);
+}
+
+.editor-scope-line[data-editor-scope-line-level='1'] {
+  background: var(--editor-scope-line-color-1);
+}
+
+.editor-scope-line[data-editor-scope-line-level='2'] {
+  background: var(--editor-scope-line-color-2);
+}
+
+.editor-scope-line[data-editor-scope-line-level='3'] {
+  background: var(--editor-scope-line-color-3);
+}
+
+.editor-scope-line[data-editor-scope-line-level='4'] {
+  background: var(--editor-scope-line-color-4);
+}
+
+.editor-scope-line[data-editor-scope-line-level='5'] {
+  background: var(--editor-scope-line-color-5);
+}
+
+.editor-scope-line-active {
+  background: var(--editor-scope-line-active-color);
+}
+
+.editor-scope-line-active[data-editor-scope-line-level='0'] {
+  background: var(--editor-scope-line-active-color-0);
+}
+
+.editor-scope-line-active[data-editor-scope-line-level='1'] {
+  background: var(--editor-scope-line-active-color-1);
+}
+
+.editor-scope-line-active[data-editor-scope-line-level='2'] {
+  background: var(--editor-scope-line-active-color-2);
+}
+
+.editor-scope-line-active[data-editor-scope-line-level='3'] {
+  background: var(--editor-scope-line-active-color-3);
+}
+
+.editor-scope-line-active[data-editor-scope-line-level='4'] {
+  background: var(--editor-scope-line-active-color-4);
+}
+
+.editor-scope-line-active[data-editor-scope-line-level='5'] {
+  background: var(--editor-scope-line-active-color-5);
+}
+
+/* The layer is a box over the scope the stack heads, in content coordinates, and is JS-positioned
+   on the rows of that scope. It exists to be the stack's containing block: a sticky box is held
+   inside the one it belongs to, so the stack is pinned to the top of the viewport while this box is
+   on screen and is slid up and out of it, pixel by pixel, as the box's end passes — which is the
+   push-out, computed by the browser on every frame instead of on every notification. */
+.editor-sticky-scroll {
+  /* Resolve the parent gutter here before the secondary text view shadows it. */
+  --editor-sticky-scroll-inset: var(--editor-gutter-width, 0px);
+
+  left: 0;
+  min-width: max(100%, var(--editor-sticky-scroll-content-width, 0px));
+  pointer-events: none;
+  position: absolute;
+  z-index: var(--editor-z-overlay-surface);
+}
+
+/* Compound so that it outranks the text view's own rules whichever order the two stylesheets happen
+   to load in, rather than only when this one loads second. */
+.editor-virtualized.editor-sticky-scroll-lines {
+  --editor-sticky-scroll-shadow: rgba(0, 0, 0, 0.42);
+
+  /* The stack stays clear of the gutter while its parent handles minimap clipping. */
+  box-shadow: 0 6px 6px -6px var(--editor-sticky-scroll-shadow);
+  left: var(--editor-sticky-scroll-inset, 0px);
+  /* Nothing about the stack is scrollable: its height is exactly the lines it holds, and a scrollbar
+     of its own would move it out of step with the rows it mirrors. */
+  overflow: hidden;
+  pointer-events: none;
+  position: sticky;
+  top: 0;
+  width: calc(
+    var(--editor-sticky-scroll-viewport-width, 0px) - var(--editor-sticky-scroll-inset, 0px)
+  );
+}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@singapore-editor/scope-lines",
+  "version": "0.1.1",
+  "files": [
+    "README.md",
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "./src/style.css",
+    "./dist/style.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "bun ../../scripts/build-package.ts",
+    "test": "vitest run",
+    "typecheck": "tsgo --noEmit",
+    "lint": "oxlint .",
+    "format": "oxfmt --write .",
+    "format:check": "oxfmt --check ."
+  },
+  "dependencies": {
+    "@singapore-editor/core": "0.1.2"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.63.0",
+    "@typescript/native-preview": "7.0.0-dev.20260707.2",
+    "@vitest/browser-playwright": "^5.0.2",
+    "happy-dom": "^20.14.5",
+    "oxfmt": "0.70.0",
+    "oxlint": "1.85.0",
+    "typescript": "~6.0.3",
+    "vitest": "^5.0.2"
+  }
+}