@xsynaptic/sonic-ui 0.4.0 → 0.6.0

package/dist/default/elements/key.js

@@ -1,169 +0,0 @@
-import { 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";
-
-//#region src/elements/key.ts
-const renderKey = template(`
-		<button class="sonic-key" type="button"><span class="sonic-key-cap"></span></button>
-	`, HTMLButtonElement);
-const holdKeys = /* @__PURE__ */ new Set([" ", "Enter"]);
-var SonicKey = class extends SonicFormElement {
-	static observedAttributes = [
-		...SonicFormElement.observedAttributes,
-		"busy",
-		"momentary",
-		"pressed",
-		"soft-disabled",
-		"toggle",
-		"value"
-	];
-	get busy() {
-		return this.hasAttribute("busy");
-	}
-	set busy(isBusy) {
-		this.reflect("busy", isBusy);
-	}
-	get defaultPressed() {
-		return this.hasAttribute("pressed");
-	}
-	set defaultPressed(isPressed) {
-		this.reflect("pressed", isPressed);
-	}
-	get momentary() {
-		return this.hasAttribute("momentary");
-	}
-	set momentary(isMomentary) {
-		this.reflect("momentary", isMomentary);
-	}
-	get pressed() {
-		return this.#isDirty ? this.#pressed : this.defaultPressed;
-	}
-	set pressed(isPressed) {
-		this.#isDirty = true;
-		this.#pressed = isPressed === true;
-		this.render();
-	}
-	get softDisabled() {
-		return this.hasAttribute("soft-disabled");
-	}
-	set softDisabled(isSoftDisabled) {
-		this.reflect("soft-disabled", isSoftDisabled);
-	}
-	get toggle() {
-		return this.hasAttribute("toggle");
-	}
-	set toggle(isToggle) {
-		this.reflect("toggle", isToggle);
-	}
-	get value() {
-		return this.getAttribute("value") ?? "on";
-	}
-	set value(value) {
-		this.reflect("value", value);
-	}
-	#holder;
-	#isDirty = false;
-	#key = renderKey();
-	#pressed = false;
-	attributeChangedCallback(name) {
-		if (name === "pressed") this.#isDirty = false;
-		if (this.isDisabled() || this.#isSoftDisabled()) this.#release();
-		this.render();
-	}
-	formResetCallback() {
-		this.attributeChangedCallback("pressed");
-	}
-	activate() {
-		this.#key.click();
-	}
-	connect(signal) {
-		const key = this.#key;
-		const cap = requireChild(key, ".sonic-key-cap", HTMLSpanElement);
-		this.upgradeProperties("busy", "defaultPressed", "momentary", "softDisabled", "toggle", "pressed", "value");
-		this.mirrorChildren({
-			control: key,
-			copy: (originals) => {
-				cap.replaceChildren(...originals.map((original) => copyNode(original)));
-			}
-		}, signal);
-		this.render();
-		this.checkStyles(key, "key.css");
-		signal.addEventListener("abort", () => {
-			this.#release();
-		}, { once: true });
-		key.addEventListener("click", (event) => {
-			if (this.#isSoftDisabled()) {
-				event.preventDefault();
-				event.stopImmediatePropagation();
-				return;
-			}
-			if (!this.toggle) return;
-			this.pressed = !this.pressed;
-			this.dispatchEvent(new Event("change", { bubbles: true }));
-		}, { signal });
-		this.#bindMomentary(key, signal);
-	}
-	focusTarget() {
-		return this.#key;
-	}
-	render() {
-		const key = this.#key;
-		key.disabled = this.isDisabled();
-		writeAttribute(key, "aria-disabled", this.#isSoftDisabled() ? "true" : void 0);
-		writeAttribute(key, "aria-busy", this.busy ? "true" : void 0);
-		key.removeAttribute("aria-pressed");
-		if (this.toggle) key.setAttribute("aria-pressed", String(this.pressed));
-		this.toggleState("pressed", this.pressed);
-		this.forwardNaming(key, true);
-		const submitted = this.toggle && this.pressed ? this.value : null;
-		this.writeFormValue(submitted, String(this.pressed));
-	}
-	restoreState(state) {
-		if (this.toggle) this.pressed = state === "true";
-	}
-	#bindMomentary(key, signal) {
-		const releasePointer = (event) => {
-			if (event.pointerId === this.#holder) this.#release();
-		};
-		key.addEventListener("pointerdown", (event) => {
-			if (event.button !== 0 || !this.#isMomentary()) return;
-			key.setPointerCapture(event.pointerId);
-			this.#hold(event.pointerId);
-		}, { signal });
-		key.addEventListener("lostpointercapture", releasePointer, { signal });
-		key.addEventListener("pointercancel", releasePointer, { signal });
-		key.addEventListener("pointerup", releasePointer, { signal });
-		key.addEventListener("keydown", (event) => {
-			if (event.repeat || !holdKeys.has(event.key) || !this.#isMomentary()) return;
-			this.#hold(event.key);
-		}, { signal });
-		key.addEventListener("keyup", (event) => {
-			if (event.key === this.#holder) this.#release();
-		}, { signal });
-		key.addEventListener("blur", () => {
-			if (typeof this.#holder === "string") this.#release();
-		}, { signal });
-	}
-	#hold(holder) {
-		if (this.isDisabled() || this.#isSoftDisabled() || this.#holder !== void 0) return;
-		this.#holder = holder;
-		this.pressed = true;
-		this.dispatchEvent(new Event("change", { bubbles: true }));
-	}
-	#isMomentary() {
-		return this.momentary && !this.toggle;
-	}
-	#isSoftDisabled() {
-		return this.softDisabled && !this.isDisabled();
-	}
-	#release() {
-		if (this.#holder === void 0) return;
-		this.#holder = void 0;
-		this.pressed = false;
-		this.dispatchEvent(new Event("change", { bubbles: true }));
-	}
-};
-
-//#endregion
-export { SonicKey };

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

@@ -1,546 +0,0 @@
-import { requireChild } from "../lib/render.js";
-import { writeAttribute } from "../lib/write-attribute.js";
-import { SonicFormElement } from "./form-element.js";
-import { RangeEntry } from "./range-entry.js";
-import { copyNode } from "../lib/copy-node.js";
-import { passDetent } from "../lib/detent.js";
-import { clamp, clampUnit, trimFloat, wrapUnit } from "../lib/math.js";
-import { nearestEntry, parseNumberList } from "../lib/number-list.js";
-import { readPxProperty } from "../lib/read-px-property.js";
-import { linearTaper, listTaper, logTaper, skewTaper } from "../lib/taper.js";
-
-//#region src/elements/range-element.ts
-const detentZonePx = 8;
-const fineScale = .1;
-const keyRevealMs = 1e3;
-const pageSteps = 10;
-const revealMs = 250;
-const revealPx = 4;
-const canPopover = "togglePopover" in HTMLElement.prototype;
-let instanceCount = 0;
-const resetKeys = /* @__PURE__ */ new Set(["Backspace", "Delete"]);
-const endKeys = /* @__PURE__ */ new Set(["End", "Home"]);
-const keySteps = /* @__PURE__ */ new Map([
-	["ArrowDown", -1],
-	["ArrowLeft", -1],
-	["ArrowRight", 1],
-	["ArrowUp", 1],
-	["PageDown", -10],
-	["PageUp", pageSteps]
-]);
-const roleAttributes = [
-	"aria-disabled",
-	"aria-orientation",
-	"aria-valuemax",
-	"aria-valuemin",
-	"aria-valuenow",
-	"aria-valuetext",
-	"role",
-	"tabindex"
-];
-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 [];
-	if (!Number.isFinite(scaleValue(mark))) return [];
-	const isTick = mark.childElementCount === 0 && mark.textContent.trim() === "";
-	mark.classList.add(isTick ? "sonic-scale-tick" : "sonic-scale-label");
-	return [mark];
-}
-var SonicRangeElement = class extends SonicFormElement {
-	static observedAttributes = [
-		...SonicFormElement.observedAttributes,
-		"detent",
-		"max",
-		"midpoint",
-		"min",
-		"notched",
-		"origin",
-		"readout",
-		"step",
-		"taper",
-		"value",
-		"values"
-	];
-	get default() {
-		return this.optionalNumberAttribute("default");
-	}
-	set default(value) {
-		this.reflect("default", value);
-	}
-	get detent() {
-		return this.optionalNumberAttribute("detent");
-	}
-	set detent(value) {
-		this.reflect("detent", value);
-	}
-	get dimmed() {
-		return this.hasAttribute("dimmed");
-	}
-	set dimmed(isDimmed) {
-		this.reflect("dimmed", isDimmed);
-	}
-	get doublePress() {
-		return this.getAttribute("double-press") === "reset" ? "reset" : "type";
-	}
-	set doublePress(gesture) {
-		this.reflect("double-press", gesture);
-	}
-	get formatValue() {
-		return this.#formatValue;
-	}
-	set formatValue(format) {
-		this.#formatValue = format;
-		this.render();
-	}
-	get max() {
-		return this.numberAttribute("max", 100);
-	}
-	set max(value) {
-		this.reflect("max", value);
-	}
-	get midpoint() {
-		return this.optionalNumberAttribute("midpoint");
-	}
-	set midpoint(value) {
-		this.reflect("midpoint", value);
-	}
-	get min() {
-		return this.numberAttribute("min", 0);
-	}
-	set min(value) {
-		this.reflect("min", value);
-	}
-	get notched() {
-		return this.hasAttribute("notched");
-	}
-	set notched(isNotched) {
-		this.reflect("notched", isNotched);
-	}
-	get origin() {
-		return this.optionalNumberAttribute("origin");
-	}
-	set origin(value) {
-		this.reflect("origin", value);
-	}
-	get parseValue() {
-		return this.#parseValue;
-	}
-	set parseValue(parse) {
-		this.#parseValue = parse;
-	}
-	get readout() {
-		return this.hasAttribute("readout");
-	}
-	set readout(isShown) {
-		this.reflect("readout", isShown);
-	}
-	get step() {
-		return this.numberAttribute("step", 1);
-	}
-	set step(value) {
-		this.reflect("step", value);
-	}
-	get taper() {
-		return this.getAttribute("taper") === "log" ? "log" : "linear";
-	}
-	set taper(curve) {
-		this.reflect("taper", curve);
-	}
-	get value() {
-		return this.#value;
-	}
-	set value(next) {
-		if (this.#drag) return;
-		this.#write(next);
-	}
-	get values() {
-		return parseNumberList(this.getAttribute("values"));
-	}
-	set values(entries) {
-		this.reflect("values", entries?.join(" "));
-	}
-	#drag;
-	#entries;
-	#entry;
-	#formatValue;
-	#instance = String(instanceCount += 1);
-	#isDirty = false;
-	#keyRevealTimer;
-	#parseValue;
-	#readout;
-	#scale;
-	#value = 0;
-	attributeChangedCallback(name) {
-		this.#entries = parseNumberList(this.getAttribute("values"));
-		if (name === "value") {
-			if (this.#drag) return;
-			this.#isDirty = false;
-		}
-		if (name === "disabled" && this.isDisabled()) {
-			this.#entry?.close(false);
-			this.#endDrag();
-		}
-		this.#value = this.#clamp(this.#isDirty ? this.#value : this.numberAttribute("value", this.min));
-		this.render();
-	}
-	connectedCallback() {
-		this.upgradeProperties("default", "dimmed", "doublePress", "max", "midpoint", "min", "notched", "origin", "readout", "step", "taper", "values", "detent", "formatValue", "parseValue", "value");
-		super.connectedCallback();
-	}
-	bindGestures(control, signal, grab) {
-		const entry = this.#bindEntry(control, signal);
-		control.addEventListener("pointerdown", (event) => {
-			if (event.button !== 0 || this.isDisabled() || entry.isOpen) return;
-			if (event.pointerType === "touch") event.preventDefault();
-			control.focus();
-			if (event.metaKey || event.ctrlKey) {
-				this.#reset();
-				return;
-			}
-			const fromValue = this.#value;
-			const axis = grab(event);
-			if (!axis) return;
-			const startPosition = axis.position(event);
-			const drag = {
-				detent: this.#detentHold(control, axis.travelPx),
-				fromValue,
-				isRevealed: false,
-				lastPosition: startPosition,
-				pointerId: event.pointerId,
-				position: axis.position,
-				rawFraction: this.fraction(this.#value),
-				revealTimer: void 0,
-				startPosition,
-				travelPx: axis.travelPx
-			};
-			drag.revealTimer = setTimeout(() => {
-				this.#reveal(drag);
-			}, revealMs);
-			this.#drag = drag;
-			control.setPointerCapture(event.pointerId);
-			this.toggleState("dragging", true);
-		}, { signal });
-		control.addEventListener("pointermove", (event) => {
-			const drag = this.#drag;
-			if (event.pointerId !== drag?.pointerId) return;
-			const position = drag.position(event);
-			const scale = event.shiftKey ? fineScale : 1;
-			const next = this.#move(drag, (position - drag.lastPosition) / drag.travelPx * scale);
-			drag.lastPosition = position;
-			if (Math.abs(position - drag.startPosition) >= revealPx) this.#reveal(drag);
-			this.input(next);
-		}, { signal });
-		const endDrag = (event) => {
-			if (event.pointerId === this.#drag?.pointerId) this.#endDrag();
-		};
-		control.addEventListener("pointercancel", (event) => {
-			endDrag(event);
-			entry.forgetPress();
-		}, { signal });
-		control.addEventListener("lostpointercapture", endDrag, { signal });
-		control.addEventListener("pointerup", (event) => {
-			if (event.pointerId !== this.#drag?.pointerId) return;
-			this.#endDrag();
-			if (!entry.press(event) || this.springTarget() !== void 0) return;
-			if (this.doublePress === "reset") this.#reset();
-			else entry.open();
-		}, { signal });
-		this.#bindKeys(control, entry, signal);
-		signal.addEventListener("abort", () => {
-			this.#endDrag();
-			this.#hideForKeys();
-		}, { once: true });
-	}
-	bindScale(control, scale, signal) {
-		this.#scale = scale;
-		this.mirrorChildren({
-			control,
-			copy: (originals) => {
-				scale.replaceChildren(...originals.flatMap((original) => scaleMark(original)));
-				this.renderScale();
-			},
-			isCopied: (child) => child instanceof Element && child.matches("[data-sonic-value]")
-		}, signal);
-	}
-	clampRange(next) {
-		const min = this.min;
-		if (!this.wraps()) return clamp(next, min, this.#max());
-		const range = this.range();
-		if (range <= 0) return min;
-		const offset = trimFloat(((next - min) % range + range) % range);
-		return offset >= range ? min : trimFloat(min + offset);
-	}
-	controlRole() {
-		return "slider";
-	}
-	fraction(value) {
-		return (this.#taper() ?? linearTaper(this.min, this.#max())).position(value);
-	}
-	input(next) {
-		const previous = this.#value;
-		this.#write(next);
-		if (this.#value === previous) return false;
-		this.dispatchEvent(new Event("input", {
-			bubbles: true,
-			composed: true
-		}));
-		return true;
-	}
-	modulationFractions(amount) {
-		const value = this.fraction(this.#value);
-		const modulated = this.fraction(this.#value + amount);
-		return [Math.min(value, modulated), Math.max(value, modulated)];
-	}
-	originFraction() {
-		return this.fraction(this.restValue());
-	}
-	positions() {
-		const positions = this.#entries?.length ?? Math.round(this.range() / this.step) + (this.wraps() ? 0 : 1);
-		if (!this.notched || !Number.isFinite(positions) || positions < 2) return;
-		return positions;
-	}
-	range() {
-		return this.#max() - this.min;
-	}
-	renderAria(control, orientation) {
-		this.writeFormValue(String(this.#value), String(this.#value));
-		if (this.#entry?.isOpen) {
-			for (const name of roleAttributes) control.removeAttribute(name);
-			this.forwardNaming(control, false);
-			this.#renderReadout();
-			return;
-		}
-		const [low, high] = this.#bounds();
-		control.setAttribute("role", this.controlRole());
-		control.setAttribute("aria-valuemin", String(low));
-		control.setAttribute("aria-valuemax", String(high));
-		control.setAttribute("aria-valuenow", String(this.#value));
-		if (orientation) control.setAttribute("aria-orientation", orientation);
-		writeAttribute(control, "aria-valuetext", this.#formatValue?.(this.#value));
-		this.forwardNaming(control, true);
-		this.#renderDisabled(control);
-		this.#renderReadout();
-	}
-	renderScale() {
-		const marks = this.#scale?.children ?? [];
-		for (const mark of marks) {
-			if (!(mark instanceof HTMLElement || mark instanceof SVGElement)) continue;
-			const at = String(this.fraction(this.clampRange(scaleValue(mark))));
-			if (mark.style.getPropertyValue("--_sonic-scale-at") !== at) mark.style.setProperty("--_sonic-scale-at", at);
-		}
-	}
-	restoreState(state) {
-		this.value = Number(state);
-	}
-	restValue() {
-		return this.origin ?? this.#bounds()[0];
-	}
-	springTarget() {}
-	valueAt(fraction) {
-		return (this.#taper() ?? linearTaper(this.min, this.#max())).value(fraction);
-	}
-	valueText() {
-		return this.#formatValue?.(this.#value) ?? String(this.#value);
-	}
-	wraps() {
-		return false;
-	}
-	#bindEntry(control, signal) {
-		const input = requireChild(control, "input", HTMLInputElement);
-		const bubble = control.querySelector("[popover]");
-		input.id = `sonic-entry-${this.#instance}`;
-		if (bubble) {
-			const anchor = `--sonic-readout-${this.#instance}`;
-			this.#readout = {
-				bubble,
-				text: requireChild(bubble, "span", HTMLElement)
-			};
-			control.style.setProperty("anchor-name", anchor);
-			bubble.style.setProperty("position-anchor", anchor);
-		}
-		const entry = new RangeEntry(input, {
-			commit: (text) => {
-				this.#commit((this.#parseValue ?? Number.parseFloat)(text));
-			},
-			text: () => this.#parseValue ? this.valueText() : String(this.#value),
-			toggle: (isOpen) => {
-				if (isOpen) this.forwardNaming(input, true);
-				this.toggleState("editing", isOpen);
-				this.render();
-			}
-		});
-		this.#entry = entry;
-		entry.bind(control, signal);
-		return entry;
-	}
-	#bindKeys(control, entry, signal) {
-		control.addEventListener("keydown", (event) => {
-			if (this.isDisabled() || event.defaultPrevented || event.target !== control) return;
-			if (event.key === "Enter") {
-				if (this.springTarget() !== void 0) return;
-				event.preventDefault();
-				entry.open();
-				return;
-			}
-			const next = this.#keyTarget(event.key);
-			if (next === void 0) return;
-			event.preventDefault();
-			this.#commit(next);
-			this.#revealForKeys();
-		}, { signal });
-		control.addEventListener("keyup", (event) => {
-			if (keySteps.has(event.key) || endKeys.has(event.key)) this.#springBack();
-		}, { signal });
-		control.addEventListener("blur", () => {
-			this.#hideForKeys();
-			this.#springBack();
-		}, { signal });
-	}
-	#bounds() {
-		const entries = this.#entries;
-		return [entries?.[0] ?? this.min, entries?.at(-1) ?? this.#max()];
-	}
-	#clamp(next) {
-		const entries = this.#entries;
-		if (entries) return nearestEntry(entries, next);
-		const min = this.min;
-		const step = this.step;
-		const stepped = step > 0 ? min + Math.round((next - min) / step) * step : next;
-		return this.clampRange(trimFloat(stepped));
-	}
-	#commit(next) {
-		if (this.input(next)) this.dispatchEvent(new Event("change", { bubbles: true }));
-	}
-	#detentHold(control, travelPx) {
-		const detent = this.detent;
-		if (detent === void 0) return void 0;
-		const value = this.#clamp(detent);
-		const zonePx = readPxProperty(getComputedStyle(control), "--_sonic-detent-zone", detentZonePx);
-		return {
-			place: this.fraction(value),
-			slack: value === this.#value ? 0 : void 0,
-			value,
-			zone: zonePx / travelPx
-		};
-	}
-	#end(step) {
-		if (!this.wraps()) return this.#bounds()[1];
-		return this.min + (Math.ceil(this.range() / step) - 1) * step;
-	}
-	#endDrag() {
-		const drag = this.#drag;
-		if (!drag) return;
-		clearTimeout(drag.revealTimer);
-		this.#drag = void 0;
-		this.toggleState("dragging", false);
-		this.#renderReadout();
-		if (this.#value !== drag.fromValue) this.dispatchEvent(new Event("change", { bubbles: true }));
-		this.#springBack();
-	}
-	#hideForKeys() {
-		clearTimeout(this.#keyRevealTimer);
-		if (this.#keyRevealTimer === void 0) return;
-		this.#keyRevealTimer = void 0;
-		this.#renderReadout();
-	}
-	#isValueShown() {
-		return (this.#drag?.isRevealed === true || this.#keyRevealTimer !== void 0) && this.readout;
-	}
-	#keyTarget(key) {
-		if (key === "Home") return this.#bounds()[0];
-		const step = this.step > 0 ? this.step : this.range() / 100;
-		if (key === "End") return this.#end(step);
-		if (resetKeys.has(key)) return this.default;
-		const steps = keySteps.get(key);
-		if (steps === void 0) return void 0;
-		return this.#stopAtDetent(this.#stepBy(steps, step));
-	}
-	#max() {
-		return Math.max(this.min, this.max);
-	}
-	#move(drag, delta) {
-		const { detent } = drag;
-		const to = drag.rawFraction + delta;
-		const next = detent ? passDetent(detent, drag.rawFraction, to) : to;
-		if (detent && next === void 0) {
-			drag.rawFraction = detent.place;
-			return detent.value;
-		}
-		const place = next ?? to;
-		drag.rawFraction = this.wraps() ? wrapUnit(place) : clampUnit(place);
-		return this.valueAt(drag.rawFraction);
-	}
-	#renderDisabled(control) {
-		if (this.isDisabled()) {
-			control.setAttribute("aria-disabled", "true");
-			control.removeAttribute("tabindex");
-			return;
-		}
-		control.removeAttribute("aria-disabled");
-		control.setAttribute("tabindex", "0");
-	}
-	#renderReadout() {
-		const readout = this.#readout;
-		if (!readout || !canPopover || !this.isConnected) return;
-		const isEditing = this.#entry?.isOpen === true;
-		readout.text.hidden = isEditing;
-		if (!isEditing) readout.text.textContent = this.valueText();
-		readout.bubble.togglePopover(isEditing || this.#isValueShown());
-	}
-	#reset() {
-		this.#commit(this.default ?? NaN);
-	}
-	#reveal(drag) {
-		if (drag.isRevealed || this.#drag !== drag) return;
-		drag.isRevealed = true;
-		this.#renderReadout();
-	}
-	#revealForKeys() {
-		clearTimeout(this.#keyRevealTimer);
-		this.#keyRevealTimer = setTimeout(() => {
-			this.#hideForKeys();
-		}, keyRevealMs);
-		this.#renderReadout();
-	}
-	#springBack() {
-		const target = this.springTarget();
-		if (target !== void 0) this.#commit(target);
-	}
-	#stepBy(steps, step) {
-		const entries = this.#entries;
-		if (entries) return entries[clamp(entries.indexOf(this.#value) + steps, 0, entries.length - 1)] ?? this.#value;
-		const taper = this.#taper();
-		if (!taper) return this.#value + steps * step;
-		const next = this.#clamp(taper.value(taper.position(this.#value) + steps / 100));
-		return next === this.#value ? this.#value + Math.sign(steps) * step : next;
-	}
-	#stopAtDetent(next) {
-		const detent = this.detent;
-		if (detent === void 0) return next;
-		const value = this.#clamp(detent);
-		return (this.#value - value) * (next - value) < 0 ? value : next;
-	}
-	#taper() {
-		const entries = this.#entries;
-		if (entries) return listTaper(entries);
-		if (this.notched || this.wraps()) return void 0;
-		const min = this.min;
-		const max = this.#max();
-		return (this.taper === "log" ? logTaper(min, max) : void 0) ?? skewTaper(min, max, this.midpoint ?? NaN);
-	}
-	#write(next) {
-		if (!Number.isFinite(next)) return;
-		this.#isDirty = true;
-		const clamped = this.#clamp(next);
-		if (clamped === this.#value) return;
-		this.#value = clamped;
-		this.render();
-	}
-};
-
-//#endregion
-export { SonicRangeElement };