@xsynaptic/sonic-ui 0.3.0 → 0.5.0

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

@@ -1,4 +1,4 @@
-import { attachSlot } from "../lib/render.js";
+import { attachSlots } from "../lib/render.js";
 import { writeAttribute } from "../lib/write-attribute.js";
 
 //#region src/elements/sonic-element.ts
@@ -22,7 +22,7 @@ var SonicElement = class extends HTMLElement {
 	}
 	internals = "attachInternals" in HTMLElement.prototype ? this.attachInternals() : void 0;
 	#connection;
-	#slot;
+	#slots;
 	blur() {
 		this.#focused()?.blur();
 	}
@@ -56,8 +56,11 @@ var SonicElement = class extends HTMLElement {
 		}
 		if (!this.isDisabled() && !this.#focused()) target.focus(options);
 	}
-	appendOnce(child) {
-		if (child.parentNode !== this) this.append(child);
+	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);
 	}
 	checkStyles(control, sheet) {}
 	focusTarget() {}
@@ -73,17 +76,25 @@ var SonicElement = class extends HTMLElement {
 	isDisabled() {
 		return this.disabled || this.matches(":disabled");
 	}
-	mirrorChildren({ control, copy, isCopied = () => true }, signal) {
-		const slot = this.#slot ?? attachSlot(this);
-		this.#slot = slot;
-		const mirror = () => {
-			const children = [...this.childNodes].filter((child) => child !== control);
-			copy(children.filter((child) => isCopied(child)));
+	mirrorChildren({ control, copy, isCopied = () => true, place }, signal) {
+		const slots = this.#slots ?? attachSlots(this);
+		let copies = /* @__PURE__ */ new Map();
+		this.#slots = slots;
+		const mirror = (touched) => {
 			this.appendOnce(control);
-			slot.assign(...children.filter((child) => (child instanceof Element || child instanceof Text) && !isCopied(child)), control);
+			const children = [...this.childNodes].filter((child) => child !== control);
+			const slotted = children.filter((child) => child instanceof Element || child instanceof Text);
+			const kept = copies;
+			copies = new Map(children.filter((child) => isCopied(child)).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 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();
+			else mirror(new Set(changes.map((record) => this.#childHolding(record.target))));
 		});
 		mirror();
 		observer.observe(this, {
@@ -101,7 +112,7 @@ var SonicElement = class extends HTMLElement {
 	}
 	numberAttribute(name, fallback) {
 		const attribute = this.getAttribute(name);
-		if (attribute === null) return fallback;
+		if (attribute === null || attribute.trim() === "") return fallback;
 		const parsed = Number(attribute);
 		return Number.isFinite(parsed) ? parsed : fallback;
 	}

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 };

package/dist/default/elements/switch.js

@@ -0,0 +1,279 @@
+import { clamp } from "../lib/math.js";
+import { requireChild, template } from "../lib/render.js";
+import { writeAttribute } from "../lib/write-attribute.js";
+import { bindHold } from "../lib/hold.js";
+import { SonicRadioGroupElement, isUnder, optionValue } from "./radio-group.js";
+
+//#region src/elements/switch.ts
+const renderSwitch = template(`
+		<div class="sonic-switch">
+			<span aria-hidden="true" class="sonic-switch-bushing"></span>
+			<span aria-hidden="true" class="sonic-switch-bat"></span>
+		</div>
+	`, HTMLDivElement);
+const renderPosition = template(`
+		<button class="sonic-switch-position" role="radio" type="button">
+			<span class="sonic-switch-label"></span>
+		</button>
+	`, HTMLButtonElement);
+const renderBare = template(`<button class="sonic-switch-position" role="switch" type="button"></button>`, HTMLButtonElement);
+const pressCentreZone = .08;
+function pressedIndex(index, count, offset) {
+	if (count === 2) return index === 0 ? 1 : 0;
+	const side = Math.abs(offset) < pressCentreZone ? 1 : Math.sign(offset);
+	const next = index + side;
+	return next < 0 || next >= count ? index - side : next;
+}
+var SonicSwitch = class extends SonicRadioGroupElement {
+	static observedAttributes = [
+		...SonicRadioGroupElement.observedAttributes,
+		"checked",
+		"orientation"
+	];
+	get checked() {
+		return this.#isDirty ? this.#checked : this.defaultChecked;
+	}
+	set checked(isChecked) {
+		this.#isDirty = true;
+		this.#checked = isChecked === true;
+		this.render();
+	}
+	get defaultChecked() {
+		return this.hasAttribute("checked");
+	}
+	set defaultChecked(isChecked) {
+		this.reflect("checked", isChecked);
+	}
+	get orientation() {
+		return this.getAttribute("orientation") === "horizontal" ? "horizontal" : "vertical";
+	}
+	set orientation(direction) {
+		this.reflect("orientation", direction);
+	}
+	get value() {
+		const value = super.value;
+		return value === "" && this.#isBare() ? "on" : value;
+	}
+	set value(next) {
+		super.value = next;
+	}
+	group = renderSwitch();
+	#bare = renderBare();
+	#bat = requireChild(this.group, ".sonic-switch-bat", HTMLSpanElement);
+	#batPress;
+	#checked = false;
+	#holding;
+	#isClickSwallowed = false;
+	#isDirty = false;
+	attributeChangedCallback(name) {
+		if (name === "checked") this.#isDirty = false;
+		if (this.isDisabled()) this.#holding?.release();
+		super.attributeChangedCallback(name);
+	}
+	formResetCallback() {
+		this.#isDirty = false;
+		super.formResetCallback();
+	}
+	activate() {
+		if (this.#isBare()) this.#bare.click();
+		else super.activate();
+	}
+	chooseByClick(option) {
+		super.chooseByClick(option);
+		if (this.#isMomentary(option)) this.#springBack();
+	}
+	chooseByKey(option, event) {
+		if (!this.#isMomentary(option)) {
+			super.chooseByKey(option, event);
+			return;
+		}
+		if (event.repeat) return;
+		this.#hold(option, event.key);
+		option.focus();
+	}
+	claimPress(option, event) {
+		if (this.#grabBat(event)) return true;
+		if (!this.#isMomentary(option)) return false;
+		this.group.setPointerCapture(event.pointerId);
+		this.#hold(option, event.pointerId);
+		return true;
+	}
+	connect(signal) {
+		const group = this.group;
+		this.upgradeProperties("defaultChecked", "checked", "orientation");
+		super.connect(signal);
+		this.checkStyles(group, "switch.css");
+		this.#bare.addEventListener("click", (event) => {
+			const isSwallowed = this.#isClickSwallowed && event instanceof PointerEvent && event.pointerType !== "";
+			this.#isClickSwallowed = false;
+			if (!isSwallowed) this.#setChecked(!this.checked);
+		}, { signal });
+		this.#bare.addEventListener("pointerdown", (event) => {
+			this.#isClickSwallowed = false;
+			if (event.button === 0 && !this.isDisabled()) this.#grabBat(event);
+		}, { signal });
+		this.#bindBat(group, signal);
+		this.#holding = bindHold(group, {
+			canHold: () => !this.isDisabled(),
+			leave: "focusout",
+			onHold: () => {
+				this.toggleState("held", true);
+			},
+			onRelease: () => {
+				this.toggleState("held", false);
+				this.#springBack();
+			}
+		}, signal);
+	}
+	focusTarget() {
+		return this.#isBare() ? this.#bare : super.focusTarget();
+	}
+	isWrapping() {
+		return false;
+	}
+	releaseTarget(option) {
+		if (this.#isMomentary(option)) return void 0;
+		const options = this.options();
+		if (options.length === 2 && optionValue(option) === this.value) return options.find((other) => other !== option);
+		return option;
+	}
+	render() {
+		const group = this.group;
+		const options = this.options();
+		if (options.length > 0) {
+			this.#bare.remove();
+			writeAttribute(group, "role", "radiogroup");
+			group.dataset.sonicPositionCount = String(options.length);
+			super.render();
+			this.#renderThrow(this.#checkedIndex(options));
+			return;
+		}
+		const bare = this.#bare;
+		const isChecked = this.checked;
+		writeAttribute(group, "role", void 0);
+		delete group.dataset.sonicPositionCount;
+		if (bare.parentElement !== group) group.append(bare);
+		bare.disabled = this.isDisabled();
+		bare.setAttribute("aria-checked", String(isChecked));
+		this.forwardNaming(group, false);
+		this.forwardNaming(bare, true);
+		const onSide = this.orientation === "horizontal" ? 1 : -1;
+		group.style.setProperty("--_sonic-switch-at", String(isChecked ? onSide : -onSide));
+		this.writeFormValue(isChecked ? this.value : null, String(isChecked));
+	}
+	renderOption() {
+		return renderPosition();
+	}
+	restoreState(state) {
+		if (this.#isBare()) this.checked = state === "true";
+		else super.restoreState(state);
+	}
+	#along(event) {
+		return this.orientation === "horizontal" ? event.clientX : event.clientY;
+	}
+	#bindBat(group, signal) {
+		const drop = (event) => {
+			if (event.pointerId === this.#batPress?.pointerId) this.#batPress = void 0;
+		};
+		group.addEventListener("pointermove", (event) => {
+			const press = this.#batPress;
+			if (press?.pointerId !== event.pointerId || this.isDisabled()) return;
+			const delta = this.#along(event) - press.last;
+			if (Math.abs(delta) < this.#bat.getBoundingClientRect().width / 4) return;
+			press.hasMoved = true;
+			press.last = this.#along(event);
+			this.#throwBy(Math.sign(delta), event.pointerId);
+		}, { signal });
+		group.addEventListener("pointerup", (event) => {
+			const press = this.#batPress;
+			if (press?.pointerId !== event.pointerId) return;
+			this.#batPress = void 0;
+			if (!press.hasMoved && !this.isDisabled()) this.#pressBat(event);
+			this.#isClickSwallowed = true;
+		}, { signal });
+		group.addEventListener("pointercancel", drop, { signal });
+		group.addEventListener("lostpointercapture", drop, { signal });
+	}
+	#checkedIndex(options) {
+		return options.findIndex((option) => optionValue(option) === this.value);
+	}
+	#grabBat(event) {
+		if (!isUnder(this.#bat, event.clientX, event.clientY)) return false;
+		this.group.setPointerCapture(event.pointerId);
+		this.#batPress = {
+			hasMoved: false,
+			last: this.#along(event),
+			pointerId: event.pointerId
+		};
+		return true;
+	}
+	#hasSprungFrom(option) {
+		if (!option || !this.#isMomentary(option)) return false;
+		this.#holding?.release();
+		return this.value !== optionValue(option);
+	}
+	#hold(option, by) {
+		if (this.#holding?.hold(by) === true) this.select(option);
+	}
+	#isBare() {
+		return this.options().length === 0;
+	}
+	#isMomentary(option) {
+		const options = this.options();
+		return (option === options[0] || option === options.at(-1)) && options.length > 1 && option.querySelector("[data-sonic-value]")?.hasAttribute("data-sonic-momentary") === true;
+	}
+	#pressBat(event) {
+		const options = this.options();
+		if (options.length === 0) {
+			this.#setChecked(!this.checked);
+			return;
+		}
+		const box = this.#bat.getBoundingClientRect();
+		const [start, size] = this.orientation === "horizontal" ? [box.left, box.width] : [box.top, box.height];
+		const offset = (this.#along(event) - start) / size - .5;
+		const option = options[pressedIndex(this.#checkedIndex(options), options.length, offset)];
+		if (!option) return;
+		this.chooseByClick(option);
+		this.#refocus(options);
+	}
+	#refocus(options) {
+		if (this.group.matches(":focus-within")) options[this.#checkedIndex(options)]?.focus();
+	}
+	#renderThrow(index) {
+		const count = this.options().length;
+		const at = index < 0 || count < 2 ? 0 : 2 * index / (count - 1) - 1;
+		this.group.style.setProperty("--_sonic-switch-at", String(at));
+	}
+	#setChecked(isChecked) {
+		if (isChecked === this.checked) return;
+		this.checked = isChecked;
+		this.dispatchEvent(new Event("change", { bubbles: true }));
+	}
+	#springBack() {
+		const options = this.options();
+		const index = this.#checkedIndex(options);
+		const held = options[index];
+		if (!held || !this.#isMomentary(held)) return;
+		const rest = options[index === 0 ? 1 : index - 1];
+		if (!rest) return;
+		const isFocused = this.group.contains(this.ownerDocument.activeElement);
+		this.select(rest);
+		if (isFocused) rest.focus();
+	}
+	#throwBy(direction, pointerId) {
+		const options = this.options();
+		if (options.length === 0) {
+			this.#setChecked(direction === (this.orientation === "horizontal" ? 1 : -1));
+			return;
+		}
+		const index = this.#checkedIndex(options);
+		const option = options[clamp(index + direction, 0, options.length - 1)];
+		if (!option || option === options[index] || this.#hasSprungFrom(options[index])) return;
+		if (this.#isMomentary(option)) this.#hold(option, pointerId);
+		else this.select(option);
+		this.#refocus(options);
+	}
+};
+
+//#endregion
+export { SonicSwitch };