kuinetic 0.1.3 → 0.2.0

package/dist/esm/chunk-RVTYN6NZ.mjs

@@ -0,0 +1,3446 @@
+import {
+  ATTR,
+  KUI_EVENT,
+  Registry,
+  SEGMENT_HOIST_KEYS,
+  applyToggleVerb,
+  assignOnce,
+  breakpointsIn,
+  control,
+  createActivationBinder,
+  createCssInstance,
+  createGateWatcher,
+  createRootResolver,
+  createScrollScheduler,
+  cssEasingValue,
+  directionValue,
+  emitLifecycle,
+  gateMatches,
+  gatedAnimationName,
+  gatesOverlap,
+  isInfiniteRepeat,
+  isOneShot,
+  isSafeCssValue,
+  parse,
+  parseActivationAttribute,
+  parseToggleActions,
+  play,
+  playbackExpression,
+  queryScoped,
+  readEffectParams,
+  readEffectTiming,
+  repeatCount,
+  resolveActivationSpec,
+  resolveParams,
+  resolvePlayback,
+  selectorBreadth,
+  splitTopLevel,
+  startKindOf,
+  suggest,
+  timingProperty,
+  toMilliseconds,
+  warnAboutActivation,
+  warnAboutToggleActions
+} from "./chunk-U43BX5O2.mjs";
+import {
+  createLedgerSet
+} from "./chunk-AEQGC2KM.mjs";
+
+// src/core/bundles.ts
+var HOIST_KEYS = ["activation", "timeline", "threshold", "rm", "func"];
+var HOIST_LABELS = {
+  activation: "on",
+  timeline: "timeline",
+  threshold: "threshold",
+  rm: "rm",
+  func: "func"
+};
+var BundleTable = class {
+  /**
+   * @param registry - Consulted for name collisions only; a bundle never enters it.
+   */
+  constructor(registry) {
+    this.registry = registry;
+  }
+  bundles = /* @__PURE__ */ new Map();
+  /**
+   * Register every definition in a subtree, including the subtree root itself.
+   *
+   * @returns How many *new* names were registered, so the caller can decide whether anything it
+   *   already compiled deserves a second chance.
+   * @complexity O(n) time in the subtree's element count; O(d) space in definition count.
+   * @overallScore 100
+   */
+  collect(root, reporter) {
+    let added = 0;
+    for (const el of definitionsIn(root)) {
+      if (this.define(el, reporter)) added++;
+    }
+    return added;
+  }
+  /**
+   * Rewrite bundle references into the segments they stand for.
+   *
+   * @returns A new `ParsedValue`; the argument is returned untouched when nothing is defined.
+   * @complexity O(s) time in the total segment count across the bundles reached; O(s) space.
+   * @overallScore 100
+   */
+  expand(parsed) {
+    if (this.bundles.size === 0) return parsed;
+    const sink = { warnings: [...parsed.warnings], hoists: {} };
+    const specs = this.expandList(parsed.specs, [], sink);
+    const result = { ...parsed, specs, warnings: sink.warnings };
+    for (const key of HOIST_KEYS) absorbHoist(result, sink.hoists, key);
+    return result;
+  }
+  /**
+   * Register one definition element.
+   *
+   * @returns Whether this call added a name the table did not have.
+   * @complexity O(n) time in the body's length; O(e) space in its segment count.
+   * @overallScore 100
+   */
+  define(el, reporter) {
+    const name = el.getAttribute(ATTR.define).trim();
+    const source = el.getAttribute(ATTR.source) ?? "";
+    const problem = this.nameProblem(name);
+    if (problem) {
+      reporter.warn(problem, el);
+      return false;
+    }
+    const existing = this.bundles.get(name);
+    if (existing) {
+      if (existing.source !== source) {
+        reporter.warn(`bundle "${name}" is already defined \u2014 the first definition wins`, el);
+      }
+      return false;
+    }
+    if (el.localName !== "template") {
+      reporter.warn(
+        `bundle "${name}" is defined on <${el.localName}> \u2014 a definition is data, so it is never animated; use <template>`,
+        el
+      );
+    }
+    this.bundles.set(name, readBundle(name, source, el, reporter));
+    return true;
+  }
+  /**
+   * Refuse a name that cannot work, with the reason.
+   *
+   * @returns The diagnostic, or `undefined` when the name is usable.
+   * @complexity O(n) time in the name's length; O(1) space.
+   * @overallScore 100
+   */
+  nameProblem(name) {
+    if (!name) return `${ATTR.define} needs a name \u2014 an empty one defines nothing`;
+    if (/[\s,:()"']/.test(name)) {
+      return `bundle name "${name}" cannot contain whitespace, a comma, a colon, parentheses or quotes \u2014 those are grammar, so a name carrying them could never be written in ${ATTR.source}`;
+    }
+    if (this.registry.has(name)) {
+      return `bundle "${name}" is already the name of a registered effect \u2014 the effect wins and this definition is ignored`;
+    }
+    return void 0;
+  }
+  /**
+   * Expand one comma list, recursing through bundles that name other bundles.
+   *
+   * @param trail - Bundle names currently being expanded, innermost last. Both the cycle guard and
+   *   its diagnostic read it, so it is a list rather than a set.
+   * @complexity O(s) time in the total segment count across the bundles reached; O(s) space.
+   * @overallScore 100
+   */
+  expandList(specs, trail, sink) {
+    const out = [];
+    for (const spec of specs) {
+      const bundle = this.bundles.get(spec.name);
+      if (!bundle) {
+        out.push(spec);
+        this.noteNearMiss(spec.name, sink.warnings);
+        continue;
+      }
+      if (trail.includes(spec.name)) {
+        sink.warnings.push(cycleWarning(trail, spec.name));
+        continue;
+      }
+      takeHoists(bundle, spec.name, sink);
+      const inner = this.expandList(bundle.specs, [...trail, spec.name], sink);
+      warnOnFlattenedOffsets(spec, inner, sink.warnings);
+      for (const member of inner) out.push(overlay(member, spec));
+    }
+    return out;
+  }
+  /**
+   * Name an unregistered effect that is one typo away from a bundle.
+   *
+   * `compile.ts` already reports every unknown name, with a suggestion drawn from the catalog — a
+   * misspelled *bundle* is invisible in that list, so this adds the one fact that message cannot
+   * carry. Only for names the registry does not know, or a real effect one edit away from a badly
+   * chosen bundle name would be reported as a mistake.
+   *
+   * @complexity O(b·n) time in bundle count and name length; O(n) space.
+   * @overallScore 100
+   */
+  noteNearMiss(name, warnings) {
+    if (this.registry.has(name)) return;
+    const hit = suggest(name, [...this.bundles.keys()]);
+    if (hit) {
+      warnings.push(`"${name}" is not a registered effect \u2014 did you mean the bundle "${hit}"?`);
+    }
+  }
+};
+function readBundle(name, source, el, reporter) {
+  const parsed = parse(source);
+  for (const warning of parsed.warnings) reporter.warn(`in bundle "${name}": ${warning}`, el);
+  if (parsed.specs.length === 0) {
+    reporter.warn(`bundle "${name}" names no effect \u2014 elements that use it animate nothing`, el);
+  }
+  const group = ["cascade", "spread", "order", "cols", "along"].filter((key) => parsed[key] !== void 0).map((key) => `"${key}:"`).join(" and ");
+  if (group) {
+    reporter.warn(
+      `bundle "${name}" declares ${group} \u2014 a stagger group is read from the group element's own attribute, which never sees a bundle, so it is dropped; write it on the group element itself`,
+      el
+    );
+  }
+  return { source, specs: parsed.specs, hoists: parsed };
+}
+function takeHoists(bundle, name, sink) {
+  for (const key of HOIST_KEYS) {
+    if (absorbHoist(sink.hoists, bundle.hoists, key) !== "clash") continue;
+    const label = HOIST_LABELS[key];
+    const kept = String(sink.hoists[key]);
+    sink.warnings.push(
+      `bundle "${name}" sets "${label}:${String(bundle.hoists[key])}", which conflicts with "${label}:${kept}" from an earlier bundle \u2014 the first wins`
+    );
+  }
+}
+function cycleWarning(trail, name) {
+  const path = [...trail, name].join(" \u2192 ");
+  return `bundle "${name}" is defined in terms of itself (${path}) \u2014 the reference is dropped`;
+}
+function definitionsIn(root) {
+  const selector = `[${ATTR.define}]`;
+  const found = [...root.querySelectorAll(selector)];
+  const self = root.nodeType === 1 ? root : null;
+  if (self?.matches(selector)) found.unshift(self);
+  return found;
+}
+function absorbHoist(into, from, key) {
+  const value = from[key];
+  if (value === void 0) return "kept";
+  const current = into[key];
+  if (current === void 0) {
+    into[key] = value;
+    return "taken";
+  }
+  return current === value ? "kept" : "clash";
+}
+function overlay(member, ref) {
+  return {
+    ...member,
+    duration: ref.duration ?? member.duration,
+    delay: ref.delay ?? member.delay,
+    easing: ref.easing ?? member.easing,
+    at: ref.at ?? member.at,
+    gate: ref.gate ?? member.gate,
+    repeat: ref.repeat ?? member.repeat,
+    yoyo: ref.yoyo ?? member.yoyo,
+    params: { ...member.params, ...ref.params },
+    hoists: overlayHoists(member.hoists, ref.hoists)
+  };
+}
+function overlayHoists(member, ref) {
+  if (!member && !ref) return void 0;
+  const merged = { ...member };
+  for (const key of SEGMENT_HOIST_KEYS) {
+    const value = ref?.[key];
+    if (value !== void 0) merged[key] = value;
+  }
+  return merged;
+}
+function warnOnFlattenedOffsets(ref, inner, warnings) {
+  if (ref.at === void 0 || !inner.some((member) => member.at !== void 0)) return;
+  warnings.push(
+    `"at:${ref.at}" on "${ref.name}" overrides the offsets the bundle sets on its own segments \u2014 they now all start at the same position`
+  );
+}
+
+// src/core/callback.ts
+function bindCallback(request) {
+  const { el, name, reporter, signal } = request;
+  const handler = (event) => {
+    if (event.target !== el) return;
+    const fn = resolveGlobalFunction(el, name);
+    if (!fn) {
+      reporter.warn(
+        `func:${name} \u2014 no global function named "${name}". A function declaration (\`function ${name}() {}\`) or an explicit \`window.${name} = \u2026\` creates one; \`const\` and \`let\` deliberately do not, and neither does a bundled or \`type="module"\` script.`,
+        el
+      );
+      return;
+    }
+    Reflect.apply(fn, el, [event]);
+  };
+  el.addEventListener(KUI_EVENT.finish, handler);
+  signal.addEventListener("abort", () => el.removeEventListener(KUI_EVENT.finish, handler));
+}
+function resolveGlobalFunction(el, name) {
+  const scope = el.ownerDocument?.defaultView ?? globalThis;
+  if (!Object.hasOwn(scope, name)) return void 0;
+  const candidate = scope[name];
+  return typeof candidate === "function" ? candidate : void 0;
+}
+
+// src/core/capabilities.ts
+function supports(property, value) {
+  if (typeof CSS === "undefined" || typeof CSS.supports !== "function") return false;
+  try {
+    return CSS.supports(property, value);
+  } catch {
+    return false;
+  }
+}
+var cached;
+function detect(force = false) {
+  if (cached && !force) return cached;
+  cached = {
+    viewTimeline: supports("animation-timeline", "view()"),
+    scrollTimeline: supports("animation-timeline", "scroll()"),
+    animationRange: supports("animation-range", "entry 0% cover 30%"),
+    // `translate`/`rotate`/`scale` as independent properties is what makes the channel model
+    // possible at all — under the `transform` shorthand every effect would collide.
+    individualTransforms: supports("translate", "0 10px") && supports("scale", "1.1"),
+    scrollTimelineName: supports("scroll-timeline-name", "--x"),
+    viewTransitions: typeof document !== "undefined" && "startViewTransition" in document,
+    intersectionObserver: typeof IntersectionObserver !== "undefined",
+    reducedMotion: typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches,
+    motionPath: supports("offset-path", 'path("M 0 0")')
+  };
+  return cached;
+}
+var CHANNEL_REQUIREMENTS = [
+  {
+    channel: "offset",
+    capability: "motionPath",
+    message: "this browser does not support CSS Motion Path (offset-path), so the element will not travel \u2014 the animation still runs and completes, it just has no path to follow"
+  }
+];
+function unsupportedChannelWarnings(channels, capabilities) {
+  return CHANNEL_REQUIREMENTS.filter(
+    (entry) => channels.includes(entry.channel) && !capabilities[entry.capability]
+  ).map((entry) => entry.message);
+}
+
+// src/core/channels.ts
+var INDEPENDENT_PHASES = /* @__PURE__ */ new Set(["entrance|state", "exit|state"]);
+function phasePair(a, b) {
+  return a < b ? `${a}|${b}` : `${b}|${a}`;
+}
+function independentPhases(a, b) {
+  if (!a.phase || !b.phase) return false;
+  return INDEPENDENT_PHASES.has(phasePair(a.phase, b.phase));
+}
+var CHANNEL_COMPOSITION = {
+  translate: "add"
+};
+function additiveChannels(channels) {
+  return channels.length > 0 && channels.every((channel) => CHANNEL_COMPOSITION[channel] === "add");
+}
+function additiveResolution(claims, conflicts) {
+  if (conflicts.some((conflict) => conflict.effects[0] === conflict.effects[1])) return void 0;
+  const contested = new Set(conflicts.map((conflict) => conflict.channel));
+  const involved = /* @__PURE__ */ new Set();
+  claims.forEach((claim2, index) => {
+    if (claim2.channels.some((channel) => contested.has(channel))) involved.add(index);
+  });
+  for (const index of involved) if (!claims[index].additive) return void 0;
+  return involved;
+}
+function findConflicts(claims) {
+  const conflicts = [];
+  const seen = /* @__PURE__ */ new Map();
+  for (const claim2 of claims) {
+    for (const channel of claim2.channels) {
+      const claimants = seen.get(channel) ?? [];
+      const clash = claimants.find(
+        // Same effect name twice in one list claims the channel against itself; still a conflict,
+        // and a more likely author typo than a deliberate choice. Phase cannot exempt that pair
+        // either, because a phase is only ever independent of a *different* one.
+        (other) => gatesOverlap(other.gate, claim2.gate) && !independentPhases(other, claim2)
+      );
+      if (clash) conflicts.push({ channel, effects: [clash.name, claim2.name] });
+      claimants.push(claim2);
+      seen.set(channel, claimants);
+    }
+  }
+  return conflicts;
+}
+function deliveryClobbers(claims) {
+  const stylesheet = claims.filter((claim2) => claim2.delivery === "stylesheet-animation");
+  if (stylesheet.length === 0) return [];
+  const inline = claims.find((claim2) => claim2.inlineAnimation && !claim2.delivery);
+  if (!inline) return [];
+  return stylesheet.map(
+    (claim2) => `"${inline.name}" writes an inline animation, which outranks the stylesheet rule "${claim2.name}" delivers its motion from`
+  );
+}
+function describeConflicts(conflicts) {
+  return conflicts.map((c) => `"${c.effects[0]}" and "${c.effects[1]}" both animate ${c.channel}`).join("; ");
+}
+
+// src/core/sequence.ts
+var DURATION_FALLBACK = "600ms";
+var DELAY_FALLBACK = "0ms";
+function durationExpression(duration, primitiveId) {
+  return duration ?? `var(${timingProperty(primitiveId, "duration")}, ${DURATION_FALLBACK})`;
+}
+function delayExpression(delay, primitiveId) {
+  return delay ?? `var(${timingProperty(primitiveId, "delay")}, ${DELAY_FALLBACK})`;
+}
+var AT_ANCHOR = /^(with|after)/i;
+var AT_OFFSET = /^([+-])(\d+(?:\.\d+)?|\.\d+)(ms|s)$/i;
+var BARE_TIME = /^(?:\d+(?:\.\d+)?|\.\d+)(?:ms|s)$/i;
+var PROGRESS_DRIVEN = /* @__PURE__ */ new Set(["view", "scroll"]);
+function parsePosition(raw) {
+  const value = raw.trim();
+  const named = AT_ANCHOR.exec(value);
+  const anchor = named?.[1]?.toLowerCase() === "with" ? "start" : "end";
+  const offset = named ? value.slice(named[0].length) : value;
+  if (offset === "") {
+    if (!named) return { ok: false, reason: refusalReason(value) };
+    return { ok: true, position: { anchor, offsetMs: 0, term: "" } };
+  }
+  const parts = AT_OFFSET.exec(offset);
+  if (!parts) return { ok: false, reason: refusalReason(value) };
+  const [, sign, amount, unit] = parts;
+  const time = `${amount}${unit}`;
+  const magnitude = toMilliseconds(time, 0);
+  return {
+    ok: true,
+    position: {
+      anchor,
+      offsetMs: sign === "-" ? -magnitude : magnitude,
+      // Spaces around the operator are required by `calc()`, not decoration: `calc(600ms -200ms)`
+      // is a syntax error, and a browser drops the whole declaration rather than reporting it.
+      term: ` ${sign} ${time}`
+    }
+  };
+}
+function refusalReason(value) {
+  if (BARE_TIME.test(value)) {
+    return `at:"${value}" is an absolute position, which is only another spelling of delay:${value} \u2014 write at:+${value} to start that long after the previous effect ends, at:-${value} to overlap it by that much, or at:with to start alongside it`;
+  }
+  return `at:"${value}" is not a position \u2014 expected at:with, at:after, or a signed time such as at:-200ms, at:+100ms or at:with+150ms`;
+}
+function resolveSequence(members, timeline, warn) {
+  const chain = { members, steps: [], warn };
+  let warnedAboutTimeline = false;
+  for (const [index, member] of members.entries()) {
+    if (member.at === void 0) {
+      chain.steps.push(unsequenced(member));
+      continue;
+    }
+    if (!warnedAboutTimeline && PROGRESS_DRIVEN.has(timeline)) {
+      warnedAboutTimeline = true;
+      warn(timelineRefusal(timeline));
+    }
+    chain.steps.push(place(chain, index));
+  }
+  return chain.steps;
+}
+function unsequenced(member) {
+  return {
+    delayExpr: delayExpression(member.delay, member.primitiveId),
+    // Falls back to the same `0ms` the compiled `var()` does. An unreadable delay can only reach
+    // here from a direct caller — `compile` screens its candidates with `isReadableTime`, and a
+    // positional delay was already matched against the parser's own time pattern.
+    delayMs: timeMs(member.delay ?? member.cascadeDelay ?? DELAY_FALLBACK) ?? 0,
+    sequenced: false
+  };
+}
+function place(chain, index) {
+  const member = chain.members[index];
+  const own = unsequenced(member);
+  const parsed = parsePosition(member.at);
+  if (!parsed.ok) {
+    chain.warn(`"${member.name}": ${parsed.reason}`);
+    return own;
+  }
+  const refused = refusalFor(chain, index);
+  if (refused) {
+    chain.warn(refused);
+    return own;
+  }
+  if (member.delay !== void 0) {
+    chain.warn(
+      `"${member.name}" has both a positional delay (${member.delay}) and at:"${member.at}" \u2014 the delay is ignored, because at: positions the effect itself`
+    );
+  }
+  return follow(chain, index, parsed.position, own);
+}
+function refusalFor(chain, index) {
+  const member = chain.members[index];
+  if (index === 0) {
+    return `"${member.name}" is the first effect in the list, so at:"${member.at}" has nothing to be relative to \u2014 using its own delay instead`;
+  }
+  if (!member.positionable) {
+    return `"${member.name}" is rendered in JavaScript and declares no "delay", so at:"${member.at}" cannot position it \u2014 it starts with the rest of the list`;
+  }
+  return null;
+}
+function follow(chain, index, position, own) {
+  const previous = chain.members[index - 1];
+  const anchor = chain.steps[index - 1];
+  if (position.anchor === "start") {
+    return {
+      delayExpr: `${anchor.delayExpr}${position.term}`,
+      delayMs: anchor.delayMs + position.offsetMs,
+      sequenced: true
+    };
+  }
+  if (isInfiniteRepeat(previous.repeat)) return refuseEndless(chain, index, own);
+  const durationMs = timeMs(previous.duration ?? previous.cascadeDuration ?? "");
+  if (durationMs === void 0) {
+    return refuseUnmeasurable(chain, index, own);
+  }
+  const played = playbackExpression(
+    durationExpression(previous.duration, previous.primitiveId),
+    previous.repeat
+  );
+  return {
+    delayExpr: `${anchor.delayExpr} + ${played}${position.term}`,
+    delayMs: anchor.delayMs + durationMs * (repeatCount(previous.repeat) ?? 1) + position.offsetMs,
+    sequenced: true
+  };
+}
+function refuseUnmeasurable(chain, index, own) {
+  const member = chain.members[index];
+  const previous = chain.members[index - 1];
+  chain.warn(
+    `cannot start "${member.name}" relative to the end of "${previous.name}": "${previous.name}" has no readable duration, so it has no end to measure from \u2014 give it an explicit duration, or use at:with to start alongside it instead`
+  );
+  return own;
+}
+function refuseEndless(chain, index, own) {
+  const member = chain.members[index];
+  const previous = chain.members[index - 1];
+  chain.warn(
+    `cannot start "${member.name}" relative to the end of "${previous.name}": "${previous.name}" has repeat:infinite, so it never ends \u2014 use at:with to start alongside it, or give it a finite repeat count`
+  );
+  return own;
+}
+function timelineRefusal(timeline) {
+  return `at: compiles to an animation-delay, and a "${timeline}" timeline is driven by scroll position rather than a clock, so it ignores one \u2014 position a scroll-driven effect with a range instead (the trailing tokens of data-kui-timeline, e.g. data-kui-timeline="${timeline} entry 0% cover 60%"). The delay still applies where the browser has no scroll-driven animations and the effect degrades to a clock.`;
+}
+function timeMs(value) {
+  const ms = toMilliseconds(value, Number.NaN);
+  return Number.isFinite(ms) ? ms : void 0;
+}
+function isReadableTime(value) {
+  return timeMs(value) !== void 0;
+}
+
+// src/core/declarations.ts
+function emptyTracks() {
+  return {
+    names: [],
+    keyframes: [],
+    durations: [],
+    delays: [],
+    ends: [],
+    easings: [],
+    iterationCounts: [],
+    directions: [],
+    compositions: []
+  };
+}
+function keyframesFor(entry) {
+  const { preset } = entry.resolved;
+  return entry.variant?.keyframes ?? [preset.keyframes ?? `kui-${preset.name}`];
+}
+function iterationCountProperty(presetName) {
+  return `--kui-fx-${presetName}-iterations`;
+}
+function pushTrack(tracks, entry, step) {
+  const { spec, resolved } = entry;
+  const id = resolved.primitive.id;
+  const duration = durationExpression(spec.duration, id);
+  const delay = staggerDelay(step.delayExpr);
+  const end = `${step.delayExpr} + ${playbackExpression(duration, spec.repeat)}`;
+  const easing = easingValue(spec.easing, id);
+  const iterations = spec.repeat ?? `var(${iterationCountProperty(resolved.preset.name)}, 1)`;
+  const direction = directionValue(spec.yoyo);
+  const composition = entry.composite ?? "replace";
+  for (const name of keyframesFor(entry)) {
+    tracks.names.push(gatedAnimationName(name, spec.gate));
+    tracks.keyframes.push(name);
+    tracks.durations.push(duration);
+    tracks.delays.push(delay);
+    tracks.ends.push(end);
+    tracks.easings.push(easing);
+    tracks.iterationCounts.push(iterations);
+    tracks.directions.push(direction);
+    tracks.compositions.push(composition);
+  }
+}
+function pushTransitions(segments, owners, entry, warnings) {
+  const { spec, resolved } = entry;
+  const { preset, primitive } = resolved;
+  for (const segment of preset.transitions ?? []) {
+    const previousOwner = owners.get(segment.property);
+    if (previousOwner !== void 0 && previousOwner !== preset.name) {
+      warnings.push(
+        `"${previousOwner}" and "${preset.name}" both transition ${segment.property} \u2014 "${preset.name}" wins (last in the list)`
+      );
+    }
+    owners.set(segment.property, preset.name);
+    const duration = segment.duration ?? durationExpression(spec.duration, primitive.id);
+    const easing = segment.easing ?? easingValue(spec.easing, primitive.id);
+    const delay = `var(--kui-tx-delay-${preset.name}, 0ms)`;
+    segments.push(`${segment.property} ${duration} ${easing} ${delay}`);
+  }
+}
+function declarationsFor(tracks, timeline) {
+  if (tracks.names.length === 0) return {};
+  const delays = timeline === "pin" ? pinnedDelays(tracks) : tracks.delays.map(wrapped);
+  const declarations = {
+    "animation-name": tracks.names.join(", "),
+    "animation-duration": tracks.durations.join(", "),
+    "animation-delay": delays.join(", "),
+    "animation-timing-function": tracks.easings.join(", "),
+    "animation-iteration-count": tracks.iterationCounts.join(", "),
+    "animation-fill-mode": tracks.names.map(() => "both").join(", ")
+  };
+  if (tracks.directions.some((value) => value !== "normal")) {
+    declarations["animation-direction"] = tracks.directions.join(", ");
+  }
+  if (tracks.compositions.some((value) => value !== "replace")) {
+    declarations["animation-composition"] = tracks.compositions.join(", ");
+  }
+  return declarations;
+}
+function staggerDelay(base) {
+  return `${base} + var(--kui-i, 0) * var(--kui-stagger, 0ms)`;
+}
+function wrapped(sum) {
+  return `calc(${sum})`;
+}
+function pinnedDelays(tracks) {
+  const ends = [...new Set(tracks.ends)];
+  const span = ends.length === 1 ? ends[0] : `max(${ends.join(", ")})`;
+  const head = `${span} + (var(--kui-stagger-count, 1) - 1) * var(--kui-stagger, 0ms)`;
+  return tracks.delays.map((delay) => wrapped(`${delay} - var(--kui-progress, 0) * (${head})`));
+}
+function easingValue(easing, primitiveId) {
+  if (!easing) return `var(${timingProperty(primitiveId, "ease")}, ease-out)`;
+  return cssEasingValue(easing);
+}
+
+// src/core/element-config.ts
+var TIMELINES = /* @__PURE__ */ new Set(["time", "view", "scroll", "pointer", "pin"]);
+function readAttributes(el) {
+  return {
+    source: el.getAttribute(ATTR.source) ?? "",
+    on: el.getAttribute(ATTR.on),
+    timeline: el.getAttribute(ATTR.timeline),
+    threshold: el.getAttribute(ATTR.threshold)
+  };
+}
+function resolveConfig(attributes, parsed) {
+  const rawTimeline = parsed.timeline ?? attributes.timeline ?? "time";
+  const [head = "time", ...rest] = rawTimeline.trim().split(/\s+/);
+  const longhand = parseActivationAttribute(attributes.on);
+  const authored = parsed.activation ?? longhand.activation;
+  return {
+    activation: authored ?? "enter",
+    activationAuthored: authored !== void 0,
+    ...sourceFromLonghand({ parsed, longhand }),
+    // Re-parsed rather than threaded down, and its warnings dropped: `parse.ts` has already
+    // reported every one of them against this same element through `validateToggleActions`, so
+    // forwarding them would double each diagnostic. There is no longhand attribute to merge with —
+    // `actions:` refines `on:` and has only the inline spelling.
+    ...parsed.actions === void 0 ? {} : { actions: parseToggleActions(parsed.actions) },
+    timeline: TIMELINES.has(head) ? head : "time",
+    range: rest.join(" "),
+    threshold: parsed.threshold ?? attributes.threshold ?? "0%"
+  };
+}
+function resolveTimelineHead(raw, fallback) {
+  if (raw === void 0) return fallback;
+  const [head] = raw.trim().split(/\s+/);
+  return TIMELINES.has(head) ? head : fallback;
+}
+function resolveGroupConfig(base, hoists) {
+  if (!hoists) return base;
+  const authored = hoists.activation;
+  const config = {
+    ...base,
+    activation: authored ?? base.activation,
+    activationAuthored: authored !== void 0 || base.activationAuthored
+  };
+  if (hoists.actions !== void 0) config.actions = parseToggleActions(hoists.actions);
+  if (hoists.timeline !== void 0) {
+    const [head = "time", ...rest] = hoists.timeline.trim().split(/\s+/);
+    config.timeline = TIMELINES.has(head) ? head : base.timeline;
+    config.range = rest.join(" ");
+  }
+  if (hoists.threshold !== void 0) config.threshold = hoists.threshold;
+  return config;
+}
+function sourceFromLonghand({
+  parsed,
+  longhand
+}) {
+  if (parsed.activation !== void 0 || longhand.from === void 0) return {};
+  return { activationSource: longhand.from };
+}
+
+// src/core/host-facts.ts
+var RM_RANK = { shorten: 0, crossfade: 1, disable: 2 };
+function resolveDefaultActivation(claims) {
+  const declared = claims.map((claim2) => claim2.defaultActivation);
+  const firstWins = declared.find((value) => value !== void 0);
+  const entrance = claims.findIndex((claim2) => claim2.phase === "entrance");
+  if (firstWins === void 0 || entrance === -1) return firstWins;
+  return declared[entrance] ?? "enter";
+}
+function mergeHostFacts(targets) {
+  let reducedMotion = "shorten";
+  for (const { plan } of targets) reducedMotion = strictestPolicy(reducedMotion, plan.reducedMotion);
+  for (const { plan } of targets) plan.reducedMotion = reducedMotion;
+}
+function resolvedPolicy(declared, authored, warnings) {
+  if (authored === void 0) return declared;
+  if (RM_RANK[authored] < RM_RANK[declared]) {
+    warnings.push(
+      `"rm:${authored}" is weaker than the "${declared}" these effects declare \u2014 keeping "${declared}" (rm: may only strengthen the reduced-motion policy)`
+    );
+    return declared;
+  }
+  return authored;
+}
+function intersect(accumulated, supported) {
+  if (!accumulated) return [...supported];
+  return accumulated.filter((value) => supported.includes(value));
+}
+function strictestPolicy(a, b) {
+  return RM_RANK[b] > RM_RANK[a] ? b : a;
+}
+
+// src/core/unquoted-selectors.ts
+var SELECTOR_START = /^[.#[*:]/;
+var SELECTOR_COMBINATOR = /[>~+]/;
+function looksLikeSelectorFragment(name) {
+  return SELECTOR_START.test(name) || SELECTOR_COMBINATOR.test(name);
+}
+function findUnquotedSelectors(specs, registry) {
+  const found = [];
+  for (const [i, spec] of specs.entries()) {
+    const target = specs[i - 1]?.params.target;
+    if (!target || registry.has(spec.name) || !looksLikeSelectorFragment(spec.name)) continue;
+    found.push({ previous: target, segment: spec.name });
+  }
+  return found;
+}
+function unquotedSelectorWarning(found) {
+  return `target:${found.previous} looks like it continues into "${found.segment}", but a comma always starts a new effect segment \u2014 a target: selector containing a comma must be quoted, e.g. target:'${found.previous}, ${found.segment}'`;
+}
+
+// src/core/compile.ts
+function channelsFor(entry) {
+  const declared = entry.resolved.primitive.channels;
+  if (!entry.variant?.channels) return declared;
+  return [...declared, ...entry.variant.channels];
+}
+function authoredParams(entry) {
+  return entry.variant?.params ?? entry.spec.params;
+}
+function schemaFor(entry) {
+  const extra = entry.variant?.schema;
+  if (!extra) return entry.resolved.primitive.parameters;
+  return { ...entry.resolved.primitive.parameters, ...extra };
+}
+function compileTargets(parsed, registry, timeline) {
+  const warnings = [...parsed.warnings];
+  const unquoted = findUnquotedSelectors(parsed.specs, registry);
+  for (const found of unquoted) warnings.push(unquotedSelectorWarning(found));
+  const suspects = unquoted.length > 0 ? { suspectSelectors: unquoted.map((found) => found.segment) } : {};
+  const { entries, unknown } = resolveEntries(parsed.specs, registry, warnings);
+  if (entries.length === 0) {
+    return {
+      targets: [{ selector: "", scope: "self", specs: [], plan: emptyPlan(unknown, []) }],
+      warnings,
+      ...suspects
+    };
+  }
+  const sanitized = entries.map(
+    (entry) => refusePlayback(refuseContainerGate(entry, warnings), timeline, warnings)
+  );
+  const steps = resolveSequence(sanitized.map(memberFor), timeline, (m) => warnings.push(m));
+  const sequenced = sanitized.map((entry, index) => ({ ...entry, step: steps[index] }));
+  warnCrossGroupSequencing(sequenced, parsed.activation, warnings);
+  const targets = partitionByTarget(sequenced).map(({ selector, scope, entries: group }) => {
+    const groupWarnings = [];
+    const composed = resolveComposition(group, registry, groupWarnings);
+    const groupHoists = mergeGroupHoists(group, groupWarnings);
+    const groupTimeline = resolveTimelineHead(groupHoists?.timeline, timeline);
+    const plan = buildPlan(composed, groupTimeline, unknown, groupWarnings);
+    plan.defaultActivation = resolveDefaultActivation(
+      composed.map((entry) => ({
+        phase: phaseOf(entry),
+        defaultActivation: entry.resolved.primitive.defaultActivation
+      }))
+    );
+    return { selector, scope, hoists: groupHoists, specs: group.map((entry) => entry.spec), plan };
+  });
+  mergeHostFacts(targets);
+  const reducedMotion = resolvedPolicy(targets[0].plan.reducedMotion, parsed.rm, warnings);
+  for (const target of targets) target.plan.reducedMotion = reducedMotion;
+  return { targets, warnings, ...suspects };
+}
+function scopeHoists(parsed, registry) {
+  if (!parsed.specs.some((spec) => spec.hoists)) return parsed;
+  const warnings = [...parsed.warnings];
+  const folded = { ...parsed, warnings };
+  const specs = parsed.specs.map((spec) => {
+    if (!spec.hoists || !staysOnHost(spec, registry)) return spec;
+    for (const key of SEGMENT_HOIST_KEYS) {
+      const value = spec.hoists[key];
+      if (value === void 0) continue;
+      assignOnce(folded, key, value, HOIST_LABELS2[key]);
+    }
+    const rest = { ...spec };
+    delete rest.hoists;
+    return rest;
+  });
+  return { ...folded, specs };
+}
+function staysOnHost(spec, registry) {
+  const resolved = registry.resolve(spec.name);
+  if (!resolved) return true;
+  return Object.hasOwn(resolved.primitive.parameters, "target");
+}
+var HOIST_LABELS2 = {
+  activation: "activations",
+  actions: "crossing actions",
+  timeline: "timelines",
+  threshold: "thresholds",
+  cascade: "stagger steps",
+  spread: "stagger budgets",
+  order: "stagger orders",
+  cols: "stagger column counts",
+  along: "stagger axes"
+};
+function mergeGroupHoists(entries, warnings) {
+  let merged;
+  for (const entry of entries) {
+    if (!entry.spec.hoists) continue;
+    merged = absorbGroupHoists(merged ?? {}, entry.spec.hoists, warnings);
+  }
+  return merged;
+}
+function absorbGroupHoists(merged, hoists, warnings) {
+  for (const key of SEGMENT_HOIST_KEYS) {
+    const value = hoists[key];
+    if (value === void 0) continue;
+    const current = merged[key];
+    if (current === void 0) merged[key] = value;
+    else if (current !== value) {
+      warnings.push(
+        `conflicting ${HOIST_LABELS2[key]} "${current}" and "${value}" in one target: group \u2014 the first wins`
+      );
+    }
+  }
+  return merged;
+}
+function warnCrossGroupSequencing(sequenced, elementActivation, warnings) {
+  for (let i = 1; i < sequenced.length; i++) {
+    const entry = sequenced[i];
+    if (!entry.step.sequenced) continue;
+    const previous = sequenced[i - 1];
+    if (groupKeyOf(entry) === groupKeyOf(previous)) continue;
+    const ownTrigger = entry.spec.hoists?.activation ?? elementActivation;
+    const previousTrigger = previous.spec.hoists?.activation ?? elementActivation;
+    if (ownTrigger === previousTrigger) continue;
+    warnings.push(
+      `"${entry.spec.name}"'s at:"${entry.spec.at}" is relative to "${previous.spec.name}", which targets a different element and may start on a different trigger \u2014 the offset is relative to each one's own start, not a shared clock`
+    );
+  }
+}
+function groupKeyOf(entry) {
+  return `${entry.scope ?? "self"} ${entry.target ?? ""}`;
+}
+function partitionByTarget(entries) {
+  const byKey = /* @__PURE__ */ new Map();
+  const order = [];
+  for (const entry of entries) {
+    const selector = entry.target ?? "";
+    const scope = entry.scope ?? "self";
+    const key = `${scope} ${selector}`;
+    let group = byKey.get(key);
+    if (!group) {
+      group = { selector, scope, entries: [] };
+      byKey.set(key, group);
+      order.push(group);
+    }
+    group.entries.push(entry);
+  }
+  const hostIndex = order.findIndex((group) => group.selector === "");
+  if (hostIndex > 0) {
+    const [host] = order.splice(hostIndex, 1);
+    order.unshift(host);
+  }
+  return order;
+}
+function emptyPlan(unknown, warnings) {
+  return {
+    fxNames: [],
+    vars: {},
+    declarations: {},
+    keyframeNames: [],
+    jsEffects: [],
+    unknown,
+    reducedMotion: "shorten",
+    supportedActivations: [],
+    supportedTimelines: [],
+    channels: [],
+    warnings
+  };
+}
+function resolveEntries(specs, registry, warnings) {
+  const entries = [];
+  const unknown = [];
+  for (const spec of specs) {
+    const resolved = registry.resolve(spec.name);
+    if (!resolved) {
+      unknown.push(spec.name);
+      warnUnknownEffect(spec.name, registry, warnings);
+      continue;
+    }
+    entries.push(entryFor(spec, resolved, warnings));
+  }
+  return { entries, unknown };
+}
+function entryFor(spec, resolved, warnings) {
+  const lifted = liftTarget(spec, resolved, warnings);
+  const variant = resolved.primitive.variantFor?.(lifted.spec, (m) => warnings.push(m));
+  const entry = variant ? { spec: lifted.spec, resolved, variant } : { spec: lifted.spec, resolved };
+  if (lifted.target !== void 0) {
+    entry.target = lifted.target;
+    entry.scope = lifted.scope;
+  }
+  return entry;
+}
+function warnUnknownEffect(name, registry, warnings) {
+  const hint = suggest(name, registry.names());
+  const suffix = hint ? ` \u2014 did you mean "${hint}"?` : "";
+  warnings.push(`unknown effect "${name}"${suffix}`);
+}
+function liftTarget(spec, resolved, warnings) {
+  if (Object.hasOwn(resolved.primitive.parameters, "target")) return { spec };
+  const target = spec.params.target;
+  if (!target) return { spec };
+  const rest = { ...spec.params };
+  const authoredScope = rest.scope;
+  delete rest.target;
+  delete rest.scope;
+  const stripped = { ...spec, params: rest };
+  if (resolved.preset.requiresOwnSubtree) {
+    warnings.push(
+      `"${resolved.preset.name}" cannot be retargeted \u2014 its CSS reaches past the animated element itself, so "target:${target}" is dropped and it stays on the host`
+    );
+    return { spec: stripped };
+  }
+  const scope = authoredScope === "page" ? "page" : "self";
+  return { spec: stripped, target, scope };
+}
+function refuseContainerGate(entry, warnings) {
+  const { spec, resolved } = entry;
+  if (resolved.primitive.renderer === "css-keyframes") return entry;
+  if (!spec.gate?.wide && !spec.gate?.narrow) return entry;
+  warnings.push(
+    `"${spec.name}" ignores "wide:"/"narrow:" \u2014 container gates are not supported on JavaScript-rendered effects yet, so it runs unconditionally`
+  );
+  const { above, below } = spec.gate;
+  const gate = above || below ? { above, below } : void 0;
+  return { ...entry, spec: { ...spec, gate } };
+}
+function refusePlayback(entry, timeline, warnings) {
+  const { spec, resolved } = entry;
+  if (spec.repeat === void 0 && spec.yoyo === void 0) return entry;
+  const { repeat, yoyo, warnings: raised } = resolvePlayback({
+    name: resolved.preset.name,
+    renderer: resolved.primitive.renderer,
+    cloak: resolved.preset.cloak,
+    timeline,
+    repeat: spec.repeat,
+    yoyo: spec.yoyo
+  });
+  warnings.push(...raised);
+  return { ...entry, spec: { ...spec, repeat, yoyo } };
+}
+function phaseOf(entry) {
+  if (entry.spec.repeat === "infinite") return "idle";
+  const { preset } = entry.resolved;
+  if (preset.phase) return preset.phase;
+  if (preset.transitions?.length) return "state";
+  return void 0;
+}
+function additivelyComposable(entry) {
+  if (entry.resolved.primitive.renderer !== "css-keyframes") return false;
+  if (entry.variant?.keyframes) return false;
+  return additiveChannels(channelsFor(entry));
+}
+function resolveComposition(entries, registry, warnings) {
+  if (entries.length <= 1) return entries;
+  const claims = entries.map((e) => ({
+    name: e.spec.name,
+    channels: channelsFor(e),
+    gate: e.spec.gate,
+    phase: phaseOf(e),
+    additive: additivelyComposable(e),
+    delivery: e.resolved.preset.delivery,
+    // "Writes `animation-name` inline" needs no declaration of its own: `buildPlan` sends exactly
+    // the `css-keyframes` entries to `pushTrack`, and `declarations.ts` emits the longhands from
+    // the tracks. Only the losing side of a delivery clobber has to say what it is.
+    inlineAnimation: e.resolved.primitive.renderer === "css-keyframes"
+  }));
+  const conflicts = findConflicts(claims);
+  const clobbers = deliveryClobbers(claims);
+  if (conflicts.length === 0 && clobbers.length === 0) return entries;
+  if (clobbers.length === 0) {
+    const additive = additiveResolution(claims, conflicts);
+    if (additive) return entries.map((e, i) => additive.has(i) ? { ...e, composite: "add" } : e);
+  }
+  const combo = registry.findCombo(entries.map((e) => e.spec.name));
+  const remedy = combo ? `Use the "${combo.preset.name}" effect instead.` : "Apply them to nested elements, or register a combined effect.";
+  const kept = entries[0].spec.name;
+  const dropped = entries.slice(1).map((entry) => `"${entry.spec.name}"`);
+  const loss = `Dropped ${dropped.join(", ")} \u2014 only "${kept}" will run.`;
+  const diagnosis = [...conflicts.length > 0 ? [describeConflicts(conflicts)] : [], ...clobbers];
+  warnings.push(`cannot compose: ${diagnosis.join("; ")}. ${loss} ${remedy}`);
+  return [entries[0]];
+}
+function buildPlan(entries, timeline, unknown, warnings) {
+  const plan = emptyPlan(unknown, warnings);
+  const tracks = emptyTracks();
+  const channels = /* @__PURE__ */ new Set();
+  const transitionSegments = [];
+  const transitionOwners = /* @__PURE__ */ new Map();
+  let activations;
+  let timelines;
+  for (const entry of entries) {
+    const { preset, primitive } = entry.resolved;
+    const step = entry.step;
+    plan.fxNames.push(preset.name);
+    plan.reducedMotion = strictestPolicy(plan.reducedMotion, primitive.reducedMotion);
+    activations = intersect(activations, primitive.supportedActivations);
+    timelines = intersect(timelines, primitive.supportedTimelines);
+    for (const channel of channelsFor(entry)) channels.add(channel);
+    warnUnsupportedTimeline(preset.name, primitive.supportedTimelines, timeline, warnings);
+    Object.assign(
+      plan.vars,
+      resolveParams(authoredParams(entry), schemaFor(entry), (m) => warnings.push(m))
+    );
+    if (primitive.renderer === "css-keyframes") pushTrack(tracks, entry, step);
+    else plan.jsEffects.push(positioned(entry, step));
+    pushTransitions(transitionSegments, transitionOwners, entry, warnings);
+  }
+  Object.assign(plan.declarations, declarationsFor(tracks, timeline));
+  plan.keyframeNames = tracks.keyframes;
+  if (transitionSegments.length > 0) plan.transition = transitionSegments.join(", ");
+  plan.supportedActivations = activations;
+  plan.supportedTimelines = timelines;
+  plan.channels = [...channels];
+  return plan;
+}
+function memberFor(entry) {
+  const { spec, resolved } = entry;
+  const { preset, primitive } = resolved;
+  const authored = authoredParams(entry);
+  return {
+    name: preset.name,
+    primitiveId: primitive.id,
+    at: spec.at,
+    delay: spec.delay,
+    duration: spec.duration,
+    cascadeDelay: cascadeValue(authored, preset, primitive.parameters, "delay"),
+    cascadeDuration: cascadeValue(authored, preset, primitive.parameters, "duration"),
+    repeat: spec.repeat,
+    // A `css-keyframes` segment is always positionable — it compiles to an `animation-delay` and
+    // the browser honours it. A JavaScript-rendered one is positionable only if it declares the
+    // parameter, which is the single compile-time signal that it reads a delay at all.
+    positionable: primitive.renderer === "css-keyframes" || Object.hasOwn(primitive.parameters, "delay")
+  };
+}
+function cascadeValue(authored, preset, schema, name) {
+  const candidates = [authored[name], preset.params?.[name], schema[name]?.default];
+  return candidates.find((value) => value !== void 0 && isReadableTime(value));
+}
+function positioned(entry, step) {
+  if (!step.sequenced) return entry;
+  return { ...entry, sequencedDelayMs: step.delayMs };
+}
+function warnUnsupportedTimeline(name, supported, timeline, warnings) {
+  if (supported.includes(timeline)) return;
+  warnings.push(
+    `"${name}" does not support timeline "${timeline}" (supports: ${supported.join(", ")})`
+  );
+}
+
+// src/core/derived/book.ts
+function createDerivedBook() {
+  return {
+    derived: /* @__PURE__ */ new WeakMap(),
+    hosts: /* @__PURE__ */ new WeakMap(),
+    groups: /* @__PURE__ */ new WeakMap(),
+    contexts: /* @__PURE__ */ new WeakMap(),
+    unions: /* @__PURE__ */ new WeakMap(),
+    cleanups: /* @__PURE__ */ new WeakMap()
+  };
+}
+function derivedOf(book, el) {
+  return [...book.derived.get(el) ?? []];
+}
+function hostOf(book, el) {
+  return book.hosts.get(el);
+}
+
+// src/core/derived/aggregate.ts
+function isForwardRunning(state) {
+  return state.status === "running" && state.direction !== "reverse";
+}
+function isRunning(state) {
+  return state.status === "running";
+}
+function isFailed(state) {
+  return state.status === "failed";
+}
+function isSettled(state) {
+  return state.status === "finished" || state.status === "failed";
+}
+function isReady(state) {
+  return state.status === "ready";
+}
+function matchStates(port, host) {
+  const states = [];
+  for (const match of derivedOf(port.book, host)) {
+    const state = port.stateOf(match);
+    if (state) states.push(state);
+  }
+  return states;
+}
+function applyRunning(port, host, hostState, states) {
+  if (hostState.status === "running") return;
+  port.writeStatus(host, hostState, "running");
+  if (states.some(isForwardRunning)) port.emit(host, hostState, KUI_EVENT.start, "activated");
+}
+function applyFinished(port, host, hostState, states) {
+  if (hostState.status === "finished") return;
+  const wasRunning = hostState.status === "running";
+  port.writeStatus(host, hostState, "finished");
+  if (states.every((state) => state.cancelled === true)) return;
+  port.emit(host, hostState, KUI_EVENT.finish, wasRunning ? "complete" : "reduced-motion");
+}
+function syncAggregate(port, host) {
+  const hostState = port.stateOf(host);
+  if (!hostState || !hostState.aggregate) return;
+  const states = matchStates(port, host);
+  if (states.length === 0) return;
+  if (states.some(isRunning)) {
+    applyRunning(port, host, hostState, states);
+  } else if (states.every(isFailed)) {
+    port.writeStatus(host, hostState, "failed");
+  } else if (states.every(isSettled)) {
+    applyFinished(port, host, hostState, states);
+  } else if (states.every(isReady)) {
+    port.writeStatus(host, hostState, "ready");
+  }
+}
+function unionKey(targets) {
+  return targets.map((target) => `${target.scope} ${target.selector}`).sort((a, b) => a.localeCompare(b)).join("
");
+}
+function compileUnion(port, context, targets) {
+  const key = unionKey(targets);
+  const cache = port.book.unions.get(context.host);
+  const cached2 = cache?.get(key);
+  if (cached2) return cached2;
+  const first = targets[0];
+  const compiled = compileTargets(
+    { specs: targets.flatMap((target) => target.specs), warnings: [] },
+    port.registry,
+    context.timeline
+  );
+  const union = compiled.targets[0];
+  union.plan.reducedMotion = first.plan.reducedMotion;
+  const win = context.host.ownerDocument?.defaultView ?? void 0;
+  union.plan.jsEffects = union.plan.jsEffects.filter((entry) => gateMatches(entry.spec.gate, win));
+  const known = new Set(targets.flatMap((target) => target.plan.warnings));
+  for (const warning of union.plan.warnings) {
+    if (!known.has(warning)) port.reporter.warn(warning, context.host);
+  }
+  const result = { ...union, selector: first.selector, scope: first.scope };
+  const unions = cache ?? /* @__PURE__ */ new Map();
+  unions.set(key, result);
+  if (!cache) port.book.unions.set(context.host, unions);
+  return result;
+}
+
+// src/core/style-plan.ts
+function planStyles(input) {
+  const { plan, config, capabilities, respectReducedMotion } = input;
+  const reduce = respectReducedMotion && capabilities.reducedMotion;
+  const { scrubbed, useNativeTimeline } = timelineMode(plan, config, capabilities);
+  const properties = { ...plan.vars, ...plan.declarations };
+  Object.assign(properties, transitionProperty(plan));
+  Object.assign(properties, timelineProperties(config, capabilities, useNativeTimeline));
+  const hasCssAnimation = Object.keys(plan.declarations).length > 0;
+  const elementHasCssAnimation = input.elementHasCssAnimation ?? hasCssAnimation;
+  const gate = resolveGate({
+    useNativeTimeline,
+    scrubbed: scrubbed && elementHasCssAnimation,
+    reduce,
+    activation: config.activation,
+    // JS effects are gated too. They emit no `animation` declaration, so only the play-state
+    // write is skipped — the activation itself still has to be bound, or `on:enter` and
+    // `on:click` would silently do nothing for every pinned, dragged, or morphing element.
+    hasWork: elementHasCssAnimation || plan.jsEffects.length > 0,
+    hasCssAnimation,
+    // A browser lacking standalone translate/rotate/scale support silently ignores any
+    // `@keyframes` step written in those properties — the animation never visibly completes. An
+    // effect deferred on that promise would sit paused (or, for an entrance reveal, invisible)
+    // forever, so it must reach its final state immediately instead, the same fail-open rule
+    // already applied under reduced motion.
+    unsupportedTransform: needsIndividualTransforms(plan.channels, capabilities)
+  });
+  if (gate === "deferred" || gate === "scrubbed") properties["animation-play-state"] = "paused";
+  return {
+    properties,
+    attributes: {
+      [ATTR.normalized]: plan.fxNames.join(" "),
+      [ATTR.rm]: plan.reducedMotion,
+      [ATTR.state]: "ready"
+    },
+    gate,
+    activation: gate === "deferred" ? effectiveActivation(config) : null
+  };
+}
+function timelineMode(plan, config, capabilities) {
+  const scrubbed = config.timeline === "pin" && plan.supportedTimelines.includes("pin");
+  const useNativeTimeline = !scrubbed && supportsTimeline(config.timeline, capabilities) && plan.supportedTimelines.includes(config.timeline);
+  return { scrubbed, useNativeTimeline };
+}
+function transitionProperty(plan) {
+  return plan.transition ? { "--kui-transition": plan.transition } : {};
+}
+function timelineProperties(config, capabilities, useNativeTimeline) {
+  if (!useNativeTimeline) return {};
+  const properties = {
+    "animation-timeline": config.timeline === "scroll" ? "scroll()" : "view()"
+  };
+  if (capabilities.animationRange) {
+    properties["animation-range"] = config.range || (config.timeline === "scroll" ? "0% 100%" : "entry 0% cover 60%");
+  }
+  return properties;
+}
+function resolveGate(input) {
+  if (input.useNativeTimeline) return "native-timeline";
+  if (input.scrubbed) return "scrubbed";
+  if (!input.hasWork) return "immediate";
+  if (input.reduce || startKindOf(input.activation) === "immediate" || input.unsupportedTransform) {
+    return "immediate";
+  }
+  return "deferred";
+}
+function needsIndividualTransforms(channels, capabilities) {
+  if (capabilities.individualTransforms) return false;
+  return channels.some((c) => c === "translate" || c === "rotate" || c === "scale");
+}
+function supportsTimeline(timeline, capabilities) {
+  if (timeline === "view") return capabilities.viewTimeline;
+  if (timeline === "scroll") return capabilities.scrollTimeline;
+  return false;
+}
+function effectiveActivation(config) {
+  const observed = "enter";
+  if (config.timeline !== "time" && startKindOf(config.activation) === "manual") return observed;
+  return config.activation;
+}
+
+// src/core/stagger-keys.ts
+var GROUP_KEY_NAMES = ["cascade", "spread", "order", "cols", "along"];
+function collectKeys(lookup) {
+  const keys = {};
+  for (const name of GROUP_KEY_NAMES) {
+    const value = lookup(name);
+    if (value !== void 0) keys[name] = value;
+  }
+  return Object.keys(keys).length > 0 ? keys : void 0;
+}
+function elementStaggerKeys(parsed) {
+  return collectKeys((name) => parsed[name]);
+}
+function staggerKeysFor(scoped, elementWide) {
+  return collectKeys((name) => scoped?.[name] ?? elementWide?.[name]);
+}
+function isGroupedKeys(keys) {
+  return keys?.cascade !== void 0 || keys?.spread !== void 0 || keys?.order !== void 0;
+}
+var TARGET_GROUP_HOSTS = /* @__PURE__ */ new WeakMap();
+function claimTargetGroupHost(host) {
+  TARGET_GROUP_HOSTS.set(host, (TARGET_GROUP_HOSTS.get(host) ?? 0) + 1);
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    const remaining = TARGET_GROUP_HOSTS.get(host) - 1;
+    if (remaining > 0) TARGET_GROUP_HOSTS.set(host, remaining);
+    else TARGET_GROUP_HOSTS.delete(host);
+  };
+}
+function isTargetGroupHost(el) {
+  return TARGET_GROUP_HOSTS.has(el);
+}
+
+// src/core/derived/group-gate.ts
+function groupGateOwner(port, context, target) {
+  const keys = staggerKeysFor(target.hoists, elementStaggerKeys(context.parsed));
+  return isGroupedKeys(keys) ? context.host : void 0;
+}
+function skipsOwnBinding(state) {
+  return state.gateOwner !== void 0;
+}
+function activateGroup(port, group, oneShot) {
+  for (const member of group.members) {
+    if (oneShot && port.stateOf(member)?.status !== "ready") continue;
+    port.activateOne(member);
+  }
+}
+function deactivateGroup(port, group) {
+  for (const member of group.members) port.deactivateOne(member);
+}
+function registerCleanup(port, host, cleanup) {
+  const cleanups = port.book.cleanups.get(host) ?? [];
+  cleanups.push(cleanup);
+  port.book.cleanups.set(host, cleanups);
+}
+function bindOneGroup(port, host, group) {
+  const stylePlan = planStyles({
+    plan: group.target.plan,
+    config: group.config,
+    capabilities: port.capabilities,
+    respectReducedMotion: port.respectReducedMotion
+  });
+  if (stylePlan.gate !== "deferred") return;
+  const activation = stylePlan.activation;
+  const oneShot = isOneShot(resolveActivationSpec(activation));
+  const release = port.binder.bind(host, activation, {
+    threshold: group.config.threshold,
+    from: group.config.activationSource,
+    activate: () => activateGroup(port, group, oneShot),
+    deactivate: () => deactivateGroup(port, group)
+  });
+  registerCleanup(port, host, release);
+}
+function bindGroups(port, host) {
+  const groups = port.book.groups.get(host);
+  if (groups === void 0) return;
+  for (const group of groups) {
+    if (group.gateOwner === host) bindOneGroup(port, host, group);
+  }
+}
+
+// src/core/stagger-config.ts
+var FROM_KEYWORDS = /* @__PURE__ */ new Set(["start", "end", "center", "edges", "random"]);
+var ORDER_KEYS = /* @__PURE__ */ new Set(["from", "order"]);
+var SPREAD_KEY = "spread";
+var COLS_KEY = "cols";
+var AXIS_KEYS = /* @__PURE__ */ new Set(["axis", "along"]);
+var AXIS_VALUES = /* @__PURE__ */ new Set(["x", "y"]);
+var ORIGIN_RE = /^(\d+(?:\.\d+)?|\.\d+)\/(\d+(?:\.\d+)?|\.\d+)$/;
+var COLS_RE = /^\d{1,9}$/;
+var PAIR_RE = /^([a-zA-Z-]+):(.*)$/;
+var INDEX_RE = /^-?\d{1,9}$/;
+function parseStaggerTokens(value, warnings) {
+  const config = { from: "start" };
+  const seen = { from: false, spread: false, cols: false, along: false };
+  for (const token of splitTopLevel(value, " ", warnings)) {
+    const pair = PAIR_RE.exec(token);
+    if (pair) applyStaggerPair(pair[1], pair[2], { config, seen, warnings });
+    else config.step = keepFirstStep(config.step, token, warnings);
+  }
+  return { config, sawFrom: seen.from };
+}
+function applyStaggerPair(key, raw, state) {
+  const slot = slotFor(key);
+  if (slot === void 0) {
+    state.warnings.push(
+      `unrecognised key "${key}" in data-kui-stagger \u2014 expected a time step, "spread:", "cols:", "along:", "from:" or "order:"`
+    );
+    return;
+  }
+  if (claim(slot, raw, state, key)) ASSIGN[slot](raw, state, key);
+}
+function slotFor(key) {
+  if (key === SPREAD_KEY) return "spread";
+  if (key === COLS_KEY) return "cols";
+  if (AXIS_KEYS.has(key)) return "along";
+  if (ORDER_KEYS.has(key)) return "from";
+  return void 0;
+}
+var ASSIGN = {
+  spread: (raw, state) => {
+    state.config.spread = raw.trim();
+  },
+  cols: (raw, state) => {
+    state.config.cols = parseCols(raw, state.warnings);
+  },
+  along: (raw, state, key) => {
+    state.config.along = parseAxis(raw, state.warnings, key);
+  },
+  from: (raw, state, key) => {
+    state.config.from = parseFrom(raw, state.warnings, key);
+  }
+};
+function claim(slot, raw, state, spelling) {
+  if (state.seen[slot]) {
+    state.warnings.push(`duplicate "${spelling}:" in data-kui-stagger \u2014 "${raw}" ignored`);
+    return false;
+  }
+  state.seen[slot] = true;
+  return true;
+}
+function parseCols(raw, warnings) {
+  const value = raw.trim();
+  if (value === "auto") return "auto";
+  if (COLS_RE.test(value) && Number(value) > 0) return Number(value);
+  warnings.push(`unrecognised "cols:${raw}" \u2014 expected a column count or "auto"`);
+  return void 0;
+}
+function parseAxis(raw, warnings, key) {
+  const value = raw.trim();
+  if (AXIS_VALUES.has(value)) return value;
+  warnings.push(`unrecognised "${key}:${raw}" \u2014 expected x or y`);
+  return void 0;
+}
+function resolveStaggerConfig(attribute, source, warnings = []) {
+  const inline = inlineGroupKeys(source);
+  if (attribute === null && inline === void 0) return void 0;
+  return resolveStaggerConfigFrom(attribute, inline, warnings);
+}
+function resolveStaggerConfigFrom(attribute, inline, warnings = []) {
+  if (attribute === null && inline === void 0) return void 0;
+  const { config: longhand, sawFrom } = parseStaggerTokens(attribute ?? "", warnings);
+  return oneStepMode(screenStep(mergeInline(longhand, sawFrom, inline ?? {}, warnings), warnings), warnings);
+}
+function oneStepMode(config, warnings) {
+  if (config.spread === void 0 || config.step === void 0) return config;
+  warnings.push(
+    `stagger step "${config.step}" is ignored \u2014 "spread:${config.spread}" already budgets the whole group, and the step is what it divides out`
+  );
+  const budgeted = { ...config };
+  delete budgeted.step;
+  return budgeted;
+}
+function inlineGroupKeys(source) {
+  if (!hasGroupKey(source)) return void 0;
+  const { cascade, spread, order, cols, along } = parse(source);
+  const keys = { cascade, spread, order, cols, along };
+  return Object.values(keys).some((value) => value !== void 0) ? keys : void 0;
+}
+function screenStep(config, warnings) {
+  const screened = { ...config };
+  if (!keepValue("step", config.step, warnings)) delete screened.step;
+  if (!keepValue("spread", config.spread, warnings)) delete screened.spread;
+  return screened;
+}
+function keepValue(label, value, warnings) {
+  if (value === void 0) return false;
+  if (isSafeCssValue(value)) return true;
+  warnings.push(`stagger ${label} "${value}" contains disallowed CSS syntax \u2014 ignored`);
+  return false;
+}
+function mergeInline(longhand, sawFrom, inline, warnings) {
+  const config = { ...longhand };
+  if (inline.cascade !== void 0) {
+    warnOverride("stagger step", longhand.step, inline.cascade, warnings);
+    config.step = inline.cascade;
+  }
+  if (inline.spread !== void 0) {
+    warnOverride("stagger budget", longhand.spread, inline.spread, warnings);
+    config.spread = inline.spread;
+  }
+  mergeInlineGrid(config, longhand, inline, warnings);
+  if (inline.order !== void 0) {
+    const order = parseFrom(inline.order, warnings, "order");
+    warnOverride("stagger order", sawFrom ? longhand.from : void 0, order, warnings);
+    config.from = order;
+  }
+  return config;
+}
+function mergeInlineGrid(config, longhand, inline, warnings) {
+  if (inline.cols !== void 0) {
+    const cols = parseCols(inline.cols, warnings);
+    warnOverride("stagger columns", longhand.cols, cols, warnings);
+    if (cols !== void 0) config.cols = cols;
+  }
+  if (inline.along !== void 0) {
+    const along = parseAxis(inline.along, warnings, "along");
+    warnOverride("stagger axis", longhand.along, along, warnings);
+    if (along !== void 0) config.along = along;
+  }
+}
+function hasGroupKey(source) {
+  return GROUP_KEY_PREFIXES.some((prefix) => source.includes(prefix));
+}
+var GROUP_KEY_PREFIXES = [
+  "cascade:",
+  "spread:",
+  "order:",
+  "cols:",
+  "along:"
+];
+function warnOverride(label, previous, next, warnings) {
+  if (previous === void 0 || next === void 0 || previous === next) return;
+  warnings.push(
+    `conflicting ${label}: data-kui-stagger says "${String(previous)}", data-kui says "${String(next)}" \u2014 data-kui wins`
+  );
+}
+function keepFirstStep(current, token, warnings) {
+  if (current === void 0) return token;
+  warnings.push(`extra token "${token}" in data-kui-stagger (expected one time step)`);
+  return current;
+}
+function parseFrom(raw, warnings, key = "from") {
+  const value = raw.trim();
+  if (FROM_KEYWORDS.has(value)) return value;
+  if (INDEX_RE.test(value)) return Number(value);
+  const origin = ORIGIN_RE.exec(value);
+  if (origin) return { x: clamp01(Number(origin[1]), value, warnings), y: clamp01(Number(origin[2]), value, warnings) };
+  warnings.push(
+    `unrecognised "${key}:${raw}" \u2014 expected start, end, center, edges, random, a child index, or an "x/y" point in a grid`
+  );
+  return "start";
+}
+function clamp01(value, source, warnings) {
+  if (value >= 0 && value <= 1) return value;
+  warnings.push(`stagger order "${source}" is outside the grid (0 to 1 on each axis) \u2014 clamped`);
+  return Math.min(Math.max(value, 0), 1);
+}
+
+// src/core/stagger.ts
+var RANK_PRECISION = 1e3;
+var RANDOM_SALT = 2654435761;
+var COUNT_SALT = 2246822507;
+var MIX_A = 569420461;
+var MIX_B = 1935289751;
+function resolveStep(config, maxRank) {
+  if (config.spread === void 0) return config.step;
+  if (maxRank <= 0) return "0ms";
+  return `calc((${config.spread}) / ${String(maxRank)})`;
+}
+function staggerRanks(count, from, warnings = [], layout) {
+  if (count <= 0) return [];
+  if (from === "random") return randomRanks(count);
+  if (layout) return gridRanks(count, from, layout, warnings);
+  if (typeof from === "object") {
+    warnings.push(
+      `stagger order "${String(from.x)}/${String(from.y)}" is a point in a grid, but this group has no "cols:" \u2014 add one, or name an edge with start/end/center/edges`
+    );
+    return staggerRanks(count, "start", warnings);
+  }
+  const last = count - 1;
+  if (from === "edges") {
+    return Array.from({ length: count }, (_, index) => Math.min(index, last - index));
+  }
+  const origin = originOf(from, last, warnings);
+  return Array.from({ length: count }, (_, index) => Math.floor(Math.abs(index - origin)));
+}
+function originOf(from, last, warnings) {
+  if (from === "start") return 0;
+  if (from === "end") return last;
+  if (from === "center") return last / 2;
+  return clampIndex(from, last, warnings);
+}
+function clampIndex(index, last, warnings) {
+  if (index < 0 || index > last) {
+    warnings.push(`stagger order "${String(index)}" is outside the group (0 to ${String(last)}) \u2014 clamped`);
+  }
+  return Math.min(Math.max(index, 0), last);
+}
+function gridRanks(count, from, layout, warnings) {
+  const cols = Math.min(Math.max(1, layout.cols), count);
+  const rows = Math.ceil(count / cols);
+  if (from === "edges") {
+    const inward = gridRanks(count, "center", layout, warnings);
+    let furthest = 0;
+    for (const rank of inward) furthest = Math.max(furthest, rank);
+    return inward.map((rank) => round(furthest - rank));
+  }
+  const origin = gridOrigin(from, { cols, rows, last: count - 1 }, warnings);
+  return Array.from({ length: count }, (_, index) => {
+    const dx = index % cols - origin.x;
+    const dy = Math.floor(index / cols) - origin.y;
+    if (layout.along === "x") return round(Math.abs(dx));
+    if (layout.along === "y") return round(Math.abs(dy));
+    return round(Math.hypot(dx, dy));
+  });
+}
+function gridOrigin(from, grid, warnings) {
+  const { cols, rows, last } = grid;
+  if (typeof from === "object") return { x: from.x * (cols - 1), y: from.y * (rows - 1) };
+  if (from === "start") return { x: 0, y: 0 };
+  if (from === "end") return { x: cols - 1, y: rows - 1 };
+  if (from === "center") return { x: (cols - 1) / 2, y: (rows - 1) / 2 };
+  const index = clampIndex(from, last, warnings);
+  return { x: index % cols, y: Math.floor(index / cols) };
+}
+function round(value) {
+  return Math.round(value * RANK_PRECISION) / RANK_PRECISION;
+}
+function randomRanks(count) {
+  const order = Array.from({ length: count }, (_, index) => index);
+  order.sort((a, b) => scatterKey(a, count) - scatterKey(b, count));
+  const ranks = new Array(count);
+  for (const [rank, index] of order.entries()) ranks[index] = rank;
+  return ranks;
+}
+function scatterKey(index, count) {
+  let hash = (Math.imul(index, RANDOM_SALT) ^ Math.imul(count, COUNT_SALT)) >>> 0;
+  hash ^= hash >>> 16;
+  hash = Math.imul(hash, MIX_A) >>> 0;
+  hash ^= hash >>> 15;
+  hash = Math.imul(hash, MIX_B) >>> 0;
+  hash ^= hash >>> 15;
+  return hash >>> 0;
+}
+function indexStaggerGroup(group, reporter) {
+  const warnings = [];
+  const ledgers = reopenLedger(group);
+  const config = resolveStaggerConfig(
+    group.getAttribute(ATTR.stagger),
+    group.getAttribute(ATTR.source) ?? "",
+    warnings
+  ) ?? { from: "start" };
+  const children = animatedChildren(group);
+  const ranks = staggerRanks(children.length, config.from, warnings, resolveLayout(config, children, warnings));
+  let maxRank = 0;
+  for (const [index, child] of children.entries()) {
+    const rank = ranks[index];
+    ledgers.style(child).set("--kui-i", String(rank));
+    GROUP_OF_CHILD.set(child, group);
+    if (rank > maxRank) maxRank = rank;
+  }
+  const step = resolveStep(config, maxRank);
+  if (step) ledgers.style(group).set("--kui-stagger", step);
+  ledgers.style(group).set("--kui-stagger-count", String(round(maxRank + 1)));
+  for (const warning of warnings) reporter?.warn(warning, group);
+}
+var GROUP_LEDGERS = /* @__PURE__ */ new WeakMap();
+var GROUP_OF_CHILD = /* @__PURE__ */ new WeakMap();
+function restageAfterRemoval(removed, reporter) {
+  const groups = /* @__PURE__ */ new Set();
+  for (const el of removed) {
+    const group = GROUP_OF_CHILD.get(el);
+    if (group) groups.add(group);
+  }
+  for (const group of groups) indexStaggerGroup(group, reporter);
+}
+function reopenLedger(group) {
+  GROUP_LEDGERS.get(group)?.restore();
+  const ledgers = createLedgerSet(group);
+  GROUP_LEDGERS.set(group, ledgers);
+  return ledgers;
+}
+function releaseStaggerGroup(group) {
+  GROUP_LEDGERS.get(group)?.restore();
+  GROUP_LEDGERS.delete(group);
+}
+function releaseStagger(root) {
+  const selector = `[${ATTR.stagger}], [${ATTR.source}]`;
+  if (root instanceof Element && root.matches(selector)) releaseStaggerGroup(root);
+  for (const el of root.querySelectorAll(selector)) releaseStaggerGroup(el);
+}
+function restageAround(el, reporter) {
+  restageOne(el, reporter);
+  const parent = el.parentElement;
+  if (parent) restageOne(parent, reporter);
+}
+function restageOne(el, reporter) {
+  if (declaresGroup(el)) indexStaggerGroup(el, reporter);
+  else releaseStaggerGroup(el);
+}
+function indexTargetGroup(request) {
+  const { host, matches, styleOf, keys, reporter } = request;
+  const warnings = [];
+  const attribute = host.getAttribute(ATTR.stagger);
+  const config = (keys ? resolveStaggerConfigFrom(attribute, keys, warnings) : resolveStaggerConfig(attribute, host.getAttribute(ATTR.source) ?? "", warnings)) ?? { from: "start" };
+  const maxRank = rankBuckets(bucketByParent(matches), config, styleOf, warnings);
+  const step = resolveStep(config, maxRank);
+  if (step) styleOf(host).set("--kui-stagger", step);
+  styleOf(host).set("--kui-stagger-count", String(round(maxRank + 1)));
+  for (const warning of warnings) reporter?.warn(warning, host);
+}
+function bucketByParent(matches) {
+  const byParent = /* @__PURE__ */ new Map();
+  for (const match of matches) {
+    const siblings = byParent.get(match.parentElement);
+    if (siblings) siblings.push(match);
+    else byParent.set(match.parentElement, [match]);
+  }
+  return byParent;
+}
+function rankBuckets(byParent, config, styleOf, warnings) {
+  let maxRank = 0;
+  for (const siblings of byParent.values()) {
+    const layout = resolveLayout(config, siblings, warnings);
+    const ranks = staggerRanks(siblings.length, config.from, warnings, layout);
+    for (const [index, match] of siblings.entries()) {
+      const rank = ranks[index];
+      styleOf(match).set("--kui-i", String(rank));
+      if (rank > maxRank) maxRank = rank;
+    }
+  }
+  return maxRank;
+}
+function resolveLayout(config, members, warnings) {
+  if (config.cols === void 0) {
+    if (config.along !== void 0) {
+      warnings.push(
+        `"along:${config.along}" names an axis of a grid this group has not declared \u2014 add "cols:" (a column count, or "auto")`
+      );
+    }
+    return void 0;
+  }
+  const cols = config.cols === "auto" ? measureColumns(members, warnings) : config.cols;
+  if (cols === void 0) return void 0;
+  return config.along === void 0 ? { cols } : { cols, along: config.along };
+}
+function measureColumns(members, warnings) {
+  if (members.length < 2) return 1;
+  const lefts = [];
+  let laidOut = false;
+  for (const member of members) {
+    const box = member.getBoundingClientRect();
+    if (box.width !== 0 || box.height !== 0) laidOut = true;
+    lefts.push(box.left);
+  }
+  if (!laidOut) {
+    warnings.push(
+      `"cols:auto" could not measure this group \u2014 none of its children have been laid out yet (display:none, or detached), so the stagger falls back to DOM order`
+    );
+    return void 0;
+  }
+  const direction = Math.sign(lefts[1] - lefts[0]);
+  if (direction === 0) return 1;
+  let cols = 1;
+  for (let index = 1; index < lefts.length; index++) {
+    if (Math.sign(lefts[index] - lefts[index - 1]) !== direction) break;
+    cols = index + 1;
+  }
+  return cols;
+}
+function animatedChildren(group) {
+  const children = [];
+  for (const child of group.children) {
+    if (child.hasAttribute(ATTR.source)) children.push(child);
+  }
+  return children;
+}
+function applyStagger(root, reporter) {
+  const selector = `[${ATTR.stagger}], [${ATTR.source}]`;
+  if (root instanceof Element && root.matches(selector)) restageOne(root, reporter);
+  for (const group of root.querySelectorAll(selector)) restageOne(group, reporter);
+}
+function declaresGroup(el) {
+  if (el.hasAttribute(ATTR.define)) return false;
+  if (isTargetGroupHost(el)) return false;
+  if (el.hasAttribute(ATTR.stagger)) return true;
+  return resolveStaggerConfig(null, el.getAttribute(ATTR.source) ?? "") !== void 0;
+}
+
+// src/core/derived/diagnostics.ts
+var ANCESTOR_WALK_BOUND = 64;
+function describe(el) {
+  return el.id ? `${el.tagName.toLowerCase()}#${el.id}` : el.tagName.toLowerCase();
+}
+function anyEstablishes3d(registry, names) {
+  return names.some((name) => registry.resolve(name)?.preset.establishes3d === true);
+}
+function liveEstablishes3d(port, el) {
+  const state = port.stateOf(el);
+  if (!state || state.aggregate) return false;
+  return anyEstablishes3d(port.registry, state.fxNames);
+}
+function find3dNeighbor(port, host, match) {
+  if (liveEstablishes3d(port, host)) return host;
+  let ancestor = match.parentElement;
+  let depth = 0;
+  while (ancestor && depth < ANCESTOR_WALK_BOUND) {
+    if (ancestor !== host && liveEstablishes3d(port, ancestor)) return ancestor;
+    ancestor = ancestor.parentElement;
+    depth++;
+  }
+  return void 0;
+}
+function markUnmatched(host, selectors, attributes) {
+  if (selectors.length === 0) {
+    host.removeAttribute(ATTR.unmatched);
+    return;
+  }
+  const value = selectors.join(", ");
+  if (attributes) attributes.set(ATTR.unmatched, value);
+  else host.setAttribute(ATTR.unmatched, value);
+}
+function warnNested3d(port, host, match, target) {
+  if (!anyEstablishes3d(port.registry, target.plan.fxNames)) return;
+  const neighbor = find3dNeighbor(port, host, match);
+  if (!neighbor) return;
+  const where = neighbor === host ? "its target: host" : "an ancestor";
+  port.reporter.warn(
+    `<${describe(match)}> establishes a 3D rendering context nested inside ${where} <${describe(neighbor)}>, which also runs a 3D-establishing effect \u2014 preserve-3d/perspective contexts do not compose when nested, so move one of the two 3D effects off its descendant`,
+    match
+  );
+}
+function warnPageScopeCloak(port, host, target) {
+  if (target.scope !== "page") return;
+  if (!target.plan.fxNames.some((name) => port.registry.resolve(name)?.preset.cloak === true)) return;
+  if (!host.ownerDocument.documentElement.hasAttribute(ATTR.cloak)) return;
+  port.reporter.warn(
+    `target "${target.selector}" (scope:page) on <${describe(host)}> carries a cloaked entrance \u2014 the pre-JS cloak selector only hides descendants of the element it is authored on, so a scope:page match outside <${describe(host)}>'s own subtree will flash unstyled before this library runs; use scope:self, or drop the cloaked preset from this group`,
+    host
+  );
+}
+
+// src/core/derived/install.ts
+var FORMER_HOST = /* @__PURE__ */ new WeakMap();
+function rememberFormerHost(book, match, host) {
+  let table = FORMER_HOST.get(book);
+  if (!table) {
+    table = /* @__PURE__ */ new WeakMap();
+    FORMER_HOST.set(book, table);
+  }
+  table.set(match, host);
+}
+function formerHostOf(book, match) {
+  return FORMER_HOST.get(book)?.get(match);
+}
+function targetKey(target) {
+  return `${target.scope} ${target.selector}`;
+}
+function matchKey(targets) {
+  return targets.length === 1 ? targetKey(targets[0]) : targets.map(targetKey).sort((a, b) => a.localeCompare(b)).join("
");
+}
+function groupConfigFor(port, context, target, cache) {
+  const cached2 = cache.get(target);
+  if (cached2) return cached2;
+  const config = { ...resolveGroupConfig(context.baseConfig, target.hoists) };
+  config.activation = port.resolveActivation(context.host, config, target.plan);
+  cache.set(target, config);
+  return config;
+}
+function resolveGroups(port, context, targets, cache) {
+  const live = [];
+  const resolved = [];
+  const unmatched = [];
+  for (const target of targets) {
+    if (target.selector === "") continue;
+    const matches = port.resolveGroupMatches(context.host, target);
+    if (matches.length === 0) unmatched.push(target.selector);
+    resolved.push({ target, matches });
+    live.push({
+      target,
+      config: groupConfigFor(port, context, target, cache),
+      gateOwner: groupGateOwner(port, context, target),
+      members: []
+    });
+  }
+  return { live, resolved, unmatched };
+}
+function buildContext(request) {
+  const baseConfig = request.baseConfig;
+  return {
+    host: request.el,
+    fingerprint: request.fingerprint,
+    parsed: request.parsed,
+    baseConfig,
+    timeline: baseConfig.timeline
+  };
+}
+function installHostGroup(port, request, own) {
+  if (own) {
+    port.install({ ...request, document: { targets: [own], warnings: [] } });
+  } else {
+    port.installAggregate(request);
+  }
+}
+function registerCleanup2(port, host, cleanup) {
+  const cleanups = port.book.cleanups.get(host) ?? [];
+  cleanups.push(cleanup);
+  port.book.cleanups.set(host, cleanups);
+}
+function installedTargetFor(port, context, targets) {
+  return targets.length === 1 ? targets[0] : compileUnion(port, context, targets);
+}
+function finalizeInstall(port, context, input) {
+  const host = context.host;
+  const hostState = port.stateOf(host);
+  markUnmatched(host, [...input.unmatched, ...input.suspects ?? []], hostState.attributes);
+  registerCleanup2(port, host, claimTargetGroupHost(host));
+  restageTargets(port, host);
+  bindGroups(port, host);
+  for (const [match, targets] of input.claims) {
+    warnNested3d(port, host, match, installedTargetFor(port, context, targets));
+  }
+  for (const group of input.resolved) warnPageScopeCloak(port, host, group.target);
+  syncAggregate(port, host);
+}
+function installWithTargets(port, request) {
+  const context = buildContext(request);
+  const cache = /* @__PURE__ */ new Map();
+  const { live, resolved, unmatched } = resolveGroups(port, context, request.document.targets, cache);
+  port.book.contexts.set(context.host, context);
+  port.book.groups.set(context.host, live);
+  const claims = claimMatches(port, context.host, resolved);
+  const own = request.document.targets.find((target) => target.selector === "");
+  if (!own && claims.size === 0) {
+    context.host.setAttribute(ATTR.state, "failed");
+    markUnmatched(context.host, [...unmatched, ...request.document.suspectSelectors ?? []]);
+    return;
+  }
+  installDerivedMatches(port, context, claims, cache);
+  installHostGroup(port, request, own);
+  finalizeInstall(port, context, { claims, resolved, unmatched, suspects: request.document.suspectSelectors });
+}
+function releaseMatch(port, host, match) {
+  const { book } = port;
+  rememberFormerHost(book, match, host);
+  book.hosts.delete(match);
+  book.derived.get(host)?.delete(match);
+  for (const group of book.groups.get(host) ?? []) {
+    const index = group.members.indexOf(match);
+    if (index !== -1) group.members.splice(index, 1);
+  }
+}
+function releaseHost(port, host) {
+  const { book } = port;
+  for (const match of [...book.derived.get(host) ?? []]) port.release(match);
+  for (const cleanup of book.cleanups.get(host) ?? []) cleanup();
+  book.derived.delete(host);
+  book.groups.delete(host);
+  book.contexts.delete(host);
+  book.unions.delete(host);
+  book.cleanups.delete(host);
+}
+function releaseDerived(port, el) {
+  const host = port.book.hosts.get(el);
+  if (host) {
+    releaseMatch(port, host, el);
+    return;
+  }
+  if (port.book.derived.has(el)) releaseHost(port, el);
+}
+function restageAfterTreeRelease(port, removed) {
+  const formerHosts = /* @__PURE__ */ new Set();
+  for (const el of removed) {
+    const host = formerHostOf(port.book, el);
+    if (host) formerHosts.add(host);
+  }
+  for (const host of formerHosts) {
+    if (!port.stateOf(host)) continue;
+    restageTargets(port, host);
+    syncAggregate(port, host);
+  }
+}
+var SKIP_LABEL = {
+  host: "is the target: host itself",
+  authored: "already carries its own data-kui and animates itself",
+  claimed: "is already claimed by another target: host"
+};
+function rejectionReason(port, host, match) {
+  if (match === host) return "host";
+  if (match.hasAttribute(ATTR.source)) return "authored";
+  const claimedBy = port.book.hosts.get(match);
+  if (claimedBy !== void 0 && claimedBy !== host) return "claimed";
+  return void 0;
+}
+function claimMatch(claims, target, match) {
+  const existing = claims.get(match);
+  if (existing) existing.push(target);
+  else claims.set(match, [target]);
+}
+function reportSkips(port, host, target, skipped) {
+  const names = target.plan.fxNames.join(", ");
+  for (const [reason, count] of skipped) {
+    const plural = count === 1 ? "match" : "matches";
+    port.reporter.warn(
+      `target "${target.selector}" (${names}) skipped ${count} ${plural} that ${SKIP_LABEL[reason]}`,
+      host
+    );
+  }
+}
+function claimMatches(port, host, groups) {
+  const claims = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    const skipped = /* @__PURE__ */ new Map();
+    for (const match of group.matches) {
+      const reason = rejectionReason(port, host, match);
+      if (reason) skipped.set(reason, (skipped.get(reason) ?? 0) + 1);
+      else claimMatch(claims, group.target, match);
+    }
+    reportSkips(port, host, group.target, skipped);
+  }
+  return claims;
+}
+function resolveClaim(port, context, entry, cache) {
+  const { match, targets } = entry;
+  const target = installedTargetFor(port, context, targets);
+  return { match, targets, target, config: groupConfigFor(port, context, target, cache) };
+}
+function matchGateOwner(port, context, targets) {
+  const grouped = targets.some((target) => groupGateOwner(port, context, target) !== void 0);
+  return grouped ? context.host : void 0;
+}
+function recordClaim(port, context, claim2) {
+  const { book } = port;
+  book.hosts.set(claim2.match, context.host);
+  const derived = book.derived.get(context.host) ?? /* @__PURE__ */ new Set();
+  derived.add(claim2.match);
+  book.derived.set(context.host, derived);
+  const live = book.groups.get(context.host) ?? [];
+  for (const target of claim2.targets) {
+    live.find((group) => group.target === target)?.members.push(claim2.match);
+  }
+}
+function installClaim(port, context, claim2) {
+  port.install({
+    el: claim2.match,
+    fingerprint: `${context.fingerprint}\0${matchKey(claim2.targets)}`,
+    parsed: { specs: claim2.target.specs, warnings: [] },
+    config: claim2.config,
+    document: { targets: [{ ...claim2.target, selector: "", scope: "self" }], warnings: [] },
+    host: context.host,
+    gateOwner: matchGateOwner(port, context, claim2.targets)
+  });
+  recordClaim(port, context, claim2);
+}
+function installDerivedMatches(port, context, claims, cache = /* @__PURE__ */ new Map()) {
+  const installed = [];
+  for (const [match, targets] of claims) {
+    const claim2 = resolveClaim(port, context, { match, targets }, cache);
+    installClaim(port, context, claim2);
+    installed.push(claim2.match);
+  }
+  return installed;
+}
+function restageTargets(port, host) {
+  const context = port.book.contexts.get(host);
+  const live = port.book.groups.get(host);
+  const hostState = port.stateOf(host);
+  if (!context || !live || !hostState) return;
+  const elementWide = elementStaggerKeys(context.parsed);
+  const styleOf = (el) => el === host ? hostState.ledgers.style(host) : port.stateOf(el).ledgers.style(el);
+  for (const group of live) {
+    if (group.members.length === 0) continue;
+    indexTargetGroup({
+      host,
+      matches: group.members,
+      styleOf,
+      keys: staggerKeysFor(group.target.hoists, elementWide),
+      reporter: port.reporter
+    });
+  }
+}
+
+// src/core/derived/late-matches.ts
+var ANCESTOR_WALK_BOUND2 = 64;
+function newMatchesFor(node, host, target) {
+  const candidates = [...node.querySelectorAll(target.selector)];
+  if (node.matches(target.selector)) candidates.unshift(node);
+  return candidates.filter((el) => host.contains(el) && el !== host && !el.hasAttribute(ATTR.part));
+}
+function resolveNewGroups(node, host, groups) {
+  const resolved = [];
+  const before = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    before.set(group, group.members.length);
+    if (group.target.scope !== "self") continue;
+    const matches = newMatchesFor(node, host, group.target);
+    if (matches.length > 0) resolved.push({ target: group.target, matches });
+  }
+  return { resolved, before };
+}
+function insertionIndex(members, anchor) {
+  const index = members.findIndex((existing) => Boolean(existing.compareDocumentPosition(anchor) & Node.DOCUMENT_POSITION_PRECEDING));
+  return index === -1 ? members.length : index;
+}
+function hasAlreadyFired(port, group, added) {
+  return group.members.some((member) => !added.includes(member) && port.stateOf(member)?.status !== "ready");
+}
+function activateIfAlreadyFired(port, group, added) {
+  if (group.gateOwner === void 0) return;
+  if (hasAlreadyFired(port, group, added)) for (const member of added) port.activateOne(member);
+}
+function reindexGroup(port, group, before) {
+  if (group.members.length === before) return;
+  const added = group.members.splice(before);
+  group.members.splice(insertionIndex(group.members, added[0]), 0, ...added);
+  activateIfAlreadyFired(port, group, added);
+}
+function adoptIntoHost(port, node, host) {
+  const groups = port.book.groups.get(host);
+  const context = port.book.contexts.get(host);
+  if (!groups || !context) return;
+  const { resolved, before } = resolveNewGroups(node, host, groups);
+  if (resolved.length === 0) return;
+  const claims = claimMatches(port, host, resolved);
+  if (claims.size === 0) return;
+  installDerivedMatches(port, context, claims);
+  for (const group of groups) reindexGroup(port, group, before.get(group));
+  restageTargets(port, host);
+}
+function adoptLateMatches(port, node) {
+  if (node.hasAttribute(ATTR.part)) return;
+  let ancestor = node.parentElement;
+  let depth = 0;
+  while (ancestor && depth < ANCESTOR_WALK_BOUND2) {
+    adoptIntoHost(port, node, ancestor);
+    ancestor = ancestor.parentElement;
+    depth++;
+  }
+}
+
+// src/core/dom-watcher.ts
+var WORK_BUDGET = 100;
+function createDomWatcher(options) {
+  const { root, onElementAdded, onElementRemoved, onAttributeChanged } = options;
+  const schedule = options.schedule ?? scheduleFrame;
+  const createObserver = options.createObserver ?? defaultObserverFactory();
+  const added = /* @__PURE__ */ new Set();
+  const removed = /* @__PURE__ */ new Set();
+  const changed = /* @__PURE__ */ new Set();
+  let observer;
+  let scheduled = false;
+  let destroyed = false;
+  function collect(record) {
+    if (record.type === "attributes") {
+      const target = asElement(record.target);
+      if (target) changed.add(target);
+      return;
+    }
+    for (const node of record.addedNodes) queueRoot(added, asElement(node));
+    for (const node of record.removedNodes) queueRoot(removed, asElement(node));
+  }
+  function queueWork(records) {
+    for (const record of records) collect(record);
+    if (scheduled) return;
+    scheduled = true;
+    schedule(flush);
+  }
+  const install = whileAttached(root, onElementAdded);
+  const recompile = whileAttached(root, onAttributeChanged);
+  function flush() {
+    scheduled = false;
+    if (destroyed) return;
+    let remaining = WORK_BUDGET;
+    remaining = drain(removed, onElementRemoved, remaining);
+    remaining = drain(added, install, remaining);
+    drain(changed, recompile, remaining);
+    if (added.size + removed.size + changed.size > 0) {
+      scheduled = true;
+      schedule(flush);
+    }
+  }
+  return {
+    watch() {
+      if (!createObserver) return;
+      destroyed = false;
+      observer = createObserver(queueWork);
+      observer.observe(root, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        // `ATTR.stagger` is watched for the same reason `ATTR.source` is: both spell a stagger
+        // group, and an edit to either has to re-rank the group. Its absence here meant editing
+        // `data-kui-stagger` produced no record at all — not a missed handler, no mutation.
+        attributeFilter: [ATTR.source, ATTR.on, ATTR.timeline, ATTR.threshold, ATTR.stagger]
+      });
+    },
+    destroy() {
+      destroyed = true;
+      observer?.disconnect();
+      added.clear();
+      removed.clear();
+      changed.clear();
+    }
+  };
+}
+function whileAttached(root, work) {
+  return (el) => {
+    if (root.contains(el)) work(el);
+  };
+}
+function queueRoot(roots, candidate) {
+  if (!candidate) return;
+  for (const root of roots) {
+    if (root.contains(candidate)) return;
+    if (candidate.contains(root)) roots.delete(root);
+  }
+  roots.add(candidate);
+}
+function drain(roots, callback, budget) {
+  for (const root of roots) {
+    if (budget === 0) break;
+    roots.delete(root);
+    callback(root);
+    budget--;
+  }
+  return budget;
+}
+function asElement(node) {
+  return node.nodeType === 1 ? node : null;
+}
+function scheduleFrame(callback) {
+  const requestFrame = globalThis.requestAnimationFrame;
+  if (typeof requestFrame === "function") requestFrame(() => callback());
+  else queueMicrotask(callback);
+}
+function defaultObserverFactory() {
+  if (typeof MutationObserver === "undefined") return void 0;
+  return (callback) => new MutationObserver(callback);
+}
+
+// src/core/js-effect-preparer.ts
+function sequencedTiming(entry, warn) {
+  const timing = readEffectTiming(entry.spec, warn);
+  if (entry.sequencedDelayMs !== void 0) timing.delayMs = entry.sequencedDelayMs;
+  return timing;
+}
+function createJsEffectPreparer(options) {
+  const { scheduler, rootResolver, capabilities, reporter, respectReducedMotion } = options;
+  function contextFor(el, signal, ledger) {
+    const doc = el.ownerDocument;
+    return {
+      doc,
+      win: doc.defaultView ?? globalThis,
+      scheduler,
+      rootFor: rootResolver,
+      capabilities,
+      invalidate: () => scheduler.invalidate(),
+      warn: (message) => reporter.warn(message, el),
+      reducedMotion: respectReducedMotion && capabilities.reducedMotion,
+      signal,
+      style: ledger
+    };
+  }
+  return {
+    prepare({ el, plan, signal, ledger }) {
+      const instances = [];
+      if (plan.jsEffects.length === 0) return instances;
+      const ctx = contextFor(el, signal, ledger);
+      for (const entry of plan.jsEffects) {
+        const { spec, resolved } = entry;
+        const prepare = resolved.primitive.prepare;
+        if (!prepare) continue;
+        const warn = (message) => reporter.warn(message, el);
+        const params = readEffectParams(
+          { ...resolved.preset.params, ...authoredParams(entry) },
+          resolved.primitive.parameters,
+          warn,
+          sequencedTiming(entry, warn)
+        );
+        try {
+          instances.push(prepare(el, params, ctx));
+        } catch (error) {
+          reporter.warn(`"${spec.name}" failed to initialise: ${String(error)}`, el);
+        }
+      }
+      return instances;
+    }
+  };
+}
+
+// src/core/reporter.ts
+function consoleReporter() {
+  return {
+    warn(message, subject) {
+      if (subject === void 0) console.warn(`[kuinetic] ${message}`);
+      else console.warn(`[kuinetic] ${message}`, subject);
+    }
+  };
+}
+function silentReporter() {
+  return { warn() {
+  } };
+}
+function collectingReporter() {
+  const messages = [];
+  return {
+    messages,
+    warn(message) {
+      messages.push(message);
+    }
+  };
+}
+
+// src/core/animator.ts
+var CLOAK_WATCHDOG_MS = 3e3;
+function fingerprintOf(attributes) {
+  return [attributes.source, attributes.on, attributes.timeline, attributes.threshold].join("\0");
+}
+function isElementNode(node) {
+  return typeof Element !== "undefined" && node instanceof Element;
+}
+var Animator = class {
+  registry;
+  capabilities;
+  /**
+   * Public alongside `registry` and `capabilities`, and for the same reason: `control()` is a free
+   * function in its own module (mirroring `play()`), and an author-facing diagnostic it emits has
+   * to reach the same sink every other diagnostic on this animator does. Routing it through a
+   * second, private channel would mean `consoleReporter()` silenced half the library's warnings.
+   */
+  reporter;
+  root;
+  /**
+   * Author-defined bundles found in this animator's root. Per-animator, not per-module: two
+   * animators on two roots must not see each other's definitions.
+   */
+  bundles;
+  binder;
+  scheduler;
+  rootResolver;
+  jsEffectPreparer;
+  respectReducedMotion;
+  shouldObserve;
+  /** Runtime truth. Attributes are for CSS and debugging; they make a poor state machine. */
+  states = /* @__PURE__ */ new WeakMap();
+  /** Iterable lifecycle index; the WeakMap remains the fast state lookup. */
+  liveElements = /* @__PURE__ */ new Set();
+  /**
+   * Which run is current for one element's `InstanceState`, so a completion that resolves after
+   * being superseded can tell it is stale even when `status` and `direction` do not say so.
+   *
+   * `state.direction` cannot serve as that identifier on its own — it only ever holds `'forward'`
+   * or `'reverse'`, so an element whose activation flips back and forth (a hover-driven card flip,
+   * `pointerenter`/`pointerleave` firing repeatedly) revisits the same direction many times over
+   * its life. A cancelled run's completion settling late would then match a much later run headed
+   * the same way, by coincidence rather than by being the same run. Keyed on `InstanceState` rather
+   * than `Element` so a `release()`-then-reinstall — a fresh state object — starts with no
+   * history, the same reason `settleWhen` already re-checks `this.states.get(el) !== state`.
+   */
+  currentRun = /* @__PURE__ */ new WeakMap();
+  /**
+   * Whether the element's current run has a settle gate that will eventually write its final
+   * status, or whether nothing is ever going to report on it.
+   *
+   * `settleWhen` declines to arm a gate when every instance it was handed is `continuous` — see
+   * the reasoning there, which is right: a pin that is still pinned should read `running`. But
+   * "nobody will ever write this status" was left as an unrecorded fact known only inside that
+   * one early return, and `cancel()` had no way to ask. So a cancelled pin kept `status =
+   * 'running'` for the rest of the element's life and `activate()`'s own `running` guard locked it
+   * out of every future activation. Measured on `<div data-kui="pin-section">`, the documented
+   * form: cancel left `data-kui-state="running"`, and the next `activate()` emitted no `kui:start`
+   * at all.
+   *
+   * Recorded here rather than re-derived in `cancel()` from `state.instances`, because the two
+   * would not be asking the same question. `settleWhen` decides on the instances that actually
+   * *started* this run; an instance whose setup threw is excluded there, and by cancel time it is
+   * indistinguishable from a timed one (`continuous` reads from the setup result, which a failed
+   * or torn-down instance no longer has). The gate's own answer is the only one that matches the
+   * gate's own behaviour.
+   *
+   * Keyed on `InstanceState` for the same reason `currentRun` is: a `release()`-then-reinstall
+   * mints a fresh state object, which must start with no history.
+   */
+  settleArmed = /* @__PURE__ */ new WeakMap();
+  /** Built lazily by `watch()` when not injected, so nothing observes until `start()` needs it. */
+  domWatcher;
+  /**
+   * Built lazily by `watchGates()`, and only for an element carrying a viewport gate on a
+   * JavaScript-rendered effect — see `applyViewportGates` for why that is the only case that needs
+   * one. Stays `undefined` on a page whose gates are all on CSS-rendered effects, which binds no
+   * `MediaQueryList` listener anywhere.
+   */
+  gateWatcher;
+  started = false;
+  /** This animator's derived-host bookkeeping — see `DerivedBook`. */
+  book = createDerivedBook();
+  /** The narrow window the `derived/*` modules get onto this animator — see `AnimatorPort`. */
+  port;
+  constructor(options = {}) {
+    const resolved = resolveCollaborators(options);
+    this.registry = resolved.registry;
+    this.bundles = new BundleTable(resolved.registry);
+    this.capabilities = resolved.capabilities;
+    this.root = resolved.root;
+    this.reporter = resolved.reporter;
+    this.binder = resolved.binder;
+    this.scheduler = resolved.scheduler;
+    this.rootResolver = resolved.rootResolver;
+    this.jsEffectPreparer = resolved.jsEffectPreparer;
+    this.domWatcher = resolved.domWatcher;
+    this.respectReducedMotion = resolved.respectReducedMotion;
+    this.shouldObserve = resolved.shouldObserve;
+    this.port = {
+      registry: this.registry,
+      reporter: this.reporter,
+      binder: this.binder,
+      capabilities: this.capabilities,
+      respectReducedMotion: this.respectReducedMotion,
+      book: this.book,
+      stateOf: (el) => this.states.get(el),
+      install: (request) => this.install(request),
+      installAggregate: (request) => this.installAggregate(request),
+      resolveGroupMatches: (host, target) => this.resolveGroupMatches(host, target),
+      resolveActivation: (el, config, plan) => this.resolveActivation(el, config, plan),
+      release: (el) => this.release(el),
+      activateOne: (el) => this.activateOne(el),
+      deactivateOne: (el) => this.deactivate(el),
+      writeStatus: (el, state, next) => this.writeStatus(el, state, next),
+      emit: (el, state, type, reason) => this.emit(el, state, type, reason)
+    };
+  }
+  /**
+   * Explicit entry point. Importing the library never touches the document, which keeps SSR,
+   * hydration, and tests deterministic.
+   *
+   * @complexity O(n) time in the number of elements scanned.
+   * @overallScore 100
+   */
+  start() {
+    if (this.started) return this;
+    this.started = true;
+    const watchdog = globalThis.setTimeout(() => this.uncloak(), CLOAK_WATCHDOG_MS);
+    try {
+      this.scan(this.root);
+      if (this.shouldObserve) this.watch();
+    } finally {
+      globalThis.clearTimeout(watchdog);
+      this.uncloak();
+    }
+    return this;
+  }
+  /**
+   * Process every unprocessed element in a subtree, including the root.
+   *
+   * `querySelectorAll` excludes the root, but an inserted subtree very often carries the
+   * attribute on its top node — skipping it silently drops those animations.
+   *
+   * Two passes, and the order is the feature. Every `data-kui-define` in the subtree is registered
+   * before any element in it is compiled, so a `<template>` at the bottom of the document is
+   * already known to the card at the top that names it. Making forward references work by
+   * construction rather than by handling is the point — see `core/bundles.ts`.
+   *
+   * @param root - Subtree to scan. Defaults to the animator's root.
+   * @complexity O(n) time in the subtree size; O(1) extra space.
+   * @overallScore 100
+   */
+  scan(root = this.root) {
+    if (!root) return this;
+    const defined = this.bundles.collect(root, this.reporter);
+    const selector = `[${ATTR.source}]`;
+    if (isElementNode(root) && root.matches(selector)) this.process(root);
+    for (const el of root.querySelectorAll(selector)) this.process(el);
+    applyStagger(root, this.reporter);
+    if (defined > 0 && root !== this.root) this.retryPending();
+    return this;
+  }
+  /**
+   * Recompile every element that stalled on a name the library did not know.
+   *
+   * `pending` is stamped for any unresolved name, not only an undefined bundle, so this can retry
+   * an element that will fail again. That is deliberate: the alternative is an index of which
+   * element is waiting on which name, and the cost of being wrong here is one wasted compile on a
+   * page that already has a warning about it.
+   *
+   * @complexity O(p) time in the number of pending elements.
+   * @overallScore 100
+   */
+  retryPending() {
+    for (const el of this.root.querySelectorAll(`[${ATTR.state}="pending"]`)) this.process(el);
+  }
+  /**
+   * Compile and install one element's effects, recompiling if its attribute changed.
+   *
+   * @param el - Element carrying `data-kui`.
+   * @complexity O(e) time in the number of composed effects; O(e) space for the plan.
+   * @overallScore 100
+   */
+  process(el) {
+    if (el.hasAttribute(ATTR.define)) return;
+    const attributes = readAttributes(el);
+    const fingerprint = fingerprintOf(attributes);
+    const existing = this.states.get(el);
+    if (existing?.fingerprint === fingerprint) return;
+    if (existing) this.release(el);
+    const parsed = scopeHoists(this.bundles.expand(parse(attributes.source)), this.registry);
+    const baseConfig = resolveConfig(attributes, parsed);
+    const config = { ...baseConfig };
+    const document2 = compileTargets(parsed, this.registry, baseConfig.timeline);
+    const facts = document2.targets[0].plan;
+    this.applyViewportGates(el, document2);
+    config.activation = this.resolveActivation(el, baseConfig, facts);
+    this.reportCompiled(el, document2);
+    if (document2.targets.every((target) => target.plan.fxNames.length === 0)) {
+      el.setAttribute(ATTR.state, facts.unknown.length > 0 ? "pending" : "failed");
+      return;
+    }
+    this.install({ el, fingerprint, parsed, config, baseConfig, document: document2 });
+  }
+  /**
+   * Report everything a finished compile has to say about one element.
+   *
+   * Three sources, one place. The third is separate from the plan's own warnings because `compile`
+   * is pure and environment-free by design — it is handed a registry and a timeline, never the
+   * browser it is running in. "This browser cannot render that channel" is only answerable here,
+   * where the detected capabilities live, and `targets[0]`'s channel union is the merged one, so it
+   * runs once per element rather than once per `target:` group.
+   *
+   * @complexity O(w) time in the total warning count; O(1) space.
+   * @overallScore 100
+   */
+  reportCompiled(el, document2) {
+    for (const warning of document2.warnings) this.reporter.warn(warning, el);
+    for (const target of document2.targets) {
+      for (const warning of target.plan.warnings) this.reporter.warn(warning, el);
+    }
+    const channels = [...new Set(document2.targets.flatMap((target) => target.plan.channels))];
+    for (const warning of unsupportedChannelWarnings(channels, this.capabilities)) {
+      this.reporter.warn(warning, el);
+    }
+  }
+  /**
+   * Apply a compiled plan and bind its activation.
+   *
+   * @complexity O(e) time in composed effects; O(e) space for retained cleanups.
+   * @overallScore 100
+   */
+  /**
+   * Choose the activation, letting a primitive's preference fill in only when the author named
+   * none, and reporting whatever looks wrong about one the author did name.
+   *
+   * Declared capability metadata was previously never checked anywhere, which made
+   * `supportedActivations` documentation rather than a contract. The checks themselves live in
+   * `activation.ts`'s diagnostics half — they grew a good deal when the list opened, and they
+   * decide nothing, so keeping them here would have made this class the place where "which
+   * activation" and "is that a real event" were the same paragraph.
+   *
+   * @complexity O(a) time in supported activations; O(1) space.
+   * @overallScore 100
+   */
+  resolveActivation(el, config, plan) {
+    if (!config.activationAuthored) return plan.defaultActivation ?? config.activation;
+    warnAboutActivation({
+      el,
+      spec: resolveActivationSpec(config.activation),
+      supported: plan.supportedActivations,
+      reporter: this.reporter
+    });
+    return config.activation;
+  }
+  /**
+   * Resolve the viewport gates (`above:` / `below:`) on this element's JavaScript-rendered effects.
+   *
+   * CSS-rendered segments are deliberately absent from this method. Their gate is compiled into the
+   * `animation-name` declaration as a `var()` the browser re-resolves on every resize with no
+   * script involved (see `core/breakpoints.ts`), which is the entire reason this feature does not
+   * need the teardown machinery `gsap.matchMedia()` is built around. A JavaScript-rendered effect
+   * has no `animation-name` for a stylesheet to neutralise, so it is the one case that has to be
+   * decided here — and, having been decided once, has to be re-decided when the viewport crosses
+   * the breakpoint it was decided at.
+   *
+   * @complexity O(e) time in JS-rendered effects; O(b) space, bounded by the scale's five names.
+   * @overallScore 100
+   */
+  applyViewportGates(el, document2) {
+    const gates = document2.targets.flatMap((target) => target.plan.jsEffects).map((entry) => entry.spec.gate).filter((gate) => gate !== void 0);
+    if (gates.length === 0) {
+      this.gateWatcher?.unwatch(el);
+      return;
+    }
+    const win = el.ownerDocument.defaultView ?? void 0;
+    for (const target of document2.targets) {
+      target.plan.jsEffects = target.plan.jsEffects.filter((entry) => gateMatches(entry.spec.gate, win));
+    }
+    this.watchGates(el, win, breakpointsIn(gates));
+  }
+  /**
+   * Arm live re-evaluation for one element, building the watcher on first use.
+   *
+   * Lazy so that a page with no JavaScript-rendered gate — which is most pages, since the catalog
+   * is overwhelmingly `css-keyframes` — binds no `MediaQueryList` listener at all.
+   *
+   * @complexity O(b) time in the element's breakpoints; O(1) amortised space.
+   * @overallScore 100
+   */
+  watchGates(el, win, breakpoints) {
+    this.gateWatcher ??= createGateWatcher(win, (target) => this.regate(target));
+    this.gateWatcher.watch(el, breakpoints);
+  }
+  /**
+   * Rebuild one element because the viewport crossed a breakpoint its JS effects depend on.
+   *
+   * `release` then `process`, rather than a partial update, and rather than `process` alone:
+   * `process` short-circuits on an unchanged fingerprint, and the fingerprint is a hash of
+   * *attributes*, which have not changed — the viewport has. Releasing first is also what makes the
+   * transition safe mid-animation: it aborts the activation binding, runs each JS effect's own
+   * `destroy()`, and unwinds both ledgers, so the element is back at the author's own markup before
+   * the new plan touches it. That is the same path an attribute edit takes, so there is one
+   * teardown implementation rather than two.
+   *
+   * There is deliberately no "is this element still live?" guard. Every path that stops tracking an
+   * element goes through `release`, and `release` unwatches — so an element that reaches here is
+   * one the watcher still holds, which is one `release` has not run on, which is one that is live.
+   * A guard would be unreachable code pretending to be caution, the same call `positioned()` in
+   * `compile.ts` makes about its own missing branch.
+   *
+   * @complexity O(e) time in the element's composed effects; O(1) space.
+   * @overallScore 100
+   */
+  regate(el) {
+    this.release(el);
+    this.process(el);
+  }
+  /** Route a document with any non-empty-selector group through the derived-host path; `true`
+   *  when it did (a derived install's own `document` never carries one, so this cannot recurse). */
+  installedAsHost(request) {
+    if (!request.document.targets.some((t) => t.selector !== "")) return false;
+    installWithTargets(this.port, request);
+    return true;
+  }
+  install(request) {
+    if (this.installedAsHost(request)) return;
+    const { el, fingerprint, parsed, config, document: document2 } = request;
+    const groups = document2.targets.map((target) => ({ target, matches: this.resolveGroupMatches(el, target) })).filter((group) => group.matches.length > 0);
+    const ledgers = createLedgerSet(el);
+    const ledger = ledgers.style(el);
+    const attributes = ledgers.attributes(el);
+    const controller = new AbortController();
+    this.bindAuthorCallback(el, parsed, controller.signal);
+    const elementHasCssAnimation = document2.targets.some(
+      (target) => Object.keys(target.plan.declarations).length > 0
+    );
+    const elementStylePlan = planStyles({
+      plan: groups[0].target.plan,
+      config,
+      capabilities: this.capabilities,
+      respectReducedMotion: this.respectReducedMotion,
+      elementHasCssAnimation
+    });
+    const state = {
+      fingerprint,
+      specs: parsed.specs,
+      activation: config.activation,
+      timeline: config.timeline,
+      fxNames: document2.targets.flatMap((target) => target.plan.fxNames),
+      jsEffectNames: document2.targets.flatMap(
+        (target) => target.plan.jsEffects.map((entry) => entry.spec.name)
+      ),
+      progressDriven: elementStylePlan.gate === "scrubbed" || elementStylePlan.gate === "native-timeline",
+      instances: [],
+      ledger,
+      attributes,
+      ledgers,
+      controller,
+      status: "ready"
+    };
+    if (request.host) state.host = request.host;
+    if (request.gateOwner) state.gateOwner = request.gateOwner;
+    this.states.set(el, state);
+    this.liveElements.add(el);
+    attributes.set(ATTR.state, "ready");
+    const context = {
+      el,
+      state,
+      ledgers,
+      config,
+      signal: controller.signal,
+      elementHasCssAnimation
+    };
+    for (const group of groups) this.installGroup(group, context);
+    this.openGate({ el, state, stylePlan: elementStylePlan, config, plan: groups[0].target.plan });
+  }
+  /**
+   * Install a zero-instance aggregate host: a `target:` host with no own (empty-selector) group,
+   * whose status mirrors its derived matches' instead of running any effect of its own
+   * (`syncAggregate`). Called by 2a's `installWithTargets` after every claimed match has already
+   * been installed, which is what D-E's stamping order requires — the host's own `data-kui-state`
+   * must never appear before its matches'.
+   *
+   * @complexity O(g) time in the document's group count; O(1) space.
+   * @overallScore 100
+   */
+  installAggregate(request) {
+    const { el, fingerprint, parsed, config, document: document2 } = request;
+    const ledgers = createLedgerSet(el);
+    const controller = new AbortController();
+    this.bindAuthorCallback(el, parsed, controller.signal);
+    const state = {
+      fingerprint,
+      specs: parsed.specs,
+      activation: config.activation,
+      timeline: config.timeline,
+      fxNames: document2.targets.flatMap((target) => target.plan.fxNames),
+      jsEffectNames: [],
+      progressDriven: false,
+      instances: [],
+      ledger: ledgers.style(el),
+      attributes: ledgers.attributes(el),
+      ledgers,
+      controller,
+      status: "ready",
+      aggregate: true
+    };
+    this.states.set(el, state);
+    this.liveElements.add(el);
+    state.attributes.set(ATTR.state, "ready");
+  }
+  /**
+   * Apply one `target:` group's compiled plan to every element its selector resolved to.
+   *
+   * Its own `planStyles` call, not the element-wide one `install` already made: `declarations` are
+   * per group, so `fade-up target:h2, pin` writes different properties to the `h2` than to the host
+   * even though both share one gate, one activation and one reduced-motion policy (which is exactly
+   * what `elementHasCssAnimation` carries in from the caller).
+   *
+   * `group.target.selector` is always `''` here — `installedAsHost` diverts any document carrying a
+   * real `target:` group to `installWithTargets` before `install` (this method's only caller) ever
+   * runs, so `matches` is always the host's own single-element `[el]` (target:-everywhere reconcile
+   * R-8 removed the in-place relocation path this method used to also handle, along with the
+   * `indexTargetGroup` call it made only for a real group — `restageTargets`, in
+   * `core/derived/install.ts`, is the one that indexes a real target group's stagger keys now).
+   *
+   * @complexity O(m * p) time in the group's matches and the plan's properties; O(p) space.
+   * @overallScore 100
+   */
+  installGroup(group, context) {
+    const { target, matches } = group;
+    const stylePlan = planStyles({
+      plan: target.plan,
+      config: context.config,
+      capabilities: this.capabilities,
+      respectReducedMotion: this.respectReducedMotion,
+      elementHasCssAnimation: context.elementHasCssAnimation
+    });
+    const hasCssAnimation = Object.keys(stylePlan.properties).some(
+      (property) => property.startsWith("animation-")
+    );
+    const writes = { target, stylePlan, hasCssAnimation };
+    for (const match of matches) this.installMatch(match, writes, context);
+  }
+  /**
+   * Write one group's plan onto one of its matched elements, and register the instances that plan
+   * produced there.
+   *
+   * Every write goes through `context.ledgers`, never `match.style`/`match.setAttribute` directly:
+   * under `scope:page` a match need not be a descendant of the host at all, so the ledger set is
+   * the only thing that knows to unwind it on `release()`.
+   *
+   * @complexity O(p) time in the plan's property count; O(1) space beyond the instances pushed.
+   * @overallScore 100
+   */
+  installMatch(match, writes, context) {
+    const { target, stylePlan, hasCssAnimation } = writes;
+    const { state, ledgers } = context;
+    const matchLedger = ledgers.style(match);
+    const matchAttributes = ledgers.attributes(match);
+    for (const [property, value] of Object.entries(stylePlan.properties)) {
+      matchLedger.set(property, value);
+    }
+    matchAttributes.set(ATTR.normalized, stylePlan.attributes[ATTR.normalized]);
+    matchAttributes.set(ATTR.rm, stylePlan.attributes[ATTR.rm]);
+    matchLedger.claim("animation-play-state");
+    if (hasCssAnimation) {
+      const scrubbed = stylePlan.gate === "scrubbed";
+      state.instances.push(
+        createCssInstance(match, matchLedger, target.plan.keyframeNames, scrubbed)
+      );
+    }
+    state.instances.push(
+      ...this.jsEffectPreparer.prepare({
+        el: match,
+        plan: target.plan,
+        signal: context.signal,
+        ledger: matchLedger
+      })
+    );
+  }
+  /**
+   * Wire an authored `func:` to this element's completion.
+   *
+   * Registered as an ordinary `kui:finish` listener rather than called from a dispatch site, so it
+   * can never fire at a moment the event does not — the key is sugar for that listener, and is
+   * implemented as literally that listener. It detaches with every other binding on
+   * `controller.abort()`.
+   *
+   * Called from `install` *before* `openGate`, and the order is load-bearing: the one `kui:finish`
+   * an element can receive during install is the synchronous `reduced-motion` one, and the visitor
+   * who asked for reduced motion is the last one whose chained step should silently be dropped.
+   *
+   * See `callback.ts` for the lookup rules, and for why this key must never be built from
+   * untrusted input.
+   *
+   * @complexity O(1) time and space.
+   * @overallScore 100
+   */
+  bindAuthorCallback(el, parsed, signal) {
+    if (parsed.func === void 0) return;
+    bindCallback({ el, name: parsed.func, reporter: this.reporter, signal });
+  }
+  /**
+   * Validate and resolve one `CompiledTarget`'s selector against the live document.
+   *
+   * `resolveTarget`'s document-wide/invalid rejection — the same rule the six built-in
+   * `target:`-declaring primitives apply inside their own `prepare` — has to run again here for
+   * every *other* primitive: a CSS-rendered retargeted effect never calls `prepare` at all, so
+   * compile-to-install time is the only point at which this element has a real `Document` to
+   * validate the selector against. `compileTargets` itself is pure and DOM-free by design and
+   * cannot do this check.
+   *
+   * @param el - The host. The search root under `'self'`, and the only "match" for the host group
+   *   (`target.selector === ''`), which is never queried at all.
+   * @returns The matches, in document order. Empty when the selector was invalid, too broad, or
+   *   simply matched nothing — every case already warned by name.
+   * @complexity O(1) for the host group; O(n) in document size otherwise, the query itself being
+   *   the DOM's.
+   * @overallScore 100
+   */
+  resolveGroupMatches(el, target) {
+    if (target.selector === "") return [el];
+    const doc = el.ownerDocument;
+    const names = target.plan.fxNames.join(", ");
+    const breadth = selectorBreadth(target.selector, doc);
+    if (breadth !== "ok") {
+      const reason = breadth === "invalid" ? "is not a valid selector" : "matches the whole document";
+      this.reporter.warn(`target "${target.selector}" (${names}) ${reason} and will be ignored`, el);
+      return [];
+    }
+    const matches = queryScoped(el, { doc }, target.selector, target.scope);
+    if (matches.length === 0) {
+      this.reporter.warn(`target "${target.selector}" (${names}) matched nothing`, el);
+    }
+    return matches;
+  }
+  /**
+   * Decide whether, and when, the effects on this element are allowed to start.
+   *
+   * The single place any effect begins. Routing both renderers through it is what makes
+   * `on:enter`, `on:click`, `manual`, and `reducedMotion: 'disable'` mean the same thing for a
+   * pinned section as for a fade — previously JS effects started during `prepare` and honoured
+   * none of them.
+   *
+   * @complexity O(n) time in the number of instances; O(1) space.
+   * @overallScore 100
+   */
+  openGate(request) {
+    const { el, state, stylePlan, config, plan } = request;
+    if (this.reducedMotionDisables(plan)) {
+      this.writeStatus(el, state, "finished");
+      this.emit(el, state, KUI_EVENT.finish, "reduced-motion");
+      this.syncHost(state);
+      return;
+    }
+    const actions = config.actions;
+    if (actions) {
+      this.warnAboutCrossings(el, state, stylePlan.activation ?? config.activation, actions);
+    }
+    if (stylePlan.gate !== "deferred") {
+      this.activateOne(el);
+      return;
+    }
+    if (skipsOwnBinding(state)) return;
+    const activation = stylePlan.activation;
+    const releaseBinding = this.binder.bind(el, activation, {
+      threshold: config.threshold,
+      from: config.activationSource,
+      activate: () => this.activateOne(el),
+      deactivate: () => this.deactivate(el),
+      // Only when the author asked for the four-way reading. Absent, the binder keeps its two-way
+      // delivery and its one-shot release, which is what every piece of existing markup depends on.
+      ...actions ? { cross: (crossing) => this.applyCrossing(el, crossing, actions) } : {}
+    });
+    let released = false;
+    const releaseOnce = () => {
+      if (released) return;
+      released = true;
+      releaseBinding();
+    };
+    state.controller.signal.addEventListener("abort", releaseOnce);
+    if (!actions && isOneShot(resolveActivationSpec(activation))) {
+      state.releaseActivation = releaseOnce;
+    }
+  }
+  /**
+   * Whether the visitor's own reduced-motion preference disables this plan outright, rather than
+   * merely shortening or crossfading it.
+   *
+   * Pulled out of `openGate` so that method's own branching stays about *what to do*, not about
+   * the two-part question of whether the policy applies at all.
+   *
+   * @complexity O(1) time and space.
+   * @overallScore 100
+   */
+  reducedMotionDisables(plan) {
+    return this.respectReducedMotion && this.capabilities.reducedMotion && plan.reducedMotion === "disable";
+  }
+  /**
+   * Report every way an authored `actions:` cannot do what it says, once, at bind time.
+   *
+   * At bind time rather than per crossing, and that is the whole reason this is a separate method:
+   * a crossing fires on every scroll pass, and a diagnostic repeated on each one is a diagnostic
+   * nobody reads. It is the same discipline `control.ts` applies — warn once at construction, even
+   * for a caller who only meant to read.
+   *
+   * @complexity O(1) time and space.
+   * @overallScore 100
+   */
+  warnAboutCrossings(el, state, activation, actions) {
+    const spec = resolveActivationSpec(activation);
+    const problems = warnAboutToggleActions({
+      actions,
+      observed: spec.start.kind === "observed" || spec.end?.kind === "observed",
+      activation: String(activation),
+      jsEffectNames: state.jsEffectNames,
+      progressDriven: state.progressDriven
+    });
+    for (const problem of problems) this.reporter.warn(problem, el);
+  }
+  /**
+   * Do whatever this element's `actions:` names for the crossing that just happened.
+   *
+   * A pure dispatch, and deliberately nothing more. `toggle-actions.ts` owns what each verb means,
+   * `activation.ts` owns which crossing it was, and this method's only contribution is the two
+   * things neither of them can reach: the element's own directional transitions, and its instances'
+   * playheads. If anything resembling animation logic ever appears here, it is in the wrong file.
+   *
+   * @complexity O(n) time in the element's instances; O(n) space.
+   * @overallScore 100
+   */
+  applyCrossing(el, crossing, actions) {
+    const state = this.states.get(el);
+    if (!state) return;
+    applyToggleVerb(actions[crossing], {
+      // `ready` is the only status that has not started; `finished` and `failed` both have, and a
+      // `resume` on either of those is a resume rather than a fresh activation.
+      started: state.status !== "ready",
+      controls: state.instances.map((instance) => instance.control).filter((control2) => control2 !== void 0),
+      activate: () => this.activateOne(el),
+      reverse: () => this.reverseOne(el)
+    });
+  }
+  /**
+   * Start a deferred animation.
+   *
+   * A JS-rendered effect's real setup work is postponed until this call — `deferPrepare` in
+   * `instances.ts` only wires up an inert instance during `prepare` — so a broken primitive (a bad
+   * selector, a malformed param) first throws here, not while the plan was being built. `scan()`
+   * reaches this synchronously for every `on:load` element, inside the very loop that processes
+   * every other element on the page; an uncaught throw here previously unwound that loop and
+   * silently orphaned every element after the broken one — the same blast radius the `__proto__`
+   * scan-crash fix closed for a different door. Each instance is isolated so one effect's failure
+   * can neither strand a sibling effect on the same element nor abort the rest of the scan.
+   *
+   * @complexity O(n) time in composed instances; O(1) space.
+   * @overallScore 100
+   */
+  activate(el) {
+    this.activateOne(el);
+    for (const match of this.derivedOf(el)) this.activateOne(match);
+  }
+  /** The per-element half of {@link activate} — see that method's own doc comment. */
+  activateOne(el) {
+    const state = this.states.get(el);
+    if (!state) return;
+    if (state.aggregate) return;
+    if (state.status === "running" && state.direction === "reverse") {
+      this.turnAround(el, state);
+      return;
+    }
+    if (state.status === "running") return;
+    state.releaseActivation?.();
+    state.releaseActivation = void 0;
+    this.writeStatus(el, state, "running");
+    state.direction = "forward";
+    const run = this.beginRun(state);
+    const started = state.instances.filter((instance) => this.startInstance(instance, el));
+    if (started.length === 0 && state.instances.length > 0) {
+      this.writeStatus(el, state, "failed");
+      this.syncHost(state);
+      return;
+    }
+    this.emit(el, state, KUI_EVENT.start, "activated");
+    this.syncHost(state);
+    this.settleWhen({ el, state, run }, started, "finished");
+  }
+  /**
+   * Play an element's effects back out.
+   *
+   * The exit half of a paired activation — `data-kui-on="pointerenter/pointerleave"`,
+   * `data-kui-on="enter/leave"` — routed through one method for the same reason `activate` is: it
+   * is the single place an effect ever runs backwards, so what an exit means does not have to be
+   * re-decided per activation.
+   *
+   * **CSS-rendered effects reverse; JS-rendered ones do not, and say so.** A CSS effect has a real
+   * `Animation` handle whose playback rate can simply be negated, landing on the from-state that
+   * `animation-fill-mode: both` is already holding. A JS-rendered effect has no playhead at all —
+   * `getAnimations()` returns `[]` for it (see `play.ts`) — and there is no honest general shim
+   * for "half a `split-flap`, backwards". Rather than invent one that misbehaves differently per
+   * primitive, an instance that cannot reverse is named in a warning; the author learns their
+   * pointerleave does nothing *here* instead of discovering it in a browser. On an element
+   * composing both renderers the CSS half still reverses and the warning names what did not.
+   *
+   * @param el - Element whose effects should play out.
+   * @complexity O(n) time in the number of instances; O(1) space.
+   * @overallScore 100
+   */
+  deactivate(el) {
+    const state = this.states.get(el);
+    if (!state) return;
+    if (state.status !== "running" && state.status !== "finished") return;
+    if (state.direction === "reverse") return;
+    const reversible = state.instances.filter(isDirectional);
+    if (reversible.length < state.instances.length) {
+      this.reporter.warn(
+        "effect cannot play backwards, so the exit half of this activation does nothing for it (JS-rendered effects have no playhead \u2014 see EffectInstance.reverse)",
+        el
+      );
+    }
+    this.reverseOne(el);
+  }
+  /**
+   * Turn an element's playhead around and settle it back at the from-state it started from.
+   *
+   * The single owner of `state.direction === 'reverse'`, and it exists as its own method because
+   * for a while there were two owners and neither knew about the other. `deactivate()` — the exit
+   * half of a paired activation — flipped the direction and re-armed the settle gate;
+   * `control(el).reverse()` reached straight past the state machine into the raw `Animation`
+   * handles through `InstanceControl.reverse`. Both moved the same playheads, only one of them said
+   * so, and an animator that believed a reversing element was still travelling forwards got three
+   * things wrong at once: a later `deactivate()` sailed through its "an exit already in flight must
+   * not restart" guard and began a *second* reverse; `activate()` could never turn the playhead
+   * around, because it looks for `'reverse'` and never saw it; and the forward `settleWhen` left
+   * over from the entrance stayed pending until it stamped `data-kui-state="finished"` onto an
+   * element sitting at its from-state.
+   *
+   * So the transition lives here and both entry points call it. What `deactivate()` keeps is only
+   * what is true of an *activation* exit specifically. A programmatic reverse is not one — an
+   * author calling `control().reverse()` has not had a pointer leave anything — so it inherits
+   * none of that, and in particular is not told that the effects it cannot reach make "the exit
+   * half of this activation" do nothing. `control.ts` has already named those for it.
+   *
+   * Resuming forward travel is `activate()`'s job, not a second method here: an element left in
+   * `'reverse'` is turned around by `turnAround`, which is reachable from every route that
+   * activates — a pointer coming back, `play()`, `kui.activate()`.
+   *
+   * @param el - Element whose effects should run backwards. Unknown elements are ignored, exactly
+   *   as they are by `activate` and `deactivate`.
+   * @complexity O(n) time in the number of instances; O(1) space.
+   * @overallScore 100
+   */
+  reverseFrom(el) {
+    this.reverseOne(el);
+    for (const match of this.derivedOf(el)) this.reverseOne(match);
+  }
+  /** The per-element half of {@link reverseFrom} — see that method's own doc comment. */
+  reverseOne(el) {
+    const state = this.states.get(el);
+    if (!state) return;
+    if (state.status !== "running" && state.status !== "finished") return;
+    if (state.direction === "reverse") return;
+    const reversible = state.instances.filter(isDirectional);
+    if (reversible.length === 0) return;
+    this.writeStatus(el, state, "running");
+    state.direction = "reverse";
+    this.syncHost(state);
+    const run = this.beginRun(state);
+    for (const instance of reversible) instance.reverse();
+    this.settleWhen({ el, state, run }, reversible, "ready");
+  }
+  /**
+   * Resume forward playback on an element whose exit is still in flight.
+   *
+   * Separate from `activate`'s main path because none of that path applies: the instances are
+   * already started, the activation is already spent, and the state is already `running`. All that
+   * changes is the direction of travel.
+   *
+   * @complexity O(n) time in the number of instances; O(1) space.
+   * @overallScore 100
+   */
+  turnAround(el, state) {
+    const playable = state.instances.filter(isDirectional);
+    state.direction = "forward";
+    const run = this.beginRun(state);
+    for (const instance of playable) instance.play();
+    this.settleWhen({ el, state, run }, playable, "finished");
+  }
+  /**
+   * Write an element's final state once the instances driving it have finished.
+   *
+   * The reported state has to become truthful eventually, or `data-kui-state` codifies a lie that
+   * tests then assert against. It also has to stay truthful when a run is superseded mid-flight: a
+   * reverse that is turned around leaves its own `finished` promise pending, and letting that
+   * promise write `ready` over the forward run that replaced it is how an element ends up claiming
+   * it is back at its from-state while visibly finishing its entrance. Capturing the direction at
+   * the time of the call and re-checking it on resolution is what makes the stale promise a no-op
+   * in the ordinary case — turned-around and reversed-again runs, which is why that comment and
+   * check are kept even though `run` below also covers them.
+   *
+   * `run` is the check `direction` cannot be: `direction` only ever holds two values, so a run
+   * that flips back and forth several times (a hover-driven card flip, `pointerenter`/
+   * `pointerleave` firing repeatedly) revisits the same direction repeatedly, and a stale run's
+   * belated completion could otherwise be mistaken for a much later one simply travelling the same
+   * way. `beginRun` mints one identity per run; only the run that is still current when its own
+   * promise resolves gets to report anything.
+   *
+   * @param target - The element, its state, and this run's identity — see {@link SettleTarget}.
+   * @param instances - The instances this particular run started; a run only waits on its own.
+   * @param next - State to report when they are all done.
+   * @complexity O(n) time in the instances; O(n) space for the pending promises.
+   * @overallScore 100
+   */
+  settleWhen(target, instances, next) {
+    const { el, state, run } = target;
+    const timed = instances.filter((instance) => !instance.continuous);
+    if (timed.length === 0 && instances.length > 0) {
+      this.settleArmed.set(state, false);
+      return;
+    }
+    this.settleArmed.set(state, true);
+    const direction = state.direction;
+    void Promise.all(timed.map((instance) => instance.finished)).then(() => {
+      if (this.states.get(el) !== state || state.status !== "running") return;
+      if (state.direction !== direction) return;
+      if (this.currentRun.get(state) !== run) return;
+      this.writeStatus(el, state, next);
+      if (!state.cancelled) {
+        if (next === "finished") this.emit(el, state, KUI_EVENT.finish, "complete");
+        else this.emit(el, state, KUI_EVENT.reverseFinish, "reversed");
+      }
+      this.syncHost(state);
+    });
+  }
+  /**
+   * Mark the start of a new run — a forward activation, a reversal, or a turnaround out of one —
+   * and clear the mark a previous run's cancellation left behind.
+   *
+   * The two things a fresh run does are bound together deliberately: `cancelled` describes *this*
+   * run, not the element for life, so every place that begins one must also disown whatever the
+   * run before it was marked with, or that run's cancellation would silently apply to a completion
+   * it had nothing to do with — see `InstanceState.cancelled`'s own doc comment for the contract
+   * this keeps. Doing both here, in one call, is what stops a caller resetting one without the
+   * other; three call sites each remembering to write two lines in the right order was exactly
+   * this bug's shape the first time.
+   *
+   * @returns This run's identity, to be threaded through to the `settleWhen` call that will
+   *   eventually report on it.
+   * @complexity O(1) time, O(1) space.
+   * @overallScore 100
+   */
+  beginRun(state) {
+    const run = Symbol("kui-run");
+    this.currentRun.set(state, run);
+    state.cancelled = false;
+    return run;
+  }
+  /**
+   * Dispatch one lifecycle event for an element, filling in the identity every listener needs.
+   *
+   * Centralised here rather than inside each instance because the animator is the only place that
+   * knows the *element's* lifecycle — an element composing three effects starts once and finishes
+   * once, not three times, and only this class sees all three instances at the same moment.
+   *
+   * @complexity O(n) time in listeners on the propagation path; O(1) space.
+   * @overallScore 100
+   */
+  emit(el, state, type, reason) {
+    emitLifecycle(el, type, {
+      effects: state.fxNames,
+      activation: state.activation,
+      timeline: state.timeline,
+      reason,
+      ...state.host ? { host: state.host } : {}
+    });
+  }
+  /**
+   * Write one element's status, through its own ledger, with no aggregate sync.
+   *
+   * The one place `status`/`data-kui-state` are written together, so every call site that used to
+   * write both fields by hand now shares one line to drift out of sync in. `el` is unused today —
+   * kept because 2b's tests and a future per-element hook both key on it, and because every other
+   * write in this file takes the element it writes to as its first argument.
+   *
+   * @complexity O(1) time and space.
+   * @overallScore 100
+   */
+  writeStatus(el, state, next) {
+    state.status = next;
+    state.attributes.set(ATTR.state, next);
+  }
+  /**
+   * Let a derived state's host re-derive its aggregate status (D-A).
+   *
+   * Called after the derived element's own event, so listeners see the match's event before the
+   * host's — the same order a nested DOM structure would deliver them in were the host merely
+   * listening for its children's events instead of deriving its own status from them.
+   *
+   * @complexity O(1) time and space, delegating to {@link syncAggregate}.
+   * @overallScore 100
+   */
+  syncHost(state) {
+    if (state.host) syncAggregate(this.port, state.host);
+  }
+  /**
+   * Stop one element's effects where they are, leaving it mid-animation.
+   *
+   * The counterpart to `activate()`, and the reason it exists rather than callers reaching into
+   * `stateOf(el).instances` themselves (which is what `play()`'s handle used to do): cancellation
+   * has an observable consequence — `kui:cancel`, and the suppression of the `kui:finish` that
+   * would otherwise follow it — and that consequence has to be applied wherever cancellation
+   * happens, not only where it happens to be convenient.
+   *
+   * @param el - Element whose effects should stop.
+   * @complexity O(n) time in the element's instances; O(1) space.
+   * @overallScore 100
+   */
+  cancel(el) {
+    this.cancelOne(el);
+    for (const match of this.derivedOf(el)) this.cancelOne(match);
+  }
+  /** The per-element half of {@link cancel} — see that method's own doc comment. */
+  cancelOne(el) {
+    const state = this.states.get(el);
+    if (!state) return;
+    const wasRunning = state.status === "running";
+    state.cancelled = true;
+    for (const instance of state.instances) runQuietly(() => instance.cancel());
+    if (wasRunning && this.settleArmed.get(state) === false) {
+      this.writeStatus(el, state, "finished");
+      this.syncHost(state);
+    }
+    if (wasRunning) this.emit(el, state, KUI_EVENT.cancel, "cancelled");
+  }
+  /**
+   * Runtime control over a selection's playheads — pause, resume, reverse, seek, re-speed.
+   *
+   * Selection-shaped rather than single-element, so it matches `play()` and so one call covers a
+   * staggered group. `control.ts` builds a per-element handle underneath and the returned handle
+   * composes them.
+   *
+   * @param target - Selector, element, or iterable of elements.
+   * @complexity O(n) time in selected elements and their instances; O(n) space.
+   * @overallScore 100
+   */
+  control(target) {
+    return control({ animator: this, root: this.root, target });
+  }
+  /**
+   * Activate one instance, isolating a throw from its (possibly deferred) setup.
+   *
+   * @returns Whether the instance actually started — a failed instance is excluded from the
+   * `finished` gate in `activate()`, since something that never started can never legitimately
+   * finish (see `EffectInstance.finished`'s "resolves, never rejects" contract in `types.ts`).
+   * @complexity O(1) time, O(1) space.
+   * @overallScore 100
+   */
+  startInstance(instance, el) {
+    try {
+      instance.activate();
+      return true;
+    } catch (error) {
+      this.reporter.warn(`effect failed to activate: ${String(error)}`, el);
+      return false;
+    }
+  }
+  /**
+   * Programmatic entry point. Accepts a selector, an Element, a NodeList, or any iterable, so
+   * `getElementById`, `getElementsByClassName`, and `querySelectorAll` all work directly.
+   *
+   * @complexity O(n) time in selected elements.
+   * @overallScore 100
+   */
+  play(target, effect, options = {}) {
+    return play({ animator: this, root: this.root, target, effect }, options);
+  }
+  /**
+   * Remove the opt-in cloak so a stalled or failed initialisation can never leave a page hidden.
+   *
+   * @complexity O(1) time, O(1) space.
+   * @overallScore 100
+   */
+  uncloak() {
+    const doc = isElementNode(this.root) ? this.root.ownerDocument : this.root;
+    doc?.documentElement?.removeAttribute(ATTR.cloak);
+  }
+  stateOf(el) {
+    return this.states.get(el);
+  }
+  /** The derived matches a host's `target:` groups installed, in document order. `[]` otherwise. */
+  derivedOf(el) {
+    return derivedOf(this.book, el);
+  }
+  /** The host that installed a derived match, else `undefined`. */
+  hostOf(el) {
+    return hostOf(this.book, el);
+  }
+  /**
+   * Tear an element's effects down so the next `process()` reinstalls from scratch.
+   *
+   * Needed for replay: `process()` short-circuits when the configuration fingerprint is
+   * unchanged, so playing the same effect twice was previously a no-op.
+   *
+   * @complexity O(c) time in retained instances; O(1) space.
+   * @overallScore 100
+   */
+  reset(el) {
+    this.release(el);
+  }
+  /**
+   * Tear down one element's effects and clear its library-owned attributes.
+   *
+   * @complexity O(c) time in retained cleanups; O(1) extra space.
+   * @overallScore 100
+   */
+  release(el) {
+    const state = this.states.get(el);
+    if (!state) return;
+    releaseDerived(this.port, el);
+    const wasRunning = state.status === "running";
+    state.cancelled = true;
+    state.controller.abort();
+    for (const instance of state.instances) runQuietly(() => instance.destroy());
+    this.states.delete(el);
+    this.liveElements.delete(el);
+    this.gateWatcher?.unwatch(el);
+    state.ledgers.restore();
+    if (wasRunning) this.emit(el, state, KUI_EVENT.cancel, "reset");
+  }
+  /**
+   * Tear down every tracked element inside a removed subtree.
+   *
+   * Scoped to `node`'s own descendants rather than re-scanning `liveElements` against the whole
+   * page, so a removal event costs O(removed subtree), not O(every animated element alive
+   * anywhere) — `dom-watcher.ts` can queue up to 100 removed roots per frame, and `liveElements`
+   * only shrinks on release, so it stays large on a scroll-reveal-heavy page.
+   *
+   * Membership is checked against `liveElements` (the ground truth) rather than re-querying
+   * `[${ATTR.source}]` the way `scan()` does: `dom-watcher.ts`'s `flush()` drains removed roots
+   * before attribute-change roots, so if calling code strips `data-kui` and removes the element in
+   * the same tick, a selector-based query would already miss it here and leak its teardown.
+   *
+   * `node` is typed `Element`, not `ParentNode`: `dom-watcher.ts`'s `onElementRemoved` — this
+   * method's only caller — is itself typed `(el: Element) => void`, so there is no runtime case
+   * where `node` is a `Document`/`DocumentFragment` to guard against.
+   *
+   * `restageAfterRemoval` runs over every candidate visited, not only the ones actually released:
+   * a removed stagger member is exactly the case this closes, and whether it was "live" by
+   * `liveElements`' definition is a question `GROUP_OF_CHILD` (in `stagger.ts`) answers on its own
+   * terms. Without it, removing one item from a staggered group left every later sibling holding
+   * the rank an index computed for a group one element larger — the stale-after-*edit* half of the
+   * same defect `3d57ff7` already closed for an attribute change, left open for a removal.
+   *
+   * @complexity O(s) time in the removed subtree's element count; O(1) per candidate via the
+   * `liveElements` Set lookup, plus stagger re-ranking bounded by the surviving groups' own sizes.
+   * @overallScore 100
+   */
+  releaseTree(node) {
+    const candidates = [node, ...node.querySelectorAll("*")];
+    for (const el of candidates) {
+      if (this.liveElements.has(el)) this.release(el);
+    }
+    restageAfterRemoval(candidates, this.reporter);
+    restageAfterTreeRelease(this.port, candidates);
+  }
+  destroy() {
+    this.domWatcher?.destroy();
+    releaseStagger(this.root);
+    for (const el of [...this.liveElements]) this.release(el);
+    this.gateWatcher?.destroy();
+    this.binder.destroy();
+    this.scheduler.destroy();
+    this.started = false;
+  }
+  /**
+   * Start watching for DOM insertions, removals, and attribute changes.
+   *
+   * Attribute changes recompile in place; insertions scan; removals tear down so listeners and
+   * observers do not outlive their elements.
+   *
+   * @complexity O(1) time and space to build and start; the watcher's own callback runs O(n) time
+   * in the nodes one mutation record carries.
+   * @overallScore 100
+   */
+  watch() {
+    this.domWatcher ??= createDomWatcher({
+      root: this.root,
+      onElementAdded: (el) => {
+        this.scan(el);
+        adoptLateMatches(this.port, el);
+      },
+      onElementRemoved: (el) => this.releaseTree(el),
+      onAttributeChanged: (el) => {
+        this.process(el);
+        restageAround(el, this.reporter);
+      }
+    });
+    this.domWatcher.watch();
+  }
+};
+function createAnimator(options = {}) {
+  return new Animator(options);
+}
+function resolveCollaborators(options) {
+  const root = options.root ?? globalThis.document;
+  const capabilities = options.capabilities ?? detect();
+  const reporter = options.reporter ?? silentReporter();
+  const scheduler = options.scheduler ?? createScrollScheduler();
+  const rootResolver = options.rootResolver ?? defaultRootResolver(root);
+  const respectReducedMotion = (options.reducedMotion ?? "respect") === "respect";
+  return {
+    registry: options.registry ?? new Registry(),
+    capabilities,
+    root,
+    reporter,
+    binder: options.binder ?? createActivationBinder({ reporter }),
+    scheduler,
+    rootResolver,
+    jsEffectPreparer: resolveJsEffectPreparer(options.jsEffectPreparer, {
+      scheduler,
+      rootResolver,
+      capabilities,
+      reporter,
+      respectReducedMotion
+    }),
+    // Not defaulted here (unlike the other collaborators above): building the real watcher needs
+    // `this.scan`/`this.process`/`this.releaseTree`, which don't exist yet inside this free
+    // function. `Animator.watch()` builds it lazily instead, so nothing observes — and no
+    // `MutationObserver` is ever constructed — unless `shouldObserve` is true and `start()` runs.
+    domWatcher: options.domWatcher,
+    respectReducedMotion,
+    shouldObserve: options.observe ?? false
+  };
+}
+function resolveJsEffectPreparer(provided, deps) {
+  return provided ?? createJsEffectPreparer(deps);
+}
+function defaultRootResolver(root) {
+  const doc = isElementNode(root) ? root.ownerDocument : root;
+  const win = doc?.defaultView ?? globalThis;
+  return createRootResolver({ win });
+}
+function isDirectional(instance) {
+  return instance.play !== void 0 && instance.reverse !== void 0;
+}
+function runQuietly(cleanup) {
+  try {
+    cleanup();
+  } catch {
+  }
+}
+
+export {
+  detect,
+  consoleReporter,
+  silentReporter,
+  collectingReporter,
+  Animator,
+  createAnimator
+};