@xsynaptic/sonic-ui 0.4.0 → 0.5.0

package/dist/default/lib/canvas-surface.js

@@ -0,0 +1,192 @@
+import { readPxProperty } from "./read-px-property.js";
+
+//#region src/lib/canvas-surface.ts
+function deviceRatio() {
+	return globalThis.devicePixelRatio || 1;
+}
+function deviceBox(entry, css) {
+	const device = "devicePixelContentBoxSize" in entry ? entry.devicePixelContentBoxSize[0] : void 0;
+	const dpr = deviceRatio();
+	if (!device || Math.abs(device.inlineSize - css.inlineSize * dpr) > 1) return void 0;
+	return Math.abs(device.blockSize - css.blockSize * dpr) > 1 ? void 0 : device;
+}
+function readEach(properties, read) {
+	return Object.fromEntries(Object.entries(properties).flatMap(([name, property]) => property === void 0 ? [] : [[name, read(property)]]));
+}
+var CanvasSurface = class {
+	get size() {
+		return this.#size;
+	}
+	#context;
+	#cssBox;
+	#frame;
+	#isDirty = true;
+	#isRebuildWanted = true;
+	#isVisible = true;
+	#look;
+	#options;
+	#reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
+	#size = {
+		dpr: deviceRatio(),
+		height: 0,
+		width: 0
+	};
+	constructor(options) {
+		const { canvas, signal } = options;
+		this.#options = options;
+		this.#context = canvas.getContext("2d") ?? void 0;
+		this.#armTransitions();
+		this.#observeSize();
+		this.#observeView();
+		this.#watchResolution();
+		this.#reducedMotion.addEventListener("change", () => {
+			this.rebuild();
+		}, { signal });
+		canvas.addEventListener("transitionrun", () => {
+			this.rebuild();
+		}, { signal });
+		signal.addEventListener("abort", () => {
+			if (this.#frame !== void 0) cancelAnimationFrame(this.#frame);
+			this.#frame = void 0;
+		}, { once: true });
+		this.#schedule();
+	}
+	invalidate() {
+		this.#isDirty = true;
+		this.#schedule();
+	}
+	rebuild() {
+		this.#isRebuildWanted = true;
+		this.invalidate();
+	}
+	requestFrame() {
+		this.#schedule();
+	}
+	#armTransitions() {
+		const { style } = this.#options.canvas;
+		style.setProperty("transition-property", Object.values(this.#options.colours).join(", "));
+		style.setProperty("transition-duration", "0.001ms");
+		style.setProperty("transition-timing-function", "step-start");
+		style.setProperty("transition-behavior", "allow-discrete");
+	}
+	#draw(frameMs) {
+		this.#frame = void 0;
+		const size = this.#size;
+		if (size.width === 0 || size.height === 0) return;
+		const { canvas, paint } = this.#options;
+		const look = this.#isRebuildWanted || !this.#look ? this.#read() : this.#look;
+		const isDirty = this.#isDirty;
+		this.#look = look;
+		this.#isDirty = false;
+		this.#isRebuildWanted = false;
+		if (canvas.width !== size.width) canvas.width = size.width;
+		if (canvas.height !== size.height) canvas.height = size.height;
+		if (this.#context) paint(this.#context, {
+			frameMs,
+			isDirty,
+			look,
+			size
+		});
+	}
+	#measure(entry) {
+		const [box] = entry.contentBoxSize;
+		if (!box) return;
+		const device = deviceBox(entry, box);
+		if (device) {
+			this.#cssBox = void 0;
+			this.#resize(device.inlineSize, device.blockSize);
+			return;
+		}
+		this.#cssBox = {
+			height: box.blockSize,
+			width: box.inlineSize
+		};
+		this.#rescale();
+	}
+	#observeSize() {
+		const { canvas, signal } = this.#options;
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries.at(-1);
+			if (entry) this.#measure(entry);
+		});
+		try {
+			observer.observe(canvas, { box: "device-pixel-content-box" });
+		} catch {
+			observer.observe(canvas, { box: "content-box" });
+		}
+		signal.addEventListener("abort", () => {
+			observer.disconnect();
+		}, { once: true });
+	}
+	#observeView() {
+		const { canvas, signal } = this.#options;
+		const observer = new IntersectionObserver((entries) => {
+			const entry = entries.at(-1);
+			if (!entry) return;
+			const wasVisible = this.#isVisible;
+			this.#isVisible = entry.isIntersecting;
+			if (!entry.isIntersecting && this.#frame !== void 0) {
+				cancelAnimationFrame(this.#frame);
+				this.#frame = void 0;
+			}
+			if (!wasVisible && entry.isIntersecting) this.rebuild();
+		});
+		observer.observe(canvas);
+		signal.addEventListener("abort", () => {
+			observer.disconnect();
+		}, { once: true });
+	}
+	#read() {
+		const { canvas, colours, lengths = {} } = this.#options;
+		const styles = getComputedStyle(canvas);
+		return {
+			colours: readEach(colours, (property) => styles.getPropertyValue(property).trim()),
+			isReducedMotion: this.#reducedMotion.matches,
+			lengths: readEach(lengths, (property) => readPxProperty(styles, property, 0))
+		};
+	}
+	#rescale() {
+		const box = this.#cssBox;
+		if (!box) {
+			this.#resize(this.#size.width, this.#size.height);
+			return;
+		}
+		const dpr = deviceRatio();
+		this.#resize(Math.round(box.width * dpr), Math.round(box.height * dpr));
+	}
+	#resize(width, height) {
+		const previous = this.#size;
+		const dpr = deviceRatio();
+		if (previous.width === width && previous.height === height && previous.dpr === dpr) return;
+		this.#size = {
+			dpr,
+			height,
+			width
+		};
+		this.#options.resize?.(this.#size);
+		if (previous.width === 0 || previous.height === 0) this.rebuild();
+		else this.invalidate();
+	}
+	#schedule() {
+		if (this.#options.signal.aborted || this.#frame !== void 0 || !this.#isVisible) return;
+		this.#frame = requestAnimationFrame((frameMs) => {
+			this.#draw(frameMs);
+		});
+	}
+	#watchResolution() {
+		const { signal } = this.#options;
+		matchMedia(`(resolution: ${String(deviceRatio())}dppx)`).addEventListener("change", () => {
+			this.#watchResolution();
+			this.#rescale();
+		}, {
+			once: true,
+			signal
+		});
+	}
+};
+function bindSurface(options) {
+	return new CanvasSurface(options);
+}
+
+//#endregion
+export { bindSurface };

package/dist/default/lib/copy-node.js

@@ -2,14 +2,44 @@
 const copyPrefix = "sonic-copy-";
 const idListAttributes = /* @__PURE__ */ new Set(["aria-describedby", "aria-labelledby"]);
 const hrefAttributes = /* @__PURE__ */ new Set(["href", "xlink:href"]);
-const urlReference = /url\(\s*(['"]?)#([^'")\s]+)\1\s*\)/g;
+const timingAttributes = /* @__PURE__ */ new Set(["begin", "end"]);
+const urlAttributes = /* @__PURE__ */ new Set([
+	"clip-path",
+	"color-profile",
+	"fill",
+	"filter",
+	"marker-end",
+	"marker-mid",
+	"marker-start",
+	"mask",
+	"stroke",
+	"style"
+]);
+const urlReference = /url\(\s*(['"]?)#([^'")\s]+)\1\s*\)/gi;
+const idSelector = /#([\w-]+)(?=[^;{}]*\{)/g;
+const timingReference = /(^|;\s*)([^\s;.]+)(?=\.[a-z])/gi;
+function decoded(id) {
+	try {
+		return decodeURIComponent(id);
+	} catch {
+		return id;
+	}
+}
+function rewriteUrls(value, ids) {
+	return value.replaceAll(urlReference, (reference, quote, id) => ids.has(decoded(id)) ? `url(${quote}#${copyPrefix}${id}${quote})` : reference);
+}
 function rewriteReferences(name, value, ids) {
 	if (hrefAttributes.has(name)) return value.startsWith("#") && ids.has(value.slice(1)) ? `#${copyPrefix}${value.slice(1)}` : value;
 	if (idListAttributes.has(name)) return value.split(/\s+/).map((id) => ids.has(id) ? copyPrefix + id : id).join(" ");
-	return value.replaceAll(urlReference, (reference, quote, id) => ids.has(id) ? `url(${quote}#${copyPrefix}${id}${quote})` : reference);
+	if (timingAttributes.has(name)) return value.replaceAll(timingReference, (reference, lead, id) => ids.has(id) ? lead + copyPrefix + id : reference);
+	return urlAttributes.has(name) ? rewriteUrls(value, ids) : value;
+}
+function rewriteStyle(text, ids) {
+	return rewriteUrls(text, ids).replaceAll(idSelector, (selector, id) => ids.has(id) ? `#${copyPrefix}${id}` : selector);
 }
 function prefixIds(element, ids) {
 	if (element.id !== "") element.id = copyPrefix + element.id;
+	if (element.localName === "style") element.textContent = rewriteStyle(element.textContent, ids);
 	for (const attribute of element.attributes) {
 		if (attribute.name === "id") continue;
 		const value = rewriteReferences(attribute.name, attribute.value, ids);

package/dist/default/lib/crossfade.js

@@ -0,0 +1,22 @@
+import { clampProportion } from "./math.js";
+
+//#region src/lib/crossfade.ts
+function progress(side, span) {
+	if (span === 0) return side > 0 ? 1 : 0;
+	return Math.min(1, side / span);
+}
+function crossfadeGains(position, options = {}) {
+	const at = clampProportion(position);
+	const span = 1 - clampProportion(options.sharpness ?? 0);
+	const gain = (side) => {
+		const reached = progress(side, span);
+		return options.law === "linear" ? reached : Math.sin(reached * Math.PI / 2);
+	};
+	return {
+		a: gain(1 - at),
+		b: gain(at)
+	};
+}
+
+//#endregion
+export { crossfadeGains };

package/dist/default/lib/distribute.js

@@ -0,0 +1,215 @@
+import { clamp, trimFloat } from "./math.js";
+
+//#region src/lib/distribute.ts
+const epsilon = 1e-9;
+function sumOf(values) {
+	return values.reduce((total, value) => total + value, 0);
+}
+function others(members, index) {
+	return members.filter((_member, at) => at !== index);
+}
+function splitLimits(members, index, total) {
+	const member = members[index];
+	if (!member) return [NaN, NaN];
+	const rest = others(members, index);
+	const free = rest.filter((other) => other.isFree);
+	if (free.length === 0) return [member.value, member.value];
+	const room = total - sumOf(rest.filter((other) => !other.isFree).map((other) => other.value));
+	return [Math.max(member.min, room - sumOf(free.map((other) => other.max))), Math.min(member.max, room - sumOf(free.map((other) => other.min)))];
+}
+function spreadWeighted(owed, pool) {
+	const shares = /* @__PURE__ */ new Map();
+	let remaining = owed;
+	let active = [...pool];
+	while (active.length > 0 && Math.abs(remaining) > epsilon) {
+		const weights = sumOf(active.map(({ weight }) => weight));
+		const count = active.length;
+		const shareOf = (entry) => remaining * (weights > 0 ? entry.weight / weights : 1 / count);
+		const full = active.filter((entry) => Math.abs(shareOf(entry)) >= entry.room);
+		if (full.length === 0) {
+			for (const entry of active) shares.set(entry.index, shareOf(entry));
+			break;
+		}
+		const sign = Math.sign(remaining);
+		for (const entry of full) {
+			shares.set(entry.index, sign * entry.room);
+			remaining -= sign * entry.room;
+		}
+		active = active.filter((entry) => !full.includes(entry));
+	}
+	return shares;
+}
+function spreadInOrder(owed, pool) {
+	const shares = /* @__PURE__ */ new Map();
+	let remaining = owed;
+	for (const entry of pool) {
+		if (Math.abs(remaining) <= epsilon) break;
+		const share = Math.sign(remaining) * Math.min(entry.room, Math.abs(remaining));
+		shares.set(entry.index, share);
+		remaining -= share;
+	}
+	return shares;
+}
+function poolOrder(members, index) {
+	const count = members.length;
+	const start = index + 1;
+	return Array.from({ length: count }, (_entry, offset) => (start + offset) % count).filter((at) => at !== index && members[at]?.isFree === true);
+}
+function stepWithin(member, from, owed) {
+	const next = member.stepFrom(from, owed > 0 ? 1 : -1);
+	const change = trimFloat(next - from);
+	const isInside = next >= member.min && next <= member.max;
+	return change !== 0 && isInside && Math.abs(change) <= Math.abs(owed) + epsilon ? next : void 0;
+}
+function stepToward(member, from, owed) {
+	let value = from;
+	let remainder = owed;
+	while (Math.abs(remainder) > epsilon) {
+		const next = stepWithin(member, value, remainder);
+		if (next === void 0) break;
+		remainder = trimFloat(remainder - (next - value));
+		value = next;
+	}
+	return value;
+}
+function byShortfall(values, { exact, order }, direction) {
+	const shortfall = (index) => {
+		const value = values[index] ?? NaN;
+		return trimFloat(direction * ((exact.get(index) ?? value) - value));
+	};
+	return order.toReversed().sort((first, second) => shortfall(second) - shortfall(first));
+}
+function stepEach(members, values, pass) {
+	let remainder = pass.owed;
+	for (const index of pass.neediest) {
+		const member = members[index];
+		const value = values[index];
+		const next = member && value !== void 0 ? stepWithin(member, value, remainder) : void 0;
+		if (value === void 0 || next === void 0) continue;
+		values[index] = next;
+		remainder = trimFloat(remainder - (next - value));
+	}
+	return remainder;
+}
+function settle(members, values, settling) {
+	let remainder = trimFloat(settling.total - sumOf(values));
+	let before = NaN;
+	while (remainder !== before && Math.abs(remainder) > epsilon) {
+		before = remainder;
+		remainder = stepEach(members, values, {
+			neediest: byShortfall(values, settling, Math.sign(remainder)),
+			owed: remainder
+		});
+	}
+	return remainder;
+}
+function pooled(members, order, owed) {
+	return order.flatMap((at) => {
+		const member = members[at];
+		if (!member) return [];
+		const room = owed > 0 ? member.max - member.value : member.value - member.min;
+		return [{
+			index: at,
+			room: Math.max(0, room),
+			weight: member.value - member.min
+		}];
+	});
+}
+function shares(pool, owed, mode) {
+	if (mode === "cascade") return spreadInOrder(owed, pool);
+	if (mode === "equal") return spreadWeighted(owed, pool.map((entry) => ({
+		...entry,
+		weight: 1
+	})));
+	return spreadWeighted(owed, pool);
+}
+function landMover(members, values, move) {
+	const { index, target, total } = move;
+	const mover = members[index];
+	if (!mover?.isFree || !Number.isFinite(target)) return void 0;
+	const next = mover.snap(clamp(target, ...splitLimits(members, index, total)));
+	values[index] = next;
+	return mover.value - next;
+}
+function landShares(members, values, spread) {
+	const exact = /* @__PURE__ */ new Map();
+	for (const [at, share] of spread) {
+		const member = members[at];
+		if (!member) continue;
+		exact.set(at, member.value + share);
+		values[at] = clamp(member.snap(member.value + share), member.min, member.max);
+	}
+	return exact;
+}
+function spread(members, rule, move) {
+	const values = members.map(({ value }) => value);
+	const owed = move ? landMover(members, values, {
+		...move,
+		total: rule.total
+	}) : rule.total - sumOf(values);
+	if (owed === void 0) return void 0;
+	const order = poolOrder(members, move?.index ?? -1);
+	return {
+		left: settle(members, values, {
+			exact: landShares(members, values, shares(pooled(members, order, owed), owed, rule.mode)),
+			order,
+			total: rule.total
+		}),
+		order,
+		values
+	};
+}
+function smallestStep(members, { left, order, values }) {
+	return order.flatMap((at) => {
+		const member = members[at];
+		const value = values[at];
+		if (!member || value === void 0) return [];
+		const next = member.stepFrom(value, left > 0 ? 1 : -1);
+		return next >= member.min && next <= member.max && next !== value ? [trimFloat(next - value)] : [];
+	}).toSorted((one, other) => Math.abs(one) - Math.abs(other))[0];
+}
+function moverTargets(members, landing, index) {
+	const mover = members[index];
+	const landed = landing.values[index];
+	if (!mover || landed === void 0) return [];
+	const step = smallestStep(members, landing);
+	const held = stepToward(mover, landed, landing.left);
+	return step === void 0 ? [held] : [held, stepToward(mover, landed, trimFloat(landing.left - step))];
+}
+function nearest(candidates, move, from) {
+	const { direction = 0, index } = move;
+	const moverOf = (candidate) => candidate[index] ?? NaN;
+	const [first, ...rest] = candidates.toSorted((one, other) => Math.abs(moverOf(one) - from.landed) - Math.abs(moverOf(other) - from.landed));
+	if (!first || direction === 0 || moverOf(first) !== from.start) return first;
+	return rest.find((candidate) => Math.sign(moverOf(candidate) - from.start) === direction) ?? first;
+}
+function close(members, rule, held) {
+	const { landing, move, mover } = held;
+	const { index } = move;
+	const landed = landing.values[index] ?? mover.value;
+	const targets = moverTargets(members, landing, index);
+	return nearest(targets.flatMap((target) => {
+		const attempt = spread(members, rule, {
+			index,
+			target
+		});
+		return attempt && Math.abs(attempt.left) <= epsilon ? [attempt.values] : [];
+	}), move, {
+		landed,
+		start: mover.value
+	}) ?? landing.values.with(index, targets[0] ?? landed);
+}
+function distribute(members, rule, move) {
+	const landing = spread(members, rule, move);
+	if (!landing) return members.map(({ value }) => value);
+	const mover = members[move?.index ?? -1];
+	if (!move || !mover || Math.abs(landing.left) <= epsilon) return landing.values;
+	return close(members, rule, {
+		landing,
+		move,
+		mover
+	});
+}
+
+//#endregion
+export { distribute, splitLimits };

package/dist/default/lib/drag-step.js

@@ -0,0 +1,99 @@
+import { clampProportion, wrapProportion } from "./math.js";
+
+//#region src/lib/drag-step.ts
+const fineFactor = .1;
+const mouseDragThresholdPx = 3;
+const touchDragThresholdPx = 7;
+function dragThresholdPx(pointerType) {
+	return pointerType === "touch" ? touchDragThresholdPx : mouseDragThresholdPx;
+}
+function isAcross(from, to, proportion) {
+	return from !== proportion && (from - proportion) * (to - proportion) <= 0;
+}
+function passDetent(hold, from, to) {
+	if (hold.slack === void 0 && !isAcross(from, to, hold.proportion)) return {
+		proportion: to,
+		slack: void 0
+	};
+	const slack = (hold.slack ?? 0) + to - hold.proportion;
+	if (Math.abs(slack) <= hold.zone) return {
+		proportion: void 0,
+		slack
+	};
+	return {
+		proportion: hold.proportion + slack - Math.sign(slack) * hold.zone,
+		slack: void 0
+	};
+}
+function nearestTurn(hold, from) {
+	return {
+		...hold,
+		proportion: hold.proportion + Math.round(from - hold.proportion)
+	};
+}
+function land(mapping, state, proportion) {
+	const rawProportion = mapping.isWrapping ? wrapProportion(proportion) : clampProportion(proportion);
+	return {
+		state: {
+			...state,
+			rawProportion
+		},
+		value: mapping.snap(mapping.valueAt(rawProportion))
+	};
+}
+function startDrag(mapping, start) {
+	const { detent: wanted, from, position, proportion, ...fixed } = start;
+	const state = {
+		...fixed,
+		isEngaged: false,
+		lastPosition: position,
+		rawProportion: proportion,
+		startPosition: position
+	};
+	if (!wanted) return state;
+	const value = mapping.snap(wanted.value);
+	const detent = {
+		proportion: mapping.proportionOf(value),
+		slack: value === from ? 0 : void 0,
+		value,
+		zone: wanted.zone
+	};
+	return {
+		...state,
+		detent
+	};
+}
+function stepDrag(mapping, state, move) {
+	if (!(state.isEngaged || move.isOutside || Math.abs(move.position - state.startPosition) >= state.thresholdPx)) return {
+		state,
+		value: void 0
+	};
+	const pace = move.isFine ? fineFactor : 1;
+	const to = state.rawProportion + (move.position - state.lastPosition) / state.travelPx * pace;
+	const moved = {
+		...state,
+		isEngaged: true,
+		lastPosition: move.position
+	};
+	const { detent } = state;
+	if (!detent) return land(mapping, moved, to);
+	const passed = passDetent(mapping.isWrapping ? nearestTurn(detent, state.rawProportion) : detent, state.rawProportion, to);
+	const held = {
+		...moved,
+		detent: {
+			...detent,
+			slack: passed.slack
+		}
+	};
+	if (passed.proportion === void 0) return {
+		state: {
+			...held,
+			rawProportion: detent.proportion
+		},
+		value: detent.value
+	};
+	return land(mapping, held, passed.proportion);
+}
+
+//#endregion
+export { dragThresholdPx, startDrag, stepDrag };

package/dist/default/lib/envelope-curve.js

@@ -0,0 +1,9 @@
+//#region src/lib/envelope-curve.ts
+const flatCurve = .001;
+function envelopeCurve(position, curve) {
+	if (Math.abs(curve) < flatCurve) return position;
+	return Math.expm1(curve * position) / Math.expm1(curve);
+}
+
+//#endregion
+export { envelopeCurve };

package/dist/default/lib/field.js

@@ -0,0 +1,94 @@
+import { startDrag, stepDrag } from "./drag-step.js";
+
+//#region src/lib/field.ts
+function startAxis(start, position) {
+	if (!start) return void 0;
+	const { mapping, ...rest } = start;
+	return startDrag(mapping, {
+		...rest,
+		position,
+		thresholdPx: 0
+	});
+}
+function startFieldDrag(start) {
+	const { position, thresholdPx } = start;
+	return {
+		isEngaged: false,
+		lock: void 0,
+		startPosition: position,
+		thresholdPx,
+		x: startAxis(start.x, position.x),
+		y: startAxis(start.y, position.y)
+	};
+}
+function dominantAxis(state, move) {
+	if (!state.x) return "y";
+	if (!state.y) return "x";
+	const { startPosition } = state;
+	return Math.abs(move.x - startPosition.x) >= Math.abs(move.y - startPosition.y) ? "x" : "y";
+}
+function stepAxis(mapping, drag, move) {
+	if (!mapping || !drag) return {
+		state: drag,
+		value: void 0
+	};
+	if (move.isHeld) return {
+		state: {
+			...drag,
+			lastPosition: move.position
+		},
+		value: void 0
+	};
+	return stepDrag(mapping, drag, {
+		isFine: move.isFine,
+		isOutside: false,
+		position: move.position
+	});
+}
+function stepFieldDrag(mappings, state, move) {
+	const { startPosition } = state;
+	if (!(state.isEngaged || Math.hypot(move.x - startPosition.x, move.y - startPosition.y) >= state.thresholdPx)) return {
+		state,
+		x: void 0,
+		y: void 0
+	};
+	const lock = move.isLocked ? state.lock ?? dominantAxis(state, move) : void 0;
+	const { isFine } = move;
+	const x = stepAxis(mappings.x, state.x, {
+		isFine,
+		isHeld: lock === "y",
+		position: move.x
+	});
+	const y = stepAxis(mappings.y, state.y, {
+		isFine,
+		isHeld: lock === "x",
+		position: move.y
+	});
+	return {
+		state: {
+			...state,
+			isEngaged: true,
+			lock,
+			x: x.state,
+			y: y.state
+		},
+		x: x.value,
+		y: y.value
+	};
+}
+function pointerPosition(event) {
+	return {
+		x: event.clientX,
+		y: -event.clientY
+	};
+}
+function pointerMove(event) {
+	return {
+		...pointerPosition(event),
+		isFine: event.shiftKey,
+		isLocked: event.altKey
+	};
+}
+
+//#endregion
+export { pointerMove, pointerPosition, startFieldDrag, stepFieldDrag };