@trade-it/react 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,56 +1,1269 @@
 import { TradeLinkParam, getTradeItErrorMessage, getTradeItErrorMessage as getTradeItErrorMessage$1, getUrlOrigin, getUrlOrigin as getUrlOrigin$1, isTradeItEvent, isTradeItEvent as isTradeItEvent$1, resolveLaunchUrl, resolveLaunchUrl as resolveLaunchUrl$1 } from "@trade-it/core";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 
-//#region src/LoaderCircleSpinner.tsx
-const SPINNER_WRAPPER_SIZE = 44;
-const SPINNER_ICON_SIZE = 32;
-const SPINNER_WRAPPER_STYLE = {
-	width: SPINNER_WRAPPER_SIZE,
-	height: SPINNER_WRAPPER_SIZE,
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "center",
-	animation: "tradeItSdkSpin 0.9s linear infinite",
-	transformOrigin: "50% 50%"
+//#region src/TradeItLogoLoader.tsx
+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 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 paint(ctx, dots) {
+	for (const dot of dots) {
+		const alpha = dot.a ?? 1;
+		ctx.fillStyle = `rgba(11,12,14,${alpha})`;
+		ctx.beginPath();
+		ctx.arc(dot.x, dot.y, dot.r, 0, Math.PI * 2);
+		ctx.fill();
+	}
+}
+function paintLines(ctx, lines) {
+	for (const line of lines) {
+		const alpha = line.a ?? 1;
+		ctx.strokeStyle = `rgba(11,12,14,${alpha})`;
+		ctx.lineWidth = line.w;
+		ctx.beginPath();
+		ctx.moveTo(line.x1, line.y1);
+		ctx.lineTo(line.x2, line.y2);
+		ctx.stroke();
+	}
+}
+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 paintFrame(ctx, frame) {
+	if (frame.lines.length) paintLines(ctx, frame.lines);
+	paint(ctx, frame.dots);
+}
+function radiusScale(size, pow) {
+	return (size / 300) ** pow;
+}
+const TURN = Math.PI * 2;
+function clamp01(x) {
+	return x < 0 ? 0 : x > 1 ? 1 : x;
+}
+function empty() {
+	return {
+		dots: [],
+		lines: []
+	};
+}
+function inkOf(o, zx, edge) {
+	const far = o.inkFar ?? .6;
+	const span = o.inkSpan ?? .5;
+	const rim = o.inkRim ?? .16;
+	return far - span * zx - rim * (1 - edge);
+}
+function expoInOut(x) {
+	if (x <= 0) return 0;
+	if (x >= 1) return 1;
+	return x < .5 ? 2 ** (20 * x - 10) / 2 : (2 - 2 ** (-20 * x + 10)) / 2;
+}
+function morphEase(x, expo) {
+	const smooth = x * x * x * (x * (x * 6 - 15) + 10);
+	return smooth + (expoInOut(x) - smooth) * expo;
+}
+function cruise(x, edge) {
+	const a = Math.min(.49, Math.max(.001, edge));
+	const v = 1 / (1 - a);
+	if (x <= 0) return 0;
+	if (x >= 1) return 1;
+	if (x < a) {
+		const u = x / a;
+		return v * a * (u * u * u - u * u * u * u / 2);
+	}
+	if (x > 1 - a) {
+		const u = (1 - x) / a;
+		return 1 - v * a * (u * u * u - u * u * u * u / 2);
+	}
+	return v * (a * .5 + (x - a));
+}
+function beatAt(t, dwell, morph, turns, settle, expo = .3) {
+	const cycle = dwell + morph * 2;
+	const local = t % cycle;
+	const spinSpan = dwell + morph * settle;
+	const spun = turns * cruise(Math.min(1, local / spinSpan), .22);
+	if (local < dwell) return {
+		m: 0,
+		turns: spun,
+		workT: local,
+		local,
+		cycle
+	};
+	const intoMorph = local - dwell;
+	if (intoMorph < morph) return {
+		m: morphEase(intoMorph / morph, expo),
+		turns: spun,
+		workT: -1,
+		local,
+		cycle
+	};
+	return {
+		m: morphEase(1 - (intoMorph - morph) / morph, expo),
+		turns: spun,
+		workT: -1,
+		local,
+		cycle
+	};
+}
+const frameLogoWait = (size, t, o, logo) => {
+	if (!logo) return empty();
+	const { p, e, n } = logo.points;
+	const seats = logo.seats;
+	const cx = size / 2;
+	const R = size / 2 * .82;
+	const rs = radiusScale(size, o.rsPow ?? .6);
+	const b = beatAt(t, o.dwell ?? 5.5, o.morph ?? 1.9, o.turns ?? 0, o.settle ?? .1, o.expo ?? .3);
+	const m = b.m;
+	const c = 1 - m;
+	const pt = makeProj((o.yawAmp ?? .22) * Math.sin(t * (o.yawRate ?? .3)) * c, (o.tilt ?? .42) * c, cx, cx, R);
+	const rings = Math.max(3, Math.round(o.rings ?? 9));
+	const perRing = Math.ceil(n / rings);
+	const breath = Math.sin(t * (o.breatheRate ?? .75));
+	const amp = o.breatheAmp ?? .2;
+	const height = (o.height ?? 1.5) * (1 + amp * breath);
+	const wide = (o.wide ?? .82) * (1 - amp * .72 * breath);
+	const spin = t * (o.spin ?? .16);
+	const dots = [];
+	for (let i = 0; i < n; i++) {
+		const seat = seats[i];
+		const ring = seat % rings;
+		const u = rings > 1 ? ring / (rings - 1) - .5 : 0;
+		const taper = Math.cos(u * Math.PI * (o.taper ?? .78));
+		const rad = wide * taper;
+		const ang = Math.floor(seat / rings) / perRing * Math.PI * 2 + spin;
+		const bx = Math.cos(ang) * rad;
+		const by = u * height;
+		const bz = Math.sin(ang) * rad;
+		const lx = p[i * 3];
+		const ly = p[i * 3 + 1];
+		const lz = p[i * 3 + 2];
+		const x = lx + (bx - lx) * c;
+		const y = ly + (by - ly) * c;
+		const z3 = lz + (bz - lz) * c;
+		const [px, py, z] = pt(x, y, z3);
+		const zx = clamp01((z + 1) / 2);
+		const loud = clamp01(taper);
+		dots.push({
+			x: px,
+			y: py,
+			z,
+			r: ((o.rBase ?? .55) + (o.rDepth ?? 1.4) * zx + (o.loudR ?? .25) * loud * c) * rs,
+			white: inkOf(o, zx, e[i] * m + (1 - m)) - (o.loudInk ?? .12) * loud * c
+		});
+	}
+	return finalizeFrame(dots, [], o.rMin);
 };
-const SPINNER_SVG_STYLE = {
-	display: "block",
-	width: SPINNER_ICON_SIZE,
-	height: SPINNER_ICON_SIZE,
-	color: "#111827"
+const POINTS = {
+	n: 239,
+	p: Float32Array.from([
+		-.012,
+		.809,
+		.108,
+		-.03,
+		.718,
+		.23,
+		-.132,
+		.666,
+		.237,
+		-.095,
+		.713,
+		.199,
+		-.029,
+		.651,
+		.168,
+		-.11,
+		.61,
+		.163,
+		-.147,
+		.748,
+		.07,
+		-.171,
+		.567,
+		.152,
+		.082,
+		.724,
+		.177,
+		-.243,
+		.587,
+		.226,
+		.041,
+		.622,
+		.135,
+		-.307,
+		.658,
+		.1,
+		-.231,
+		.689,
+		.115,
+		.107,
+		.6,
+		.157,
+		-.281,
+		.514,
+		.152,
+		.217,
+		.591,
+		.226,
+		-.349,
+		.618,
+		.141,
+		-.095,
+		.778,
+		0,
+		.037,
+		.77,
+		.135,
+		.179,
+		.673,
+		.191,
+		-.344,
+		.561,
+		.226,
+		.119,
+		.667,
+		.237,
+		.242,
+		.648,
+		.172,
+		.267,
+		.536,
+		.182,
+		-.186,
+		.638,
+		.23,
+		.174,
+		.733,
+		0,
+		-.204,
+		.519,
+		0,
+		-.417,
+		.603,
+		.1,
+		.294,
+		.589,
+		.223,
+		-.407,
+		.543,
+		.207,
+		.154,
+		.55,
+		.081,
+		.343,
+		.633,
+		.1,
+		.347,
+		.528,
+		.226,
+		.379,
+		.581,
+		.177,
+		.447,
+		.595,
+		.07,
+		.315,
+		.471,
+		.081,
+		.452,
+		.498,
+		.23,
+		-.435,
+		.456,
+		.177,
+		-.337,
+		.488,
+		.141,
+		.397,
+		.447,
+		.135,
+		-.519,
+		.556,
+		.081,
+		-.529,
+		.414,
+		.233,
+		.462,
+		.399,
+		.199,
+		-.481,
+		.498,
+		.215,
+		-.569,
+		.462,
+		.172,
+		-.482,
+		.377,
+		.223,
+		-.568,
+		.523,
+		.1,
+		-.57,
+		.365,
+		.172,
+		.565,
+		.501,
+		.152,
+		.559,
+		.424,
+		.172,
+		.494,
+		.451,
+		.26,
+		.559,
+		.357,
+		.177,
+		.443,
+		.34,
+		.172,
+		-.529,
+		.303,
+		.233,
+		.489,
+		.299,
+		.07,
+		.409,
+		.293,
+		.07,
+		.502,
+		.542,
+		.135,
+		-.58,
+		.26,
+		.157,
+		-.461,
+		.239,
+		.07,
+		.404,
+		.388,
+		.07,
+		-.431,
+		.305,
+		.122,
+		-.593,
+		.203,
+		.122,
+		-.612,
+		.308,
+		.07,
+		-.534,
+		.204,
+		.07,
+		-.035,
+		.316,
+		.108,
+		-.02,
+		.251,
+		.195,
+		.023,
+		.163,
+		.195,
+		-.104,
+		.232,
+		.191,
+		-.054,
+		.149,
+		.29,
+		-.133,
+		.131,
+		.287,
+		-.098,
+		.289,
+		.07,
+		-.16,
+		.219,
+		.163,
+		.054,
+		.219,
+		.07,
+		.025,
+		.077,
+		.244,
+		-.001,
+		0,
+		.312,
+		-.046,
+		.089,
+		.315,
+		-.243,
+		.159,
+		.195,
+		.092,
+		.116,
+		.108,
+		-.05,
+		.03,
+		.29,
+		-.298,
+		.06,
+		.276,
+		-.127,
+		.044,
+		.279,
+		.029,
+		-.062,
+		.312,
+		-.101,
+		-.026,
+		.195,
+		.103,
+		.038,
+		.191,
+		-.061,
+		-.124,
+		.168,
+		.086,
+		-.03,
+		.29,
+		-.182,
+		.096,
+		.301,
+		.199,
+		.08,
+		.115,
+		-.174,
+		-.024,
+		.186,
+		.264,
+		.022,
+		.244,
+		.134,
+		-.082,
+		.312,
+		-.236,
+		.056,
+		.307,
+		-.352,
+		.034,
+		.279,
+		-.045,
+		-.045,
+		.244,
+		.214,
+		-.112,
+		.251,
+		-.183,
+		.16,
+		.226,
+		.223,
+		-.026,
+		.287,
+		.146,
+		-.164,
+		.223,
+		.327,
+		-.051,
+		.244,
+		.129,
+		-.225,
+		.135,
+		-.021,
+		-.173,
+		.191,
+		.16,
+		-.021,
+		.266,
+		.042,
+		-.131,
+		.287,
+		.056,
+		-.198,
+		.24,
+		.244,
+		-.184,
+		.1,
+		.006,
+		-.246,
+		.177,
+		-.282,
+		.202,
+		0,
+		.286,
+		.115,
+		.07,
+		-.299,
+		.121,
+		.199,
+		.286,
+		-.129,
+		.163,
+		.347,
+		.031,
+		.263,
+		-.316,
+		-.018,
+		.254,
+		-.242,
+		-.093,
+		.07,
+		-.253,
+		-.007,
+		.24,
+		-.366,
+		.126,
+		.141,
+		.352,
+		.092,
+		.177,
+		-.217,
+		.227,
+		.07,
+		-.405,
+		.072,
+		.199,
+		-.113,
+		-.086,
+		.115,
+		.344,
+		-.131,
+		.108,
+		-.307,
+		-.077,
+		.152,
+		-.429,
+		.013,
+		.254,
+		.061,
+		-.29,
+		.07,
+		-.003,
+		-.306,
+		.108,
+		.458,
+		.091,
+		.223,
+		-.484,
+		-.028,
+		.276,
+		.263,
+		-.075,
+		.254,
+		.401,
+		.136,
+		.122,
+		.431,
+		-.09,
+		.1,
+		.413,
+		.051,
+		.26,
+		.421,
+		-.023,
+		.226,
+		.512,
+		.027,
+		.226,
+		-.481,
+		.06,
+		.152,
+		-.054,
+		-.22,
+		.07,
+		.505,
+		-.041,
+		.135,
+		.579,
+		.045,
+		.215,
+		.517,
+		.09,
+		.247,
+		.602,
+		.142,
+		.219,
+		.575,
+		-.032,
+		.07,
+		-.38,
+		-.04,
+		.251,
+		-.471,
+		-.091,
+		.203,
+		-.572,
+		.021,
+		.141,
+		-.549,
+		-.038,
+		.251,
+		-.38,
+		-.128,
+		.1,
+		.479,
+		.169,
+		.07,
+		-.671,
+		-.021,
+		.135,
+		.66,
+		.029,
+		.129,
+		-.433,
+		.126,
+		.07,
+		.692,
+		.087,
+		.191,
+		-.64,
+		-.096,
+		.257,
+		.626,
+		.079,
+		.226,
+		.73,
+		.194,
+		.172,
+		-.711,
+		-.176,
+		.172,
+		-.529,
+		-.109,
+		.207,
+		.742,
+		.115,
+		.199,
+		.664,
+		.165,
+		.207,
+		.587,
+		.206,
+		.07,
+		.801,
+		.106,
+		.141,
+		-.742,
+		-.055,
+		.129,
+		-.563,
+		-.165,
+		.122,
+		-.783,
+		-.161,
+		.135,
+		.54,
+		.143,
+		.186,
+		-.7,
+		-.119,
+		.251,
+		-.613,
+		-.039,
+		.211,
+		.761,
+		.059,
+		.07,
+		-.633,
+		-.162,
+		.168,
+		-.478,
+		-.153,
+		.07,
+		.806,
+		.173,
+		.081,
+		.861,
+		.131,
+		.07,
+		-.827,
+		-.099,
+		.135,
+		.645,
+		.223,
+		.07,
+		.574,
+		-.176,
+		.081,
+		.493,
+		-.215,
+		.07,
+		.565,
+		-.281,
+		.172,
+		.519,
+		-.338,
+		.244,
+		.42,
+		-.269,
+		.108,
+		.442,
+		-.356,
+		.172,
+		.502,
+		-.277,
+		.195,
+		.552,
+		-.39,
+		.186,
+		.495,
+		-.416,
+		.251,
+		.415,
+		-.422,
+		.135,
+		.601,
+		-.339,
+		.07,
+		.395,
+		-.493,
+		.226,
+		.483,
+		-.53,
+		.157,
+		.357,
+		-.59,
+		.157,
+		.531,
+		-.486,
+		.191,
+		.316,
+		-.495,
+		.163,
+		.226,
+		-.494,
+		.07,
+		.415,
+		-.55,
+		.186,
+		.358,
+		-.427,
+		.07,
+		.577,
+		-.443,
+		.141,
+		.272,
+		-.554,
+		.226,
+		.198,
+		-.593,
+		.23,
+		.104,
+		-.581,
+		.129,
+		.184,
+		-.703,
+		.1,
+		.135,
+		-.64,
+		.244,
+		.162,
+		-.532,
+		.081,
+		.119,
+		-.726,
+		.129,
+		.035,
+		-.595,
+		.07,
+		.218,
+		-.648,
+		.182,
+		.585,
+		-.519,
+		.07,
+		.015,
+		-.683,
+		.23,
+		.081,
+		-.671,
+		.244,
+		.33,
+		-.648,
+		.07,
+		.039,
+		-.75,
+		.157,
+		-.089,
+		-.662,
+		.24,
+		-.019,
+		-.757,
+		.177,
+		-.064,
+		-.721,
+		.199,
+		-.133,
+		-.701,
+		.172,
+		-.043,
+		-.619,
+		.141,
+		-.125,
+		-.575,
+		.141,
+		-.148,
+		-.644,
+		.244,
+		-.252,
+		-.662,
+		.135,
+		-.192,
+		-.569,
+		.191,
+		-.189,
+		-.715,
+		.1,
+		-.27,
+		-.589,
+		.237,
+		-.29,
+		-.512,
+		.177,
+		-.211,
+		-.504,
+		0,
+		-.325,
+		-.608,
+		.163,
+		-.372,
+		-.563,
+		.199,
+		-.365,
+		-.491,
+		.199,
+		-.454,
+		-.547,
+		.163,
+		-.431,
+		-.48,
+		.223,
+		-.489,
+		-.484,
+		.226,
+		-.514,
+		-.407,
+		.254,
+		-.538,
+		-.302,
+		.1,
+		-.378,
+		-.429,
+		.081,
+		-.391,
+		-.621,
+		.07,
+		-.457,
+		-.301,
+		.141,
+		-.321,
+		-.451,
+		.07,
+		-.457,
+		-.426,
+		.191,
+		-.578,
+		-.491,
+		.152,
+		-.582,
+		-.37,
+		.141,
+		-.413,
+		-.373,
+		.07,
+		-.494,
+		-.353,
+		.219,
+		-.598,
+		-.427,
+		.1,
+		-.514,
+		-.542,
+		.115,
+		.27,
+		-.621,
+		.172,
+		-.105,
+		-.762,
+		.07
+	]),
+	e: Float32Array.from([
+		.1,
+		.457,
+		.486,
+		.343,
+		.243,
+		.229,
+		.043,
+		.2,
+		.271,
+		.443,
+		.157,
+		.086,
+		.114,
+		.214,
+		.2,
+		.443,
+		.171,
+		0,
+		.157,
+		.314,
+		.443,
+		.486,
+		.257,
+		.286,
+		.457,
+		0,
+		0,
+		.086,
+		.429,
+		.371,
+		.057,
+		.086,
+		.443,
+		.271,
+		.043,
+		.057,
+		.457,
+		.271,
+		.171,
+		.157,
+		.057,
+		.471,
+		.343,
+		.4,
+		.257,
+		.429,
+		.086,
+		.257,
+		.2,
+		.257,
+		.586,
+		.271,
+		.257,
+		.471,
+		.043,
+		.043,
+		.157,
+		.214,
+		.043,
+		.043,
+		.129,
+		.129,
+		.043,
+		.043,
+		.1,
+		.329,
+		.329,
+		.314,
+		.729,
+		.714,
+		.043,
+		.229,
+		.043,
+		.514,
+		.843,
+		.857,
+		.329,
+		.1,
+		.729,
+		.657,
+		.671,
+		.843,
+		.329,
+		.314,
+		.243,
+		.729,
+		.786,
+		.114,
+		.3,
+		.514,
+		.843,
+		.814,
+		.671,
+		.514,
+		.543,
+		.443,
+		.714,
+		.429,
+		.514,
+		.157,
+		.314,
+		.614,
+		.714,
+		.5,
+		.086,
+		.271,
+		0,
+		.043,
+		.343,
+		.229,
+		.6,
+		.557,
+		.043,
+		.5,
+		.171,
+		.271,
+		.043,
+		.343,
+		.114,
+		.1,
+		.2,
+		.557,
+		.043,
+		.1,
+		.429,
+		.657,
+		.557,
+		.129,
+		.086,
+		.586,
+		.443,
+		.443,
+		.2,
+		.043,
+		.157,
+		.4,
+		.529,
+		.414,
+		.043,
+		.543,
+		.357,
+		.171,
+		.543,
+		.086,
+		.043,
+		.157,
+		.143,
+		.043,
+		.314,
+		.571,
+		.443,
+		.257,
+		.257,
+		.371,
+		.343,
+		.371,
+		.043,
+		.171,
+		.143,
+		.129,
+		.157,
+		.3,
+		.543,
+		.386,
+		.043,
+		.243,
+		.043,
+		.057,
+		.043,
+		.157,
+		.043,
+		.057,
+		.043,
+		.257,
+		.514,
+		.1,
+		.257,
+		.329,
+		.3,
+		.543,
+		.157,
+		.043,
+		.443,
+		.214,
+		.214,
+		.314,
+		.229,
+		.043,
+		.3,
+		.043,
+		.171,
+		.443,
+		.457,
+		.143,
+		.086,
+		.514,
+		.057,
+		.143,
+		.043,
+		.286,
+		.043,
+		.457,
+		.514,
+		.043,
+		.214,
+		.5,
+		.271,
+		.343,
+		.257,
+		.171,
+		.171,
+		.514,
+		.157,
+		.314,
+		.086,
+		.486,
+		.271,
+		0,
+		.229,
+		.343,
+		.343,
+		.229,
+		.429,
+		.443,
+		.557,
+		.086,
+		.057,
+		.043,
+		.171,
+		.043,
+		.314,
+		.2,
+		.171,
+		.043,
+		.414,
+		.086,
+		.114,
+		.257,
+		.043
+	])
 };
-const SPINNER_KEYFRAMES_CSS = `
-@keyframes tradeItSdkSpin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .tradeit-sdk-spinner {
-    animation: none !important;
-  }
+const OPTS = {
+	dwell: 1,
+	morph: 1.7,
+	expo: .3,
+	settle: .1,
+	turns: 0,
+	yawAmp: .22,
+	yawRate: .3,
+	tilt: .42,
+	rings: 9,
+	height: 1.5,
+	wide: .82,
+	taper: .78,
+	breatheRate: .75,
+	breatheAmp: .2,
+	spin: .16,
+	loudR: .25,
+	loudInk: .12,
+	rBase: .55,
+	rDepth: 1.4,
+	inkFar: .6,
+	inkSpan: .5,
+	inkRim: .16,
+	rsPow: .6,
+	rMin: .3
+};
+function seatMap(points) {
+	const n = points.n;
+	const byLogo = new Uint32Array(n);
+	const bySeat = new Uint32Array(n);
+	const logoAng = new Float32Array(n);
+	const seatAng = new Float32Array(n);
+	for (let i = 0; i < n; i++) {
+		byLogo[i] = i;
+		bySeat[i] = i;
+		logoAng[i] = Math.atan2(points.p[i * 3 + 1], points.p[i * 3]);
+		const [sx, sy] = fibDir(i, n);
+		seatAng[i] = Math.atan2(sy, sx);
+	}
+	byLogo.sort((a, b) => logoAng[a] - logoAng[b]);
+	bySeat.sort((a, b) => seatAng[a] - seatAng[b]);
+	const seats = new Uint32Array(n);
+	for (let k = 0; k < n; k++) seats[byLogo[k]] = bySeat[k];
+	return seats;
 }
-`;
-function LoaderCircleSpinner() {
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: SPINNER_KEYFRAMES_CSS }), /* @__PURE__ */ jsx("div", {
-		className: "tradeit-sdk-spinner",
-		style: SPINNER_WRAPPER_STYLE,
+const BINDING = {
+	points: POINTS,
+	seats: seatMap(POINTS)
+};
+function TradeItLogoLoader({ size = 120 }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		const canvas = ref.current;
+		if (!canvas) return;
+		const dpr = Math.min(2, devicePixelRatio || 1);
+		canvas.width = Math.round(size * dpr);
+		canvas.height = Math.round(size * dpr);
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+		const render = (t) => {
+			ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+			ctx.clearRect(0, 0, size, size);
+			const frame = frameLogoWait(size, t, OPTS, BINDING);
+			paintFrame(ctx, frame);
+		};
+		if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+			render(2.7);
+			return;
+		}
+		let raf = 0;
+		let running = false;
+		const startedAt = performance.now();
+		const loop = (now) => {
+			render((now - startedAt) / 1e3);
+			if (running) raf = requestAnimationFrame(loop);
+		};
+		const start = () => {
+			if (running) return;
+			running = true;
+			raf = requestAnimationFrame(loop);
+		};
+		const stop = () => {
+			running = false;
+			cancelAnimationFrame(raf);
+		};
+		render(0);
+		let visible = true;
+		const io = new IntersectionObserver(([entry]) => {
+			visible = entry.isIntersecting;
+			if (visible && document.visibilityState !== "hidden") start();
+			else stop();
+		});
+		io.observe(canvas);
+		const onVis = () => {
+			if (document.visibilityState === "hidden") stop();
+			else if (visible) start();
+		};
+		document.addEventListener("visibilitychange", onVis);
+		return () => {
+			stop();
+			io.disconnect();
+			document.removeEventListener("visibilitychange", onVis);
+		};
+	}, [size]);
+	return /* @__PURE__ */ jsx("canvas", {
+		ref,
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ jsx("svg", {
-			xmlns: "http://www.w3.org/2000/svg",
-			width: SPINNER_ICON_SIZE,
-			height: SPINNER_ICON_SIZE,
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "2",
-			strokeLinecap: "round",
-			strokeLinejoin: "round",
-			style: SPINNER_SVG_STYLE,
-			children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
-		})
-	})] });
+		style: {
+			width: size,
+			height: size,
+			display: "block"
+		}
+	});
 }
 
 //#endregion
@@ -77,7 +1290,7 @@ function TradeItModalLoader() {
 		"aria-busy": "true",
 		children: /* @__PURE__ */ jsx("div", {
 			style: LOADING_CONTENT_STYLE,
-			children: /* @__PURE__ */ jsx(LoaderCircleSpinner, {})
+			children: /* @__PURE__ */ jsx(TradeItLogoLoader, {})
 		})
 	});
 }
@@ -98,16 +1311,22 @@ const DIALOG_DESKTOP_STYLE = {
 	position: "relative",
 	width: "min(960px, calc(100vw - 24px))",
 	height: "min(760px, calc(100vh - 24px))",
+	boxSizing: "border-box",
 	background: "#fff",
 	borderRadius: 18,
 	boxShadow: "0 24px 80px rgba(2, 6, 23, 0.28)",
 	border: "1px solid rgba(148, 163, 184, 0.35)",
 	overflow: "hidden"
 };
+const CONNECT_DIALOG_DESKTOP_STYLE = {
+	...DIALOG_DESKTOP_STYLE,
+	width: "min(736px, 100%)",
+	height: "min(835px, 100%)"
+};
 const DIALOG_MOBILE_STYLE = {
 	...DIALOG_DESKTOP_STYLE,
-	width: "100vw",
-	height: "100vh",
+	width: "100%",
+	height: "100%",
 	borderRadius: 0,
 	border: 0
 };
@@ -119,9 +1338,12 @@ const CLOSE_BUTTON_STYLE = {
 	width: 34,
 	height: 34,
 	borderRadius: 999,
-	border: "1px solid rgba(148,163,184,0.45)",
-	background: "rgba(255,255,255,0.92)",
-	color: "#0f172a",
+	border: "1px solid rgba(255, 255, 255, 0.22)",
+	background: "rgba(9, 11, 12, 0.64)",
+	color: "#f0f0f2",
+	backdropFilter: "blur(16px)",
+	WebkitBackdropFilter: "blur(16px)",
+	boxShadow: "0 8px 24px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12)",
 	cursor: "pointer",
 	fontSize: 18,
 	lineHeight: "32px",
@@ -223,9 +1445,16 @@ function TradeItModal(props) {
 	if (!isMounted) return null;
 	if (!open && !keepMounted) return null;
 	if (!resolved.url) return null;
-	const dialogStyle = isMobile ? DIALOG_MOBILE_STYLE : DIALOG_DESKTOP_STYLE;
+	const isConnectFlow = props.launch.mode === "connect";
+	let dialogStyle = DIALOG_DESKTOP_STYLE;
+	if (isMobile) dialogStyle = DIALOG_MOBILE_STYLE;
+	else if (isConnectFlow) dialogStyle = CONNECT_DIALOG_DESKTOP_STYLE;
+	let overlayPadding = 12;
+	if (isMobile) overlayPadding = 0;
+	else if (isConnectFlow) overlayPadding = "0 4px";
 	const overlayStyle = {
 		...OVERLAY_STYLE,
+		padding: overlayPadding,
 		zIndex
 	};
 	const dialogLabel = title ?? iframeTitle ?? "Trade It";