@xsynaptic/sonic-ui 0.4.0 → 0.6.0

package/dist/default/elements/slider.js

@@ -1,20 +1,16 @@
 import { requireChild, template } from "../lib/render.js";
-import { SonicRangeElement } from "./range-element.js";
+import { SonicValueElement } from "./value-element.js";
 
 //#region src/elements/slider.ts
-function readRanges(ranges) {
-	if ("start" in ranges) return Array.from({ length: ranges.length }, (_entry, index) => [ranges.start(index), ranges.end(index)]);
-	return [...ranges].map(([start, end]) => [start, end]);
-}
-function grooveStop(fraction) {
-	if (fraction <= 0) return "0%";
-	if (fraction >= 1) return "100%";
-	return `calc(${String(fraction)} * var(--_sonic-slider-travel) + var(--_sonic-slider-groove) / 2)`;
+function grooveStop(proportion) {
+	if (proportion <= 0) return "0%";
+	if (proportion >= 1) return "100%";
+	return `calc(${String(proportion)} * var(--_sonic-slider-travel) + var(--_sonic-slider-groove) / 2)`;
 }
 const renderSlider = template(`
 		<div class="sonic-slider" role="slider" tabindex="0">
 			<div class="sonic-slider-scale" aria-hidden="true"></div>
-			<div class="sonic-slider-marks"></div>
+			<div class="sonic-slider-notches"></div>
 			<div class="sonic-slider-groove"></div>
 			<div class="sonic-slider-modulation"></div>
 			<div class="sonic-slider-cap"></div>
@@ -31,20 +27,13 @@ const renderSlider = template(`
 			</div>
 		</div>
 	`, HTMLDivElement);
-var SonicSlider = class extends SonicRangeElement {
+var SonicSlider = class extends SonicValueElement {
 	static observedAttributes = [
-		...SonicRangeElement.observedAttributes,
+		...SonicValueElement.observedAttributes,
 		"modulation",
 		"orientation",
 		"spring"
 	];
-	get buffered() {
-		return this.#buffered.map(([start, end]) => [start, end]);
-	}
-	set buffered(ranges) {
-		this.#buffered = ranges ? readRanges(ranges).toSorted((first, second) => first[0] - second[0]) : [];
-		this.render();
-	}
 	get groovePress() {
 		return this.getAttribute("groove-press") === "none" ? "none" : "jump";
 	}
@@ -57,6 +46,12 @@ var SonicSlider = class extends SonicRangeElement {
 	set modulation(amount) {
 		this.reflect("modulation", amount);
 	}
+	get modulationValue() {
+		return this.readModulationValue();
+	}
+	set modulationValue(value) {
+		this.writeModulationValue(this.#slider, "slider", value);
+	}
 	get orientation() {
 		return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
 	}
@@ -69,75 +64,71 @@ var SonicSlider = class extends SonicRangeElement {
 	set spring(isSpring) {
 		this.reflect("spring", isSpring);
 	}
-	#buffered = [];
 	#slider = renderSlider();
 	connectedCallback() {
-		this.upgradeProperties("buffered", "groovePress", "modulation", "orientation", "spring");
+		this.upgradeProperties("groovePress", "modulationValue", "modulation", "orientation", "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);
+		slider.addEventListener("transitionend", (event) => {
+			if (event.propertyName === "--_sonic-slider-value") this.toggleState("springing", false);
+		}, { signal });
 		this.render();
 		this.checkStyles(slider, "slider.css");
 		this.bindGestures(slider, signal, (event) => {
 			const axis = this.#axis(slider, cap);
 			if (event.target instanceof Node && cap.contains(event.target)) return axis;
 			if (this.groovePress === "none") return;
-			this.input(this.valueAt((axis.position(event) - axis.startPx) / axis.travelPx));
+			this.input(this.mapping().valueAt((axis.position(event) - axis.startPx) / axis.travelPx));
 			return axis;
 		});
 	}
+	controlOrientation() {
+		return this.orientation;
+	}
+	draw() {
+		this.writeProportions(this.#slider, "slider", this.modulation);
+		this.#renderBuffered(this.#slider);
+	}
 	focusTarget() {
 		return this.#slider;
 	}
-	render() {
-		const slider = this.#slider;
-		const positions = this.positions();
-		const [modulationFrom, modulationTo] = this.modulationFractions(this.modulation);
-		slider.style.setProperty("--_sonic-slider-value", String(this.fraction(this.value)));
-		slider.style.setProperty("--_sonic-slider-origin", String(this.originFraction()));
-		slider.style.setProperty("--_sonic-slider-modulation-from", String(modulationFrom));
-		slider.style.setProperty("--_sonic-slider-modulation-to", String(modulationTo));
-		if (positions === void 0) slider.style.removeProperty("--_sonic-slider-positions");
-		else slider.style.setProperty("--_sonic-slider-positions", String(positions));
-		this.#renderBuffered(slider);
-		this.renderScale();
-		this.renderAria(slider, this.orientation);
-	}
 	springTarget() {
-		return this.spring ? this.restValue() : void 0;
+		return this.spring ? this.originValue() : void 0;
 	}
 	#axis(slider, cap) {
-		const track = slider.getBoundingClientRect();
+		const box = slider.getBoundingClientRect();
 		const capBox = cap.getBoundingClientRect();
-		if (this.orientation === "vertical") return {
+		return this.orientation === "vertical" ? {
 			position: (event) => -event.clientY,
-			startPx: capBox.height / 2 - track.bottom,
-			travelPx: Math.max(1, track.height - capBox.height)
-		};
-		return {
+			startPx: capBox.height / 2 - box.bottom,
+			travelPx: Math.max(1, box.height - capBox.height)
+		} : {
 			position: (event) => event.clientX,
-			startPx: track.left + capBox.width / 2,
-			travelPx: Math.max(1, track.width - capBox.width)
+			startPx: box.left + capBox.width / 2,
+			travelPx: Math.max(1, box.width - capBox.width)
 		};
 	}
 	#renderBuffered(slider) {
-		if (this.#buffered.length === 0) {
-			slider.style.removeProperty("--_sonic-slider-buffered-ranges");
+		const buffered = this.buffered;
+		if (buffered.length === 0) {
+			slider.style.removeProperty("--_sonic-slider-buffered-regions");
 			return;
 		}
-		const stops = this.#buffered.flatMap(([start, end]) => {
-			const from = grooveStop(this.fraction(Math.min(start, end)));
-			const to = grooveStop(this.fraction(Math.max(start, end)));
+		const { proportionOf } = this.mapping();
+		const stops = buffered.flatMap(([start, end]) => {
+			const from = grooveStop(proportionOf(Math.min(start, end)));
+			const to = grooveStop(proportionOf(Math.max(start, end)));
 			return [
 				`transparent ${from}`,
 				`var(--_sonic-slider-buffered) ${from} ${to}`,
 				`transparent ${to}`
 			];
 		});
-		slider.style.setProperty("--_sonic-slider-buffered-ranges", `linear-gradient(var(--_sonic-slider-toward), ${stops.join(", ")})`);
+		slider.style.setProperty("--_sonic-slider-buffered-regions", `linear-gradient(var(--_sonic-slider-toward), ${stops.join(", ")})`);
 	}
 };
 

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

@@ -1,4 +1,5 @@
-import { attachSlot } from "../lib/render.js";
+import { toNumber } from "../lib/math.js";
+import { attachSlots } from "../lib/render.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 
 //#region src/elements/sonic-element.ts
@@ -22,7 +23,7 @@ var SonicElement = class extends HTMLElement {
 	}
 	internals = "attachInternals" in HTMLElement.prototype ? this.attachInternals() : void 0;
 	#connection;
-	#slot;
+	#slots;
 	blur() {
 		this.#focused()?.blur();
 	}
@@ -30,13 +31,14 @@ var SonicElement = class extends HTMLElement {
 		this.upgradeProperties("disabled");
 		if (this.#connection) return;
 		const connection = new AbortController();
+		this.#connection = connection;
 		try {
 			this.connect(connection.signal);
 		} catch (error) {
 			connection.abort();
+			this.#connection = void 0;
 			throw error;
 		}
-		this.#connection = connection;
 	}
 	connectedMoveCallback() {}
 	disconnectedCallback() {
@@ -56,9 +58,6 @@ var SonicElement = class extends HTMLElement {
 		}
 		if (!this.isDisabled() && !this.#focused()) target.focus(options);
 	}
-	appendOnce(child) {
-		if (child.parentNode !== this) this.append(child);
-	}
 	checkStyles(control, sheet) {}
 	focusTarget() {}
 	forwardNaming(target, isNamed) {
@@ -70,28 +69,64 @@ var SonicElement = class extends HTMLElement {
 		}
 		if (labels.length > 0) writeLabelledBy(target, labels);
 	}
+	isBound() {
+		return this.#connection !== void 0;
+	}
 	isDisabled() {
 		return this.disabled || this.matches(":disabled");
 	}
-	mirrorChildren({ control, copy, isCopied = () => true }, signal) {
-		const slot = this.#slot ?? attachSlot(this);
-		this.#slot = slot;
-		const mirror = () => {
+	keepControl(control, signal) {
+		const keep = () => {
+			this.#appendOnce(control);
+			this.#checkChildren([...this.childNodes].filter((child) => child !== control));
+		};
+		const observer = new MutationObserver(keep);
+		keep();
+		observer.observe(this, { childList: true });
+		signal.addEventListener("abort", () => {
+			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);
-			copy(children.filter((child) => isCopied(child)));
-			this.appendOnce(control);
-			slot.assign(...children.filter((child) => (child instanceof Element || child instanceof Text) && !isCopied(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) => {
-			if (records.some((record) => this.#isCopiedChange(record, control, isCopied))) mirror();
+			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();
-		observer.observe(this, {
-			attributes: true,
-			characterData: true,
-			childList: true,
-			subtree: true
-		});
+		watch();
 		signal.addEventListener("abort", () => {
 			observer.disconnect();
 		}, { once: true });
@@ -100,9 +135,7 @@ var SonicElement = class extends HTMLElement {
 		return [];
 	}
 	numberAttribute(name, fallback) {
-		const attribute = this.getAttribute(name);
-		if (attribute === null) return fallback;
-		const parsed = Number(attribute);
+		const parsed = toNumber(this.getAttribute(name));
 		return Number.isFinite(parsed) ? parsed : fallback;
 	}
 	optionalNumberAttribute(name) {
@@ -110,11 +143,11 @@ var SonicElement = class extends HTMLElement {
 		return Number.isNaN(value) ? void 0 : value;
 	}
 	reflect(name, value) {
-		if (value === true) {
-			this.setAttribute(name, "");
+		if (typeof value !== "number" && typeof value !== "string" && value !== true) {
+			this.removeAttribute(name);
 			return;
 		}
-		writeAttribute(this, name, value === false || value === null ? void 0 : value?.toString());
+		this.setAttribute(name, value === true ? "" : value.toString());
 	}
 	toggleState(state, isOn) {
 		if (isOn) this.internals?.states.add(state);
@@ -128,6 +161,14 @@ 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;
@@ -139,12 +180,9 @@ var SonicElement = class extends HTMLElement {
 		return active instanceof HTMLElement && this.contains(active) ? active : void 0;
 	}
 	#isCopiedChange(record, control, isCopied) {
-		if (record.target === this) {
-			if (record.type === "attributes") return false;
-			return record.removedNodes.length > 0 || [...record.addedNodes].some((node) => node !== control);
-		}
+		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 || child === control) return false;
+		if (child === void 0) return false;
 		return isCopied(child) || record.type === "attributes" && record.target === child;
 	}
 };

package/dist/default/elements/split.js

@@ -0,0 +1,249 @@
+import { SonicElement } from "./sonic-element.js";
+import { SonicValueElement, linkValue } from "./value-element.js";
+import { distribute, splitLimits } from "../lib/distribute.js";
+
+//#region src/elements/split.ts
+const modeNames = /* @__PURE__ */ new Set([
+	"cascade",
+	"equal",
+	"proportional"
+]);
+const gridSlop = 1e-9;
+const lockAttributes = ["data-sonic-locked", "disabled"];
+function isMode(name) {
+	return name !== null && modeNames.has(name);
+}
+function isLocked(member) {
+	return "sonicLocked" in member.element.dataset || member.link.isDisabled();
+}
+function gridLimits(mapping, [low, high]) {
+	const bottom = mapping.snap(low);
+	const top = mapping.snap(high);
+	return [bottom < low - gridSlop ? mapping.keyTarget("ArrowRight", bottom) ?? bottom : bottom, top > high + gridSlop ? mapping.keyTarget("ArrowLeft", top) ?? top : top];
+}
+function modelOf(member, value, isFree) {
+	const mapping = member.link.mapping();
+	const [first, last] = mapping.bounds;
+	return {
+		isFree,
+		max: Math.max(first, last),
+		min: Math.min(first, last),
+		snap: mapping.snap,
+		stepFrom: (from, direction) => mapping.keyTarget(direction > 0 ? "ArrowRight" : "ArrowLeft", from) ?? from,
+		value
+	};
+}
+var SonicSplit = class extends SonicElement {
+	static observedAttributes = [
+		...SonicElement.observedAttributes,
+		"mode",
+		"total"
+	];
+	get mode() {
+		const name = this.getAttribute("mode");
+		return isMode(name) ? name : "proportional";
+	}
+	set mode(name) {
+		this.reflect("mode", name);
+	}
+	get total() {
+		return this.optionalNumberAttribute("total");
+	}
+	set total(value) {
+		this.reflect("total", value);
+	}
+	#isQueued = false;
+	#isTotalKept = false;
+	#isWarned = false;
+	#isWriting = false;
+	#members = [];
+	#signal;
+	#snapshot;
+	#total = 0;
+	#waiting = /* @__PURE__ */ new Set();
+	attributeChangedCallback(name) {
+		if ((name === "mode" || name === "total") && this.#signal) this.#bind();
+	}
+	connectedCallback() {
+		this.upgradeProperties("mode", "total");
+		super.connectedCallback();
+	}
+	connect(signal) {
+		const observer = new MutationObserver((records) => {
+			if (records.some((record) => record.attributeName !== null && lockAttributes.includes(record.attributeName)) || !this.#isSameMembers(this.#find())) this.#bind();
+		});
+		this.#signal = signal;
+		if (this.internals) this.internals.role = "group";
+		observer.observe(this, {
+			attributeFilter: lockAttributes,
+			attributes: true,
+			childList: true,
+			subtree: true
+		});
+		this.addEventListener("change", (event) => {
+			this.#release(event);
+		}, { signal });
+		signal.addEventListener("abort", () => {
+			observer.disconnect();
+			this.#signal = void 0;
+			this.#isTotalKept = false;
+			this.#unbind();
+		}, { once: true });
+		this.#bind();
+	}
+	#bind() {
+		const known = new Set(this.#members.map(({ element }) => element));
+		this.#unbind();
+		this.#members = this.#find().map((element) => this.#join(element));
+		const values = this.#members.map(({ seen }) => seen);
+		const sum = values.reduce((total, value) => total + value, 0);
+		this.#total = this.total ?? (this.#isTotalKept ? this.#total : sum);
+		this.#isTotalKept = this.#members.length > 0;
+		if (this.#members.length > 0 && sum !== this.#total) this.#spread(values, known);
+		this.#limit();
+		this.#warnReach();
+	}
+	#compensate() {
+		this.#isQueued = false;
+		for (const mover of this.#members) if (mover.link.value() !== mover.seen) this.#move(mover);
+	}
+	#find() {
+		const found = [];
+		for (const element of this.querySelectorAll("*")) {
+			if (element.closest("sonic-split") !== this) continue;
+			if (element instanceof SonicValueElement) found.push(element);
+			else this.#waitFor(element.localName);
+		}
+		return found;
+	}
+	#isSameMembers(elements) {
+		return elements.length === this.#members.length && elements.every((element, index) => this.#members[index]?.element === element);
+	}
+	#join(element) {
+		const link = linkValue(element);
+		const unwatch = link.watch(() => {
+			if (this.#isWriting || this.#isQueued) return;
+			this.#isQueued = true;
+			queueMicrotask(() => {
+				if (this.#isQueued) this.#compensate();
+			});
+		});
+		link.land((target, direction) => this.#land(element, target, direction));
+		return {
+			element,
+			link,
+			seen: link.value(),
+			unwatch
+		};
+	}
+	#land(element, target, direction) {
+		if (this.#isQueued) this.#compensate();
+		const index = this.#members.findIndex((member) => member.element === element);
+		const mover = this.#members[index];
+		if (!mover) return target;
+		return distribute(this.#model(this.#members.map(({ seen }) => seen), mover), {
+			mode: this.mode,
+			total: this.#total
+		}, {
+			direction,
+			index,
+			target
+		})[index] ?? target;
+	}
+	#limit() {
+		const values = this.#members.map(({ seen }) => seen);
+		for (const [index, member] of this.#members.entries()) {
+			const model = this.#model(values, member);
+			const value = values[index] ?? member.seen;
+			member.link.limit(isLocked(member) ? [value, value] : gridLimits(member.link.mapping(), splitLimits(model, index, this.#total)));
+		}
+	}
+	#model(values, mover) {
+		return this.#members.map((member, index) => {
+			const isFixed = member !== mover && (isLocked(member) || member.link.isHeld());
+			return modelOf(member, values[index] ?? member.seen, !isFixed);
+		});
+	}
+	#move(mover) {
+		const index = this.#members.indexOf(mover);
+		const kept = this.#snapshot;
+		const snapshot = kept?.mover === mover && mover.link.isHeld() ? kept : {
+			mover,
+			values: this.#members.map(({ seen }) => seen)
+		};
+		this.#snapshot = snapshot;
+		this.#write(distribute(this.#model(snapshot.values, mover), {
+			mode: this.mode,
+			total: this.#total
+		}, {
+			index,
+			target: mover.link.value()
+		}), mover);
+		this.#limit();
+	}
+	#release(event) {
+		if (this.#isWriting) return;
+		if (this.#isQueued) this.#compensate();
+		const snapshot = this.#snapshot;
+		if (snapshot?.mover.element !== event.target) return;
+		this.#snapshot = void 0;
+		const changed = this.#members.filter((member, index) => member !== snapshot.mover && member.link.value() !== snapshot.values[index]);
+		queueMicrotask(() => {
+			this.#isWriting = true;
+			try {
+				for (const { element } of changed) element.dispatchEvent(new Event("change", { bubbles: true }));
+			} finally {
+				this.#isWriting = false;
+			}
+		});
+	}
+	#spread(values, known) {
+		const model = this.#model(values);
+		const joined = this.#members.map(({ element }) => known.size > 0 && !known.has(element));
+		const isAnyKnownFree = model.some((member, index) => member.isFree && joined[index] !== true);
+		const spreadOver = model.map((member, index) => isAnyKnownFree && joined[index] === true ? {
+			...member,
+			isFree: false
+		} : member);
+		this.#write(distribute(spreadOver, {
+			mode: this.mode,
+			total: this.#total
+		}));
+	}
+	#unbind() {
+		for (const { link, unwatch } of this.#members) {
+			unwatch();
+			link.land(void 0);
+			link.limit(void 0);
+		}
+		this.#members = [];
+		this.#snapshot = void 0;
+		this.#isQueued = false;
+	}
+	#waitFor(tag) {
+		if (!tag.includes("-") || customElements.get(tag) || this.#waiting.has(tag)) return;
+		this.#waiting.add(tag);
+		customElements.whenDefined(tag).then(() => {
+			this.#waiting.delete(tag);
+			if (this.#signal) this.#bind();
+		});
+	}
+	#warnReach() {}
+	#write(values, mover) {
+		this.#isWriting = true;
+		try {
+			for (const [index, member] of this.#members.entries()) {
+				const value = values[index];
+				if (value === void 0 || value === member.link.value()) continue;
+				member.link.limit(void 0);
+				member.link.input(value, member === mover);
+			}
+		} finally {
+			this.#isWriting = false;
+		}
+		for (const member of this.#members) member.seen = member.link.value();
+	}
+};
+
+//#endregion
+export { SonicSplit };