@falcon-ui/falcon-ui 1.0.0 → 1.1.0

package/esm/components/loading/index.mjs

@@ -0,0 +1,1179 @@
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, h, normalizeClass, normalizeStyle, onActivated, onDeactivated, onMounted, onScopeDispose, openBlock, ref, renderSlot, toDisplayString, toValue, unref, vShow, watch, withDirectives } from "vue";
+var defaultNamespace = "fl";
+var statePrefix = "is-";
+var buildBemName = (namespace, block, blockSuffix = "", element = "", modifier = "") => {
+	let className = `${namespace}-${block}`;
+	if (blockSuffix) className += `-${blockSuffix}`;
+	if (element) className += `__${element}`;
+	if (modifier) className += `--${modifier}`;
+	return className;
+};
+const useNamespace = (block, namespace = defaultNamespace) => {
+	const b = (blockSuffix = "") => buildBemName(namespace, block, blockSuffix);
+	const e = (element) => element ? buildBemName(namespace, block, "", element) : "";
+	const m = (modifier) => modifier ? buildBemName(namespace, block, "", "", modifier) : "";
+	const be = (blockSuffix, element) => {
+		if (!blockSuffix || !element) return "";
+		return buildBemName(namespace, block, blockSuffix, element);
+	};
+	const em = (element, modifier) => {
+		if (!element || !modifier) return "";
+		return buildBemName(namespace, block, "", element, modifier);
+	};
+	const bm = (blockSuffix, modifier) => {
+		if (!blockSuffix || !modifier) return "";
+		return buildBemName(namespace, block, blockSuffix, "", modifier);
+	};
+	const bem = (blockSuffix, element, modifier) => {
+		if (!blockSuffix && !element && !modifier) return b();
+		return buildBemName(namespace, block, blockSuffix, element, modifier);
+	};
+	const is = (name, state = true) => state ? `${statePrefix}${name}` : "";
+	return {
+		namespace,
+		b,
+		e,
+		m,
+		be,
+		em,
+		bm,
+		bem,
+		is
+	};
+};
+const withInstall = (component) => {
+	const installable = component;
+	installable.install = (app) => {
+		if (!component.name) return;
+		app.component(component.name, component);
+	};
+	return installable;
+};
+const flLoadingAnimations = [
+	"working",
+	"searching",
+	"solving",
+	"listening",
+	"composing",
+	"shaping",
+	"earth"
+];
+const flLoadingSizes = [
+	20,
+	32,
+	48,
+	64,
+	96
+];
+const flLoadingProps = {
+	active: {
+		type: Boolean,
+		default: true
+	},
+	animation: {
+		type: String,
+		default: "searching",
+		validator: (v) => flLoadingAnimations.includes(v)
+	},
+	size: {
+		type: Number,
+		default: 64,
+		validator: (v) => flLoadingSizes.includes(v)
+	},
+	color: {
+		type: String,
+		default: ""
+	},
+	theme: {
+		type: String,
+		default: "auto"
+	},
+	speed: {
+		type: Number,
+		default: 1
+	},
+	paused: {
+		type: Boolean,
+		default: false
+	},
+	text: {
+		type: String,
+		default: ""
+	},
+	layout: {
+		type: String,
+		default: "inline"
+	},
+	ariaLabel: {
+		type: String,
+		default: "加载中"
+	}
+};
+const normalizeAnimation = (v) => flLoadingAnimations.includes(v) ? v : "searching";
+const normalizeSize = (v) => flLoadingSizes.includes(v) ? v : 64;
+const normalizeSpeed = (v) => Number.isFinite(v) ? Math.max(.25, Math.min(3, v)) : 1;
+function useLoadingColor(host, options) {
+	const color = ref("#20252b");
+	let mounted = false;
+	let observer;
+	let media;
+	let probe;
+	let observedHost;
+	const resolve = () => {
+		if (!mounted) return;
+		const target = host() || document.documentElement;
+		if (target !== observedHost) {
+			observer?.disconnect();
+			probe?.remove();
+			probe = document.createElement("span");
+			probe.setAttribute("aria-hidden", "true");
+			probe.style.cssText = "position:absolute;visibility:hidden;pointer-events:none;width:0;height:0;overflow:hidden";
+			target.appendChild(probe);
+			for (let el = target; el; el = el.parentElement) observer?.observe(el, {
+				attributes: true,
+				attributeFilter: [
+					"class",
+					"style",
+					"data-theme"
+				]
+			});
+			observedHost = target;
+		}
+		const { color: explicit, theme = "auto" } = options();
+		let dark = theme === "dark";
+		if (theme === "auto") {
+			dark = media?.matches ?? false;
+			for (let el = target; el; el = el.parentElement) {
+				const marker = el.dataset.theme;
+				if (marker === "dark" || marker === "light") {
+					dark = marker === "dark";
+					break;
+				}
+				if (el.classList.contains("dark") || el.classList.contains("light")) {
+					dark = el.classList.contains("dark");
+					break;
+				}
+			}
+		}
+		const variable = getComputedStyle(target).getPropertyValue("--fl-loading-color").trim();
+		const fallback = dark ? "#f0f3f7" : "#20252b";
+		if (probe) {
+			probe.style.color = fallback;
+			if (explicit || variable) probe.style.color = explicit || variable;
+			color.value = getComputedStyle(probe).color || fallback;
+		}
+	};
+	watch([
+		host,
+		() => options().color,
+		() => options().theme
+	], resolve, { flush: "post" });
+	onMounted(() => {
+		mounted = true;
+		media = window.matchMedia?.("(prefers-color-scheme: dark)");
+		observer = typeof MutationObserver === "undefined" ? void 0 : new MutationObserver(resolve);
+		media?.addEventListener("change", resolve);
+		resolve();
+	});
+	onScopeDispose(() => {
+		mounted = false;
+		observer?.disconnect();
+		media?.removeEventListener("change", resolve);
+		probe?.remove();
+	});
+	return color;
+}
+var COUNT_PAIRS = [
+	["latRings", "lonDensity"],
+	["rings", "lonDensity"],
+	["lanes", "segs"]
+];
+var COUNT_KEYS = [
+	"orbitN",
+	"ghostN",
+	"nodeN",
+	"strandN",
+	"signals"
+];
+var ICON_DENSITY_KEYS = ["iconD"];
+var RADIUS_KEYS = [
+	"rBase",
+	"rDepth",
+	"rActive",
+	"rDot",
+	"ghostR",
+	"partR",
+	"partRDepth",
+	"nodeR",
+	"nodeRDepth"
+];
+function scaleCounts(opts, scale) {
+	const out = { ...opts };
+	const done = /* @__PURE__ */ new Set();
+	const rt = Math.sqrt(scale);
+	for (const [a, b] of COUNT_PAIRS) {
+		const va = out[a];
+		const vb = out[b];
+		if (va != null && vb != null && !done.has(a) && !done.has(b)) {
+			out[a] = Math.max(2, Math.round(va * rt));
+			out[b] = Math.max(2, Math.round(vb * rt));
+			done.add(a);
+			done.add(b);
+		}
+	}
+	for (const k of COUNT_KEYS) {
+		const v = out[k];
+		if (v != null && v !== 0 && !done.has(k)) out[k] = Math.max(1, Math.round(v * scale));
+	}
+	for (const k of ICON_DENSITY_KEYS) {
+		const v = out[k];
+		if (v != null) out[k] = Math.max(.02, v * scale);
+	}
+	return out;
+}
+function scaleRadii(opts, scale) {
+	const out = { ...opts };
+	for (const k of RADIUS_KEYS) {
+		const v = out[k];
+		if (v != null) out[k] = v * scale;
+	}
+	out.rSizeMul = (out.rSizeMul ?? 1) * scale;
+	return out;
+}
+const BASE_PROFILES = {
+	globe: {
+		latRings: 17,
+		lonDensity: 44,
+		rBase: .6,
+		rDepth: 1.7,
+		rBoost: 1,
+		inkFar: .62,
+		inkSpan: .54,
+		rsPow: .6,
+		rMin: .3
+	},
+	orbits: {
+		orbitN: 12,
+		ghostN: 40,
+		ghostR: .9,
+		ghostA: .5,
+		particles: 3,
+		partR: 1.2,
+		partRDepth: 1.6,
+		rsPow: .6,
+		rMin: .3
+	},
+	rubik: {
+		latRings: 15,
+		lonDensity: 40,
+		moveCount: 14,
+		rBase: .6,
+		rDepth: 1.7,
+		rActive: .3,
+		inkFar: .62,
+		inkSpan: .54,
+		rsPow: .6,
+		rMin: .3
+	},
+	wave: {
+		rings: 15,
+		lonDensity: 40,
+		rBase: .6,
+		rDepth: 1.7,
+		rsPow: .6,
+		rMin: .3
+	},
+	web: {
+		nodeN: 30,
+		thr: .72,
+		signals: 5,
+		nodeR: 1.4,
+		nodeRDepth: 1.8,
+		lineW: .8,
+		rsPow: .6,
+		rMin: .3
+	},
+	braid: {
+		strandN: 52,
+		turns: 3,
+		ghostN: 150,
+		rBase: 1.2,
+		rDepth: 1.8,
+		rsPow: .6,
+		rMin: .3
+	},
+	ribbon: {
+		lanes: 5,
+		segs: 88,
+		ghostN: 150,
+		rBase: 1.1,
+		rDepth: 1.7,
+		rsPow: .6,
+		rMin: .3
+	},
+	ring: {
+		lanes: 5,
+		segs: 88,
+		ghostN: 0,
+		faceOn: 1,
+		rBase: 1.1,
+		rDepth: 1.7,
+		rsPow: .6,
+		rMin: .3
+	},
+	morph: {
+		rDot: .021,
+		iconD: 1,
+		rMin: .25
+	}
+};
+var presets = {
+	working: [
+		"orbits",
+		1.885,
+		1,
+		1,
+		3.9,
+		.238,
+		2.4
+	],
+	searching: [
+		"globe",
+		2.015,
+		.42,
+		1.15,
+		2.665,
+		.105,
+		1.75
+	],
+	solving: [
+		"rubik",
+		1.82,
+		.35,
+		1.05,
+		1.95,
+		.088,
+		1.9
+	],
+	listening: [
+		"wave",
+		4.388,
+		.341,
+		1,
+		3.998,
+		.105,
+		1.6
+	],
+	composing: [
+		"ribbon",
+		2.34,
+		.25,
+		.85,
+		3.12,
+		.051,
+		1.073
+	],
+	shaping: [
+		"morph",
+		2.405,
+		.702,
+		.395,
+		2.08,
+		.53,
+		1.011
+	]
+};
+var cache$1 = /* @__PURE__ */ new Map();
+function resolvePreset(animation, size) {
+	const key = `${animation}-${size}`;
+	const hit = cache$1.get(key);
+	if (hit) return hit;
+	if (animation === "earth") return {
+		speed: 1,
+		opts: {}
+	};
+	const [mode, bigSpeed, bigCount, bigRadius, smallSpeed, smallCount, smallRadius] = presets[animation];
+	const blend = Math.max(0, Math.min(1, (size - 20) / 44));
+	const count = smallCount + (bigCount - smallCount) * blend;
+	const radius = smallRadius + (bigRadius - smallRadius) * blend;
+	let opts = scaleRadii(scaleCounts(BASE_PROFILES[mode], count), radius);
+	if (animation === "searching") opts = {
+		...opts,
+		scanMul: 4.08,
+		dimBase: .45
+	};
+	if (animation === "composing") opts = {
+		...opts,
+		spin: 0,
+		bandMul: 3.9,
+		wobMul: 1
+	};
+	if (animation === "shaping") opts = {
+		...opts,
+		spread: 1.45
+	};
+	const resolved = {
+		speed: smallSpeed + (bigSpeed - smallSpeed) * blend,
+		opts
+	};
+	cache$1.set(key, resolved);
+	return resolved;
+}
+function hashD(a, b) {
+	const h$1 = Math.sin(a * 12.9898 + b * 78.233) * 43758.5453;
+	return h$1 - Math.floor(h$1);
+}
+function fibDir(i, n) {
+	const golden = Math.PI * (3 - Math.sqrt(5));
+	const y = 1 - 2 * (i + .5) / n;
+	const rad = Math.sqrt(1 - y * y);
+	const a = i * golden;
+	return [
+		rad * Math.cos(a),
+		y,
+		rad * Math.sin(a)
+	];
+}
+function angleDelta(a, b) {
+	return Math.atan2(Math.sin(a - b), Math.cos(a - b));
+}
+function makeProj(yaw, tilt, cx, cy, scale) {
+	const st = Math.sin(tilt);
+	const ct = Math.cos(tilt);
+	const sy = Math.sin(yaw);
+	const cyw = Math.cos(yaw);
+	return (x, y, z) => {
+		const x1 = x * cyw + z * sy;
+		const z1 = -x * sy + z * cyw;
+		const y1 = y * ct - z1 * st;
+		const z2 = y * st + z1 * ct;
+		return [
+			cx + x1 * scale,
+			cy - y1 * scale,
+			z2
+		];
+	};
+}
+function finalizeFrame(dots, lines, rMin = .3) {
+	const visible = [];
+	for (const d of dots) {
+		if ((d.a ?? 1) < .02) continue;
+		d.r = Math.max(rMin, d.r);
+		visible.push(d);
+	}
+	visible.sort((a, b) => a.z - b.z);
+	return {
+		dots: visible,
+		lines: lines.filter((l) => (l.a ?? 1) >= .02)
+	};
+}
+function radiusScale(size, pow) {
+	return (size / 300) ** pow;
+}
+const frameGlobe = (size, t, o) => {
+	const spin = .5;
+	const cx = size / 2;
+	const cy = size / 2;
+	const radius = size / 2 * .82;
+	const tilt = .4 + .06 * Math.sin(t * .35);
+	const pt = makeProj(t * spin, tilt, cx, cy, radius);
+	const scan = t * (spin + (1.7 - spin) * (o.scanMul ?? 1));
+	const rs = radiusScale(size, o.rsPow ?? .6);
+	const dimBase = o.dimBase ?? 1;
+	const dots = [];
+	const latRings = o.latRings ?? 17;
+	const lonDensity = o.lonDensity ?? 44;
+	for (let li = 0; li <= latRings; li++) {
+		const lat = -Math.PI / 2 + li / latRings * Math.PI;
+		const cosLat = Math.cos(lat);
+		const sinLat = Math.sin(lat);
+		const lonCount = Math.max(1, Math.round(Math.abs(cosLat) * lonDensity));
+		for (let lj = 0; lj < lonCount; lj++) {
+			const lon = lj / lonCount * 2 * Math.PI;
+			const [px, py, z] = pt(cosLat * Math.cos(lon), sinLat, cosLat * Math.sin(lon));
+			const depth = (z + 1) / 2;
+			const d = angleDelta(lon + t * spin, scan);
+			const boost = Math.exp(-(d * d) / .18) * Math.max(0, z);
+			dots.push({
+				x: px,
+				y: py,
+				z,
+				r: ((o.rBase ?? .6) + (o.rDepth ?? 1.7) * depth + (o.rBoost ?? 1) * boost) * rs,
+				white: (o.inkFar ?? .62) - (o.inkSpan ?? .54) * depth,
+				a: dimBase + (1 - dimBase) * Math.min(1, boost)
+			});
+		}
+	}
+	return finalizeFrame(dots, [], o.rMin);
+};
+function solveCycle(time, count, slotDur, rest) {
+	const tc = time % (2 * count * slotDur + rest);
+	const amount = new Array(count).fill(0);
+	let active = -1;
+	if (tc < 2 * count * slotDur) {
+		const slot = Math.floor(tc / slotDur);
+		const p = (tc - slot * slotDur) / slotDur;
+		const ep = 1 - (1 - Math.min(1, p / .7)) ** 3;
+		if (slot < count) {
+			for (let i = 0; i < slot; i++) amount[i] = 1;
+			amount[slot] = ep;
+			active = slot;
+		} else {
+			const u = 2 * count - 1 - slot;
+			for (let i = 0; i < u; i++) amount[i] = 1;
+			amount[u] = 1 - ep;
+			active = u;
+		}
+	}
+	return {
+		amount,
+		active
+	};
+}
+function applyMoves(pt3, moves, sc) {
+	let [x, y, z] = pt3;
+	let inActive = false;
+	for (let i = 0; i < moves.length; i++) {
+		if (sc.amount[i] <= 0) continue;
+		const mv = moves[i];
+		const coord = mv.axis === 0 ? x : mv.axis === 1 ? y : z;
+		if (coord < mv.lo || coord >= mv.hi) continue;
+		if (i === sc.active) inActive = true;
+		const a = mv.ang * sc.amount[i];
+		const ca = Math.cos(a);
+		const sa = Math.sin(a);
+		if (mv.axis === 0) {
+			const y2 = y * ca - z * sa;
+			z = y * sa + z * ca;
+			y = y2;
+		} else if (mv.axis === 1) {
+			const x2 = x * ca + z * sa;
+			z = -x * sa + z * ca;
+			x = x2;
+		} else {
+			const x2 = x * ca - y * sa;
+			y = x * sa + y * ca;
+			x = x2;
+		}
+	}
+	return [
+		x,
+		y,
+		z,
+		inActive
+	];
+}
+function makeMoves(count) {
+	const moves = [];
+	for (let i = 0; i < count; i++) {
+		const axis = Math.min(2, Math.floor(hashD(i, 2.3) * 3));
+		const lo = -1 + .5 * Math.min(3, Math.floor(hashD(i, 5.9) * 4));
+		const dir = hashD(i, 7.7) < .5 ? 1 : -1;
+		moves.push({
+			axis,
+			lo,
+			hi: lo + .5,
+			ang: dir * Math.PI / 2
+		});
+	}
+	return moves;
+}
+const frameRubik = (size, t, o) => {
+	const cx = size / 2;
+	const cy = size / 2;
+	const R = size / 2 * .82;
+	const pt = makeProj(t * .55, .35 + .1 * Math.sin(t * .9), cx, cy, R);
+	const rs = radiusScale(size, o.rsPow ?? .6);
+	const moveCount = o.moveCount ?? 14;
+	const moves = makeMoves(moveCount);
+	const sc = solveCycle(t, moveCount, .42, 1.2);
+	const dots = [];
+	const latRings = o.latRings ?? 15;
+	const lonDensity = o.lonDensity ?? 40;
+	for (let li = 0; li <= latRings; li++) {
+		const lat = -Math.PI / 2 + li / latRings * Math.PI;
+		const cosLat = Math.cos(lat);
+		const sinLat = Math.sin(lat);
+		const lonCount = Math.max(1, Math.round(Math.abs(cosLat) * lonDensity));
+		for (let lj = 0; lj < lonCount; lj++) {
+			const lon = lj / lonCount * 2 * Math.PI;
+			const [x, y, z, inActive] = applyMoves([
+				cosLat * Math.cos(lon),
+				sinLat,
+				cosLat * Math.sin(lon)
+			], moves, sc);
+			const [px, py, zr] = pt(x, y, z);
+			const depth = (zr + 1) / 2;
+			dots.push({
+				x: px,
+				y: py,
+				z: zr,
+				r: ((o.rBase ?? .6) + (o.rDepth ?? 1.7) * depth + (inActive ? o.rActive ?? .3 : 0)) * rs,
+				white: (o.inkFar ?? .62) - (o.inkSpan ?? .54) * depth - (inActive ? .14 : 0)
+			});
+		}
+	}
+	return finalizeFrame(dots, [], o.rMin);
+};
+const frameWave = (size, t, o) => {
+	const cx = size / 2;
+	const cy = size / 2;
+	const R = size / 2 * .874;
+	const pt = makeProj(t * .18, .38, cx, cy, 1);
+	const rs = radiusScale(size, o.rsPow ?? .6);
+	const dots = [];
+	const rings = o.rings ?? 15;
+	const lonDensity = o.lonDensity ?? 40;
+	for (let ri = 0; ri <= rings; ri++) {
+		const lat = -Math.PI / 2 + ri / rings * Math.PI;
+		const cosLat = Math.cos(lat);
+		const sinLat = Math.sin(lat);
+		const w = .62 * Math.sin(t * 2.1 - ri * .52) + .38 * Math.sin(t * 1.27 + ri * .83);
+		const rr = R * (.88 + .105 * w);
+		const lonCount = Math.max(1, Math.round(Math.abs(cosLat) * lonDensity));
+		for (let lj = 0; lj < lonCount; lj++) {
+			const lon = lj / lonCount * 2 * Math.PI;
+			const [px, py, z] = pt(cosLat * Math.cos(lon) * rr, sinLat * rr, cosLat * Math.sin(lon) * rr);
+			const depth = (z / R + 1) / 2;
+			const crest = Math.max(0, w);
+			dots.push({
+				x: px,
+				y: py,
+				z,
+				r: ((o.rBase ?? .6) + (o.rDepth ?? 1.7) * depth) * (1 + .4 * crest) * rs,
+				white: .66 - .56 * depth - .1 * crest
+			});
+		}
+	}
+	return finalizeFrame(dots, [], o.rMin);
+};
+const frameOrbits = (size, t, o) => {
+	const cx = size / 2;
+	const cy = size / 2;
+	const R = size / 2 * .82;
+	const pt = makeProj(t * .12, .3, cx, cy, 1);
+	const rs = radiusScale(size, o.rsPow ?? .6);
+	const dots = [];
+	const orbitN = o.orbitN ?? 12;
+	const ghostN = o.ghostN ?? 40;
+	const particles = o.particles ?? 3;
+	for (let orb = 0; orb < orbitN; orb++) {
+		const h1 = hashD(orb, 1.7);
+		const h2 = hashD(orb, 5.2);
+		const h3 = hashD(orb, 8.9);
+		const ro = R * (.45 + .52 * h1);
+		const th = h1 * 2 * Math.PI;
+		const phi = Math.acos(2 * h2 - 1);
+		const nx = Math.sin(phi) * Math.cos(th);
+		const ny = Math.cos(phi);
+		const nz = Math.sin(phi) * Math.sin(th);
+		let ux = -ny;
+		let uy = nx;
+		const uz = 0;
+		const ul = Math.max(1e-6, Math.sqrt(ux * ux + uy * uy));
+		ux /= ul;
+		uy /= ul;
+		const vx = ny * uz - nz * uy;
+		const vy = nz * ux - nx * uz;
+		const vz = nx * uy - ny * ux;
+		const speed = (.25 + .55 * h3) * (h3 > .5 ? 1 : -1);
+		for (let k = 0; k < ghostN; k++) {
+			const a = k / ghostN * 2 * Math.PI;
+			const [px, py, z] = pt((ux * Math.cos(a) + vx * Math.sin(a)) * ro, (uy * Math.cos(a) + vy * Math.sin(a)) * ro, (uz * Math.cos(a) + vz * Math.sin(a)) * ro);
+			const depth = (z / ro + 1) / 2;
+			dots.push({
+				x: px,
+				y: py,
+				z,
+				r: (o.ghostR ?? .9) * rs,
+				white: .72,
+				a: (o.ghostA ?? .5) * (.4 + .6 * depth)
+			});
+		}
+		for (let m = 0; m < particles; m++) {
+			const a = t * speed + m / particles * 2 * Math.PI + h2 * 6;
+			const [px, py, z] = pt((ux * Math.cos(a) + vx * Math.sin(a)) * ro, (uy * Math.cos(a) + vy * Math.sin(a)) * ro, (uz * Math.cos(a) + vz * Math.sin(a)) * ro);
+			const depth = (z / ro + 1) / 2;
+			dots.push({
+				x: px,
+				y: py,
+				z,
+				r: ((o.partR ?? 1.2) + (o.partRDepth ?? 1.6) * depth) * rs,
+				white: .3 - .22 * depth
+			});
+		}
+	}
+	return finalizeFrame(dots, [], o.rMin);
+};
+const frameRibbon = (size, t, o) => {
+	const cx = size / 2;
+	const cy = size / 2;
+	const R = size / 2 * .78;
+	const spin = o.spin ?? 1;
+	const camTilt = .3;
+	const pt = makeProj(t * .1 * spin, camTilt, cx, cy, 1);
+	const rs = radiusScale(size, o.rsPow ?? .6);
+	const dots = [];
+	const ghostN = o.ghostN ?? 150;
+	for (let i = 0; i < ghostN; i++) {
+		const d = fibDir(i, ghostN);
+		const [px, py, z] = pt(d[0] * R, d[1] * R, d[2] * R);
+		const depth = (z / R + 1) / 2;
+		dots.push({
+			x: px,
+			y: py,
+			z,
+			r: .8 * rs,
+			white: .78,
+			a: .1 + .22 * depth
+		});
+	}
+	const ya = t * .24 * spin;
+	const ta = o.faceOn ? -camTilt : .55 + .3 * Math.sin(t * .18) * spin;
+	const ux = Math.cos(ya);
+	const uy = 0;
+	const uz = Math.sin(ya);
+	const vx = -uz * Math.sin(ta);
+	const vy = Math.cos(ta);
+	const vz = ux * Math.sin(ta);
+	const nx = uy * vz - uz * vy;
+	const ny = uz * vx - ux * vz;
+	const nz = ux * vy - uy * vx;
+	const wobAmp = .23 * (o.wobMul ?? 1);
+	const baseR = o.faceOn ? R / (1 + .85 * wobAmp) : R;
+	const baseLanes = o.lanes ?? 5;
+	const segs = o.segs ?? 88;
+	const lanes = Math.max(1, Math.round(baseLanes * (o.bandMul ?? 1)));
+	for (let w = 0; w < lanes; w++) {
+		const laneOff = (w - (lanes - 1) / 2) * .075;
+		const edge = Math.abs(w - (lanes - 1) / 2) / Math.max(1, (lanes - 1) / 2);
+		for (let k = 0; k < segs; k++) {
+			const a = k / segs * 2 * Math.PI;
+			const wob = (.16 * Math.sin(a * 3 - t * 1.7 + w * .22) + .07 * Math.sin(a * 5 + t * 1.1)) * (o.wobMul ?? 1);
+			const radial = o.faceOn ? 1 + wob : 1;
+			const off = o.faceOn ? laneOff : laneOff + wob;
+			const x = ux * Math.cos(a) + vx * Math.sin(a) + nx * off;
+			const y = uy * Math.cos(a) + vy * Math.sin(a) + ny * off;
+			const z = uz * Math.cos(a) + vz * Math.sin(a) + nz * off;
+			const l = Math.sqrt(x * x + y * y + z * z);
+			const rr = baseR * radial;
+			const [px, py, zr] = pt(x / l * rr, y / l * rr, z / l * rr);
+			const depth = (zr / R + 1) / 2;
+			dots.push({
+				x: px,
+				y: py,
+				z: zr,
+				r: ((o.rBase ?? 1.1) + (o.rDepth ?? 1.7) * depth) * (1 - .25 * edge) * rs,
+				white: .52 - .44 * depth + .18 * edge,
+				a: .4 + .6 * depth
+			});
+		}
+	}
+	return finalizeFrame(dots, [], o.rMin);
+};
+function smoothE(x) {
+	return x * x * (3 - 2 * x);
+}
+function polyPath(verts) {
+	const V = verts.length;
+	const L = [];
+	let total = 0;
+	for (let i = 0; i < V; i++) {
+		const a = verts[i];
+		const b = verts[(i + 1) % V];
+		const l = Math.hypot(b[0] - a[0], b[1] - a[1]);
+		L.push(l);
+		total += l;
+	}
+	return (f) => {
+		let target = f * total;
+		let i = 0;
+		while (target > L[i] && i < V - 1) {
+			target -= L[i];
+			i++;
+		}
+		const a = verts[i];
+		const b = verts[(i + 1) % V];
+		const ff = L[i] ? Math.min(1, target / L[i]) : 0;
+		return [a[0] + (b[0] - a[0]) * ff, a[1] + (b[1] - a[1]) * ff];
+	};
+}
+var CIRCLE = (f) => {
+	const a = -Math.PI / 2 + f * 2 * Math.PI;
+	return [Math.cos(a) * .24, Math.sin(a) * .24];
+};
+var CYCLE = [
+	CIRCLE,
+	polyPath([
+		[0, -.26],
+		[.24, .16],
+		[-.24, .16]
+	]),
+	polyPath([
+		[0, -.2],
+		[.2, -.2],
+		[.2, .2],
+		[-.2, .2],
+		[-.2, -.2]
+	])
+];
+function morphN(d) {
+	return Math.max(6, Math.round(34 * d));
+}
+var HOLD = 1.4;
+var MORPH = .9;
+var SEG = HOLD + MORPH;
+const frameMorph = (size, t, o) => {
+	const K = CYCLE.length;
+	const tc = t % (SEG * K);
+	const k = Math.floor(tc / SEG);
+	const local = tc - k * SEG;
+	const m = local > HOLD ? smoothE((local - HOLD) / MORPH) : 0;
+	const sprd = o.spread ?? 1;
+	const pA = CYCLE[k];
+	const pB = CYCLE[(k + 1) % K];
+	const M = 160;
+	const pts = [];
+	for (let i = 0; i < M; i++) {
+		const f = i / M;
+		const a = pA(f);
+		const b = pB(f);
+		pts.push([(a[0] + (b[0] - a[0]) * m) * sprd, (a[1] + (b[1] - a[1]) * m) * sprd]);
+	}
+	const L = [];
+	let total = 0;
+	for (let i = 0; i < M; i++) {
+		const a = pts[i];
+		const b = pts[(i + 1) % M];
+		const l = Math.hypot(b[0] - a[0], b[1] - a[1]);
+		L.push(l);
+		total += l;
+	}
+	const n = morphN(o.iconD ?? 1);
+	const re = (o.rDot ?? .021) * 1.35 * sprd;
+	const pulse = 1 + .02 * Math.sin(local * 3.1);
+	const dots = [];
+	const c2 = size / 2;
+	let seg = 0;
+	let acc = 0;
+	for (let k2 = 0; k2 < n; k2++) {
+		const target = k2 / n * total;
+		while (acc + L[seg] < target && seg < M - 1) {
+			acc += L[seg];
+			seg++;
+		}
+		const a = pts[seg];
+		const b = pts[(seg + 1) % M];
+		const f = L[seg] ? Math.min(1, (target - acc) / L[seg]) : 0;
+		const x = (a[0] + (b[0] - a[0]) * f) * pulse;
+		const y = (a[1] + (b[1] - a[1]) * f) * pulse;
+		dots.push({
+			x: c2 + x * size,
+			y: c2 + y * size,
+			z: 0,
+			r: Math.max(.35, re * size),
+			white: .1
+		});
+	}
+	return finalizeFrame(dots, [], o.rMin);
+};
+const earthPointData = {
+	"20": {
+		rings: 9,
+		flags: "01100000000000000000000000000000100010000100000011000110011000000000011111100000011001001100011000111010"
+	},
+	"32": {
+		rings: 17,
+		flags: "011001001111000000000000000000000100000000000000000000010000000000000000000000000110000010000000101000000000000111000001110000001110000000000001111000011100000000000000000000001110000011110000001000000000000000100000111111000000000000000000100000001111111010100000000000011000000110011111111000000011110000101001111100000011110001111111100011100001111111000000010000"
+	},
+	"48": {
+		rings: 29,
+		flags: "111011111111001011001111111100000000000000101111000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000001000000000000001100000000000000000000000001100000000000000000001100000000001100000000000011111000000000000000000001110000000001110100000000001111100000000000000000000011111000000001111010000000000011100000000000000000000001111110000000011110000000000000001100000000000000000000011111111000000011111000000000000000010100000000000000000000111100000000001111100000000000100000000000000000000000000011100000000111111111000001000000000000000000000000000000100000000001111111111000001000100000000000000000000000101001000000001111111111100110110000000000000000000001110010000000001111111111001111111100000000000000000111110000000000111110111111111111000000000000000011111100000000100001111111111110010000000000011111100000000101101111111111100000000000111111010000011111111111111100000000011110100000100111111111110100011111010100010111111111111111010010001011111110001001100001000000110000000"
+	},
+	"64": {
+		rings: 37,
+		flags: "111011111111011110011111111100000001000111111111110000000000000000001101111100000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000011100000000000010000000000000001000111000000000000000000000000111100000000000011100000000000000011111110000000000000000000000000111100000000000011110100000000000011111110000000000000000000000000001111110000000000111100100000000000000111110000000000000000000000000001111111100000000001111110100000000000000011000000000000000000000000000001111111110000000000111110000000000000000000000001000000000000000000000000111111111000000000011111100000000000000000000100000000000000000000000000001111110000000000001111111000000000000101100000000000000000000000000000000001111100000000000011111111000000000011001000000000000000000000000000000000001100000000011111111111110000010000010000000000000000000000000000000011000000000000011111111111110000011000110000000000000000000000000000011000010000000000111111111111111000110011000000000000000000000000000011000100000000000111111111111110011111111110000000000000000000000011100000000000000011111111111111111111111100000000000000000000011111110000000000001110000111111111111110000000000000000000011111110000000000010000011101111111111000000000000000000011111111000000000010110010111111111111000000000000001111111101000000111111111111111111110000000000001111101110000011111111111111111110000000001111100100000010101111111111110010011111111010100000111111111111111101111010011000011111111111100001110110000001110000001011101000000000000000000"
+	},
+	"96": {
+		rings: 53,
+		flags: "111111111111001111011111111100111110011111111111110000110111000111111111111110000000000001000000111111111111111100000000000000000000000000110111111110000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000000000000001100000000000000000000000000000000000000000000000001000000000000000000000000011100000000000000000000000000000000000000000000000000001000000000000000000000000011110000000000000000000000000000000000000000000000110000001000000000000000000000000000111100000000000000000011000000000000000000000010000111000000000000000000000000000000000001111100000000000000000111100000000000000000000011111111110000000000000000000000000000000000011111100000000000000001111100000000000000000000011111111110000000000000000000000000000000000000111111100000000000000001111110010000000000000000001111111111000000000000000000000000000000000000001111111100000000000000011111100100000000000000000000111111110000000000000000000000000000000000000001111111110000000000000011111111011000000000000000000001111101000000000000000000000000000000000000000111111111110000000000000001111111100000000000000000000000001101000000000000000000000000000000000000000011111111111100000000000000111111110000000000000000000000000000000100000000000000000000000000000000000000111111111111100000000000000111111100000000000000000000110000000111000000000000000000000000000000000000000111111111111000000000000000111111110000000000000000000101101000111000000000000000000000000000000000000000011111111100000000000000000111111111100000000000000000100110000000000000000000000000000000000000000000000000111111100000000000000000011111111111000000000000000110001000000000000000000000000000000000000000000000000111111000000000000001111111111111111100000000010000010000001000000000000000000000000000000000000000000000011100000000000000111111111111111111100000000000000000000000000000000000000000000000000000000000000011000000000000000000011111111111111111110000000110000011100000000000000000000000000000000000000000001110000000000000000000011111111111111110111000000110001111000000000000000000000000000000000000000001100100010000000000000001111111111111110111110000111101111000000000000000000000000000000000000000011100000000000000000000001111111111111111111100111111111111111000000000000000000000000000000000011100001000000000000000001111111111110111011111111111111111100000000000000000000000000000000111111110000000000000000000111111111111111111111111111111111000000000000000000000000000000111111111000000000000000000111100000011111111111111111111100100000000000000000000000001111111111100000000000000011000000011111011111111111111100100000000000000000000000011111111111000000000000000110100111111001111111111111101000000000000000000000001111111111110000000000000011101110010111111111111111111010000000000000000000111111111101010000000000111111111111111111111111111100000000000000000011111111111111000000000111111111111111111111111111100000000000000011111111011110000000000001111111111111111111110001000000000001111110001100000000000010111111111111111111000100000111111111100100010000000101111111111111111111010001111111111111001000100010111111111111111111110111111001010011000001111111111111111111000001111101110000000101111111100000000010011100000000110000000000011110010000000000000101100000000000000000000"
+	}
+};
+var cache = /* @__PURE__ */ new Map();
+function getEarthPoints(size) {
+	const hit = cache.get(size);
+	if (hit) return hit;
+	const { rings, flags } = earthPointData[size];
+	const points = [];
+	let index = 0;
+	for (let row = 0; row < rings; row++) {
+		const lat = -Math.PI / 2 + (row + .5) / rings * Math.PI;
+		const count = Math.max(1, Math.round(2 * rings * Math.cos(lat)));
+		for (let col = 0; col < count; col++, index++) {
+			const lon = -Math.PI + col / count * 2 * Math.PI;
+			const land = flags[index] === "1";
+			if (!land && index % 3 !== 0) continue;
+			points.push({
+				x: Math.cos(lat) * Math.cos(lon),
+				y: Math.sin(lat),
+				z: Math.cos(lat) * Math.sin(lon),
+				lon,
+				land
+			});
+		}
+	}
+	cache.set(size, points);
+	return points;
+}
+function frameEarth(size, time) {
+	const project = makeProj(35 * Math.PI / 180 - Math.PI / 2 + time * .22, .18, size / 2, size / 2, size * .43);
+	const dots = [];
+	for (const p of getEarthPoints(size)) {
+		const [x, y, z] = project(p.x, p.y, p.z);
+		if (z <= 0) continue;
+		const scan = Math.exp(-Math.pow(angleDelta(p.lon, time * .9), 2) / .08);
+		const edge = Math.min(1, z / .14);
+		dots.push({
+			x,
+			y,
+			z,
+			r: (size <= 32 ? .48 : .52) * (size / 64) ** .25 * (1 + .2 * z + (p.land ? .22 * scan : 0)),
+			white: p.land ? .08 + .2 * (1 - z) : .65,
+			a: edge * (p.land ? .82 + scan * .18 : .2)
+		});
+	}
+	return finalizeFrame(dots, [], .3);
+}
+var frames = {
+	searching: frameGlobe,
+	solving: frameRubik,
+	listening: frameWave,
+	working: frameOrbits,
+	composing: frameRibbon,
+	shaping: frameMorph
+};
+function createLoadingFrame(animation, size, time) {
+	if (animation === "earth") return frameEarth(size, time);
+	const { speed, opts } = resolvePreset(animation, size);
+	const frame = frames[animation](size, time * speed, opts);
+	if (size === 20 && frame.dots.length > 120) {
+		const count = frame.dots.length;
+		frame.dots = Array.from({ length: 120 }, (_, i) => frame.dots[Math.floor(i * count / 120)]);
+	}
+	return frame;
+}
+function paintLoadingFrame(ctx, frame, color) {
+	ctx.fillStyle = color;
+	for (const dot of frame.dots) {
+		ctx.globalAlpha = Math.max(0, Math.min(1, (dot.a ?? 1) * (1 - dot.white)));
+		ctx.beginPath();
+		ctx.arc(dot.x, dot.y, dot.r, 0, Math.PI * 2);
+		ctx.fill();
+	}
+	ctx.globalAlpha = 1;
+}
+function useLoadingAnimation(canvas, options, color) {
+	const available = ref(true);
+	let ctx = null;
+	let raf;
+	let previous;
+	let elapsed = 0;
+	let enabled = true;
+	let inView = true;
+	let reduced = false;
+	let mounted = false;
+	let dpr = 1;
+	let observer;
+	let motion;
+	const stop = () => {
+		if (raf !== void 0) cancelAnimationFrame(raf);
+		raf = void 0;
+		previous = void 0;
+	};
+	const running = () => mounted && ctx && enabled && inView && options().active && !options().paused && !reduced && document.visibilityState !== "hidden";
+	const paint = () => {
+		if (!ctx || !canvas.value) return;
+		const size = normalizeSize(options().size);
+		const ratio = Math.min(2, Math.max(1, window.devicePixelRatio || 1));
+		if (canvas.value.width !== Math.round(size * ratio) || ratio !== dpr) {
+			canvas.value.width = Math.round(size * ratio);
+			canvas.value.height = Math.round(size * ratio);
+		}
+		dpr = ratio;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		ctx.clearRect(0, 0, size, size);
+		try {
+			paintLoadingFrame(ctx, createLoadingFrame(normalizeAnimation(options().animation), size, reduced ? .6 : elapsed), color.value);
+		} catch {
+			available.value = false;
+			ctx = null;
+			stop();
+		}
+	};
+	const tick = (now) => {
+		raf = void 0;
+		if (!running()) {
+			previous = void 0;
+			return;
+		}
+		if (previous !== void 0) elapsed += Math.min(100, now - previous) / 1e3 * normalizeSpeed(options().speed);
+		previous = now;
+		paint();
+		if (running()) raf = requestAnimationFrame(tick);
+	};
+	const sync = () => {
+		if (!mounted) return;
+		if (!running()) stop();
+		if (options().active && inView && enabled && document.visibilityState !== "hidden") paint();
+		if (running() && raf === void 0) raf = requestAnimationFrame(tick);
+	};
+	const motionChange = () => {
+		reduced = motion?.matches ?? false;
+		sync();
+	};
+	watch(() => [
+		options().active,
+		options().paused,
+		options().animation,
+		options().size,
+		options().speed,
+		color.value
+	], sync, { flush: "post" });
+	onMounted(() => {
+		mounted = true;
+		try {
+			ctx = canvas.value?.getContext("2d") ?? null;
+		} catch {
+			ctx = null;
+		}
+		available.value = !!ctx;
+		motion = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+		reduced = motion?.matches ?? false;
+		motion?.addEventListener("change", motionChange);
+		if (typeof IntersectionObserver !== "undefined" && canvas.value) {
+			observer = new IntersectionObserver(([entry]) => {
+				inView = entry.isIntersecting;
+				sync();
+			});
+			observer.observe(canvas.value);
+		}
+		document.addEventListener("visibilitychange", sync);
+		window.addEventListener("resize", sync);
+		sync();
+	});
+	onActivated(() => {
+		enabled = true;
+		sync();
+	});
+	onDeactivated(() => {
+		enabled = false;
+		stop();
+	});
+	onScopeDispose(() => {
+		mounted = false;
+		stop();
+		observer?.disconnect();
+		motion?.removeEventListener("change", motionChange);
+		if (typeof document !== "undefined") document.removeEventListener("visibilitychange", sync);
+		if (typeof window !== "undefined") window.removeEventListener("resize", sync);
+		ctx = null;
+	});
+	return { available };
+}
+var _hoisted_1 = [
+	"role",
+	"aria-live",
+	"aria-hidden",
+	"aria-label"
+];
+var FlLoading_default = /* @__PURE__ */ defineComponent({
+	name: "FlLoading",
+	__name: "FlLoading",
+	props: flLoadingProps,
+	setup(__props) {
+		const props = __props;
+		const ns = useNamespace("loading");
+		const root = ref();
+		const canvas = ref();
+		const resolvedSize = computed(() => normalizeSize(props.size));
+		const resolvedColor = useLoadingColor(() => root.value, () => props);
+		const { available } = useLoadingAnimation(canvas, () => props, resolvedColor);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				ref_key: "root",
+				ref: root,
+				class: normalizeClass([
+					unref(ns).b(),
+					unref(ns).m(_ctx.layout),
+					unref(ns).is("inactive", !_ctx.active)
+				]),
+				style: normalizeStyle({ "--fl-loading-size": `${resolvedSize.value}px` }),
+				role: _ctx.active ? "status" : void 0,
+				"aria-live": _ctx.active ? "polite" : "off",
+				"aria-hidden": !_ctx.active || void 0,
+				"aria-label": !_ctx.text && !_ctx.$slots.text ? _ctx.ariaLabel : void 0
+			}, [createElementVNode("span", {
+				class: normalizeClass(unref(ns).e("visual")),
+				"aria-hidden": "true"
+			}, [withDirectives(createElementVNode("canvas", {
+				ref_key: "canvas",
+				ref: canvas,
+				class: normalizeClass(unref(ns).e("canvas")),
+				style: normalizeStyle({
+					width: `${resolvedSize.value}px`,
+					height: `${resolvedSize.value}px`
+				})
+			}, null, 6), [[vShow, unref(available)]]), !unref(available) ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(unref(ns).e("fallback")),
+				style: normalizeStyle({ color: unref(resolvedColor) })
+			}, "●", 6)) : createCommentVNode("v-if", true)], 2), _ctx.text || _ctx.$slots.text ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(unref(ns).e("text"))
+			}, [renderSlot(_ctx.$slots, "text", {}, () => [createTextVNode(toDisplayString(_ctx.text), 1)])], 2)) : createCommentVNode("v-if", true)], 14, _hoisted_1);
+		};
+	}
+});
+function useFlLoading(active, options = {}) {
+	const ns = useNamespace("loading");
+	const alive = ref(true);
+	const generation = ref(0);
+	const resolved = computed(() => toValue(options));
+	const color = useLoadingColor(() => toValue(resolved.value.themeTarget), () => resolved.value);
+	watch(() => toValue(active), () => generation.value++, { flush: "sync" });
+	onScopeDispose(() => {
+		alive.value = false;
+	});
+	const Content = defineComponent({
+		name: "FlLoadingContent",
+		props: { generation: {
+			type: Number,
+			required: true
+		} },
+		setup(props) {
+			const ownGeneration = props.generation;
+			return () => {
+				const { background: _background, customClass: _customClass, themeTarget: _target, ...visual } = resolved.value;
+				return h(FlLoading_default, {
+					layout: "vertical",
+					...visual,
+					color: color.value,
+					active: alive.value && toValue(active) && ownGeneration === generation.value
+				});
+			};
+		}
+	});
+	return computed(() => {
+		if (!alive.value || !toValue(active)) return false;
+		return {
+			text: h(Content, { generation: generation.value }),
+			customClass: [ns.b("adapter"), resolved.value.customClass].filter(Boolean).join(" "),
+			background: resolved.value.background
+		};
+	});
+}
+const FlLoading = withInstall(FlLoading_default);
+var loading_default = FlLoading;
+export { FlLoading, loading_default as default, useFlLoading };
+
+//# sourceMappingURL=index.mjs.map