@ixfx/components 0.2.4 → 0.2.5

package/bundle/index.js

@@ -22503,2251 +22503,2251 @@ __decorate([n$2({
 __decorate([n$2({ type: Number })], EditableNumber.prototype, "precision", void 0);
 EditableNumber = __decorate([t$4(`ixfx-editable-number`)], EditableNumber);
 //#endregion
-//#region src/radial-input/svg-utils.ts
-const PI2 = Math.PI * 2;
-const MIDPOINT_ANGLE = -Math.PI / 2;
-/**
-* Convert polar coordinates (angle in radians, radius) to SVG Cartesian coordinates
-* @param angle - Angle in radians (0 = right/east, increases clockwise in SVG)
-* @param radius - Distance from center
-* @param center - Center point (default: {x: 50, y: 50})
-* @returns Point in SVG coordinates
-*/
-function polarToCartesian(angle, radius, center = {
-	x: 50,
-	y: 50
-}) {
-	return {
-		x: center.x + Math.cos(angle) * radius,
-		y: center.y + Math.sin(angle) * radius
-	};
-}
-/**
-* Calculate start and end angles for a flattened circle
-* @param flatten - How much of the circle to hide (0..1): 0 = full circle, 0.5 = half circle, 1 = no arc
-* @returns Start and end angles in radians
-*/
-function getFlattenedCircleAngles(flatten) {
-	const halfArc = PI2 * (1 - flatten) / 2;
-	const topAngle = -Math.PI / 2;
-	const startAngle = topAngle - halfArc;
-	const endAngle = topAngle + halfArc;
-	return {
-		startAngle,
-		endAngle,
-		totalArc: endAngle - startAngle
-	};
-}
+//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directive-helpers.js
 /**
-* Map a value (0..1) to an angle based on value mode
-* @param relativeValue - Value in 0..1 range
-* @param valueMode - How to interpret the value
-* @param flatten - Circle flattening amount (0..1)
-* @returns Angle in radians
-*/
-function valueToAngle(relativeValue, valueMode, flatten) {
-	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
-	switch (valueMode) {
-		case "range": return startAngle + relativeValue * totalArc;
-		case "bipolar": if (relativeValue <= .5) return startAngle + relativeValue / .5 * (MIDPOINT_ANGLE - startAngle);
-		else return MIDPOINT_ANGLE + (relativeValue - .5) / .5 * (endAngle - MIDPOINT_ANGLE);
-		case "unipolar": return MIDPOINT_ANGLE;
-		default: return startAngle;
+* @license
+* Copyright 2020 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
+*/ const { I: t$1 } = j$1, i = (o) => o, s = () => document.createComment(""), v = (o, n, e) => {
+	const l = o._$AA.parentNode, d = void 0 === n ? o._$AB : n._$AA;
+	if (void 0 === e) e = new t$1(l.insertBefore(s(), d), l.insertBefore(s(), d), o, o.options);
+	else {
+		const t = e._$AB.nextSibling, n = e._$AM, c = n !== o;
+		if (c) {
+			let t;
+			e._$AQ?.(o), e._$AM = o, void 0 !== e._$AP && (t = o._$AU) !== n._$AU && e._$AP(t);
+		}
+		if (t !== d || c) {
+			let o = e._$AA;
+			for (; o !== t;) {
+				const t = i(o).nextSibling;
+				i(l).insertBefore(o, d), o = t;
+			}
+		}
 	}
-}
+	return e;
+}, u$1 = (o, t, i = o) => (o._$AI(t, i), o), m = {}, p = (o, t = m) => o._$AH = t, M = (o) => o._$AH, h = (o) => {
+	o._$AR(), o._$AA.remove();
+};
+//#endregion
+//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/repeat.js
 /**
-* Get start and end angles for a value arc
-* @param relativeValue - Value in 0..1 range
-* @param valueMode - How to interpret the value
-* @param flatten - Circle flattening amount (0..1)
-* @returns Start and end angles for the arc
+* @license
+* Copyright 2017 Google LLC
+* SPDX-License-Identifier: BSD-3-Clause
 */
-function getValueArcAngles(relativeValue, valueMode, flatten) {
-	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
-	switch (valueMode) {
-		case "range": return {
-			startAngle,
-			endAngle: startAngle + relativeValue * totalArc
-		};
-		case "bipolar": if (relativeValue < .5) return {
-			startAngle: startAngle + relativeValue / .5 * (MIDPOINT_ANGLE - startAngle),
-			endAngle: MIDPOINT_ANGLE
-		};
-		else if (relativeValue > .5) return {
-			startAngle: MIDPOINT_ANGLE,
-			endAngle: MIDPOINT_ANGLE + (relativeValue - .5) / .5 * (endAngle - MIDPOINT_ANGLE)
-		};
-		else return {
-			startAngle: MIDPOINT_ANGLE,
-			endAngle: MIDPOINT_ANGLE
+const u = (e, s, t) => {
+	const r = /* @__PURE__ */ new Map();
+	for (let l = s; l <= t; l++) r.set(e[l], l);
+	return r;
+}, c = e$3(class extends i$2 {
+	constructor(e) {
+		if (super(e), e.type !== t$2.CHILD) throw Error("repeat() can only be used in text expressions");
+	}
+	dt(e, s, t) {
+		let r;
+		void 0 === t ? t = s : void 0 !== s && (r = s);
+		const l = [], o = [];
+		let i = 0;
+		for (const s of e) l[i] = r ? r(s, i) : i, o[i] = t(s, i), i++;
+		return {
+			values: o,
+			keys: l
 		};
-		case "unipolar": {
-			const spreadAmount = relativeValue * totalArc / 2;
-			return {
-				startAngle: MIDPOINT_ANGLE - spreadAmount,
-				endAngle: MIDPOINT_ANGLE + spreadAmount
-			};
+	}
+	render(e, s, t) {
+		return this.dt(e, s, t).values;
+	}
+	update(s, [t, r, c]) {
+		const d = M(s), { values: p$3, keys: a } = this.dt(t, r, c);
+		if (!Array.isArray(d)) return this.ut = a, p$3;
+		const h$3 = this.ut ??= [], v$2 = [];
+		let m, y, x = 0, j = d.length - 1, k = 0, w = p$3.length - 1;
+		for (; x <= j && k <= w;) if (null === d[x]) x++;
+		else if (null === d[j]) j--;
+		else if (h$3[x] === a[k]) v$2[k] = u$1(d[x], p$3[k]), x++, k++;
+		else if (h$3[j] === a[w]) v$2[w] = u$1(d[j], p$3[w]), j--, w--;
+		else if (h$3[x] === a[w]) v$2[w] = u$1(d[x], p$3[w]), v(s, v$2[w + 1], d[x]), x++, w--;
+		else if (h$3[j] === a[k]) v$2[k] = u$1(d[j], p$3[k]), v(s, d[x], d[j]), j--, k++;
+		else if (void 0 === m && (m = u(a, k, w), y = u(h$3, x, j)), m.has(h$3[x])) if (m.has(h$3[j])) {
+			const e = y.get(a[k]), t = void 0 !== e ? d[e] : null;
+			if (null === t) {
+				const e = v(s, d[x]);
+				u$1(e, p$3[k]), v$2[k] = e;
+			} else v$2[k] = u$1(t, p$3[k]), v(s, d[x], t), d[e] = null;
+			k++;
+		} else h(d[j]), j--;
+		else h(d[x]), x++;
+		for (; k <= w;) {
+			const e = v(s, v$2[w + 1]);
+			u$1(e, p$3[k]), v$2[k++] = e;
 		}
-		default: return {
-			startAngle,
-			endAngle: startAngle
-		};
+		for (; x <= j;) {
+			const e = d[x++];
+			null !== e && h(e);
+		}
+		return this.ut = a, p(s, v$2), E;
 	}
-}
-/**
-* Get start and end angles for an anchored arc
-* Centered on current value position, extends equally in both directions
-* @param relativeValue - Current value position (0..1)
-* @param laneValue - Width of the arc (0..1, where 1 = full range)
-* @param valueMode - How to interpret the value
-* @param flatten - Circle flattening amount (0..1)
-* @returns Start and end angles for the arc
-*/
-function getAnchoredArcAngles(relativeValue, laneValue, valueMode, flatten) {
-	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
-	const centerAngle = valueToAngle(relativeValue, valueMode, flatten);
-	const halfWidth = laneValue * totalArc / 2;
-	let arcStart = centerAngle - halfWidth;
-	let arcEnd = centerAngle + halfWidth;
-	if (arcStart < startAngle) arcStart = startAngle;
-	if (arcEnd > endAngle) arcEnd = endAngle;
-	if (arcStart >= arcEnd) return {
-		startAngle: centerAngle,
-		endAngle: centerAngle
-	};
+});
+//#endregion
+//#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 {
-		startAngle: arcStart,
-		endAngle: arcEnd
+		data: new Uint8Array(data),
+		changeset: /* @__PURE__ */ new Set()
 	};
-}
-/**
-* Generate SVG path for an arc
-* @param startAngle - Start angle in radians
-* @param endAngle - End angle in radians
-* @param radius - Arc radius
-* @param center - Center point
-* @returns SVG path data string
-*/
-function generateArcPath(startAngle, endAngle, radius, center = {
-	x: 50,
-	y: 50
-}) {
-	if (startAngle === endAngle) return "";
-	let arcLength = endAngle - startAngle;
-	if (arcLength < 0) arcLength += PI2;
-	if (arcLength >= PI2 - .001) {
-		const adjustedEnd = startAngle + PI2 - .001;
-		const start = polarToCartesian(startAngle, radius, center);
-		const end = polarToCartesian(adjustedEnd, radius, center);
-		return `M ${start.x},${start.y} A ${radius},${radius} 0 1 1 ${end.x},${end.y}`;
-	}
-	const start = polarToCartesian(startAngle, radius, center);
-	const end = polarToCartesian(endAngle, radius, center);
-	const largeArcFlag = arcLength > Math.PI ? 1 : 0;
-	return `M ${start.x},${start.y} A ${radius},${radius} 0 ${largeArcFlag} 1 ${end.x},${end.y}`;
-}
-/**
-* Generate SVG path for a full flattened circle border
-* @param radius - Circle radius
-* @param flatten - Flattening amount (0..1)
-* @param center - Center point
-* @returns SVG path data string
-*/
-function generateCircleBorderPath(radius, flatten, center = {
-	x: 50,
-	y: 50
-}) {
-	const { startAngle, endAngle } = getFlattenedCircleAngles(flatten);
-	return generateArcPath(startAngle, endAngle, radius, center);
-}
-/**
-* Generate SVG path data for a filled wedge (pie-slice) sector
-* @param startAngle - Start angle in radians
-* @param endAngle - End angle in radians
-* @param radius - Wedge radius (same as dial radius)
-* @param center - Center point
-* @param clockwise - Whether to draw arc clockwise (true) or counterclockwise (false)
-* @returns SVG path data string for filled wedge
-*/
-function generateWedgePath(startAngle, endAngle, radius, center = {
-	x: 50,
-	y: 50
-}, clockwise = true) {
-	if (startAngle === endAngle) return "";
-	let arcLength = endAngle - startAngle;
-	if (arcLength < 0) arcLength += PI2;
-	if (arcLength >= PI2 - .001) {
-		const start = polarToCartesian(startAngle, radius, center);
-		const adjEnd = polarToCartesian(startAngle + PI2 - .001, radius, center);
-		const largeArcFlag = 1;
-		const sweepFlag = clockwise ? 1 : 0;
-		return `M ${center.x},${center.y} L ${start.x},${start.y} A ${radius},${radius} 0 ${largeArcFlag} ${sweepFlag} ${adjEnd.x},${adjEnd.y} Z`;
-	}
-	let actualStartAngle = startAngle;
-	let actualEndAngle = endAngle;
-	let actualClockwise = clockwise;
-	if (!clockwise && arcLength > Math.PI) {
-		actualStartAngle = endAngle;
-		actualEndAngle = startAngle;
-		actualClockwise = true;
-		arcLength = PI2 - arcLength;
-	}
-	const start = polarToCartesian(actualStartAngle, radius, center);
-	const end = polarToCartesian(actualEndAngle, radius, center);
-	const largeArcFlag = arcLength > Math.PI ? 1 : 0;
-	const sweepFlag = actualClockwise ? 1 : 0;
-	return `M ${center.x},${center.y} L ${start.x},${start.y} A ${radius},${radius} 0 ${largeArcFlag} ${sweepFlag} ${end.x},${end.y} Z`;
-}
-/**
-* Get wedge angles based on value mode
-* @param relativeValue - Value in 0..1 range
-* @param valueMode - How to interpret the value
-* @param flatten - Circle flattening amount (0..1)
-* @returns Object with startAngle, endAngle, and clockwise flag
-*/
-function getWedgeAngles(relativeValue, valueMode, flatten) {
-	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
-	const valueAngle = valueToAngle(relativeValue, valueMode, flatten);
-	switch (valueMode) {
-		case "range": return {
-			startAngle,
-			endAngle: valueAngle,
-			clockwise: true
-		};
-		case "bipolar": if (relativeValue < .5) return {
-			startAngle: MIDPOINT_ANGLE,
-			endAngle: valueAngle,
-			clockwise: false
-		};
-		else return {
-			startAngle: MIDPOINT_ANGLE,
-			endAngle: valueAngle,
-			clockwise: true
-		};
-		case "unipolar": {
-			const halfSpread = relativeValue * totalArc / 2;
-			return {
-				startAngle: MIDPOINT_ANGLE - halfSpread,
-				endAngle: MIDPOINT_ANGLE + halfSpread,
-				clockwise: true
-			};
-		}
-		default: return {
-			startAngle,
-			endAngle: startAngle,
-			clockwise: true
-		};
-	}
-}
-/**
-* Get position for a marker (needle or dot) at a given value
-* @param relativeValue - Value in 0..1 range
-* @param valueMode - How to interpret the value
-* @param flatten - Circle flattening amount (0..1)
-* @param radius - Circle radius
-* @param center - Center point
-* @returns Angle in radians and position point
-*/
-function getMarkerPosition(relativeValue, valueMode, flatten, radius, center = {
-	x: 50,
-	y: 50
-}) {
-	const angle = valueToAngle(relativeValue, valueMode, flatten);
-	return {
-		angle,
-		position: polarToCartesian(angle, radius, center)
-	};
-}
-/**
-* Get position for midpoint marker (used in bipolar/unipolar modes)
-* @param radius - Circle radius
-* @param center - Center point
-* @returns Position at top-center of circle
-*/
-function getMidpointPosition(radius, center = {
-	x: 50,
-	y: 50
-}) {
+};
+const readByte = (store, pos) => {
+	return store.data[pos] ?? 0;
+};
+const length = (store) => {
+	return store.data.length;
+};
+const clamp$1 = (value) => {
+	return Math.max(0, Math.min(255, value));
+};
+const writeByte = (store, pos, value) => {
+	const clampedValue = clamp$1(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$1(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 {
-		angle: MIDPOINT_ANGLE,
-		position: polarToCartesian(MIDPOINT_ANGLE, radius, center)
+		undos: [],
+		redos: []
 	};
-}
-/**
-* Clamp a value between min and max
-*/
-function clamp$1(value, min, max) {
-	return Math.min(Math.max(value, min), max);
-}
-/**
-* Scale a value from one range to another
-*/
-function scale(value, fromMin, fromMax, toMin, toMax) {
-	return toMin + (value - fromMin) / (fromMax - fromMin) * (toMax - toMin);
-}
+};
+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/radial-input/radial-input.ts
-const CENTER = {
-	x: 50,
-	y: 50
+//#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));
 };
-let RadialInputElement = class RadialInputElement extends i$3 {
-	#_radius;
-	get radius() {
-		return this.#_radius;
+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;
 	}
-	set radius(v) {
-		this.#_radius = clamp$1(v, 10, 50);
+	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;
 	}
-	#lanes;
-	#dragging;
-	#dragStartY;
-	#valueAtDragStart;
-	#changeDebounceTimer;
-	#isUserInteraction;
-	constructor() {
-		super();
-		this.#_radius = 45;
-		this.value = 0;
-		this.min = 0;
-		this.max = 100;
-		this.step = void 0;
-		this.valueMode = `range`;
-		this.flatten = .3;
-		this.markerStyle = `needle`;
-		this.wedge = false;
-		this.disabled = false;
-		this.#lanes = /* @__PURE__ */ new Map();
-		this.#dragging = false;
-		this.#dragStartY = 0;
-		this.#valueAtDragStart = 0;
-		this.#isUserInteraction = false;
-		this.#onPointerDown = (event) => {
-			if (this.disabled) return;
-			event.preventDefault();
-			const svg = this.renderRoot.querySelector(`svg`);
-			svg?.focus();
-			this.#dragging = true;
-			this.#dragStartY = event.clientY;
-			this.#valueAtDragStart = this.value;
-			this.toggleAttribute(`dragging`, true);
-			if (svg) svg.setPointerCapture(event.pointerId);
-			window.addEventListener(`pointermove`, this.#onPointerMove);
-			window.addEventListener(`pointerup`, this.#onPointerUp);
-			window.addEventListener(`pointercancel`, this.#onPointerUp);
-		};
-		this.#onPointerMove = (event) => {
-			if (!this.#dragging) return;
-			event.preventDefault();
-			const effectiveSensitivity = this.clientHeight * 2 * (event.shiftKey ? 10 : 1);
-			const deltaValue = (this.#dragStartY - event.clientY) / effectiveSensitivity * (this.max - this.min);
-			const relativeValue = scale(this.#valueAtDragStart + deltaValue, this.min, this.max, 0, 1);
-			this.#setValueFromRelative(clamp$1(relativeValue, 0, 1), true);
-		};
-		this.#onPointerUp = () => {
-			this.#dragging = false;
-			this.toggleAttribute(`dragging`, false);
-			const svg = this.renderRoot.querySelector(`svg`);
-			if (svg && `hasPointerCapture` in svg && typeof svg.hasPointerCapture === `function`) {
-				if (svg.hasPointerCapture(1)) svg.releasePointerCapture(1);
-			}
-			window.removeEventListener(`pointermove`, this.#onPointerMove);
-			window.removeEventListener(`pointerup`, this.#onPointerUp);
-			window.removeEventListener(`pointercancel`, this.#onPointerUp);
-		};
-		this.#onKeyDown = (event) => {
-			if (this.disabled) return;
-			const shiftDivisor = event.shiftKey ? 10 : 1;
-			const range = this.max - this.min;
-			const effectiveStep = resolveStep(range, this.stops, this.step) / shiftDivisor;
-			let handled = false;
-			switch (event.key) {
-				case `ArrowUp`:
-				case `ArrowRight`:
-					this.#setValueFromRelative(this.#getRelativeValue() + effectiveStep / range, true);
-					handled = true;
-					break;
-				case `ArrowDown`:
-				case `ArrowLeft`:
-					this.#setValueFromRelative(this.#getRelativeValue() - effectiveStep / range, true);
-					handled = true;
-					break;
-				case `Home`:
-					this.#setValueFromRelative(0, true);
-					handled = true;
-					break;
-				case `End`:
-					this.#setValueFromRelative(1, true);
-					handled = true;
-					break;
-			}
-			if (handled) event.preventDefault();
-		};
-		this.#lanes.set(`track`, {
-			key: `track`,
-			value: 1,
-			type: `fixed`,
-			offset: 0,
-			width: .16
-		});
-		this.#lanes.set(`value`, {
-			key: `value`,
-			value: 0,
-			type: `value`,
-			offset: 0,
-			width: .24
-		});
-	}
-	addLane(key, options) {
-		const relativeValue = this.#getRelativeValue();
-		this.#lanes.set(key, {
-			key,
-			value: options?.value ?? relativeValue,
-			type: options?.type ?? `value`,
-			offset: options?.offset ?? 0,
-			width: options?.width ?? .1
-		});
-		this.requestUpdate();
-	}
-	setLaneValue(key, value) {
-		const lane = this.#lanes.get(key);
-		if (lane) {
-			lane.value = clamp$1(value, 0, 1);
-			this.requestUpdate();
-		}
-	}
-	removeLane(key) {
-		this.#lanes.delete(key);
-		this.requestUpdate();
-	}
-	getLanes() {
-		return new Map(this.#lanes);
-	}
-	getLane(key) {
-		return this.#lanes.get(key);
+	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;
 	}
-	#getRelativeValue() {
-		return scale(this.value, this.min, this.max, 0, 1);
+	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;
 	}
-	#getEffectiveMarkerStyle() {
-		if (this.valueMode === `unipolar` && this.markerStyle === `needle`) return `none`;
-		return this.markerStyle;
+	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;
 	}
-	#quantise(value) {
-		if (this.stops && this.stops > 1) {
-			const step = (this.max - this.min) / this.stops;
-			return Math.round((value - this.min) / step) * step + this.min;
-		}
-		return value;
+	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;
 	}
-	#setValueFromRelative(relativeValue, isUserInteraction = false) {
-		const newValue = scale(relativeValue, 0, 1, this.min, this.max);
-		const clampedValue = this.#quantise(clamp$1(newValue, this.min, this.max));
-		if (clampedValue === this.value) return;
-		const previousValue = this.value;
-		this.value = clampedValue;
-		this.#isUserInteraction = isUserInteraction;
-		const valueLane = this.#lanes.get(`value`);
-		if (valueLane && valueLane.type === `value`) valueLane.value = this.#getRelativeValue();
-		if (this.hasAttribute(`data-tooltip-live`)) {
-			const percentage = Math.round(this.#getRelativeValue() * 100);
-			this.setAttribute(`data-tooltip`, `${percentage}%`);
-		}
-		if (isUserInteraction) {
-			this.dispatchEvent(new CustomEvent(`input`, {
-				detail: {
-					value: this.value,
-					valueRelative: this.#getRelativeValue()
-				},
-				bubbles: true,
-				composed: true
-			}));
-			this.#scheduleChangeEvent(previousValue);
-		} else this.#fireChangeEvent(previousValue);
+	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;
 	}
-	#scheduleChangeEvent(previousValue) {
-		if (this.#changeDebounceTimer !== void 0) clearTimeout(this.#changeDebounceTimer);
-		this.#changeDebounceTimer = window.setTimeout(() => {
-			this.#fireChangeEvent(previousValue);
-			this.#changeDebounceTimer = void 0;
-		}, 150);
-	}
-	#fireChangeEvent(previousValue) {
-		this.dispatchEvent(new CustomEvent(`change`, {
-			detail: {
-				value: this.value,
-				valueRelative: this.#getRelativeValue(),
-				previousValue
-			},
-			bubbles: true,
-			composed: true
-		}));
-	}
-	#onPointerDown;
-	#onPointerMove;
-	#onPointerUp;
-	#onKeyDown;
-	#renderCircleBorder() {
-		const path = generateCircleBorderPath(this.radius, this.flatten, CENTER);
-		const borderWidth = this.#getCssVar(`--dial-border-width`, 2);
-		return w`<path class="dial-border" d="${path}" fill="none" stroke="${getComputedStyle(this).getPropertyValue(`--dial-border-color`).trim() || `var(--surface-4)`}" stroke-width="${borderWidth}" stroke-linecap="round" vector-effect="non-scaling-stroke" />`;
-	}
-	#renderCircleFill() {
-		return w`<path class="dial-fill" d="${generateCircleBorderPath(this.radius, this.flatten, CENTER)}" fill="${getComputedStyle(this).getPropertyValue(`--dial-fill`).trim() || `transparent`}" />`;
-	}
-	#renderWedge() {
-		const { startAngle, endAngle, clockwise } = getWedgeAngles(this.#getRelativeValue(), this.valueMode, this.flatten);
-		const path = generateWedgePath(startAngle, endAngle, this.radius, CENTER, clockwise);
-		if (!path) return w``;
-		return w`<path class="wedge" d="${path}" />`;
-	}
-	#renderLane(lane) {
-		let arcPath = ``;
-		if (lane.type === `fixed`) arcPath = generateCircleBorderPath(this.radius - lane.offset * this.radius, this.flatten, CENTER);
-		else if (lane.type === `anchored`) {
-			const { startAngle, endAngle } = getAnchoredArcAngles(this.#getRelativeValue(), lane.value, this.valueMode, this.flatten);
-			arcPath = generateArcPath(startAngle, endAngle, this.radius - lane.offset * this.radius, CENTER);
-		} else {
-			const { startAngle, endAngle } = getValueArcAngles(lane.value, this.valueMode, this.flatten);
-			arcPath = generateArcPath(startAngle, endAngle, this.radius - lane.offset * this.radius, CENTER);
-		}
-		if (!arcPath) return w``;
-		return w`
-      <path 
-        class="lane" 
-        data-lane-key="${lane.key}" 
-        part="lane lane-${lane.key}"
-        d="${arcPath}"
-        style="
-          stroke-width: calc(var(--lane-${lane.key}-width, var(--lane-width)) * ${this.radius}%);
-          stroke-linecap: round;
-        "
-      />
-    `;
-	}
-	#getNeedlePath(angle, length, offset) {
-		const startRadius = offset * this.radius;
-		const endRadius = length * this.radius;
-		const start = {
-			x: CENTER.x + Math.cos(angle) * startRadius,
-			y: CENTER.y + Math.sin(angle) * startRadius
+	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 i$3 {
+	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();
 		};
-		const end = {
-			x: CENTER.x + Math.cos(angle) * endRadius,
-			y: CENTER.y + Math.sin(angle) * endRadius
+		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);
+			}
 		};
-		return `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
-	}
-	#renderValueMarker(needlePath) {
-		const { angle, position } = getMarkerPosition(this.#getRelativeValue(), this.valueMode, this.flatten, this.radius, CENTER);
-		const markerOffset = this.#getCssVar(`--marker-offset`, 1);
-		const markerBorderWidth = this.#getCssVar(`--marker-border-width`, 0);
-		const effectiveStyle = this.#getEffectiveMarkerStyle();
-		if (effectiveStyle === `dot`) {
-			const r = this.#getCssVar(`--marker-thickness`, .15) * this.radius;
-			const dotX = CENTER.x + (position.x - CENTER.x) * markerOffset;
-			const dotY = CENTER.y + (position.y - CENTER.y) * markerOffset;
-			if (markerBorderWidth > 0) return w`
-          <g class="value-marker" part="value-marker">
-            <use href="#dot-path" class="marker-border" />
-            <use href="#dot-path" class="marker-fill" />
-          </g>
-        `;
-			return w`
-        <g class="value-marker" part="value-marker">
-          <circle cx="${dotX}" cy="${dotY}" r="${r}" />
-        </g>
-      `;
-		} else if (effectiveStyle === `needle`) {
-			if (markerBorderWidth > 0 && needlePath) return w`
-          <g class="value-marker" part="value-marker">
-            <use href="#needle-path" class="marker-border" />
-            <use href="#needle-path" class="marker-fill" />
-          </g>
-        `;
-			const length = this.#getCssVar(`--marker-length`, .8);
-			const offset = this.#getCssVar(`--marker-offset`, .2);
-			return w`
-        <g class="value-marker" part="value-marker">
-          <path d="${this.#getNeedlePath(angle, length, offset)}" />
-        </g>
-      `;
-		}
-	}
-	#renderMidpointMarker() {
-		if (this.valueMode !== `bipolar` && this.valueMode !== `unipolar`) return w``;
-		const { position } = getMidpointPosition(this.radius, CENTER);
-		if (this.markerStyle === `dot`) {
-			const size = this.#getCssVar(`--midpoint-thickness`, .08);
-			return w`
-        <g class="midpoint-marker" part="midpoint-marker">
-          <circle 
-            cx="${position.x}" 
-            cy="${position.y}" 
-            r="${size * this.radius}" 
-          />
-        </g>
-      `;
-		} else {
-			const length = this.#getCssVar(`--midpoint-length`, .15);
-			const offset = this.#getCssVar(`--midpoint-offset`, .85);
-			const angle = -Math.PI / 2;
-			const startRadius = offset * this.radius;
-			const endRadius = (offset + length) * this.radius;
-			const start = {
-				x: CENTER.x + Math.cos(angle) * startRadius,
-				y: CENTER.y + Math.sin(angle) * startRadius
-			};
-			const end = {
-				x: CENTER.x + Math.cos(angle) * endRadius,
-				y: CENTER.y + Math.sin(angle) * endRadius
-			};
-			return w`
-        <g class="midpoint-marker" part="midpoint-marker">
-          <line 
-            x1="${start.x}" 
-            y1="${start.y}" 
-            x2="${end.x}" 
-            y2="${end.y}" 
-          />
-        </g>
-      `;
-		}
-	}
-	#getCssVar(name, defaultValue) {
-		const style = getComputedStyle(this);
-		const val = style.getPropertyValue(name).trim();
-		if (!val) return defaultValue;
-		if (val.includes(`calc(`)) {
-			const valueRelative = style.getPropertyValue(`--value-relative`).trim();
-			if (!valueRelative) {
-				const parsed = Number.parseFloat(val.replace(/[^0-9.-]/g, ``));
-				return Number.isNaN(parsed) ? defaultValue : parsed;
-			}
-			const evalStr = val.replace(/var\(--value-relative\)/g, valueRelative);
-			try {
-				const result = new Function(`return ${evalStr.replace(/calc\s*\(([^)]+)\)/g, `$1`)}`)();
-				return typeof result === `number` && !Number.isNaN(result) ? result : defaultValue;
-			} catch (e) {
-				const parsed = Number.parseFloat(val.replace(/[^0-9.-]/g, ``));
-				return Number.isNaN(parsed) ? defaultValue : parsed;
-			}
-		}
-		const parsed = Number.parseFloat(val);
-		return Number.isNaN(parsed) ? defaultValue : parsed;
-	}
-	willUpdate(changed) {
-		super.willUpdate(changed);
-		if (changed.has(`value`) || !this.hasUpdated) {
-			const valueLane = this.#lanes.get(`value`);
-			if (valueLane && valueLane.type === `value`) valueLane.value = this.#getRelativeValue();
-		}
-	}
-	render() {
-		const lanes = Array.from(this.#lanes.values());
-		const { angle, position } = getMarkerPosition(this.#getRelativeValue(), this.valueMode, this.flatten, this.radius, CENTER);
-		const needleLength = this.#getCssVar(`--marker-length`, .8);
-		const needleOffset = this.#getCssVar(`--marker-offset`, .2);
-		const markerBorderWidth = this.#getCssVar(`--marker-border-width`, 0);
-		const needlePath = markerBorderWidth > 0 ? this.#getNeedlePath(angle, needleLength, needleOffset) : void 0;
-		const dotR = this.#getCssVar(`--marker-thickness`, .15) * this.radius;
-		const defs = [];
-		if (needlePath) defs.push(w`<path id="needle-path" d="${needlePath}" />`);
-		if (markerBorderWidth > 0) defs.push(w`<circle id="dot-path" cx="${position.x}" cy="${position.y}" r="${dotR}" />`);
-		return b`
-      <svg
-        viewBox="0 0 100 100"
-        preserveAspectRatio="xMidYMid meet"
-        tabindex="${this.disabled ? -1 : 0}"
-        @pointerdown="${this.#onPointerDown}"
-        @keydown="${this.#onKeyDown}"
-        style="cursor: ${this.#dragging ? `ns-resize` : `grab`}"
-      >
-        ${defs.length > 0 ? w`<defs>${defs}</defs>` : ``}
-        ${this.#renderCircleFill()}
-        ${this.wedge ? this.#renderWedge() : ``}
-        ${this.#renderCircleBorder()}
-        ${lanes.map((lane) => this.#renderLane(lane))}
-        ${this.#renderMidpointMarker()}
-        ${this.#renderValueMarker(needlePath)}
-      </svg>
-    `;
-	}
-	updated(changed) {
-		super.updated(changed);
-		if (changed.has(`radius`)) this.style.setProperty(`--radius`, `${this.radius}%`);
-		this.style.setProperty(`--value-relative`, this.#getRelativeValue().toString());
-		if (changed.has(`flatten`)) {
-			const markerThickness = this.#getCssVar(`--marker-thickness`, .15);
-			const radius = this.#getCssVar(`--radius`, 45);
-			const markerPadding = Math.round(markerThickness * radius) + 5;
-			const viewBoxHeight = Math.round(100 * (1 - this.flatten)) + markerPadding;
-			this.style.setProperty(`--dial-height`, `${viewBoxHeight}px`);
-			const svg = this.renderRoot.querySelector(`svg`);
-			if (svg) svg.setAttribute(`viewBox`, `0 0 100 ${viewBoxHeight}`);
-		}
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		if (this.#changeDebounceTimer !== void 0) clearTimeout(this.#changeDebounceTimer);
-		this.#onPointerUp();
-	}
-	firstUpdated() {
-		const markerThickness = this.#getCssVar(`--marker-thickness`, .15);
-		const radius = this.#getCssVar(`--radius`, 45);
-		const markerPadding = Math.round(markerThickness * radius);
-		const viewBoxHeight = Math.round(100 * (1 - this.flatten)) + markerPadding;
-		this.style.setProperty(`--dial-height`, `${viewBoxHeight}px`);
-		const svg = this.renderRoot.querySelector(`svg`);
-		if (svg) svg.setAttribute(`viewBox`, `0 0 100 ${viewBoxHeight}`);
 	}
 	static {
-		this.styles = [prominenceStyles, i$6`
+		this.styles = i$6`
     :host {
-      display: inline-block;
-      width: 100px;
-      height: var(--dial-height, 100px);
-      touch-action: none;
-      user-select: none;
-      tabindex: 0;
+      --hex-row-height: 24px;
+      --hex-offset-width: 8ch;
+      --hex-font: monospace;
+      --hex-font-size: 0.85rem;
+      --hex-changed-weight: bold;
 
-      /* Dynamic value - set by JS */
-      --value-relative: 0;
+      --ascii-null: #808080;
+      --ascii-printable: #4caf50;
+      --ascii-whitespace: #ffffff;
+      --ascii-control: #f48fb1;
+      --ascii-other: #ffeb3b;
 
-      /* Lane widths (used in stroke-width calculations) */
-      --lane-width: 0.16;
-      --lane-track-width: 0.08;
-      --lane-value-width: 0.12;
+      --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);
     }
 
-    :host([disabled]) {
-      cursor: not-allowed;
+    .hex-editor {
+      display: flex;
+      flex-direction: column;
+      height: 300px;
+      overflow: hidden;
+      background: #1e1e1e;
+      color: #e0e0e0;
+      border: 1px solid #333;
+      border-radius: 4px;
     }
 
-    svg {
-      width: 100%;
-      height: 100%;
-      outline: none;
+    .scroll-container {
+      flex: 1;
+      overflow-y: auto;
+      position: relative;
     }
 
-    svg:active {
-      cursor: grabbing;
+    .header {
+      display: flex;
+      background: #2d2d2d;
+      font-weight: bold;
+      border-bottom: 1px solid #444;
+      height: var(--hex-row-height);
+      flex-shrink: 0;
+      align-items: center;
     }
 
-    svg:focus-visible {
-      outline: var(--radial-input-svg-focus-outline, 2px solid var(--accent));
-      outline-offset: var(--radial-input-svg-focus-outline-offset, 2px);
+    .row {
+      display: flex;
+      height: var(--hex-row-height);
+      align-items: center;
     }
 
-    .dial-border {
-      fill: none;
-      stroke: var(--dial-border-color, var(--surface-4));
-      stroke-width: var(--dial-border-width, 2px);
-      stroke-linecap: round;
-      vector-effect: non-scaling-stroke;
+    .row:hover {
+      background: rgba(255, 255, 255, 0.05);
     }
 
-    .dial-fill {
-      fill: var(--dial-fill, transparent);
+    .offset-cell {
+      width: var(--hex-offset-width);
+      padding: 0 8px;
+      text-align: right;
+      color: #888;
+      flex-shrink: 0;
+      box-sizing: border-box;
     }
 
-    .wedge {
-      fill: var(--wedge-fill, var(--accent));
-      fill-opacity: var(--wedge-fill-opacity, 0.25);
-      stroke: var(--wedge-border-color, var(--accent));
-      stroke-width: var(--wedge-border-width, 0);
-      stroke-opacity: var(--wedge-border-opacity, 1);
-      vector-effect: non-scaling-stroke;
+    .col-group {
+      display: inline-flex;
+      gap: 4px;
+      margin-right: 16px;
     }
 
-    .lane {
-      fill: none;
-      stroke-linecap: round;
-      stroke-dasharray: var(--lane-dasharray, none);
-      stroke-dashoffset: var(--lane-dashoffset, 0);
-      vector-effect: non-scaling-stroke;
+    .col-header {
+      width: calc(8ch + 28px);
+      padding: 0 8px;
+      color: #555;
+      text-align: right;
+      flex-shrink: 0;
+      box-sizing: border-box;
     }
 
-    .lane[data-lane-key='track'] {
-      stroke: var(--lane-track-color, var(--surface-4));
+    .col-header.active {
+      color: #aaa;
     }
 
-    .lane[data-lane-key='value'] {
-      stroke: var(--lane-value-color, var(--accent));
+    .text-header {
+      padding: 4px 8px;
+      color: #555;
+      width: calc(var(--columns, 4) * 4 * 1ch);
+      box-sizing: border-box;
+      flex-shrink: 0;
     }
 
-    .lane:not([data-lane-key='track']):not([data-lane-key='value']) {
-      stroke: var(--lane-color, var(--accent));
+    .text-header.active {
+      color: #aaa;
     }
 
-    .value-marker path,
-    .value-marker .marker-fill {
-      stroke: var(--marker-color, var(--accent));
-      stroke-width: calc(var(--marker-thickness, 0.15) * var(--radius, 45%));
-      stroke-linecap: round;
-      stroke-dasharray: var(--marker-dasharray, none);
-      stroke-dashoffset: var(--marker-dashoffset, 0);
-      vector-effect: non-scaling-stroke;
+    .hex-cell, .text-char {
+      display: inline-block;
+      width: 2ch;
+      text-align: center;
+      cursor: pointer;
+      user-select: none;
+      padding: 2px 0;
     }
 
-    .value-marker .marker-border {
-      stroke: var(--marker-border-color, transparent);
-      stroke-width: calc((var(--marker-thickness, 0.15) + var(--marker-border-width, 0) * 2) * var(--radius, 45%));
-      stroke-linecap: round;
-      vector-effect: non-scaling-stroke;
+    .hex-cell.selected, .text-char.selected {
+      background: rgba(100, 149, 237, 0.4);
     }
 
-    .value-marker .marker-border {
-      fill: none;
+    .hex-cell.changed, .text-char.changed {
+      font-weight: var(--hex-changed-weight);
     }
 
-    .value-marker .marker-fill,
-    .value-marker circle {
-      fill: var(--marker-color, var(--accent));
+    .hex-cell.editing {
+      background: rgba(255, 215, 0, 0.3);
     }
 
-    .midpoint-marker line {
-      stroke: var(--midpoint-color, var(--surface-muted-text));
-      stroke-width: var(--midpoint-thickness, 1px);
-      stroke-linecap: round;
-      vector-effect: non-scaling-stroke;
+
+    .text-area {
+      display: inline-flex;
+      gap: 0;
     }
 
-    .midpoint-marker circle {
-      fill: var(--midpoint-color, var(--surface-muted-text));
-      stroke: var(--midpoint-border-color, transparent);
-      stroke-width: var(--midpoint-border-width, 0);
-      vector-effect: non-scaling-stroke;
+    .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); }
+  `;
 	}
-};
-__decorate([n$2({ type: Number })], RadialInputElement.prototype, "radius", null);
-__decorate([n$2({ type: Number })], RadialInputElement.prototype, "value", void 0);
-__decorate([n$2({ type: Number })], RadialInputElement.prototype, "min", void 0);
-__decorate([n$2({ type: Number })], RadialInputElement.prototype, "max", void 0);
-__decorate([n$2({ type: Number })], RadialInputElement.prototype, "step", void 0);
-__decorate([n$2({ type: Number })], RadialInputElement.prototype, "stops", void 0);
-__decorate([n$2({
-	type: String,
-	attribute: `value-mode`
-})], RadialInputElement.prototype, "valueMode", void 0);
-__decorate([n$2({ type: Number })], RadialInputElement.prototype, "flatten", void 0);
-__decorate([n$2({
-	type: String,
-	attribute: `marker-style`
-})], RadialInputElement.prototype, "markerStyle", void 0);
-__decorate([n$2({ type: Boolean })], RadialInputElement.prototype, "wedge", void 0);
-__decorate([n$2({
-	type: Boolean,
-	reflect: true
-})], RadialInputElement.prototype, "disabled", void 0);
-RadialInputElement = __decorate([t$4(`ixfx-radial-input`)], RadialInputElement);
-//#endregion
-//#region src/labelled-radial-input/labelled-radial-input.ts
-let LabelledRadialInput = class LabelledRadialInput extends LabelledInputBase {
-	constructor(..._args) {
-		super(..._args);
-		this.inputSelector = `ixfx-radial-input`;
-		this.max = 100;
-		this.step = 1;
-		this.radius = 45;
-		this.flatten = .3;
-		this.markerStyle = `needle`;
-		this.wedge = false;
-		this.valueMode = `range`;
-		this.tooltip = false;
-		this.flip = false;
-		this.aspectRatioThreshold = 1.5;
-		this._isWide = false;
+	setData(data) {
+		this._store = createHexStore(data);
+		this._undoStack = createUndoRedoStack();
+		this._selection = null;
+		this._editState = null;
+		this._scrollTop = 0;
+		this.requestUpdate();
 	}
-	_getEffectivePrecision() {
-		if (this.hasAttribute(`precision`)) return this.precision;
-		if (this.step !== void 0) {
-			const decimalPart = String(this.step).split(`.`)[1];
-			return decimalPart ? decimalPart.length : 0;
+	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)
+			};
 		}
-		return this.max - this.min > 10 ? 0 : 2;
 	}
-	_handleResize(entries) {
-		super._handleResize(entries);
-		const { width, height } = entries[0].contentRect;
-		this._isWide = height > 0 && width / height >= this.aspectRatioThreshold;
+	containsPosition(pos) {
+		return selectionContains(this._selection, pos, this.columns);
 	}
-	_renderEditableNumber() {
-		if (this._isMini) return A;
-		const labelMinWidth = Math.max(this.label?.length ?? 0, 3) + 1;
-		return b`
-      <ixfx-editable-number
-        class="number"
-        mode="label"
-        no-drag
-        .value=${String(this.value)}
-        .min=${this.min}
-        .max=${this.max}
-        .step=${this.step}
-        .dragSensitivity=${this.dragSensitivity}
-        .precision=${this._getEffectivePrecision()}
-        .displayText=${this.label}
-        .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}
-        .formatter=${this._formatter}
-        style="--label-min-width: var(--label-width, ${labelMinWidth}ch); --label-align: center;"
-        @change=${this._handleNumberChange}
-      ></ixfx-editable-number>
-    `;
+	selectSingle(position) {
+		this._selection = {
+			kind: `single`,
+			pos: position
+		};
+		this._dispatchSelectEvent();
+		this.requestUpdate();
 	}
-	render() {
-		const showTooltip = this.tooltip || this._isMini;
-		const tooltipValue = this._getTooltipValue();
-		return b`
-      <div class="wrap ${this._isMini ? `mini` : ``} ${this._isWide ? `wide` : ``} ${this.flip ? `flip` : ``}">
-        ${this._renderEditableNumber()}
-        <ixfx-radial-input
-          class="dial"
-          .value=${this.value}
-          .min=${this.min}
-          .max=${this.max}
-          .step=${this.step}
-          .radius=${this.radius}
-          .flatten=${this.flatten}
-          .markerStyle=${this.markerStyle}
-          ?wedge=${this.wedge}
-          .valueMode=${this.valueMode}
-          data-tooltip-anchor="top"
-          data-tooltip=${tooltipValue}
-          data-tooltip-live=${showTooltip ? `input` : A}
-          @input=${this._handleSliderInput}
-          @change=${this._handleInputChange}
-        ></ixfx-radial-input>
-      </div>
-    `;
+	selectContiguous(start, end) {
+		this._selection = {
+			kind: `contiguous`,
+			start,
+			end
+		};
+		this._dispatchSelectEvent();
+		this.requestUpdate();
 	}
-	_getTooltipValue() {
-		const range = this.max - this.min;
-		const numValue = Number(this.value);
-		if (this.min === 0 && this.max === 1) return `${Math.round(numValue * 100)}%`;
-		if (range > 10) return String(Math.floor(numValue));
-		return numValue.toFixed(2);
+	selectRectangular(x, y, width, height) {
+		this._selection = {
+			kind: `rectangular`,
+			x,
+			y,
+			width,
+			height
+		};
+		this._dispatchSelectEvent();
+		this.requestUpdate();
 	}
-	static {
-		this.styles = i$6`
-  :host {
-    display: block;
-    min-height: var(--min-height, 60px);
-    min-width: var(--min-width, 60px);
-    width: var(--width, auto);
-    height: var(--height, auto);
-  }
-
-  :host(:focus-within) {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-
-    .wrap {
-      display: flex;
-      width: 100%;
-      height: 100%;
-      align-items: center;
-      justify-content: center;
-      flex-direction: var(--flow, column);
-    }
-
-    ixfx-editable-number {
-      flex-shrink: 0;
-      --label-align: center;
-      width: 100%;
-    }
-
-  ixfx-radial-input {
-    flex-shrink: 1;
-    min-height: 0;
-    min-width: 0;
-    max-width: 100%;
-    --radial-input-svg-focus-outline: none;
-    --radial-input-svg-focus-outline-offset: 0;
-    --prominence-tickled-opacity: 1;
-    --prominence-tickled-saturate: 1;
-  }
-
-    /* Wide layout (aspect ratio >= threshold): label to the left of dial */
-    .wrap.wide {
-      flex-direction: var(--flow, row);
-      justify-content: space-evenly;
-    }
-
-    .wrap.wide ixfx-editable-number {
-      --label-align: left;
-      width: var(--label-width, 5ch);
-    }
-
-    .wrap.wide ixfx-radial-input {
-      height: auto;
-      max-width: none;
-    }
-
-    /* Flip: label after dial (bottom in column, right in row) */
-    .wrap.flip ixfx-editable-number {
-      order: 1;
-    }
-
-    /* Mini mode: dial fills the component */
-    .wrap.mini {
-      justify-content: center;
-      gap: 0;
-    }
-
-    .wrap.mini ixfx-radial-input {
-      width: 100%;
-      height: 100%;
-    }
-  `;
+	clearSelection() {
+		this._selection = null;
+		this._dispatchSelectEvent();
+		this.requestUpdate();
 	}
-};
-__decorate([n$2({ type: Number })], LabelledRadialInput.prototype, "radius", void 0);
-__decorate([n$2({ type: Number })], LabelledRadialInput.prototype, "flatten", void 0);
-__decorate([n$2({
-	type: String,
-	attribute: `marker-style`
-})], LabelledRadialInput.prototype, "markerStyle", void 0);
-__decorate([n$2({ type: Boolean })], LabelledRadialInput.prototype, "wedge", void 0);
-__decorate([n$2({
-	type: String,
-	attribute: `value-mode`
-})], LabelledRadialInput.prototype, "valueMode", void 0);
-__decorate([n$2({ type: Boolean })], LabelledRadialInput.prototype, "tooltip", void 0);
-__decorate([n$2({ type: Boolean })], LabelledRadialInput.prototype, "flip", void 0);
-__decorate([n$2({
-	type: Number,
-	attribute: `aspect-ratio-threshold`
-})], LabelledRadialInput.prototype, "aspectRatioThreshold", void 0);
-__decorate([r$1()], LabelledRadialInput.prototype, "_isWide", void 0);
-LabelledRadialInput = __decorate([t$4(`ixfx-labelled-radial-input`)], LabelledRadialInput);
-//#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directive-helpers.js
-/**
-* @license
-* Copyright 2020 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/ const { I: t$1 } = j$1, i = (o) => o, s = () => document.createComment(""), v = (o, n, e) => {
-	const l = o._$AA.parentNode, d = void 0 === n ? o._$AB : n._$AA;
-	if (void 0 === e) e = new t$1(l.insertBefore(s(), d), l.insertBefore(s(), d), o, o.options);
-	else {
-		const t = e._$AB.nextSibling, n = e._$AM, c = n !== o;
-		if (c) {
-			let t;
-			e._$AQ?.(o), e._$AM = o, void 0 !== e._$AP && (t = o._$AU) !== n._$AU && e._$AP(t);
+	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;
 		}
-		if (t !== d || c) {
-			let o = e._$AA;
-			for (; o !== t;) {
-				const t = i(o).nextSibling;
-				i(l).insertBefore(o, d), o = t;
+		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;
 		}
 	}
-	return e;
-}, u$1 = (o, t, i = o) => (o._$AI(t, i), o), m = {}, p = (o, t = m) => o._$AH = t, M = (o) => o._$AH, h = (o) => {
-	o._$AR(), o._$AA.remove();
-};
-//#endregion
-//#region node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/repeat.js
-/**
-* @license
-* Copyright 2017 Google LLC
-* SPDX-License-Identifier: BSD-3-Clause
-*/
-const u = (e, s, t) => {
-	const r = /* @__PURE__ */ new Map();
-	for (let l = s; l <= t; l++) r.set(e[l], l);
-	return r;
-}, c = e$3(class extends i$2 {
-	constructor(e) {
-		if (super(e), e.type !== t$2.CHILD) throw Error("repeat() can only be used in text expressions");
-	}
-	dt(e, s, t) {
-		let r;
-		void 0 === t ? t = s : void 0 !== s && (r = s);
-		const l = [], o = [];
-		let i = 0;
-		for (const s of e) l[i] = r ? r(s, i) : i, o[i] = t(s, i), i++;
-		return {
-			values: o,
-			keys: l
-		};
-	}
-	render(e, s, t) {
-		return this.dt(e, s, t).values;
-	}
-	update(s, [t, r, c]) {
-		const d = M(s), { values: p$3, keys: a } = this.dt(t, r, c);
-		if (!Array.isArray(d)) return this.ut = a, p$3;
-		const h$3 = this.ut ??= [], v$2 = [];
-		let m, y, x = 0, j = d.length - 1, k = 0, w = p$3.length - 1;
-		for (; x <= j && k <= w;) if (null === d[x]) x++;
-		else if (null === d[j]) j--;
-		else if (h$3[x] === a[k]) v$2[k] = u$1(d[x], p$3[k]), x++, k++;
-		else if (h$3[j] === a[w]) v$2[w] = u$1(d[j], p$3[w]), j--, w--;
-		else if (h$3[x] === a[w]) v$2[w] = u$1(d[x], p$3[w]), v(s, v$2[w + 1], d[x]), x++, w--;
-		else if (h$3[j] === a[k]) v$2[k] = u$1(d[j], p$3[k]), v(s, d[x], d[j]), j--, k++;
-		else if (void 0 === m && (m = u(a, k, w), y = u(h$3, x, j)), m.has(h$3[x])) if (m.has(h$3[j])) {
-			const e = y.get(a[k]), t = void 0 !== e ? d[e] : null;
-			if (null === t) {
-				const e = v(s, d[x]);
-				u$1(e, p$3[k]), v$2[k] = e;
-			} else v$2[k] = u$1(t, p$3[k]), v(s, d[x], t), d[e] = null;
-			k++;
-		} else h(d[j]), j--;
-		else h(d[x]), x++;
-		for (; k <= w;) {
-			const e = v(s, v$2[w + 1]);
-			u$1(e, p$3[k]), v$2[k++] = e;
+	_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;
 		}
-		for (; x <= j;) {
-			const e = d[x++];
-			null !== e && h(e);
+		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();
 		}
-		return this.ut = a, p(s, v$2), E;
 	}
-});
-//#endregion
-//#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);
+	_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();
 		}
-		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;
+		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;
 	}
-	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;
+	_handleBackspace() {
+		if (!this._editState) return;
+		this._editState = {
+			...this._editState,
+			partial: ``
+		};
+		this.requestUpdate();
 	}
-	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;
+	_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();
 			}
-			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 i$3 {
-	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;
+			return;
+		}
+		if (partial === `` && key === `.`) {
+			this._editState = {
+				...this._editState,
+				partial: `.`
+			};
 			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();
+			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 (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;
+			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();
 			}
-			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);
-			}
-		};
+		} else if (partial !== ``) {
+			this._editState = {
+				...this._editState,
+				partial: ``
+			};
+			this.requestUpdate();
+		}
 	}
-	static {
-		this.styles = i$6`
-    :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); }
-  `;
+	_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();
+		}
 	}
-	setData(data) {
-		this._store = createHexStore(data);
-		this._undoStack = createUndoRedoStack();
-		this._selection = null;
-		this._editState = null;
-		this._scrollTop = 0;
+	_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();
 	}
-	undo() {
-		const diff = undo(this._undoStack);
-		if (!diff) return;
-		const reverse = reverseDiff(diff);
-		applyDiff(this._store, reverse);
-		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 b`
+      <div class="hex-editor" tabindex="0" @keydown=${this._onKeyDown} @pointerleave=${() => {}}>
+        <div class="header">
+          ${this.hideOffsetCol ? null : b`<span class="offset-cell">Offset</span>`}
+          ${this.hideHexCol ? null : c(colHeaders, (h) => b`<span class="col-header ${hexActive ? `active` : ``}">${h}</span>`)}
+          ${this.hideTextCol ? null : b`<span class="text-header ${textActive ? `active` : ``}">Text</span>`}
+        </div>
+        <div class="scroll-container" @scroll=${this._onScroll}>
+          <div style="height: ${topSpacerHeight}px"></div>
+          ${c(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 b`
+      <div class="row" data-row=${rowIndex}>
+        ${this.hideOffsetCol ? null : b`<span class="offset-cell">${offset.toString(16).toUpperCase().padStart(6, `0`)}</span>`}
+        ${this.hideHexCol ? null : c(Array.from({ length: this.columns }, (_, i) => i), (colIndex) => colIndex, (colIndex) => this._renderColumn(rowIndex, colIndex, changeset))}
+        ${this.hideTextCol ? null : b`
+          <span class="text-area">
+            ${c(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 b`
+      <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 b`<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 b`
+      <span
+        class=${classes.join(` `)}
+        style=${o$1(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 b`<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 b`
+      <span
+        class=${classes.join(` `)}
+        style=${o$1(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([n$2({ type: Number })], IxfxHexEditorElement.prototype, "columns", void 0);
+__decorate([n$2({ type: String })], IxfxHexEditorElement.prototype, "colourScheme", void 0);
+__decorate([n$2({ type: Boolean })], IxfxHexEditorElement.prototype, "showChangeset", void 0);
+__decorate([n$2({
+	type: Boolean,
+	attribute: `hide-offset-col`
+})], IxfxHexEditorElement.prototype, "hideOffsetCol", void 0);
+__decorate([n$2({
+	type: Boolean,
+	attribute: `hide-hex-col`
+})], IxfxHexEditorElement.prototype, "hideHexCol", void 0);
+__decorate([n$2({
+	type: Boolean,
+	attribute: `hide-text-col`
+})], IxfxHexEditorElement.prototype, "hideTextCol", void 0);
+__decorate([r$1()], IxfxHexEditorElement.prototype, "_selection", void 0);
+__decorate([r$1()], IxfxHexEditorElement.prototype, "_scrollTop", void 0);
+__decorate([r$1()], IxfxHexEditorElement.prototype, "_editState", void 0);
+__decorate([r$1()], IxfxHexEditorElement.prototype, "_containerH", void 0);
+__decorate([r$1()], IxfxHexEditorElement.prototype, "_shadeMap", void 0);
+__decorate([r$1()], IxfxHexEditorElement.prototype, "_focusSide", void 0);
+IxfxHexEditorElement = __decorate([t$4(`ixfx-hex-editor`)], IxfxHexEditorElement);
+//#endregion
+//#region src/radial-input/svg-utils.ts
+const PI2 = Math.PI * 2;
+const MIDPOINT_ANGLE = -Math.PI / 2;
+/**
+* Convert polar coordinates (angle in radians, radius) to SVG Cartesian coordinates
+* @param angle - Angle in radians (0 = right/east, increases clockwise in SVG)
+* @param radius - Distance from center
+* @param center - Center point (default: {x: 50, y: 50})
+* @returns Point in SVG coordinates
+*/
+function polarToCartesian(angle, radius, center = {
+	x: 50,
+	y: 50
+}) {
+	return {
+		x: center.x + Math.cos(angle) * radius,
+		y: center.y + Math.sin(angle) * radius
+	};
+}
+/**
+* Calculate start and end angles for a flattened circle
+* @param flatten - How much of the circle to hide (0..1): 0 = full circle, 0.5 = half circle, 1 = no arc
+* @returns Start and end angles in radians
+*/
+function getFlattenedCircleAngles(flatten) {
+	const halfArc = PI2 * (1 - flatten) / 2;
+	const topAngle = -Math.PI / 2;
+	const startAngle = topAngle - halfArc;
+	const endAngle = topAngle + halfArc;
+	return {
+		startAngle,
+		endAngle,
+		totalArc: endAngle - startAngle
+	};
+}
+/**
+* Map a value (0..1) to an angle based on value mode
+* @param relativeValue - Value in 0..1 range
+* @param valueMode - How to interpret the value
+* @param flatten - Circle flattening amount (0..1)
+* @returns Angle in radians
+*/
+function valueToAngle(relativeValue, valueMode, flatten) {
+	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
+	switch (valueMode) {
+		case "range": return startAngle + relativeValue * totalArc;
+		case "bipolar": if (relativeValue <= .5) return startAngle + relativeValue / .5 * (MIDPOINT_ANGLE - startAngle);
+		else return MIDPOINT_ANGLE + (relativeValue - .5) / .5 * (endAngle - MIDPOINT_ANGLE);
+		case "unipolar": return MIDPOINT_ANGLE;
+		default: return startAngle;
+	}
+}
+/**
+* Get start and end angles for a value arc
+* @param relativeValue - Value in 0..1 range
+* @param valueMode - How to interpret the value
+* @param flatten - Circle flattening amount (0..1)
+* @returns Start and end angles for the arc
+*/
+function getValueArcAngles(relativeValue, valueMode, flatten) {
+	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
+	switch (valueMode) {
+		case "range": return {
+			startAngle,
+			endAngle: startAngle + relativeValue * totalArc
+		};
+		case "bipolar": if (relativeValue < .5) return {
+			startAngle: startAngle + relativeValue / .5 * (MIDPOINT_ANGLE - startAngle),
+			endAngle: MIDPOINT_ANGLE
+		};
+		else if (relativeValue > .5) return {
+			startAngle: MIDPOINT_ANGLE,
+			endAngle: MIDPOINT_ANGLE + (relativeValue - .5) / .5 * (endAngle - MIDPOINT_ANGLE)
+		};
+		else return {
+			startAngle: MIDPOINT_ANGLE,
+			endAngle: MIDPOINT_ANGLE
+		};
+		case "unipolar": {
+			const spreadAmount = relativeValue * totalArc / 2;
+			return {
+				startAngle: MIDPOINT_ANGLE - spreadAmount,
+				endAngle: MIDPOINT_ANGLE + spreadAmount
+			};
+		}
+		default: return {
+			startAngle,
+			endAngle: startAngle
+		};
+	}
+}
+/**
+* Get start and end angles for an anchored arc
+* Centered on current value position, extends equally in both directions
+* @param relativeValue - Current value position (0..1)
+* @param laneValue - Width of the arc (0..1, where 1 = full range)
+* @param valueMode - How to interpret the value
+* @param flatten - Circle flattening amount (0..1)
+* @returns Start and end angles for the arc
+*/
+function getAnchoredArcAngles(relativeValue, laneValue, valueMode, flatten) {
+	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
+	const centerAngle = valueToAngle(relativeValue, valueMode, flatten);
+	const halfWidth = laneValue * totalArc / 2;
+	let arcStart = centerAngle - halfWidth;
+	let arcEnd = centerAngle + halfWidth;
+	if (arcStart < startAngle) arcStart = startAngle;
+	if (arcEnd > endAngle) arcEnd = endAngle;
+	if (arcStart >= arcEnd) return {
+		startAngle: centerAngle,
+		endAngle: centerAngle
+	};
+	return {
+		startAngle: arcStart,
+		endAngle: arcEnd
+	};
+}
+/**
+* Generate SVG path for an arc
+* @param startAngle - Start angle in radians
+* @param endAngle - End angle in radians
+* @param radius - Arc radius
+* @param center - Center point
+* @returns SVG path data string
+*/
+function generateArcPath(startAngle, endAngle, radius, center = {
+	x: 50,
+	y: 50
+}) {
+	if (startAngle === endAngle) return "";
+	let arcLength = endAngle - startAngle;
+	if (arcLength < 0) arcLength += PI2;
+	if (arcLength >= PI2 - .001) {
+		const adjustedEnd = startAngle + PI2 - .001;
+		const start = polarToCartesian(startAngle, radius, center);
+		const end = polarToCartesian(adjustedEnd, radius, center);
+		return `M ${start.x},${start.y} A ${radius},${radius} 0 1 1 ${end.x},${end.y}`;
 	}
-	redo() {
-		const diff = redo(this._undoStack);
-		if (!diff) return;
-		applyDiff(this._store, diff);
-		this.requestUpdate();
+	const start = polarToCartesian(startAngle, radius, center);
+	const end = polarToCartesian(endAngle, radius, center);
+	const largeArcFlag = arcLength > Math.PI ? 1 : 0;
+	return `M ${start.x},${start.y} A ${radius},${radius} 0 ${largeArcFlag} 1 ${end.x},${end.y}`;
+}
+/**
+* Generate SVG path for a full flattened circle border
+* @param radius - Circle radius
+* @param flatten - Flattening amount (0..1)
+* @param center - Center point
+* @returns SVG path data string
+*/
+function generateCircleBorderPath(radius, flatten, center = {
+	x: 50,
+	y: 50
+}) {
+	const { startAngle, endAngle } = getFlattenedCircleAngles(flatten);
+	return generateArcPath(startAngle, endAngle, radius, center);
+}
+/**
+* Generate SVG path data for a filled wedge (pie-slice) sector
+* @param startAngle - Start angle in radians
+* @param endAngle - End angle in radians
+* @param radius - Wedge radius (same as dial radius)
+* @param center - Center point
+* @param clockwise - Whether to draw arc clockwise (true) or counterclockwise (false)
+* @returns SVG path data string for filled wedge
+*/
+function generateWedgePath(startAngle, endAngle, radius, center = {
+	x: 50,
+	y: 50
+}, clockwise = true) {
+	if (startAngle === endAngle) return "";
+	let arcLength = endAngle - startAngle;
+	if (arcLength < 0) arcLength += PI2;
+	if (arcLength >= PI2 - .001) {
+		const start = polarToCartesian(startAngle, radius, center);
+		const adjEnd = polarToCartesian(startAngle + PI2 - .001, radius, center);
+		const largeArcFlag = 1;
+		const sweepFlag = clockwise ? 1 : 0;
+		return `M ${center.x},${center.y} L ${start.x},${start.y} A ${radius},${radius} 0 ${largeArcFlag} ${sweepFlag} ${adjEnd.x},${adjEnd.y} Z`;
 	}
-	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();
+	let actualStartAngle = startAngle;
+	let actualEndAngle = endAngle;
+	let actualClockwise = clockwise;
+	if (!clockwise && arcLength > Math.PI) {
+		actualStartAngle = endAngle;
+		actualEndAngle = startAngle;
+		actualClockwise = true;
+		arcLength = PI2 - arcLength;
 	}
-	*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)
+	const start = polarToCartesian(actualStartAngle, radius, center);
+	const end = polarToCartesian(actualEndAngle, radius, center);
+	const largeArcFlag = arcLength > Math.PI ? 1 : 0;
+	const sweepFlag = actualClockwise ? 1 : 0;
+	return `M ${center.x},${center.y} L ${start.x},${start.y} A ${radius},${radius} 0 ${largeArcFlag} ${sweepFlag} ${end.x},${end.y} Z`;
+}
+/**
+* Get wedge angles based on value mode
+* @param relativeValue - Value in 0..1 range
+* @param valueMode - How to interpret the value
+* @param flatten - Circle flattening amount (0..1)
+* @returns Object with startAngle, endAngle, and clockwise flag
+*/
+function getWedgeAngles(relativeValue, valueMode, flatten) {
+	const { startAngle, endAngle, totalArc } = getFlattenedCircleAngles(flatten);
+	const valueAngle = valueToAngle(relativeValue, valueMode, flatten);
+	switch (valueMode) {
+		case "range": return {
+			startAngle,
+			endAngle: valueAngle,
+			clockwise: true
+		};
+		case "bipolar": if (relativeValue < .5) return {
+			startAngle: MIDPOINT_ANGLE,
+			endAngle: valueAngle,
+			clockwise: false
+		};
+		else return {
+			startAngle: MIDPOINT_ANGLE,
+			endAngle: valueAngle,
+			clockwise: true
+		};
+		case "unipolar": {
+			const halfSpread = relativeValue * totalArc / 2;
+			return {
+				startAngle: MIDPOINT_ANGLE - halfSpread,
+				endAngle: MIDPOINT_ANGLE + halfSpread,
+				clockwise: true
 			};
 		}
+		default: return {
+			startAngle,
+			endAngle: startAngle,
+			clockwise: true
+		};
 	}
-	containsPosition(pos) {
-		return selectionContains(this._selection, pos, this.columns);
+}
+/**
+* Get position for a marker (needle or dot) at a given value
+* @param relativeValue - Value in 0..1 range
+* @param valueMode - How to interpret the value
+* @param flatten - Circle flattening amount (0..1)
+* @param radius - Circle radius
+* @param center - Center point
+* @returns Angle in radians and position point
+*/
+function getMarkerPosition(relativeValue, valueMode, flatten, radius, center = {
+	x: 50,
+	y: 50
+}) {
+	const angle = valueToAngle(relativeValue, valueMode, flatten);
+	return {
+		angle,
+		position: polarToCartesian(angle, radius, center)
+	};
+}
+/**
+* Get position for midpoint marker (used in bipolar/unipolar modes)
+* @param radius - Circle radius
+* @param center - Center point
+* @returns Position at top-center of circle
+*/
+function getMidpointPosition(radius, center = {
+	x: 50,
+	y: 50
+}) {
+	return {
+		angle: MIDPOINT_ANGLE,
+		position: polarToCartesian(MIDPOINT_ANGLE, radius, center)
+	};
+}
+/**
+* Clamp a value between min and max
+*/
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+/**
+* Scale a value from one range to another
+*/
+function scale(value, fromMin, fromMax, toMin, toMax) {
+	return toMin + (value - fromMin) / (fromMax - fromMin) * (toMax - toMin);
+}
+//#endregion
+//#region src/radial-input/radial-input.ts
+const CENTER = {
+	x: 50,
+	y: 50
+};
+let RadialInputElement = class RadialInputElement extends i$3 {
+	#_radius;
+	get radius() {
+		return this.#_radius;
 	}
-	selectSingle(position) {
-		this._selection = {
-			kind: `single`,
-			pos: position
+	set radius(v) {
+		this.#_radius = clamp(v, 10, 50);
+	}
+	#lanes;
+	#dragging;
+	#dragStartY;
+	#valueAtDragStart;
+	#changeDebounceTimer;
+	#isUserInteraction;
+	constructor() {
+		super();
+		this.#_radius = 45;
+		this.value = 0;
+		this.min = 0;
+		this.max = 100;
+		this.step = void 0;
+		this.valueMode = `range`;
+		this.flatten = .3;
+		this.markerStyle = `needle`;
+		this.wedge = false;
+		this.disabled = false;
+		this.#lanes = /* @__PURE__ */ new Map();
+		this.#dragging = false;
+		this.#dragStartY = 0;
+		this.#valueAtDragStart = 0;
+		this.#isUserInteraction = false;
+		this.#onPointerDown = (event) => {
+			if (this.disabled) return;
+			event.preventDefault();
+			const svg = this.renderRoot.querySelector(`svg`);
+			svg?.focus();
+			this.#dragging = true;
+			this.#dragStartY = event.clientY;
+			this.#valueAtDragStart = this.value;
+			this.toggleAttribute(`dragging`, true);
+			if (svg) svg.setPointerCapture(event.pointerId);
+			window.addEventListener(`pointermove`, this.#onPointerMove);
+			window.addEventListener(`pointerup`, this.#onPointerUp);
+			window.addEventListener(`pointercancel`, this.#onPointerUp);
 		};
-		this._dispatchSelectEvent();
-		this.requestUpdate();
-	}
-	selectContiguous(start, end) {
-		this._selection = {
-			kind: `contiguous`,
-			start,
-			end
+		this.#onPointerMove = (event) => {
+			if (!this.#dragging) return;
+			event.preventDefault();
+			const effectiveSensitivity = this.clientHeight * 2 * (event.shiftKey ? 10 : 1);
+			const deltaValue = (this.#dragStartY - event.clientY) / effectiveSensitivity * (this.max - this.min);
+			const relativeValue = scale(this.#valueAtDragStart + deltaValue, this.min, this.max, 0, 1);
+			this.#setValueFromRelative(clamp(relativeValue, 0, 1), true);
 		};
-		this._dispatchSelectEvent();
-		this.requestUpdate();
-	}
-	selectRectangular(x, y, width, height) {
-		this._selection = {
-			kind: `rectangular`,
-			x,
-			y,
-			width,
-			height
+		this.#onPointerUp = () => {
+			this.#dragging = false;
+			this.toggleAttribute(`dragging`, false);
+			const svg = this.renderRoot.querySelector(`svg`);
+			if (svg && `hasPointerCapture` in svg && typeof svg.hasPointerCapture === `function`) {
+				if (svg.hasPointerCapture(1)) svg.releasePointerCapture(1);
+			}
+			window.removeEventListener(`pointermove`, this.#onPointerMove);
+			window.removeEventListener(`pointerup`, this.#onPointerUp);
+			window.removeEventListener(`pointercancel`, this.#onPointerUp);
 		};
-		this._dispatchSelectEvent();
+		this.#onKeyDown = (event) => {
+			if (this.disabled) return;
+			const shiftDivisor = event.shiftKey ? 10 : 1;
+			const range = this.max - this.min;
+			const effectiveStep = resolveStep(range, this.stops, this.step) / shiftDivisor;
+			let handled = false;
+			switch (event.key) {
+				case `ArrowUp`:
+				case `ArrowRight`:
+					this.#setValueFromRelative(this.#getRelativeValue() + effectiveStep / range, true);
+					handled = true;
+					break;
+				case `ArrowDown`:
+				case `ArrowLeft`:
+					this.#setValueFromRelative(this.#getRelativeValue() - effectiveStep / range, true);
+					handled = true;
+					break;
+				case `Home`:
+					this.#setValueFromRelative(0, true);
+					handled = true;
+					break;
+				case `End`:
+					this.#setValueFromRelative(1, true);
+					handled = true;
+					break;
+			}
+			if (handled) event.preventDefault();
+		};
+		this.#lanes.set(`track`, {
+			key: `track`,
+			value: 1,
+			type: `fixed`,
+			offset: 0,
+			width: .16
+		});
+		this.#lanes.set(`value`, {
+			key: `value`,
+			value: 0,
+			type: `value`,
+			offset: 0,
+			width: .24
+		});
+	}
+	addLane(key, options) {
+		const relativeValue = this.#getRelativeValue();
+		this.#lanes.set(key, {
+			key,
+			value: options?.value ?? relativeValue,
+			type: options?.type ?? `value`,
+			offset: options?.offset ?? 0,
+			width: options?.width ?? .1
+		});
 		this.requestUpdate();
 	}
-	clearSelection() {
-		this._selection = null;
-		this._dispatchSelectEvent();
+	setLaneValue(key, value) {
+		const lane = this.#lanes.get(key);
+		if (lane) {
+			lane.value = clamp(value, 0, 1);
+			this.requestUpdate();
+		}
+	}
+	removeLane(key) {
+		this.#lanes.delete(key);
 		this.requestUpdate();
 	}
-	getSelection() {
-		return this._selection;
+	getLanes() {
+		return new Map(this.#lanes);
 	}
-	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();
+	getLane(key) {
+		return this.#lanes.get(key);
 	}
-	_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;
-		}
+	#getRelativeValue() {
+		return scale(this.value, this.min, this.max, 0, 1);
 	}
-	_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();
-		}
+	#getEffectiveMarkerStyle() {
+		if (this.valueMode === `unipolar` && this.markerStyle === `needle`) return `none`;
+		return this.markerStyle;
 	}
-	_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();
+	#quantise(value) {
+		if (this.stops && this.stops > 1) {
+			const step = (this.max - this.min) / this.stops;
+			return Math.round((value - this.min) / step) * step + this.min;
 		}
-		if (this._pointerMode === `drag-value` && this._currentDragDiff) {
-			push(this._undoStack, this._currentDragDiff);
-			this._dispatchChangeEvent(this._currentDragDiff);
+		return value;
+	}
+	#setValueFromRelative(relativeValue, isUserInteraction = false) {
+		const newValue = scale(relativeValue, 0, 1, this.min, this.max);
+		const clampedValue = this.#quantise(clamp(newValue, this.min, this.max));
+		if (clampedValue === this.value) return;
+		const previousValue = this.value;
+		this.value = clampedValue;
+		this.#isUserInteraction = isUserInteraction;
+		const valueLane = this.#lanes.get(`value`);
+		if (valueLane && valueLane.type === `value`) valueLane.value = this.#getRelativeValue();
+		if (this.hasAttribute(`data-tooltip-live`)) {
+			const percentage = Math.round(this.#getRelativeValue() * 100);
+			this.setAttribute(`data-tooltip`, `${percentage}%`);
 		}
-		this._pointerMode = null;
-		this._dragStart = null;
-		this._dragAnchor = null;
-		this._currentDragDiff = null;
-		this._shiftClickTarget = null;
+		if (isUserInteraction) {
+			this.dispatchEvent(new CustomEvent(`input`, {
+				detail: {
+					value: this.value,
+					valueRelative: this.#getRelativeValue()
+				},
+				bubbles: true,
+				composed: true
+			}));
+			this.#scheduleChangeEvent(previousValue);
+		} else this.#fireChangeEvent(previousValue);
 	}
-	_handleBackspace() {
-		if (!this._editState) return;
-		this._editState = {
-			...this._editState,
-			partial: ``
+	#scheduleChangeEvent(previousValue) {
+		if (this.#changeDebounceTimer !== void 0) clearTimeout(this.#changeDebounceTimer);
+		this.#changeDebounceTimer = window.setTimeout(() => {
+			this.#fireChangeEvent(previousValue);
+			this.#changeDebounceTimer = void 0;
+		}, 150);
+	}
+	#fireChangeEvent(previousValue) {
+		this.dispatchEvent(new CustomEvent(`change`, {
+			detail: {
+				value: this.value,
+				valueRelative: this.#getRelativeValue(),
+				previousValue
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#onPointerDown;
+	#onPointerMove;
+	#onPointerUp;
+	#onKeyDown;
+	#renderCircleBorder() {
+		const path = generateCircleBorderPath(this.radius, this.flatten, CENTER);
+		const borderWidth = this.#getCssVar(`--dial-border-width`, 2);
+		return w`<path class="dial-border" d="${path}" fill="none" stroke="${getComputedStyle(this).getPropertyValue(`--dial-border-color`).trim() || `var(--surface-4)`}" stroke-width="${borderWidth}" stroke-linecap="round" vector-effect="non-scaling-stroke" />`;
+	}
+	#renderCircleFill() {
+		return w`<path class="dial-fill" d="${generateCircleBorderPath(this.radius, this.flatten, CENTER)}" fill="${getComputedStyle(this).getPropertyValue(`--dial-fill`).trim() || `transparent`}" />`;
+	}
+	#renderWedge() {
+		const { startAngle, endAngle, clockwise } = getWedgeAngles(this.#getRelativeValue(), this.valueMode, this.flatten);
+		const path = generateWedgePath(startAngle, endAngle, this.radius, CENTER, clockwise);
+		if (!path) return w``;
+		return w`<path class="wedge" d="${path}" />`;
+	}
+	#renderLane(lane) {
+		let arcPath = ``;
+		if (lane.type === `fixed`) arcPath = generateCircleBorderPath(this.radius - lane.offset * this.radius, this.flatten, CENTER);
+		else if (lane.type === `anchored`) {
+			const { startAngle, endAngle } = getAnchoredArcAngles(this.#getRelativeValue(), lane.value, this.valueMode, this.flatten);
+			arcPath = generateArcPath(startAngle, endAngle, this.radius - lane.offset * this.radius, CENTER);
+		} else {
+			const { startAngle, endAngle } = getValueArcAngles(lane.value, this.valueMode, this.flatten);
+			arcPath = generateArcPath(startAngle, endAngle, this.radius - lane.offset * this.radius, CENTER);
+		}
+		if (!arcPath) return w``;
+		return w`
+      <path 
+        class="lane" 
+        data-lane-key="${lane.key}" 
+        part="lane lane-${lane.key}"
+        d="${arcPath}"
+        style="
+          stroke-width: calc(var(--lane-${lane.key}-width, var(--lane-width)) * ${this.radius}%);
+          stroke-linecap: round;
+        "
+      />
+    `;
+	}
+	#getNeedlePath(angle, length, offset) {
+		const startRadius = offset * this.radius;
+		const endRadius = length * this.radius;
+		const start = {
+			x: CENTER.x + Math.cos(angle) * startRadius,
+			y: CENTER.y + Math.sin(angle) * startRadius
 		};
-		this.requestUpdate();
+		const end = {
+			x: CENTER.x + Math.cos(angle) * endRadius,
+			y: CENTER.y + Math.sin(angle) * endRadius
+		};
+		return `M ${start.x} ${start.y} L ${end.x} ${end.y}`;
 	}
-	_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;
+	#renderValueMarker(needlePath) {
+		const { angle, position } = getMarkerPosition(this.#getRelativeValue(), this.valueMode, this.flatten, this.radius, CENTER);
+		const markerOffset = this.#getCssVar(`--marker-offset`, 1);
+		const markerBorderWidth = this.#getCssVar(`--marker-border-width`, 0);
+		const effectiveStyle = this.#getEffectiveMarkerStyle();
+		if (effectiveStyle === `dot`) {
+			const r = this.#getCssVar(`--marker-thickness`, .15) * this.radius;
+			const dotX = CENTER.x + (position.x - CENTER.x) * markerOffset;
+			const dotY = CENTER.y + (position.y - CENTER.y) * markerOffset;
+			if (markerBorderWidth > 0) return w`
+          <g class="value-marker" part="value-marker">
+            <use href="#dot-path" class="marker-border" />
+            <use href="#dot-path" class="marker-fill" />
+          </g>
+        `;
+			return w`
+        <g class="value-marker" part="value-marker">
+          <circle cx="${dotX}" cy="${dotY}" r="${r}" />
+        </g>
+      `;
+		} else if (effectiveStyle === `needle`) {
+			if (markerBorderWidth > 0 && needlePath) return w`
+          <g class="value-marker" part="value-marker">
+            <use href="#needle-path" class="marker-border" />
+            <use href="#needle-path" class="marker-fill" />
+          </g>
+        `;
+			const length = this.#getCssVar(`--marker-length`, .8);
+			const offset = this.#getCssVar(`--marker-offset`, .2);
+			return w`
+        <g class="value-marker" part="value-marker">
+          <path d="${this.#getNeedlePath(angle, length, offset)}" />
+        </g>
+      `;
 		}
-		if (partial === `` && key === `.`) {
-			this._editState = {
-				...this._editState,
-				partial: `.`
+	}
+	#renderMidpointMarker() {
+		if (this.valueMode !== `bipolar` && this.valueMode !== `unipolar`) return w``;
+		const { position } = getMidpointPosition(this.radius, CENTER);
+		if (this.markerStyle === `dot`) {
+			const size = this.#getCssVar(`--midpoint-thickness`, .08);
+			return w`
+        <g class="midpoint-marker" part="midpoint-marker">
+          <circle 
+            cx="${position.x}" 
+            cy="${position.y}" 
+            r="${size * this.radius}" 
+          />
+        </g>
+      `;
+		} else {
+			const length = this.#getCssVar(`--midpoint-length`, .15);
+			const offset = this.#getCssVar(`--midpoint-offset`, .85);
+			const angle = -Math.PI / 2;
+			const startRadius = offset * this.radius;
+			const endRadius = (offset + length) * this.radius;
+			const start = {
+				x: CENTER.x + Math.cos(angle) * startRadius,
+				y: CENTER.y + Math.sin(angle) * startRadius
 			};
-			this.requestUpdate();
-			return;
+			const end = {
+				x: CENTER.x + Math.cos(angle) * endRadius,
+				y: CENTER.y + Math.sin(angle) * endRadius
+			};
+			return w`
+        <g class="midpoint-marker" part="midpoint-marker">
+          <line 
+            x1="${start.x}" 
+            y1="${start.y}" 
+            x2="${end.x}" 
+            y2="${end.y}" 
+          />
+        </g>
+      `;
 		}
-		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();
+	}
+	#getCssVar(name, defaultValue) {
+		const style = getComputedStyle(this);
+		const val = style.getPropertyValue(name).trim();
+		if (!val) return defaultValue;
+		if (val.includes(`calc(`)) {
+			const valueRelative = style.getPropertyValue(`--value-relative`).trim();
+			if (!valueRelative) {
+				const parsed = Number.parseFloat(val.replace(/[^0-9.-]/g, ``));
+				return Number.isNaN(parsed) ? defaultValue : parsed;
 			}
-			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();
+			const evalStr = val.replace(/var\(--value-relative\)/g, valueRelative);
+			try {
+				const result = new Function(`return ${evalStr.replace(/calc\s*\(([^)]+)\)/g, `$1`)}`)();
+				return typeof result === `number` && !Number.isNaN(result) ? result : defaultValue;
+			} catch (e) {
+				const parsed = Number.parseFloat(val.replace(/[^0-9.-]/g, ``));
+				return Number.isNaN(parsed) ? defaultValue : parsed;
 			}
-		} 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();
+		const parsed = Number.parseFloat(val);
+		return Number.isNaN(parsed) ? defaultValue : parsed;
+	}
+	willUpdate(changed) {
+		super.willUpdate(changed);
+		if (changed.has(`value`) || !this.hasUpdated) {
+			const valueLane = this.#lanes.get(`value`);
+			if (valueLane && valueLane.type === `value`) valueLane.value = this.#getRelativeValue();
 		}
 	}
-	_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();
+	render() {
+		const lanes = Array.from(this.#lanes.values());
+		const { angle, position } = getMarkerPosition(this.#getRelativeValue(), this.valueMode, this.flatten, this.radius, CENTER);
+		const needleLength = this.#getCssVar(`--marker-length`, .8);
+		const needleOffset = this.#getCssVar(`--marker-offset`, .2);
+		const markerBorderWidth = this.#getCssVar(`--marker-border-width`, 0);
+		const needlePath = markerBorderWidth > 0 ? this.#getNeedlePath(angle, needleLength, needleOffset) : void 0;
+		const dotR = this.#getCssVar(`--marker-thickness`, .15) * this.radius;
+		const defs = [];
+		if (needlePath) defs.push(w`<path id="needle-path" d="${needlePath}" />`);
+		if (markerBorderWidth > 0) defs.push(w`<circle id="dot-path" cx="${position.x}" cy="${position.y}" r="${dotR}" />`);
+		return b`
+      <svg
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid meet"
+        tabindex="${this.disabled ? -1 : 0}"
+        @pointerdown="${this.#onPointerDown}"
+        @keydown="${this.#onKeyDown}"
+        style="cursor: ${this.#dragging ? `ns-resize` : `grab`}"
+      >
+        ${defs.length > 0 ? w`<defs>${defs}</defs>` : ``}
+        ${this.#renderCircleFill()}
+        ${this.wedge ? this.#renderWedge() : ``}
+        ${this.#renderCircleBorder()}
+        ${lanes.map((lane) => this.#renderLane(lane))}
+        ${this.#renderMidpointMarker()}
+        ${this.#renderValueMarker(needlePath)}
+      </svg>
+    `;
 	}
-	_dispatchChangeEvent(diff) {
-		this.dispatchEvent(new CustomEvent(`hex-change`, {
-			detail: { diff },
-			bubbles: true,
-			composed: true
-		}));
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`radius`)) this.style.setProperty(`--radius`, `${this.radius}%`);
+		this.style.setProperty(`--value-relative`, this.#getRelativeValue().toString());
+		if (changed.has(`flatten`)) {
+			const markerThickness = this.#getCssVar(`--marker-thickness`, .15);
+			const radius = this.#getCssVar(`--radius`, 45);
+			const markerPadding = Math.round(markerThickness * radius) + 5;
+			const viewBoxHeight = Math.round(100 * (1 - this.flatten)) + markerPadding;
+			this.style.setProperty(`--dial-height`, `${viewBoxHeight}px`);
+			const svg = this.renderRoot.querySelector(`svg`);
+			if (svg) svg.setAttribute(`viewBox`, `0 0 100 ${viewBoxHeight}`);
+		}
 	}
-	_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
-		}));
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.#changeDebounceTimer !== void 0) clearTimeout(this.#changeDebounceTimer);
+		this.#onPointerUp();
 	}
-	_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(() => {});
+	firstUpdated() {
+		const markerThickness = this.#getCssVar(`--marker-thickness`, .15);
+		const radius = this.#getCssVar(`--radius`, 45);
+		const markerPadding = Math.round(markerThickness * radius);
+		const viewBoxHeight = Math.round(100 * (1 - this.flatten)) + markerPadding;
+		this.style.setProperty(`--dial-height`, `${viewBoxHeight}px`);
+		const svg = this.renderRoot.querySelector(`svg`);
+		if (svg) svg.setAttribute(`viewBox`, `0 0 100 ${viewBoxHeight}`);
 	}
-	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();
-		}
+	static {
+		this.styles = [prominenceStyles, i$6`
+    :host {
+      display: inline-block;
+      width: 100px;
+      height: var(--dial-height, 100px);
+      touch-action: none;
+      user-select: none;
+      tabindex: 0;
+
+      /* Dynamic value - set by JS */
+      --value-relative: 0;
+
+      /* Lane widths (used in stroke-width calculations) */
+      --lane-width: 0.16;
+      --lane-track-width: 0.08;
+      --lane-value-width: 0.12;
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+      outline: none;
+    }
+
+    svg:active {
+      cursor: grabbing;
+    }
+
+    svg:focus-visible {
+      outline: var(--radial-input-svg-focus-outline, 2px solid var(--accent));
+      outline-offset: var(--radial-input-svg-focus-outline-offset, 2px);
+    }
+
+    .dial-border {
+      fill: none;
+      stroke: var(--dial-border-color, var(--surface-4));
+      stroke-width: var(--dial-border-width, 2px);
+      stroke-linecap: round;
+      vector-effect: non-scaling-stroke;
+    }
+
+    .dial-fill {
+      fill: var(--dial-fill, transparent);
+    }
+
+    .wedge {
+      fill: var(--wedge-fill, var(--accent));
+      fill-opacity: var(--wedge-fill-opacity, 0.25);
+      stroke: var(--wedge-border-color, var(--accent));
+      stroke-width: var(--wedge-border-width, 0);
+      stroke-opacity: var(--wedge-border-opacity, 1);
+      vector-effect: non-scaling-stroke;
+    }
+
+    .lane {
+      fill: none;
+      stroke-linecap: round;
+      stroke-dasharray: var(--lane-dasharray, none);
+      stroke-dashoffset: var(--lane-dashoffset, 0);
+      vector-effect: non-scaling-stroke;
+    }
+
+    .lane[data-lane-key='track'] {
+      stroke: var(--lane-track-color, var(--surface-4));
+    }
+
+    .lane[data-lane-key='value'] {
+      stroke: var(--lane-value-color, var(--accent));
+    }
+
+    .lane:not([data-lane-key='track']):not([data-lane-key='value']) {
+      stroke: var(--lane-color, var(--accent));
+    }
+
+    .value-marker path,
+    .value-marker .marker-fill {
+      stroke: var(--marker-color, var(--accent));
+      stroke-width: calc(var(--marker-thickness, 0.15) * var(--radius, 45%));
+      stroke-linecap: round;
+      stroke-dasharray: var(--marker-dasharray, none);
+      stroke-dashoffset: var(--marker-dashoffset, 0);
+      vector-effect: non-scaling-stroke;
+    }
+
+    .value-marker .marker-border {
+      stroke: var(--marker-border-color, transparent);
+      stroke-width: calc((var(--marker-thickness, 0.15) + var(--marker-border-width, 0) * 2) * var(--radius, 45%));
+      stroke-linecap: round;
+      vector-effect: non-scaling-stroke;
+    }
+
+    .value-marker .marker-border {
+      fill: none;
+    }
+
+    .value-marker .marker-fill,
+    .value-marker circle {
+      fill: var(--marker-color, var(--accent));
+    }
+
+    .midpoint-marker line {
+      stroke: var(--midpoint-color, var(--surface-muted-text));
+      stroke-width: var(--midpoint-thickness, 1px);
+      stroke-linecap: round;
+      vector-effect: non-scaling-stroke;
+    }
+
+    .midpoint-marker circle {
+      fill: var(--midpoint-color, var(--surface-muted-text));
+      stroke: var(--midpoint-border-color, transparent);
+      stroke-width: var(--midpoint-border-width, 0);
+      vector-effect: non-scaling-stroke;
+    }
+  `];
 	}
-	_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;
+};
+__decorate([n$2({ type: Number })], RadialInputElement.prototype, "radius", null);
+__decorate([n$2({ type: Number })], RadialInputElement.prototype, "value", void 0);
+__decorate([n$2({ type: Number })], RadialInputElement.prototype, "min", void 0);
+__decorate([n$2({ type: Number })], RadialInputElement.prototype, "max", void 0);
+__decorate([n$2({ type: Number })], RadialInputElement.prototype, "step", void 0);
+__decorate([n$2({ type: Number })], RadialInputElement.prototype, "stops", void 0);
+__decorate([n$2({
+	type: String,
+	attribute: `value-mode`
+})], RadialInputElement.prototype, "valueMode", void 0);
+__decorate([n$2({ type: Number })], RadialInputElement.prototype, "flatten", void 0);
+__decorate([n$2({
+	type: String,
+	attribute: `marker-style`
+})], RadialInputElement.prototype, "markerStyle", void 0);
+__decorate([n$2({ type: Boolean })], RadialInputElement.prototype, "wedge", void 0);
+__decorate([n$2({
+	type: Boolean,
+	reflect: true
+})], RadialInputElement.prototype, "disabled", void 0);
+RadialInputElement = __decorate([t$4(`ixfx-radial-input`)], RadialInputElement);
+//#endregion
+//#region src/labelled-radial-input/labelled-radial-input.ts
+let LabelledRadialInput = class LabelledRadialInput extends LabelledInputBase {
+	constructor(..._args) {
+		super(..._args);
+		this.inputSelector = `ixfx-radial-input`;
+		this.max = 100;
+		this.step = 1;
+		this.radius = 45;
+		this.flatten = .3;
+		this.markerStyle = `needle`;
+		this.wedge = false;
+		this.valueMode = `range`;
+		this.tooltip = false;
+		this.flip = false;
+		this.aspectRatioThreshold = 1.5;
+		this._isWide = false;
 	}
-	_getColHeaders() {
-		const headers = [];
-		for (let i = 0; i < this.columns; i++) {
-			const offset = i * 4;
-			headers.push(`+${offset.toString(16).toUpperCase()}`);
+	_getEffectivePrecision() {
+		if (this.hasAttribute(`precision`)) return this.precision;
+		if (this.step !== void 0) {
+			const decimalPart = String(this.step).split(`.`)[1];
+			return decimalPart ? decimalPart.length : 0;
 		}
-		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);
+		return this.max - this.min > 10 ? 0 : 2;
 	}
-	_isTextShaded(pos) {
-		return this._isRowShaded(pos);
+	_handleResize(entries) {
+		super._handleResize(entries);
+		const { width, height } = entries[0].contentRect;
+		this._isWide = height > 0 && width / height >= this.aspectRatioThreshold;
 	}
-	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`;
+	_renderEditableNumber() {
+		if (this._isMini) return A;
+		const labelMinWidth = Math.max(this.label?.length ?? 0, 3) + 1;
 		return b`
-      <div class="hex-editor" tabindex="0" @keydown=${this._onKeyDown} @pointerleave=${() => {}}>
-        <div class="header">
-          ${this.hideOffsetCol ? null : b`<span class="offset-cell">Offset</span>`}
-          ${this.hideHexCol ? null : c(colHeaders, (h) => b`<span class="col-header ${hexActive ? `active` : ``}">${h}</span>`)}
-          ${this.hideTextCol ? null : b`<span class="text-header ${textActive ? `active` : ``}">Text</span>`}
-        </div>
-        <div class="scroll-container" @scroll=${this._onScroll}>
-          <div style="height: ${topSpacerHeight}px"></div>
-          ${c(Array.from({ length: endRow - startRow }, (_, i) => startRow + i), (rowIndex) => rowIndex, (rowIndex) => this._renderRow(rowIndex, changeset))}
-          <div style="height: ${botSpacerHeight}px"></div>
-        </div>
-      </div>
+      <ixfx-editable-number
+        class="number"
+        mode="label"
+        no-drag
+        .value=${String(this.value)}
+        .min=${this.min}
+        .max=${this.max}
+        .step=${this.step}
+        .dragSensitivity=${this.dragSensitivity}
+        .precision=${this._getEffectivePrecision()}
+        .displayText=${this.label}
+        .displayTextLogic=${this._isDragging ? `hidden` : this.displayTextLogic}
+        .formatter=${this._formatter}
+        style="--label-min-width: var(--label-width, ${labelMinWidth}ch); --label-align: center;"
+        @change=${this._handleNumberChange}
+      ></ixfx-editable-number>
     `;
 	}
-	_renderRow(rowIndex, changeset) {
-		const bpr = bytesPerRow(this.columns);
-		const offset = rowIndex * bpr;
+	render() {
+		const showTooltip = this.tooltip || this._isMini;
+		const tooltipValue = this._getTooltipValue();
 		return b`
-      <div class="row" data-row=${rowIndex}>
-        ${this.hideOffsetCol ? null : b`<span class="offset-cell">${offset.toString(16).toUpperCase().padStart(6, `0`)}</span>`}
-        ${this.hideHexCol ? null : c(Array.from({ length: this.columns }, (_, i) => i), (colIndex) => colIndex, (colIndex) => this._renderColumn(rowIndex, colIndex, changeset))}
-        ${this.hideTextCol ? null : b`
-          <span class="text-area">
-            ${c(Array.from({ length: bpr }, (_, i) => i), (i) => i, (i) => this._renderTextChar(offset + i, changeset))}
-          </span>
-        `}
+      <div class="wrap ${this._isMini ? `mini` : ``} ${this._isWide ? `wide` : ``} ${this.flip ? `flip` : ``}">
+        ${this._renderEditableNumber()}
+        <ixfx-radial-input
+          class="dial"
+          .value=${this.value}
+          .min=${this.min}
+          .max=${this.max}
+          .step=${this.step}
+          .radius=${this.radius}
+          .flatten=${this.flatten}
+          .markerStyle=${this.markerStyle}
+          ?wedge=${this.wedge}
+          .valueMode=${this.valueMode}
+          data-tooltip-anchor="top"
+          data-tooltip=${tooltipValue}
+          data-tooltip-live=${showTooltip ? `input` : A}
+          @input=${this._handleSliderInput}
+          @change=${this._handleInputChange}
+        ></ixfx-radial-input>
       </div>
     `;
 	}
-	_renderColumn(rowIndex, colIndex, changeset) {
-		const basePos = rowIndex * bytesPerRow(this.columns) + colIndex * 4;
-		return b`
-      <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 b`<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 b`
-      <span
-        class=${classes.join(` `)}
-        style=${o$1(colourStyle || {})}
-        @pointerdown=${(e) => this._onPointerDown(pos, `hex`, e)}
-        @pointerup=${(e) => this._onPointerUp(pos, `hex`, e)}
-        @pointermove=${(e) => this._onPointerMove(pos, `hex`, e)}
-      >${displayText}</span>
-    `;
+	_getTooltipValue() {
+		const range = this.max - this.min;
+		const numValue = Number(this.value);
+		if (this.min === 0 && this.max === 1) return `${Math.round(numValue * 100)}%`;
+		if (range > 10) return String(Math.floor(numValue));
+		return numValue.toFixed(2);
 	}
-	_renderTextChar(pos, changeset) {
-		if (pos >= length(this._store)) return b`<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 b`
-      <span
-        class=${classes.join(` `)}
-        style=${o$1(colourStyle || {})}
-        @pointerdown=${(e) => this._onPointerDown(pos, `text`, e)}
-        @pointerup=${(e) => this._onPointerUp(pos, `text`, e)}
-        @pointermove=${(e) => this._onPointerMove(pos, `text`, e)}
-      >${char}</span>
-    `;
+	static {
+		this.styles = i$6`
+  :host {
+    display: block;
+    min-height: var(--min-height, 60px);
+    min-width: var(--min-width, 60px);
+    width: var(--width, auto);
+    height: var(--height, auto);
+  }
+
+  :host(:focus-within) {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+
+    .wrap {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+      flex-direction: var(--flow, column);
+    }
+
+    ixfx-editable-number {
+      flex-shrink: 0;
+      --label-align: center;
+      width: 100%;
+    }
+
+  ixfx-radial-input {
+    flex-shrink: 1;
+    min-height: 0;
+    min-width: 0;
+    max-width: 100%;
+    --radial-input-svg-focus-outline: none;
+    --radial-input-svg-focus-outline-offset: 0;
+    --prominence-tickled-opacity: 1;
+    --prominence-tickled-saturate: 1;
+  }
+
+    /* Wide layout (aspect ratio >= threshold): label to the left of dial */
+    .wrap.wide {
+      flex-direction: var(--flow, row);
+      justify-content: space-evenly;
+    }
+
+    .wrap.wide ixfx-editable-number {
+      --label-align: left;
+      width: var(--label-width, 5ch);
+    }
+
+    .wrap.wide ixfx-radial-input {
+      height: auto;
+      max-width: none;
+    }
+
+    /* Flip: label after dial (bottom in column, right in row) */
+    .wrap.flip ixfx-editable-number {
+      order: 1;
+    }
+
+    /* Mini mode: dial fills the component */
+    .wrap.mini {
+      justify-content: center;
+      gap: 0;
+    }
+
+    .wrap.mini ixfx-radial-input {
+      width: 100%;
+      height: 100%;
+    }
+  `;
 	}
 };
-__decorate([n$2({ type: Number })], IxfxHexEditorElement.prototype, "columns", void 0);
-__decorate([n$2({ type: String })], IxfxHexEditorElement.prototype, "colourScheme", void 0);
-__decorate([n$2({ type: Boolean })], IxfxHexEditorElement.prototype, "showChangeset", void 0);
+__decorate([n$2({ type: Number })], LabelledRadialInput.prototype, "radius", void 0);
+__decorate([n$2({ type: Number })], LabelledRadialInput.prototype, "flatten", void 0);
 __decorate([n$2({
-	type: Boolean,
-	attribute: `hide-offset-col`
-})], IxfxHexEditorElement.prototype, "hideOffsetCol", void 0);
+	type: String,
+	attribute: `marker-style`
+})], LabelledRadialInput.prototype, "markerStyle", void 0);
+__decorate([n$2({ type: Boolean })], LabelledRadialInput.prototype, "wedge", void 0);
 __decorate([n$2({
-	type: Boolean,
-	attribute: `hide-hex-col`
-})], IxfxHexEditorElement.prototype, "hideHexCol", void 0);
+	type: String,
+	attribute: `value-mode`
+})], LabelledRadialInput.prototype, "valueMode", void 0);
+__decorate([n$2({ type: Boolean })], LabelledRadialInput.prototype, "tooltip", void 0);
+__decorate([n$2({ type: Boolean })], LabelledRadialInput.prototype, "flip", void 0);
 __decorate([n$2({
-	type: Boolean,
-	attribute: `hide-text-col`
-})], IxfxHexEditorElement.prototype, "hideTextCol", void 0);
-__decorate([r$1()], IxfxHexEditorElement.prototype, "_selection", void 0);
-__decorate([r$1()], IxfxHexEditorElement.prototype, "_scrollTop", void 0);
-__decorate([r$1()], IxfxHexEditorElement.prototype, "_editState", void 0);
-__decorate([r$1()], IxfxHexEditorElement.prototype, "_containerH", void 0);
-__decorate([r$1()], IxfxHexEditorElement.prototype, "_shadeMap", void 0);
-__decorate([r$1()], IxfxHexEditorElement.prototype, "_focusSide", void 0);
-IxfxHexEditorElement = __decorate([t$4(`ixfx-hex-editor`)], IxfxHexEditorElement);
+	type: Number,
+	attribute: `aspect-ratio-threshold`
+})], LabelledRadialInput.prototype, "aspectRatioThreshold", void 0);
+__decorate([r$1()], LabelledRadialInput.prototype, "_isWide", void 0);
+LabelledRadialInput = __decorate([t$4(`ixfx-labelled-radial-input`)], LabelledRadialInput);
 //#endregion
 //#region src/led.ts
 let LedElement = class LedElement extends i$3 {
@@ -26972,6 +26972,94 @@ var MillerTreeController = class {
 	}
 };
 //#endregion
+//#region src/panel/panel-group.ts
+let PanelGroupElement = class PanelGroupElement extends i$3 {
+	constructor(..._args) {
+		super(..._args);
+		this.orientation = `horizontal`;
+		this.variant = `titlebar`;
+		this.toggleInteraction = `implicit`;
+		this.allowMultiple = false;
+		this.gap = `var(--space-m)`;
+	}
+	_onPanelToggle(e) {
+		const panel = e.target;
+		if (panel.collapsed) return;
+		if (this.allowMultiple) return;
+		for (const p of this._panels) if (p !== panel) p.collapsed = true;
+	}
+	firstUpdated() {
+		this.updateComplete.then(() => {
+			this._propagateAll();
+		});
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has(`variant`) || changed.has(`toggleInteraction`) || changed.has(`orientation`)) this.updateComplete.then(() => {
+			this._propagateAll();
+		});
+	}
+	_propagateAll() {
+		const invertedOrientation = this.orientation === `horizontal` ? `vertical` : `horizontal`;
+		for (const panel of this._panels) {
+			panel.setAttribute(`variant`, this.variant);
+			panel.setAttribute(`toggle-interaction`, this.toggleInteraction);
+			panel.setAttribute(`orientation`, invertedOrientation);
+		}
+	}
+	render() {
+		return b`
+      <slot
+        @toggle=${this._onPanelToggle}
+      ></slot>
+    `;
+	}
+	static {
+		this.styles = i$6`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: var(--group-gap, var(--space-m));
+    }
+
+    :host([orientation="horizontal"]) {
+      flex-direction: row;
+      align-items: flex-start;
+      flex-wrap: wrap;
+    }
+
+    :host([orientation="vertical"]) {
+      flex-direction: column;
+    }
+
+    ::slotted(ixfx-panel) {
+      flex-shrink: 1;
+    }
+
+    :host([orientation="horizontal"]) ::slotted(ixfx-panel) {
+      flex-basis: content;
+      min-width: 0;
+    }
+  `;
+	}
+};
+__decorate([n$2({
+	type: String,
+	reflect: true
+})], PanelGroupElement.prototype, "orientation", void 0);
+__decorate([n$2({ type: String })], PanelGroupElement.prototype, "variant", void 0);
+__decorate([n$2({
+	type: String,
+	attribute: `toggle-interaction`
+})], PanelGroupElement.prototype, "toggleInteraction", void 0);
+__decorate([n$2({
+	type: Boolean,
+	attribute: `allow-multiple`
+})], PanelGroupElement.prototype, "allowMultiple", void 0);
+__decorate([n$2()], PanelGroupElement.prototype, "gap", void 0);
+__decorate([o$2({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
+PanelGroupElement = __decorate([t$4(`ixfx-panel-group`)], PanelGroupElement);
+//#endregion
 //#region src/panel/panel.ts
 let PanelElement = class PanelElement extends i$3 {
 	constructor(..._args) {
@@ -27373,94 +27461,6 @@ __decorate([n$2({
 __decorate([r$1()], PanelElement.prototype, "_isVertical", void 0);
 PanelElement = __decorate([t$4(`ixfx-panel`)], PanelElement);
 //#endregion
-//#region src/panel/panel-group.ts
-let PanelGroupElement = class PanelGroupElement extends i$3 {
-	constructor(..._args) {
-		super(..._args);
-		this.orientation = `horizontal`;
-		this.variant = `titlebar`;
-		this.toggleInteraction = `implicit`;
-		this.allowMultiple = false;
-		this.gap = `var(--space-m)`;
-	}
-	_onPanelToggle(e) {
-		const panel = e.target;
-		if (panel.collapsed) return;
-		if (this.allowMultiple) return;
-		for (const p of this._panels) if (p !== panel) p.collapsed = true;
-	}
-	firstUpdated() {
-		this.updateComplete.then(() => {
-			this._propagateAll();
-		});
-	}
-	updated(changed) {
-		super.updated(changed);
-		if (changed.has(`variant`) || changed.has(`toggleInteraction`) || changed.has(`orientation`)) this.updateComplete.then(() => {
-			this._propagateAll();
-		});
-	}
-	_propagateAll() {
-		const invertedOrientation = this.orientation === `horizontal` ? `vertical` : `horizontal`;
-		for (const panel of this._panels) {
-			panel.setAttribute(`variant`, this.variant);
-			panel.setAttribute(`toggle-interaction`, this.toggleInteraction);
-			panel.setAttribute(`orientation`, invertedOrientation);
-		}
-	}
-	render() {
-		return b`
-      <slot
-        @toggle=${this._onPanelToggle}
-      ></slot>
-    `;
-	}
-	static {
-		this.styles = i$6`
-    :host {
-      display: flex;
-      flex-direction: column;
-      gap: var(--group-gap, var(--space-m));
-    }
-
-    :host([orientation="horizontal"]) {
-      flex-direction: row;
-      align-items: flex-start;
-      flex-wrap: wrap;
-    }
-
-    :host([orientation="vertical"]) {
-      flex-direction: column;
-    }
-
-    ::slotted(ixfx-panel) {
-      flex-shrink: 1;
-    }
-
-    :host([orientation="horizontal"]) ::slotted(ixfx-panel) {
-      flex-basis: content;
-      min-width: 0;
-    }
-  `;
-	}
-};
-__decorate([n$2({
-	type: String,
-	reflect: true
-})], PanelGroupElement.prototype, "orientation", void 0);
-__decorate([n$2({ type: String })], PanelGroupElement.prototype, "variant", void 0);
-__decorate([n$2({
-	type: String,
-	attribute: `toggle-interaction`
-})], PanelGroupElement.prototype, "toggleInteraction", void 0);
-__decorate([n$2({
-	type: Boolean,
-	attribute: `allow-multiple`
-})], PanelGroupElement.prototype, "allowMultiple", void 0);
-__decorate([n$2()], PanelGroupElement.prototype, "gap", void 0);
-__decorate([o$2({ slot: `` })], PanelGroupElement.prototype, "_panels", void 0);
-PanelGroupElement = __decorate([t$4(`ixfx-panel-group`)], PanelGroupElement);
-//#endregion
 //#region node_modules/.pnpm/@ixfx+modulation@0.56.12/node_modules/@ixfx/modulation/dist/chunk-pbuEa-1d.js
 var __defProp = Object.defineProperty;
 var __exportAll = (all, no_symbols) => {
@@ -31123,13 +31123,13 @@ let SplitLayoutElement = class SplitLayoutElement extends i$3 {
 		return slotA.assignedElements().find((el) => el.tagName === `IXFX-SPLIT-LAYOUT`);
 	}
 	#parseSizeAsFraction(size, total) {
-		if (size.endsWith(`px`)) return parseFloat(size.replace(`px`, ``)) / total;
-		else if (size.endsWith(`%`)) return parseFloat(size.replace(`%`, ``)) / 100;
+		if (size.endsWith(`px`)) return Number.parseFloat(size.replace(`px`, ``)) / total;
+		else if (size.endsWith(`%`)) return Number.parseFloat(size.replace(`%`, ``)) / 100;
 		return .5;
 	}
 	#parseSizeToPx(size, total) {
-		if (size.endsWith(`px`)) return parseFloat(size.replace(`px`, ``));
-		else if (size.endsWith(`%`)) return parseFloat(size.replace(`%`, ``)) / 100 * total;
+		if (size.endsWith(`px`)) return Number.parseFloat(size.replace(`px`, ``));
+		else if (size.endsWith(`%`)) return Number.parseFloat(size.replace(`%`, ``)) / 100 * total;
 		return null;
 	}
 	#applyConstraints(sizeA, sizeB, total) {
@@ -31171,14 +31171,14 @@ let SplitLayoutElement = class SplitLayoutElement extends i$3 {
 		if (minSize.length === 0) return null;
 		const px = this.#parseSizeToPx(minSize, total);
 		if (px !== null) return px / total;
-		if (minSize.endsWith(`%`)) return parseFloat(minSize.replace(`%`, ``)) / 100;
+		if (minSize.endsWith(`%`)) return Number.parseFloat(minSize.replace(`%`, ``)) / 100;
 		return null;
 	}
 	#maxSizeToFraction(maxSize, total) {
 		if (maxSize.length === 0) return null;
 		const px = this.#parseSizeToPx(maxSize, total);
 		if (px !== null) return px / total;
-		if (maxSize.endsWith(`%`)) return parseFloat(maxSize.replace(`%`, ``)) / 100;
+		if (maxSize.endsWith(`%`)) return Number.parseFloat(maxSize.replace(`%`, ``)) / 100;
 		return null;
 	}
 	#getIntersectionPoint() {