@sehv-oss/basketball-upload 1.0.0

package/dist/basketball-upload.js

@@ -0,0 +1,2600 @@
+//#region src/game/config.ts
+/**
+* Physics constants. Lengths are in rim units (`u`, the rim width in pixels)
+* and times in seconds, so a shot behaves the same at any rendered size.
+*
+* Calibrated against the reference design: its aiming dots are 1/15 s apart,
+* advance ≈0.116 u horizontally and lose ≈0.095 u of rise per dot.
+*/
+const PHYSICS = {
+	/**
+	* Fixed simulation step. Preview and flight both advance by exactly this.
+	*/
+	step: 1 / 120,
+	/**
+	* Downward acceleration, u/s².
+	*/
+	gravity: 21,
+	/**
+	* Launch speed per unit of pull, 1/s. Raised per layout by `launchPower`.
+	*/
+	power: 12,
+	/**
+	* Headroom of a full pull over the speed of the assisted shot.
+	*/
+	powerHeadroom: 1.4,
+	/**
+	* Longest pull that still adds speed, u.
+	*/
+	maxPull: 1,
+	/**
+	* Shorter pulls cancel the shot instead of firing it, u.
+	*/
+	minPull: .12,
+	/**
+	* Pull beyond the maximum keeps moving the card, damped by this factor.
+	*/
+	pullStretch: .15,
+	/**
+	* Time between two aiming dots, s.
+	*/
+	dotInterval: 1 / 15,
+	/**
+	* The preview stops after this long when nothing is hit, s.
+	*/
+	maxPreviewTime: 2,
+	/**
+	* A shot still in the air after this long counts as a miss, s.
+	*/
+	maxFlightTime: 5,
+	/**
+	* Collision radius of the card around the rim, u.
+	*/
+	hitRadius: .17,
+	/**
+	* Half the thickness of the rim, u.
+	*/
+	rimRadius: .02,
+	/**
+	* Distance from the card center to the floor and walls, u.
+	*/
+	floorRadius: .35,
+	/**
+	* Card scale when it reaches the hoop: it travels away from the viewer.
+	*/
+	depthScale: .7,
+	/**
+	* A card rising faster than this (u/s) is still in front of the hoop:
+	* the board and the rim only stop cards around the top of their arc or falling.
+	*/
+	hoopDepthRise: 1.5,
+	/**
+	* Velocity kept after touching the board (the orange square).
+	*/
+	board: {
+		x: .25,
+		y: .3
+	},
+	restitution: {
+		rim: .45,
+		floor: .35,
+		wall: .5
+	},
+	/**
+	* Horizontal velocity kept on each floor bounce.
+	*/
+	floorFriction: .8,
+	/**
+	* A missed card stops bouncing after this many floor contacts.
+	*/
+	maxFloorBounces: 2,
+	/**
+	* Assisted shots peak this far above the top of the square, u.
+	*/
+	assistApex: .5,
+	/**
+	* Spin in degrees per second, per u/s of horizontal speed.
+	*/
+	spin: {
+		factor: 160,
+		min: 180,
+		max: 540
+	}
+};
+//#endregion
+//#region src/game/court.ts
+function relative(rectangle, origin) {
+	return {
+		x: rectangle.x - origin.x,
+		y: rectangle.y - origin.y,
+		width: rectangle.width,
+		height: rectangle.height
+	};
+}
+/**
+* Builds a court from client rectangles (`getBoundingClientRect`).
+*/
+function courtFromRectangles(rectangles) {
+	const { host } = rectangles;
+	const rim = relative(rectangles.rim, host);
+	const net = relative(rectangles.net, host);
+	const spot = relative(rectangles.spot, host);
+	return {
+		unit: rim.width,
+		bounds: {
+			x: 0,
+			y: 0,
+			width: host.width,
+			height: host.height
+		},
+		board: relative(rectangles.board, host),
+		square: relative(rectangles.square, host),
+		rim: {
+			left: rim.x,
+			right: rim.x + rim.width,
+			y: rim.y + rim.height / 2
+		},
+		netBottom: net.y + net.height,
+		rest: {
+			x: spot.x + spot.width / 2,
+			y: spot.y + spot.height / 2
+		}
+	};
+}
+/**
+* Middle of the rim, on the rim plane.
+*/
+function rimCenter(court) {
+	return {
+		x: (court.rim.left + court.rim.right) / 2,
+		y: court.rim.y
+	};
+}
+/**
+* Whether `point` is inside `rectangle`, edges included.
+*/
+function contains(rectangle, point) {
+	return point.x >= rectangle.x && point.x <= rectangle.x + rectangle.width && point.y >= rectangle.y && point.y <= rectangle.y + rectangle.height;
+}
+//#endregion
+//#region src/upload/accept.ts
+/**
+* Whether a file matches an `accept` string, with the semantics of
+* `<input type="file" accept>`: comma separated extensions (`.pdf`), MIME
+* types (`application/pdf`) and wildcards (`image/*`). Empty accepts all.
+*/
+function matchesAccept(file, accept) {
+	const tokens = (accept ?? "").split(",").map((token) => token.trim().toLowerCase()).filter(Boolean);
+	if (tokens.length === 0) return true;
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return tokens.some((token) => {
+		if (token === "*" || token === "*/*") return true;
+		if (token.startsWith(".")) return name.endsWith(token);
+		if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+		return type === token;
+	});
+}
+//#endregion
+//#region src/file-types/defaults.ts
+/**
+* Built-in file types, checked after the ones you register.
+*/
+const defaultFileTypes = [
+	{
+		kind: "pdf",
+		match: ".pdf,application/pdf",
+		label: "PDF",
+		color: "#d8374e"
+	},
+	{
+		kind: "image",
+		match: "image/*,.png,.jpg,.jpeg,.gif,.webp,.avif,.svg",
+		color: "#2f7cf6",
+		artwork: "thumbnail"
+	},
+	{
+		kind: "video",
+		match: "video/*",
+		color: "#8b5cf6"
+	},
+	{
+		kind: "audio",
+		match: "audio/*",
+		color: "#e39a0b"
+	},
+	{
+		kind: "sheet",
+		match: ".csv,.tsv,.xls,.xlsx,.ods,.numbers,text/csv",
+		color: "#1f9d55"
+	},
+	{
+		kind: "doc",
+		match: ".doc,.docx,.odt,.rtf,.md,.txt,.pages,text/plain,text/markdown",
+		color: "#2563eb"
+	},
+	{
+		kind: "slides",
+		match: ".ppt,.pptx,.key,.odp",
+		color: "#ea580c"
+	},
+	{
+		kind: "archive",
+		match: ".zip,.rar,.7z,.tar,.gz,.tgz,.bz2,application/zip",
+		label: (file) => file.name.toLowerCase().endsWith(".tar.gz") ? "TGZ" : extensionLabel(file.name, "ZIP"),
+		color: "#6b7280"
+	},
+	{
+		kind: "code",
+		match: ".json,.js,.mjs,.cjs,.ts,.tsx,.jsx,.html,.css,.xml,.yaml,.yml,.py,.go,.rs,.java,.c,.cpp,.sh",
+		color: "#475569"
+	}
+];
+/**
+* The extension in capitals, at most 4 characters, or `fallback`.
+*/
+function extensionLabel(name, fallback) {
+	const dot = name.lastIndexOf(".");
+	return ((dot > 0 ? name.slice(dot + 1) : "") || fallback).slice(0, 4).toUpperCase();
+}
+//#endregion
+//#region src/file-types/registry.ts
+const KIND = /^[a-z][a-z0-9-]*$/;
+/**
+* Registered globally, most recent first.
+*/
+const registered = [];
+/**
+* Throws when a file type cannot be used: its kind ends up in part names.
+*/
+function assertFileType(type) {
+	if (!KIND.test(type.kind)) throw new TypeError(`Invalid file type kind "${type.kind}": use lowercase letters, digits and dashes, starting with a letter.`);
+}
+/**
+* Adds a file type for every `<basketball-upload>` on the page. It wins over the
+* built-in types and over the ones registered before it; types set on an
+* element (`fileTypes`) still win over it. Returns a function that removes it.
+*/
+function registerFileType(type) {
+	assertFileType(type);
+	registered.unshift(type);
+	return () => {
+		const index = registered.indexOf(type);
+		if (index !== -1) registered.splice(index, 1);
+	};
+}
+function matches(type, file) {
+	return typeof type.match === "function" ? type.match(file) : matchesAccept(file, type.match);
+}
+function resolve$1(type, file) {
+	const label = typeof type.label === "function" ? type.label(file) : type.label ?? extensionLabel(file.name, type.kind);
+	return {
+		kind: type.kind,
+		label,
+		color: type.color ?? null,
+		artwork: type.artwork ?? "lines"
+	};
+}
+/**
+* The look of a file: the first match among `instanceTypes`, then the
+* registered types, then the built-in ones, then a neutral `file`.
+*/
+function resolveFileType(file, instanceTypes = []) {
+	for (const types of [
+		instanceTypes,
+		registered,
+		defaultFileTypes
+	]) for (const type of types) if (matches(type, file)) return resolve$1(type, file);
+	return {
+		kind: "file",
+		label: extensionLabel(file.name, "FILE"),
+		color: null,
+		artwork: "lines"
+	};
+}
+//#endregion
+//#region src/upload/event-emitter.ts
+/**
+* Minimal typed emitter. Listeners run synchronously, in subscription order.
+*/
+var EventEmitter = class {
+	#listeners = /* @__PURE__ */ new Map();
+	/**
+	* Subscribes to an event. Returns a function that unsubscribes.
+	*/
+	on(type, listener) {
+		let listeners = this.#listeners.get(type);
+		if (!listeners) {
+			listeners = /* @__PURE__ */ new Set();
+			this.#listeners.set(type, listeners);
+		}
+		listeners.add(listener);
+		return () => {
+			listeners.delete(listener);
+		};
+	}
+	/**
+	* Calls the listeners of an event with its payload.
+	*/
+	emit(type, detail) {
+		const listeners = this.#listeners.get(type);
+		if (!listeners) return;
+		for (const listener of [...listeners]) listener(detail);
+	}
+};
+/**
+* Files accepted by the hoop, and their uploads. Items are immutable
+* snapshots; every change replaces the item and emits `change`.
+*/
+var UploadQueue = class extends EventEmitter {
+	#concurrency;
+	#items = [];
+	#controllers = /* @__PURE__ */ new Map();
+	#nextId = 0;
+	constructor(options = {}) {
+		super();
+		this.uploader = options.uploader ?? null;
+		this.#concurrency = normalizeConcurrency(options.concurrency);
+	}
+	/**
+	* Every item, in the order the files were added.
+	*/
+	get items() {
+		return this.#items;
+	}
+	/**
+	* Uploads running at the same time: a whole number from 1, otherwise
+	* `DEFAULT_CONCURRENCY`. Raising it starts queued uploads at once.
+	*/
+	get concurrency() {
+		return this.#concurrency;
+	}
+	set concurrency(value) {
+		this.#concurrency = normalizeConcurrency(value);
+		this.#pump();
+	}
+	/**
+	* The current snapshot of an item.
+	*/
+	get(id) {
+		return this.#items.find((item) => item.id === id);
+	}
+	/**
+	* Adds a file: `queued` with an uploader, which starts as soon as a slot is
+	* free, otherwise `ready`. Returns the item as it is once added, possibly
+	* already `uploading`.
+	*/
+	add(file) {
+		this.#nextId += 1;
+		const id = `upload-${this.#nextId}`;
+		const item = {
+			id,
+			file,
+			status: this.uploader ? "queued" : "ready",
+			progress: this.uploader ? 0 : 1,
+			response: void 0,
+			error: void 0
+		};
+		this.#items = [...this.#items, item];
+		this.emit("change", this.#items);
+		this.#pump();
+		return this.get(id) ?? item;
+	}
+	/**
+	* Uploads a failed item again. Returns whether there was one to retry.
+	*/
+	retry(id) {
+		const item = this.get(id);
+		if (!item || item.status !== "error" || !this.uploader) return false;
+		this.#update(id, {
+			status: "queued",
+			progress: 0,
+			error: void 0
+		});
+		this.#pump();
+		return true;
+	}
+	/**
+	* Removes an item, aborting its upload.
+	*/
+	remove(id) {
+		if (!this.get(id)) return false;
+		this.#controllers.get(id)?.abort();
+		this.#controllers.delete(id);
+		this.#items = this.#items.filter((item) => item.id !== id);
+		this.emit("change", this.#items);
+		this.#pump();
+		return true;
+	}
+	/**
+	* Removes every item, aborting the uploads in flight.
+	*/
+	clear() {
+		for (const controller of this.#controllers.values()) controller.abort();
+		this.#controllers.clear();
+		if (this.#items.length === 0) return;
+		this.#items = [];
+		this.emit("change", this.#items);
+	}
+	#pump() {
+		if (!this.uploader) return;
+		let active = this.#items.filter((item) => item.status === "uploading").length;
+		for (const item of this.#items) {
+			if (active >= this.#concurrency) return;
+			if (item.status !== "queued") continue;
+			this.#start(item, this.uploader);
+			active += 1;
+		}
+	}
+	#start(item, uploader) {
+		const { id, file } = item;
+		const controller = new AbortController();
+		const { signal } = controller;
+		this.#controllers.set(id, controller);
+		this.#update(id, {
+			status: "uploading",
+			progress: 0
+		});
+		this.#emitItem("start", id);
+		const onProgress = (loaded, total = file.size) => {
+			if (signal.aborted) return;
+			const progress = total > 0 ? Math.min(1, Math.max(0, loaded / total)) : 0;
+			this.#update(id, { progress });
+			this.#emitItem("progress", id);
+		};
+		let upload;
+		try {
+			upload = Promise.resolve(uploader(file, {
+				signal,
+				onProgress
+			}));
+		} catch (error) {
+			upload = Promise.reject(error);
+		}
+		upload.then((response) => {
+			if (signal.aborted) return;
+			this.#controllers.delete(id);
+			this.#update(id, {
+				status: "uploaded",
+				progress: 1,
+				response
+			});
+			this.#emitItem("success", id);
+			this.#pump();
+		}, (error) => {
+			if (signal.aborted) return;
+			this.#controllers.delete(id);
+			this.#update(id, {
+				status: "error",
+				error
+			});
+			this.#emitItem("error", id);
+			this.#pump();
+		});
+	}
+	#update(id, patch) {
+		this.#items = this.#items.map((item) => item.id === id ? {
+			...item,
+			...patch
+		} : item);
+		this.emit("change", this.#items);
+	}
+	#emitItem(type, id) {
+		const item = this.get(id);
+		if (item) this.emit(type, item);
+	}
+};
+function normalizeConcurrency(value) {
+	return value !== void 0 && Number.isFinite(value) && value >= 1 ? Math.floor(value) : 3;
+}
+//#endregion
+//#region src/game/simulate.ts
+/**
+* A body at `position`, leaving at `velocity` (pixels per second).
+*/
+function launch(position, velocity) {
+	return {
+		x: position.x,
+		y: position.y,
+		velocityX: velocity.x,
+		velocityY: velocity.y,
+		steps: 0,
+		boarded: false
+	};
+}
+/**
+* Seconds since launch.
+*/
+function timeOf(body) {
+	return body.steps * PHYSICS.step;
+}
+/**
+* Advances a body by one fixed step (`PHYSICS.step`).
+*/
+function step(body, court) {
+	const timeStep = PHYSICS.step;
+	const { unit } = court;
+	const events = [];
+	let velocityX = body.velocityX;
+	let velocityY = body.velocityY + PHYSICS.gravity * unit * timeStep;
+	let x = body.x + velocityX * timeStep;
+	let y = body.y + velocityY * timeStep;
+	let boarded = body.boarded;
+	const steps = body.steps + 1;
+	const { left, right, y: rimY } = court.rim;
+	const center = rimCenter(court).x;
+	const hit = PHYSICS.hitRadius * unit;
+	const atHoopDepth = body.velocityY > -PHYSICS.hoopDepthRise * unit;
+	if (body.y < rimY && y >= rimY) {
+		const fraction = (rimY - body.y) / (y - body.y);
+		const crossX = body.x + (x - body.x) * fraction;
+		if (Math.abs(crossX - center) < (right - left) / 2 - hit * .6) return {
+			body: {
+				x: crossX,
+				y: rimY,
+				velocityX,
+				velocityY,
+				steps,
+				boarded
+			},
+			events: ["score"]
+		};
+	}
+	const reach = hit + PHYSICS.rimRadius * unit;
+	for (const end of atHoopDepth ? [left, right] : []) {
+		const offsetX = x - end;
+		const offsetY = y - rimY;
+		const distance = Math.hypot(offsetX, offsetY);
+		if (distance >= reach || distance === 0) continue;
+		const normalX = offsetX / distance;
+		const normalY = offsetY / distance;
+		x = end + normalX * reach;
+		y = rimY + normalY * reach;
+		const along = velocityX * normalX + velocityY * normalY;
+		if (along < 0) {
+			velocityX -= (1 + PHYSICS.restitution.rim) * along * normalX;
+			velocityY -= (1 + PHYSICS.restitution.rim) * along * normalY;
+		}
+		events.push("rim");
+	}
+	if (!boarded && atHoopDepth && contains(court.square, {
+		x,
+		y
+	})) {
+		boarded = true;
+		velocityX *= PHYSICS.board.x;
+		velocityY *= PHYSICS.board.y;
+		events.push("board");
+	}
+	const { bounds } = court;
+	const edge = PHYSICS.floorRadius * unit;
+	const floor = bounds.y + bounds.height - edge;
+	if (y > floor) {
+		y = floor;
+		if (velocityY > 0) velocityY = -velocityY * PHYSICS.restitution.floor;
+		velocityX *= PHYSICS.floorFriction;
+		events.push("floor");
+	}
+	if (x < bounds.x + edge) {
+		x = bounds.x + edge;
+		velocityX = Math.abs(velocityX) * PHYSICS.restitution.wall;
+		events.push("wall");
+	} else if (x > bounds.x + bounds.width - edge) {
+		x = bounds.x + bounds.width - edge;
+		velocityX = -Math.abs(velocityX) * PHYSICS.restitution.wall;
+		events.push("wall");
+	}
+	if (y < bounds.y + edge && velocityY < 0) {
+		y = bounds.y + edge;
+		velocityY = Math.abs(velocityY) * PHYSICS.restitution.wall;
+		events.push("wall");
+	}
+	return {
+		body: {
+			x,
+			y,
+			velocityX,
+			velocityY,
+			steps,
+			boarded
+		},
+		events
+	};
+}
+/**
+* Runs the very simulation the flight will run, until its first event.
+* The dots are therefore exactly where the card is going to be.
+*/
+function previewPath(start, court) {
+	const every = Math.round(PHYSICS.dotInterval / PHYSICS.step);
+	const limit = Math.round(PHYSICS.maxPreviewTime / PHYSICS.step);
+	const dots = [];
+	let body = start;
+	while (body.steps < limit) {
+		const result = step(body, court);
+		body = result.body;
+		const [event] = result.events;
+		if (event) {
+			dots.push({
+				x: body.x,
+				y: body.y,
+				steps: body.steps
+			});
+			return {
+				dots,
+				end: event,
+				steps: body.steps
+			};
+		}
+		if (body.steps % every === 0) dots.push({
+			x: body.x,
+			y: body.y,
+			steps: body.steps
+		});
+	}
+	return {
+		dots,
+		end: null,
+		steps: body.steps
+	};
+}
+//#endregion
+//#region src/game/vector.ts
+function scale(vector, factor) {
+	return {
+		x: vector.x * factor,
+		y: vector.y * factor
+	};
+}
+function length(vector) {
+	return Math.hypot(vector.x, vector.y);
+}
+/**
+* `vector` turned by `degrees`, clockwise on screen (y points down).
+*/
+function rotate(vector, degrees) {
+	const radians = degrees * Math.PI / 180;
+	const cos = Math.cos(radians);
+	const sin = Math.sin(radians);
+	return {
+		x: vector.x * cos - vector.y * sin,
+		y: vector.x * sin + vector.y * cos
+	};
+}
+/**
+* `vector` shortened to `max` when longer; unchanged otherwise.
+*/
+function limit(vector, max) {
+	const size = length(vector);
+	return size > max ? scale(vector, max / size) : vector;
+}
+//#endregion
+//#region src/game/slingshot.ts
+/**
+* Where the card is drawn while pulled: it follows the pointer up to the
+* maximum pull, then only by a fraction of the extra distance.
+*/
+function stretchPull(pull, unit) {
+	const max = PHYSICS.maxPull * unit;
+	const size = length(pull);
+	if (size <= max) return pull;
+	return scale(pull, (max + (size - max) * PHYSICS.pullStretch) / size);
+}
+/**
+* Pulls shorter than this cancel the shot.
+*/
+function isPullEnough(pull, unit) {
+	return length(pull) >= PHYSICS.minPull * unit;
+}
+/**
+* Launch velocity of a pull, in px/s: opposite to the pull, like a slingshot.
+*/
+function pullToVelocity(pull, unit, power) {
+	return scale(limit(pull, PHYSICS.maxPull * unit), -power);
+}
+/**
+* Aiming with the keyboard: `pull` turned by `degrees` (clockwise on screen)
+* and lengthened by `extra` rim units, between the shortest and the longest pull.
+*/
+function steerPull(pull, degrees, extra, unit) {
+	const size = length(pull);
+	const steered = Math.min(PHYSICS.maxPull * unit, Math.max(PHYSICS.minPull * unit, size + extra * unit));
+	return scale(rotate(pull, degrees), steered / size);
+}
+/**
+* Velocity, in px/s, of a shot from `start` that peaks above the square and
+* comes down on the center of the rim. Used for keyboard shots, and to size
+* the slingshot to the layout.
+*/
+function solveAssistedShot(start, court) {
+	const gravity = PHYSICS.gravity * court.unit;
+	const target = rimCenter(court);
+	const apex = Math.min(start.y, court.square.y) - PHYSICS.assistApex * court.unit;
+	const rise = start.y - apex;
+	const fall = target.y - apex;
+	const time = Math.sqrt(2 * rise / gravity) + Math.sqrt(2 * fall / gravity);
+	return {
+		x: (target.x - start.x) / time,
+		y: -Math.sqrt(2 * gravity * rise)
+	};
+}
+/**
+* The pull that launches the assisted shot from where cards rest.
+*/
+function assistedPull(court) {
+	return scale(solveAssistedShot(court.rest, court), -1 / launchPower(court));
+}
+/**
+* Speed per unit of pull for this layout: at least the default, and enough
+* for a full pull to comfortably reach the hoop from where cards rest.
+*/
+function launchPower(court) {
+	const needed = length(solveAssistedShot(court.rest, court));
+	return Math.max(PHYSICS.power, needed * PHYSICS.powerHeadroom / (PHYSICS.maxPull * court.unit));
+}
+/**
+* Spin in degrees per second for a launch velocity in px/s.
+*/
+function spinFor(velocity, unit) {
+	const speed = Math.abs(velocity.x) / unit * PHYSICS.spin.factor;
+	const spin = Math.min(PHYSICS.spin.max, Math.max(PHYSICS.spin.min, speed));
+	return velocity.x < 0 ? -spin : spin;
+}
+//#endregion
+//#region src/element/motion.ts
+/**
+* Whether the user asked for reduced motion. `false` where `matchMedia` is
+* missing.
+*/
+function prefersReducedMotion() {
+	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/**
+* The individual transform properties of a pose, for a box of the given size.
+*/
+function poseStyle(pose, width, height) {
+	return {
+		translate: `${pose.x - width / 2}px ${pose.y - height / 2}px`,
+		rotate: `${pose.rotation}deg`,
+		scale: String(pose.scale)
+	};
+}
+/**
+* Runs a Web Animation and resolves when it ends or is cancelled.
+* Resolves at once where the Web Animations API is missing.
+*/
+async function play(element, keyframes, options = {}) {
+	if (typeof element.animate !== "function") return;
+	const { commit = false, ...timing } = options;
+	const animation = element.animate(keyframes, commit ? {
+		...timing,
+		fill: "forwards"
+	} : timing);
+	try {
+		await animation.finished;
+	} catch {
+		return;
+	}
+	if (!commit) return;
+	try {
+		animation.commitStyles();
+	} catch {}
+	animation.cancel();
+}
+/**
+* The nearest whole turn, so a spinning card settles upright without unwinding.
+*/
+function uprightOf(rotation) {
+	return Math.round(rotation / 360) * 360;
+}
+/**
+* Cards lift a little while held.
+*/
+const GRAB_SCALE = 1.04;
+/**
+* Tilt while pulling, in degrees per rim unit of horizontal pull.
+*/
+const PULL_TILT = 14;
+/**
+* What each arrow does to the keyboard aim: degrees to turn it by, and rim
+* units to lengthen its pull by.
+*/
+const STEERING = {
+	ArrowLeft: [-2, 0],
+	ArrowRight: [2, 0],
+	ArrowUp: [0, .05],
+	ArrowDown: [0, -.05]
+};
+/**
+* Rotation of a card pulled by `pull`: it leans back against the pull.
+*/
+function tiltOf(pull, unit) {
+	return Math.max(-1, Math.min(1, pull.x / unit)) * PULL_TILT;
+}
+/**
+* Aiming with the pointer or the keyboard, assisted shots, and the flight of
+* the card.
+*/
+var ShotController = class {
+	#host;
+	#card = null;
+	#frame = 0;
+	#endAim = null;
+	constructor(host) {
+		this.#host = host;
+	}
+	/**
+	* Starts aiming: the card follows the pointer like a slingshot pouch.
+	*/
+	grab(card, event) {
+		if (this.#card || event.button !== 0) return;
+		const court = this.#host.measure();
+		if (!court) return;
+		event.preventDefault();
+		const { element } = card;
+		try {
+			element.setPointerCapture(event.pointerId);
+		} catch {}
+		const { signal, aim, end } = this.#takeAim(card, court, { follow: true });
+		signal.addEventListener("abort", () => {
+			if (element.hasPointerCapture(event.pointerId)) element.releasePointerCapture(event.pointerId);
+		});
+		const origin = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		element.addEventListener("pointermove", (moved) => {
+			if (moved.pointerId !== event.pointerId) return;
+			aim({
+				x: moved.clientX - origin.x,
+				y: moved.clientY - origin.y
+			});
+		}, { signal });
+		element.addEventListener("pointerup", (released) => {
+			if (released.pointerId === event.pointerId) end(true);
+		}, { signal });
+		element.addEventListener("pointercancel", (cancelled) => {
+			if (cancelled.pointerId === event.pointerId) end(false);
+		}, { signal });
+		element.addEventListener("lostpointercapture", (lost) => {
+			if (lost.pointerId === event.pointerId) end(false);
+		}, { signal });
+	}
+	/**
+	* Starts aiming from the keyboard, at the assisted shot: the arrows turn it
+	* and change its strength, and releasing the key that started it shoots.
+	*/
+	hold(card, event) {
+		if (this.#card || event.repeat) return;
+		const court = this.#host.measure();
+		if (!court) return;
+		const { element } = card;
+		const { signal, aim, end } = this.#takeAim(card, court, { follow: false });
+		let pull = assistedPull(court);
+		aim(pull);
+		element.addEventListener("keydown", (pressed) => {
+			const steering = STEERING[pressed.key];
+			if (!steering) return;
+			pressed.preventDefault();
+			pull = steerPull(pull, steering[0], steering[1], court.unit);
+			aim(pull);
+		}, { signal });
+		element.addEventListener("keyup", (released) => {
+			if (released.key === event.key) end(true);
+		}, { signal });
+		element.addEventListener("blur", () => end(false), { signal });
+	}
+	/**
+	* Drops the current aim; the card goes back to the court.
+	*/
+	cancelAim() {
+		this.#endAim?.();
+	}
+	/**
+	* A perfect shot from the court, for `shoot()`.
+	*/
+	shoot(card) {
+		if (this.#card) return false;
+		const court = this.#host.measure();
+		if (!court) return false;
+		this.#card = card;
+		const pose = {
+			...court.rest,
+			rotation: -6,
+			scale: 1
+		};
+		card.place(pose);
+		const body = launch(pose, solveAssistedShot(court.rest, court));
+		this.#host.trajectory.show(previewPath(body, court).dots, court.unit);
+		this.#host.launched(card);
+		this.#fly(card, body, pose.rotation, court);
+		return true;
+	}
+	/**
+	* Stops whatever is going on, leaving the card where it is.
+	*/
+	stop() {
+		this.#endAim?.();
+		cancelAnimationFrame(this.#frame);
+		this.#frame = 0;
+		const card = this.#card;
+		this.#card = null;
+		this.#host.trajectory.clear();
+		this.#host.setFlying(false);
+		this.#host.setOverBoard(false);
+		return card;
+	}
+	#fly(card, start, rotation, court) {
+		if (prefersReducedMotion()) {
+			this.#card = null;
+			this.#host.trajectory.clear();
+			this.#host.scored(card, {
+				x: start.x,
+				y: start.y,
+				rotation,
+				scale: 1
+			}, court);
+			return;
+		}
+		this.#host.setFlying(true);
+		const preview = previewPath(start, court);
+		const depthSteps = preview.end === "board" || preview.end === "rim" || preview.end === "score" ? Math.max(1, preview.steps) : Math.round(.6 / PHYSICS.step);
+		let body = start;
+		let angle = rotation;
+		let spin = spinFor({
+			x: start.velocityX,
+			y: start.velocityY
+		}, court.unit);
+		let bounces = 0;
+		let carry = 0;
+		let last = performance.now();
+		const pose = () => ({
+			x: body.x,
+			y: body.y,
+			rotation: angle,
+			scale: 1 - (1 - PHYSICS.depthScale) * Math.min(1, body.steps / depthSteps)
+		});
+		const finish = (scored) => {
+			this.#frame = 0;
+			this.#host.trajectory.clear();
+			this.#host.setFlying(false);
+			this.#host.setOverBoard(false);
+			const final = pose();
+			card.place(final);
+			if (scored) {
+				this.#card = null;
+				this.#host.scored(card, final, court);
+				return;
+			}
+			this.#returnToRest(card, final, court).then(() => {
+				this.#card = null;
+				this.#host.missed(card);
+			});
+		};
+		const frame = (now) => {
+			carry += Math.min(.1, Math.max(0, (now - last) / 1e3));
+			last = now;
+			while (carry >= PHYSICS.step) {
+				carry -= PHYSICS.step;
+				const result = step(body, court);
+				body = result.body;
+				angle += spin * PHYSICS.step;
+				if (result.events.includes("score")) {
+					finish(true);
+					return;
+				}
+				if (result.events.includes("board") || result.events.includes("rim")) spin *= .6;
+				if (result.events.includes("floor")) {
+					bounces += 1;
+					spin *= .5;
+				}
+				if (bounces > PHYSICS.maxFloorBounces || timeOf(body) > PHYSICS.maxFlightTime) {
+					finish(false);
+					return;
+				}
+			}
+			card.place(pose());
+			this.#host.trajectory.hideBefore(body.steps);
+			this.#host.setOverBoard(contains(court.board, body));
+			this.#frame = requestAnimationFrame(frame);
+		};
+		this.#frame = requestAnimationFrame(frame);
+	}
+	/**
+	* Holds `card` and draws the shot of each pull it is given, until the aim
+	* ends. With `follow`, the card moves with the pull; otherwise it stays on
+	* its spot.
+	*/
+	#takeAim(card, court, { follow }) {
+		this.#card = card;
+		this.#host.setAiming(true);
+		const power = launchPower(court);
+		const listeners = new AbortController();
+		let pull = {
+			x: 0,
+			y: 0
+		};
+		let pose = {
+			...court.rest,
+			rotation: -6,
+			scale: GRAB_SCALE
+		};
+		card.place(pose);
+		const aim = (to) => {
+			pull = to;
+			const shown = stretchPull(pull, court.unit);
+			pose = {
+				x: court.rest.x + (follow ? shown.x : 0),
+				y: court.rest.y + (follow ? shown.y : 0),
+				rotation: -6 + tiltOf(shown, court.unit),
+				scale: GRAB_SCALE
+			};
+			card.place(pose);
+			if (isPullEnough(pull, court.unit)) {
+				const body = launch(pose, pullToVelocity(pull, court.unit, power));
+				this.#host.trajectory.show(previewPath(body, court).dots, court.unit);
+			} else this.#host.trajectory.clear();
+		};
+		const end = (shoot) => {
+			listeners.abort();
+			this.#endAim = null;
+			this.#host.setAiming(false);
+			if (shoot && isPullEnough(pull, court.unit)) {
+				const body = launch(pose, pullToVelocity(pull, court.unit, power));
+				this.#host.launched(card);
+				this.#fly(card, body, pose.rotation, court);
+				return;
+			}
+			this.#host.trajectory.clear();
+			this.#returnToRest(card, pose, court).then(() => {
+				this.#card = null;
+			});
+		};
+		this.#endAim = () => end(false);
+		return {
+			signal: listeners.signal,
+			aim,
+			end
+		};
+	}
+	async #returnToRest(card, from, court) {
+		const rest = {
+			...court.rest,
+			rotation: -6,
+			scale: 1
+		};
+		const { width, height } = card.size();
+		await play(card.element, [poseStyle(from, width, height), poseStyle(rest, width, height)], {
+			duration: prefersReducedMotion() ? 0 : 520,
+			easing: "cubic-bezier(0.34, 1.4, 0.64, 1)",
+			commit: true
+		});
+		card.release();
+	}
+};
+//#endregion
+//#region src/element/dom.ts
+/**
+* An HTML element with its attributes and children.
+*/
+function createElement(tag, attributes = {}, children = []) {
+	const element = document.createElement(tag);
+	for (const [name, value] of Object.entries(attributes)) element.setAttribute(name, value);
+	element.append(...children);
+	return element;
+}
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+/**
+* An SVG element with its attributes and children, in the SVG namespace.
+*/
+function createSvgElement(tag, attributes = {}, children = []) {
+	const element = document.createElementNS(SVG_NAMESPACE, tag);
+	for (const [name, value] of Object.entries(attributes)) element.setAttribute(name, String(value));
+	element.append(...children);
+	return element;
+}
+const icons = {
+	upload: "M12 15V4.5m0 0L8 8.5m4-4 4 4M5 14v3.5A2.5 2.5 0 0 0 7.5 20h9a2.5 2.5 0 0 0 2.5-2.5V14",
+	check: "M7.5 12.5l3 3 6-6.5",
+	retry: "M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4.5v4h-4"
+};
+/**
+* A 24×24 stroked icon, hidden from assistive technology.
+*/
+function icon(name, attributes = {}) {
+	return createSvgElement("svg", {
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		focusable: "false",
+		class: "icon",
+		...attributes
+	}, [createSvgElement("path", { d: icons[name] })]);
+}
+/**
+* Replaces the children of a slot: its fallback content.
+*/
+function setFallback(slot, text) {
+	if (slot.textContent !== text) slot.textContent = text;
+}
+//#endregion
+//#region src/element/messages.ts
+/**
+* The copy of the reference design, in English.
+*/
+const defaultMessages = {
+	title: "Upload files",
+	description: "Drag and drop, or take the shot.",
+	prompt: "Drop files here",
+	hint: "or take the shot",
+	dropzone: "Choose files to upload",
+	counter: "Uploaded",
+	shoot: (name) => `Shoot ${name}`,
+	ready: "Ready",
+	queued: "Waiting…",
+	uploading: "Uploading…",
+	uploaded: "Uploaded",
+	failed: "Upload failed",
+	retry: (name) => `Retry ${name}`,
+	progress: (name) => `${name} upload progress`,
+	required: "Add at least one file.",
+	scored: (name) => `${name}: nothing but net.`,
+	missed: (name) => `Missed ${name}. Take the shot again.`,
+	rejected: (name, reason) => reason === "type" ? `${name} is not an accepted file type.` : reason === "size" ? `${name} is too large.` : `${name} is one file too many.`,
+	complete: (name) => `${name} uploaded.`,
+	error: (name) => `${name} failed to upload.`
+};
+//#endregion
+//#region src/element/styles/styles.ts
+const SOURCES = [
+	"@layer tokens, reset, layout, components, states, motion;\n",
+	"@layer tokens {\n  :host {\n    color-scheme: light dark;\n\n    --_background: var(\n      --basketball-upload-background,\n      light-dark(#eff1f5, #0f1115)\n    );\n    --_foreground: var(\n      --basketball-upload-foreground,\n      light-dark(#0f1115, #f4f5f7)\n    );\n    --_muted-foreground: var(\n      --basketball-upload-muted-foreground,\n      light-dark(#6b6f78, #a3a8b2)\n    );\n    --_subtle-foreground: var(\n      --basketball-upload-subtle-foreground,\n      light-dark(#989a9f, #7c818b)\n    );\n    --_surface: var(--basketball-upload-surface, light-dark(#ffffff, #181b21));\n    --_border: var(--basketball-upload-border, light-dark(#cbccd1, #3a3f48));\n    --_radius: var(--basketball-upload-radius, 1.125rem);\n\n    --_accent: var(--basketball-upload-accent, light-dark(#f0612e, #f26a39));\n    --_accent-strong: var(\n      --basketball-upload-accent-strong,\n      light-dark(#bd4d19, #c4521f)\n    );\n    --_accent-surface: var(\n      --basketball-upload-accent-surface,\n      light-dark(#fff4ef, color-mix(in oklab, #f26a39 14%, #181b21))\n    );\n    --_trajectory: var(\n      --basketball-upload-trajectory,\n      color-mix(in oklab, var(--_accent) 60%, transparent)\n    );\n    --_net: var(--basketball-upload-net, light-dark(#a9abb3, #6b717c));\n\n    --_counter-background: var(\n      --basketball-upload-counter-background,\n      light-dark(#e3e7ed, #232730)\n    );\n    --_track: var(--basketball-upload-track, light-dark(#e6e8ec, #2a2e36));\n    --_success: var(--basketball-upload-success, light-dark(#2fb06d, #34c07a));\n    --_danger: var(--basketball-upload-danger, light-dark(#d8374e, #f0606f));\n\n    --_file-surface: var(--basketball-upload-file-surface, #ffffff);\n    --_file-line: var(--basketball-upload-file-line, #e4e5e9);\n    --_file-fold: var(--basketball-upload-file-fold, #e9eaee);\n    --_file-badge: var(--basketball-upload-file-badge, #6b7280);\n\n    --_shadow: var(\n      --basketball-upload-shadow,\n      0 1px 2px rgb(15 17 21 / 0.04),\n      0 0.5rem 1.5rem rgb(15 17 21 / 0.07)\n    );\n    --_focus-ring: var(\n      --basketball-upload-focus-ring,\n      2px solid var(--_accent)\n    );\n    --_font-family: var(\n      --basketball-upload-font-family,\n      Inter,\n      ui-sans-serif,\n      system-ui,\n      sans-serif\n    );\n\n    --_gutter: var(--basketball-upload-gutter, clamp(1.25rem, 8cqi, 3.75rem));\n    --_hoop-size: var(\n      --basketball-upload-hoop-size,\n      min(25rem, 100cqi - 2 * var(--_gutter))\n    );\n    --_card-width: calc(var(--_hoop-size) * 0.2375);\n    --_card-height: calc(var(--_hoop-size) * 0.2875);\n  }\n\n  :host([theme='light']) {\n    color-scheme: light;\n  }\n\n  :host([theme='dark']) {\n    color-scheme: dark;\n  }\n}\n",
+	"@layer reset {\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  h2,\n  p,\n  ul {\n    margin: 0;\n    padding: 0;\n  }\n\n  ul {\n    list-style: none;\n  }\n\n  button {\n    margin: 0;\n    padding: 0;\n    font: inherit;\n    color: inherit;\n    background: none;\n    border: 0;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  img {\n    display: block;\n    max-inline-size: 100%;\n  }\n\n  svg {\n    display: block;\n    overflow: visible;\n  }\n\n  .icon {\n    fill: none;\n    stroke: currentColor;\n    stroke-width: 1.75;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n  }\n\n  .visually-hidden {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n  }\n}\n",
+	"@layer layout {\n  :host {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    container-type: inline-size;\n    min-block-size: 36rem;\n    font-family: var(--_font-family);\n    font-size: 1rem;\n    line-height: 1.4;\n    color: var(--_foreground);\n    background: var(--_background);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .frame {\n    position: relative;\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    padding: var(--_gutter);\n  }\n\n  .header {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: 0.75rem 1rem;\n  }\n\n  .hoop {\n    position: relative;\n    flex: none;\n    align-self: center;\n    inline-size: var(--_hoop-size);\n    aspect-ratio: 400 / 268;\n    margin-block-start: calc(var(--_hoop-size) * 0.1125);\n  }\n\n  .court {\n    position: relative;\n    flex: 1 1 auto;\n    min-block-size: calc(var(--_hoop-size) * 0.96);\n  }\n\n  .frame:has(.list:not([hidden])) {\n    padding-block-end: calc(var(--_gutter) * 0.65);\n\n    & .court {\n      min-block-size: calc(var(--_hoop-size) * 0.8);\n    }\n  }\n\n  .spot {\n    position: absolute;\n    inset-inline-start: calc(var(--_hoop-size) * 0.13);\n    inset-block-end: calc(var(--_hoop-size) * 0.3);\n    inline-size: var(--_card-width);\n    block-size: var(--_card-height);\n    pointer-events: none;\n  }\n\n  .list {\n    display: grid;\n    flex: none;\n    gap: 0.75rem;\n  }\n\n  .layer {\n    position: absolute;\n    inset: 0;\n    z-index: 2;\n    pointer-events: none;\n  }\n}\n",
+	"@layer components {\n  .title {\n    font-size: clamp(1.5rem, 3cqi + 1rem, 2rem);\n    font-weight: 700;\n    line-height: 1.25;\n    letter-spacing: -0.015em;\n    text-wrap: balance;\n  }\n\n  .description {\n    margin-block-start: 0.1875rem;\n    font-size: clamp(1rem, 1cqi + 0.85rem, 1.125rem);\n    color: var(--_muted-foreground);\n    text-wrap: balance;\n  }\n\n  .counter {\n    display: inline-flex;\n    flex: none;\n    margin-block-start: 0.375rem;\n    align-items: center;\n    gap: 0.625rem;\n    padding: 0.3125rem 0.875rem;\n    border-radius: 999px;\n    background: var(--_counter-background);\n    white-space: nowrap;\n  }\n\n  .counter-label {\n    font-size: 0.84375rem;\n    color: var(--_muted-foreground);\n  }\n\n  .counter-value {\n    display: inline-block;\n    min-inline-size: 1ch;\n    font-size: 1.0625rem;\n    font-weight: 600;\n    font-variant-numeric: tabular-nums;\n    text-align: center;\n  }\n\n  .dropzone {\n    position: absolute;\n    inset: 0;\n    z-index: 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding-block-start: 7.5%;\n    border-radius: var(--_radius);\n    color: var(--_muted-foreground);\n    background: var(--_surface);\n    transition: background-color 180ms ease;\n\n    &:focus-visible {\n      outline: var(--_focus-ring);\n      outline-offset: 4px;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  .dropzone-outline {\n    position: absolute;\n    inset: 0;\n    inline-size: 100%;\n    block-size: 100%;\n    pointer-events: none;\n\n    & rect {\n      fill: none;\n      stroke: var(--_border);\n      stroke-width: 1.5;\n      stroke-dasharray: 8 6;\n      transition: stroke 180ms ease;\n    }\n  }\n\n  .dropzone-icon {\n    inline-size: 2.125rem;\n    block-size: 2.125rem;\n    stroke-width: 1.6;\n  }\n\n  .prompt {\n    margin-block-start: 0.6875rem;\n    font-size: clamp(1.125rem, 2cqi + 0.8rem, 1.375rem);\n    font-weight: 500;\n    line-height: 1.25;\n    letter-spacing: -0.01em;\n    color: var(--_foreground);\n  }\n\n  .hint {\n    margin-block-start: 0.25rem;\n    font-size: 0.9375rem;\n    color: var(--_subtle-foreground);\n  }\n\n  .square {\n    position: absolute;\n    inset-inline-start: 33%;\n    inset-block-start: 64.6%;\n    z-index: 0;\n    inline-size: 34%;\n    block-size: 29.9%;\n    border: 3px solid var(--_accent);\n    border-radius: 3px;\n    pointer-events: none;\n  }\n\n  .rim {\n    position: absolute;\n    inset-inline-start: 29.5%;\n    inset-block-start: 100%;\n    inline-size: 41%;\n    translate: 0 -55%;\n    pointer-events: none;\n  }\n\n  .rim-arc {\n    fill: none;\n    stroke-width: 5.5;\n    stroke-linecap: round;\n  }\n\n  .rim-back {\n    z-index: 1;\n\n    & .rim-arc {\n      stroke: color-mix(in oklab, var(--_accent) 40%, var(--_accent-strong));\n    }\n  }\n\n  .rim-bracket {\n    fill: var(--_accent-strong);\n  }\n\n  .rim-front {\n    z-index: 3;\n\n    & .rim-arc {\n      stroke: var(--_accent);\n    }\n  }\n\n  .net {\n    position: absolute;\n    inset-inline-start: 29.5%;\n    inset-block-start: 101.5%;\n    z-index: 3;\n    inline-size: 41%;\n    aspect-ratio: 164 / 104;\n    transform-origin: 50% 0;\n    pointer-events: none;\n\n    & line {\n      stroke: var(--_net);\n      stroke-width: 1.75;\n      stroke-linecap: round;\n      vector-effect: non-scaling-stroke;\n    }\n  }\n\n  .score-pop {\n    position: absolute;\n    inset-inline-start: 68%;\n    inset-block-start: 59.5%;\n    z-index: 4;\n    font-size: calc(var(--_hoop-size) * 0.08);\n    font-weight: 800;\n    line-height: 1;\n    letter-spacing: -0.02em;\n    color: var(--_accent);\n    opacity: 0;\n    pointer-events: none;\n  }\n}\n",
+	"@layer components {\n  .card {\n    --_depth: 0;\n    --_fold: calc(var(--_card-width) * 0.2);\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    inline-size: var(--_card-width);\n    block-size: var(--_card-height);\n    translate: calc(var(--_rest-x, 0px) - 50% - var(--_depth) * 0.45rem)\n      calc(var(--_rest-y, 0px) - 50% + var(--_depth) * 0.2rem);\n    /* Keep -6deg in sync with REST_ROTATION in shot-controller.ts. */\n    rotate: calc(-6deg - var(--_depth) * 7deg);\n    pointer-events: auto;\n    touch-action: none;\n    user-select: none;\n    -webkit-user-drag: none;\n    cursor: grab;\n    filter: drop-shadow(0 0.5rem 0.75rem rgb(15 17 21 / 0.13));\n\n    &[data-depth='1'] {\n      --_depth: 1;\n    }\n\n    &[data-depth='2'] {\n      --_depth: 2;\n    }\n\n    &[data-depth='hidden'] {\n      visibility: hidden;\n    }\n\n    &:focus-visible {\n      outline: var(--_focus-ring);\n      outline-offset: 4px;\n      border-radius: calc(var(--_card-width) * 0.1);\n    }\n  }\n\n  .card-paper {\n    position: absolute;\n    inset: 0;\n    border-radius: calc(var(--_card-width) * 0.1);\n    background: var(--_file-surface);\n    clip-path: polygon(\n      0 0,\n      calc(100% - var(--_fold)) 0,\n      100% var(--_fold),\n      100% 100%,\n      0 100%\n    );\n\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      inline-size: var(--_fold);\n      block-size: var(--_fold);\n      border-end-start-radius: calc(var(--_fold) * 0.22);\n      background: linear-gradient(\n        to bottom left,\n        transparent 50%,\n        var(--_file-fold) 50%\n      );\n    }\n  }\n\n  .card-artwork {\n    position: absolute;\n    inset: 22% 18% 40% 14%;\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    gap: calc(var(--_card-height) * 0.06);\n\n    &[data-artwork='thumbnail'] {\n      inset: 12% 12% 34% 12%;\n    }\n  }\n\n  .line {\n    display: block;\n    block-size: calc(var(--_card-height) * 0.05);\n    border-radius: 999px;\n    background: var(--_file-line);\n\n    &:nth-child(2) {\n      inline-size: 82%;\n    }\n\n    &:nth-child(3) {\n      inline-size: 92%;\n    }\n  }\n\n  .thumbnail {\n    inline-size: 100%;\n    block-size: 100%;\n    object-fit: cover;\n    border-radius: calc(var(--_card-width) * 0.05);\n  }\n\n  .card-badge {\n    position: absolute;\n    inset-inline-start: 12%;\n    inset-block-end: 12.5%;\n    padding: 0.18em 0.55em;\n    border-radius: 0.32em;\n    font-size: calc(var(--_card-width) * 0.12);\n    font-weight: 700;\n    line-height: 1.35;\n    letter-spacing: 0.02em;\n    color: #ffffff;\n    background: var(--_file-color, var(--_file-badge));\n    white-space: nowrap;\n  }\n\n  .trajectory {\n    position: absolute;\n    inset: 0;\n    inline-size: 100%;\n    block-size: 100%;\n    z-index: 0;\n    overflow: visible;\n  }\n\n  .dot {\n    fill: var(--_trajectory);\n  }\n}\n",
+	"@layer components {\n  .item {\n    display: grid;\n    grid-template-columns: auto minmax(0, 1fr) minmax(5rem, 11.25rem) 1.875rem;\n    align-items: center;\n    gap: 0.5rem 0.9375rem;\n    padding: 1.0625rem 1.25rem 1.0625rem 1.375rem;\n    border-radius: 1rem;\n    background: var(--_surface);\n    box-shadow: var(--_shadow);\n    transition:\n      opacity 320ms ease,\n      translate 320ms cubic-bezier(0.22, 1, 0.36, 1);\n\n    @starting-style {\n      opacity: 0;\n      translate: 0 0.75rem;\n    }\n  }\n\n  @container (inline-size < 30rem) {\n    .item {\n      grid-template-columns: auto minmax(0, 1fr) 1.875rem;\n    }\n\n    .item-progress {\n      grid-column: 1 / -1;\n      grid-row: 2;\n    }\n\n    .item-end {\n      grid-column: 3;\n      grid-row: 1;\n    }\n  }\n\n  .item-icon {\n    --_card-width: 1.8125rem;\n    --_card-height: 2.375rem;\n    --_fold: 0.5625rem;\n\n    position: relative;\n    inline-size: var(--_card-width);\n    block-size: var(--_card-height);\n    filter: drop-shadow(0 1px 1px rgb(15 17 21 / 0.08));\n  }\n\n  .item-paper {\n    position: absolute;\n    inset: 0;\n    border-radius: 0.1875rem;\n    background: color-mix(\n      in oklab,\n      var(--_file-line) 45%,\n      var(--_file-surface)\n    );\n    clip-path: polygon(\n      0 0,\n      calc(100% - var(--_fold)) 0,\n      100% var(--_fold),\n      100% 100%,\n      0 100%\n    );\n\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      right: 0;\n      inline-size: var(--_fold);\n      block-size: var(--_fold);\n      background: linear-gradient(\n        to bottom left,\n        transparent 50%,\n        var(--_file-line) 50%\n      );\n    }\n  }\n\n  .item-artwork {\n    position: absolute;\n    inset: 24% 16% 42% 16%;\n    display: flex;\n    flex-direction: column;\n    gap: 0.125rem;\n\n    & .line {\n      block-size: 0.125rem;\n      background: var(--_file-line);\n    }\n\n    &[data-artwork='thumbnail'] {\n      inset: 8% 8% 36% 8%;\n    }\n  }\n\n  .item-badge {\n    position: absolute;\n    inset-inline-start: 12%;\n    inset-block-end: 12%;\n    padding: 0 0.25em;\n    border-radius: 0.2em;\n    font-size: 0.375rem;\n    font-weight: 700;\n    line-height: 1.5;\n    color: #ffffff;\n    background: var(--_file-color, var(--_file-badge));\n  }\n\n  .item-meta {\n    display: grid;\n    gap: 0.125rem;\n    min-inline-size: 0;\n  }\n\n  .item-name {\n    overflow: hidden;\n    font-size: clamp(1rem, 1.5cqi + 0.5rem, 1.1875rem);\n    font-weight: 600;\n    line-height: 1.3;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .item-size {\n    font-size: 0.875rem;\n    color: var(--_subtle-foreground);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .item-progress {\n    display: grid;\n    gap: 0.8125rem;\n  }\n\n  .item-status {\n    font-size: 0.875rem;\n    line-height: 1.2;\n    color: var(--_subtle-foreground);\n  }\n\n  .progress {\n    display: block;\n    block-size: 0.3125rem;\n    overflow: hidden;\n    border-radius: 999px;\n    background: var(--_track);\n  }\n\n  .progress-bar {\n    display: block;\n    block-size: 100%;\n    border-radius: inherit;\n    background: var(--_accent);\n    transform-origin: 0 50%;\n    scale: 0 1;\n    transition:\n      scale 240ms ease-out,\n      background-color 240ms ease;\n  }\n\n  .item-end {\n    display: grid;\n    place-items: center;\n    inline-size: 1.875rem;\n    block-size: 1.875rem;\n  }\n\n  .item-check {\n    display: grid;\n    place-items: center;\n    inline-size: 1.875rem;\n    block-size: 1.875rem;\n    border-radius: 50%;\n    color: #ffffff;\n    background: var(--_success);\n\n    & .icon {\n      inline-size: 1.3125rem;\n      block-size: 1.3125rem;\n      stroke-width: 2.75;\n    }\n  }\n\n  .item-retry {\n    display: grid;\n    place-items: center;\n    inline-size: 1.875rem;\n    block-size: 1.875rem;\n    border-radius: 50%;\n    color: var(--_danger);\n\n    &:hover {\n      background: color-mix(in oklab, var(--_danger) 12%, transparent);\n    }\n\n    &:focus-visible {\n      outline: var(--_focus-ring);\n      outline-offset: 2px;\n    }\n\n    & .icon {\n      inline-size: 1.25rem;\n      block-size: 1.25rem;\n    }\n  }\n\n  .item[data-status='ready'] .progress-bar {\n    background: var(--_subtle-foreground);\n  }\n\n  .item[data-status='uploaded'] {\n    & .item-status {\n      color: var(--_success);\n    }\n\n    & .progress-bar {\n      background: var(--_success);\n    }\n  }\n\n  .item[data-status='error'] {\n    & .item-status {\n      color: var(--_danger);\n    }\n\n    & .progress-bar {\n      background: var(--_danger);\n    }\n  }\n}\n",
+	"@layer states {\n  :host(:state(drop-target)) .dropzone {\n    background: var(--_accent-surface);\n\n    & .dropzone-outline rect {\n      stroke: var(--_accent);\n    }\n  }\n\n  :host(:state(aiming)) {\n    cursor: grabbing;\n\n    & .card {\n      cursor: grabbing;\n    }\n  }\n\n  :host(:state(aiming)),\n  :host(:state(flying)) {\n    user-select: none;\n  }\n\n  :host(:state(disabled)) {\n    & .frame {\n      cursor: not-allowed;\n    }\n\n    & .dropzone,\n    & .card {\n      filter: grayscale(1);\n      opacity: 0.55;\n    }\n  }\n}\n",
+	"@layer motion {\n  @keyframes basketball-upload-shake {\n    0%,\n    100% {\n      translate: 0 0;\n    }\n    20% {\n      translate: -0.375rem 0;\n    }\n    40% {\n      translate: 0.3125rem 0;\n    }\n    60% {\n      translate: -0.1875rem 0;\n    }\n    80% {\n      translate: 0.125rem 0;\n    }\n  }\n\n  :host(:state(rejected)) .dropzone {\n    animation: basketball-upload-shake 420ms ease-in-out;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :host(:state(rejected)) .dropzone {\n      animation: none;\n    }\n\n    .item,\n    .progress-bar,\n    .dropzone,\n    .dropzone-outline rect {\n      transition: none;\n    }\n  }\n}\n"
+];
+let sheet;
+/**
+* One constructed stylesheet shared by every element, created on first use rather than at module evaluation:
+* the module must be importable where `CSSStyleSheet` does not exist (SSR).
+*/
+function getStyleSheet() {
+	if (!sheet) {
+		sheet = new CSSStyleSheet();
+		sheet.replaceSync(SOURCES.join("\n"));
+	}
+	return sheet;
+}
+//#endregion
+//#region src/element/views/card.ts
+/**
+* The CSS color of a file type: its token when set, its own color otherwise.
+*/
+function fileColor(type) {
+	return `var(--basketball-upload-file-${type.kind}, ${type.color ?? "var(--_file-badge)"})`;
+}
+function lines() {
+	return Array.from({ length: 3 }, () => createElement("span", { class: "line" }));
+}
+/**
+* The body of a file card: text lines, a thumbnail, or a node of your own.
+*/
+function createArtwork(file, type, attributes) {
+	const element = createElement("span", attributes);
+	let url = null;
+	const revoke = () => {
+		if (url) URL.revokeObjectURL(url);
+		url = null;
+	};
+	if (type.artwork === "thumbnail" && typeof URL.createObjectURL === "function") {
+		url = URL.createObjectURL(file);
+		const image = createElement("img", {
+			class: "thumbnail",
+			alt: "",
+			src: url,
+			draggable: "false",
+			decoding: "async"
+		});
+		image.addEventListener("load", revoke, { once: true });
+		image.addEventListener("error", () => {
+			revoke();
+			element.dataset.artwork = "lines";
+			image.replaceWith(...lines());
+		}, { once: true });
+		element.dataset.artwork = "thumbnail";
+		element.append(image);
+	} else if (typeof type.artwork === "function") {
+		element.dataset.artwork = "custom";
+		element.append(type.artwork(file));
+	} else {
+		element.dataset.artwork = "lines";
+		element.append(...lines());
+	}
+	return {
+		element,
+		dispose: revoke
+	};
+}
+function createCard(file, type, label) {
+	const artwork = createArtwork(file, type, {
+		class: "card-artwork",
+		part: "file-artwork"
+	});
+	const element = createElement("button", {
+		type: "button",
+		class: "card",
+		part: `file file-${type.kind}`,
+		"data-kind": type.kind,
+		"aria-label": label
+	}, [createElement("span", { class: "card-paper" }, [artwork.element, createElement("span", {
+		class: "card-badge",
+		part: "file-badge"
+	}, [type.label])])]);
+	element.style.setProperty("--_file-color", fileColor(type));
+	const size = () => ({
+		width: element.offsetWidth,
+		height: element.offsetHeight
+	});
+	return {
+		element,
+		file,
+		type,
+		size,
+		place(pose) {
+			const { width, height } = size();
+			const style = poseStyle(pose, width, height);
+			element.style.translate = style.translate;
+			element.style.rotate = style.rotate;
+			element.style.scale = style.scale;
+		},
+		release() {
+			element.style.removeProperty("translate");
+			element.style.removeProperty("rotate");
+			element.style.removeProperty("scale");
+			element.style.removeProperty("opacity");
+		},
+		dispose() {
+			artwork.dispose();
+			element.remove();
+		}
+	};
+}
+//#endregion
+//#region src/element/views/header.ts
+function createHeader() {
+	const title = createElement("slot", { name: "title" });
+	const description = createElement("slot", { name: "description" });
+	const counterLabel = createElement("span", {
+		class: "counter-label",
+		part: "counter-label"
+	});
+	const counterValue = createElement("span", {
+		class: "counter-value",
+		part: "counter-value"
+	}, ["0"]);
+	const element = createElement("header", {
+		class: "header",
+		part: "header"
+	}, [createElement("div", { class: "heading" }, [createElement("h2", {
+		class: "title",
+		part: "title"
+	}, [title]), createElement("p", {
+		class: "description",
+		part: "description"
+	}, [description])]), createElement("p", {
+		class: "counter",
+		part: "counter"
+	}, [counterLabel, counterValue])]);
+	let count = 0;
+	return {
+		element,
+		update(messages) {
+			setFallback(title, messages.title);
+			setFallback(description, messages.description);
+			counterLabel.textContent = messages.counter;
+		},
+		setCount(value, bump) {
+			if (value === count) return;
+			const increased = value > count;
+			count = value;
+			counterValue.textContent = String(value);
+			if (bump && increased) play(counterValue, [
+				{ scale: "1" },
+				{ scale: "1.35" },
+				{ scale: "1" }
+			], {
+				duration: 360,
+				easing: "cubic-bezier(0.34, 1.56, 0.64, 1)"
+			});
+		}
+	};
+}
+//#endregion
+//#region src/element/views/hoop.ts
+/**
+* Net in a 164×104 box: the rim width on top, narrowing towards the bottom.
+*/
+function netLines() {
+	const top = [
+		3,
+		29.3,
+		55.7,
+		82,
+		108.3,
+		134.7,
+		161
+	];
+	const bottom = [
+		31,
+		48,
+		65,
+		82,
+		99,
+		116,
+		133
+	];
+	const [topY, bottomY] = [2, 102];
+	const lines = [];
+	const line = (fromX, fromY, toX, toY) => {
+		lines.push(createSvgElement("line", {
+			x1: fromX,
+			y1: fromY,
+			x2: toX,
+			y2: toY
+		}));
+	};
+	for (let index = 0; index < top.length; index += 1) {
+		const x = top[index] ?? 0;
+		const left = bottom[index - 1];
+		const right = bottom[index + 1];
+		if (left !== void 0) line(x, topY, left, bottomY);
+		if (right !== void 0) line(x, topY, right, bottomY);
+	}
+	line(top[0] ?? 0, topY, bottom[0] ?? 0, bottomY);
+	line(top[top.length - 1] ?? 0, topY, bottom[bottom.length - 1] ?? 0, bottomY);
+	for (const y of [42, 70]) {
+		const inset = 28 * ((y - topY) / (bottomY - topY));
+		line(3 + inset, y, 161 - inset, y);
+	}
+	return lines;
+}
+function createHoop() {
+	const prompt = createElement("slot", { name: "prompt" });
+	const hint = createElement("slot", { name: "hint" });
+	const dropzone = createElement("button", {
+		type: "button",
+		class: "dropzone",
+		part: "dropzone"
+	}, [
+		createSvgElement("svg", {
+			class: "dropzone-outline",
+			"aria-hidden": "true"
+		}, [createSvgElement("rect", {
+			x: 0,
+			y: 0,
+			width: "100%",
+			height: "100%",
+			rx: "4.5%",
+			ry: "6.7%"
+		})]),
+		icon("upload", {
+			class: "icon dropzone-icon",
+			part: "dropzone-icon"
+		}),
+		createElement("span", {
+			class: "prompt",
+			part: "prompt"
+		}, [prompt]),
+		createElement("span", {
+			class: "hint",
+			part: "hint"
+		}, [hint])
+	]);
+	const square = createElement("div", {
+		class: "square",
+		part: "backboard-square"
+	});
+	const rimBack = createSvgElement("svg", {
+		class: "rim rim-back",
+		part: "rim",
+		viewBox: "0 0 164 18",
+		"aria-hidden": "true"
+	}, [createSvgElement("path", {
+		class: "rim-arc",
+		d: "M3 10 A79 6.5 0 0 1 161 10"
+	}), createSvgElement("rect", {
+		class: "rim-bracket",
+		x: 70,
+		y: .5,
+		width: 24,
+		height: 10,
+		rx: 1.5
+	})]);
+	const rim = createSvgElement("svg", {
+		class: "rim rim-front",
+		part: "rim",
+		viewBox: "0 0 164 18",
+		"aria-hidden": "true"
+	}, [createSvgElement("path", {
+		class: "rim-arc",
+		d: "M3 10 A79 6.5 0 0 0 161 10"
+	})]);
+	const net = createSvgElement("svg", {
+		class: "net",
+		part: "net",
+		viewBox: "0 0 164 104",
+		preserveAspectRatio: "none",
+		"aria-hidden": "true"
+	}, netLines());
+	const scorePop = createElement("span", {
+		class: "score-pop",
+		part: "score-pop",
+		"aria-hidden": "true"
+	}, ["+1"]);
+	return {
+		element: createElement("div", {
+			class: "hoop",
+			part: "hoop"
+		}, [
+			dropzone,
+			square,
+			rimBack,
+			rim,
+			net,
+			scorePop
+		]),
+		dropzone,
+		square,
+		rim,
+		net,
+		update(messages) {
+			setFallback(prompt, messages.prompt);
+			setFallback(hint, messages.hint);
+			dropzone.setAttribute("aria-label", messages.dropzone);
+		},
+		celebrate(reducedMotion) {
+			play(scorePop, reducedMotion ? [
+				{ opacity: 0 },
+				{
+					opacity: 1,
+					offset: .2
+				},
+				{
+					opacity: 1,
+					offset: .7
+				},
+				{ opacity: 0 }
+			] : [
+				{
+					opacity: 0,
+					translate: "0 0.3em",
+					scale: "0.6"
+				},
+				{
+					opacity: 1,
+					translate: "0 0",
+					scale: "1.1",
+					offset: .12
+				},
+				{
+					opacity: 1,
+					translate: "0 -0.1em",
+					scale: "1",
+					offset: .75
+				},
+				{
+					opacity: 0,
+					translate: "0 -0.45em",
+					scale: "1"
+				}
+			], {
+				duration: 1700,
+				easing: "ease-out"
+			});
+		},
+		swish() {
+			play(net, [
+				{ scale: "1 1" },
+				{
+					scale: "0.94 1.22",
+					offset: .45
+				},
+				{
+					scale: "1.02 0.96",
+					offset: .78
+				},
+				{ scale: "1 1" }
+			], {
+				duration: 700,
+				easing: "ease-out"
+			});
+		}
+	};
+}
+//#endregion
+//#region src/element/views/live-region.ts
+/**
+* Polite announcements for what only shows as motion: scores, misses, uploads.
+*/
+function createLiveRegion() {
+	const element = createElement("div", {
+		class: "visually-hidden",
+		role: "status",
+		"aria-live": "polite"
+	});
+	let frame = 0;
+	return {
+		element,
+		announce(message) {
+			element.textContent = "";
+			if (typeof requestAnimationFrame !== "function") {
+				element.textContent = message;
+				return;
+			}
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				element.textContent = message;
+			});
+		}
+	};
+}
+//#endregion
+//#region src/element/views/trajectory.ts
+/**
+* Dot radius, in rim units: 3.6 px on the 164 px rim of the design.
+*/
+const DOT_RADIUS = .022;
+function createTrajectory() {
+	const element = createSvgElement("svg", {
+		class: "trajectory",
+		part: "trajectory",
+		"aria-hidden": "true"
+	});
+	const circles = [];
+	let shown = [];
+	return {
+		element,
+		show(dots, unit) {
+			shown = dots;
+			while (circles.length < dots.length) {
+				const circle = createSvgElement("circle", { class: "dot" });
+				circles.push(circle);
+				element.append(circle);
+			}
+			const radius = Math.max(1.5, unit * DOT_RADIUS).toFixed(2);
+			circles.forEach((circle, index) => {
+				const dot = dots[index];
+				circle.toggleAttribute("hidden", !dot);
+				if (!dot) return;
+				circle.setAttribute("cx", dot.x.toFixed(1));
+				circle.setAttribute("cy", dot.y.toFixed(1));
+				circle.setAttribute("r", radius);
+			});
+		},
+		hideBefore(steps) {
+			shown.forEach((dot, index) => {
+				if (dot.steps <= steps) circles[index]?.setAttribute("hidden", "");
+			});
+		},
+		clear() {
+			shown = [];
+			for (const circle of circles) circle.setAttribute("hidden", "");
+		}
+	};
+}
+//#endregion
+//#region src/upload/format.ts
+const UNITS = [
+	"B",
+	"KB",
+	"MB",
+	"GB",
+	"TB"
+];
+/**
+* Human readable size in decimal units, the way file managers show it: `2_400_000` → `2.4 MB`.
+* `locale` formats the number (`2,4 MB` in `de`); it defaults to the runtime's.
+*/
+function formatBytes(bytes, locale) {
+	let value = bytes > 0 ? bytes : 0;
+	let unit = 0;
+	while (value >= (unit === 0 ? 999.5 : 999.95) && unit < UNITS.length - 1) {
+		value /= 1e3;
+		unit += 1;
+	}
+	return `${new Intl.NumberFormat(locale, { maximumFractionDigits: unit === 0 ? 0 : 1 }).format(value)} ${UNITS[unit]}`;
+}
+//#endregion
+//#region src/element/views/upload-list.ts
+function statusText(item, messages) {
+	switch (item.status) {
+		case "ready": return messages.ready;
+		case "queued": return messages.queued;
+		case "uploading": return messages.uploading;
+		case "uploaded": return messages.uploaded;
+		case "error": return messages.failed;
+	}
+}
+function createRow(item, type, options) {
+	const { file } = item;
+	const artwork = createArtwork(file, type, { class: "item-artwork" });
+	const thumbnail = createElement("span", {
+		class: "item-icon",
+		part: `item-icon item-icon-${type.kind}`,
+		"aria-hidden": "true"
+	}, [createElement("span", { class: "item-paper" }, [artwork.element, createElement("span", { class: "item-badge" }, [type.label])])]);
+	thumbnail.style.setProperty("--_file-color", fileColor(type));
+	const status = createElement("span", {
+		class: "item-status",
+		part: "item-status"
+	});
+	const bar = createElement("span", { class: "progress-bar" });
+	const progress = createElement("span", {
+		class: "progress",
+		part: "progress",
+		role: "progressbar",
+		"aria-valuemin": "0",
+		"aria-valuemax": "100"
+	}, [bar]);
+	const check = createElement("span", {
+		class: "item-check",
+		"aria-hidden": "true"
+	}, [icon("check")]);
+	const retry = createElement("button", {
+		type: "button",
+		class: "item-retry",
+		part: "retry"
+	}, [icon("retry")]);
+	retry.addEventListener("click", () => options.onRetry(item.id));
+	const element = createElement("li", {
+		class: "item",
+		part: "item",
+		"data-kind": type.kind
+	}, [
+		thumbnail,
+		createElement("span", { class: "item-meta" }, [createElement("span", {
+			class: "item-name",
+			part: "item-name"
+		}, [file.name]), createElement("span", {
+			class: "item-size",
+			part: "item-size"
+		}, [formatBytes(file.size, options.locale())])]),
+		createElement("span", { class: "item-progress" }, [status, progress]),
+		createElement("span", { class: "item-end" }, [check, retry])
+	]);
+	return {
+		element,
+		update(next, messages) {
+			element.dataset.status = next.status;
+			status.textContent = statusText(next, messages);
+			const percent = Math.round(next.progress * 100);
+			progress.setAttribute("aria-valuenow", String(percent));
+			progress.setAttribute("aria-label", messages.progress(file.name));
+			bar.style.scale = `${next.progress} 1`;
+			check.hidden = next.status !== "uploaded";
+			retry.hidden = next.status !== "error";
+			retry.setAttribute("aria-label", messages.retry(file.name));
+			retry.title = messages.retry(file.name);
+		},
+		dispose() {
+			artwork.dispose();
+			element.remove();
+		}
+	};
+}
+/**
+* The list of files in the basket, with their upload progress.
+*/
+function createUploadList(options) {
+	const element = createElement("ul", {
+		class: "list",
+		part: "list",
+		role: "list"
+	});
+	element.hidden = true;
+	const rows = /* @__PURE__ */ new Map();
+	return {
+		element,
+		render(items, messages) {
+			const present = /* @__PURE__ */ new Set();
+			for (const item of items) {
+				present.add(item.id);
+				let row = rows.get(item.id);
+				if (!row) {
+					row = createRow(item, options.resolveType(item.file), options);
+					rows.set(item.id, row);
+					element.append(row.element);
+				}
+				row.update(item, messages);
+			}
+			for (const [id, row] of rows) {
+				if (present.has(id)) continue;
+				row.dispose();
+				rows.delete(id);
+			}
+			element.hidden = items.length === 0;
+		},
+		dispose() {
+			for (const row of rows.values()) row.dispose();
+			rows.clear();
+		}
+	};
+}
+//#endregion
+//#region src/element/basketball-upload-element.ts
+/**
+* Cards drawn on the court: the top one and two underneath.
+*/
+const VISIBLE_STACK = 3;
+/**
+* Delay between the cards of a multi-file dunk, ms.
+*/
+const DUNK_STAGGER = 150;
+/**
+* `HTMLElement` is missing where there is no DOM (SSR). Extending a stand-in
+* keeps this module importable there; the class is only ever instantiated by
+* `customElements.define`, which those environments do not have either.
+*/
+const BaseElement = typeof HTMLElement === "undefined" ? class {} : HTMLElement;
+function hasFiles(event) {
+	return event.dataTransfer?.types.includes("Files") ?? false;
+}
+function numberAttribute(value) {
+	if (value === null || value.trim() === "") return null;
+	const number = Number(value);
+	return Number.isFinite(number) && number >= 0 ? number : null;
+}
+/**
+* `<basketball-upload>`: a file upload where the dropzone is a backboard.
+* Drop files on it, or drop them on the court and take the shot.
+*/
+var BasketballUploadElement = class extends BaseElement {
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.observedAttributes = [
+			"concurrency",
+			"disabled",
+			"name",
+			"required"
+		];
+	}
+	#internals;
+	#queue = new UploadQueue();
+	#header = createHeader();
+	#hoop = createHoop();
+	#trajectory = createTrajectory();
+	#liveRegion = createLiveRegion();
+	#list;
+	#layer;
+	#court;
+	#spot;
+	#input;
+	#shots;
+	/**
+	* Cards waiting on the court, bottom of the stack first.
+	*/
+	#staged = [];
+	/**
+	* Cards on their way into the basket: dunks, shots in the air, scores.
+	*/
+	#inPlay = /* @__PURE__ */ new Set();
+	/**
+	* Scored cards fading out of the net: their files are already in the basket.
+	*/
+	#leaving = /* @__PURE__ */ new Set();
+	#messages = defaultMessages;
+	#fileTypes = [];
+	#resizeObserver = null;
+	#formDisabled = false;
+	#changeSignature = "";
+	#states = {
+		dragging: false,
+		dropOverBoard: false,
+		flightOverBoard: false,
+		scoring: 0,
+		aiming: false,
+		flying: false,
+		rejected: false
+	};
+	#rejectedTimer;
+	constructor() {
+		super();
+		this.#internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
+		this.#list = createUploadList({
+			resolveType: (file) => this.#resolveType(file),
+			onRetry: (id) => this.retryItem(id),
+			locale: () => this.closest("[lang]")?.getAttribute("lang") ?? void 0
+		});
+		this.#spot = createElement("div", {
+			class: "spot",
+			"aria-hidden": "true"
+		});
+		this.#court = createElement("div", { class: "court" }, [this.#spot]);
+		this.#layer = createElement("div", { class: "layer" }, [this.#trajectory.element]);
+		this.#input = createElement("input", {
+			type: "file",
+			hidden: "",
+			tabindex: "-1",
+			"aria-hidden": "true"
+		});
+		const root = this.attachShadow({ mode: "open" });
+		root.adoptedStyleSheets = [getStyleSheet()];
+		root.append(createElement("div", {
+			class: "frame",
+			part: "frame"
+		}, [
+			this.#header.element,
+			this.#hoop.element,
+			this.#court,
+			this.#list.element,
+			this.#layer
+		]), this.#liveRegion.element, this.#input);
+		this.#shots = new ShotController({
+			trajectory: this.#trajectory,
+			measure: () => this.#measure(),
+			setAiming: (on) => this.#setState("aiming", on),
+			setFlying: (on) => this.#setState("flying", on),
+			setOverBoard: (on) => {
+				this.#states.flightOverBoard = on;
+				this.#syncStates();
+			},
+			launched: (card) => this.#launched(card),
+			scored: (card, pose, court) => void this.#score(card, pose, court),
+			missed: (card) => this.#missed(card)
+		});
+		this.#hoop.dropzone.addEventListener("click", () => this.openPicker());
+		this.#input.addEventListener("change", () => {
+			const files = [...this.#input.files ?? []];
+			this.#input.value = "";
+			if (this.instant) this.#dunk(files);
+			else this.#stage(files);
+		});
+		this.addEventListener("dragenter", this.#handleDragOver);
+		this.addEventListener("dragover", this.#handleDragOver);
+		this.addEventListener("dragleave", this.#handleDragLeave);
+		this.addEventListener("drop", this.#handleDrop);
+		this.#queue.on("change", (items) => this.#handleItems(items));
+		this.#queue.on("start", (item) => this.#emit("upload-start", { item }));
+		this.#queue.on("progress", (item) => this.#emit("upload-progress", { item }));
+		this.#queue.on("success", (item) => {
+			this.#emit("upload-success", { item });
+			this.#liveRegion.announce(this.#messages.complete(item.file.name));
+		});
+		this.#queue.on("error", (item) => {
+			this.#emit("upload-error", { item });
+			this.#liveRegion.announce(this.#messages.error(item.file.name));
+		});
+		this.#applyMessages();
+		this.#syncForm();
+	}
+	/**
+	* `light`, `dark`, or `system` (the default) to follow `prefers-color-scheme`.
+	*/
+	get theme() {
+		const value = this.getAttribute("theme");
+		return value === "light" || value === "dark" ? value : "system";
+	}
+	set theme(value) {
+		if (value === "light" || value === "dark") this.setAttribute("theme", value);
+		else this.removeAttribute("theme");
+	}
+	/**
+	* Accepted files, with the syntax of `<input type="file" accept>`.
+	*/
+	get accept() {
+		return this.getAttribute("accept") ?? "";
+	}
+	set accept(value) {
+		if (value) this.setAttribute("accept", value);
+		else this.removeAttribute("accept");
+	}
+	/**
+	* Several files at a time. Without it, a new file replaces the previous one.
+	*/
+	get multiple() {
+		return this.hasAttribute("multiple");
+	}
+	set multiple(value) {
+		this.toggleAttribute("multiple", Boolean(value));
+	}
+	/**
+	* Largest accepted file, in bytes.
+	*/
+	get maxSize() {
+		return numberAttribute(this.getAttribute("max-size"));
+	}
+	set maxSize(value) {
+		if (value === null || value === void 0) this.removeAttribute("max-size");
+		else this.setAttribute("max-size", String(value));
+	}
+	/**
+	* Most files at once, staged and in the basket.
+	*/
+	get maxFiles() {
+		return numberAttribute(this.getAttribute("max-files"));
+	}
+	set maxFiles(value) {
+		if (value === null || value === void 0) this.removeAttribute("max-files");
+		else this.setAttribute("max-files", String(value));
+	}
+	/**
+	* Form field the files are submitted under.
+	*/
+	get name() {
+		return this.getAttribute("name") ?? "";
+	}
+	set name(value) {
+		if (value) this.setAttribute("name", value);
+		else this.removeAttribute("name");
+	}
+	/**
+	* The form is invalid while the basket is empty.
+	*/
+	get required() {
+		return this.hasAttribute("required");
+	}
+	set required(value) {
+		this.toggleAttribute("required", Boolean(value));
+	}
+	/**
+	* Ignores files and shots. A disabled `<fieldset>` does the same, without
+	* changing this property.
+	*/
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(value) {
+		this.toggleAttribute("disabled", Boolean(value));
+	}
+	/**
+	* No shooting: every file goes straight into the basket.
+	*/
+	get instant() {
+		return this.hasAttribute("instant");
+	}
+	set instant(value) {
+		this.toggleAttribute("instant", Boolean(value));
+	}
+	/**
+	* Uploads running at the same time.
+	*/
+	get concurrency() {
+		return this.#queue.concurrency;
+	}
+	set concurrency(value) {
+		if (value === null || value === void 0) this.removeAttribute("concurrency");
+		else this.setAttribute("concurrency", String(value));
+	}
+	/**
+	* Sends each file in the basket. Without one, files only travel with their form.
+	*/
+	get uploader() {
+		return this.#queue.uploader;
+	}
+	set uploader(value) {
+		this.#queue.uploader = value ?? null;
+	}
+	/**
+	* Copy and accessible names. Assign a partial object to override some: it is
+	* merged over the defaults, not over the previous value, and keys set to
+	* `undefined` keep their default.
+	*/
+	get messages() {
+		return this.#messages;
+	}
+	set messages(value) {
+		const overrides = Object.fromEntries(Object.entries(value ?? {}).filter(([, message]) => message !== void 0));
+		this.#messages = {
+			...defaultMessages,
+			...overrides
+		};
+		this.#applyMessages();
+	}
+	/**
+	* File types for this element only, checked before the registered ones.
+	*/
+	get fileTypes() {
+		return this.#fileTypes;
+	}
+	set fileTypes(value) {
+		const types = value ?? [];
+		types.forEach(assertFileType);
+		this.#fileTypes = types;
+	}
+	/**
+	* Files in the basket and their uploads.
+	*/
+	get items() {
+		return this.#queue.items;
+	}
+	/**
+	* Files in the basket: the value submitted with the form.
+	*/
+	get files() {
+		return this.#queue.items.map((item) => item.file);
+	}
+	/**
+	* The `<form>` the element belongs to, or `null`.
+	*/
+	get form() {
+		return this.#internals?.form ?? null;
+	}
+	/**
+	* As on native controls: `valueMissing` while `required` and empty.
+	* `undefined` where `ElementInternals` is missing.
+	*/
+	get validity() {
+		return this.#internals?.validity;
+	}
+	/**
+	* `messages.required` while `required` and empty, otherwise empty.
+	*/
+	get validationMessage() {
+		return this.#internals?.validationMessage ?? "";
+	}
+	/**
+	* Whether the form validates the element, as on native controls: not while
+	* disabled.
+	*/
+	get willValidate() {
+		return this.#internals?.willValidate ?? false;
+	}
+	/**
+	* Whether the element is valid, firing `invalid` when it is not. Always
+	* valid where `ElementInternals` is missing.
+	*/
+	checkValidity() {
+		return this.#internals?.checkValidity() ?? true;
+	}
+	/**
+	* Like `checkValidity()`, and shows the message on the dropzone when invalid.
+	*/
+	reportValidity() {
+		return this.#internals?.reportValidity() ?? true;
+	}
+	/**
+	* Opens the file picker. The chosen files land on the court (or in the basket, with `instant`).
+	*/
+	openPicker() {
+		if (this.#isDisabled) return;
+		this.#input.accept = this.accept;
+		this.#input.multiple = this.multiple;
+		this.#input.click();
+	}
+	/**
+	* Puts files on the court, ready to be shot (with `instant`, straight into
+	* the basket). Files that do not pass `accept`, `max-size` or `max-files`
+	* fire `file-reject` instead.
+	*/
+	stage(files) {
+		if (this.instant) this.#dunk([...files]);
+		else this.#stage([...files]);
+	}
+	/**
+	* Puts files straight into the basket. Files that do not pass `accept`,
+	* `max-size` or `max-files` fire `file-reject` instead.
+	*/
+	dunk(files) {
+		this.#dunk([...files]);
+	}
+	/**
+	* Shoots the card on top of the court with a perfect shot. Returns `false`
+	* when it cannot: no card on the court, disabled, another card held or in
+	* the air, or the element not laid out.
+	*/
+	shoot() {
+		const card = this.#staged.at(-1);
+		return card !== void 0 && !this.#isDisabled && this.#shots.shoot(card);
+	}
+	/**
+	* Uploads a failed file again. Returns `false` when `id` is not an item in
+	* error, or there is no `uploader`.
+	*/
+	retryItem(id) {
+		return this.#queue.retry(id);
+	}
+	/**
+	* Takes a file out of the basket, aborting its upload. Returns `false` when
+	* there is no item with this `id`.
+	*/
+	removeItem(id) {
+		return this.#queue.remove(id);
+	}
+	/**
+	* Empties the court and the basket, aborting uploads.
+	*/
+	clear() {
+		this.#shots.stop()?.dispose();
+		for (const staged of this.#staged) staged.dispose();
+		for (const playing of this.#inPlay) playing.dispose();
+		for (const leaving of this.#leaving) leaving.dispose();
+		this.#staged = [];
+		this.#inPlay.clear();
+		this.#leaving.clear();
+		this.#states.scoring = 0;
+		this.#syncStates();
+		this.#queue.clear();
+	}
+	connectedCallback() {
+		if (typeof ResizeObserver !== "undefined") {
+			this.#resizeObserver = new ResizeObserver(() => this.#syncRest());
+			this.#resizeObserver.observe(this.#court);
+			this.#resizeObserver.observe(this.#layer);
+		}
+		this.#syncRest();
+		this.#applyDisabled();
+	}
+	disconnectedCallback() {
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = null;
+		const card = this.#shots.stop();
+		if (card && !this.#staged.includes(card)) {
+			this.#inPlay.delete(card);
+			card.release();
+			this.#staged.push(card);
+			this.#renderStack();
+		}
+	}
+	attributeChangedCallback(name, _oldValue, value) {
+		switch (name) {
+			case "concurrency":
+				this.#queue.concurrency = numberAttribute(value) ?? 3;
+				break;
+			case "disabled":
+				this.#applyDisabled();
+				break;
+			case "name":
+			case "required": this.#syncForm();
+		}
+	}
+	formResetCallback() {
+		this.clear();
+	}
+	formDisabledCallback(disabled) {
+		this.#formDisabled = disabled;
+		this.#applyDisabled();
+	}
+	get #isDisabled() {
+		return this.disabled || this.#formDisabled;
+	}
+	#emit(type, detail) {
+		this.dispatchEvent(new CustomEvent(type, {
+			detail,
+			bubbles: true
+		}));
+	}
+	#resolveType(file) {
+		return resolveFileType(file, this.#fileTypes);
+	}
+	#setState(name, on) {
+		this.#states[name] = on;
+		this.#syncStates();
+	}
+	#toggleState(name, on) {
+		const states = this.#internals?.states;
+		if (!states) return;
+		try {
+			if (on) states.add(name);
+			else states.delete(name);
+		} catch {}
+	}
+	#syncStates() {
+		const states = this.#states;
+		this.#toggleState("dragging", states.dragging);
+		this.#toggleState("drop-target", states.dragging && states.dropOverBoard || states.flightOverBoard || states.scoring > 0);
+		this.#toggleState("aiming", states.aiming);
+		this.#toggleState("flying", states.flying);
+		this.#toggleState("scoring", states.scoring > 0);
+		this.#toggleState("rejected", states.rejected);
+		this.#toggleState("disabled", this.#isDisabled);
+	}
+	#applyMessages() {
+		this.#header.update(this.#messages);
+		this.#hoop.update(this.#messages);
+		this.#list.render(this.#queue.items, this.#messages);
+		for (const card of this.#staged) card.element.setAttribute("aria-label", this.#messages.shoot(card.file.name));
+		this.#syncForm();
+	}
+	#applyDisabled() {
+		const disabled = this.#isDisabled;
+		this.#hoop.dropzone.disabled = disabled;
+		if (this.#internals) this.#internals.ariaDisabled = disabled ? "true" : null;
+		if (disabled) this.#shots.cancelAim();
+		this.#renderStack();
+		this.#syncStates();
+	}
+	/**
+	* Validates incoming files; rejected ones are reported, accepted ones returned.
+	*/
+	#admit(files) {
+		if (this.#isDisabled) return [];
+		const max = this.multiple ? this.maxFiles ?? Infinity : 1;
+		const used = this.multiple ? this.#queue.items.length + this.#staged.length + this.#inPlay.size : 0;
+		const maxSize = this.maxSize;
+		const accepted = [];
+		for (const file of files) {
+			let reason = null;
+			if (!matchesAccept(file, this.accept)) reason = "type";
+			else if (maxSize !== null && file.size > maxSize) reason = "size";
+			else if (used + accepted.length >= max) reason = "count";
+			if (reason) this.#reject(file, reason);
+			else accepted.push(file);
+		}
+		if (!this.multiple && accepted.length > 0) this.clear();
+		return accepted;
+	}
+	#reject(file, reason) {
+		this.#emit("file-reject", {
+			file,
+			reason
+		});
+		this.#liveRegion.announce(this.#messages.rejected(file.name, reason));
+		this.#states.rejected = true;
+		this.#syncStates();
+		clearTimeout(this.#rejectedTimer);
+		this.#rejectedTimer = setTimeout(() => {
+			this.#states.rejected = false;
+			this.#syncStates();
+		}, 450);
+	}
+	#createCard(file) {
+		const card = createCard(file, this.#resolveType(file), this.#messages.shoot(file.name));
+		const { element } = card;
+		element.addEventListener("pointerdown", (event) => {
+			if (this.#isDisabled || !this.#staged.includes(card)) return;
+			this.#shots.grab(card, event);
+		});
+		element.addEventListener("keydown", (event) => {
+			if (event.key === "Escape") {
+				this.#shots.cancelAim();
+				return;
+			}
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			if (!this.#isDisabled && this.#staged.at(-1) === card) this.#shots.hold(card, event);
+		});
+		element.addEventListener("click", (event) => event.preventDefault());
+		return card;
+	}
+	#stage(files, clientPoint) {
+		const accepted = this.#admit(files);
+		if (accepted.length === 0) return;
+		const origin = clientPoint ? this.#toLayer(clientPoint) : null;
+		for (const file of accepted) {
+			const card = this.#createCard(file);
+			this.#staged.push(card);
+			this.#layer.append(card.element);
+		}
+		this.#renderStack();
+		if (!origin || prefersReducedMotion()) return;
+		for (const card of this.#staged.slice(-accepted.length)) {
+			const rest = card.element.getBoundingClientRect();
+			const layer = this.#layer.getBoundingClientRect();
+			const offsetX = origin.x - (rest.left - layer.left + rest.width / 2);
+			const offsetY = origin.y - (rest.top - layer.top + rest.height / 2);
+			play(card.element, [{ transform: `translate(${offsetX}px, ${offsetY}px)` }, { transform: "none" }], {
+				duration: 380,
+				easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+			});
+		}
+	}
+	#dunk(files, clientPoint) {
+		this.#admit(files).forEach((file, index) => {
+			const card = this.#createCard(file);
+			card.element.tabIndex = -1;
+			card.element.inert = true;
+			this.#inPlay.add(card);
+			this.#layer.append(card.element);
+			setTimeout(() => void this.#runDunk(card, clientPoint), index * DUNK_STAGGER);
+		});
+	}
+	async #runDunk(card, clientPoint) {
+		if (!this.#inPlay.has(card)) return;
+		const court = this.#measure();
+		if (!court) {
+			this.#inPlay.delete(card);
+			card.dispose();
+			this.#queue.add(card.file);
+			return;
+		}
+		const center = rimCenter(court);
+		const from = {
+			...clientPoint ? this.#toLayer(clientPoint) : {
+				x: center.x,
+				y: court.board.y + court.board.height * .3
+			},
+			rotation: -10,
+			scale: .9
+		};
+		const above = {
+			x: center.x,
+			y: court.square.y + court.square.height * .35,
+			rotation: 6,
+			scale: PHYSICS.depthScale
+		};
+		card.place(from);
+		this.#states.scoring += 1;
+		this.#syncStates();
+		if (!prefersReducedMotion()) {
+			const { width, height } = card.size();
+			await play(card.element, [poseStyle(from, width, height), poseStyle(above, width, height)], {
+				duration: 320,
+				easing: "cubic-bezier(0.22, 1, 0.36, 1)",
+				commit: true
+			});
+		}
+		if (!this.#inPlay.has(card)) return;
+		this.#states.scoring -= 1;
+		await this.#score(card, above, court);
+	}
+	#launched(card) {
+		const hadFocus = this.shadowRoot?.activeElement === card.element;
+		this.#staged = this.#staged.filter((staged) => staged !== card);
+		this.#inPlay.add(card);
+		card.element.inert = true;
+		this.#renderStack();
+		if (hadFocus) (this.#staged.at(-1)?.element ?? this.#hoop.dropzone).focus();
+	}
+	#missed(card) {
+		if (!this.#inPlay.delete(card)) return;
+		card.element.inert = false;
+		this.#staged.push(card);
+		this.#renderStack();
+		this.#emit("shot", {
+			file: card.file,
+			result: "miss"
+		});
+		this.#liveRegion.announce(this.#messages.missed(card.file.name));
+	}
+	/**
+	* Through the net, then into the basket: the "+1", the counter and the
+	* upload only come once the card is out of the net, as in the design.
+	*/
+	async #score(card, from, court) {
+		if (!this.#inPlay.has(card)) return;
+		const reduced = prefersReducedMotion();
+		this.#states.scoring += 1;
+		this.#syncStates();
+		if (!reduced) {
+			const { width, height } = card.size();
+			const below = {
+				x: rimCenter(court).x,
+				y: court.netBottom + height * PHYSICS.depthScale / 2 - height * .06,
+				rotation: uprightOf(from.rotation),
+				scale: PHYSICS.depthScale
+			};
+			this.#hoop.swish();
+			await play(card.element, [poseStyle(from, width, height), poseStyle(below, width, height)], {
+				duration: 600,
+				easing: "cubic-bezier(0.45, 0, 0.7, 0.6)",
+				commit: true
+			});
+		}
+		if (!this.#inPlay.has(card)) return;
+		this.#states.scoring -= 1;
+		this.#syncStates();
+		this.#hoop.celebrate(reduced);
+		this.#inPlay.delete(card);
+		this.#leaving.add(card);
+		this.#queue.add(card.file);
+		this.#emit("shot", {
+			file: card.file,
+			result: "score"
+		});
+		this.#liveRegion.announce(this.#messages.scored(card.file.name));
+		await play(card.element, [
+			{ opacity: 1 },
+			{
+				opacity: .6,
+				offset: .2
+			},
+			{
+				opacity: .6,
+				offset: .6
+			},
+			{ opacity: 0 }
+		], {
+			duration: reduced ? 240 : 1200,
+			commit: true
+		});
+		this.#leaving.delete(card);
+		card.dispose();
+	}
+	#renderStack() {
+		const top = this.#staged.length - 1;
+		this.#staged.forEach((card, index) => {
+			const depth = top - index;
+			const { element } = card;
+			element.dataset.depth = depth < VISIBLE_STACK ? String(depth) : "hidden";
+			element.style.zIndex = String(index + 1);
+			const interactive = depth === 0 && !this.#isDisabled;
+			element.inert = !interactive;
+			element.tabIndex = interactive ? 0 : -1;
+		});
+	}
+	#handleItems(items) {
+		this.#list.render(items, this.#messages);
+		this.#header.setCount(items.length, !prefersReducedMotion());
+		this.#syncForm();
+		const signature = items.map((item) => `${item.id}:${item.status}`).join();
+		if (signature === this.#changeSignature) return;
+		this.#changeSignature = signature;
+		this.#emit("change", { items });
+	}
+	#syncForm() {
+		const internals = this.#internals;
+		if (!internals) return;
+		const files = this.files;
+		const name = this.name;
+		if (name && files.length > 0) {
+			const data = new FormData();
+			for (const file of files) data.append(name, file);
+			internals.setFormValue(data);
+		} else internals.setFormValue(null);
+		if (this.required && files.length === 0) internals.setValidity({ valueMissing: true }, this.#messages.required, this.#hoop.dropzone);
+		else internals.setValidity({});
+	}
+	/**
+	* Converts client coordinates to the card layer's.
+	*/
+	#toLayer(point) {
+		const layer = this.#layer.getBoundingClientRect();
+		return {
+			x: point.x - layer.left,
+			y: point.y - layer.top
+		};
+	}
+	#measure() {
+		const host = this.#layer.getBoundingClientRect();
+		if (host.width === 0 || host.height === 0) return null;
+		const court = courtFromRectangles({
+			host,
+			board: this.#hoop.dropzone.getBoundingClientRect(),
+			square: this.#hoop.square.getBoundingClientRect(),
+			rim: this.#hoop.rim.getBoundingClientRect(),
+			net: this.#hoop.net.getBoundingClientRect(),
+			spot: this.#spot.getBoundingClientRect()
+		});
+		return court.unit > 0 ? court : null;
+	}
+	/**
+	* Publishes where staged cards rest, for the CSS that draws them there.
+	*/
+	#syncRest() {
+		const layer = this.#layer.getBoundingClientRect();
+		const spot = this.#spot.getBoundingClientRect();
+		if (layer.width === 0) return;
+		const x = spot.left - layer.left + spot.width / 2;
+		const y = spot.top - layer.top + spot.height / 2;
+		this.#layer.style.setProperty("--_rest-x", `${x}px`);
+		this.#layer.style.setProperty("--_rest-y", `${y}px`);
+	}
+	#isOverBoard(point) {
+		const board = this.#hoop.dropzone.getBoundingClientRect();
+		return point.x >= board.left && point.x <= board.right && point.y >= board.top && point.y <= board.bottom;
+	}
+	#handleDragOver = (dragEvent) => {
+		const event = dragEvent;
+		if (!hasFiles(event)) return;
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = this.#isDisabled ? "none" : "copy";
+		if (this.#isDisabled) return;
+		this.#states.dragging = true;
+		this.#states.dropOverBoard = this.#isOverBoard({
+			x: event.clientX,
+			y: event.clientY
+		});
+		this.#syncStates();
+	};
+	#handleDragLeave = (dragEvent) => {
+		const event = dragEvent;
+		const box = this.getBoundingClientRect();
+		if (event.clientX > box.left && event.clientX < box.right && event.clientY > box.top && event.clientY < box.bottom) return;
+		this.#states.dragging = false;
+		this.#states.dropOverBoard = false;
+		this.#syncStates();
+	};
+	#handleDrop = (dragEvent) => {
+		const event = dragEvent;
+		if (!hasFiles(event)) return;
+		event.preventDefault();
+		const point = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		const overBoard = this.#isOverBoard(point);
+		this.#states.dragging = false;
+		this.#states.dropOverBoard = false;
+		this.#syncStates();
+		const files = [...event.dataTransfer?.files ?? []];
+		if (overBoard || this.instant) this.#dunk(files, point);
+		else this.#stage(files, point);
+	};
+};
+//#endregion
+//#region src/element/register.ts
+/**
+* Name the element is registered with when no `tagName` is given.
+*/
+const DEFAULT_TAG_NAME = "basketball-upload";
+/**
+* Defines the custom element. Idempotent, and a no-op where custom elements
+* do not exist (SSR), so it is safe to call from any module.
+*/
+function registerBasketballUpload(options = {}) {
+	const tagName = options.tagName ?? "basketball-upload";
+	if (typeof customElements === "undefined") return;
+	if (customElements.get(tagName)) return;
+	customElements.define(tagName, tagName === "basketball-upload" ? BasketballUploadElement : class extends BasketballUploadElement {});
+}
+//#endregion
+//#region src/upload/xhr.ts
+/**
+* Rejection reason of `createXhrUploader` for a non-2xx response or a network error.
+*/
+var UploadError = class extends Error {
+	constructor(status, body) {
+		super(status === 0 ? "Network error" : `Upload failed with status ${status}`);
+		this.name = "UploadError";
+		this.status = status;
+		this.body = body;
+	}
+};
+function resolve(value, file) {
+	return typeof value === "function" ? value(file) : value;
+}
+function parseResponse(request) {
+	if (!(request.getResponseHeader("content-type") ?? "").includes("json")) return request.responseText;
+	try {
+		return JSON.parse(request.responseText);
+	} catch {
+		return request.responseText;
+	}
+}
+/**
+* An `Uploader` built on `XMLHttpRequest`, the one browser API that reports
+* the progress of a request body. Resolves with the parsed JSON response (or
+* its text), rejects with an `UploadError`, or with the abort reason.
+*/
+function createXhrUploader(options) {
+	return (file, { signal, onProgress }) => new Promise((resolvePromise, reject) => {
+		if (signal.aborted) {
+			reject(signal.reason);
+			return;
+		}
+		const request = new XMLHttpRequest();
+		request.open(options.method ?? "POST", String(resolve(options.url, file)));
+		request.withCredentials = options.withCredentials ?? false;
+		for (const [name, value] of Object.entries(resolve(options.headers ?? {}, file))) request.setRequestHeader(name, value);
+		request.upload.addEventListener("progress", (event) => {
+			onProgress(event.loaded, event.lengthComputable ? event.total : void 0);
+		});
+		request.addEventListener("load", () => {
+			if (request.status >= 200 && request.status < 300) resolvePromise(parseResponse(request));
+			else reject(new UploadError(request.status, request.responseText));
+		});
+		request.addEventListener("error", () => reject(new UploadError(0, "")));
+		request.addEventListener("abort", () => reject(signal.reason));
+		const abort = () => request.abort();
+		signal.addEventListener("abort", abort, { once: true });
+		request.addEventListener("loadend", () => signal.removeEventListener("abort", abort));
+		const fieldName = options.fieldName === void 0 ? "file" : options.fieldName;
+		if (fieldName === null) {
+			request.send(file);
+			return;
+		}
+		const body = new FormData();
+		for (const [name, value] of Object.entries(resolve(options.fields ?? {}, file))) body.append(name, value);
+		body.append(fieldName, file, file.name);
+		request.send(body);
+	});
+}
+//#endregion
+export { BasketballUploadElement, DEFAULT_TAG_NAME, UploadError, createXhrUploader, defaultFileTypes, defaultMessages, formatBytes, matchesAccept, registerBasketballUpload, registerFileType, resolveFileType };
+
+//# sourceMappingURL=basketball-upload.js.map