@xsynaptic/sonic-ui 0.24.1 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @xsynaptic/sonic-ui
 
+## 0.26.0
+
+### Minor Changes
+
+- - Breaking: a state is an attribute on the control's drawn part, `data-sonic-<state>`, and no longer a custom state on the host. `sonic-slider:state(dragging) > .sonic-slider` becomes `.sonic-slider[data-sonic-dragging]`; a region's is on its `.sonic-region`. Every look that follows a state now draws at the browser floor, a meter's ladder included.
+  - Breaking: the mark on a button, an option or a toggle position held down by a key or a pointer is `data-sonic-active`, renamed from `data-sonic-pressed`, which on `.sonic-button` is now the `pressed` state.
+  - Wave controls and the spectrum: a canvas that parses no `color-mix()` is handed a colour it does take, so in an older Chrome the wave strip's unplayed bars no longer paint black and the waveform's edge shade no longer throws.
+  - Region: `tabindex="-1"` on `<sonic-region>` takes its part out of the tab order, as on a value control.
+
+### Patch Changes
+
+- - Value controls: the spoken formatter runs only when the spoken value or the formatter changes, and a wave strip with no `<sonic-region>` no longer calls it twice per write. A changed `lang` is heard at the next spoken value.
+  - Older browsers: a closed readout stays out of the layout without the popover API, snapped edges fall back to a hairline without `round()`, and three rules no longer drop where `:state()` is missing.
+
+## 0.25.1
+
+### Patch Changes
+
+- `formatClock` writes a time that is not finite (a duration not yet known, a live stream's) as an empty string, where it wrote `NaN:NaN`.
+
+## 0.25.0
+
+### Minor Changes
+
+- - `<sonic-region>`: an editable region, a child of a wave strip, drawn as a bracket and registered by `./define/region` with `region.css`. A drag of its body or a key moves it and keeps its length. It has `start`, `end`, `kind`, `name` (submitting `name.start` and `name.end`) and `disabled`, speaks its start, carries `:state(dragging)`, and fires `input` and `change`, which bubble through the strip.
+  - Region surface: tokens `--sonic-region-bracket`, `--sonic-region-fill`, `--sonic-region-bracket-width` and `--sonic-region-bracket-radius`; hook classes `.sonic-wavestrip-regions`, `.sonic-region` and `.sonic-region-bracket`; `data-sonic-clipped` on a region written past a bound.
+  - Wave strip: `formatSpokenRegion(start, end)` words what a region speaks, and `preview` draws a time as a scrub's edge without scrubbing to it.
+  - Wave strip and waveform: `valueFromPoint(clientX, clientY)` is the inverse of `clientXOf`.
+  - Wave strip, breaking: the slider role, the tab stop and the focus glow are on `.sonic-wavestrip-canvas`, so `.sonic-wavestrip:focus-visible` no longer matches (`:focus-within` does).
+- - XY pad and envelope: the arcs round a held puck or handle are the reticle. Breaking: `.sonic-xy-bracket` is `.sonic-xy-reticle`, `.sonic-envelope-bracket` is `.sonic-envelope-reticle`, and `material/bracket.css` is `material/reticle.css`.
+- - Waveform: `clientXOf(seconds)` is the viewport x where a time was last drawn, as on the wave strip, so a layer over the wave follows a paged window and a drag. The x is not clamped to the window.
+  - Wave strip and waveform: `markersFromPoint(clientX, clientY)` lists the markers at a point, nearest first.
+  - Wave strip: `renderMarker(marker, element)` draws a point marker; the element lasts until the next `markers` or `renderMarker` write.
+  - Waveform: a marker outside the bounds paints its line at the bound.
+  - Wave strip: `--sonic-wave` is renamed `--sonic-unplayed`, beside `--sonic-buffered` and `--sonic-scrub`. Breaking for a skin or host that sets it.
+
+### Patch Changes
+
+- Older browsers, down to Chrome 111, Safari 16.4 and Firefox 128: the built sheets carry vendor prefixes (`-webkit-mask`, `-webkit-user-select`), shading no longer needs relative colour, a dial's scale and the XY pad's lines no longer need the `cap` unit or `sign()`, and typed entry stays shut without the popover API. With no skin, glass follows `Canvas`: an off-white in light, the engine's dark canvas in dark.
+
 ## 0.24.1
 
 ### Patch Changes
@@ -29,8 +69,8 @@
 
 - - `--sonic-entry-selection` colours the selected text of a typed entry, which opens with its value selected. Unset, it stays the control's lit colour.
   - `--sonic-slider-groove-hover-delay` is how long a slider's groove waits under a pointer before it thickens to `--sonic-slider-groove-hover-ratio`. A press or a keyboard focus thickens it at once and leaving thins it at once. Unset, there is no wait.
-  - `--sonic-readout-depth` scales a readout's cast shadow, inner shine and lighter centre from 0 to 1. Unset, it follows the relief.
-  - Behaviour change: a readout no longer takes `--sonic-glass-depth` from a screen around it. Inside a screen flattened with `--sonic-glass-depth: 0` its centre follows the relief again, as its shadow always did; set `--sonic-readout-depth: 0` to flatten it.
+  - `--sonic-readout-depth` scales a readout's cast shadow, inner shine and lighter center from 0 to 1. Unset, it follows the relief.
+  - Behaviour change: a readout no longer takes `--sonic-glass-depth` from a screen around it. Inside a screen flattened with `--sonic-glass-depth: 0` its center follows the relief again, as its shadow always did; set `--sonic-readout-depth: 0` to flatten it.
 
 ## 0.21.0
 

package/README.md

@@ -43,6 +43,7 @@ import '@xsynaptic/sonic-ui/define';
 - The split is the one host with a box: `<sonic-split>` is inline until given a display, and laying it out is yours.
 - Register the classes under their stock tag names (`sonic-dial`, `sonic-split`). The sheets and the split key on them, so a split under another tag finds no members.
 - Name every control with `aria-label` or `aria-labelledby` on the host, or with a `<label>` for a form-associated one.
+- Every control that holds a value the user sets is form-associated, as a native input is, and that is deliberate: given a `name` it submits, a form reset returns it to its attributes, a disabled `<fieldset>` disables it, and a `<label>` names it. With no `name` it submits nothing. A value control submits its number and a segmented control its value; a latching button, and a switch or toggle with two positions, submit their `value` only while on, as a checkbox does; an XY pad and a region submit two fields (`name.x` and `name.y`, `name.start` and `name.end`). A momentary button, the displays, the envelope and the split submit nothing.
 - A boolean attribute is on when present, whatever its value, so `pressed="false"` latches a button. From a framework pass `undefined`, never `false`.
 - A control uses only the children it documents and adds one child of its own. Children it draws are copied, so a copy has none of your listeners; keep them static. Under a hydrating framework, register the definitions once hydration is done (in React, from an effect).
 - Events bubble and carry no detail: read the property when one fires. A control knows nothing about playback, so wire its events to your own state and write the property back.
@@ -50,7 +51,7 @@ import '@xsynaptic/sonic-ui/define';
 - `formatValue` and `parseValue` are properties holding functions. Once `parseValue` is set it has to read what `formatValue` writes, or typed entry opens on text it cannot take.
 - To show a control without taking input, set `inert` on the host. It leaves the tab order and the accessibility tree and ignores presses, and it keeps its colours and keeps drawing; `disabled` dims it and is announced as disabled.
 - A display takes its signal as data, and nothing in the library fetches, decodes or opens an `AudioContext`.
-- States a control sets itself are custom states on the host, selected with `:state()`.
+- A state a control sets itself is an attribute on its drawn part, `data-sonic-<state>`, selected as `.sonic-slider[data-sonic-dragging]`.
 - The LED, the panel, the ring and the screen have no behaviour, so they are classes on your own elements (`sonic-led`, `sonic-panel`, `sonic-ring`, `sonic-screen`). A control draws no glass of its own: wrap one in a screen for the encased look.
 
 ## Skinning
@@ -75,11 +76,12 @@ A skin is one rule that sets tokens on a class; copy `dist/skins/flat.css` to st
 | --------------- | ----------------------------------------------- |
 | `button.css`    | core, cap, well, keycap                         |
 | `dial.css`      | core, cap, glass, readout, value, arc, scale    |
-| `envelope.css`  | core, glass, readout, bracket                   |
+| `envelope.css`  | core, glass, readout, reticle                   |
 | `led.css`       | core, lens                                      |
 | `meter.css`     | core, lens, groove                              |
 | `number.css`    | core, cap, value                                |
 | `panel.css`     | core                                            |
+| `region.css`    | core, cap                                       |
 | `ring.css`      | core, arc                                       |
 | `screen.css`    | core, glass, pane, well                         |
 | `segmented.css` | core, cap, well, keycap                         |
@@ -89,8 +91,8 @@ A skin is one rule that sets tokens on a class; copy `dist/skins/flat.css` to st
 | `toggle.css`    | core, cap, well, keycap                         |
 | `waveform.css`  | core, cap, glass, readout, value                |
 | `wavestrip.css` | core, cap, glass, readout, value                |
-| `xy.css`        | core, cap, glass, readout, bracket              |
+| `xy.css`        | core, cap, glass, readout, reticle              |
 
 An LED inside a control also needs `led.css`, and a button inside a ring needs `button.css`. Only a missing `core.css` or control sheet is warned about, so check a control that draws wrong against this table.
 
-Targets current Chrome and Edge, Safari 26 and Firefox 147. No control mirrors for right-to-left. MIT licensed.
+Tested in current Chrome, Firefox and Safari. Known to work from Chrome 111, Safari 16.4 and Firefox 128; older versions are best effort. No control mirrors for right-to-left. MIT licensed.

package/dist/default/define/region.js

@@ -0,0 +1,7 @@
+import { defineOnce } from "../elements/define-once.js";
+import { SonicRegion } from "../elements/region.js";
+
+//#region src/define/region.ts
+defineOnce("sonic-region", SonicRegion);
+
+//#endregion

package/dist/default/define.js

@@ -3,6 +3,7 @@ import "./define/dial.js";
 import "./define/envelope.js";
 import "./define/meter.js";
 import "./define/number.js";
+import "./define/region.js";
 import "./define/segmented.js";
 import "./define/slider.js";
 import "./define/spectrum.js";

package/dist/default/elements/button.js

@@ -149,6 +149,9 @@ var SonicButton = class extends SonicFormElement {
 	restoreState(state) {
 		if (this.latching) this.pressed = state === "true";
 	}
+	stateTarget() {
+		return this.#button;
+	}
 	#bindMomentary(button, signal) {
 		const holding = bindHold(button, {
 			canHold: () => !this.isDisabled() && !this.#isSoftDisabled(),

package/dist/default/elements/dial.js

@@ -85,6 +85,9 @@ var SonicDial = class extends SonicValueElement {
 	isWrapping() {
 		return this.endless;
 	}
+	stateTarget() {
+		return this.#dial;
+	}
 };
 
 //#endregion

package/dist/default/elements/envelope.js

@@ -36,7 +36,7 @@ function stageParts(envelope, hook, stages) {
 }
 const renderEnvelope = template(`
 		<div class="sonic-envelope" aria-hidden="true">
-			<div class="sonic-envelope-bracket"></div>
+			<div class="sonic-envelope-reticle"></div>
 			<svg class="sonic-envelope-graph" preserveAspectRatio="none" viewBox="0 0 1 1">
 				<path class="sonic-envelope-fill" />
 				<rect class="sonic-envelope-fill sonic-envelope-floor" y="1" />
@@ -123,11 +123,10 @@ var SonicEnvelope = class extends SonicElement {
 		this.reflect("sustain", id);
 	}
 	#bindings = /* @__PURE__ */ new Map();
-	#envelope = renderEnvelope();
-	#bracket = requireChild(this.#envelope, ".sonic-envelope-bracket", HTMLDivElement);
 	#claim = new ReadoutClaim(() => {
 		this.#renderReadout();
 	});
+	#envelope = renderEnvelope();
 	#curveHandles = stageParts(this.#envelope, "sonic-envelope-curve", curveStages);
 	#fill = requireChild(this.#envelope, ".sonic-envelope-fill", SVGElement);
 	#floor = requireChild(this.#envelope, ".sonic-envelope-floor", SVGElement);
@@ -138,6 +137,7 @@ var SonicEnvelope = class extends SonicElement {
 	#isDriving = false;
 	#line = requireChild(this.#envelope, ".sonic-envelope-line", SVGElement);
 	#readout = new Readout(requireChild(this.#envelope, ".sonic-envelope-readout", HTMLDivElement));
+	#reticle = requireChild(this.#envelope, ".sonic-envelope-reticle", HTMLDivElement);
 	#shape = adsrShape({});
 	#waiting = /* @__PURE__ */ new Set();
 	#warned = /* @__PURE__ */ new Set();
@@ -164,6 +164,9 @@ var SonicEnvelope = class extends SonicElement {
 			this.#unbind();
 		}, { once: true });
 	}
+	stateTarget() {
+		return this.#envelope;
+	}
 	#bind() {
 		this.#gesture?.end();
 		this.#unbind();
@@ -229,15 +232,9 @@ var SonicEnvelope = class extends SonicElement {
 			at: shape.curveHandles.find((point) => point.stage === stage),
 			drives: this.#curveDrives(stage)
 		});
-		this.#drawBracket();
+		this.#drawReticle();
 		this.#renderReadout();
 	}
-	#drawBracket() {
-		const part = this.#held;
-		if (!part) return;
-		for (const name of ["--_sonic-envelope-x", "--_sonic-envelope-y"]) this.#bracket.style.setProperty(name, part.style.getPropertyValue(name));
-		writeAttribute(this.#bracket, "data-sonic-part", part.classList.contains("sonic-envelope-curve") ? "curve" : void 0);
-	}
 	#drawPoint(part, point) {
 		const { at, drives } = point;
 		writeAttribute(part, "hidden", at ? void 0 : "");
@@ -248,6 +245,12 @@ var SonicEnvelope = class extends SonicElement {
 		writeAttribute(part, "data-sonic-axes", drives.map(({ axis }) => axis).join(""));
 		writeAttribute(part, "data-sonic-disabled", isStill ? "" : void 0);
 	}
+	#drawReticle() {
+		const part = this.#held;
+		if (!part) return;
+		for (const name of ["--_sonic-envelope-x", "--_sonic-envelope-y"]) this.#reticle.style.setProperty(name, part.style.getPropertyValue(name));
+		writeAttribute(this.#reticle, "data-sonic-part", part.classList.contains("sonic-envelope-curve") ? "curve" : void 0);
+	}
 	#drives(stage) {
 		const x = this.#bindings.get(stage);
 		const y = stage === "decay" ? this.#bindings.get("sustain") : void 0;
@@ -263,7 +266,7 @@ var SonicEnvelope = class extends SonicElement {
 		const pressed = this.#pressed(event);
 		if (!pressed || pressed.drives.length === 0) return void 0;
 		this.#held = pressed.part;
-		this.#drawBracket();
+		this.#drawReticle();
 		const box = this.#graph.getBoundingClientRect();
 		const travel = {
 			x: Math.max(1, box.width * this.#shape.share),

package/dist/default/elements/form-element.js

@@ -47,6 +47,16 @@ var SonicFormElement = class extends SonicElement {
 		if (!internals || this.hasAttribute("aria-label") || this.hasAttribute("aria-labelledby")) return [];
 		return [...internals.labels].filter((label) => label instanceof Element);
 	}
+	writeFormFields(fields, state) {
+		const { name } = this;
+		if (name === "") {
+			this.writeFormValue(null, state);
+			return;
+		}
+		const data = new FormData();
+		for (const [field, value] of fields) data.set(`${name}.${field}`, String(value));
+		this.writeFormValue(data, state);
+	}
 	writeFormValue(value, state) {
 		this.internals?.setFormValue(value, `${this.localName}:${state}`);
 	}

package/dist/default/elements/meter.js

@@ -148,6 +148,9 @@ var SonicMeter = class extends SonicElement {
 			this.#lastFrame = void 0;
 		}, { once: true });
 	}
+	stateTarget() {
+		return this.#meter;
+	}
 	#isSettled(now) {
 		if (this.#isValueShown) return true;
 		if (now - this.#clipAt < holdMs) return false;

package/dist/default/elements/number.js

@@ -46,6 +46,9 @@ var SonicNumber = class extends SonicValueElement {
 	focusTarget() {
 		return this.#number;
 	}
+	stateTarget() {
+		return this.#number;
+	}
 	tapTarget() {
 		if (this.press !== "step") return void 0;
 		const mapping = this.mapping();

package/dist/default/elements/radio-group.js

@@ -139,6 +139,9 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		this.value = next;
 		this.dispatchEvent(new Event("change", { bubbles: true }));
 	}
+	stateTarget() {
+		return this.group;
+	}
 	stepFrom(from, step) {
 		return stepFrom(this.positions(), from, {
 			isWrapping: this.isWrapping(),
@@ -192,7 +195,7 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 		if (focused) this.#refocus(focused, focusedValue);
 	}
 	#markPressed(pressed) {
-		for (const [index, option] of this.options().entries()) option.toggleAttribute("data-sonic-pressed", index === pressed);
+		for (const [index, option] of this.options().entries()) option.toggleAttribute("data-sonic-active", index === pressed);
 	}
 	#optionBoxes() {
 		const positions = this.positions();

package/dist/default/elements/readout.js

@@ -2,7 +2,7 @@ import { requireChild } from "../lib/render.js";
 
 //#region src/elements/readout.ts
 const canPopover = "togglePopover" in HTMLElement.prototype;
-const isUnanchored = canPopover && !CSS.supports("anchor-name", "--a");
+const isUnanchored = !CSS.supports("anchor-name", "--a");
 let readoutCount = 0;
 var Readout = class {
 	#anchor;

package/dist/default/elements/region-layer.js

@@ -0,0 +1,253 @@
+import { writeAttribute } from "../lib/write-attribute.js";
+import { placeChildren, template } from "../lib/render.js";
+import { capturePointer } from "../lib/pointer-drag.js";
+import { dragThresholdPx } from "../lib/drag-step.js";
+import { focusByPointer } from "../lib/focus-by-pointer.js";
+import { SonicRegion, linkRegion, ownRegions } from "./region.js";
+import { writeKind } from "../lib/marker-band.js";
+import { moveRegionTo, regionAt, regionTravel, startRegionDrag, stepRegionDrag } from "../lib/region-drag.js";
+
+//#region src/elements/region-layer.ts
+const renderPart = template(`
+		<div class="sonic-region" role="slider" aria-orientation="horizontal">
+			<div class="sonic-region-bracket"></div>
+		</div>
+	`, HTMLDivElement);
+function hasMoved(from, to) {
+	return from.start !== to.start || from.end !== to.end;
+}
+function clippedEnds(region, [low, high]) {
+	const ends = [...Math.min(region.start, region.end) < low ? ["start"] : [], ...Math.max(region.start, region.end) > high ? ["end"] : []];
+	return ends.length > 0 ? ends.join(" ") : void 0;
+}
+function writeProperty(part, name, value) {
+	if (part.style.getPropertyValue(name) !== value) part.style.setProperty(name, value);
+}
+var RegionLayer = class {
+	#drawn = [];
+	#held;
+	#host;
+	#key;
+	#keyScrub;
+	constructor(host, signal) {
+		const render = () => {
+			this.render();
+		};
+		const observer = new MutationObserver(render);
+		this.#host = host;
+		this.#bindPointer(signal);
+		this.#bindKeys(signal);
+		observer.observe(host.element, { childList: true });
+		ownRegions(host.element, (region) => {
+			this.#redraw(region);
+		}, signal);
+		signal.addEventListener("abort", () => {
+			observer.disconnect();
+			this.#release();
+			this.#endKeyScrub();
+		}, { once: true });
+	}
+	abandon() {
+		this.#release(true);
+	}
+	follow() {
+		if (this.#drawn.length === 0) return;
+		if (this.#stripKey() !== this.#key) this.render();
+	}
+	isHeld() {
+		return this.#held !== void 0;
+	}
+	render() {
+		const host = this.#host;
+		const drawn = [...host.element.children].filter((child) => child instanceof SonicRegion).map((region) => this.#draw(region));
+		this.#drawn = drawn;
+		this.#key = this.#stripKey();
+		placeChildren(host.layer, drawn.map(({ part }) => part));
+		this.#dropGone();
+	}
+	take(event) {
+		const host = this.#host;
+		const { startPx, travelPx } = host.axis();
+		const mapping = host.mapping();
+		const index = regionAt(this.#drawn.map((entry) => {
+			if (!this.#isEnabled(entry)) return;
+			const { end, start } = entry.link.span();
+			return [mapping.proportionOf(start) * travelPx, mapping.proportionOf(end) * travelPx];
+		}), event.clientX - startPx);
+		const pressed = index === void 0 ? void 0 : this.#drawn[index];
+		if (!pressed) return false;
+		this.#endKeyScrub();
+		const from = pressed.link.span();
+		this.#held = {
+			drawn: pressed,
+			from,
+			outside: host.outside(),
+			pointerId: event.pointerId,
+			press: event,
+			state: startRegionDrag({
+				from,
+				position: event.clientX,
+				thresholdPx: dragThresholdPx(event.pointerType),
+				widthPx: travelPx
+			})
+		};
+		pressed.link.hold("pointer");
+		capturePointer(host.control, event.pointerId);
+		return true;
+	}
+	#bindKeys(signal) {
+		const { layer } = this.#host;
+		layer.addEventListener("keydown", (event) => {
+			const entry = this.#drawn.find(({ part }) => part === event.target);
+			if (!entry || event.defaultPrevented || this.#held) return;
+			if (this.#isEnabled(entry)) this.#keyTo(entry, event);
+		}, { signal });
+		layer.addEventListener("keyup", (event) => {
+			if (event.key === "Meta" || event.key === this.#keyScrub?.key) this.#endKeyScrub();
+		}, { signal });
+		layer.addEventListener("focusin", () => {
+			this.render();
+		}, { signal });
+		layer.addEventListener("focusout", () => {
+			this.#endKeyScrub();
+		}, { signal });
+	}
+	#bindPointer(signal) {
+		const whileHeld = (type, handle) => {
+			this.#host.control.addEventListener(type, (event) => {
+				const held = this.#held;
+				if (held && event instanceof PointerEvent && held.pointerId === event.pointerId) handle(held, event);
+			}, { signal });
+		};
+		whileHeld("pointermove", (hold, event) => {
+			this.#dragTo(hold, event);
+		});
+		whileHeld("pointerup", (hold) => {
+			const isPress = !hold.state.isEngaged;
+			this.#release();
+			if (isPress) this.#host.seek(hold.press);
+		});
+		whileHeld("pointercancel", () => {
+			this.#release(true);
+		});
+		whileHeld("lostpointercapture", () => {
+			this.#release();
+		});
+	}
+	#dragTo(hold, event) {
+		const wasEngaged = hold.state.isEngaged;
+		const { span, state } = stepRegionDrag(this.#host.mapping(), hold.state, {
+			isFine: event.shiftKey,
+			position: event.clientX
+		});
+		hold.state = state;
+		if (!span) return;
+		if (!wasEngaged) focusByPointer(hold.drawn.part);
+		hold.drawn.link.input(hold.outside?.(event) === true ? hold.from : span);
+	}
+	#draw(region) {
+		const host = this.#host;
+		const known = this.#drawn.find((entry) => entry.region === region);
+		const entry = known ?? {
+			kind: void 0,
+			link: linkRegion(region),
+			part: renderPart(),
+			region
+		};
+		const { link, part } = entry;
+		const mapping = host.mapping();
+		const span = link.span();
+		const [low, high] = regionTravel(span, mapping.bounds);
+		const canMove = this.#isEnabled(entry);
+		const stop = region.getAttribute("tabindex") === "-1" ? "-1" : "0";
+		writeProperty(part, "--_sonic-region-from", String(mapping.proportionOf(span.start)));
+		writeProperty(part, "--_sonic-region-to", String(mapping.proportionOf(span.end)));
+		if (!known || entry.kind !== region.kind) {
+			entry.kind = region.kind;
+			writeKind(part, region.kind, "--_sonic-ink");
+		}
+		writeAttribute(part, "data-sonic-clipped", clippedEnds(region, mapping.bounds));
+		writeAttribute(part, "aria-valuemin", String(low));
+		writeAttribute(part, "aria-valuemax", String(high));
+		writeAttribute(part, "aria-valuenow", String(span.start));
+		writeAttribute(part, "aria-valuetext", host.speak(span));
+		writeAttribute(part, "aria-disabled", canMove ? void 0 : "true");
+		writeAttribute(part, "tabindex", canMove ? stop : void 0);
+		link.draw(part);
+		return entry;
+	}
+	#dropGone() {
+		const isGone = (entry) => !this.#drawn.includes(entry) || !this.#isEnabled(entry);
+		if (this.#held && isGone(this.#held.drawn)) this.#release();
+		if (this.#keyScrub && isGone(this.#keyScrub.drawn)) this.#endKeyScrub();
+	}
+	#endKeyScrub() {
+		const scrub = this.#keyScrub;
+		if (!scrub) return;
+		const { link } = scrub.drawn;
+		this.#keyScrub = void 0;
+		link.hold(void 0);
+		if (hasMoved(scrub.from, link.span())) link.change();
+	}
+	#isEnabled({ link }) {
+		return !this.#host.isDisabled() && !link.isDisabled();
+	}
+	#keyTo(entry, event) {
+		const mapping = this.#host.mapping();
+		const from = entry.link.span();
+		const start = mapping.keyTarget(event.key, from.start);
+		if (start === void 0) return;
+		event.preventDefault();
+		const next = moveRegionTo(mapping, from, start);
+		if (!event.repeat) {
+			this.#endKeyScrub();
+			if (entry.link.input(next)) entry.link.change();
+			return;
+		}
+		if (this.#keyScrub?.drawn !== entry || this.#keyScrub.key !== event.key) {
+			this.#endKeyScrub();
+			this.#keyScrub = {
+				drawn: entry,
+				from,
+				key: event.key
+			};
+			entry.link.hold("keys");
+		}
+		entry.link.input(next);
+	}
+	#redraw(region) {
+		if (this.#drawn.every((entry) => entry.region !== region)) {
+			this.render();
+			return;
+		}
+		this.#draw(region);
+		this.#dropGone();
+	}
+	#release(isRestored = false) {
+		const hold = this.#held;
+		if (!hold) return;
+		const { link } = hold.drawn;
+		this.#held = void 0;
+		if (isRestored) link.input(hold.from);
+		link.hold(void 0);
+		if (hasMoved(hold.from, link.span())) link.change();
+	}
+	#stripKey() {
+		const host = this.#host;
+		const mapping = host.mapping();
+		const [low, high] = mapping.bounds;
+		return [
+			low,
+			high,
+			mapping.proportionOf((low + high) / 2),
+			host.isDisabled(),
+			host.speak({
+				end: high,
+				start: high
+			})
+		].join("|");
+	}
+};
+
+//#endregion
+export { RegionLayer };