@pierre/diffs 1.3.0-beta.1 → 1.3.0-beta.11

package/dist/components/CodeView.js

@@ -1,16 +1,18 @@
-import { CORE_CSS_ATTRIBUTE, DEFAULT_CODE_VIEW_FILE_METRICS, DEFAULT_CODE_VIEW_LAYOUT, DEFAULT_COLLAPSED_CONTEXT_THRESHOLD, DEFAULT_SMOOTH_SCROLL_SETTINGS, DEFAULT_THEMES, DIFFS_DEVELOPMENT_BUILD, DIFFS_TAG_NAME, THEME_CSS_ATTRIBUTE, UNSAFE_CSS_ATTRIBUTE } from "../constants.js";
+import { DEFAULT_CODE_VIEW_FILE_METRICS, DEFAULT_CODE_VIEW_LAYOUT, DEFAULT_SMOOTH_SCROLL_SETTINGS, DEFAULT_THEMES, DIFFS_DEVELOPMENT_BUILD, DIFFS_TAG_NAME } from "../constants.js";
 import { dequeueRender, queueRender } from "../managers/UniversalRenderingManager.js";
+import { areManagedSnapshotsEqual } from "../utils/areManagedSnapshotsEqual.js";
 import { areObjectsEqual } from "../utils/areObjectsEqual.js";
 import { areThemesEqual } from "../utils/areThemesEqual.js";
 import { areOptionsEqual } from "../utils/areOptionsEqual.js";
 import { areSelectionsEqual } from "../utils/areSelectionsEqual.js";
+import { createCodeViewHeaderFooterHostElement } from "../utils/createCodeViewHeaderFooterHostElement.js";
 import { createWindowFromScrollPosition } from "../utils/createWindowFromScrollPosition.js";
+import { finishEditSessionForDiff } from "../utils/editSessionHunks.js";
 import { isStyleNode } from "../utils/isStyleNode.js";
 import { prefersReducedMotion } from "../utils/prefersReducedMotion.js";
 import { roundToDevicePixel } from "../utils/roundToDevicePixel.js";
 import { VirtualizedFile } from "./VirtualizedFile.js";
 import { VirtualizedFileDiff } from "./VirtualizedFileDiff.js";
-
 //#region src/components/CodeView.ts
 const CODE_VIEW_DIFF_OPTION_KEYS = [
 	"theme",
@@ -29,6 +31,7 @@ const CODE_VIEW_DIFF_OPTION_KEYS = [
 	"diffIndicators",
 	"disableBackground",
 	"expandUnchanged",
+	"loadDiffFiles",
 	"collapsedContextThreshold",
 	"lineDiffType",
 	"maxLineDiffLength",
@@ -62,9 +65,11 @@ const CODE_VIEW_FILE_OPTION_KEYS = [
 	"controlledSelection",
 	"disableErrorHandling"
 ];
+const CODE_VIEW_EDIT_FORCED_OPTION_KEYS = /* @__PURE__ */ new Set(["useTokenTransformer"]);
 const CODE_VIEW_SHARED_CALLBACK_KEYS = [
 	"renderCustomHeader",
 	"renderHeaderPrefix",
+	"renderHeaderFilenameSuffix",
 	"renderHeaderMetadata",
 	"renderAnnotation",
 	"renderGutterUtility",
@@ -130,6 +135,8 @@ var CodeView = class CodeView {
 	items = [];
 	idToItem = /* @__PURE__ */ new Map();
 	selectedLines = null;
+	itemEditors = /* @__PURE__ */ new Map();
+	attachedEditors = /* @__PURE__ */ new Set();
 	instanceToItem = /* @__PURE__ */ new Map();
 	layoutDirtyIndex;
 	pendingLayoutReset;
@@ -164,18 +171,30 @@ var CodeView = class CodeView {
 	diffOptionsPrototype;
 	pendingScrollTarget;
 	pendingLayoutAnchor;
+	shouldFixContainerFocus = false;
 	scrollAnimation;
 	root;
 	resizeObserver;
 	container = document.createElement("div");
 	stickyContainer = document.createElement("div");
 	stickyOffset = document.createElement("div");
+	header = {
+		element: void 0,
+		render: void 0,
+		height: 0
+	};
+	footer = {
+		element: void 0,
+		render: void 0,
+		height: 0
+	};
 	elementPool = [];
 	elementPoolVersion = 0;
 	elementPoolTracker = /* @__PURE__ */ new WeakMap();
 	pendingElementPool = [];
 	options;
 	workerManager;
+	isReadySubscription;
 	isContainerManaged;
 	constructor(options = { theme: DEFAULT_THEMES }, workerManager, isContainerManaged = false) {
 		this.options = options;
@@ -195,6 +214,9 @@ var CodeView = class CodeView {
 	getLayout() {
 		return this.options.layout ?? DEFAULT_CODE_VIEW_LAYOUT;
 	}
+	getItemTopOffset() {
+		return this.getLayout().paddingTop + this.header.height;
+	}
 	computeMetricsCache(itemMetrics) {
 		this.itemMetricsCache = {
 			hunkLineCount: itemMetrics?.hunkLineCount ?? DEFAULT_CODE_VIEW_FILE_METRICS.hunkLineCount,
@@ -240,6 +262,28 @@ var CodeView = class CodeView {
 			instance: item.instance
 		});
 	}
+	validateStickyContainerHeight() {
+		if (!this.shouldValidateItemHeights()) return;
+		const { firstIndex, lastIndex, stickyHeight, stickyTop, stickyBottom } = this.renderState;
+		if (firstIndex === -1 || lastIndex === -1) return;
+		const actualHeight = this.stickyContainer.getBoundingClientRect().height;
+		if (Math.abs(actualHeight - stickyHeight) < 1) return;
+		console.error("CodeView: sticky container height does not match computed layout", {
+			computedStickyHeight: stickyHeight,
+			actualStickyHeight: actualHeight,
+			delta: actualHeight - stickyHeight,
+			stickyTop,
+			stickyBottom,
+			firstIndex,
+			lastIndex,
+			firstStickySpecs: this.items[firstIndex]?.instance.getAdvancedStickySpecs(),
+			lastStickySpecs: this.items[lastIndex]?.instance.getAdvancedStickySpecs(),
+			scrollTop: this.getScrollTop(),
+			scrollPageOffset: this.scrollPageOffset,
+			windowSpecs: { ...this.windowSpecs },
+			stickyContainer: this.stickyContainer
+		});
+	}
 	clearScrollInteractionTimer() {
 		if (this.scrollInteractionFixTimer != null) {
 			clearTimeout(this.scrollInteractionFixTimer);
@@ -275,11 +319,49 @@ var CodeView = class CodeView {
 		this.container?.style.setProperty("margin-top", `${paddingTop}px`);
 		this.container?.style.setProperty("margin-bottom", `${paddingBottom}px`);
 	}
+	reconcileHeaderFooterHosts() {
+		const headerChanged = this.reconcileHost("header");
+		const footerChanged = this.reconcileHost("footer");
+		return headerChanged || footerChanged;
+	}
+	reconcileHost(type) {
+		const { root, container } = this;
+		if (root == null || container == null) return false;
+		const host = type === "header" ? this.header : this.footer;
+		const render = type === "header" ? this.options.renderCodeViewHeader : this.options.renderCodeViewFooter;
+		if (render == null) {
+			if (host.element == null) return false;
+			this.resizeObserver?.unobserve(host.element);
+			host.element.remove();
+			host.element = void 0;
+			host.render = void 0;
+			this.setHostHeight(host, 0);
+			return false;
+		}
+		if (host.element != null && render === host.render) return false;
+		const element = host.element ?? createCodeViewHeaderFooterHostElement(type, container, this.resizeObserver);
+		host.element = element;
+		const content = render();
+		if (content != null) element.replaceChildren(content);
+		else if (!this.isContainerManaged && element.children.length > 0) element.textContent = "";
+		host.render = render;
+		return true;
+	}
+	setHostHeight(host, height) {
+		if (host.height === height) return;
+		host.height = height;
+		this.scrollDirty = true;
+	}
+	measureMountedHosts() {
+		if (this.header.element != null) this.setHostHeight(this.header, this.header.element.getBoundingClientRect().height);
+		if (this.footer.element != null) this.setHostHeight(this.footer, this.footer.element.getBoundingClientRect().height);
+	}
 	setup(root) {
 		if (this.root != null) throw new Error("CodeView.setup: already setup");
 		this.workerManager?.subscribeToThemeChanges(this);
 		this.root = root;
 		this.root.style.overflowAnchor = "none";
+		if (!this.root.hasAttribute("tabindex")) this.root.tabIndex = -1;
 		this.container ??= document.createElement("div");
 		this.container.style.contain = "layout style";
 		this.syncLayout();
@@ -313,8 +395,13 @@ var CodeView = class CodeView {
 		};
 	}
 	reset() {
+		dequeueRender(this.computeRenderRangeAndEmit);
+		this.clearReadySubscription();
 		this.restoreScrollInteractions();
 		this.cleanAllRenderedItems();
+		for (const record of this.itemEditors.values()) record.editor.cleanUp();
+		this.itemEditors.clear();
+		this.attachedEditors.clear();
 		this.selectedLines = null;
 		this.items.length = 0;
 		this.idToItem.clear();
@@ -330,6 +417,7 @@ var CodeView = class CodeView {
 			bottom: 0
 		};
 		this.pendingLayoutAnchor = void 0;
+		this.shouldFixContainerFocus = false;
 		this.height = 0;
 		this.scrollTop = 0;
 		this.scrollPageOffset = 0;
@@ -356,6 +444,14 @@ var CodeView = class CodeView {
 		this.stickyOffset.remove();
 		this.stickyContainer.remove();
 		this.stickyContainer.textContent = "";
+		this.header.element?.remove();
+		this.header.element = void 0;
+		this.header.render = void 0;
+		this.header.height = 0;
+		this.footer.element?.remove();
+		this.footer.element = void 0;
+		this.footer.render = void 0;
+		this.footer.height = 0;
 		this.root = void 0;
 		this.container = void 0;
 	}
@@ -388,13 +484,25 @@ var CodeView = class CodeView {
 	}
 	releaseRenderedItem(item) {
 		const { element } = item;
+		if (element != null && this.renderedItemOwnsFocus(element)) this.shouldFixContainerFocus = true;
 		item.instance.cleanUp(true);
+		this.attachedEditors.delete(item.item.id);
 		item.element = void 0;
 		if (element == null) return;
 		element.remove();
 		this.cleanElement(element);
 		this.queueElementForPool(element);
 	}
+	renderedItemOwnsFocus(element) {
+		const { activeElement } = document;
+		return activeElement === element || element.contains(activeElement) || element.shadowRoot?.activeElement != null;
+	}
+	fixContainerFocus() {
+		if (this.shouldFixContainerFocus) {
+			this.shouldFixContainerFocus = false;
+			this.root?.focus({ preventScroll: true });
+		}
+	}
 	cleanElement(element) {
 		const { shadowRoot } = element;
 		if (shadowRoot != null) {
@@ -471,6 +579,14 @@ var CodeView = class CodeView {
 	getItem(itemId) {
 		return this.idToItem.get(itemId)?.item;
 	}
+	/**
+	* Get the live editor for an item currently in edit mode. Use this to drive
+	* editor APIs CodeView does not wrap (applyEdits, undo, setMarkers, …).
+	* Returns undefined once the item leaves edit mode.
+	*/
+	getEditor(itemId) {
+		return this.itemEditors.get(itemId)?.editor;
+	}
 	updateItem(input) {
 		const item = this.idToItem.get(input.id);
 		if (item == null) {
@@ -482,6 +598,7 @@ var CodeView = class CodeView {
 		this.scrollDirty = true;
 		this.render();
 		this.syncSelection();
+		this.syncItemEditors();
 		return true;
 	}
 	updateItemId(oldId, newId) {
@@ -506,6 +623,13 @@ var CodeView = class CodeView {
 			};
 			this.options.onSelectedLinesChange?.(this.selectedLines);
 		}
+		const editorRecord = this.itemEditors.get(oldId);
+		if (editorRecord != null) {
+			editorRecord.state.id = newId;
+			this.itemEditors.delete(oldId);
+			this.itemEditors.set(newId, editorRecord);
+			if (this.attachedEditors.delete(oldId)) this.attachedEditors.add(newId);
+		}
 		this.renamePendingScrollTarget(oldId, newId);
 		this.renamePendingLayoutAnchor(oldId, newId);
 		this.render();
@@ -513,17 +637,25 @@ var CodeView = class CodeView {
 	}
 	addItem(input) {
 		this.addItems([input]);
-		this.syncSelection();
 	}
 	addItems(inputs) {
 		this.appendItemsInternal(inputs);
 		this.syncSelection();
+		this.syncItemEditors();
 	}
 	setItems(items) {
-		if (items.length === 0) this.reset();
-		else if (this.items.length === 0) this.appendItemsInternal(items);
+		if (items.length === 0) {
+			const completions = [];
+			for (const record of this.itemEditors.values()) {
+				const { lastChange } = record.state;
+				if (lastChange != null) completions.push(lastChange);
+			}
+			this.reset();
+			for (const { item, file, lineAnnotations } of completions) this.options.onItemEditComplete?.(item, file, lineAnnotations);
+		} else if (this.items.length === 0) this.appendItemsInternal(items);
 		else if (!this.tryAppendItems(items)) this.reconcileItems(items);
 		this.syncSelection();
+		this.syncItemEditors();
 	}
 	/**
 	* Append new records to the viewer while preserving existing layout state.
@@ -585,7 +717,9 @@ var CodeView = class CodeView {
 			this.scrollDirty = true;
 		}
 		if (!areOptionsEqual(prevOptions, options)) this.renderOptionsRevision++;
-		if (!this.isContainerManaged && this.items.length > 0) this.render();
+		this.syncItemEditors();
+		const headerFooterChanged = prevOptions.renderCodeViewHeader !== options.renderCodeViewHeader || prevOptions.renderCodeViewFooter !== options.renderCodeViewFooter;
+		if (!this.isContainerManaged && (this.items.length > 0 || headerFooterChanged)) this.render();
 	}
 	capturePendingLayoutAnchor() {
 		if (this.root == null || this.items.length === 0 || this.pendingScrollTarget != null) return;
@@ -598,6 +732,25 @@ var CodeView = class CodeView {
 			this.computeRenderRangeAndEmit();
 		} else queueRender(this.computeRenderRangeAndEmit);
 	}
+	isReady() {
+		const { workerManager } = this;
+		if (workerManager == null || workerManager.isInitialized() || workerManager.getStats().workersFailed) {
+			this.clearReadySubscription();
+			return true;
+		}
+		this.isReadySubscription ??= workerManager.subscribeToStatChanges((stats) => {
+			if (stats.managerState !== "initialized" && !stats.workersFailed) return;
+			this.clearReadySubscription();
+			this.render(true);
+		});
+		if (workerManager.getStats().managerState === "waiting") workerManager.initialize().catch(() => {});
+		return false;
+	}
+	clearReadySubscription() {
+		if (this.isReadySubscription == null) return;
+		this.isReadySubscription();
+		this.isReadySubscription = void 0;
+	}
 	instanceChanged(instance, layoutDirty) {
 		const item = this.instanceToItem.get(instance);
 		if (item == null) throw new Error("CodeView.instanceChanged: An instance has changed that is not registered");
@@ -610,6 +763,12 @@ var CodeView = class CodeView {
 	getContainerElement() {
 		return this.root;
 	}
+	getHeaderElement() {
+		return this.header.element;
+	}
+	getFooterElement() {
+		return this.footer.element;
+	}
 	getRenderedItems() {
 		const { firstIndex, lastIndex } = this.renderState;
 		if (firstIndex === -1 || lastIndex === -1 || lastIndex < firstIndex) return [];
@@ -643,7 +802,18 @@ var CodeView = class CodeView {
 		return true;
 	}
 	getSlotSnapshot(coordinator) {
-		return getSlotSnapshot(this.getRenderedItems(), coordinator);
+		return this.buildSlotSnapshot(coordinator);
+	}
+	buildSlotSnapshot(coordinator) {
+		const items = getSlotItems(this.getRenderedItems(), coordinator);
+		const { element: header } = this.header;
+		const { element: footer } = this.footer;
+		if (items == null && header == null && footer == null) return;
+		return {
+			items,
+			header,
+			footer
+		};
 	}
 	subscribeToScroll(listener) {
 		this.scrollListeners.add(listener);
@@ -659,12 +829,12 @@ var CodeView = class CodeView {
 	getTopForItem(id) {
 		const item = this.idToItem.get(id);
 		if (item == null) return;
-		return item.top + this.getLayout().paddingTop;
+		return item.top + this.getItemTopOffset();
 	}
 	createItem(input, index, top) {
 		const { itemMetricsCache: itemMetrics } = this;
 		if (input.type === "diff") {
-			const instance$1 = new VirtualizedFileDiff(this.createDiffOptions(input.id), this, itemMetrics, this.workerManager, this.isContainerManaged);
+			const instance = new VirtualizedFileDiff(this.createDiffOptions(input.id), this, itemMetrics, this.workerManager, this.isContainerManaged);
 			return {
 				type: "diff",
 				item: input,
@@ -674,7 +844,7 @@ var CodeView = class CodeView {
 				height: 0,
 				element: void 0,
 				renderedOptionsRevision: this.renderOptionsRevision,
-				instance: instance$1
+				instance
 			};
 		}
 		const instance = new VirtualizedFile(this.createFileOptions(input.id), this, itemMetrics, this.workerManager, this.isContainerManaged);
@@ -706,6 +876,82 @@ var CodeView = class CodeView {
 		}
 		item.instance.setSelectedLines(this.selectedLines.range, { notify: false });
 	}
+	isItemInEditMode(item) {
+		return this.options.createEditor != null && item.item.edit === true && item.item.collapsed !== true;
+	}
+	isReceiverEdited(receiver, mode) {
+		const state = getItemOptionsState(receiver);
+		if (state == null) return false;
+		const item = this.getItemOptions(state, mode);
+		return item != null && this.isItemInEditMode(item);
+	}
+	/**
+	* Attach (or lazily create) the editor for a mounted edit-mode item. Called
+	* from the render loop so every mounted item passes through it: fresh
+	* mounts, remounts after virtualization released the item, and items whose
+	* edit flag was just turned on. Editors persist across unmounts, so a
+	* remounted item re-attaches its existing editor and resumes the retained
+	* document; the renderers keep the host's file/diff data in sync with the
+	* session so the remount paints the edited text.
+	*/
+	attachItemEditor(item) {
+		const { id } = item.item;
+		const { createEditor } = this.options;
+		if (createEditor == null || item.element == null || this.attachedEditors.has(id) || !this.isItemInEditMode(item)) return;
+		let record = this.itemEditors.get(id);
+		if (record == null) {
+			const state = { id };
+			const editor = createEditor({ onChange: (file, lineAnnotations) => {
+				const latest = this.idToItem.get(state.id);
+				if (latest == null) return;
+				state.lastChange = {
+					item: latest.item,
+					file,
+					lineAnnotations
+				};
+				this.options.onItemEditChange?.(latest.item, file, lineAnnotations);
+			} });
+			if (editor == null) return;
+			record = {
+				editor,
+				state
+			};
+			this.itemEditors.set(id, record);
+		}
+		record.editor.edit(item.instance);
+		this.attachedEditors.add(id);
+	}
+	/**
+	* Drop editors for items that can no longer be edited: removed, edit turned
+	* off, collapsed, or the createEditor option was unset. Attachment happens
+	* in the render loop via attachItemEditor, so this only reconciles editors
+	* CodeView is already holding.
+	*/
+	syncItemEditors() {
+		if (this.itemEditors.size === 0) return;
+		const completions = [];
+		for (const [id, record] of this.itemEditors) {
+			const item = this.idToItem.get(id);
+			if (item != null && this.isItemInEditMode(item)) continue;
+			record.editor.cleanUp();
+			this.itemEditors.delete(id);
+			this.attachedEditors.delete(id);
+			const itemSnapshot = item?.item ?? record.state.lastChange?.item;
+			if (itemSnapshot?.type === "diff") {
+				if (item != null && item.type === "diff" && item.instance.completeEditSession()) {
+					this.markItemLayoutDirty(item);
+					this.render();
+				}
+				finishEditSessionForDiff(itemSnapshot.fileDiff);
+			}
+			const { lastChange } = record.state;
+			if (lastChange != null) completions.push(item == null ? lastChange : {
+				...lastChange,
+				item: item.item
+			});
+		}
+		for (const { item, file, lineAnnotations } of completions) this.options.onItemEditComplete?.(item, file, lineAnnotations);
+	}
 	renamePendingScrollTarget(oldId, newId) {
 		const { pendingScrollTarget } = this;
 		if (pendingScrollTarget == null || pendingScrollTarget.type === "position" || pendingScrollTarget.id !== oldId) return;
@@ -719,19 +965,35 @@ var CodeView = class CodeView {
 	}
 	createFileOptionsPrototype() {
 		const prototype = {};
-		for (const key of CODE_VIEW_FILE_OPTION_KEYS) defineItemOption(prototype, key, () => this.options[key]);
+		for (const key of CODE_VIEW_FILE_OPTION_KEYS) {
+			if (CODE_VIEW_EDIT_FORCED_OPTION_KEYS.has(key)) continue;
+			defineItemOption(prototype, key, () => this.options[key]);
+		}
+		defineItemOption(prototype, "useTokenTransformer", (receiver) => this.isReceiverEdited(receiver, "file") ? true : this.options.useTokenTransformer);
 		defineItemOption(prototype, "stickyHeader", () => this.options.stickyHeaders);
-		defineItemOption(prototype, "collapsed", (receiver) => this.getItemOptions(getItemOptionsState(receiver), "file")?.item.collapsed === true);
+		defineItemOption(prototype, "collapsed", (receiver) => {
+			const state = getItemOptionsState(receiver);
+			if (state == null) return;
+			return this.getItemOptions(state, "file")?.item.collapsed;
+		});
 		for (const key of CODE_VIEW_SHARED_CALLBACK_KEYS) this.defineItemSharedCallback(prototype, "file", key);
 		for (const key of CODE_VIEW_SELECTION_CALLBACK_KEYS) this.defineItemSelectionCallback(prototype, "file", key);
 		return prototype;
 	}
 	createDiffOptionsPrototype() {
 		const prototype = {};
-		for (const key of CODE_VIEW_DIFF_OPTION_KEYS) defineItemOption(prototype, key, () => this.options[key]);
+		for (const key of CODE_VIEW_DIFF_OPTION_KEYS) {
+			if (CODE_VIEW_EDIT_FORCED_OPTION_KEYS.has(key)) continue;
+			defineItemOption(prototype, key, () => this.options[key]);
+		}
+		defineItemOption(prototype, "useTokenTransformer", (receiver) => this.isReceiverEdited(receiver, "diff") ? true : this.options.useTokenTransformer);
 		defineItemOption(prototype, "stickyHeader", () => this.options.stickyHeaders);
 		defineItemOption(prototype, "hunkSeparators", () => this.options.hunkSeparators);
-		defineItemOption(prototype, "collapsed", (receiver) => this.getItemOptions(getItemOptionsState(receiver), "diff")?.item.collapsed === true);
+		defineItemOption(prototype, "collapsed", (receiver) => {
+			const state = getItemOptionsState(receiver);
+			if (state == null) return;
+			return this.getItemOptions(state, "diff")?.item.collapsed;
+		});
 		for (const key of CODE_VIEW_SHARED_CALLBACK_KEYS) this.defineItemSharedCallback(prototype, "diff", key);
 		for (const key of CODE_VIEW_SELECTION_CALLBACK_KEYS) this.defineItemSelectionCallback(prototype, "diff", key);
 		return prototype;
@@ -747,7 +1009,9 @@ var CodeView = class CodeView {
 		return options;
 	}
 	updateItemOptionsId(options, id) {
-		getItemOptionsState(options).id = id;
+		const state = getItemOptionsState(options);
+		if (state == null) throw new Error(`CodeView.updateItemOptionsId: No valid state`);
+		state.id = id;
 	}
 	getItemOptions(state, mode) {
 		const item = this.idToItem.get(state.id);
@@ -758,6 +1022,7 @@ var CodeView = class CodeView {
 		defineItemOption(options, key, (receiver) => {
 			if (this.options[key] == null) return;
 			const state = getItemOptionsState(receiver);
+			if (state == null) return;
 			const callbackCache = state.callbackCache ??= {};
 			let wrapped = callbackCache[key];
 			if (wrapped == null) {
@@ -774,8 +1039,8 @@ var CodeView = class CodeView {
 	}
 	defineItemSelectionCallback(options, mode, key) {
 		defineItemOption(options, key, (receiver) => {
-			if (this.options.enableLineSelection !== true) return;
 			const state = getItemOptionsState(receiver);
+			if (state == null) return;
 			const callbackCache = state.callbackCache ??= {};
 			let wrapped = callbackCache[key];
 			if (wrapped == null) {
@@ -903,7 +1168,7 @@ var CodeView = class CodeView {
 	}
 	getMaxScrollTopForHeight(scrollHeight) {
 		const { paddingBottom, paddingTop } = this.getLayout();
-		return Math.max(paddingTop + scrollHeight + paddingBottom - this.getHeight(), 0);
+		return Math.max(paddingTop + this.header.height + scrollHeight + this.footer.height + paddingBottom - this.getHeight(), 0);
 	}
 	getMaxScrollTop() {
 		return this.getMaxScrollTopForHeight(this.getScrollHeight());
@@ -1015,7 +1280,7 @@ var CodeView = class CodeView {
 		const rect = this.getScrollTargetRect(target);
 		if (rect == null) return;
 		const offset = target.offset ?? 0;
-		const targetTop = this.getLayout().paddingTop + rect.top;
+		const targetTop = this.getItemTopOffset() + rect.top;
 		const targetBottom = targetTop + rect.height;
 		const currentTop = this.getScrollTop();
 		const visibleTop = currentTop + (target.type === "line" || target.type === "range" ? this.getStickyHeaderOffset() : 0);
@@ -1067,7 +1332,7 @@ var CodeView = class CodeView {
 	* and stickyOffset if necessary
 	*/
 	resolveAlignedScrollPosition(targetTop, targetHeight, align, offset = 0, stickyOffset = 0) {
-		targetTop += this.getLayout().paddingTop;
+		targetTop += this.getItemTopOffset();
 		const viewportHeight = this.getHeight();
 		if (align === "center" && targetHeight + offset < viewportHeight) return targetTop - (viewportHeight - targetHeight) / 2 + offset;
 		if (align === "end") return targetTop - (viewportHeight - targetHeight) + offset;
@@ -1171,6 +1436,7 @@ var CodeView = class CodeView {
 	}
 	computeRenderRangeAndEmit = (timestamp = performance.now()) => {
 		if (CodeView.__STOP || this.container == null) return;
+		if (!this.isReady()) return;
 		const viewportHeight = this.getHeight();
 		const initialScrollTop = this.getScrollTop();
 		let scrollTopAfterLayout = initialScrollTop;
@@ -1198,7 +1464,7 @@ var CodeView = class CodeView {
 		const fitPerfectly = !computeScrollCorrection && (this.renderState.scrollTop === -1 || Math.abs(targetScrollTop - this.renderState.scrollTop) > viewportHeight + this.config.overscrollSize * 2);
 		if (fitPerfectly) scrollAnchor = void 0;
 		this.windowSpecs = createWindowFromScrollPosition({
-			scrollTop: targetScrollTop,
+			scrollTop: targetScrollTop - this.header.height,
 			height: viewportHeight,
 			scrollHeight: this.getScrollHeight(),
 			fitPerfectly,
@@ -1217,6 +1483,7 @@ var CodeView = class CodeView {
 			if (item == null) throw new Error(`CodeView.computeRenderRangeAndEmit: No item at index: ${index}`);
 			if (!(item.top > top - item.height && item.top <= bottom)) this.releaseRenderedItem(item);
 		}
+		const hostsChanged = this.reconcileHeaderFooterHosts();
 		let prevElement;
 		const updatedItems = /* @__PURE__ */ new Set();
 		const startingIndex = this.findFirstVisibleIndex(top);
@@ -1242,10 +1509,13 @@ var CodeView = class CodeView {
 				}
 				prevElement = item.element;
 			}
+			if (item.item.edit === true) this.attachItemEditor(item);
 		}
 		this.renderState.firstIndex = startingIndex <= lastRenderedIndex ? startingIndex : -1;
 		this.renderState.lastIndex = lastRenderedIndex;
 		this.flushSlotCoordinator();
+		this.flushManagers(updatedItems);
+		if (hostsChanged) this.measureMountedHosts();
 		this.reconcileRenderedItems(updatedItems);
 		this.syncContainerHeight();
 		this.updateStickyPositioning();
@@ -1270,7 +1540,9 @@ var CodeView = class CodeView {
 			this.scrollAnimation = void 0;
 		}
 		this.renderState.scrollTop = roundToDevicePixel(syncedScrollTop);
-		this.flushManagers(updatedItems);
+		this.updateStickyPositioning();
+		this.validateStickyContainerHeight();
+		this.fixContainerFocus();
 		if (fitPerfectly || this.scrollAnimation != null) this.render();
 	};
 	flushManagers(updatedItems) {
@@ -1382,6 +1654,25 @@ var CodeView = class CodeView {
 					this.scrollAnimation = void 0;
 				}
 			}
+		} else if (entry.target === this.header.element || entry.target === this.footer.element) {
+			const host = entry.target === this.header.element ? this.header : this.footer;
+			const blockSize = entry.borderBoxSize[0].blockSize;
+			if (blockSize !== host.height) {
+				const currentScrollTop = this.getScrollTop();
+				const anchor = this.getScrollAnchor(currentScrollTop);
+				this.setHostHeight(host, blockSize);
+				const anchoredScrollTop = anchor != null ? this.resolveAnchoredScrollTop(anchor) : void 0;
+				if (anchoredScrollTop != null) {
+					const resizeAnchorDelta = anchoredScrollTop - currentScrollTop;
+					this.applyScrollFix(anchoredScrollTop, currentScrollTop, this.windowSpecs);
+					if (this.scrollAnimation != null) this.scrollAnimation.position += resizeAnchorDelta;
+				}
+				if (this.pendingScrollTarget != null && this.isPendingTargetSettled(this.pendingScrollTarget)) {
+					this.pendingScrollTarget = void 0;
+					this.scrollAnimation = void 0;
+				}
+				this.render();
+			}
 		} else {
 			this.scrollDirty = true;
 			this.heightDirty = true;
@@ -1404,6 +1695,7 @@ var CodeView = class CodeView {
 	*/
 	getScrollAnchor(scrollTop) {
 		if (this.pendingLayoutAnchor != null) return this.pendingLayoutAnchor;
+		if (scrollTop <= 0) return;
 		const { firstIndex, lastIndex, stickyTop, stickyBottom } = this.renderState;
 		if (firstIndex === -1 || lastIndex === -1) return;
 		const viewportHeight = this.getHeight();
@@ -1411,7 +1703,7 @@ var CodeView = class CodeView {
 		for (let index = firstIndex; index <= lastIndex; index++) {
 			const item = this.items[index];
 			if (item == null) continue;
-			const absoluteItemTop = this.getLayout().paddingTop + item.top;
+			const absoluteItemTop = this.getItemTopOffset() + item.top;
 			if (absoluteItemTop + item.height <= scrollTop) continue;
 			if (absoluteItemTop >= scrollTop + viewportHeight) break;
 			if (absoluteItemTop >= scrollTop) return {
@@ -1443,14 +1735,14 @@ var CodeView = class CodeView {
 	resolveAnchoredScrollTop(anchor) {
 		const item = this.idToItem.get(anchor.id);
 		if (item == null) return;
-		const { paddingTop } = this.getLayout();
+		const itemTopOffset = this.getItemTopOffset();
 		if (anchor.type === "item") {
-			const absoluteItemTop = paddingTop + item.top;
+			const absoluteItemTop = itemTopOffset + item.top;
 			return this.clampScrollTop(absoluteItemTop - anchor.viewportOffset);
 		}
 		const linePosition = item.type === "diff" ? item.instance.getLinePosition(anchor.lineNumber, anchor.side) : item.instance.getLinePosition(anchor.lineNumber);
 		if (linePosition == null) return;
-		const absoluteLineTop = paddingTop + item.top + linePosition.top;
+		const absoluteLineTop = itemTopOffset + item.top + linePosition.top;
 		return this.clampScrollTop(absoluteLineTop - anchor.viewportOffset);
 	}
 	/**
@@ -1507,11 +1799,10 @@ var CodeView = class CodeView {
 	}
 	flushSlotCoordinator() {
 		if (this.slotCoordinator == null) return;
-		const { onSnapshotChange } = this.slotCoordinator;
-		const slotSnapshot = getSlotSnapshot(this.getRenderedItems(), this.slotCoordinator);
-		if (areSlotSnapshotsEqual(this.slotSnapshot, slotSnapshot)) return;
+		const slotSnapshot = this.buildSlotSnapshot(this.slotCoordinator);
+		if (areManagedSnapshotsEqual(this.slotSnapshot, slotSnapshot)) return;
 		this.slotSnapshot = slotSnapshot;
-		onSnapshotChange(slotSnapshot);
+		this.slotCoordinator.onSnapshotChange(slotSnapshot);
 	}
 	notifyScroll() {
 		if (this.scrollListeners.size === 0) return;
@@ -1580,8 +1871,11 @@ var CodeView = class CodeView {
 			const item = this.items[index];
 			if (item == null) throw new Error("CodeView.recomputeLayout: invalid item index");
 			item.top = runningTop;
-			if (item.type === "diff") item.height = item.instance.prepareCodeViewItem(item.item.fileDiff, runningTop, reset);
-			else item.height = item.instance.prepareCodeViewItem(item.item.file, runningTop, reset);
+			if (item.type === "diff") {
+				const fileDiff = item.instance.consumeCodeViewLayoutChanges(item.item.fileDiff);
+				if (fileDiff != null) Object.assign(item.item.fileDiff, fileDiff);
+				item.height = item.instance.prepareCodeViewItem(item.item.fileDiff, runningTop, reset, item.item.annotations ?? []);
+			} else item.height = item.instance.prepareCodeViewItem(item.item.file, runningTop, reset, item.item.annotations ?? []);
 			runningTop += item.height;
 			if (index < this.items.length - 1) runningTop += layout.gap;
 		}
@@ -1602,21 +1896,21 @@ var CodeView = class CodeView {
 };
 function prepareItemInstance(item) {
 	item.instance.cleanUp(true);
-	if (item.type === "diff") return item.instance.prepareCodeViewItem(item.item.fileDiff, item.top);
-	else return item.instance.prepareCodeViewItem(item.item.file, item.top);
+	if (item.type === "diff") return item.instance.prepareCodeViewItem(item.item.fileDiff, item.top, void 0, item.item.annotations ?? []);
+	else return item.instance.prepareCodeViewItem(item.item.file, item.top, void 0, item.item.annotations ?? []);
 }
 function shouldClearPool(previousOptions, nextOptions) {
 	return !areThemesEqual(previousOptions.theme ?? DEFAULT_THEMES, nextOptions.theme ?? DEFAULT_THEMES) || (previousOptions.themeType ?? "system") !== (nextOptions.themeType ?? "system") || previousOptions.unsafeCSS !== nextOptions.unsafeCSS;
 }
 function hasItemLayoutOptionChanged(previousOptions, nextOptions) {
-	return (previousOptions.overflow ?? "scroll") !== (nextOptions.overflow ?? "scroll") || (previousOptions.disableLineNumbers ?? false) !== (nextOptions.disableLineNumbers ?? false) || (previousOptions.disableFileHeader ?? false) !== (nextOptions.disableFileHeader ?? false) || previousOptions.unsafeCSS !== nextOptions.unsafeCSS || (previousOptions.diffStyle ?? "split") !== (nextOptions.diffStyle ?? "split") || (previousOptions.diffIndicators ?? "bars") !== (nextOptions.diffIndicators ?? "bars") || (previousOptions.hunkSeparators ?? "line-info") !== (nextOptions.hunkSeparators ?? "line-info") || (previousOptions.expandUnchanged ?? false) !== (nextOptions.expandUnchanged ?? false) || (previousOptions.collapsedContextThreshold ?? DEFAULT_COLLAPSED_CONTEXT_THRESHOLD) !== (nextOptions.collapsedContextThreshold ?? DEFAULT_COLLAPSED_CONTEXT_THRESHOLD);
+	return (previousOptions.overflow ?? "scroll") !== (nextOptions.overflow ?? "scroll") || (previousOptions.disableLineNumbers ?? false) !== (nextOptions.disableLineNumbers ?? false) || (previousOptions.disableFileHeader ?? false) !== (nextOptions.disableFileHeader ?? false) || previousOptions.unsafeCSS !== nextOptions.unsafeCSS || (previousOptions.diffStyle ?? "split") !== (nextOptions.diffStyle ?? "split") || (previousOptions.diffIndicators ?? "bars") !== (nextOptions.diffIndicators ?? "bars") || (previousOptions.hunkSeparators ?? "line-info") !== (nextOptions.hunkSeparators ?? "line-info") || (previousOptions.expandUnchanged ?? false) !== (nextOptions.expandUnchanged ?? false) || (previousOptions.collapsedContextThreshold ?? 1) !== (nextOptions.collapsedContextThreshold ?? 1);
 }
 function hasCodeViewDiffEstimateOptionChanged(previousOptions, nextOptions) {
-	return (previousOptions.disableFileHeader ?? false) !== (nextOptions.disableFileHeader ?? false) || (previousOptions.hunkSeparators ?? "line-info") !== (nextOptions.hunkSeparators ?? "line-info") || (previousOptions.expandUnchanged ?? false) !== (nextOptions.expandUnchanged ?? false) || (previousOptions.collapsedContextThreshold ?? DEFAULT_COLLAPSED_CONTEXT_THRESHOLD) !== (nextOptions.collapsedContextThreshold ?? DEFAULT_COLLAPSED_CONTEXT_THRESHOLD);
+	return (previousOptions.disableFileHeader ?? false) !== (nextOptions.disableFileHeader ?? false) || (previousOptions.hunkSeparators ?? "line-info") !== (nextOptions.hunkSeparators ?? "line-info") || (previousOptions.expandUnchanged ?? false) !== (nextOptions.expandUnchanged ?? false) || (previousOptions.collapsedContextThreshold ?? 1) !== (nextOptions.collapsedContextThreshold ?? 1);
 }
 function isPooledShadowChild(child) {
 	if (child instanceof SVGElement) return true;
-	return isStyleNode(child) && (child.hasAttribute(CORE_CSS_ATTRIBUTE) || child.hasAttribute(THEME_CSS_ATTRIBUTE) || child.hasAttribute(UNSAFE_CSS_ATTRIBUTE));
+	return isStyleNode(child) && (child.hasAttribute("data-core-css") || child.hasAttribute("data-theme-css") || child.hasAttribute("data-unsafe-css"));
 }
 function formatSelectedLineRange(range) {
 	const start = formatSelectedLinePoint(range.start, range.side);
@@ -1633,14 +1927,14 @@ function renderItem(item, fileContainer, forceRender = false) {
 		fileContainer,
 		fileDiff: item.item.fileDiff,
 		forceRender,
-		lineAnnotations: item.item.annotations
+		lineAnnotations: item.item.annotations ?? []
 	});
 	else return item.instance.render({
 		deferManagers: true,
 		fileContainer,
 		file: item.item.file,
 		forceRender,
-		lineAnnotations: item.item.annotations
+		lineAnnotations: item.item.annotations ?? []
 	});
 }
 /**
@@ -1659,7 +1953,7 @@ function syncRenderedItemOrder(container, element, prevElement) {
 function hasAnnotations(item) {
 	return (item.annotations?.length ?? 0) > 0;
 }
-function getSlotSnapshot(renderedItems, { hasHeaderRenderers, hasAnnotationRenderer, hasGutterRenderer }) {
+function getSlotItems(renderedItems, { hasHeaderRenderers, hasAnnotationRenderer, hasGutterRenderer }) {
 	if (renderedItems.length === 0) return;
 	if (hasHeaderRenderers || hasGutterRenderer) return renderedItems;
 	if (!hasAnnotationRenderer) return;
@@ -1667,17 +1961,7 @@ function getSlotSnapshot(renderedItems, { hasHeaderRenderers, hasAnnotationRende
 	for (const renderedItem of renderedItems) if (hasAnnotations(renderedItem.item)) slotSnapshot.push(renderedItem);
 	return slotSnapshot.length > 0 ? slotSnapshot : void 0;
 }
-function areSlotSnapshotsEqual(previous, next) {
-	if (previous == null || next == null) return previous === next;
-	if (previous.length !== next.length) return false;
-	for (let index = 0; index < previous.length; index++) {
-		const previousItem = previous[index];
-		const nextItem = next[index];
-		if (previousItem == null || nextItem == null || previousItem.id !== nextItem.id || previousItem.type !== nextItem.type || previousItem.element !== nextItem.element || previousItem.version !== nextItem.version) return false;
-	}
-	return true;
-}
-
 //#endregion
-export { CodeView };
+export { CODE_VIEW_DIFF_OPTION_KEYS, CODE_VIEW_FILE_OPTION_KEYS, CodeView };
+
 //# sourceMappingURL=CodeView.js.map