@pierre/diffs 1.3.0-beta.6 → 1.3.0-beta.8

package/dist/components/CodeView.js

@@ -1,9 +1,11 @@
 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 { isStyleNode } from "../utils/isStyleNode.js";
 import { prefersReducedMotion } from "../utils/prefersReducedMotion.js";
@@ -28,6 +30,7 @@ const CODE_VIEW_DIFF_OPTION_KEYS = [
 	"diffIndicators",
 	"disableBackground",
 	"expandUnchanged",
+	"loadDiffFiles",
 	"collapsedContextThreshold",
 	"lineDiffType",
 	"maxLineDiffLength",
@@ -61,6 +64,13 @@ const CODE_VIEW_FILE_OPTION_KEYS = [
 	"controlledSelection",
 	"disableErrorHandling"
 ];
+const CODE_VIEW_EDIT_FORCED_OPTION_KEYS = /* @__PURE__ */ new Set([
+	"useTokenTransformer",
+	"enableGutterUtility",
+	"enableLineSelection",
+	"lineHoverHighlight",
+	"expandUnchanged"
+]);
 const CODE_VIEW_SHARED_CALLBACK_KEYS = [
 	"renderCustomHeader",
 	"renderHeaderPrefix",
@@ -130,6 +140,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;
@@ -171,12 +183,23 @@ var CodeView = class CodeView {
 	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;
@@ -196,6 +219,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,
@@ -298,6 +324,43 @@ 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);
@@ -337,8 +400,12 @@ var CodeView = class CodeView {
 		};
 	}
 	reset() {
+		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();
@@ -381,6 +448,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;
 	}
@@ -415,6 +490,7 @@ var CodeView = class CodeView {
 		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();
@@ -507,6 +583,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) {
@@ -518,6 +602,7 @@ var CodeView = class CodeView {
 		this.scrollDirty = true;
 		this.render();
 		this.syncSelection();
+		this.syncItemEditors();
 		return true;
 	}
 	updateItemId(oldId, newId) {
@@ -542,6 +627,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();
@@ -549,17 +641,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.
@@ -621,7 +721,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;
@@ -634,6 +736,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");
@@ -646,6 +767,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 [];
@@ -679,7 +806,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);
@@ -695,7 +833,7 @@ 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;
@@ -742,6 +880,75 @@ 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);
+		}
+		if (this.selectedLines?.id === id) this.applySelectedLines(null, { notify: false });
+		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 { 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;
@@ -755,19 +962,42 @@ 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, "enableGutterUtility", (receiver) => this.isReceiverEdited(receiver, "file") ? false : this.options.enableGutterUtility);
+		defineItemOption(prototype, "enableLineSelection", (receiver) => this.isReceiverEdited(receiver, "file") ? false : this.options.enableLineSelection);
+		defineItemOption(prototype, "lineHoverHighlight", (receiver) => this.isReceiverEdited(receiver, "file") ? "disabled" : this.options.lineHoverHighlight);
 		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, "enableGutterUtility", (receiver) => this.isReceiverEdited(receiver, "diff") ? false : this.options.enableGutterUtility);
+		defineItemOption(prototype, "enableLineSelection", (receiver) => this.isReceiverEdited(receiver, "diff") ? false : this.options.enableLineSelection);
+		defineItemOption(prototype, "lineHoverHighlight", (receiver) => this.isReceiverEdited(receiver, "diff") ? "disabled" : this.options.lineHoverHighlight);
+		defineItemOption(prototype, "expandUnchanged", (receiver) => this.isReceiverEdited(receiver, "diff") ? true : this.options.expandUnchanged);
 		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;
@@ -783,7 +1013,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);
@@ -794,6 +1026,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) {
@@ -812,6 +1045,9 @@ var CodeView = class CodeView {
 		defineItemOption(options, key, (receiver) => {
 			if (this.options.enableLineSelection !== true) return;
 			const state = getItemOptionsState(receiver);
+			if (state == null) return;
+			const item = this.getItemOptions(state, mode);
+			if (item != null && this.isItemInEditMode(item)) return;
 			const callbackCache = state.callbackCache ??= {};
 			let wrapped = callbackCache[key];
 			if (wrapped == null) {
@@ -939,7 +1175,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());
@@ -1051,7 +1287,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);
@@ -1103,7 +1339,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;
@@ -1207,6 +1443,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;
@@ -1234,7 +1471,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,
@@ -1253,6 +1490,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);
@@ -1278,10 +1516,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();
@@ -1306,7 +1547,7 @@ 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();
@@ -1420,6 +1661,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;
@@ -1442,6 +1702,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();
@@ -1449,7 +1710,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 {
@@ -1481,14 +1742,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);
 	}
 	/**
@@ -1545,11 +1806,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;
@@ -1618,8 +1878,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, item.item.annotations ?? []);
-			else item.height = item.instance.prepareCodeViewItem(item.item.file, runningTop, reset, item.item.annotations ?? []);
+			if (item.type === "diff") {
+				const fileDiff = item.instance.consumeCodeViewLayoutChanges(item.item.fileDiff);
+				if (fileDiff != null) 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;
 		}
@@ -1697,7 +1960,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;
@@ -1705,17 +1968,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