@xsynaptic/sonic-ui 0.6.0 → 0.8.0

package/README.md

@@ -23,6 +23,10 @@ import '@xsynaptic/sonic-ui/define';
 <sonic-dial aria-label="Cutoff" value="40"></sonic-dial>
 ```
 
+A `-size` token takes any CSS length and scales its control as one piece; a `-length` token also takes a percentage of the parent.
+
+A display takes its signal as data: `spectrum.analyser = node`, or `spectrum.push(frame)`.
+
 Under a hydrating framework, register the definitions once hydration is done (in React, from an effect); a control owns one child of its host and uses only the children it documents.
 
 Targets current Chrome and Edge, Safari 26 and Firefox 147. MIT licensed.

package/dist/default/define/spectrum.js

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

package/dist/default/define.js

@@ -5,6 +5,7 @@ import "./define/meter.js";
 import "./define/number.js";
 import "./define/segmented.js";
 import "./define/slider.js";
+import "./define/spectrum.js";
 import "./define/split.js";
 import "./define/switch.js";
 import "./define/waveform.js";

package/dist/default/elements/button.js

@@ -1,18 +1,28 @@
-import { placeChildren, requireChild, template } from "../lib/render.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { copyNode } from "../lib/copy-node.js";
 import { bindHold } from "../lib/hold.js";
+import { placeChildren, requireChild, template } from "../lib/render.js";
+import { mirrorChildren } from "../lib/mirror-children.js";
+import { capturePointer } from "../lib/pointer-drag.js";
 
 //#region src/elements/button.ts
 const renderButton = template(`
 		<button class="sonic-button" type="button"><span class="sonic-button-cap"></span></button>
 	`, HTMLButtonElement);
 const holdKeys = /* @__PURE__ */ new Set([" ", "Enter"]);
+const popupAttributes = {
+	controls: "aria-controls",
+	expanded: "aria-expanded",
+	popup: "aria-haspopup"
+};
+const pressWhens = /* @__PURE__ */ new Set(["pressed", "released"]);
 var SonicButton = class extends SonicFormElement {
 	static observedAttributes = [
 		...SonicFormElement.observedAttributes,
+		...Object.keys(popupAttributes),
 		"busy",
+		"legend",
 		"momentary",
 		"pressed",
 		"soft-disabled",
@@ -43,6 +53,12 @@ var SonicButton = class extends SonicFormElement {
 	set latching(isLatching) {
 		this.reflect("latching", isLatching);
 	}
+	get legend() {
+		return this.getAttribute("legend") ?? void 0;
+	}
+	set legend(name) {
+		this.reflect("legend", name);
+	}
 	get momentary() {
 		return this.hasAttribute("momentary");
 	}
@@ -87,12 +103,13 @@ var SonicButton = class extends SonicFormElement {
 	connect(signal) {
 		const button = this.#button;
 		const cap = requireChild(button, ".sonic-button-cap", HTMLSpanElement);
-		this.upgradeProperties("armed", "busy", "defaultPressed", "momentary", "softDisabled", "latching", "pressed", "value");
-		this.mirrorChildren({
+		this.upgradeProperties("armed", "busy", "defaultPressed", "legend", "momentary", "softDisabled", "latching", "pressed", "value");
+		mirrorChildren(this, {
 			control: button,
 			copy: copyNode,
 			place: (copies) => {
 				placeChildren(cap, copies);
+				this.#showLegend();
 			}
 		}, signal);
 		this.render();
@@ -121,6 +138,8 @@ var SonicButton = class extends SonicFormElement {
 		writeAttribute(button, "aria-pressed", this.latching ? String(this.pressed) : void 0);
 		this.toggleState("pressed", this.pressed);
 		this.forwardNaming(button, true);
+		this.#forwardPopup(button);
+		this.#showLegend();
 		const submitted = this.latching && this.pressed ? this.value : null;
 		this.writeFormValue(submitted, String(this.pressed));
 	}
@@ -141,7 +160,7 @@ var SonicButton = class extends SonicFormElement {
 		this.#holding = holding;
 		button.addEventListener("pointerdown", (event) => {
 			if (event.button !== 0 || !this.#isMomentary()) return;
-			button.setPointerCapture(event.pointerId);
+			capturePointer(button, event.pointerId);
 			holding.hold(event.pointerId);
 		}, { signal });
 		button.addEventListener("keydown", (event) => {
@@ -149,6 +168,9 @@ var SonicButton = class extends SonicFormElement {
 			holding.hold(event.key);
 		}, { signal });
 	}
+	#forwardPopup(button) {
+		for (const [name, aria] of Object.entries(popupAttributes)) writeAttribute(button, aria, this.getAttribute(name) ?? void 0);
+	}
 	#isMomentary() {
 		return this.momentary && !this.latching;
 	}
@@ -159,6 +181,13 @@ var SonicButton = class extends SonicFormElement {
 		this.pressed = isPressed;
 		this.dispatchEvent(new Event("change", { bubbles: true }));
 	}
+	#showLegend() {
+		const legend = this.legend;
+		for (const part of this.#button.querySelectorAll(":scope > .sonic-button-cap > [data-sonic-when]")) {
+			const when = part.dataset.sonicWhen ?? "";
+			part.toggleAttribute("data-sonic-hidden", !pressWhens.has(when) && when !== legend);
+		}
+	}
 };
 
 //#endregion

package/dist/default/elements/dial.js

@@ -1,5 +1,6 @@
 import { requireChild, template } from "../lib/render.js";
 import { SonicValueElement } from "./value-element.js";
+import { bindScale } from "./scale.js";
 
 //#region src/elements/dial.ts
 const renderDial = template(`
@@ -54,7 +55,10 @@ var SonicDial = class extends SonicValueElement {
 	}
 	connect(signal) {
 		const dial = this.#dial;
-		this.bindScale(dial, requireChild(dial, ".sonic-dial-scale", HTMLDivElement), signal);
+		bindScale(this, {
+			control: dial,
+			marks: requireChild(dial, ".sonic-dial-scale", HTMLDivElement)
+		}, signal);
 		this.render();
 		this.checkStyles(dial, "dial.css");
 		this.bindGestures(dial, signal, () => ({

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

@@ -0,0 +1,77 @@
+import { SonicElement } from "./sonic-element.js";
+import { bindSurface } from "../lib/canvas-surface.js";
+
+//#region src/elements/display-element.ts
+var SonicDisplayElement = class extends SonicElement {
+	static observedAttributes = [
+		...SonicElement.observedAttributes,
+		"max",
+		"min"
+	];
+	get analyser() {
+		return this.#analyser;
+	}
+	set analyser(node) {
+		this.#analyser = node ?? void 0;
+		this.#surface?.requestFrame();
+	}
+	get max() {
+		return this.numberAttribute("max", 0);
+	}
+	set max(decibels) {
+		this.reflect("max", decibels);
+	}
+	get min() {
+		return this.numberAttribute("min", -90);
+	}
+	set min(decibels) {
+		this.reflect("min", decibels);
+	}
+	#analyser;
+	#buffer = /* @__PURE__ */ new Float32Array(0);
+	#surface;
+	attributeChangedCallback() {
+		this.#surface?.invalidate();
+	}
+	connectedCallback() {
+		this.upgradeProperties("analyser", "max", "min");
+		super.connectedCallback();
+	}
+	push(frame) {
+		this.receive(frame);
+		this.#surface?.requestFrame();
+	}
+	repaint() {
+		this.#surface?.rebuild();
+	}
+	connect(signal) {
+		const control = this.control;
+		this.keepControl(control, signal);
+		this.#surface = bindSurface({
+			canvas: this.canvas,
+			colours: this.colours,
+			numbers: this.numbers,
+			paint: (context, frame) => {
+				this.#paint(context, frame);
+			},
+			signal
+		});
+		this.checkStyles(control, this.sheet);
+	}
+	surface() {
+		return this.#surface;
+	}
+	#paint(context, frame) {
+		const analyser = this.isDisabled() ? void 0 : this.#analyser;
+		if (analyser) {
+			if (this.#buffer.length !== analyser.frequencyBinCount) this.#buffer = new Float32Array(analyser.frequencyBinCount);
+			this.pull(analyser, this.#buffer);
+			this.receive(this.#buffer);
+		}
+		this.paint(context, frame);
+		if (analyser) this.#surface?.requestFrame();
+	}
+};
+
+//#endregion
+export { SonicDisplayElement };

package/dist/default/elements/envelope.js

@@ -1,10 +1,10 @@
-import { requireChild, template } from "../lib/render.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicElement } from "./sonic-element.js";
+import { requireChild, template } from "../lib/render.js";
+import { bindDrag } from "../lib/pointer-drag.js";
 import { ReadoutClaim } from "./readout-claim.js";
 import { Readout } from "./readout.js";
 import { dragThresholdPx } from "../lib/drag-step.js";
-import { bindDrag } from "../lib/pointer-drag.js";
 import { SonicValueElement, linkValue } from "./value-element.js";
 import { adsrPath, adsrShape, adsrStages, timeStages } from "../lib/adsr-shape.js";
 import { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag } from "../lib/field.js";
@@ -44,6 +44,7 @@ function stageParts(envelope, hook, stages) {
 }
 const renderEnvelope = template(`
 		<div class="sonic-envelope" aria-hidden="true">
+			<div class="sonic-envelope-bracket"></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" />
@@ -127,15 +128,17 @@ 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);
 	#graph = requireChild(this.#envelope, ".sonic-envelope-graph", SVGElement);
 	#handles = stageParts(this.#envelope, "sonic-envelope-handle", timeStages);
+	#held;
 	#isDriving = false;
 	#line = requireChild(this.#envelope, ".sonic-envelope-line", SVGElement);
 	#pointerDrag;
@@ -232,8 +235,15 @@ var SonicEnvelope = class extends SonicElement {
 			at: shape.curveHandles.find((point) => point.stage === stage),
 			drives: this.#curveDrives(stage)
 		});
+		this.#drawBracket();
 		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 : "");
@@ -260,6 +270,8 @@ var SonicEnvelope = class extends SonicElement {
 		if (!pressed || pressed.drives.length === 0) return void 0;
 		const { drives, isFlipped, part } = pressed;
 		this.#claim.press(true);
+		this.#held = part;
+		this.#drawBracket();
 		const box = this.#graph.getBoundingClientRect();
 		const travel = {
 			x: Math.max(1, box.width * this.#shape.share),

package/dist/default/elements/meter.js

@@ -1,6 +1,6 @@
 import { toNumber } from "../lib/math.js";
-import { template } from "../lib/render.js";
 import { SonicElement } from "./sonic-element.js";
+import { template } from "../lib/render.js";
 import { parseNumberList } from "../lib/number-list.js";
 import { linearTaper } from "../lib/taper.js";
 import { ballisticsRates, fall, rise, stepNeedle } from "../lib/ballistics.js";

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

@@ -1,7 +1,8 @@
-import { placeChildren } from "../lib/render.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 import { SonicFormElement } from "./form-element.js";
 import { copyNode } from "../lib/copy-node.js";
+import { placeChildren } from "../lib/render.js";
+import { mirrorChildren } from "../lib/mirror-children.js";
 import { bindDrag } from "../lib/pointer-drag.js";
 
 //#region src/elements/radio-group.ts
@@ -48,7 +49,7 @@ var SonicRadioGroupElement = class extends SonicFormElement {
 	connect(signal) {
 		const group = this.group;
 		this.upgradeProperties("value");
-		this.mirrorChildren({
+		mirrorChildren(this, {
 			control: group,
 			copy: copyNode,
 			isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]"),

package/dist/default/elements/readout-claim.js

@@ -6,10 +6,7 @@ var ReadoutClaim = class {
 		return this.#isDragging || this.#keyTimer !== void 0;
 	}
 	#holdTimer;
-	#hover;
-	#isDismissed = false;
 	#isDragging = false;
-	#isEditing = false;
 	#keyTimer;
 	#onLapse;
 	constructor(onLapse) {
@@ -27,21 +24,6 @@ var ReadoutClaim = class {
 		this.#keyTimer = void 0;
 		return wasTimed;
 	}
-	dismiss() {
-		const wasHovered = this.#hover !== void 0;
-		this.#hover = void 0;
-		this.#isDismissed = wasHovered || this.#isDismissed;
-		return wasHovered;
-	}
-	edit(isOpen) {
-		this.#isEditing = isOpen;
-		if (isOpen) this.#hover = void 0;
-	}
-	hover(value) {
-		if (value === void 0) this.#isDismissed = false;
-		if (this.#isDismissed || this.#isEditing || this.isRevealed) return;
-		this.#hover = value;
-	}
 	press(isDown) {
 		this.conceal("drag");
 		if (!isDown) {
@@ -54,7 +36,6 @@ var ReadoutClaim = class {
 		}, 250);
 	}
 	reveal(by) {
-		this.#hover = void 0;
 		if (by === "drag") {
 			this.#isDragging = true;
 			return;
@@ -65,16 +46,6 @@ var ReadoutClaim = class {
 			this.#onLapse();
 		}, keyRevealMs);
 	}
-	shown(current, isReadout) {
-		if (this.#isEditing) return {
-			isOpen: true,
-			value: void 0
-		};
-		return {
-			isOpen: (this.isRevealed || this.#hover !== void 0) && isReadout,
-			value: this.#hover ?? current
-		};
-	}
 };
 
 //#endregion

package/dist/default/elements/scale.js

@@ -0,0 +1,43 @@
+import { copyNode } from "../lib/copy-node.js";
+import { placeChildren } from "../lib/render.js";
+import { mirrorChildren } from "../lib/mirror-children.js";
+import { linkValue } from "./value-element.js";
+
+//#region src/elements/scale.ts
+function scaleValue(mark) {
+	const text = mark.dataset.sonicValue?.trim();
+	return text ? Number(text) : NaN;
+}
+function scaleMark(original) {
+	const mark = copyNode(original);
+	if (!(mark instanceof HTMLElement || mark instanceof SVGElement)) return void 0;
+	if (!Number.isFinite(scaleValue(mark))) return void 0;
+	const isTick = mark.childElementCount === 0 && mark.textContent.trim() === "";
+	mark.classList.add(isTick ? "sonic-scale-tick" : "sonic-scale-label");
+	return mark;
+}
+function bindScale(element, { control, marks }, signal) {
+	const { mapping, watch } = linkValue(element);
+	const render = () => {
+		const { proportionOf } = mapping();
+		for (const mark of marks.children) {
+			if (!(mark instanceof HTMLElement || mark instanceof SVGElement)) continue;
+			const at = String(proportionOf(scaleValue(mark)));
+			if (mark.style.getPropertyValue("--_sonic-scale-at") !== at) mark.style.setProperty("--_sonic-scale-at", at);
+		}
+	};
+	mirrorChildren(element, {
+		control,
+		copy: scaleMark,
+		isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]"),
+		isPassed: (child) => child instanceof Element && child.matches(".sonic-led"),
+		place: (copies) => {
+			placeChildren(marks, copies);
+			render();
+		}
+	}, signal);
+	signal.addEventListener("abort", watch(render), { once: true });
+}
+
+//#endregion
+export { bindScale };

package/dist/default/elements/slider.js

@@ -1,5 +1,9 @@
+import { clampProportion } from "../lib/math.js";
 import { requireChild, template } from "../lib/render.js";
 import { SonicValueElement } from "./value-element.js";
+import { bindScale } from "./scale.js";
+import { bindHoverPreview } from "../lib/hover-preview.js";
+import { sortedRegions } from "../lib/time-regions.js";
 
 //#region src/elements/slider.ts
 function grooveStop(proportion) {
@@ -32,8 +36,16 @@ var SonicSlider = class extends SonicValueElement {
 		...SonicValueElement.observedAttributes,
 		"modulation",
 		"orientation",
+		"scrub",
 		"spring"
 	];
+	get buffered() {
+		return this.#buffered.map(([start, end]) => [start, end]);
+	}
+	set buffered(regions) {
+		this.#buffered = sortedRegions(regions);
+		this.render();
+	}
 	get groovePress() {
 		return this.getAttribute("groove-press") === "none" ? "none" : "jump";
 	}
@@ -58,24 +70,52 @@ var SonicSlider = class extends SonicValueElement {
 	set orientation(direction) {
 		this.reflect("orientation", direction);
 	}
+	get scrub() {
+		return this.hasAttribute("scrub");
+	}
+	set scrub(isScrubbing) {
+		this.reflect("scrub", isScrubbing);
+	}
 	get spring() {
 		return this.hasAttribute("spring");
 	}
 	set spring(isSpring) {
 		this.reflect("spring", isSpring);
 	}
+	#buffered = [];
+	#hover;
 	#slider = renderSlider();
 	connectedCallback() {
-		this.upgradeProperties("groovePress", "modulationValue", "modulation", "orientation", "spring");
+		this.upgradeProperties("buffered", "groovePress", "modulationValue", "modulation", "orientation", "scrub", "spring");
 		super.connectedCallback();
 	}
 	connect(signal) {
 		const slider = this.#slider;
 		const cap = requireChild(slider, ".sonic-slider-cap", HTMLDivElement);
-		this.bindScale(slider, requireChild(slider, ".sonic-slider-scale", HTMLDivElement), signal);
+		bindScale(this, {
+			control: slider,
+			marks: requireChild(slider, ".sonic-slider-scale", HTMLDivElement)
+		}, signal);
 		slider.addEventListener("transitionend", (event) => {
 			if (event.propertyName === "--_sonic-slider-value") this.toggleState("springing", false);
 		}, { signal });
+		this.#hover = bindHoverPreview(slider, {
+			canShow: () => this.scrub && this.readout && this.orientation === "horizontal",
+			dismiss: () => {
+				this.render();
+			},
+			isTaken: () => this.isEditing() || this.isRevealed(),
+			show: () => {
+				this.renderReadout();
+				this.#placeReadout(slider);
+			},
+			valueAt: (event) => {
+				const axis = this.#axis(slider, cap);
+				const at = clampProportion((axis.position(event) - axis.startPx) / axis.travelPx);
+				const mapping = this.mapping();
+				return mapping.snap(mapping.valueAt(at));
+			}
+		}, signal);
 		this.render();
 		this.checkStyles(slider, "slider.css");
 		this.bindGestures(slider, signal, (event) => {
@@ -90,12 +130,28 @@ var SonicSlider = class extends SonicValueElement {
 		return this.orientation;
 	}
 	draw() {
+		if (this.isEditing() || this.isRevealed()) this.#hover?.clear();
 		this.writeProportions(this.#slider, "slider", this.modulation);
 		this.#renderBuffered(this.#slider);
+		this.#renderScrub(this.#slider);
+		this.#placeReadout(this.#slider);
 	}
 	focusTarget() {
 		return this.#slider;
 	}
+	heldWrite(next) {
+		super.heldWrite(next);
+		if (this.scrub) this.render();
+	}
+	holdChanged() {
+		if (this.scrub) this.render();
+	}
+	previewValue() {
+		return this.#hover?.value();
+	}
+	scrubsKeyRepeat() {
+		return this.scrub;
+	}
 	springTarget() {
 		return this.spring ? this.originValue() : void 0;
 	}
@@ -112,8 +168,15 @@ var SonicSlider = class extends SonicValueElement {
 			travelPx: Math.max(1, box.width - capBox.width)
 		};
 	}
+	#placeReadout(slider) {
+		if (!this.scrub) {
+			slider.style.removeProperty("--_sonic-slider-readout-value");
+			return;
+		}
+		slider.style.setProperty("--_sonic-slider-readout-value", String(this.mapping().proportionOf(this.readoutValue())));
+	}
 	#renderBuffered(slider) {
-		const buffered = this.buffered;
+		const buffered = this.#buffered;
 		if (buffered.length === 0) {
 			slider.style.removeProperty("--_sonic-slider-buffered-regions");
 			return;
@@ -130,6 +193,22 @@ var SonicSlider = class extends SonicValueElement {
 		});
 		slider.style.setProperty("--_sonic-slider-buffered-regions", `linear-gradient(var(--_sonic-slider-toward), ${stops.join(", ")})`);
 	}
+	#renderScrub(slider) {
+		const { style } = slider;
+		const { proportionOf } = this.mapping();
+		const isHeld = this.scrub && this.heldFrom() !== void 0;
+		const played = proportionOf(this.playback());
+		const scrubbed = proportionOf(this.value);
+		if (isHeld) style.setProperty("--_sonic-slider-played", String(played));
+		else style.removeProperty("--_sonic-slider-played");
+		if (played === scrubbed || !isHeld || !this.isRevealed()) {
+			style.removeProperty("--_sonic-slider-scrub-region");
+			return;
+		}
+		const from = grooveStop(Math.min(played, scrubbed));
+		const to = grooveStop(Math.max(played, scrubbed));
+		style.setProperty("--_sonic-slider-scrub-region", `linear-gradient(var(--_sonic-slider-toward), transparent ${from}, var(--_sonic-slider-scrub) ${from} ${to}, transparent ${to})`);
+	}
 };
 
 //#endregion

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

@@ -1,5 +1,5 @@
 import { toNumber } from "../lib/math.js";
-import { attachSlots } from "../lib/render.js";
+import { appendOnce } from "../lib/owned-control.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 
 //#region src/elements/sonic-element.ts
@@ -23,7 +23,6 @@ var SonicElement = class extends HTMLElement {
 	}
 	internals = "attachInternals" in HTMLElement.prototype ? this.attachInternals() : void 0;
 	#connection;
-	#slots;
 	blur() {
 		this.#focused()?.blur();
 	}
@@ -77,8 +76,7 @@ var SonicElement = class extends HTMLElement {
 	}
 	keepControl(control, signal) {
 		const keep = () => {
-			this.#appendOnce(control);
-			this.#checkChildren([...this.childNodes].filter((child) => child !== control));
+			appendOnce(this, control);
 		};
 		const observer = new MutationObserver(keep);
 		keep();
@@ -87,50 +85,6 @@ var SonicElement = class extends HTMLElement {
 			observer.disconnect();
 		}, { once: true });
 	}
-	mirrorChildren({ control, copy, isCopied = () => true, isPassed = () => false, place }, signal) {
-		const slots = this.#slots ?? attachSlots(this);
-		let copies = /* @__PURE__ */ new Map();
-		this.#slots = slots;
-		const mirror = (touched) => {
-			this.#appendOnce(control);
-			const children = [...this.childNodes].filter((child) => child !== control);
-			const slotted = children.filter((child) => child instanceof Element || child instanceof Text);
-			const kept = copies;
-			const originals = children.filter((child) => isCopied(child));
-			this.#checkMirrored(originals);
-			this.#checkChildren(children.filter((child) => !isCopied(child) && !isPassed(child)));
-			copies = new Map(originals.map((original) => [original, touched && !touched.has(original) && kept.has(original) ? kept.get(original) : copy(original)]));
-			place([...copies.values()].filter((made) => made !== void 0));
-			slots.shown.assign(...slotted.filter((child) => !isCopied(child)), control);
-			slots.kept.assign(...slotted.filter((child) => isCopied(child)));
-		};
-		const watch = () => {
-			observer.disconnect();
-			observer.observe(this, { childList: true });
-			for (const child of this.childNodes) {
-				if (child === control) continue;
-				observer.observe(child, {
-					attributes: true,
-					characterData: true,
-					childList: true,
-					subtree: true
-				});
-			}
-		};
-		const observer = new MutationObserver((records) => {
-			const changes = records.filter((record) => this.#isCopiedChange(record, control, isCopied));
-			if (changes.length === 0) return;
-			if (changes.some((record) => record.target === this)) {
-				mirror();
-				watch();
-			} else mirror(new Set(changes.map((record) => this.#childHolding(record.target))));
-		});
-		mirror();
-		watch();
-		signal.addEventListener("abort", () => {
-			observer.disconnect();
-		}, { once: true });
-	}
 	namingLabels() {
 		return [];
 	}
@@ -161,30 +115,11 @@ var SonicElement = class extends HTMLElement {
 			this[name] = value;
 		}
 	}
-	#appendOnce(control) {
-		const [hook] = control.classList;
-		const stale = [...this.children].filter((child) => child !== control && hook !== void 0 && child.classList.contains(hook));
-		for (const child of stale) child.remove();
-		if (control.parentNode !== this) this.append(control);
-	}
-	#checkChildren(undocumented) {}
-	#checkMirrored(originals) {}
-	#childHolding(node) {
-		let current = node;
-		while (current && current.parentNode !== this) current = current.parentNode;
-		return current ?? void 0;
-	}
 	#focused() {
 		const root = this.getRootNode();
 		const active = root instanceof ShadowRoot ? root.activeElement : this.ownerDocument.activeElement;
 		return active instanceof HTMLElement && this.contains(active) ? active : void 0;
 	}
-	#isCopiedChange(record, control, isCopied) {
-		if (record.target === this) return record.removedNodes.length > 0 || [...record.addedNodes].some((node) => node !== control);
-		const child = this.#childHolding(record.target);
-		if (child === void 0) return false;
-		return isCopied(child) || record.type === "attributes" && record.target === child;
-	}
 };
 
 //#endregion