@ixfx/components 0.2.4 → 0.2.6

package/dist/hex-editor-gH3mteMr.js

@@ -0,0 +1,1147 @@
+import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
+import { t as colour_exports } from "./colour-C3MQIjFJ-BJV-QC-3.js";
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { repeat } from "lit/directives/repeat.js";
+//#region src/hex/colour.ts
+const WHITESPACE_BYTES = new Set([
+	9,
+	10,
+	11,
+	12,
+	13,
+	32
+]);
+const isControlByte = (byte) => {
+	return byte < 32 && byte !== 9 && byte !== 10 && byte !== 11 && byte !== 12 && byte !== 13;
+};
+const isPrintableAscii = (byte) => {
+	return byte >= 32 && byte <= 126;
+};
+const getAsciiClass = (byte) => {
+	if (byte === 0) return "byte-null";
+	if (WHITESPACE_BYTES.has(byte)) return "byte-whitespace";
+	if (isControlByte(byte)) return "byte-control";
+	if (isPrintableAscii(byte)) return "byte-printable";
+	return "byte-other";
+};
+const createShadeMap = (nullColour, maxColour, stepStart, stepEnd) => {
+	const cssSteps = colour_exports.createSteps(stepStart, stepEnd, { steps: 16 }).map(colour_exports.toCssColour);
+	return { forByte: (byte) => {
+		if (byte === 0) return nullColour;
+		if (byte === 255) return maxColour;
+		return cssSteps[byte >> 4];
+	} };
+};
+//#endregion
+//#region src/hex/data.ts
+const createHexStore = (data) => {
+	return {
+		data: new Uint8Array(data),
+		changeset: /* @__PURE__ */ new Set()
+	};
+};
+const readByte = (store, pos) => {
+	return store.data[pos] ?? 0;
+};
+const length = (store) => {
+	return store.data.length;
+};
+const clamp = (value) => {
+	return Math.max(0, Math.min(255, value));
+};
+const writeByte = (store, pos, value) => {
+	const clampedValue = clamp(value);
+	const before = store.data[pos];
+	const diff = new Map([[pos, {
+		before,
+		after: clampedValue
+	}]]);
+	store.data[pos] = clampedValue;
+	store.changeset.add(pos);
+	return diff;
+};
+const writeBytes = (store, entries) => {
+	const diff = /* @__PURE__ */ new Map();
+	entries.forEach((value, pos) => {
+		const clampedValue = clamp(value);
+		const before = store.data[pos];
+		diff.set(pos, {
+			before,
+			after: clampedValue
+		});
+		store.data[pos] = clampedValue;
+		store.changeset.add(pos);
+	});
+	return diff;
+};
+const applyDiff = (store, diff) => {
+	const reverse = /* @__PURE__ */ new Map();
+	diff.forEach((entry, pos) => {
+		const before = store.data[pos];
+		reverse.set(pos, {
+			before: entry.after,
+			after: before
+		});
+		store.data[pos] = entry.after;
+		store.changeset.add(pos);
+	});
+	return reverse;
+};
+const reverseDiff = (diff) => {
+	const reversed = /* @__PURE__ */ new Map();
+	diff.forEach((entry, pos) => {
+		reversed.set(pos, {
+			before: entry.after,
+			after: entry.before
+		});
+	});
+	return reversed;
+};
+const getChangeset = (store) => {
+	return store.changeset;
+};
+//#endregion
+//#region src/hex/diff.ts
+const createUndoRedoStack = () => {
+	return {
+		undos: [],
+		redos: []
+	};
+};
+const push = (stack, diff) => {
+	stack.undos.push(diff);
+	stack.redos = [];
+};
+const undo = (stack) => {
+	const diff = stack.undos.pop();
+	if (diff) stack.redos.push(diff);
+	return diff;
+};
+const redo = (stack) => {
+	const diff = stack.redos.pop();
+	if (diff) stack.undos.push(diff);
+	return diff;
+};
+//#endregion
+//#region src/hex/selection.ts
+const bytesPerRow = (columns) => columns * 4;
+const min = (a, b) => a < b ? a : b;
+const max = (a, b) => a > b ? a : b;
+const clampPos = (pos, dataLength) => {
+	return Math.max(0, Math.min(pos, dataLength - 1));
+};
+const getSelectedPositions = (sel, columns) => {
+	if (!sel) return [];
+	const bpr = bytesPerRow(columns);
+	if (sel.kind === "single") return [sel.pos];
+	if (sel.kind === "contiguous") {
+		const start = min(sel.start, sel.end);
+		const end = max(sel.start, sel.end);
+		const positions = [];
+		for (let i = start; i <= end; i++) positions.push(i);
+		return positions;
+	}
+	if (sel.kind === "rectangular") {
+		const positions = [];
+		for (let row = 0; row < sel.height; row++) for (let col = 0; col < sel.width; col++) {
+			const y = sel.y + row;
+			const x = sel.x + col;
+			const pos = y * bpr + x;
+			positions.push(pos);
+		}
+		return positions;
+	}
+	return [];
+};
+const selectionContains = (sel, pos, columns) => {
+	if (!sel) return false;
+	const bpr = bytesPerRow(columns);
+	if (sel.kind === "single") return pos === sel.pos;
+	if (sel.kind === "contiguous") {
+		const start = min(sel.start, sel.end);
+		const end = max(sel.start, sel.end);
+		return pos >= start && pos <= end;
+	}
+	if (sel.kind === "rectangular") {
+		const row = Math.floor(pos / bpr);
+		const col = pos % bpr;
+		const x = sel.x;
+		const y = sel.y;
+		const width = sel.width;
+		const height = sel.height;
+		return row >= y && row < y + height && col >= x && col < x + width;
+	}
+	return false;
+};
+const getCursorPos = (sel, dir, columns, dataLength) => {
+	let currentPos;
+	if (!sel) currentPos = 0;
+	else if (sel.kind === "single") currentPos = sel.pos;
+	else if (sel.kind === "contiguous") currentPos = max(sel.start, sel.end);
+	else if (sel.kind === "rectangular") currentPos = sel.y * bytesPerRow(columns) + sel.x + sel.width - 1;
+	else currentPos = 0;
+	const bpr = bytesPerRow(columns);
+	let newPos;
+	switch (dir) {
+		case "left":
+			newPos = currentPos - 1;
+			break;
+		case "right":
+			newPos = currentPos + 1;
+			break;
+		case "up":
+			newPos = currentPos - bpr;
+			break;
+		case "down":
+			newPos = currentPos + bpr;
+			break;
+		default: newPos = currentPos;
+	}
+	return clampPos(newPos, dataLength);
+};
+const moveSelection = (sel, dir, columns, dataLength) => {
+	return {
+		kind: "single",
+		pos: getCursorPos(sel, dir, columns, dataLength)
+	};
+};
+const extendRectangular = (sel, dir, columns, _dataLength, anchorX = 0, anchorY = 0) => {
+	const bpr = bytesPerRow(columns);
+	let x;
+	let y;
+	let width;
+	let height;
+	if (!sel || sel.kind === "single") {
+		const pos = sel?.kind === "single" ? sel.pos : 0;
+		x = pos % bpr;
+		y = Math.floor(pos / bpr);
+		width = 1;
+		height = 1;
+	} else if (sel.kind === "contiguous") {
+		const start = min(sel.start, sel.end);
+		const end = max(sel.start, sel.end);
+		x = start % bpr;
+		y = Math.floor(start / bpr);
+		width = end - start + 1;
+		height = 1;
+	} else if (sel.kind === "rectangular") {
+		x = sel.x;
+		y = sel.y;
+		width = sel.width;
+		height = sel.height;
+	} else {
+		x = 0;
+		y = 0;
+		width = 1;
+		height = 1;
+	}
+	const effectiveAnchorX = anchorX > 0 || sel?.kind === "rectangular" ? anchorX : x;
+	const effectiveAnchorY = anchorY > 0 || sel?.kind === "rectangular" ? anchorY : y;
+	switch (dir) {
+		case "left":
+			if (x > effectiveAnchorX) width -= 1;
+			else if (x === effectiveAnchorX && width > 1) {
+				x -= 1;
+				width += 1;
+			} else if (x > 0) {
+				x -= 1;
+				width += 1;
+			}
+			break;
+		case "right":
+			if (x + width < bpr) width += 1;
+			break;
+		case "up":
+			if (y > effectiveAnchorY) height -= 1;
+			else if (y === effectiveAnchorY && height > 1) {
+				y -= 1;
+				height += 1;
+			} else if (y > 0) {
+				y -= 1;
+				height += 1;
+			}
+			break;
+		case "down":
+			height += 1;
+			break;
+	}
+	return {
+		kind: "rectangular",
+		x,
+		y,
+		width,
+		height
+	};
+};
+const selectionFromPointerRange = (start, end, mode, columns) => {
+	const bpr = bytesPerRow(columns);
+	if (mode === "contiguous") return {
+		kind: "contiguous",
+		start: min(start, end),
+		end: max(start, end)
+	};
+	const startX = start % bpr;
+	const startY = Math.floor(start / bpr);
+	const endX = end % bpr;
+	const endY = Math.floor(end / bpr);
+	return {
+		kind: "rectangular",
+		x: min(startX, endX),
+		y: min(startY, endY),
+		width: Math.abs(endX - startX) + 1,
+		height: Math.abs(endY - startY) + 1
+	};
+};
+//#endregion
+//#region src/hex/hex-editor.ts
+let IxfxHexEditorElement = class IxfxHexEditorElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.columns = 4;
+		this.colourScheme = `ascii`;
+		this.showChangeset = true;
+		this.hideOffsetCol = false;
+		this.hideHexCol = false;
+		this.hideTextCol = false;
+		this._selection = null;
+		this._scrollTop = 0;
+		this._editState = null;
+		this._containerH = 0;
+		this._shadeMap = null;
+		this._focusSide = null;
+		this._store = createHexStore(new Uint8Array(0));
+		this._undoStack = createUndoRedoStack();
+		this._copyBuffer = null;
+		this._rowHeight = 24;
+		this._dragStart = null;
+		this._dragAnchor = null;
+		this._rectAnchorX = 0;
+		this._rectAnchorY = 0;
+		this._rectAnchorXFromKeyboard = 0;
+		this._rectAnchorYFromKeyboard = 0;
+		this._initialSelectionPoint = 0;
+		this._currentCursorPoint = 0;
+		this._pointerMode = null;
+		this._currentDragDiff = null;
+		this._shiftClickTarget = null;
+		this._onScroll = (e) => {
+			const target = e.target;
+			this._scrollTop = target.scrollTop;
+			this.requestUpdate();
+		};
+		this._onKeyDown = (e) => {
+			if ([
+				`ArrowLeft`,
+				`ArrowRight`,
+				`ArrowUp`,
+				`ArrowDown`
+			].includes(e.key)) {
+				e.preventDefault();
+				e.stopPropagation();
+				if (this._editState) this._editState = null;
+				const dir = e.key.replace(`Arrow`, ``).toLowerCase();
+				const dataLen = length(this._store);
+				const bpr = bytesPerRow(this.columns);
+				if (e.metaKey || e.ctrlKey) {
+					if (!this._selection || this._selection.kind !== `rectangular`) {
+						let startPos = 0;
+						if (this._selection?.kind === `single`) startPos = this._selection.pos;
+						else if (this._selection?.kind === `contiguous`) startPos = Math.min(this._selection.start, this._selection.end);
+						this._rectAnchorXFromKeyboard = startPos % bpr;
+						this._rectAnchorYFromKeyboard = Math.floor(startPos / bpr);
+						this._selection = {
+							kind: `rectangular`,
+							x: this._rectAnchorXFromKeyboard,
+							y: this._rectAnchorYFromKeyboard,
+							width: 1,
+							height: 1
+						};
+					}
+					this._selection = extendRectangular(this._selection, dir, this.columns, dataLen, this._rectAnchorXFromKeyboard, this._rectAnchorYFromKeyboard);
+				} else if (e.shiftKey) {
+					if (!this._selection) {
+						this._initialSelectionPoint = 0;
+						this._currentCursorPoint = 0;
+					} else if (this._selection.kind === `single`) {
+						this._initialSelectionPoint = this._selection.pos;
+						this._currentCursorPoint = this._selection.pos;
+					} else if (this._selection.kind === `rectangular`) {
+						const cursorPos = this._selection.y * bpr + this._selection.x;
+						this._initialSelectionPoint = cursorPos;
+						this._currentCursorPoint = cursorPos;
+					}
+					const newPos = getCursorPos(this._selection, dir, this.columns, dataLen);
+					const start = Math.min(this._initialSelectionPoint, newPos);
+					const end = Math.max(this._initialSelectionPoint, newPos);
+					this._currentCursorPoint = newPos;
+					this._selection = {
+						kind: `contiguous`,
+						start,
+						end
+					};
+				} else {
+					this._selection = moveSelection(this._selection, dir, this.columns, dataLen);
+					const pos = getCursorPos(this._selection, dir, this.columns, dataLen);
+					this._initialSelectionPoint = pos;
+					this._currentCursorPoint = pos;
+				}
+				this._dispatchSelectEvent();
+				this.requestUpdate();
+				return;
+			}
+			if (e.key === `Tab`) {
+				e.preventDefault();
+				e.stopPropagation();
+				if (this._editState) this._advanceCursor();
+				else {
+					const dataLen = length(this._store);
+					this._selection = moveSelection(this._selection, `right`, this.columns, dataLen);
+					this._dispatchSelectEvent();
+				}
+				this.requestUpdate();
+				return;
+			}
+			if (e.key === `Escape`) {
+				e.preventDefault();
+				e.stopPropagation();
+				if (this._editState) this._editState = null;
+				else if (this._selection && this._selection.kind !== `single`) {
+					const sel = this._selection;
+					let firstPos = 0;
+					if (sel.kind === `contiguous`) {
+						const c = sel;
+						firstPos = Math.min(c.start, c.end);
+					}
+					if (sel.kind === `rectangular`) {
+						const r = sel;
+						firstPos = r.y * bytesPerRow(this.columns) + r.x;
+					}
+					this._selection = {
+						kind: `single`,
+						pos: firstPos
+					};
+					this._dispatchSelectEvent();
+				}
+				this.requestUpdate();
+				return;
+			}
+			if (this._editState) {
+				e.stopPropagation();
+				if (e.key === `Backspace`) {
+					this._handleBackspace();
+					return;
+				}
+				if (e.key === `Enter`) {
+					if (this._editState.side === `hex` && this._editState.partial.startsWith(`.`)) this._commitDecimalValue();
+					return;
+				}
+				if (e.key.length === 1) this._handleValueEntry(e.key);
+				return;
+			}
+			if (this._selection && this._selection.kind === `single` && e.key.length === 1) {
+				e.preventDefault();
+				e.stopPropagation();
+				const pos = this._selection.pos;
+				const side = this._focusSide ?? `hex`;
+				this._editState = {
+					pos,
+					side,
+					partial: ``
+				};
+				this._handleValueEntry(e.key);
+			}
+		};
+	}
+	static {
+		this.styles = css`
+    :host {
+      --hex-row-height: 24px;
+      --hex-offset-width: 8ch;
+      --hex-font: monospace;
+      --hex-font-size: 0.85rem;
+      --hex-changed-weight: bold;
+
+      --ascii-null: #808080;
+      --ascii-printable: #4caf50;
+      --ascii-whitespace: #ffffff;
+      --ascii-control: #f48fb1;
+      --ascii-other: #ffeb3b;
+
+      --shade-null: #808080;
+      --shade-max: #ffffff;
+      --shade-step-start: #ff0000;
+      --shade-step-end: #0000ff;
+
+      display: block;
+      font-family: var(--hex-font);
+      font-size: var(--hex-font-size);
+    }
+
+    .hex-editor {
+      display: flex;
+      flex-direction: column;
+      height: 300px;
+      overflow: hidden;
+      background: #1e1e1e;
+      color: #e0e0e0;
+      border: 1px solid #333;
+      border-radius: 4px;
+    }
+
+    .scroll-container {
+      flex: 1;
+      overflow-y: auto;
+      position: relative;
+    }
+
+    .header {
+      display: flex;
+      background: #2d2d2d;
+      font-weight: bold;
+      border-bottom: 1px solid #444;
+      height: var(--hex-row-height);
+      flex-shrink: 0;
+      align-items: center;
+    }
+
+    .row {
+      display: flex;
+      height: var(--hex-row-height);
+      align-items: center;
+    }
+
+    .row:hover {
+      background: rgba(255, 255, 255, 0.05);
+    }
+
+    .offset-cell {
+      width: var(--hex-offset-width);
+      padding: 0 8px;
+      text-align: right;
+      color: #888;
+      flex-shrink: 0;
+      box-sizing: border-box;
+    }
+
+    .col-group {
+      display: inline-flex;
+      gap: 4px;
+      margin-right: 16px;
+    }
+
+    .col-header {
+      width: calc(8ch + 28px);
+      padding: 0 8px;
+      color: #555;
+      text-align: right;
+      flex-shrink: 0;
+      box-sizing: border-box;
+    }
+
+    .col-header.active {
+      color: #aaa;
+    }
+
+    .text-header {
+      padding: 4px 8px;
+      color: #555;
+      width: calc(var(--columns, 4) * 4 * 1ch);
+      box-sizing: border-box;
+      flex-shrink: 0;
+    }
+
+    .text-header.active {
+      color: #aaa;
+    }
+
+    .hex-cell, .text-char {
+      display: inline-block;
+      width: 2ch;
+      text-align: center;
+      cursor: pointer;
+      user-select: none;
+      padding: 2px 0;
+    }
+
+    .hex-cell.selected, .text-char.selected {
+      background: rgba(100, 149, 237, 0.4);
+    }
+
+    .hex-cell.changed, .text-char.changed {
+      font-weight: var(--hex-changed-weight);
+    }
+
+    .hex-cell.editing {
+      background: rgba(255, 215, 0, 0.3);
+    }
+
+
+    .text-area {
+      display: inline-flex;
+      gap: 0;
+    }
+
+    .text-char {
+      width: 1ch;
+      text-align: left;
+    }
+
+    .byte-null { color: var(--ascii-null); }
+    .byte-printable { color: var(--ascii-printable); }
+    .byte-whitespace { color: var(--ascii-whitespace); }
+    .byte-control { color: var(--ascii-control); }
+    .byte-other { color: var(--ascii-other); }
+  `;
+	}
+	setData(data) {
+		this._store = createHexStore(data);
+		this._undoStack = createUndoRedoStack();
+		this._selection = null;
+		this._editState = null;
+		this._scrollTop = 0;
+		this.requestUpdate();
+	}
+	undo() {
+		const diff = undo(this._undoStack);
+		if (!diff) return;
+		const reverse = reverseDiff(diff);
+		applyDiff(this._store, reverse);
+		this.requestUpdate();
+	}
+	redo() {
+		const diff = redo(this._undoStack);
+		if (!diff) return;
+		applyDiff(this._store, diff);
+		this.requestUpdate();
+	}
+	recomputeColours() {
+		const style = getComputedStyle(this);
+		const nullC = style.getPropertyValue(`--shade-null`).trim() || `#808080`;
+		const maxC = style.getPropertyValue(`--shade-max`).trim() || `#ffffff`;
+		const stepStart = style.getPropertyValue(`--shade-step-start`).trim() || `#ff0000`;
+		const stepEnd = style.getPropertyValue(`--shade-step-end`).trim() || `#0000ff`;
+		this._shadeMap = createShadeMap(nullC, maxC, stepStart, stepEnd);
+		this.requestUpdate();
+	}
+	*selectedBytes() {
+		const positions = getSelectedPositions(this._selection, this.columns);
+		for (let i = 0; i < positions.length; i++) {
+			const pos = positions[i];
+			yield {
+				selection_index: i,
+				array_index: pos,
+				value: readByte(this._store, pos)
+			};
+		}
+	}
+	containsPosition(pos) {
+		return selectionContains(this._selection, pos, this.columns);
+	}
+	selectSingle(position) {
+		this._selection = {
+			kind: `single`,
+			pos: position
+		};
+		this._dispatchSelectEvent();
+		this.requestUpdate();
+	}
+	selectContiguous(start, end) {
+		this._selection = {
+			kind: `contiguous`,
+			start,
+			end
+		};
+		this._dispatchSelectEvent();
+		this.requestUpdate();
+	}
+	selectRectangular(x, y, width, height) {
+		this._selection = {
+			kind: `rectangular`,
+			x,
+			y,
+			width,
+			height
+		};
+		this._dispatchSelectEvent();
+		this.requestUpdate();
+	}
+	clearSelection() {
+		this._selection = null;
+		this._dispatchSelectEvent();
+		this.requestUpdate();
+	}
+	getSelection() {
+		return this._selection;
+	}
+	firstUpdated() {
+		const container = this.shadowRoot?.querySelector(`.scroll-container`);
+		if (container) {
+			new ResizeObserver((entries) => {
+				this._containerH = entries[0].contentRect.height;
+				this.requestUpdate();
+			}).observe(container);
+			this._containerH = container.clientHeight;
+		}
+		this.recomputeColours();
+	}
+	_onPointerDown(pos, side, e) {
+		e.preventDefault();
+		if (e.button !== 0) return;
+		(this.shadowRoot?.querySelector(`.hex-editor`))?.focus();
+		this._focusSide = side;
+		e.target.setPointerCapture(e.pointerId);
+		const bpr = bytesPerRow(this.columns);
+		const startX = pos % bpr;
+		const startY = Math.floor(pos / bpr);
+		if (e.metaKey || e.ctrlKey) {
+			this._pointerMode = `select-rect`;
+			this._dragAnchor = pos;
+			this._rectAnchorX = startX;
+			this._rectAnchorY = startY;
+		} else if (e.shiftKey) {
+			this._pointerMode = `select-cont`;
+			if (!this._selection || this._selection.kind !== `single`) this._dragAnchor = pos;
+			else {
+				this._dragAnchor = this._selection.pos;
+				this._shiftClickTarget = pos;
+			}
+		} else {
+			this._pointerMode = `pending`;
+			this._dragStart = {
+				pos,
+				startValue: readByte(this._store, pos),
+				startY: e.clientY,
+				startX: e.clientX
+			};
+			this._dragAnchor = pos;
+			this._currentDragDiff = null;
+		}
+	}
+	_onPointerMove(pos, _side, e) {
+		if (!this._dragStart) return;
+		const dy = Math.abs(e.clientY - this._dragStart.startY);
+		const dx = Math.abs(e.clientX - this._dragStart.startX);
+		if (this._pointerMode === `pending` && dy > 4 && dy > dx) {
+			this._pointerMode = `drag-value`;
+			this._editState = null;
+		}
+		if (this._pointerMode === `drag-value`) {
+			const delta = Math.round((e.clientY - this._dragStart.startY) / 4);
+			const newValue = Math.max(0, Math.min(255, this._dragStart.startValue - delta));
+			this._currentDragDiff = writeByte(this._store, pos, newValue);
+			this.requestUpdate();
+		}
+		if (this._pointerMode === `select-cont`) {
+			if (this._dragAnchor !== null) {
+				const mode = `contiguous`;
+				this._selection = selectionFromPointerRange(this._dragAnchor, pos, mode, this.columns);
+				this._dispatchSelectEvent();
+			}
+		}
+		if (this._pointerMode === `select-rect`) {
+			const bpr = bytesPerRow(this.columns);
+			const currentX = pos % bpr;
+			const currentY = Math.floor(pos / bpr);
+			const x = Math.min(this._rectAnchorX, currentX);
+			const y = Math.min(this._rectAnchorY, currentY);
+			const width = Math.abs(currentX - this._rectAnchorX) + 1;
+			const height = Math.abs(currentY - this._rectAnchorY) + 1;
+			this._selection = {
+				kind: `rectangular`,
+				x,
+				y,
+				width,
+				height
+			};
+			this._dispatchSelectEvent();
+		}
+	}
+	_onPointerUp(pos, side, e) {
+		e.target.releasePointerCapture(e.pointerId);
+		if (this._pointerMode === `pending`) {
+			this._selection = {
+				kind: `single`,
+				pos
+			};
+			this._initialSelectionPoint = pos;
+			this._currentCursorPoint = pos;
+			this._editState = {
+				pos,
+				side,
+				partial: ``
+			};
+			this._dispatchSelectEvent();
+		}
+		if (this._pointerMode === `select-cont`) {
+			if (this._dragAnchor !== null && this._shiftClickTarget !== null) {
+				this._selection = {
+					kind: `contiguous`,
+					start: this._dragAnchor,
+					end: this._shiftClickTarget
+				};
+				this._initialSelectionPoint = Math.min(this._dragAnchor, this._shiftClickTarget);
+				this._currentCursorPoint = Math.max(this._dragAnchor, this._shiftClickTarget);
+				this._dispatchSelectEvent();
+			} else if (this._dragAnchor !== null) {
+				const mode = `contiguous`;
+				this._selection = selectionFromPointerRange(this._dragAnchor, pos, mode, this.columns);
+				this._initialSelectionPoint = this._dragAnchor;
+				this._currentCursorPoint = pos;
+				this._dispatchSelectEvent();
+			}
+		}
+		if (this._pointerMode === `select-rect`) {
+			const bpr = bytesPerRow(this.columns);
+			const currentX = pos % bpr;
+			const currentY = Math.floor(pos / bpr);
+			const x = Math.min(this._rectAnchorX, currentX);
+			const y = Math.min(this._rectAnchorY, currentY);
+			const width = Math.abs(currentX - this._rectAnchorX) + 1;
+			const height = Math.abs(currentY - this._rectAnchorY) + 1;
+			this._selection = {
+				kind: `rectangular`,
+				x,
+				y,
+				width,
+				height
+			};
+			this._dispatchSelectEvent();
+		}
+		if (this._pointerMode === `drag-value` && this._currentDragDiff) {
+			push(this._undoStack, this._currentDragDiff);
+			this._dispatchChangeEvent(this._currentDragDiff);
+		}
+		this._pointerMode = null;
+		this._dragStart = null;
+		this._dragAnchor = null;
+		this._currentDragDiff = null;
+		this._shiftClickTarget = null;
+	}
+	_handleBackspace() {
+		if (!this._editState) return;
+		this._editState = {
+			...this._editState,
+			partial: ``
+		};
+		this.requestUpdate();
+	}
+	_handleValueEntry(key) {
+		if (!this._editState) return;
+		const { pos, side, partial } = this._editState;
+		if (side === `text`) {
+			if (key.length === 1 && key.charCodeAt(0) >= 32 && key.charCodeAt(0) <= 126) {
+				const value = key.charCodeAt(0);
+				const diff = writeByte(this._store, pos, value);
+				push(this._undoStack, diff);
+				this._dispatchChangeEvent(diff);
+				this._advanceCursor();
+			}
+			return;
+		}
+		if (partial === `` && key === `.`) {
+			this._editState = {
+				...this._editState,
+				partial: `.`
+			};
+			this.requestUpdate();
+			return;
+		}
+		if (partial.startsWith(`.`)) {
+			if (/\d/.test(key)) {
+				let newPartial = partial + key;
+				if (Number(newPartial.slice(1)) > 255) newPartial = `.255`;
+				this._editState = {
+					...this._editState,
+					partial: newPartial
+				};
+				this.requestUpdate();
+			}
+			return;
+		}
+		if (`0123456789ABCDEFabcdef`.includes(key)) {
+			const newPartial = (partial + key.toUpperCase()).slice(-2);
+			this._editState = {
+				...this._editState,
+				partial: newPartial
+			};
+			this.requestUpdate();
+			if (newPartial.length === 2) {
+				const value = Number.parseInt(newPartial, 16);
+				const diff = writeByte(this._store, pos, value);
+				push(this._undoStack, diff);
+				this._dispatchChangeEvent(diff);
+				this._advanceCursor();
+			}
+		} else if (partial !== ``) {
+			this._editState = {
+				...this._editState,
+				partial: ``
+			};
+			this.requestUpdate();
+		}
+	}
+	_commitDecimalValue() {
+		if (!this._editState) return;
+		const value = Number.parseInt(this._editState.partial.slice(1), 10);
+		if (!isNaN(value)) {
+			const diff = writeByte(this._store, this._editState.pos, value);
+			push(this._undoStack, diff);
+			this._dispatchChangeEvent(diff);
+			this._advanceCursor();
+		}
+	}
+	_advanceCursor() {
+		if (!this._editState) return;
+		const dataLen = length(this._store);
+		const newPos = clampPos(this._editState.pos + 1, dataLen);
+		this._editState = {
+			pos: newPos,
+			side: this._editState.side,
+			partial: ``
+		};
+		this._selection = {
+			kind: `single`,
+			pos: newPos
+		};
+		this.requestUpdate();
+	}
+	_dispatchChangeEvent(diff) {
+		this.dispatchEvent(new CustomEvent(`hex-change`, {
+			detail: { diff },
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_dispatchSelectEvent() {
+		const sel = this._selection;
+		let detail;
+		if (!sel) detail = { type: `none` };
+		else if (sel.kind === `single`) detail = {
+			type: `single`,
+			position: sel.pos
+		};
+		else if (sel.kind === `contiguous`) detail = {
+			type: `contiguous`,
+			start: sel.start,
+			end: sel.end
+		};
+		else if (sel.kind === `rectangular`) detail = {
+			type: `rectangular`,
+			x: sel.x,
+			y: sel.y,
+			width: sel.width,
+			height: sel.height
+		};
+		else detail = { type: `none` };
+		this.dispatchEvent(new CustomEvent(`select`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_copy() {
+		const positions = getSelectedPositions(this._selection, this.columns);
+		if (positions.length === 0) return;
+		const bytes = positions.map((p) => readByte(this._store, p));
+		this._copyBuffer = new Uint8Array(bytes);
+		const hexStr = bytes.map((b) => b.toString(16).padStart(2, `0`)).join(` `);
+		navigator.clipboard?.writeText(hexStr).catch(() => {});
+	}
+	async _paste() {
+		let bytes = null;
+		try {
+			const text = await navigator.clipboard?.readText();
+			if (text) bytes = this._parseHexString(text);
+		} catch {}
+		if (!bytes && this._copyBuffer) bytes = Array.from(this._copyBuffer);
+		if (!bytes || bytes.length === 0) return;
+		if (!this._selection) return;
+		const entries = /* @__PURE__ */ new Map();
+		if (this._selection.kind === `single`) {
+			const startPos = this._selection.pos;
+			const dataLen = length(this._store);
+			for (let i = 0; i < bytes.length && startPos + i < dataLen; i++) entries.set(startPos + i, bytes[i]);
+		} else if (this._selection.kind === `contiguous`) {
+			const startPos = Math.min(this._selection.start, this._selection.end);
+			const available = Math.max(this._selection.start, this._selection.end) - startPos + 1;
+			for (let i = 0; i < Math.min(bytes.length, available); i++) entries.set(startPos + i, bytes[i]);
+		} else if (this._selection.kind === `rectangular`) {
+			const { x, y, width, height } = this._selection;
+			const bpr = bytesPerRow(this.columns);
+			let byteIdx = 0;
+			for (let row = 0; row < height && byteIdx < bytes.length; row++) for (let col = 0; col < width && byteIdx < bytes.length; col++) {
+				const pos = (y + row) * bpr + x + col;
+				entries.set(pos, bytes[byteIdx++]);
+			}
+		}
+		if (entries.size > 0) {
+			const diff = writeBytes(this._store, entries);
+			push(this._undoStack, diff);
+			this._dispatchChangeEvent(diff);
+			this.requestUpdate();
+		}
+	}
+	_parseHexString(text) {
+		const bytes = [];
+		const cleaned = text.replace(/[^0-9A-F]/gi, ` `).trim();
+		if (!cleaned) return bytes;
+		const parts = cleaned.split(/\s+/);
+		for (const part of parts) if (part.length === 1) bytes.push(Number.parseInt(part + part, 16));
+		else if (part.length === 2) bytes.push(Number.parseInt(part, 16));
+		return bytes;
+	}
+	_getColHeaders() {
+		const headers = [];
+		for (let i = 0; i < this.columns; i++) {
+			const offset = i * 4;
+			headers.push(`+${offset.toString(16).toUpperCase()}`);
+		}
+		return headers;
+	}
+	_isRowShaded(pos) {
+		const sel = this._selection;
+		if (!sel || sel.kind !== `single`) return true;
+		const bpr = bytesPerRow(this.columns);
+		return Math.floor(pos / bpr) === Math.floor(sel.pos / bpr);
+	}
+	_isHexShaded(pos) {
+		return this._isRowShaded(pos);
+	}
+	_isTextShaded(pos) {
+		return this._isRowShaded(pos);
+	}
+	render() {
+		const dataLen = length(this._store);
+		const bpr = bytesPerRow(this.columns);
+		const totalRows = Math.ceil(dataLen / bpr);
+		const containerH = this._containerH > 0 ? this._containerH : 280;
+		const startRow = Math.floor(this._scrollTop / this._rowHeight);
+		const endRow = Math.min(startRow + Math.ceil(containerH / this._rowHeight) + 2, totalRows);
+		const topSpacerHeight = startRow * this._rowHeight;
+		const botSpacerHeight = (totalRows - endRow) * this._rowHeight;
+		const changeset = getChangeset(this._store);
+		const colHeaders = this._getColHeaders();
+		const hexActive = this._focusSide === `hex` || this._focusSide === null;
+		const textActive = this._focusSide === `text`;
+		return html`
+      <div class="hex-editor" tabindex="0" @keydown=${this._onKeyDown} @pointerleave=${() => {}}>
+        <div class="header">
+          ${this.hideOffsetCol ? null : html`<span class="offset-cell">Offset</span>`}
+          ${this.hideHexCol ? null : repeat(colHeaders, (h) => html`<span class="col-header ${hexActive ? `active` : ``}">${h}</span>`)}
+          ${this.hideTextCol ? null : html`<span class="text-header ${textActive ? `active` : ``}">Text</span>`}
+        </div>
+        <div class="scroll-container" @scroll=${this._onScroll}>
+          <div style="height: ${topSpacerHeight}px"></div>
+          ${repeat(Array.from({ length: endRow - startRow }, (_, i) => startRow + i), (rowIndex) => rowIndex, (rowIndex) => this._renderRow(rowIndex, changeset))}
+          <div style="height: ${botSpacerHeight}px"></div>
+        </div>
+      </div>
+    `;
+	}
+	_renderRow(rowIndex, changeset) {
+		const bpr = bytesPerRow(this.columns);
+		const offset = rowIndex * bpr;
+		return html`
+      <div class="row" data-row=${rowIndex}>
+        ${this.hideOffsetCol ? null : html`<span class="offset-cell">${offset.toString(16).toUpperCase().padStart(6, `0`)}</span>`}
+        ${this.hideHexCol ? null : repeat(Array.from({ length: this.columns }, (_, i) => i), (colIndex) => colIndex, (colIndex) => this._renderColumn(rowIndex, colIndex, changeset))}
+        ${this.hideTextCol ? null : html`
+          <span class="text-area">
+            ${repeat(Array.from({ length: bpr }, (_, i) => i), (i) => i, (i) => this._renderTextChar(offset + i, changeset))}
+          </span>
+        `}
+      </div>
+    `;
+	}
+	_renderColumn(rowIndex, colIndex, changeset) {
+		const basePos = rowIndex * bytesPerRow(this.columns) + colIndex * 4;
+		return html`
+      <span class="col-group">
+        ${[
+			0,
+			1,
+			2,
+			3
+		].map((b) => this._renderHexCell(basePos + b, changeset))}
+      </span>
+    `;
+	}
+	_renderHexCell(pos, changeset) {
+		if (pos >= length(this._store)) return html`<span class="hex-cell"></span>`;
+		const byte = readByte(this._store, pos);
+		const hexStr = byte.toString(16).toUpperCase().padStart(2, `0`);
+		const isSelected = selectionContains(this._selection, pos, this.columns);
+		const isChanged = this.showChangeset && changeset.has(pos);
+		const isEditing = this._editState?.pos === pos;
+		const classes = [`hex-cell`];
+		if (isSelected) classes.push(`selected`);
+		if (isChanged) classes.push(`changed`);
+		if (isEditing) classes.push(`editing`);
+		if (this._isHexShaded(pos)) classes.push(`shaded`);
+		let displayText = hexStr;
+		let colourStyle;
+		if (isEditing && this._editState) displayText = this._editState.partial === `` ? hexStr : `${this._editState.partial}_`;
+		if (this.colourScheme === `shade` && this._shadeMap) colourStyle = { color: this._shadeMap.forByte(byte) };
+		else if (this.colourScheme === `ascii`) classes.push(getAsciiClass(byte));
+		return html`
+      <span
+        class=${classes.join(` `)}
+        style=${styleMap(colourStyle || {})}
+        @pointerdown=${(e) => this._onPointerDown(pos, `hex`, e)}
+        @pointerup=${(e) => this._onPointerUp(pos, `hex`, e)}
+        @pointermove=${(e) => this._onPointerMove(pos, `hex`, e)}
+      >${displayText}</span>
+    `;
+	}
+	_renderTextChar(pos, changeset) {
+		if (pos >= length(this._store)) return html`<span class="text-char"></span>`;
+		const byte = readByte(this._store, pos);
+		const char = byte >= 32 && byte <= 126 ? String.fromCharCode(byte) : `.`;
+		const isSelected = selectionContains(this._selection, pos, this.columns);
+		const isChanged = this.showChangeset && changeset.has(pos);
+		const classes = [`text-char`];
+		if (isSelected) classes.push(`selected`);
+		if (isChanged) classes.push(`changed`);
+		if (this._isTextShaded(pos)) classes.push(`shaded`);
+		let colourStyle;
+		if (this.colourScheme === `shade` && this._shadeMap) colourStyle = { color: this._shadeMap.forByte(byte) };
+		else if (this.colourScheme === `ascii`) classes.push(getAsciiClass(byte));
+		return html`
+      <span
+        class=${classes.join(` `)}
+        style=${styleMap(colourStyle || {})}
+        @pointerdown=${(e) => this._onPointerDown(pos, `text`, e)}
+        @pointerup=${(e) => this._onPointerUp(pos, `text`, e)}
+        @pointermove=${(e) => this._onPointerMove(pos, `text`, e)}
+      >${char}</span>
+    `;
+	}
+};
+__decorate([property({ type: Number })], IxfxHexEditorElement.prototype, "columns", void 0);
+__decorate([property({ type: String })], IxfxHexEditorElement.prototype, "colourScheme", void 0);
+__decorate([property({ type: Boolean })], IxfxHexEditorElement.prototype, "showChangeset", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-offset-col`
+})], IxfxHexEditorElement.prototype, "hideOffsetCol", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-hex-col`
+})], IxfxHexEditorElement.prototype, "hideHexCol", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `hide-text-col`
+})], IxfxHexEditorElement.prototype, "hideTextCol", void 0);
+__decorate([state()], IxfxHexEditorElement.prototype, "_selection", void 0);
+__decorate([state()], IxfxHexEditorElement.prototype, "_scrollTop", void 0);
+__decorate([state()], IxfxHexEditorElement.prototype, "_editState", void 0);
+__decorate([state()], IxfxHexEditorElement.prototype, "_containerH", void 0);
+__decorate([state()], IxfxHexEditorElement.prototype, "_shadeMap", void 0);
+__decorate([state()], IxfxHexEditorElement.prototype, "_focusSide", void 0);
+IxfxHexEditorElement = __decorate([safeCustomElement(`ixfx-hex-editor`)], IxfxHexEditorElement);
+//#endregion
+export { IxfxHexEditorElement as t };
+
+//# sourceMappingURL=hex-editor-gH3mteMr.js.map