@swifttui/web 0.1.0 → 0.1.1

package/dist/src/PointerGeometry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointerGeometry.js","names":[],"sources":["../../src/PointerGeometry.ts"],"sourcesContent":["import type {\n  WebHostScrollRegion,\n} from \"./WebHostSurfaceTransport.ts\";\nimport type { CellLocation } from \"./InputEventEncoder.ts\";\n\n/**\n * The cell-grid geometry a pointer hit-test needs: the surface's bounding\n * client rect (the canvas's, falling back to the terminal mount's), the cell\n * dimensions, and the grid extent in cells. The host snapshots this per event.\n */\nexport interface PointerGeometryMetrics {\n  rect?: { left: number; top: number } | null;\n  cellWidth: number;\n  cellHeight: number;\n  columns: number;\n  rows: number;\n}\n\n/**\n * Converts a pointer event to fractional cell coordinates, clamped to the\n * grid. Returns `undefined` when the pointer is outside the cell grid (in the\n * sub-cell margin/gutter), so the host can leave the event unhandled.\n */\nexport function cellLocationForEvent(\n  event: MouseEvent,\n  metrics: PointerGeometryMetrics\n): CellLocation | undefined {\n  const location = rawCellLocationForEvent(event, metrics);\n  if (!location) {\n    return undefined;\n  }\n\n  const cellX = Math.floor(location.x);\n  const cellY = Math.floor(location.y);\n  if (cellX < 0 || cellY < 0 || cellX >= metrics.columns || cellY >= metrics.rows) {\n    return undefined;\n  }\n  return location;\n}\n\n/**\n * Converts a pointer event to fractional cell coordinates *without* clamping to\n * the grid. Used while a pointer is captured (drag) so the host keeps tracking\n * the gesture even when it strays outside the surface bounds.\n */\nexport function rawCellLocationForEvent(\n  event: MouseEvent,\n  metrics: PointerGeometryMetrics\n): CellLocation | undefined {\n  const rect = metrics.rect;\n  if (!rect) {\n    return undefined;\n  }\n\n  const x = (event.clientX - rect.left) / metrics.cellWidth;\n  const y = (event.clientY - rect.top) / metrics.cellHeight;\n  return { x, y };\n}\n\n/**\n * Whether any scrollable region under `location` can still scroll in the\n * wheel's direction. Mirrors the Swift host's scroll hit-test: a region\n * qualifies when its viewport contains the cell AND it has remaining headroom\n * in the delta's direction. Used by \"chain\" wheel mode to decide capture vs.\n * fall-through. With no published `scrollRegions`, nothing can scroll, so the\n * wheel chains to the page (a scene with no ScrollView stays fully passive).\n */\nexport function wheelTargetCanScroll(\n  regions: readonly WebHostScrollRegion[] | undefined,\n  location: CellLocation,\n  deltaX: number,\n  deltaY: number\n): boolean {\n  if (!regions || regions.length === 0) {\n    return false;\n  }\n\n  const cellX = Math.floor(location.x);\n  const cellY = Math.floor(location.y);\n  // Any region under the pointer that can move in this direction qualifies —\n  // this is what lets an outer ScrollView take over when an inner one is at\n  // its edge (nested scroll), and chains to the page only when none can.\n  for (const region of regions) {\n    const [rx, ry, rw, rh] = region.rect;\n    if (cellX < rx || cellY < ry || cellX >= rx + rw || cellY >= ry + rh) {\n      continue;\n    }\n    if (regionCanScrollInDirection(region, deltaX, deltaY)) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Whether a published scroll region has remaining headroom in the wheel's\n * direction, recomputing the per-direction extent from offset/content/viewport.\n * Mirrors SwiftTUI's clamp (`min(max(0, offset), max(0, content - viewport))`)\n * so the host and the app agree on \"at edge\". Wheel sign convention matches the\n * app: `deltaY > 0` scrolls down (offset grows toward the content bottom).\n * Diagonal wheels qualify if either axis has headroom.\n */\nfunction regionCanScrollInDirection(\n  region: WebHostScrollRegion,\n  deltaX: number,\n  deltaY: number\n): boolean {\n  const [, , viewportWidth, viewportHeight] = region.rect;\n  const [offsetX, offsetY] = region.offset;\n  const [contentWidth, contentHeight] = region.content;\n  const maxX = Math.max(0, contentWidth - viewportWidth);\n  const maxY = Math.max(0, contentHeight - viewportHeight);\n  const clampedX = Math.min(Math.max(0, offsetX), maxX);\n  const clampedY = Math.min(Math.max(0, offsetY), maxY);\n\n  if (deltaY > 0 && clampedY < maxY) {\n    return true;\n  }\n  if (deltaY < 0 && clampedY > 0) {\n    return true;\n  }\n  if (deltaX > 0 && clampedX < maxX) {\n    return true;\n  }\n  if (deltaX < 0 && clampedX > 0) {\n    return true;\n  }\n  return false;\n}\n"],"mappings":";;;;;;AAuBA,SAAgB,qBACd,OACA,SAC0B;CAC1B,MAAM,WAAW,wBAAwB,OAAO,OAAO;CACvD,IAAI,CAAC,UACH;CAGF,MAAM,QAAQ,KAAK,MAAM,SAAS,CAAC;CACnC,MAAM,QAAQ,KAAK,MAAM,SAAS,CAAC;CACnC,IAAI,QAAQ,KAAK,QAAQ,KAAK,SAAS,QAAQ,WAAW,SAAS,QAAQ,MACzE;CAEF,OAAO;AACT;;;;;;AAOA,SAAgB,wBACd,OACA,SAC0B;CAC1B,MAAM,OAAO,QAAQ;CACrB,IAAI,CAAC,MACH;CAKF,OAAO;EAAE,IAFE,MAAM,UAAU,KAAK,QAAQ,QAAQ;EAEpC,IADD,MAAM,UAAU,KAAK,OAAO,QAAQ;CACjC;AAChB;;;;;;;;;AAUA,SAAgB,qBACd,SACA,UACA,QACA,QACS;CACT,IAAI,CAAC,WAAW,QAAQ,WAAW,GACjC,OAAO;CAGT,MAAM,QAAQ,KAAK,MAAM,SAAS,CAAC;CACnC,MAAM,QAAQ,KAAK,MAAM,SAAS,CAAC;CAInC,KAAK,MAAM,UAAU,SAAS;EAC5B,MAAM,CAAC,IAAI,IAAI,IAAI,MAAM,OAAO;EAChC,IAAI,QAAQ,MAAM,QAAQ,MAAM,SAAS,KAAK,MAAM,SAAS,KAAK,IAChE;EAEF,IAAI,2BAA2B,QAAQ,QAAQ,MAAM,GACnD,OAAO;CAEX;CACA,OAAO;AACT;;;;;;;;;AAUA,SAAS,2BACP,QACA,QACA,QACS;CACT,MAAM,KAAK,eAAe,kBAAkB,OAAO;CACnD,MAAM,CAAC,SAAS,WAAW,OAAO;CAClC,MAAM,CAAC,cAAc,iBAAiB,OAAO;CAC7C,MAAM,OAAO,KAAK,IAAI,GAAG,eAAe,aAAa;CACrD,MAAM,OAAO,KAAK,IAAI,GAAG,gBAAgB,cAAc;CACvD,MAAM,WAAW,KAAK,IAAI,KAAK,IAAI,GAAG,OAAO,GAAG,IAAI;CACpD,MAAM,WAAW,KAAK,IAAI,KAAK,IAAI,GAAG,OAAO,GAAG,IAAI;CAEpD,IAAI,SAAS,KAAK,WAAW,MAC3B,OAAO;CAET,IAAI,SAAS,KAAK,WAAW,GAC3B,OAAO;CAET,IAAI,SAAS,KAAK,WAAW,MAC3B,OAAO;CAET,IAAI,SAAS,KAAK,WAAW,GAC3B,OAAO;CAET,OAAO;AACT"}

package/dist/src/WebHostSceneRuntime.d.ts

@@ -41,6 +41,13 @@ interface WebHostSceneRuntimeOptions {
   captureWheelInput?: boolean;
 }
 type WheelMode = "capture" | "chain" | "passive";
+/**
+ * Coordinates a single SwiftTUI scene's browser presentation: it owns the DOM
+ * mount, canvas, accessibility tree, and bridge wiring, and delegates the heavy
+ * responsibilities to focused collaborators — {@link CanvasSurfacePainter} for
+ * canvas drawing, {@link InputEventEncoder} for wire-message encoding, and the
+ * {@link PointerGeometry} helpers for pixel→cell hit-testing and wheel chaining.
+ */
 declare class WebHostSceneRuntime {
   readonly descriptor: WebHostSceneDescriptor;
   readonly element: HTMLElement;
@@ -50,7 +57,8 @@ declare class WebHostSceneRuntime {
   private readonly onFrameDiagnostic?;
   private readonly synchronizeAccessibilityFocus;
   private readonly wheelMode;
-  private readonly imageCache;
+  private readonly painter;
+  private readonly inputEncoder;
   private currentStyle;
   private canvas?;
   private accessibilityTree?;
@@ -87,26 +95,9 @@ declare class WebHostSceneRuntime {
   private resizeCanvas;
   private measureCells;
   private draw;
-  private drawRows;
-  private drawRow;
   private syncAccessibilityTree;
-  private drawImages;
-  private drawImage;
-  private cachedImage;
-  private drawCell;
-  private dirtyRegionForDamage;
-  private cellRect;
-  private drawTextLine;
-  private fontForStyle;
-  /**
-   * Whether any scrollable region under `location` can still scroll in the
-   * wheel's direction. Mirrors the Swift host's scroll hit-test: a region
-   * qualifies when its viewport contains the cell AND it has remaining headroom
-   * in the delta's direction. Used by "chain" wheel mode to decide capture vs.
-   * fall-through. With no published `scrollRegions`, nothing can scroll, so the
-   * wheel chains to the page (a scene with no ScrollView stays fully passive).
-   */
-  private wheelTargetCanScroll;
+  private surfaceMetrics;
+  private pointerMetrics;
   private cellLocation;
   private rawCellLocation;
 }

package/dist/src/WebHostSceneRuntime.js

@@ -1,6 +1,7 @@
 import { applyWebHostTerminalStyle, normalizeWebHostTerminalStyle, webTUITerminalBackgroundColor } from "./WebHostTerminalStyle.js";
-import { encodeKeyInputMessage, encodeMouseInputMessage, encodePasteInputMessage } from "./WebHostSurfaceTransport.js";
-import { canRenderBoxDrawing, drawBoxDrawing } from "./BoxDrawingRenderer.js";
+import { CanvasSurfacePainter, fontForStyle } from "./CanvasSurfacePainter.js";
+import { InputEventEncoder } from "./InputEventEncoder.js";
+import { cellLocationForEvent, rawCellLocationForEvent, wheelTargetCanScroll } from "./PointerGeometry.js";
 import { AccessibilityTreeMounter } from "./AccessibilityTree.js";
 //#region src/WebHostSceneRuntime.ts
 /**
@@ -13,6 +14,13 @@ function legacyWheelMode(captureWheelInput) {
 	if (captureWheelInput === void 0) return "chain";
 	return captureWheelInput ? "capture" : "passive";
 }
+/**
+* Coordinates a single SwiftTUI scene's browser presentation: it owns the DOM
+* mount, canvas, accessibility tree, and bridge wiring, and delegates the heavy
+* responsibilities to focused collaborators — {@link CanvasSurfacePainter} for
+* canvas drawing, {@link InputEventEncoder} for wire-message encoding, and the
+* {@link PointerGeometry} helpers for pixel→cell hit-testing and wheel chaining.
+*/
 var WebHostSceneRuntime = class {
 	descriptor;
 	element;
@@ -22,7 +30,8 @@ var WebHostSceneRuntime = class {
 	onFrameDiagnostic;
 	synchronizeAccessibilityFocus;
 	wheelMode;
-	imageCache = /* @__PURE__ */ new Map();
+	painter = new CanvasSurfacePainter();
+	inputEncoder = new InputEventEncoder();
 	currentStyle;
 	canvas;
 	accessibilityTree;
@@ -66,6 +75,7 @@ var WebHostSceneRuntime = class {
 		canvas.className = "webhost-scene__surface";
 		canvas.setAttribute("aria-hidden", "true");
 		this.canvas = canvas;
+		this.painter.attach(canvas, () => this.draw());
 		this.accessibilityTree = new AccessibilityTreeMounter();
 		this.terminalMount.replaceChildren(canvas, this.accessibilityTree.element, this.accessibilityTree.announcerElement);
 		this.installInputHandlers();
@@ -181,35 +191,26 @@ var WebHostSceneRuntime = class {
 	installInputHandlers() {
 		const handleKeyDown = (event) => {
 			if (event.metaKey || event.isComposing) return;
-			const key = keyInputFromKeyboardEvent(event);
-			if (!key) return;
-			this.onInput(encodeKeyInputMessage({
-				...key,
-				modifiers: modifierMask(event)
-			}));
+			const message = this.inputEncoder.encodeKey(event);
+			if (!message) return;
+			this.onInput(message);
 			event.preventDefault();
 		};
 		const handlePaste = (event) => {
 			const text = event.clipboardData?.getData("text/plain") ?? "";
 			if (!text) return;
-			this.onInput(encodePasteInputMessage(text));
+			this.onInput(this.inputEncoder.encodePaste(text));
 			event.preventDefault();
 		};
 		const handlePointerDown = (event) => {
 			const location = this.cellLocation(event);
 			if (!location) return;
-			const button = pointerButton(event.button);
+			const button = this.inputEncoder.pointerButton(event.button);
 			this.activePointerButton = button;
 			this.hasCapturedPointer = true;
 			this.terminalMount.focus?.({ preventScroll: true });
 			this.terminalMount.setPointerCapture?.(event.pointerId);
-			this.onInput(encodeMouseInputMessage({
-				kind: "down",
-				x: location.x,
-				y: location.y,
-				button,
-				modifiers: modifierMask(event)
-			}));
+			this.onInput(this.inputEncoder.encodePointerDown(location, button, event));
 			event.preventDefault();
 		};
 		const handlePointerUp = (event) => {
@@ -217,39 +218,21 @@ var WebHostSceneRuntime = class {
 			this.terminalMount.releasePointerCapture?.(event.pointerId);
 			this.hasCapturedPointer = false;
 			if (!location) return;
-			this.onInput(encodeMouseInputMessage({
-				kind: "up",
-				x: location.x,
-				y: location.y,
-				button: pointerButton(event.button) ?? this.activePointerButton,
-				modifiers: modifierMask(event)
-			}));
+			const button = this.inputEncoder.pointerButton(event.button) ?? this.activePointerButton;
+			this.onInput(this.inputEncoder.encodePointerUp(location, button, event));
 			event.preventDefault();
 		};
 		const handlePointerMove = (event) => {
 			const location = event.buttons && this.hasCapturedPointer ? this.rawCellLocation(event) : this.cellLocation(event);
 			if (!location) return;
-			this.onInput(encodeMouseInputMessage({
-				kind: event.buttons ? "dragged" : "moved",
-				x: location.x,
-				y: location.y,
-				button: this.activePointerButton,
-				modifiers: modifierMask(event)
-			}));
+			this.onInput(this.inputEncoder.encodePointerMove(location, this.activePointerButton, event));
 		};
 		const handleWheel = (event) => {
 			if (this.wheelMode === "passive") return;
 			const location = this.cellLocation(event);
 			if (!location) return;
-			if (this.wheelMode === "chain" && !this.wheelTargetCanScroll(location, event.deltaX, event.deltaY)) return;
-			this.onInput(encodeMouseInputMessage({
-				kind: "scrolled",
-				x: location.x,
-				y: location.y,
-				deltaX: normalizedWheelDelta(event.deltaX),
-				deltaY: normalizedWheelDelta(event.deltaY),
-				modifiers: modifierMask(event)
-			}));
+			if (this.wheelMode === "chain" && !wheelTargetCanScroll(this.currentFrame?.scrollRegions, location, event.deltaX, event.deltaY)) return;
+			this.onInput(this.inputEncoder.encodeWheel(location, event));
 			event.preventDefault();
 		};
 		this.terminalMount.addEventListener("keydown", handleKeyDown);
@@ -313,53 +296,12 @@ var WebHostSceneRuntime = class {
 			this.cellHeight = Math.max(1, Math.round(this.currentStyle.fontSize * 1.35));
 			return;
 		}
-		context.font = this.fontForStyle();
+		context.font = fontForStyle(this.currentStyle);
 		this.cellWidth = Math.max(1, Math.ceil(context.measureText("W").width));
 		this.cellHeight = Math.max(1, Math.ceil(this.currentStyle.fontSize * 1.35));
 	}
 	draw(damage) {
-		const canvas = this.canvas;
-		const context = canvas?.getContext("2d");
-		if (!canvas || !context) return;
-		const frame = this.currentFrame;
-		const dirtyRegion = frame ? this.dirtyRegionForDamage(damage, frame) : void 0;
-		if (dirtyRegion?.rects.length === 0) return;
-		const scale = globalThis.window?.devicePixelRatio || 1;
-		context.setTransform(scale, 0, 0, scale, 0, 0);
-		context.textBaseline = "alphabetic";
-		context.fillStyle = webTUITerminalBackgroundColor(this.currentStyle);
-		if (dirtyRegion) for (const rect of dirtyRegion.rects) {
-			context.clearRect(rect.x, rect.y, rect.width, rect.height);
-			context.fillRect(rect.x, rect.y, rect.width, rect.height);
-		}
-		else {
-			context.clearRect(0, 0, canvas.width / scale, canvas.height / scale);
-			context.fillRect(0, 0, this.columns * this.cellWidth, this.rows * this.cellHeight);
-		}
-		if (!frame) return;
-		this.drawRows(context, frame, dirtyRegion);
-		this.drawImages(context, frame.images ?? [], dirtyRegion);
-	}
-	drawRows(context, frame, dirtyRegion) {
-		if (dirtyRegion) {
-			for (const [y, ranges] of dirtyRegion.rows) {
-				const row = frame.rows[y] ?? [];
-				this.drawRow(context, frame, row, y, ranges);
-			}
-			return;
-		}
-		for (let y = 0; y < frame.rows.length; y += 1) {
-			const row = frame.rows[y] ?? [];
-			this.drawRow(context, frame, row, y);
-		}
-	}
-	drawRow(context, frame, row, y, ranges) {
-		for (const cell of row) {
-			const [x, text, span, styleIndex] = cell;
-			if (ranges !== void 0 && !cellIntersectsRanges(x, span, ranges)) continue;
-			const style = frame.styles[styleIndex] ?? void 0;
-			this.drawCell(context, x, y, text, span, style);
-		}
+		this.painter.paint(this.surfaceMetrics(), this.currentFrame, damage);
 	}
 	syncAccessibilityTree() {
 		const tree = this.accessibilityTree;
@@ -369,292 +311,31 @@ var WebHostSceneRuntime = class {
 			cellHeight: this.cellHeight
 		}, this.currentFrame.accessibilityAnnouncements ?? [], { synchronizeFocus: this.synchronizeAccessibilityFocus });
 	}
-	drawImages(context, images, dirtyRegion) {
-		for (const image of images) this.drawImage(context, image, dirtyRegion);
-	}
-	drawImage(context, image, dirtyRegion) {
-		const decodedImage = this.cachedImage(image);
-		if (!decodedImage) return;
-		const [boundsX, boundsY, boundsWidth, boundsHeight] = image.bounds;
-		const [clipX, clipY, clipWidth, clipHeight] = image.visibleBounds;
-		if (boundsWidth <= 0 || boundsHeight <= 0 || clipWidth <= 0 || clipHeight <= 0) return;
-		if (dirtyRegion && !dirtyRegionIntersectsCellRect(dirtyRegion, clipX, clipY, clipWidth, clipHeight)) return;
-		context.save();
-		context.beginPath();
-		context.rect(clipX * this.cellWidth, clipY * this.cellHeight, clipWidth * this.cellWidth, clipHeight * this.cellHeight);
-		context.clip();
-		context.drawImage(decodedImage, boundsX * this.cellWidth, boundsY * this.cellHeight, boundsWidth * this.cellWidth, boundsHeight * this.cellHeight);
-		context.restore();
-	}
-	cachedImage(image) {
-		const cached = this.imageCache.get(image.id);
-		if (cached?.image) return cached.image;
-		if (!cached?.promise && image.dataBase64) {
-			const promise = decodeImage(image.dataBase64, image.format);
-			this.imageCache.set(image.id, { promise });
-			promise.then((decodedImage) => {
-				if (this.imageCache.get(image.id)?.promise !== promise) return;
-				this.imageCache.set(image.id, { image: decodedImage });
-				this.draw();
-			}).catch(() => {
-				this.imageCache.delete(image.id);
-			});
-		}
-	}
-	drawCell(context, x, y, text, span, style) {
-		const rectX = x * this.cellWidth;
-		const rectY = y * this.cellHeight;
-		const width = Math.max(1, span) * this.cellWidth;
-		const background = resolvedBackground(style, this.currentStyle);
-		const foreground = resolvedForeground(style, this.currentStyle);
-		const opacity = style?.opacity ?? 1;
-		if (background) {
-			context.globalAlpha = opacity;
-			context.fillStyle = background;
-			context.fillRect(rectX, rectY, width, this.cellHeight);
-		}
-		if (text !== " ") {
-			context.globalAlpha = opacity;
-			context.fillStyle = foreground;
-			context.strokeStyle = foreground;
-			if (!canRenderBoxDrawing(text) || !drawBoxDrawing(context, text, {
-				x: rectX,
-				y: rectY,
-				width,
-				height: this.cellHeight
-			})) {
-				context.font = this.fontForStyle(style);
-				context.fillText(text, rectX, rectY + Math.floor((this.cellHeight + this.currentStyle.fontSize) / 2) - 2);
-			}
-		}
-		this.drawTextLine(context, rectX, rectY, width, style?.underline, "underline", foreground);
-		this.drawTextLine(context, rectX, rectY, width, style?.strikethrough, "strike", foreground);
-		context.globalAlpha = 1;
-	}
-	dirtyRegionForDamage(damage, frame) {
-		if (!damage || damage.requiresFullTextRepaint || damage.requiresFullGraphicsReplay) return;
-		const rects = [];
-		const rows = /* @__PURE__ */ new Map();
-		for (const [row, ranges] of damage.textRows) {
-			if (row < 0 || row >= frame.height) continue;
-			if (ranges.length === 0) {
-				rects.push(this.cellRect(0, row, frame.width));
-				rows.set(row, "full");
-				continue;
-			}
-			const rowRanges = rows.get(row) === "full" ? [] : [...rows.get(row) ?? []];
-			for (const [start, end] of ranges) {
-				const lowerBound = Math.max(0, Math.min(frame.width, Math.floor(start)));
-				const upperBound = Math.max(lowerBound, Math.min(frame.width, Math.ceil(end)));
-				if (lowerBound >= upperBound) continue;
-				rects.push(this.cellRect(lowerBound, row, upperBound - lowerBound));
-				rowRanges.push({
-					start: lowerBound,
-					end: upperBound
-				});
-			}
-			if (rows.get(row) !== "full" && rowRanges.length > 0) rows.set(row, normalizeCellRanges(rowRanges));
-		}
+	surfaceMetrics() {
 		return {
-			rects,
-			rows
+			columns: this.columns,
+			rows: this.rows,
+			cellWidth: this.cellWidth,
+			cellHeight: this.cellHeight,
+			style: this.currentStyle
 		};
 	}
-	cellRect(x, y, span) {
+	pointerMetrics() {
 		return {
-			x: x * this.cellWidth,
-			y: y * this.cellHeight,
-			width: Math.max(1, span) * this.cellWidth,
-			height: this.cellHeight
+			rect: this.canvas?.getBoundingClientRect?.() ?? this.terminalMount.getBoundingClientRect?.(),
+			cellWidth: this.cellWidth,
+			cellHeight: this.cellHeight,
+			columns: this.columns,
+			rows: this.rows
 		};
 	}
-	drawTextLine(context, x, y, width, line, placement, fallbackColor) {
-		if (!line) return;
-		context.strokeStyle = line.color ?? fallbackColor;
-		context.lineWidth = line.pattern === "double" ? 2 : 1;
-		if (line.pattern === "dot") context.setLineDash([1, 3]);
-		else if (line.pattern === "dash") context.setLineDash([4, 3]);
-		else context.setLineDash([]);
-		const lineY = placement === "underline" ? y + this.cellHeight - 2 : y + Math.floor(this.cellHeight / 2);
-		context.beginPath();
-		context.moveTo(x, lineY);
-		context.lineTo(x + width, lineY);
-		context.stroke();
-		context.setLineDash([]);
-	}
-	fontForStyle(style) {
-		const emphasis = style?.em ?? 0;
-		return `${(emphasis & 2) !== 0 ? "italic " : ""}${(emphasis & 1) !== 0 ? "700 " : ""}${this.currentStyle.fontSize}px ${this.currentStyle.fontFamily}`;
-	}
-	/**
-	* Whether any scrollable region under `location` can still scroll in the
-	* wheel's direction. Mirrors the Swift host's scroll hit-test: a region
-	* qualifies when its viewport contains the cell AND it has remaining headroom
-	* in the delta's direction. Used by "chain" wheel mode to decide capture vs.
-	* fall-through. With no published `scrollRegions`, nothing can scroll, so the
-	* wheel chains to the page (a scene with no ScrollView stays fully passive).
-	*/
-	wheelTargetCanScroll(location, deltaX, deltaY) {
-		const regions = this.currentFrame?.scrollRegions;
-		if (!regions || regions.length === 0) return false;
-		const cellX = Math.floor(location.x);
-		const cellY = Math.floor(location.y);
-		for (const region of regions) {
-			const [rx, ry, rw, rh] = region.rect;
-			if (cellX < rx || cellY < ry || cellX >= rx + rw || cellY >= ry + rh) continue;
-			if (regionCanScrollInDirection(region, deltaX, deltaY)) return true;
-		}
-		return false;
-	}
 	cellLocation(event) {
-		const location = this.rawCellLocation(event);
-		if (!location) return;
-		const cellX = Math.floor(location.x);
-		const cellY = Math.floor(location.y);
-		if (cellX < 0 || cellY < 0 || cellX >= this.columns || cellY >= this.rows) return;
-		return location;
+		return cellLocationForEvent(event, this.pointerMetrics());
 	}
 	rawCellLocation(event) {
-		const rect = this.canvas?.getBoundingClientRect?.() ?? this.terminalMount.getBoundingClientRect?.();
-		if (!rect) return;
-		return {
-			x: (event.clientX - rect.left) / this.cellWidth,
-			y: (event.clientY - rect.top) / this.cellHeight
-		};
+		return rawCellLocationForEvent(event, this.pointerMetrics());
 	}
 };
-async function decodeImage(dataBase64, format) {
-	const bytes = decodeBase64Bytes(dataBase64);
-	const blob = new Blob([bytes], { type: `image/${format}` });
-	if (typeof createImageBitmap === "function") return createImageBitmap(blob);
-	return new Promise((resolve, reject) => {
-		const image = new Image();
-		const url = URL.createObjectURL(blob);
-		image.onload = () => {
-			URL.revokeObjectURL(url);
-			resolve(image);
-		};
-		image.onerror = () => {
-			URL.revokeObjectURL(url);
-			reject(/* @__PURE__ */ new Error(`Failed to decode ${format} image`));
-		};
-		image.src = url;
-	});
-}
-function decodeBase64Bytes(value) {
-	if (typeof atob === "function") {
-		const binary = atob(value);
-		const bytes = new Uint8Array(binary.length);
-		for (let index = 0; index < binary.length; index += 1) bytes[index] = binary.charCodeAt(index);
-		return bytes;
-	}
-	return new Uint8Array(Buffer.from(value, "base64"));
-}
-function keyInputFromKeyboardEvent(event) {
-	switch (event.key) {
-		case "Enter": return { key: "return" };
-		case " ": return { key: "space" };
-		case "Tab": return { key: "tab" };
-		case "ArrowLeft": return { key: "arrowLeft" };
-		case "ArrowRight": return { key: "arrowRight" };
-		case "ArrowUp": return { key: "arrowUp" };
-		case "ArrowDown": return { key: "arrowDown" };
-		case "Backspace": return { key: "backspace" };
-		case "Escape": return { key: "escape" };
-		case "Home": return { key: "home" };
-		case "End": return { key: "end" };
-		default: {
-			const characters = Array.from(event.key);
-			if (characters.length !== 1) return;
-			return {
-				key: "character",
-				character: characters[0]
-			};
-		}
-	}
-}
-function pointerButton(button) {
-	switch (button) {
-		case 1: return "middle";
-		case 2: return "secondary";
-		default: return "primary";
-	}
-}
-function modifierMask(event) {
-	let mask = 0;
-	if (event.shiftKey) mask |= 1;
-	if (event.altKey) mask |= 2;
-	if (event.ctrlKey) mask |= 4;
-	return mask;
-}
-function normalizedWheelDelta(delta) {
-	if (delta > 0) return 1;
-	if (delta < 0) return -1;
-	return 0;
-}
-/**
-* Whether a published scroll region has remaining headroom in the wheel's
-* direction, recomputing the per-direction extent from offset/content/viewport.
-* Mirrors SwiftTUI's clamp (`min(max(0, offset), max(0, content - viewport))`)
-* so the host and the app agree on "at edge". Wheel sign convention matches the
-* app: `deltaY > 0` scrolls down (offset grows toward the content bottom).
-* Diagonal wheels qualify if either axis has headroom.
-*/
-function regionCanScrollInDirection(region, deltaX, deltaY) {
-	const [, , viewportWidth, viewportHeight] = region.rect;
-	const [offsetX, offsetY] = region.offset;
-	const [contentWidth, contentHeight] = region.content;
-	const maxX = Math.max(0, contentWidth - viewportWidth);
-	const maxY = Math.max(0, contentHeight - viewportHeight);
-	const clampedX = Math.min(Math.max(0, offsetX), maxX);
-	const clampedY = Math.min(Math.max(0, offsetY), maxY);
-	if (deltaY > 0 && clampedY < maxY) return true;
-	if (deltaY < 0 && clampedY > 0) return true;
-	if (deltaX > 0 && clampedX < maxX) return true;
-	if (deltaX < 0 && clampedX > 0) return true;
-	return false;
-}
-function normalizeCellRanges(ranges) {
-	const sorted = ranges.filter((range) => range.end > range.start).sort((lhs, rhs) => lhs.start - rhs.start || lhs.end - rhs.end);
-	const normalized = [];
-	for (const range of sorted) {
-		const previous = normalized[normalized.length - 1];
-		if (previous && range.start <= previous.end) {
-			previous.end = Math.max(previous.end, range.end);
-			continue;
-		}
-		normalized.push({ ...range });
-	}
-	return normalized;
-}
-function cellIntersectsRanges(x, span, ranges) {
-	if (ranges === "full") return true;
-	const start = Math.floor(x);
-	const end = start + Math.max(1, Math.ceil(span));
-	return ranges.some((range) => start < range.end && end > range.start);
-}
-function dirtyRegionIntersectsCellRect(region, x, y, width, height) {
-	const startRow = Math.max(0, Math.floor(y));
-	const endRow = Math.max(startRow, Math.ceil(y + height));
-	const rectRange = {
-		start: Math.floor(x),
-		end: Math.floor(x) + Math.max(1, Math.ceil(width))
-	};
-	for (let row = startRow; row < endRow; row += 1) {
-		const ranges = region.rows.get(row);
-		if (!ranges) continue;
-		if (cellIntersectsRanges(rectRange.start, rectRange.end - rectRange.start, ranges)) return true;
-	}
-	return false;
-}
-function resolvedForeground(style, terminalStyle) {
-	if ((style?.em ?? 0) & 16) return style?.bg ?? terminalStyle.theme.background;
-	return style?.fg ?? terminalStyle.theme.foreground;
-}
-function resolvedBackground(style, terminalStyle) {
-	if ((style?.em ?? 0) & 16) return style?.fg ?? terminalStyle.theme.foreground;
-	return style?.bg;
-}
 //#endregion
 export { WebHostSceneRuntime };