@cardstack/boxel-cli 0.13.0-unstable.4 → 0.13.0-unstable.5

package/bundled-test-harness/assets/choreo-D1K9RyjM.js

@@ -0,0 +1,1031 @@
+import "./chunk-Rp0pCe6z.js";
+import { r as initializeDeferredDecorator, t as decorateFieldV2 } from "./runtime--fcdnjmJ-BoCBNIsz.js";
+import { et as tracked, wt as setComponentTemplate } from "./cache-DtDz7X5V-Wn8jRDfL.js";
+import { o as VOLATILE_TAG, u as consumeTag } from "./validator-T25d_ucg.js";
+import { H as templateFactory } from "./index-DaCZcoCY-CgzbilMy.js";
+import { n as registerDestructor } from "./destroyable-mdLYRn_o.js";
+import "./tracking-CNiq91Pk.js";
+import "./component-BJO47HTh.js";
+import { t as Component } from "./dist-CkA1rgqO.js";
+import "./template-factory-ds9s0u8l.js";
+import { r as modifier } from "./dist-nMt-N14r.js";
+import { nn as registerBusyProbe, o as snapshotOnRender, v as postRender } from "./layout-group-BS0gklZp.js";
+import { n as flushPendingMounts } from "./node-BWOLCOMI.js";
+import "./src-CbBcj3xm.js";
+import { a as readAnimations, c as trackScrolls, i as keepAsMemory } from "./memory-B73-H_Rp.js";
+import { n as closestMotionConfig } from "./motion-config-BbHByW3a.js";
+import { t as motionSpeed } from "./speed-bIo0tyrM.js";
+import { C as collect, S as Wait, _ as SlowZoom, a as Crossing, b as Tether, c as Gate, d as Pan, f as Parallel, g as Sequence, h as Scroll, i as Camera3D, l as Hold, m as Raise, n as Attach, o as Follow, p as Perform, r as Camera, s as Frame, t as Aim, u as Move, v as Spring, x as Tween } from "./steps-D0xobKkB.js";
+import { E as measure, T as isRendered, _ as sameScore, b as trackGestures, c as join, f as setBeforeMeasure, g as fadeOn, h as continuation, l as leave, m as compile, n as execute, p as setPassScheduler, s as setChoreoHost, v as GESTURE, w as boundsOf, x as measureBeacons } from "./run-FzaqmBEl.js";
+//#region ../choreo/src/changeset.ts
+/**
+* boxel-motion's Changeset: the sprites one render pass produced, and the
+* spritesFor / spriteFor queries its transitions selected them with.
+*/
+/**
+* Is any part of this sprite inside the window (Query.onstage)?
+*
+* A removed sprite is judged where the OLD scene showed it — its initial box,
+* captured before the crossing scrolled the window — and everything else where
+* the new scene will show it. Both boxes are client-space measurements taken
+* on their own side of the scroll, so each is compared against the viewport
+* that was (or will be) actually on screen with it.
+*/
+function onstage(s) {
+	const box = (s.type === "removed" ? s.initial : s.final ?? s.initial)?.page;
+	if (!box) return true;
+	return box.x < window.innerWidth && box.y < window.innerHeight && box.x + box.width > 0 && box.y + box.height > 0;
+}
+var isStill = (s) => !s.delta || s.delta.x === 0 && s.delta.y === 0 && s.delta.width === 0 && s.delta.height === 0;
+var Changeset = class {
+	inserted;
+	kept;
+	removed;
+	/**
+	* The box a `{{beacon}}` claimed this pass, or null if nothing claimed that
+	* name. It is a measurement, not a sprite: a beacon is never inserted, kept
+	* or removed, and a missing one is a no-op for whatever wanted to borrow it.
+	*
+	* Closed over rather than stored as a field, so this class stays structurally
+	* identical to ChangesetLike — a property function written against the
+	* concrete Changeset must still accept the interface it is handed.
+	*/
+	beacon;
+	/**
+	* The camera zoom the world was measured under (§6.3). Every box in this
+	* changeset is a page-space measurement taken through the region's frame
+	* transform, but a step's values are written in the sprite's own local
+	* space — so geometry that becomes inline pixels must be divided back by
+	* this before it is animated. 1 when the frame is at rest.
+	*/
+	measureZoom;
+	/** the frame's own size in local pixels, from the same final layout */
+	frame;
+	/** what the page shows behind this region — see ChangesetLike.ground.
+	*  Read on first use: finding it walks the region's ancestors' computed
+	*  styles, and most passes never crossfade a skin that needs it. */
+	get ground() {
+		if (typeof this.groundSource === "function") this.groundSource = this.groundSource();
+		return this.groundSource;
+	}
+	groundSource;
+	constructor(inserted, removed, kept, beacons = /* @__PURE__ */ new Map(), measureZoom = 1, frame, ground, measureBeacon) {
+		this.inserted = inserted;
+		this.removed = removed;
+		this.kept = kept;
+		this.beacon = (name) => {
+			if (!beacons.has(name) && measureBeacon) {
+				const bounds = measureBeacon(name);
+				if (bounds) beacons.set(name, bounds);
+				return bounds;
+			}
+			return beacons.get(name) ?? null;
+		};
+		this.measureZoom = measureZoom;
+		this.frame = frame;
+		this.groundSource = ground;
+	}
+	get all() {
+		return [
+			...this.kept,
+			...this.inserted,
+			...this.removed
+		];
+	}
+	/** something happened this pass that a choreography could animate */
+	get dirty() {
+		return this.inserted.length > 0 || this.removed.length > 0 || this.kept.some((s) => !isStill(s));
+	}
+	sprites(query) {
+		if (Array.isArray(query)) {
+			const out = [];
+			for (const q of query) for (const s of this.sprites(q)) if (!out.includes(s)) out.push(s);
+			return out;
+		}
+		let pool;
+		switch (query.type) {
+			case "inserted":
+				pool = this.inserted;
+				break;
+			case "removed":
+				pool = this.removed;
+				break;
+			case "kept":
+				pool = this.kept;
+				break;
+			case "still":
+				pool = this.kept.filter(isStill);
+				break;
+			case "moved":
+				pool = this.kept.filter((s) => !isStill(s));
+				break;
+			case "received":
+				pool = this.kept.filter((s) => s.counterpart);
+				break;
+			case "counterpart":
+				pool = this.removed.filter((s) => s.claimed);
+				break;
+			case "departed":
+				pool = this.removed.filter((s) => !s.claimed && !s.sent);
+				break;
+			default: pool = this.all;
+		}
+		return pool.filter((s) => (query.id === void 0 || s.id === query.id) && (query.role === void 0 || s.role === query.role) && (!query.onstage || onstage(s)));
+	}
+	sprite(query) {
+		const found = this.sprites(query);
+		if (found.length > 1) throw new Error(`choreo: more than one sprite matches ${JSON.stringify(query)}`);
+		return found[0] ?? null;
+	}
+};
+//#endregion
+//#region ../choreo/src/choreo.gts
+/**
+* <Choreo> — boxel-motion's AnimationContext for glimmer-motion: a region that
+* watches its render passes, hands each one's changeset (inserted / removed /
+* kept participants, with their bounds before and after) to the timeline
+* declared inside it, and plays that timeline on the motion-dom engine.
+*
+*   <Choreo as |c|>
+*     <div {{motion id='a' role='card'}}>…</div>
+*     <c.Sequence>
+*       <c.Tween @of={{c.removed 'card'}} @opacity={{0}} @ms={{200}} />
+*       <c.Move  @of={{c.kept 'card'}} />
+*     </c.Sequence>
+*   </Choreo>
+*
+* packages/choreo-gallery/realm/docs/choreography.md has the whole design and the legacy it descends from.
+*/
+/** `{{c.kept 'card'}}` narrows by role; bare `{{c.kept}}` is handed over uncalled, so the function is a Query too */
+var selector = (type) => Object.assign((role) => role === void 0 ? { type } : {
+	role,
+	type
+}, { type });
+/** what the region yields: the step components and the sprite queries */
+function contextFor(region) {
+	return {
+		Aim,
+		Attach,
+		Camera,
+		Camera3D,
+		Crossing,
+		Follow,
+		Frame,
+		Gate,
+		Hold,
+		Move,
+		Pan,
+		Parallel,
+		Perform,
+		Raise,
+		Scroll,
+		Sequence,
+		SlowZoom,
+		Spring,
+		Tether,
+		Tween,
+		Wait,
+		advance: () => region.run?.advance(),
+		all: selector(),
+		beacon: (beacon) => ({ beacon }),
+		gesture: GESTURE,
+		counterpart: selector("counterpart"),
+		id: (id) => ({ id }),
+		inserted: selector("inserted"),
+		kept: selector("kept"),
+		moved: selector("moved"),
+		onstage: (query) => ({
+			...query,
+			onstage: true
+		}),
+		received: selector("received"),
+		removed: selector("removed"),
+		role: (role) => ({ role }),
+		get camera() {
+			return region.cameraState;
+		},
+		get run() {
+			return region.run ?? null;
+		},
+		still: selector("still")
+	};
+}
+var debugStyle;
+/**
+* A fingerprint of the collected timeline tree, for telling an EDIT from
+* noise while a run's own orphans are aloft. Mid-flight, compiled cues are
+* value-laden (every re-measure shifts them), so sameScore cannot answer
+* "did the author change the timeline?" — but the tree can: it is template
+* state, identical under noise, different under any real edit. Functions
+* (property sources) print by identity: a fresh function is a change we
+* cannot disprove, and recompiling is the safe answer.
+*/
+var fnIds = /* @__PURE__ */ new WeakMap();
+var nextFnId = 0;
+function treePrint(tree) {
+	return JSON.stringify(tree, (_key, value) => {
+		if (typeof value === "function") {
+			let id = fnIds.get(value);
+			if (id === void 0) fnIds.set(value, id = ++nextFnId);
+			return `fn#${id}`;
+		}
+		return value;
+	});
+}
+/**
+* The color the page actually shows behind this region — the nearest
+* ancestor (the region itself included) wearing a background with any
+* alpha at all. What a crossing blends a semi-transparent skin against
+* when it turns opacity into an actual color (§4.7). Undefined when the
+* whole chain is transparent; the crossfade then stays a plain dissolve.
+*/
+function groundOf(root) {
+	let el = root;
+	while (el) {
+		const bg = getComputedStyle(el).backgroundColor;
+		if (bg && bg !== "transparent" && !/rgba\([^)]*,\s*0\)$/.test(bg)) return bg;
+		el = el.parentElement;
+	}
+}
+/**
+* Whether motion is reduced for a region, by the MotionConfig it sits in:
+* `'user'` (glimmer-motion's default) follows `prefers-reduced-motion`,
+* `'always'` and `'never'` decide outright. Read as each run begins, so a
+* preference changed mid-session holds from the next pass.
+*/
+function reducesMotion(root) {
+	const policy = closestMotionConfig(root).reducedMotion ?? "user";
+	if (policy !== "user") return policy === "always";
+	return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/** whether an element scrolls its content on either axis */
+function scrolls(el) {
+	const { overflowX, overflowY } = getComputedStyle(el);
+	return [overflowX, overflowY].some((o) => o === "auto" || o === "scroll" || o === "overlay");
+}
+/** the nearest ancestor that scrolls vertically: what `@inView` calls the view */
+function scrollerOf(el) {
+	for (let p = el.parentElement; p; p = p.parentElement) {
+		const overflow = getComputedStyle(p).overflowY;
+		if (overflow === "auto" || overflow === "scroll" || overflow === "overlay") return p;
+	}
+	return null;
+}
+/**
+* The barrier books one post-render callback for every region taking part in a
+* pass. `joinPass(this)` is where the region's PassHost contract (measurePass /
+* finishPass) is type-checked — it is not on the class, because a `.gts` class
+* header cannot carry two `implements` clauses through the build.
+*/
+setPassScheduler((run) => postRender(run));
+setBeforeMeasure(() => flushPendingMounts());
+var Choreo = class extends Component {
+	element;
+	orphanLayer;
+	raisedLayer;
+	tetherLayer;
+	/** tracked mirror of the frame's resting state — see ChoreoContext.camera */
+	static {
+		decorateFieldV2(this.prototype, "cameraState", [tracked], function() {
+			return {
+				x: 0,
+				y: 0,
+				zoom: 1
+			};
+		});
+	}
+	#cameraState = (initializeDeferredDecorator(this, "cameraState"), void 0);
+	/**
+	* The same state, untracked, for the pass pipeline itself. A pass runs
+	* inside computations that must not CONSUME the tracked mirror — a pass
+	* that read it would be invalidated by the very landing it causes, and
+	* the region would render forever.
+	*/ /** where a c.Camera3D left the shot, carried between runs — seeded by
+	*  `@camera3dFrom` when the host knows its own opening pose */
+	resting3d = this.args.camera3dFrom ? { ...this.args.camera3dFrom } : {
+		dolly: 1,
+		pitch: 0,
+		x: 0,
+		y: 0,
+		yaw: 0
+	};
+	restingCamera = {
+		x: 0,
+		y: 0,
+		zoom: 1
+	};
+	participants = /* @__PURE__ */ new Set();
+	/** registered since the last pass */
+	arrived = /* @__PURE__ */ new Set();
+	/** destroyed before the pass that removed them has been processed */
+	claimed = /* @__PURE__ */ new Set();
+	/** every beacon name this region's score has read, so a pass measures
+	*  those beacons and not the whole page's */
+	beaconNames = /* @__PURE__ */ new Set();
+	/** removed participants this region is keeping alive in its orphan layer */
+	orphans = /* @__PURE__ */ new Set();
+	/** participants whose Presence is letting them go: removed once, not on every pass while they leave */
+	leaving = /* @__PURE__ */ new Set();
+	snapshots = /* @__PURE__ */ new Map();
+	/** the stylesheet animations the region showed before the render, for the memories of what it removes */
+	shownAnimations = /* @__PURE__ */ new Map();
+	/** every scroll offset inside the region, kept as it scrolls: a removed element has lost its own */
+	scrolls;
+	/** participants with no layout box before this pass (display: none) */
+	unrendered = /* @__PURE__ */ new Set();
+	/** the whole region had no layout box before this pass (hidden by an ancestor) */
+	covered = false;
+	/** where the run stopped by a cover had its loops: the next run carries them on */
+	coveredLoops;
+	rootSnapshot;
+	passPending = false;
+	rendered = false;
+	run;
+	context = contextFor(this);
+	/** the last changeset this region built — read it from a property function or a test */
+	changeset;
+	constructor(owner, args) {
+		super(owner, args);
+		trackGestures();
+		const stopProbe = registerBusyProbe(() => {
+			if (this.passPending) return `<Choreo${this.args.id ? ` ${this.args.id}` : ""}> pass pending`;
+			if (this.run && !this.run.isDone() && !this.run.parked && !this.run.standing) return `<Choreo${this.args.id ? ` ${this.args.id}` : ""}> run in flight`;
+			if (this.run?.delivering) return `<Choreo${this.args.id ? ` ${this.args.id}` : ""}> delivery in flight`;
+			return false;
+		});
+		registerDestructor(this, () => {
+			stopProbe();
+			leave(this);
+			this.run?.cancel();
+			this.run = void 0;
+			this.unquiet();
+			this.viewObserver?.disconnect();
+			this.snapshots.clear();
+			this.unrendered.clear();
+			this.coveredLoops = void 0;
+			for (const node of [...this.orphans, ...this.claimed]) this.drop(node);
+		});
+	}
+	/** SPIKE (Lane): providers from outside the markup, appended to every collected tree */
+	contributors = /* @__PURE__ */ new Set();
+	contribute(provider) {
+		this.contributors.add(provider);
+		return () => {
+			this.contributors.delete(provider);
+		};
+	}
+	/** the run an attachment drives: the one playing or holding, none between runs */
+	currentRun() {
+		return this.run ?? null;
+	}
+	/** the region's own steps in document order, then whatever was contributed from outside */
+	collectTree(root) {
+		const tree = collect(root);
+		for (const provider of this.contributors) tree.push(provider.node());
+		return tree;
+	}
+	register(node) {
+		this.participants.add(node);
+		this.arrived.add(node);
+		this.watchView(node);
+		if (this.args.debug && node.element) {
+			node.element.style.outline = "1px dotted #16a34a";
+			if (node.ownAnimation) console.warn(`choreo: participant '${node.id ?? node.role}' carries its own animate/exit/initial — a second scheduler beside the timeline`);
+			if (node.presenceManaged) console.warn(`choreo: participant '${node.id ?? node.role}' is inside a <Presence> — the region already retains its own leavers`);
+		}
+		return () => {
+			this.participants.delete(node);
+			this.arrived.delete(node);
+			this.unwatchView(node);
+		};
+	}
+	/** sat out a pass since the last one it watched (`@idle`) */
+	slept = false;
+	/** participants inside the view or its margin, as the observer last saw them */
+	nearView = /* @__PURE__ */ new Set();
+	/** what the last pass animated: kept wired until a pass lets it go, so a
+	*  block that leaves the margin mid-flight is not cut loose halfway */
+	flying = /* @__PURE__ */ new Set();
+	viewNodes = /* @__PURE__ */ new WeakMap();
+	viewObserver;
+	viewRoot = null;
+	/** the `@inViewMargin` the current observer was made with */
+	viewMarginUsed;
+	get viewMargin() {
+		return this.args.inViewMargin ?? 1;
+	}
+	watchView(node) {
+		const el = node.element;
+		if (!this.args.inView || !el) return;
+		if (!this.viewObserver) {
+			this.viewRoot = this.element ? scrollerOf(this.element) : null;
+			this.viewMarginUsed = this.viewMargin;
+			this.viewObserver = new IntersectionObserver((entries) => {
+				for (const entry of entries) {
+					const seen = this.viewNodes.get(entry.target);
+					if (!seen) continue;
+					if (entry.isIntersecting) this.nearView.add(seen);
+					else this.nearView.delete(seen);
+				}
+			}, {
+				root: this.viewRoot,
+				rootMargin: `${this.viewMargin * 100}% 0px`
+			});
+		}
+		this.viewNodes.set(el, node);
+		this.viewObserver.observe(el);
+	}
+	/**
+	* `@inView` and `@inViewMargin` can change after participants registered:
+	* switched on (or given a new margin), the region observes every current
+	* participant and wires the ones already near the view now (the observer
+	* reports only after the next frame); switched off, it lets the observer
+	* go and wires everything again.
+	*/
+	syncViewWatch() {
+		if (this.args.inView && this.viewObserver && this.viewMarginUsed !== this.viewMargin) {
+			this.viewObserver.disconnect();
+			this.viewObserver = void 0;
+			this.nearView.clear();
+		}
+		if (this.args.inView && !this.viewObserver) {
+			for (const node of this.participants) this.watchView(node);
+			if (this.viewObserver) {
+				const near = this.nearViewBand();
+				for (const node of this.participants) {
+					const r = node.element && measure(node.element)?.el;
+					if (r && r.bottom >= near.top && r.top <= near.bottom) this.nearView.add(node);
+				}
+			}
+		} else if (!this.args.inView && this.viewObserver) {
+			this.viewObserver.disconnect();
+			this.viewObserver = void 0;
+			this.viewRoot = null;
+			this.nearView.clear();
+			this.flying.clear();
+		}
+	}
+	unwatchView(node) {
+		this.nearView.delete(node);
+		if (node.element) this.viewObserver?.unobserve(node.element);
+	}
+	/** the view and its margin, in viewport px; read once per pass */
+	nearViewBand() {
+		const r = this.viewRoot ? this.viewRoot.getBoundingClientRect() : {
+			bottom: window.innerHeight,
+			top: 0
+		};
+		const margin = (r.bottom - r.top) * this.viewMargin;
+		return {
+			bottom: r.bottom + margin,
+			margin,
+			top: r.top - margin
+		};
+	}
+	claim(node) {
+		if (this.orphans.has(node)) return true;
+		if (this.passPending) {
+			this.claimed.add(node);
+			return true;
+		}
+		return false;
+	}
+	get renderDetector() {
+		consumeTag(VOLATILE_TAG);
+		snapshotOnRender();
+		if (this.args.idle) {
+			this.slept = true;
+			return;
+		}
+		if (this.slept) {
+			this.slept = false;
+			this.arrived.clear();
+		}
+		if (!this.passPending) {
+			this.passPending = true;
+			this.syncViewWatch();
+			this.snapshot();
+			join(this);
+		}
+	}
+	snapshot() {
+		this.snapshots.clear();
+		this.unrendered.clear();
+		this.covered = !!this.element && !isRendered(this.element);
+		if (this.covered) return;
+		this.rootSnapshot = this.element?.getBoundingClientRect();
+		this.shownAnimations = this.element ? readAnimations(this.element) : /* @__PURE__ */ new Map();
+		const wired = this.args.inView ? this.nearView : void 0;
+		for (const node of this.participants) {
+			const el = node.element;
+			if (el?.isConnected && !this.orphans.has(node) && (!wired || wired.has(node) || this.flying.has(node))) {
+				const snap = measure(el);
+				if (snap) this.snapshots.set(node, snap);
+				else this.unrendered.add(node);
+			}
+		}
+	}
+	/**
+	* A pass on a region hidden by an ancestor plays nothing: arrivals were
+	* never seen arriving, and leavers go now. A <Presence>-managed leaver
+	* belongs to its Presence, as on any pass with nothing to play, unless
+	* the run that played its exit is stopped here.
+	*
+	* The run in flight is stopped too. Nobody can see it, and a run left
+	* going under the cover keeps its clock ticking and writing every frame
+	* (a standing tether redraws its wire on each one). Its loops' phases
+	* are kept, so the run that follows the cover carries them on.
+	*/
+	declineUnseen() {
+		const run = this.run;
+		if (run) {
+			this.coveredLoops = run.loopPhases();
+			run.cancel();
+			this.run = void 0;
+			this.unquiet();
+		}
+		this.arrived.clear();
+		this.snapshots.clear();
+		this.unrendered.clear();
+		for (const node of [...this.claimed, ...this.orphans]) this.drop(node);
+		for (const node of this.participants) if (!node.isPresent && (!node.presenceManaged || run && this.leaving.has(node))) {
+			this.leaving.delete(node);
+			node.exitComplete();
+		}
+	}
+	/** phase 1: what changed this pass, measured — nothing is played yet */
+	measurePass() {
+		this.passPending = false;
+		const root = this.element;
+		if (!root) return;
+		if (!isRendered(root)) {
+			this.declineUnseen();
+			return;
+		}
+		if (this.covered) this.snapshot();
+		if (this.fastKeep(root)) return;
+		this.run?.releaseForMeasure();
+		if (this.args.route && this.arrived.size && this.snapshots.size) {
+			const intent = this.args.scroll ?? "top";
+			const y = intent === "top" ? 0 : intent();
+			window.scrollTo(0, y);
+		}
+		const before = this.rootSnapshot ?? root.getBoundingClientRect();
+		const after = root.getBoundingClientRect();
+		const inserted = [];
+		const removed = [];
+		const kept = [];
+		const sprite = (node, type, initial, final) => ({
+			delta: initial && final ? {
+				height: final.page.height - initial.page.height,
+				width: final.page.width - initial.page.width,
+				x: final.page.x - initial.page.x,
+				y: final.page.y - initial.page.y
+			} : void 0,
+			element: node.element,
+			final,
+			id: node.id,
+			initial,
+			node,
+			role: node.role,
+			type
+		});
+		const near = this.args.inView ? this.nearViewBand() : void 0;
+		const arrive = (node, el) => {
+			const now = measure(el);
+			if (!now) return;
+			if (near) {
+				if (now.el.bottom < near.top || now.el.top > near.bottom) return;
+				this.nearView.add(node);
+			}
+			inserted.push(sprite(node, "inserted", void 0, boundsOf(now, after)));
+		};
+		const candidates = new Set([
+			...this.participants,
+			...this.claimed,
+			...this.orphans
+		]);
+		for (const node of candidates) {
+			const el = node.element;
+			if (!el) continue;
+			const snap = this.snapshots.get(node);
+			if (this.orphans.has(node)) {
+				const prior = this.orphanBounds.get(node);
+				removed.push(sprite(node, "removed", prior));
+			} else if (this.arrived.has(node)) arrive(node, el);
+			else if (!el.isConnected || this.claimed.has(node)) {
+				if (this.leaving.has(node)) {
+					this.leaving.delete(node);
+					this.drop(node);
+				} else if (snap) removed.push(sprite(node, "removed", boundsOf(snap, before)));
+				else if (this.claimed.has(node)) this.drop(node);
+			} else if (!node.isPresent) {
+				if (!this.leaving.has(node) && (snap || this.unrendered.has(node))) {
+					this.leaving.add(node);
+					removed.push(sprite(node, "removed", snap && boundsOf(snap, before)));
+				}
+			} else if (this.unrendered.has(node)) arrive(node, el);
+			else if (snap) {
+				this.leaving.delete(node);
+				const now = measure(el);
+				if (now) kept.push(sprite(node, "kept", boundsOf(snap, before), boundsOf(now, after)));
+			}
+		}
+		for (const s of inserted) {
+			if (s.id === null) continue;
+			const old = removed.find((r) => r.id === s.id && !r.counterpart);
+			if (old) {
+				old.claimed = true;
+				s.counterpart = old;
+				s.initial = old.initial;
+				s.type = "kept";
+				s.delta = s.initial && s.final && {
+					height: s.final.page.height - s.initial.page.height,
+					width: s.final.page.width - s.initial.page.width,
+					x: s.final.page.x - s.initial.page.x,
+					y: s.final.page.y - s.initial.page.y
+				};
+			}
+		}
+		if (near && kept.some((s) => Math.abs(s.delta?.y ?? 0) > near.margin)) {
+			for (const s of removed) this.drop(s.node);
+			inserted.length = 0;
+			kept.length = 0;
+			removed.length = 0;
+		}
+		if (near) this.flying = new Set([...inserted, ...kept.filter((s) => s.delta && (s.delta.x || s.delta.y))].map((s) => s.node));
+		this.arrived.clear();
+		this.snapshots.clear();
+		this.unrendered.clear();
+		const claimed = [...this.claimed];
+		this.claimed.clear();
+		return {
+			claimed,
+			host: this,
+			inserted,
+			kept,
+			removed,
+			root
+		};
+	}
+	/** phase 3: identities are settled — compile this region's timeline and play it */
+	finishPass(pass) {
+		const { claimed, inserted, kept, root } = pass;
+		const removed = pass.removed.filter((s) => !s.sent);
+		for (const s of pass.removed) if (s.sent) this.finish(s);
+		const after = root.getBoundingClientRect();
+		const layoutWidth = root.offsetWidth;
+		const shadow = this.run?.camera.zoom ?? this.restingCamera.zoom;
+		const painted = layoutWidth > 0 ? after.width / layoutWidth : 0;
+		const measureZoom = !painted || Math.abs(painted - shadow) < .004 ? shadow : painted;
+		const changeset = new Changeset(inserted.filter((s) => s.type === "inserted"), removed, [...kept, ...inserted.filter((s) => s.type === "kept")], measureBeacons(after, this.beaconNames), measureZoom, {
+			height: after.height / measureZoom,
+			width: after.width / measureZoom
+		}, () => groundOf(root), (name) => {
+			this.beaconNames.add(name);
+			return measureBeacons(after, [name]).get(name) ?? null;
+		});
+		this.changeset = changeset;
+		const firstRender = !this.rendered;
+		this.rendered = true;
+		if (this.args.route && motionSpeed() === 0) {
+			for (const node of claimed) this.drop(node);
+			for (const s of removed) this.finish(s);
+			return;
+		}
+		const tree = firstRender ? [] : this.collectTree(root);
+		const compiled = tree.length ? compile(tree, changeset) : {
+			cues: [],
+			gates: []
+		};
+		const cues = compiled.cues;
+		if (this.run && !this.run.isDone()) {
+			const scored = new Set(cues.map((c) => c.sprite.node));
+			for (const [node, transition] of this.run.midflight()) {
+				if (scored.has(node)) continue;
+				const s = changeset.kept.find((k) => k.node === node);
+				if (!s) continue;
+				const cue = continuation(s, changeset, transition);
+				if (cue) cues.push(cue);
+			}
+			for (const [node, fades] of this.run.midfade()) {
+				const s = changeset.kept.find((k) => k.node === node);
+				if (!s) continue;
+				const driven = new Set(cues.filter((c) => c.sprite.node === node).flatMap((c) => [...Object.keys(c.target ?? {}), ...Object.keys(c.hold?.values ?? {})]));
+				for (const fade of fades) {
+					const to = Object.fromEntries(Object.entries(fade.to).filter(([key]) => !driven.has(key)));
+					if (Object.keys(to).length) cues.push(fadeOn(s, to, fade.remaining, fade.delay));
+				}
+			}
+		}
+		if (!cues.length) {
+			for (const node of claimed) this.drop(node);
+			for (const s of removed) {
+				if (s.node.presenceManaged && !s.node.isPresent && s.element.isConnected && !this.orphans.has(s.node)) {
+					this.leaving.delete(s.node);
+					continue;
+				}
+				this.finish(s);
+			}
+			return;
+		}
+		const print = treePrint(tree);
+		const nothingNew = !inserted.length && pass.removed.every((s) => this.orphans.has(s.node)) && (this.orphans.size > 0 || !changeset.sprites({ type: "moved" }).length) && this.layoutOf() === this.layoutPrint && print === this.scorePrint;
+		if (this.run && !this.run.isDone() && nothingNew) {
+			for (const node of claimed) this.drop(node);
+			this.run.reassert();
+			return;
+		}
+		if (this.run && !this.run.isDone() && !inserted.length && !pass.removed.length && !compiled.gates.length && print === this.scorePrint && sameScore(this.run.cues, cues)) {
+			for (const node of claimed) this.drop(node);
+			this.run.reassert();
+			return;
+		}
+		const named = new Set(cues.map((c) => c.sprite));
+		for (const s of [...kept, ...inserted]) if (s.counterpart && named.has(s)) named.add(s.counterpart);
+		const prior = this.run;
+		const inherited = prior !== void 0 && !prior.isDone() ? print === this.scorePrint ? {
+			aim: prior.initialAim,
+			camera: prior.initialCamera
+		} : {
+			aim: prior.cameraAim,
+			camera: prior.camera
+		} : {
+			aim: prior?.cameraAim ?? null,
+			camera: this.restingCamera
+		};
+		const shot3d = prior !== void 0 && !prior.isDone() ? prior.camera3d : this.resting3d;
+		const loops = prior?.loopPhases() ?? this.coveredLoops;
+		this.coveredLoops = void 0;
+		const continuing = prior?.inFlight ?? false;
+		prior?.cancel(new Set([...named].map((s) => s.node)));
+		for (const s of removed) if (!named.has(s)) this.finish(s);
+		else if (!s.element.isConnected || claimed.includes(s.node)) this.orphan(s, removed, s.claimed === true);
+		if (this.args.debug) {
+			for (const s of removed) if (!named.has(s)) console.warn(`choreo: removed participant '${s.id ?? s.role}' is named by no step — it vanishes without a frame`);
+			this.log(changeset, cues);
+		}
+		this.scorePrint = print;
+		this.layoutPrint = this.layoutOf();
+		if (this.args.quiet) this.quiet();
+		this.run = execute(compiled, {
+			camera: { ...inherited.camera },
+			camera3d: { ...shot3d },
+			cameraFrame: this.element,
+			reduced: this.element ? reducesMotion(this.element) : false,
+			cameraAim: inherited.aim,
+			onCamera3D: (state) => {
+				this.resting3d = state;
+				this.args.onCamera3D?.(state);
+			},
+			onCamera: (state) => {
+				const prior = this.restingCamera;
+				this.restingCamera = state;
+				if (prior.zoom !== state.zoom || prior.x !== state.x || prior.y !== state.y) postRender(() => this.cameraState = state);
+			},
+			raisedLayer: this.raisedLayer,
+			tetherLayer: this.tetherLayer,
+			continuing,
+			inherit: prior?.velocities,
+			loops,
+			onPerform: this.args.onPerform,
+			onPerformReset: this.args.onPerformReset,
+			onSpriteDone: (s) => this.finish(s),
+			removed: removed.filter((s) => named.has(s)),
+			doomed: !kept.length && !inserted.length && removed.length > 0,
+			maxFrameStep: this.args.maxFrameStep
+		});
+		if (this.args.quiet) {
+			const run = this.run;
+			run.finished.then(() => {
+				if (this.run === run) this.unquiet();
+			});
+		}
+	}
+	orphanBounds = /* @__PURE__ */ new Map();
+	/** the fingerprint of the tree the current run compiled from (see treePrint) */
+	scorePrint;
+	/** the layout every participant stood in when the run compiled (see layoutPrint) */
+	layoutPrint;
+	/**
+	* Where the stylesheet puts each participant, as a string.
+	*
+	* `offsetLeft/Top/Width/Height` and NOT a bounding rect, because the
+	* difference is the whole point: a rect includes the transform a flight
+	* is writing, so a moving element reads as different on every frame,
+	* while offsets are the box layout asked for — steady under a transform,
+	* and different the moment something actually reflows. Integers, too,
+	* which quietly forgives the sub-pixel noise a busy page generates.
+	*
+	* A Move that animates real width/height (`@size={{true}}`) does change
+	* these, so such a run never takes the fast path. That is the honest
+	* answer rather than a missed optimisation: a run writing layout cannot
+	* be told apart from a page writing layout without measuring.
+	*
+	* Offsets are accumulated up the offset chain to the region, not read
+	* at the participant alone, because what a render moves may be an
+	* ANCESTOR that is no participant of anything — Escort's seat, one
+	* positioned wrapper carrying three participants. Read flat, the
+	* fingerprint was blind to exactly the reflow a retarget makes, the
+	* pass was declined, and the old run played on against the moved
+	* layout: card, badge and shadow teleported a whole bay, together. The
+	* walk stops at the region's edge so the page above it stays out of the
+	* print — a busy neighbour reflowing above the region must not cancel
+	* its runs.
+	*/
+	layoutOf() {
+		const root = this.element;
+		const parts = [];
+		for (const node of this.participants) {
+			const el = node.element;
+			if (!el || !el.isConnected) continue;
+			let x = 0;
+			let y = 0;
+			let walk = el;
+			while (walk && walk !== root && root?.contains(walk)) {
+				x += walk.offsetLeft;
+				y += walk.offsetTop;
+				const parent = walk.offsetParent;
+				walk = parent instanceof HTMLElement ? parent : null;
+			}
+			parts.push(`${node.id ?? node.role ?? ""}@${x},${y},${el.offsetWidth},${el.offsetHeight}`);
+		}
+		let sx = 0;
+		let sy = 0;
+		for (let a = root?.parentElement; a; a = a.parentElement) {
+			sx += a.scrollLeft;
+			sy += a.scrollTop;
+			if (a !== document.documentElement && scrolls(a)) break;
+		}
+		parts.push(`scroll@${Math.round(sx)},${Math.round(sy)}`);
+		return parts.join("|");
+	}
+	/**
+	* Can this pass be declined outright? Only while a run is in flight, and
+	* only when nothing the pass could discover would change it: no arrivals,
+	* no retentions pending, every participant either present or already a
+	* known leaver, the collected timeline tree fingerprints identical to the
+	* one the run compiled from (an EDIT always replays), and every
+	* participant standing in the same layout box it compiled in (a REFLOW
+	* always replays — it is what a Move is FOR). Anything else takes the
+	* full pipeline.
+	*
+	* A run that is nothing but ambient loops counts as in flight after its
+	* clock ends, for as long as the loops go round. A loop lends its run no
+	* length, so a loop-only run ends as soon as it starts, and without this
+	* every later app render would replace the run, cancelling each loop's
+	* animation for a new one. The layout check still applies to such a run.
+	* A loop on a layout property (width, height) changes the boxes
+	* `layoutOf` reads on every frame, so no pass matches the layout the run
+	* compiled in, and each one replaces the run, as it does a Move that
+	* animates size. A score with anything besides loops in it has a
+	* timeline to re-fire (§3.1), so once it ends, a pass takes the full
+	* pipeline.
+	*/
+	fastKeep(root) {
+		if (!this.run || this.run.isDone() && !this.run.isLooping() || this.claimed.size || this.arrived.size) return false;
+		if (this.run.paused) return false;
+		for (const node of this.participants) {
+			const el = node.element;
+			if (!el || !el.isConnected) return false;
+			if (!node.isPresent && !this.leaving.has(node) && !this.orphans.has(node)) return false;
+		}
+		return treePrint(this.collectTree(root)) === this.scorePrint && this.layoutOf() === this.layoutPrint;
+	}
+	/** what quiet() paused, accumulated across replaced runs, resumed as one */
+	quieted = [];
+	quiet() {
+		for (const animation of document.getAnimations()) if (animation.playState === "running") {
+			animation.pause();
+			this.quieted.push(animation);
+		}
+	}
+	unquiet() {
+		for (const animation of this.quieted.splice(0)) try {
+			animation.play();
+		} catch {}
+	}
+	orphan(s, removed, extract = false) {
+		const inside = removed.some((o) => o !== s && o.element !== s.element && o.element.contains(s.element));
+		if (inside && !extract || !s.initial) return;
+		const layer = this.orphanLayer;
+		const root = this.element;
+		if (!layer || !root) return;
+		const now = root.getBoundingClientRect();
+		const sx = root.offsetWidth ? now.width / root.offsetWidth : 1;
+		const sy = root.offsetHeight ? now.height / root.offsetHeight : 1;
+		if (inside) {
+			const seat = document.createElement("div");
+			seat.style.width = `${s.initial.page.width / sx}px`;
+			seat.style.height = `${s.initial.page.height / sy}px`;
+			s.element.parentElement?.insertBefore(seat, s.element);
+		}
+		const { page } = s.initial;
+		const el = s.element;
+		el.style.position = "absolute";
+		el.style.left = `${(page.x - now.left) / sx}px`;
+		el.style.top = `${(page.y - now.top) / sy}px`;
+		el.style.width = `${page.width / sx}px`;
+		el.style.height = `${page.height / sy}px`;
+		el.style.boxSizing = "border-box";
+		el.style.margin = "0";
+		keepAsMemory(el, {
+			animations: this.shownAnimations,
+			scrolls: this.scrolls ?? /* @__PURE__ */ new Map()
+		}, () => layer.appendChild(el));
+		this.orphans.add(s.node);
+		this.orphanBounds.set(s.node, s.initial);
+	}
+	/** a removed sprite's row has ended */
+	finish(s) {
+		if (this.orphans.has(s.node) || this.participants.has(s.node)) {
+			if (!s.element.isConnected || this.orphans.has(s.node)) this.drop(s.node);
+			else if (!s.node.isPresent) s.node.exitComplete();
+		} else this.drop(s.node);
+	}
+	drop(node) {
+		const el = node.element;
+		if (el && this.orphans.has(node) && el.parentElement === this.orphanLayer) el.remove();
+		this.orphans.delete(node);
+		this.orphanBounds.delete(node);
+		this.claimed.delete(node);
+		this.leaving.delete(node);
+		this.participants.delete(node);
+		node.release();
+	}
+	log(changeset, cues) {
+		const id = this.args.id ?? "";
+		const row = (s) => ({
+			choreo: id,
+			final: s.final ? JSON.stringify(s.final.context) : null,
+			id: s.id,
+			initial: s.initial ? JSON.stringify(s.initial.context) : null,
+			role: s.role,
+			type: s.type
+		});
+		console.table(changeset.all.map(row));
+		console.table(cues.map((c) => ({
+			choreo: id,
+			duration: Math.round(c.duration),
+			sprite: c.sprite.id ?? c.sprite.role,
+			start: Math.round(c.start),
+			step: c.kind,
+			values: JSON.stringify(c.target ?? c.hold?.values ?? null)
+		})));
+	}
+	host = modifier((el) => {
+		this.element = el;
+		setChoreoHost(el, this);
+		const scrolls = trackScrolls(el);
+		this.scrolls = scrolls.scrolls;
+		if (getComputedStyle(el).position === "static") el.style.position = "relative";
+		if (this.args.debug) {
+			el.style.outline = "1px dashed #2563eb";
+			if (!debugStyle) {
+				debugStyle = document.createElement("style");
+				debugStyle.textContent = "[data-choreo-orphans] > * { outline: 1px dotted #dc2626 !important; }";
+				document.head.appendChild(debugStyle);
+			}
+		}
+		return () => {
+			scrolls.stop();
+			setChoreoHost(el, void 0);
+			this.element = void 0;
+		};
+	});
+	layer = modifier((el) => {
+		this.orphanLayer = el;
+		return () => {
+			this.orphanLayer = void 0;
+		};
+	});
+	raised = modifier((el) => {
+		this.raisedLayer = el;
+		return () => {
+			this.raisedLayer = void 0;
+		};
+	});
+	tethers = modifier((el) => {
+		this.tetherLayer = el;
+		return () => {
+			this.tetherLayer = void 0;
+		};
+	});
+	/**
+	* The host is the scene: participants are its DIRECT children, so the
+	* author's own grid/flex layout on the region element applies to them —
+	* a wrapper here would silently unhook every gap and track. c.Camera
+	* therefore drives the host element itself (§6.3), and the overlay
+	* layers ride the frame with the content they annotate.
+	*/
+	static {
+		setComponentTemplate(templateFactory({
+			"id": "tO7YRYBM",
+			"block": "[[[1,[30,0,[\"renderDetector\"]]],[1,\"\\n\"],[11,0],[16,\"data-choreo\",[52,[30,1],[30,1],\"\"]],[24,\"data-motion-host\",\"\"],[17,2],[24,\"data-motion-render-detector\",\"\"],[4,[30,0,[\"host\"]],null,null],[12],[1,\"\\n  \"],[11,0],[24,\"data-choreo-orphans\",\"\"],[24,5,\"position:absolute;inset:0;pointer-events:none;overflow:visible\"],[4,[30,0,[\"layer\"]],null,null],[12],[13],[1,\"\\n\"],[1,\"  \"],[11,0],[24,\"data-choreo-raised\",\"\"],[24,5,\"position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:2147483000\"],[4,[30,0,[\"raised\"]],null,null],[12],[13],[1,\"\\n\"],[1,\"  \"],[11,\"svg\"],[24,\"data-choreo-tethers\",\"\"],[24,5,\"position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible\"],[4,[30,0,[\"tethers\"]],null,null],[12],[13],[1,\"\\n  \"],[18,3,[[30,0,[\"context\"]]]],[1,\"\\n\"],[13]],[\"@id\",\"&attrs\",\"&default\"],[\"if\",\"yield\"]]",
+			"moduleName": "/home/runner/work/boxel/boxel/packages/choreo/src/choreo.gts",
+			"isStrictMode": true
+		}), this);
+	}
+};
+//#endregion
+export { Choreo as t };