From 8a176bb8f41bd70e2d0039eee941ed0401be446f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 30 Aug 2026 18:44:56 +0000
Subject: [PATCH 1/6] perf: virtualize CSS syntax highlighting for large
 stylesheets

For CSS files above ~250KB, only register Custom Highlight API ranges
for tokens/locations within the visible scroll window (plus overscan),
instead of the whole document, so highlight range count and AST-walk
cost stay bounded regardless of file size instead of scaling with it.

The visible window is tracked by a new standalone `track_viewport_window`
Svelte action that measures size via CSS container query units (falling
back to the viewport when no ancestor opts in via `container-type`) and
scroll position via a generic nearest-scrollable-ancestor walk (falling
back to document scroll). It reports changes as a `viewportwindowchange`
CustomEvent on the shared `<code>` node, so it composes with the existing
`highlight_css` action without either one referencing the other directly.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01E7X88yKZHKpehyuogXpFDT
---
 src/lib/components/HighlightCssCode.svelte |  43 +++-
 src/lib/components/highlight-viewport.ts   | 230 +++++++++++++++++++++
 src/lib/components/use-css-highlight.ts    |  60 +++++-
 3 files changed, 328 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/components/highlight-viewport.ts

diff --git a/src/lib/components/HighlightCssCode.svelte b/src/lib/components/HighlightCssCode.svelte
index 5e0c56e..3d32610 100644
--- a/src/lib/components/HighlightCssCode.svelte
+++ b/src/lib/components/HighlightCssCode.svelte
@@ -3,6 +3,16 @@
 	import { browser } from '$app/env'
 	import type { CssLocation } from '#lib/css-location.js'
 	import { highlight_css } from './use-css-highlight'
+	import {
+		track_viewport_window,
+		build_line_offsets,
+		line_range_to_char_range,
+		FULL_LINE_RANGE,
+		VIRTUALIZE_THRESHOLD_CHARS,
+		type LineRange,
+		type CharRange,
+		type ViewportWindowChangeEvent
+	} from './highlight-viewport'
 
 	type Props = {
 		css?: string
@@ -34,15 +44,36 @@
 	let own_lines_ranges = new Set<StaticRange>()
 	let own_selected_ranges = new Set<StaticRange>()
 
+	// Reported by the track_viewport_window action below - a separate `use:` directive on the
+	// same element, decoupled from this component's own highlighting via a DOM CustomEvent
+	// rather than any direct reference between the two.
+	let visible_range = $state<LineRange>(FULL_LINE_RANGE)
+	let virtualize = $derived(css.length > VIRTUALIZE_THRESHOLD_CHARS)
+	let visible_char_range: CharRange | undefined = $derived.by(() => {
+		if (!virtualize) return undefined
+		return line_range_to_char_range(
+			build_line_offsets(css),
+			visible_range.start_line,
+			visible_range.end_line,
+			css.length
+		)
+	})
+
+	function on_viewport_window_change(event: Event) {
+		visible_range = (event as ViewportWindowChangeEvent).detail
+	}
+
 	onMount(function () {
 		supports_highlights = browser && 'highlights' in window.CSS
 		if (supports_highlights) {
 			lines = window.CSS.highlights.get(lines_highlight_name) || new Highlight()
 			selected_line = window.CSS.highlights.get(selected_highlight_name) || new Highlight()
 		}
+		code_node?.addEventListener('viewportwindowchange', on_viewport_window_change)
 	})
 
 	onDestroy(function () {
+		code_node?.removeEventListener('viewportwindowchange', on_viewport_window_change)
 		if (supports_highlights) {
 			for (const range of own_lines_ranges) {
 				lines?.delete(range)
@@ -100,7 +131,11 @@
 					}
 				}
 
+				const window_range = visible_char_range
 				for (const { start, end } of punched) {
+					if (window_range && (start >= window_range.end || end <= window_range.start)) {
+						continue
+					}
 					let range = new StaticRange({
 						startContainer: node,
 						startOffset: start,
@@ -141,7 +176,13 @@
 	})
 </script>
 
-<code class="language-css" bind:this={code_node} use:highlight_css={{ css }} data-testid="pre-css">{css}</code>
+<code
+	class="language-css"
+	bind:this={code_node}
+	use:track_viewport_window={{ enabled: virtualize }}
+	use:highlight_css={{ css }}
+	data-testid="pre-css">{css}</code
+>
 
 <style>
 	.language-css {
diff --git a/src/lib/components/highlight-viewport.ts b/src/lib/components/highlight-viewport.ts
new file mode 100644
index 0000000..e84e06c
--- /dev/null
+++ b/src/lib/components/highlight-viewport.ts
@@ -0,0 +1,230 @@
+// Below this size, virtualization overhead (probes, listeners, filtering) isn't worth it -
+// consumers should keep today's "highlight everything" behavior.
+export const VIRTUALIZE_THRESHOLD_CHARS = 250_000
+
+// Layer 1: pure geometry helpers, no knowledge of highlighting or of any
+// particular consumer.
+
+export function build_line_offsets(css: string): Uint32Array {
+	const offsets: number[] = [0]
+	let index = 0
+	while ((index = css.indexOf('\n', index)) !== -1) {
+		index++
+		offsets.push(index)
+	}
+	return Uint32Array.from(offsets)
+}
+
+export function get_line_height(node: Element): number {
+	const style = getComputedStyle(node)
+	const line_height = parseFloat(style.lineHeight)
+	if (Number.isFinite(line_height) && line_height > 0) {
+		return line_height
+	}
+	// line-height: normal has no computed px value; approximate it the way browsers do.
+	const font_size = parseFloat(style.fontSize)
+	return Number.isFinite(font_size) && font_size > 0 ? font_size * 1.2 : 16
+}
+
+// Reads the visible block extent via CSS container query units instead of walking up
+// to find a specific "scroll container" element. With no ancestor `container-type`,
+// cqb resolves against the initial containing block (i.e. the viewport), so this works
+// out of the box; a component can later scope it tighter by adding `container-type: size`
+// (or `block-size`) to an ancestor, with no change here.
+export function measure_visible_block_size(node: Element): number {
+	const parent = node.parentElement ?? document.body
+	const probe = document.createElement('div')
+	probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;inline-size:0;block-size:100cqb;'
+	parent.append(probe)
+	const height = probe.getBoundingClientRect().height
+	probe.remove()
+	return height || window.innerHeight
+}
+
+export type ScrollPositionSource = {
+	get_offset(): number
+	subscribe(fn: () => void): () => void
+}
+
+function is_scroll_container(el: Element): boolean {
+	const overflow_y = getComputedStyle(el).overflowY
+	return (overflow_y === 'auto' || overflow_y === 'scroll') && el.scrollHeight > el.clientHeight
+}
+
+// Nearest-scrollable-ancestor walk, generic and structural (not tied to any class name
+// convention). Falls back to the document scroll position, mirroring the viewport
+// fallback used for block-size measurement above.
+export function find_scroll_position_source(node: Element): ScrollPositionSource {
+	let el = node.parentElement
+	while (el) {
+		if (is_scroll_container(el)) {
+			const target = el
+			return {
+				get_offset: () => target.scrollTop,
+				subscribe(fn) {
+					target.addEventListener('scroll', fn, { passive: true })
+					return () => target.removeEventListener('scroll', fn)
+				}
+			}
+		}
+		el = el.parentElement
+	}
+	return {
+		get_offset: () => document.scrollingElement?.scrollTop ?? window.scrollY,
+		subscribe(fn) {
+			window.addEventListener('scroll', fn, { passive: true })
+			return () => window.removeEventListener('scroll', fn)
+		}
+	}
+}
+
+export type LineRange = { start_line: number; end_line: number }
+
+export function compute_visible_line_range({
+	line_height,
+	block_size,
+	scroll_offset,
+	overscan_lines
+}: {
+	line_height: number
+	block_size: number
+	scroll_offset: number
+	overscan_lines: number
+}): LineRange {
+	if (line_height <= 0) {
+		return { start_line: 0, end_line: Infinity }
+	}
+	const first_visible_line = Math.floor(scroll_offset / line_height)
+	const visible_lines = Math.ceil(block_size / line_height)
+	return {
+		start_line: Math.max(0, first_visible_line - overscan_lines),
+		end_line: first_visible_line + visible_lines + overscan_lines
+	}
+}
+
+export type CharRange = { start: number; end: number }
+
+// The only place line indices meet actual text - Layer 2 (the action below) never
+// sees `css`, only line numbers.
+export function line_range_to_char_range(
+	line_offsets: Uint32Array,
+	start_line: number,
+	end_line: number,
+	text_length: number
+): CharRange {
+	const clamped_start = Math.min(Math.max(start_line, 0), line_offsets.length - 1)
+	const start = line_offsets[clamped_start] ?? 0
+	const end = end_line + 1 < line_offsets.length ? line_offsets[end_line + 1] : text_length
+	return { start, end }
+}
+
+// Layer 2: a standalone Svelte action that tracks the visible line range and reports it
+// via a DOM CustomEvent, so any number of other `use:` actions or component effects on
+// the same node can subscribe without any direct reference to this module or to each
+// other - composability through the node, not through shared imports.
+
+export const FULL_LINE_RANGE: LineRange = { start_line: 0, end_line: Infinity }
+
+export type ViewportWindowChangeEvent = CustomEvent<LineRange>
+
+export type TrackViewportWindowParams = {
+	enabled?: boolean
+	overscan_lines?: number
+}
+
+export function track_viewport_window(node: Element, params: TrackViewportWindowParams = {}) {
+	let enabled = params.enabled ?? true
+	let overscan_lines = params.overscan_lines ?? 50
+
+	let unsubscribe: (() => void) | undefined
+	let resize_observer: ResizeObserver | undefined
+	let window_resize_handler: (() => void) | undefined
+	let raf_id: number | undefined
+	let last_range: LineRange | undefined
+
+	function dispatch(range: LineRange) {
+		last_range = range
+		node.dispatchEvent(new CustomEvent('viewportwindowchange', { detail: range }))
+	}
+
+	function recompute(source: ScrollPositionSource) {
+		const range = compute_visible_line_range({
+			line_height: get_line_height(node),
+			block_size: measure_visible_block_size(node),
+			scroll_offset: source.get_offset(),
+			overscan_lines
+		})
+
+		// Hysteresis: skip the (relatively costly, since it re-measures geometry and
+		// triggers callers to rebuild highlight ranges) recompute unless the window
+		// actually moved meaningfully, so we don't do work on every scroll pixel.
+		if (last_range) {
+			const hysteresis = Math.max(1, Math.floor(overscan_lines / 2))
+			const moved =
+				Math.abs(range.start_line - last_range.start_line) >= hysteresis ||
+				Math.abs(range.end_line - last_range.end_line) >= hysteresis
+			if (!moved) return
+		}
+
+		dispatch(range)
+	}
+
+	function schedule_recompute(source: ScrollPositionSource) {
+		if (raf_id !== undefined) cancelAnimationFrame(raf_id)
+		raf_id = requestAnimationFrame(() => {
+			raf_id = undefined
+			recompute(source)
+		})
+	}
+
+	function setup() {
+		// Defer the first dispatch to a microtask: `use:` directives on the same element run
+		// synchronously in template order, so dispatching immediately here could fire before a
+		// sibling `use:` action (e.g. the highlight action) has attached its listener. By the
+		// next microtask every action on this node has run its synchronous setup, regardless
+		// of directive order.
+		if (!enabled) {
+			queueMicrotask(() => dispatch(FULL_LINE_RANGE))
+			return
+		}
+
+		const source = find_scroll_position_source(node)
+		queueMicrotask(() => recompute(source))
+
+		unsubscribe = source.subscribe(() => schedule_recompute(source))
+
+		resize_observer = new ResizeObserver(() => schedule_recompute(source))
+		if (node.parentElement) resize_observer.observe(node.parentElement)
+
+		window_resize_handler = () => schedule_recompute(source)
+		window.addEventListener('resize', window_resize_handler, { passive: true })
+	}
+
+	function teardown() {
+		if (raf_id !== undefined) cancelAnimationFrame(raf_id)
+		raf_id = undefined
+		unsubscribe?.()
+		unsubscribe = undefined
+		resize_observer?.disconnect()
+		resize_observer = undefined
+		if (window_resize_handler) window.removeEventListener('resize', window_resize_handler)
+		window_resize_handler = undefined
+		last_range = undefined
+	}
+
+	setup()
+
+	return {
+		update(new_params: TrackViewportWindowParams) {
+			const was_enabled = enabled
+			enabled = new_params.enabled ?? true
+			overscan_lines = new_params.overscan_lines ?? 50
+
+			if (was_enabled !== enabled) {
+				teardown()
+				setup()
+			}
+		},
+		destroy: teardown
+	}
+}
diff --git a/src/lib/components/use-css-highlight.ts b/src/lib/components/use-css-highlight.ts
index 4fae715..aa7e7da 100644
--- a/src/lib/components/use-css-highlight.ts
+++ b/src/lib/components/use-css-highlight.ts
@@ -10,9 +10,22 @@ import {
 	STYLE_RULE,
 	DECLARATION
 } from '@projectwallace/css-parser'
+import {
+	build_line_offsets,
+	line_range_to_char_range,
+	FULL_LINE_RANGE,
+	VIRTUALIZE_THRESHOLD_CHARS,
+	type LineRange,
+	type CharRange,
+	type ViewportWindowChangeEvent
+} from './highlight-viewport'
 
 const token_types = ['AtruleName', 'SelectorList', 'Property', 'Comment', 'Important']
 
+function intersects(char_range: CharRange, start: number, end: number) {
+	return start < char_range.end && end > char_range.start
+}
+
 export type NodeType = 'selector' | 'declaration' | 'selectorList' | 'atrule' | 'value' | 'rule'
 
 export function highlight_css(
@@ -46,6 +59,10 @@ export function highlight_css(
 	// can be replaced (e.g. css toggling empty/non-empty) — a stale reference would silently
 	// highlight a detached node while leaving old ranges registered until destroy.
 	let text_node: Node | null = null
+	// Reported by the track_viewport_window action (a separate `use:` directive on the same
+	// node - see highlight-viewport.ts). Defaults to "everything" until the first event
+	// arrives, or forever for files below the virtualization threshold.
+	let visible_range: LineRange = FULL_LINE_RANGE
 
 	function add_range(token_type: string, start: number, end: number) {
 		let range = new StaticRange({
@@ -74,6 +91,16 @@ export function highlight_css(
 				}
 			}
 
+			let virtualize = css.length > VIRTUALIZE_THRESHOLD_CHARS
+			let char_range: CharRange = virtualize
+				? line_range_to_char_range(
+						build_line_offsets(css),
+						visible_range.start_line,
+						visible_range.end_line,
+						css.length
+					)
+				: { start: 0, end: css.length }
+
 			// Use appropriate parser based on node_type
 			if (node_type === 'selector' || node_type === 'selectorList') {
 				ast = parse_selector(css)
@@ -88,7 +115,9 @@ export function highlight_css(
 					parse_values: false,
 					parse_selectors: false,
 					on_comment: (comment) => {
-						add_range('Comment', comment.start, comment.end)
+						if (intersects(char_range, comment.start, comment.end)) {
+							add_range('Comment', comment.start, comment.end)
+						}
 					}
 				})
 			}
@@ -99,9 +128,14 @@ export function highlight_css(
 				let end = node.end
 
 				if (node.type === AT_RULE) {
+					// An at-rule with a body (e.g. @media) is a container - skip its whole subtree
+					// when it doesn't overlap the visible window, instead of only skipping the
+					// range registration, so the walker doesn't pay to descend into off-screen rules.
+					if (!intersects(char_range, start, end)) return SKIP
 					let name = node.name!
 					add_range('AtruleName', start, start + name.length + 1)
 				} else if (node.type === STYLE_RULE) {
+					if (!intersects(char_range, start, end)) return SKIP
 					// With parse_selectors disabled, node.prelude is an untyped RAW span rather
 					// than a SELECTOR_LIST node, but it still gives us the exact selector range —
 					// no need to pay for full selector parsing just to get a typed node here.
@@ -110,10 +144,12 @@ export function highlight_css(
 						add_range('SelectorList', prelude.start, prelude.end)
 					}
 				} else if (node.type === DECLARATION) {
-					add_range('Property', start, start + node.property!.length)
+					if (intersects(char_range, start, end)) {
+						add_range('Property', start, start + node.property!.length)
 
-					if (node.is_important) {
-						add_range('Important', end - 11, end - 1)
+						if (node.is_important) {
+							add_range('Important', end - 11, end - 1)
+						}
 					}
 
 					return SKIP
@@ -147,10 +183,25 @@ export function highlight_css(
 		})
 	}
 
+	let current_css: string = css
+	let current_node_type: string | undefined = node_type
+
+	function on_viewport_window_change(event: Event) {
+		visible_range = (event as ViewportWindowChangeEvent).detail
+		schedule(() => {
+			cleanup()
+			do_highlight(current_css, current_node_type)
+		})
+	}
+
+	node.addEventListener('viewportwindowchange', on_viewport_window_change)
+
 	schedule(() => do_highlight(css, node_type))
 
 	return {
 		update({ css: updated_css, node_type: updated_node_type }: { css: string; node_type?: string }) {
+			current_css = updated_css
+			current_node_type = updated_node_type
 			schedule(() => {
 				cleanup()
 				do_highlight(updated_css, updated_node_type)
@@ -161,6 +212,7 @@ export function highlight_css(
 				cancelIdleCallback(idle_id)
 				idle_id = undefined
 			}
+			node.removeEventListener('viewportwindowchange', on_viewport_window_change)
 			cleanup()
 		}
 	}

From df5f7f913c65a2e27fa8d1303e30fb012a7dd43d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 07:29:21 +0000
Subject: [PATCH 2/6] refactor: centralize visibility check in add_range for
 readability

Per review: fold the intersects() guard into a single in_view() check
inside add_range() itself, so call sites (Comment/AtruleName/Property/
Important) go back to their pre-virtualization form instead of each
wrapping the call in its own condition. The AT_RULE/STYLE_RULE subtree
pruning keeps its own in_view() check since it's a distinct decision
(skip descending) from range registration.

Also de-duplicate the schedule(cleanup + do_highlight) pattern used by
both the viewport-change listener and the action's update() into one
rehighlight() function.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01E7X88yKZHKpehyuogXpFDT
---
 src/lib/components/use-css-highlight.ts | 66 ++++++++++++-------------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/src/lib/components/use-css-highlight.ts b/src/lib/components/use-css-highlight.ts
index aa7e7da..e7082be 100644
--- a/src/lib/components/use-css-highlight.ts
+++ b/src/lib/components/use-css-highlight.ts
@@ -22,10 +22,6 @@ import {
 
 const token_types = ['AtruleName', 'SelectorList', 'Property', 'Comment', 'Important']
 
-function intersects(char_range: CharRange, start: number, end: number) {
-	return start < char_range.end && end > char_range.start
-}
-
 export type NodeType = 'selector' | 'declaration' | 'selectorList' | 'atrule' | 'value' | 'rule'
 
 export function highlight_css(
@@ -63,8 +59,16 @@ export function highlight_css(
 	// node - see highlight-viewport.ts). Defaults to "everything" until the first event
 	// arrives, or forever for files below the virtualization threshold.
 	let visible_range: LineRange = FULL_LINE_RANGE
+	// undefined means "not virtualizing" (small file) - every token is in view.
+	let char_range: CharRange | undefined
+
+	function in_view(start: number, end: number): boolean {
+		return char_range === undefined || (start < char_range.end && end > char_range.start)
+	}
 
 	function add_range(token_type: string, start: number, end: number) {
+		if (!in_view(start, end)) return
+
 		let range = new StaticRange({
 			startContainer: text_node!,
 			startOffset: start,
@@ -82,6 +86,16 @@ export function highlight_css(
 			return
 		}
 
+		char_range =
+			css.length > VIRTUALIZE_THRESHOLD_CHARS
+				? line_range_to_char_range(
+						build_line_offsets(css),
+						visible_range.start_line,
+						visible_range.end_line,
+						css.length
+					)
+				: undefined
+
 		try {
 			let ast
 
@@ -91,16 +105,6 @@ export function highlight_css(
 				}
 			}
 
-			let virtualize = css.length > VIRTUALIZE_THRESHOLD_CHARS
-			let char_range: CharRange = virtualize
-				? line_range_to_char_range(
-						build_line_offsets(css),
-						visible_range.start_line,
-						visible_range.end_line,
-						css.length
-					)
-				: { start: 0, end: css.length }
-
 			// Use appropriate parser based on node_type
 			if (node_type === 'selector' || node_type === 'selectorList') {
 				ast = parse_selector(css)
@@ -114,11 +118,7 @@ export function highlight_css(
 					parse_atrule_preludes: false,
 					parse_values: false,
 					parse_selectors: false,
-					on_comment: (comment) => {
-						if (intersects(char_range, comment.start, comment.end)) {
-							add_range('Comment', comment.start, comment.end)
-						}
-					}
+					on_comment: (comment) => add_range('Comment', comment.start, comment.end)
 				})
 			}
 
@@ -131,11 +131,11 @@ export function highlight_css(
 					// An at-rule with a body (e.g. @media) is a container - skip its whole subtree
 					// when it doesn't overlap the visible window, instead of only skipping the
 					// range registration, so the walker doesn't pay to descend into off-screen rules.
-					if (!intersects(char_range, start, end)) return SKIP
+					if (!in_view(start, end)) return SKIP
 					let name = node.name!
 					add_range('AtruleName', start, start + name.length + 1)
 				} else if (node.type === STYLE_RULE) {
-					if (!intersects(char_range, start, end)) return SKIP
+					if (!in_view(start, end)) return SKIP
 					// With parse_selectors disabled, node.prelude is an untyped RAW span rather
 					// than a SELECTOR_LIST node, but it still gives us the exact selector range —
 					// no need to pay for full selector parsing just to get a typed node here.
@@ -144,12 +144,10 @@ export function highlight_css(
 						add_range('SelectorList', prelude.start, prelude.end)
 					}
 				} else if (node.type === DECLARATION) {
-					if (intersects(char_range, start, end)) {
-						add_range('Property', start, start + node.property!.length)
+					add_range('Property', start, start + node.property!.length)
 
-						if (node.is_important) {
-							add_range('Important', end - 11, end - 1)
-						}
+					if (node.is_important) {
+						add_range('Important', end - 11, end - 1)
 					}
 
 					return SKIP
@@ -186,26 +184,26 @@ export function highlight_css(
 	let current_css: string = css
 	let current_node_type: string | undefined = node_type
 
-	function on_viewport_window_change(event: Event) {
-		visible_range = (event as ViewportWindowChangeEvent).detail
+	function rehighlight() {
 		schedule(() => {
 			cleanup()
 			do_highlight(current_css, current_node_type)
 		})
 	}
 
-	node.addEventListener('viewportwindowchange', on_viewport_window_change)
+	function on_viewport_window_change(event: Event) {
+		visible_range = (event as ViewportWindowChangeEvent).detail
+		rehighlight()
+	}
 
-	schedule(() => do_highlight(css, node_type))
+	node.addEventListener('viewportwindowchange', on_viewport_window_change)
+	rehighlight()
 
 	return {
 		update({ css: updated_css, node_type: updated_node_type }: { css: string; node_type?: string }) {
 			current_css = updated_css
 			current_node_type = updated_node_type
-			schedule(() => {
-				cleanup()
-				do_highlight(updated_css, updated_node_type)
-			})
+			rehighlight()
 		},
 		destroy: () => {
 			if (idle_id !== undefined) {

From 35697a998d8fcec6fd6d9996f9dd6310467c856a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 08:31:57 +0000
Subject: [PATCH 3/6] style: rename raf_id to frame_id and always brace
 if-statements

Per review: raf_id was an unclear abbreviation, renamed to frame_id.
Also switched every single-statement if in this file to always use
braces with the body on its own line, matching what oxlint's `curly`
rule (in its default "all" mode) would enforce.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01E7X88yKZHKpehyuogXpFDT
---
 src/lib/components/highlight-viewport.ts | 28 ++++++++++++++++--------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/highlight-viewport.ts b/src/lib/components/highlight-viewport.ts
index e84e06c..0873a04 100644
--- a/src/lib/components/highlight-viewport.ts
+++ b/src/lib/components/highlight-viewport.ts
@@ -139,7 +139,7 @@ export function track_viewport_window(node: Element, params: TrackViewportWindow
 	let unsubscribe: (() => void) | undefined
 	let resize_observer: ResizeObserver | undefined
 	let window_resize_handler: (() => void) | undefined
-	let raf_id: number | undefined
+	let frame_id: number | undefined
 	let last_range: LineRange | undefined
 
 	function dispatch(range: LineRange) {
@@ -163,16 +163,20 @@ export function track_viewport_window(node: Element, params: TrackViewportWindow
 			const moved =
 				Math.abs(range.start_line - last_range.start_line) >= hysteresis ||
 				Math.abs(range.end_line - last_range.end_line) >= hysteresis
-			if (!moved) return
+			if (!moved) {
+				return
+			}
 		}
 
 		dispatch(range)
 	}
 
 	function schedule_recompute(source: ScrollPositionSource) {
-		if (raf_id !== undefined) cancelAnimationFrame(raf_id)
-		raf_id = requestAnimationFrame(() => {
-			raf_id = undefined
+		if (frame_id !== undefined) {
+			cancelAnimationFrame(frame_id)
+		}
+		frame_id = requestAnimationFrame(() => {
+			frame_id = undefined
 			recompute(source)
 		})
 	}
@@ -194,20 +198,26 @@ export function track_viewport_window(node: Element, params: TrackViewportWindow
 		unsubscribe = source.subscribe(() => schedule_recompute(source))
 
 		resize_observer = new ResizeObserver(() => schedule_recompute(source))
-		if (node.parentElement) resize_observer.observe(node.parentElement)
+		if (node.parentElement) {
+			resize_observer.observe(node.parentElement)
+		}
 
 		window_resize_handler = () => schedule_recompute(source)
 		window.addEventListener('resize', window_resize_handler, { passive: true })
 	}
 
 	function teardown() {
-		if (raf_id !== undefined) cancelAnimationFrame(raf_id)
-		raf_id = undefined
+		if (frame_id !== undefined) {
+			cancelAnimationFrame(frame_id)
+		}
+		frame_id = undefined
 		unsubscribe?.()
 		unsubscribe = undefined
 		resize_observer?.disconnect()
 		resize_observer = undefined
-		if (window_resize_handler) window.removeEventListener('resize', window_resize_handler)
+		if (window_resize_handler) {
+			window.removeEventListener('resize', window_resize_handler)
+		}
 		window_resize_handler = undefined
 		last_range = undefined
 	}

From f8ef8b57793173ea6cfa22f1f01139f574d78585 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 08:46:11 +0000
Subject: [PATCH 4/6] perf: cache the parsed AST so scrolling only re-walks,
 not re-parses

Virtualization already bounds the walk (via SKIP-pruning off-screen
subtrees) and range registration (via in_view()), but do_highlight()
was still calling parse() over the *entire* document on every
scroll-triggered rehighlight, not just on content changes - that's
the one cost left that scales with file size regardless of scroll
position, and the main remaining source of jank on large files.

Cache the parse result (and the line-offset table used to compute
char_range) keyed by (css, node_type), invalidated only when either
actually changes. Comment ranges move from being added during parsing
to a plain array collected once and re-filtered against the current
window on every call, same as the other token types, so they still
correctly track scroll after the walk-only refresh.

Verified in a browser against a ~2.6MB/30k-rule stylesheet: parse()
now runs exactly once regardless of how many times the visible window
changes, and highlighted comment/property/selector ranges still track
the scroll position correctly (offsets move from the top of the file,
to ~50%, to the end, matching each scroll step).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01E7X88yKZHKpehyuogXpFDT
---
 src/lib/components/use-css-highlight.ts | 83 ++++++++++++++++++-------
 1 file changed, 59 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/use-css-highlight.ts b/src/lib/components/use-css-highlight.ts
index e7082be..d1ab715 100644
--- a/src/lib/components/use-css-highlight.ts
+++ b/src/lib/components/use-css-highlight.ts
@@ -8,7 +8,8 @@ import {
 	SKIP,
 	AT_RULE,
 	STYLE_RULE,
-	DECLARATION
+	DECLARATION,
+	type CSSNode
 } from '@projectwallace/css-parser'
 import {
 	build_line_offsets,
@@ -22,6 +23,13 @@ import {
 
 const token_types = ['AtruleName', 'SelectorList', 'Property', 'Comment', 'Important']
 
+type ParsedCss = {
+	css: string
+	node_type: string | undefined
+	ast: CSSNode
+	comments: CharRange[]
+}
+
 export type NodeType = 'selector' | 'declaration' | 'selectorList' | 'atrule' | 'value' | 'rule'
 
 export function highlight_css(
@@ -66,6 +74,51 @@ export function highlight_css(
 		return char_range === undefined || (start < char_range.end && end > char_range.start)
 	}
 
+	// Parsing the whole document is the one cost virtualization doesn't bound - the walk
+	// below is cheap once pruned by in_view(), but re-parsing on every scroll-triggered
+	// rehighlight would redo that work for content that hasn't changed. Cache the parse
+	// result (and the line-offset table used to compute char_range) and only redo them
+	// when `css`/`node_type` actually change, not when only the visible window moves.
+	let parsed: ParsedCss | undefined
+	let line_offsets: { css: string; offsets: Uint32Array } | undefined
+
+	function get_line_offsets(css: string): Uint32Array {
+		if (line_offsets?.css !== css) {
+			line_offsets = { css, offsets: build_line_offsets(css) }
+		}
+		return line_offsets.offsets
+	}
+
+	function get_parsed(css: string, node_type?: string): ParsedCss {
+		if (parsed?.css === css && parsed.node_type === node_type) {
+			return parsed
+		}
+
+		let ast: CSSNode
+		let comments: CharRange[] = []
+
+		if (node_type === 'selector' || node_type === 'selectorList') {
+			ast = parse_selector(css)
+		} else if (node_type === 'value') {
+			ast = parse_value(css)
+		} else if (node_type === 'declaration') {
+			ast = parse_declaration(css)
+		} else {
+			// Default: parse as full stylesheet
+			ast = parse(css, {
+				parse_atrule_preludes: false,
+				parse_values: false,
+				parse_selectors: false,
+				on_comment: (comment) => {
+					comments.push({ start: comment.start, end: comment.end })
+				}
+			})
+		}
+
+		parsed = { css, node_type, ast, comments }
+		return parsed
+	}
+
 	function add_range(token_type: string, start: number, end: number) {
 		if (!in_view(start, end)) return
 
@@ -88,38 +141,20 @@ export function highlight_css(
 
 		char_range =
 			css.length > VIRTUALIZE_THRESHOLD_CHARS
-				? line_range_to_char_range(
-						build_line_offsets(css),
-						visible_range.start_line,
-						visible_range.end_line,
-						css.length
-					)
+				? line_range_to_char_range(get_line_offsets(css), visible_range.start_line, visible_range.end_line, css.length)
 				: undefined
 
 		try {
-			let ast
-
 			for (let token_type of token_types) {
 				if (!highlights.has(token_type)) {
 					highlights.set(token_type, new Highlight())
 				}
 			}
 
-			// Use appropriate parser based on node_type
-			if (node_type === 'selector' || node_type === 'selectorList') {
-				ast = parse_selector(css)
-			} else if (node_type === 'value') {
-				ast = parse_value(css)
-			} else if (node_type === 'declaration') {
-				ast = parse_declaration(css)
-			} else {
-				// Default: parse as full stylesheet
-				ast = parse(css, {
-					parse_atrule_preludes: false,
-					parse_values: false,
-					parse_selectors: false,
-					on_comment: (comment) => add_range('Comment', comment.start, comment.end)
-				})
+			const { ast, comments } = get_parsed(css, node_type)
+
+			for (const comment of comments) {
+				add_range('Comment', comment.start, comment.end)
 			}
 
 			// Walk handles both single nodes and arrays

From a657a2f38773b47266b96fd77e66d01700354ad1 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 08:54:08 +0000
Subject: [PATCH 5/6] style: brace remaining if-statements for the repo's curly
 rule

Rebased on main, which now enforces oxlint's curly rule repo-wide
(#386). Fixes the handful of one-line if-statements in this branch's
own new code that the rule now flags.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01E7X88yKZHKpehyuogXpFDT
---
 src/lib/components/HighlightCssCode.svelte |  4 +++-
 src/lib/components/use-css-highlight.ts    | 12 +++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/HighlightCssCode.svelte b/src/lib/components/HighlightCssCode.svelte
index 3d32610..11b4e1c 100644
--- a/src/lib/components/HighlightCssCode.svelte
+++ b/src/lib/components/HighlightCssCode.svelte
@@ -50,7 +50,9 @@
 	let visible_range = $state<LineRange>(FULL_LINE_RANGE)
 	let virtualize = $derived(css.length > VIRTUALIZE_THRESHOLD_CHARS)
 	let visible_char_range: CharRange | undefined = $derived.by(() => {
-		if (!virtualize) return undefined
+		if (!virtualize) {
+			return undefined
+		}
 		return line_range_to_char_range(
 			build_line_offsets(css),
 			visible_range.start_line,
diff --git a/src/lib/components/use-css-highlight.ts b/src/lib/components/use-css-highlight.ts
index d1ab715..86e4acf 100644
--- a/src/lib/components/use-css-highlight.ts
+++ b/src/lib/components/use-css-highlight.ts
@@ -120,7 +120,9 @@ export function highlight_css(
 	}
 
 	function add_range(token_type: string, start: number, end: number) {
-		if (!in_view(start, end)) return
+		if (!in_view(start, end)) {
+			return
+		}
 
 		let range = new StaticRange({
 			startContainer: text_node!,
@@ -166,11 +168,15 @@ export function highlight_css(
 					// An at-rule with a body (e.g. @media) is a container - skip its whole subtree
 					// when it doesn't overlap the visible window, instead of only skipping the
 					// range registration, so the walker doesn't pay to descend into off-screen rules.
-					if (!in_view(start, end)) return SKIP
+					if (!in_view(start, end)) {
+						return SKIP
+					}
 					let name = node.name!
 					add_range('AtruleName', start, start + name.length + 1)
 				} else if (node.type === STYLE_RULE) {
-					if (!in_view(start, end)) return SKIP
+					if (!in_view(start, end)) {
+						return SKIP
+					}
 					// With parse_selectors disabled, node.prelude is an untyped RAW span rather
 					// than a SELECTOR_LIST node, but it still gives us the exact selector range —
 					// no need to pay for full selector parsing just to get a typed node here.

From 02391622367f87d8dc4b0cecbe6a79ef7172a7b6 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 31 Aug 2026 09:36:15 +0000
Subject: [PATCH 6/6] fix: make Pre's scroll-to-location jump instant instead
 of smooth

The .body scroll container opted into smooth scrolling whenever the
user hadn't set prefers-reduced-motion, which made jumping to a
selected location or the next/previous uncovered coverage block
animate instead of snap. Drop it so scrollTo() always jumps instantly.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01E7X88yKZHKpehyuogXpFDT
---
 src/lib/components/Pre.svelte | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/lib/components/Pre.svelte b/src/lib/components/Pre.svelte
index 7cabbaf..0702b60 100644
--- a/src/lib/components/Pre.svelte
+++ b/src/lib/components/Pre.svelte
@@ -277,10 +277,6 @@
 		contain: strict;
 		overscroll-behavior: contain;
 
-		@media (prefers-reduced-motion: no-preference) {
-			scroll-behavior: smooth;
-		}
-
 		&.with-line-numbers {
 			grid-template-columns: calc(var(--pre-ch-width) + 1ch) 1fr;
 		}