kuinetic 0.2.2 → 0.2.3

package/dist/kuinetic.js

@@ -25,10 +25,13 @@ var kuinetic = (() => {
     Animator: () => Animator,
     CHANNEL: () => CHANNEL,
     COMBOS: () => COMBOS,
+    KEY_NOTE_OWNER: () => KEY_NOTE_OWNER,
     KUI_EVENT: () => KUI_EVENT,
     PRESETS: () => PRESETS,
     PRIMITIVES: () => PRIMITIVES,
     Registry: () => Registry,
+    SUBTREE_CHANNEL: () => SUBTREE_CHANNEL,
+    attributeChannel: () => attributeChannel,
     collectingReporter: () => collectingReporter,
     consoleReporter: () => consoleReporter,
     control: () => control,
@@ -36,6 +39,13 @@ var kuinetic = (() => {
     createAnimator: () => createAnimator,
     createRegistry: () => createRegistry,
     default: () => src_default,
+    describe: () => describe2,
+    describeAttribute: () => describeAttribute,
+    describeEffect: () => describeEffect,
+    describeElement: () => describeElement,
+    describeElementAttribute: () => describeElementAttribute,
+    describeKeys: () => describeKeys,
+    describeSteps: () => describeSteps,
     detect: () => detect,
     inertInstance: () => inertInstance,
     kuinetic: () => kuinetic,
@@ -43,6 +53,8 @@ var kuinetic = (() => {
     resolveActivationSpec: () => resolveActivationSpec,
     resolveTargets: () => resolveTargets,
     silentReporter: () => silentReporter,
+    spellingsFor: () => spellingsFor,
+    timingContractOf: () => timingContractOf,
     toAttributeValue: () => toAttributeValue
   });
 
@@ -84,6 +96,10 @@ var kuinetic = (() => {
   function queryScoped(el, ctx, selector, scope) {
     return [...(scope === "page" ? ctx.doc : el).querySelectorAll(selector)];
   }
+  function queryControls(el, ctx, selector) {
+    const inside = [...el.querySelectorAll(selector)];
+    return inside.length > 0 ? inside : [...ctx.doc.querySelectorAll(selector)];
+  }
 
   // src/core/event-sources.ts
   function createEventSourceBindings() {
@@ -1255,6 +1271,10 @@ var kuinetic = (() => {
      */
     skew: "skew"
   };
+  function attributeChannel(attribute) {
+    return `attr:${attribute}`;
+  }
+  var SUBTREE_CHANNEL = "subtree";
   function inertInstance(destroy = () => {
   }) {
     return {
@@ -6539,8 +6559,8 @@ var kuinetic = (() => {
       shouldObserve: options.observe ?? false
     };
   }
-  function resolveJsEffectPreparer(provided, deps) {
-    return provided ?? createJsEffectPreparer(deps);
+  function resolveJsEffectPreparer(provided2, deps) {
+    return provided2 ?? createJsEffectPreparer(deps);
   }
   function defaultRootResolver(root) {
     const doc = isElementNode(root) ? root.ownerDocument : root;
@@ -6557,11 +6577,214 @@ var kuinetic = (() => {
     }
   }
 
+  // src/core/timing-contract.ts
+  var ALL_TIMING_TOKENS = ["duration", "delay", "ease"];
+  var CONTRACTS = /* @__PURE__ */ new WeakMap();
+  function declareTimingContract(prepare, contract) {
+    CONTRACTS.set(prepare, contract);
+    return prepare;
+  }
+  function inheritTimingContract(inner, outer) {
+    const contract = CONTRACTS.get(inner);
+    return contract ? declareTimingContract(outer, contract) : outer;
+  }
+  function timingContractOf(primitive) {
+    return primitive.prepare ? CONTRACTS.get(primitive.prepare) : void 0;
+  }
+
+  // src/core/describe.ts
+  var POSITIONAL = [
+    { slot: "duration", accepts: "time" },
+    { slot: "delay", accepts: "time" },
+    { slot: "ease", accepts: "easing" }
+  ];
+  function describeEffect(registry, name, notes = {}) {
+    const resolved = registry.resolve(name);
+    if (!resolved) return void 0;
+    const { preset, primitive } = resolved;
+    const declared = primitive.parameters;
+    const contract = timingContractOf(primitive);
+    const honours = contract ? contract.honours ?? [] : ALL_TIMING_TOKENS;
+    const positionalOrder = POSITIONAL.map((slot) => ({
+      ...slot,
+      ...Object.hasOwn(declared, slot.slot) ? { param: slot.slot } : {},
+      honoured: honours.includes(slot.slot)
+    }));
+    const params = Object.entries(declared).map(([param, spec]) => {
+      const override = preset.params?.[param];
+      const note = findNote(spec.note, notes, [preset.name, primitive.id, "*"], param);
+      return {
+        name: param,
+        type: spec.type,
+        default: override ?? spec.default,
+        presetDefault: override !== void 0,
+        required: note?.required === true,
+        spellings: spellingsFor(spec, override ?? spec.default),
+        ...optionalFields(spec, param, note)
+      };
+    });
+    const described = {
+      name: preset.name,
+      primitive: primitive.id,
+      renderer: primitive.renderer,
+      params,
+      positionalOrder
+    };
+    if (contract && honours.length < ALL_TIMING_TOKENS.length) described.unhonouredBecause = contract.because;
+    return described;
+  }
+  function optionalFields(spec, param, note) {
+    const out = {};
+    if (spec.keywords) out.keywords = spec.keywords;
+    if (spec.minimum !== void 0) out.minimum = spec.minimum;
+    if (spec.maximum !== void 0) out.maximum = spec.maximum;
+    if (spec.integer) out.integer = true;
+    const index = POSITIONAL.findIndex((slot) => slot.slot === param);
+    if (index >= 0) out.positionalIndex = index;
+    if (note) out.note = note.why;
+    if (note?.whenOmitted) out.whenOmitted = note.whenOmitted;
+    return out;
+  }
+  function describeAttribute(registry, value, notes = {}) {
+    return describeSpecs(registry, parse(value).specs, notes);
+  }
+  function describeElementAttribute(registry, value, notes = {}) {
+    const parsed = parse(value);
+    const written = {};
+    for (const [field, key] of Object.entries(ELEMENT_KEYS)) {
+      const set = parsed[field];
+      if (set !== void 0) written[key.key] = set;
+    }
+    return { steps: describeSpecs(registry, parsed.specs, notes), keys: describeKeys(notes), written };
+  }
+  function describeKeys(notes = {}) {
+    const element = Object.values(ELEMENT_KEYS).map((key) => keyRow(key, "element", notes));
+    return [...element, ...STEP_KEY_LIST.map((key) => keyRow(key, "step", notes))];
+  }
+  function describeSpecs(registry, specs, notes) {
+    return specs.map((spec) => {
+      const written = { written: writtenArgs(spec), writtenKeys: writtenStepKeys(spec) };
+      const described = describeEffect(registry, spec.name, notes);
+      if (described) return { ...described, ...written };
+      const suggestion = suggest(spec.name, registry.names());
+      const unknown = suggestion ? { name: spec.name, unknown: true, suggestion } : { name: spec.name, unknown: true };
+      return { ...unknown, ...written };
+    });
+  }
+  function writtenArgs(spec) {
+    const written = { ...spec.params };
+    if (spec.duration !== void 0) written.duration = spec.duration;
+    if (spec.delay !== void 0) written.delay = spec.delay;
+    if (spec.easing !== void 0) written.ease = spec.easing;
+    return written;
+  }
+  function writtenStepKeys(spec) {
+    const written = {};
+    if (spec.at !== void 0) written.at = spec.at;
+    Object.assign(written, spec.gate);
+    if (spec.repeat !== void 0) written.repeat = spec.repeat;
+    if (spec.yoyo !== void 0) written.yoyo = String(spec.yoyo);
+    for (const [field, value] of Object.entries(spec.hoists ?? {})) {
+      written[ELEMENT_KEYS[field].key] = value;
+    }
+    return written;
+  }
+  var KEY_NOTE_OWNER = "data-kui";
+  function keyRow(key, scope, notes) {
+    const note = findNote(void 0, notes, [KEY_NOTE_OWNER], key.key);
+    const row = {
+      name: key.key,
+      type: key.type,
+      default: key.default,
+      presetDefault: false,
+      required: false,
+      spellings: [...key.spellings],
+      scope
+    };
+    if (key.keywords) row.keywords = key.keywords;
+    if (note) row.note = note.why;
+    if (note?.whenOmitted) row.whenOmitted = note.whenOmitted;
+    return row;
+  }
+  var TIMELINES2 = Object.keys({ time: 0, view: 0, scroll: 0, pointer: 0, pin: 0 });
+  var RM_POLICIES2 = Object.keys({ shorten: 0, crossfade: 0, disable: 0 });
+  var ELEMENT_KEYS = {
+    activation: { key: "on", type: "text", default: "", spellings: ["enter", "load", "hover", "click", "hover/unhover"] },
+    actions: { key: "actions", type: "text", default: "", spellings: ["play/pause/resume/reset", "play/none/none/reset"] },
+    timeline: { key: "timeline", type: "keyword", default: "", spellings: TIMELINES2, keywords: TIMELINES2 },
+    threshold: { key: "threshold", type: "percentage", default: "", spellings: ["0%", "25%"] },
+    cascade: { key: "cascade", type: "time", default: "", spellings: ["90ms", "0.09s"] },
+    spread: { key: "spread", type: "time", default: "", spellings: ["600ms", "0.6s"] },
+    order: { key: "order", type: "text", default: "", spellings: ["start", "end", "center", "edges", "random", "3"] },
+    cols: { key: "cols", type: "text", default: "", spellings: ["auto", "4"] },
+    along: { key: "along", type: "keyword", default: "", spellings: ["x", "y"], keywords: ["x", "y"] },
+    rm: { key: "rm", type: "keyword", default: "", spellings: RM_POLICIES2, keywords: RM_POLICIES2 },
+    func: { key: "func", type: "text", default: "", spellings: ["onRevealDone"] }
+  };
+  var gateKey = (key) => ({
+    key,
+    type: "keyword",
+    default: "",
+    spellings: BREAKPOINT_NAMES,
+    keywords: BREAKPOINT_NAMES
+  });
+  var STEP_KEYS = {
+    at: { key: "at", type: "text", default: "", spellings: ["after", "with", "-200ms", "with+100ms"] },
+    gate: { above: gateKey("above"), below: gateKey("below"), wide: gateKey("wide"), narrow: gateKey("narrow") },
+    repeat: { key: "repeat", type: "text", default: "", spellings: ["infinite", "3"] },
+    yoyo: { key: "yoyo", type: "keyword", default: "", spellings: ["true", "false"], keywords: ["true", "false"] }
+  };
+  var STEP_KEY_LIST = Object.values(STEP_KEYS).flatMap(
+    (entry) => "key" in entry ? [entry] : Object.values(entry)
+  );
+  function findNote(inline, notes, owners, param) {
+    const key = owners.map((owner) => `${owner}.${param}`).find((k) => Object.hasOwn(notes, k));
+    const note = inline ?? (key === void 0 ? void 0 : notes[key]);
+    if (note === void 0) return void 0;
+    return typeof note === "string" ? { why: note } : note;
+  }
+  var NUMBER = /^-?(?:\d+(?:\.\d+)?|\.\d+)/;
+  function spellingsFor(spec, fallback = spec.default) {
+    const value = validate(fallback, spec).ok ? fallback.trim() : "";
+    return EXAMPLES[spec.type](value, spec.keywords ?? []);
+  }
+  var EXAMPLES = {
+    angle: (value) => angleForms(value),
+    "angle|keyword": (value, keywords) => [...angleForms(keywords.includes(value) ? "" : value), ...keywords],
+    keyword: (_, keywords) => [...keywords],
+    time: timeForms,
+    number: (value) => [value || "1"],
+    percentage: (value) => [value || "50%"],
+    "number|percentage": alphaForms,
+    length: (value) => [value || "24px", "calc(1rem + 4px)"],
+    "length|percentage": (value) => [value || "24px", "50%"],
+    color: (value) => [value || "#e4f222", "rgb(228 242 34)", "currentcolor"],
+    easing: (value) => [value || "ease-out", "linear", "cubic-bezier(.2, .8, .2, 1)", "spring"],
+    path: () => ["M0,0L100,0"],
+    text: () => []
+  };
+  function angleForms(value) {
+    const n = NUMBER.exec(value)?.[0];
+    const degrees = value.endsWith("deg") || /^-?[\d.]+d?$/.test(value);
+    const base = degrees && n ? n : "45";
+    const forms = [base, `${base}d`, `${base}deg`];
+    return degrees || !value ? forms : [value, ...forms];
+  }
+  function timeForms(value) {
+    const n = NUMBER.exec(value)?.[0];
+    if (!n) return ["600ms", "0.6s"];
+    return value.endsWith("ms") ? [value, `${decimalNumber(n, -3)}s`] : [value, `${decimalNumber(n, 3)}ms`];
+  }
+  function alphaForms(value) {
+    const n = NUMBER.exec(value)?.[0];
+    if (!n) return ["0.5", "50%"];
+    return value.endsWith("%") ? [`${decimalNumber(n, -2)}`, value] : [value, `${decimalNumber(n, 2)}%`];
+  }
+
   // src/effects/shared.ts
   var TRIGGER_DELAY_PARAM = {
     delay: { type: "time", default: "0ms", cssProperty: "--kui-delay" }
   };
-  var ALL_TIMING_TOKENS = ["duration", "delay", "ease"];
   function authoredTiming(params, token) {
     if (token === "ease") return params.timing.easing;
     const ms = token === "duration" ? params.timing.durationMs : params.timing.delayMs;
@@ -6589,20 +6812,20 @@ var kuinetic = (() => {
     }
   }
   function withTimingContract(id, contract, prepare) {
-    return (el, params, ctx) => {
+    return declareTimingContract((el, params, ctx) => {
       warnUnhonouredTiming(id, contract, params, ctx.warn);
       return prepare(el, params, ctx);
-    };
+    }, contract);
   }
   function stylesheetTimingPrepare(id, contract) {
-    return (el, params, ctx) => {
+    return declareTimingContract((el, params, ctx) => {
       warnUnhonouredTiming(id, contract, params, ctx.warn);
       return deferredInstance(() => {
         mirrorTimingToCss(id, contract.honours ?? [], params, ctx);
         return () => {
         };
       });
-    };
+    }, contract);
   }
   var TIMELINE_AGNOSTIC = ["time", "view", "scroll", "pin"];
   var COMMON = {
@@ -6679,12 +6902,12 @@ var kuinetic = (() => {
      * What the ring rules actually write (`ambient.css`) beyond the gradient: `mask` +
      * `mask-composite`, which subtract the element's own content box to leave a ring — the same
      * physical property `media-mask` claims under the `'mask'` channel — and `position: relative`
-     * plus a `padding` that *is* the ring's thickness, which is a claim on the host's box in the
-     * sense `pin` and `background-media` already use `'layout'` for. Declared only as
-     * `background`, a `gradient-border, pin-section` pair composed silently while both decided the
-     * host's `position`, and `gradient-border, mask-reveal` while both wrote `mask`.
+     * plus a `padding` that *is* the ring's thickness — `position` as `pin` and `background-media`
+     * claim it, `padding` as `header-shrink` does. Declared only as `background`, a
+     * `gradient-border, pin-section` pair composed silently while both decided the host's
+     * `position`, and `gradient-border, mask-reveal` while both wrote `mask`.
      */
-    cssPrimitive("ambient-gradient-ring", [CHANNEL.background, "mask", "layout"], {
+    cssPrimitive("ambient-gradient-ring", [CHANNEL.background, "mask", "position", "padding"], {
       parameters: drift,
       defaultActivation: "load",
       reducedMotion: "disable",
@@ -7362,22 +7585,287 @@ var kuinetic = (() => {
   var STATE_PRIMITIVES = [...PRESS_PRIMITIVES, ...GROUP_PRIMITIVES];
   var STATE_PRESETS = [...PRESS_PRESETS, ...GROUP_PRESETS];
 
+  // src/core/element-size.ts
+  function watchElementSize(win, onChange) {
+    const ResizeObserverCtor = win.ResizeObserver;
+    const observer = ResizeObserverCtor ? new ResizeObserverCtor(onChange) : void 0;
+    const elements = /* @__PURE__ */ new Set();
+    win.addEventListener("resize", onChange, { passive: true });
+    return {
+      observe(element) {
+        if (elements.has(element)) return;
+        elements.add(element);
+        observer?.observe(element);
+      },
+      unobserve(element) {
+        elements.delete(element);
+        observer?.unobserve(element);
+      },
+      disconnect() {
+        win.removeEventListener("resize", onChange);
+        observer?.disconnect();
+        elements.clear();
+      }
+    };
+  }
+  function frameScheduler(win, callback) {
+    let frame;
+    let timeout;
+    const run = () => {
+      frame = void 0;
+      timeout = void 0;
+      callback();
+    };
+    return {
+      request() {
+        if (frame !== void 0 || timeout !== void 0) return;
+        if (win.requestAnimationFrame) frame = win.requestAnimationFrame(run);
+        else timeout = win.setTimeout(run, 16);
+      },
+      cancel() {
+        if (frame !== void 0) win.cancelAnimationFrame(frame);
+        if (timeout !== void 0) win.clearTimeout(timeout);
+        frame = void 0;
+        timeout = void 0;
+      }
+    };
+  }
+
   // src/effects/catalog/interaction-reveal.ts
-  function revealPrimitive(id, channels, parameters, perfClass = "compositor") {
+  function revealPrimitive(id, channels, parameters, { perfClass = "compositor", placed } = {}) {
+    const contract = {
+      honours: ALL_TIMING_TOKENS,
+      because: "interaction.css pins that value on this effect"
+    };
     return {
       id,
       renderer: "javascript",
-      channels,
+      // A placed family publishes the resolved side, and a running tease, on its host.
+      channels: placed ? [...channels, attributeChannel(placed.attribute), attributeChannel(placed.tease)] : channels,
       parameters,
       supportedTimelines: ["time"],
       supportedActivations: ["load"],
       defaultActivation: "load",
       perfClass,
       reducedMotion: "shorten",
-      prepare: stylesheetTimingPrepare(id, {
-        honours: ALL_TIMING_TOKENS,
-        because: "interaction.css pins that value on this effect"
-      })
+      prepare: placed ? withTimingContract(
+        id,
+        contract,
+        (el, params, ctx) => deferredInstance(() => {
+          mirrorTimingToCss(id, ALL_TIMING_TOKENS, params, ctx);
+          return prepareReveal(el, params, placed, ctx);
+        })
+      ) : stylesheetTimingPrepare(id, contract)
+    };
+  }
+  var OPPOSITE = { top: "bottom", bottom: "top", left: "right", right: "left" };
+  function isSide(value) {
+    return value !== null && Object.hasOwn(OPPOSITE, value);
+  }
+  function chooseSide(preferred, room, extent) {
+    if (room[preferred] >= extent) return preferred;
+    const opposite = OPPOSITE[preferred];
+    return room[opposite] > room[preferred] ? opposite : preferred;
+  }
+  function extentOf(part, host, side) {
+    switch (side) {
+      case "top":
+        return -part.offsetTop;
+      case "bottom":
+        return part.offsetTop + part.offsetHeight - host.clientHeight;
+      case "left":
+        return -part.offsetLeft;
+      case "right":
+        return part.offsetLeft + part.offsetWidth - host.clientWidth;
+    }
+  }
+  function prepareReveal(el, params, spec, ctx) {
+    const release2 = claimPart(el, params, spec, ctx);
+    const attrs = createAttributeLedger(el);
+    const restore = () => {
+      attrs.restore();
+      release2();
+    };
+    const place3 = params.text("place");
+    const teaseMs = params.ms("tease", 0);
+    const auto = place3 === "auto";
+    if (!auto && isSide(place3)) attrs.set(spec.attribute, place3);
+    const placeSide = auto ? autoPlacer(el, spec, attrs, ctx.win) : void 0;
+    const shift = shifter(el, spec, ctx);
+    const measure = () => {
+      placeSide?.();
+      shift();
+    };
+    let endTease = () => {
+    };
+    const shown = whileShown(el, ctx, measure, () => endTease());
+    const tease = teaseMs > 0 ? teaseOnEnter(el, ctx, { ms: teaseMs, attribute: spec.tease, attrs, shown }) : void 0;
+    if (tease) endTease = tease.end;
+    return () => {
+      tease?.stop();
+      shown.stop();
+      restore();
+    };
+  }
+  function claimPart(el, params, spec, ctx) {
+    const selector = resolveTarget(params.text("target"), ctx, spec.name);
+    if (!selector) return () => {
+    };
+    const matches = queryScoped(el, ctx, selector, "self");
+    const part = matches[0];
+    if (!part) {
+      ctx.warn(`${spec.name} target "${selector}" matched nothing inside this element`);
+      return () => {
+      };
+    }
+    if (matches.length > 1) {
+      ctx.warn(
+        `${spec.name} target "${selector}" matched ${matches.length} elements; only the first is used`
+      );
+    }
+    const ledger = createAttributeLedger(part);
+    if (!part.hasAttribute(spec.marker)) ledger.set(spec.marker, "");
+    return () => ledger.restore();
+  }
+  function autoPlacer(el, spec, attrs, win) {
+    const preferred = spec.preferred(el);
+    let side = preferred;
+    attrs.set(spec.attribute, side);
+    return () => {
+      const part = el.querySelector(`[${spec.marker}]`);
+      if (!part) return;
+      const rect = el.getBoundingClientRect();
+      const room = {
+        top: rect.top,
+        bottom: win.innerHeight - rect.bottom,
+        left: rect.left,
+        right: win.innerWidth - rect.right
+      };
+      const next = chooseSide(preferred, room, extentOf(part, el, side));
+      if (next === side) return;
+      side = next;
+      attrs.set(spec.attribute, side);
+    };
+  }
+  var VIEWPORT_MARGIN = 8;
+  function shiftWithin(start, size, viewport, margin = VIEWPORT_MARGIN) {
+    const low = margin;
+    const high = viewport - margin;
+    if (start < low || size > high - low) return low - start;
+    if (start + size > high) return high - start - size;
+    return 0;
+  }
+  function shifter(el, spec, ctx) {
+    let written = 0;
+    return () => {
+      const part = el.querySelector(`[${spec.marker}]`);
+      if (!part) return;
+      const stamped = el.getAttribute(spec.attribute);
+      const side = isSide(stamped) ? stamped : spec.preferred(el);
+      const rect = part.getBoundingClientRect();
+      const hostRect = el.getBoundingClientRect();
+      const [startKey, sizeKey, offsetKey, borderKey, layoutKey, viewportKey, windowKey] = side === "top" || side === "bottom" ? ["left", "width", "offsetLeft", "clientLeft", "offsetWidth", "clientWidth", "innerWidth"] : ["top", "height", "offsetTop", "clientTop", "offsetHeight", "clientHeight", "innerHeight"];
+      const hostSize = el[layoutKey];
+      const zoom = hostSize > 0 ? hostRect[sizeKey] / hostSize : 1;
+      if (zoom <= 0) return;
+      const entranceScale = parseFloat(ctx.win.getComputedStyle(part).scale) || 1;
+      const size = rect[sizeKey] / entranceScale;
+      const start = hostRect[startKey] + (el[borderKey] + part[offsetKey]) * zoom - size / 2;
+      const viewport = ctx.doc.documentElement[viewportKey] || ctx.win[windowKey];
+      const next = shiftWithin(start, size, viewport) / zoom;
+      if (next === written) return;
+      written = next;
+      ctx.style.set(spec.shift, `${next}px`);
+    };
+  }
+  function whileShown(el, ctx, measure, onUser) {
+    const { win } = ctx;
+    const frame = frameScheduler(win, measure);
+    let hovered = false;
+    let focused = false;
+    let teasing = false;
+    let watching;
+    const sync = () => {
+      const shown = hovered || focused || teasing;
+      if (shown && !watching) {
+        measure();
+        watching = new AbortController();
+        const options = { capture: true, passive: true, signal: watching.signal };
+        win.addEventListener("scroll", frame.request, options);
+        win.addEventListener("resize", frame.request, options);
+      } else if (!shown && watching) {
+        watching.abort();
+        watching = void 0;
+        frame.cancel();
+      }
+    };
+    const on = (type, update) => el.addEventListener(type, (event) => {
+      update(event);
+      sync();
+    }, { signal: ctx.signal });
+    on("pointerenter", () => {
+      hovered = true;
+      onUser();
+    });
+    on("pointerleave", () => hovered = false);
+    on("focusin", () => {
+      focused = true;
+      onUser();
+    });
+    on("focusout", (event) => {
+      focused = el.contains(event.relatedTarget);
+    });
+    return {
+      setTeasing(on2) {
+        teasing = on2;
+        sync();
+      },
+      stop() {
+        watching?.abort();
+        frame.cancel();
+      }
+    };
+  }
+  function teaseOnEnter(el, ctx, {
+    ms,
+    attribute,
+    attrs,
+    shown
+  }) {
+    const { win } = ctx;
+    let timer;
+    let observer;
+    const end = () => {
+      if (timer === void 0) return;
+      win.clearTimeout(timer);
+      timer = void 0;
+      attrs.remove(attribute);
+      shown.setTeasing(false);
+    };
+    const start = () => {
+      shown.setTeasing(true);
+      attrs.set(attribute, "");
+      timer = win.setTimeout(end, ms);
+    };
+    const Observer = win.IntersectionObserver;
+    if (Observer) {
+      observer = new Observer(
+        (entries) => {
+          if (!entries.some((entry) => entry.isIntersecting && entry.intersectionRatio >= 0.5)) return;
+          observer.disconnect();
+          start();
+        },
+        { threshold: 0.5 }
+      );
+      observer.observe(el);
+    }
+    return {
+      end,
+      stop() {
+        observer?.disconnect();
+        if (timer !== void 0) win.clearTimeout(timer);
+        timer = void 0;
+      }
     };
   }
   var labelSwapParams = {
@@ -7410,10 +7898,34 @@ var kuinetic = (() => {
     duration: { type: "time", default: "160ms", cssProperty: "--kui-duration" },
     delay: { type: "time", default: "1000ms", cssProperty: "--kui-delay" },
     ease: { type: "easing", default: "ease-out", cssProperty: "--kui-ease" },
-    distance: { type: "length", default: "4px", cssProperty: "--kui-hover-intent-distance" }
+    distance: { type: "length", default: "4px", cssProperty: "--kui-hover-intent-distance" },
+    color: { type: "color", default: "#f4f4f0", cssProperty: "--kui-hover-intent-color" },
+    "bg-color": { type: "color", default: "#111111", cssProperty: "--kui-hover-intent-bg-color" },
+    radius: { type: "length", default: "12px", cssProperty: "--kui-hover-intent-radius" },
+    // `place` and `tease` are read by `prepareReveal`, not by any stylesheet — see
+    // `ParamSpecBase.cssProperty`.
+    place: {
+      type: "keyword",
+      default: "top",
+      keywords: ["top", "bottom", "auto"],
+      cssProperty: "--kui-hover-intent-place"
+    },
+    tease: { type: "time", default: "0ms", cssProperty: "--kui-hover-intent-tease" },
+    // Names the hint, in place of a `data-kui-hint` in the markup — see `claimPart`. Declared, so
+    // `compile.ts` leaves it here rather than moving the effect onto the hint.
+    target: { type: "text", default: "", cssProperty: "--kui-target" }
   };
   var HOVER_INTENT_PRIMITIVES = [
-    revealPrimitive("hover-intent", ["hint"], hoverIntentParams)
+    revealPrimitive("hover-intent", ["hint"], hoverIntentParams, {
+      placed: {
+        name: "hover-intent",
+        marker: "data-kui-hint",
+        attribute: "data-kui-hint-place",
+        tease: "data-kui-hint-tease",
+        shift: "--kui-hover-intent-shift",
+        preferred: () => "top"
+      }
+    })
   ];
   var HOVER_INTENT_PRESETS = [
     { name: "hover-intent", phase: "state", primitive: "hover-intent" }
@@ -7431,16 +7943,65 @@ var kuinetic = (() => {
       finite: true,
       minimum: 0,
       maximum: 1
-    }
+    },
+    color: { type: "color", default: "currentcolor", cssProperty: "--kui-anchored-preview-color" },
+    "bg-color": {
+      type: "color",
+      default: "transparent",
+      cssProperty: "--kui-anchored-preview-bg-color"
+    },
+    radius: { type: "length", default: "0px", cssProperty: "--kui-anchored-preview-radius" },
+    // `place` and `tease` are read by `prepareReveal`, not by any stylesheet — see
+    // `ParamSpecBase.cssProperty`. `tease` is `hover-intent`'s, unchanged: `0ms` is off.
+    place: {
+      type: "keyword",
+      default: "top",
+      keywords: ["top", "bottom", "left", "right", "auto"],
+      cssProperty: "--kui-anchored-preview-place"
+    },
+    tease: { type: "time", default: "0ms", cssProperty: "--kui-anchored-preview-tease" },
+    // Names the preview, in place of a `data-kui-preview` in the markup — see `claimPart`.
+    target: { type: "text", default: "", cssProperty: "--kui-target" }
   };
+  function previewSideOf(el) {
+    for (const token of (el.getAttribute(ATTR.normalized) ?? "").split(/\s+/)) {
+      const side = /^anchored-preview(?:-(bottom|left|right))?$/.exec(token);
+      if (side) return side[1] ?? "top";
+    }
+    return "top";
+  }
   var ANCHORED_PREVIEW_PRIMITIVES = [
-    revealPrimitive("anchored-preview", ["preview"], anchoredPreviewParams)
+    revealPrimitive("anchored-preview", ["preview"], anchoredPreviewParams, {
+      placed: {
+        name: "anchored-preview",
+        marker: "data-kui-preview",
+        attribute: "data-kui-preview-place",
+        tease: "data-kui-preview-tease",
+        shift: "--kui-anchored-preview-shift",
+        preferred: previewSideOf
+      }
+    })
   ];
   var ANCHORED_PREVIEW_PRESETS = [
     { name: "anchored-preview", phase: "state", primitive: "anchored-preview" },
-    { name: "anchored-preview-bottom", phase: "state", primitive: "anchored-preview" },
-    { name: "anchored-preview-left", phase: "state", primitive: "anchored-preview" },
-    { name: "anchored-preview-right", phase: "state", primitive: "anchored-preview" }
+    {
+      name: "anchored-preview-bottom",
+      phase: "state",
+      primitive: "anchored-preview",
+      params: { place: "bottom" }
+    },
+    {
+      name: "anchored-preview-left",
+      phase: "state",
+      primitive: "anchored-preview",
+      params: { place: "left" }
+    },
+    {
+      name: "anchored-preview-right",
+      phase: "state",
+      primitive: "anchored-preview",
+      params: { place: "right" }
+    }
   ];
   var searchExpandParams = {
     duration: { type: "time", default: "260ms", cssProperty: "--kui-duration" },
@@ -7458,7 +8019,7 @@ var kuinetic = (() => {
       "search-expand",
       ["expand", "discrete", "search-field"],
       searchExpandParams,
-      "layout"
+      { perfClass: "layout" }
     )
   ];
   var SEARCH_EXPAND_PRESETS = [
@@ -7874,7 +8435,10 @@ var kuinetic = (() => {
     label: { type: "text", default: "", cssProperty: "--kui-label" }
   };
   var POINTER_PRIMITIVES = [
-    pointerPrimitive("tilt-3d", ["rotate"], tiltParams, deferPrepare(prepareTilt3d)),
+    // `skew` is the `transform` shorthand's channel, which is what `prepareTilt3d` writes (a
+    // perspective and two axis rotations) — never the `rotate` property — beside an inline
+    // `transition` for its settle.
+    pointerPrimitive("tilt-3d", ["skew", "transition"], tiltParams, deferPrepare(prepareTilt3d)),
     pointerPrimitive("tilt-parallax", ["translate"], parallaxParams, deferPrepare(prepareTiltParallax)),
     pointerPrimitive("cursor-follow", ["translate"], cursorDotParams, deferPrepare(prepareCursorFollow)),
     pointerPrimitive("cursor-lag", ["translate"], cursorDotParams, deferPrepare(prepareCursorLag)),
@@ -7883,7 +8447,13 @@ var kuinetic = (() => {
     // `pseudo-before`: the glow overlay is a `::before` rule in `interaction.css`, so this primitive
     // owns that box the same way the border family does. See `border-draw`'s comment in
     // `HOVER_PRIMITIVES` for what the token means and why it was added here in the same change.
-    pointerPrimitive("cursor-spotlight", ["spotlight", "pseudo-before"], {}, deferPrepare(prepareSpotlight))
+    // `position`: the `relative` it gives an unpositioned host so that overlay has an anchor.
+    pointerPrimitive(
+      "cursor-spotlight",
+      ["spotlight", "pseudo-before", "position"],
+      {},
+      deferPrepare(prepareSpotlight)
+    )
   ];
   function prepareCursorFollow(el, params, ctx) {
     return prepareCursorDot(el, params, ctx, "kui-cursor-dot-follow");
@@ -8363,52 +8933,6 @@ var kuinetic = (() => {
     };
   }
 
-  // src/core/element-size.ts
-  function watchElementSize(win, onChange) {
-    const ResizeObserverCtor = win.ResizeObserver;
-    const observer = ResizeObserverCtor ? new ResizeObserverCtor(onChange) : void 0;
-    const elements = /* @__PURE__ */ new Set();
-    win.addEventListener("resize", onChange, { passive: true });
-    return {
-      observe(element) {
-        if (elements.has(element)) return;
-        elements.add(element);
-        observer?.observe(element);
-      },
-      unobserve(element) {
-        elements.delete(element);
-        observer?.unobserve(element);
-      },
-      disconnect() {
-        win.removeEventListener("resize", onChange);
-        observer?.disconnect();
-        elements.clear();
-      }
-    };
-  }
-  function frameScheduler(win, callback) {
-    let frame;
-    let timeout;
-    const run = () => {
-      frame = void 0;
-      timeout = void 0;
-      callback();
-    };
-    return {
-      request() {
-        if (frame !== void 0 || timeout !== void 0) return;
-        if (win.requestAnimationFrame) frame = win.requestAnimationFrame(run);
-        else timeout = win.setTimeout(run, 16);
-      },
-      cancel() {
-        if (frame !== void 0) win.cancelAnimationFrame(frame);
-        if (timeout !== void 0) win.clearTimeout(timeout);
-        frame = void 0;
-        timeout = void 0;
-      }
-    };
-  }
-
   // src/effects/catalog/media-shared.ts
   var AXIS_DEGREES = { vertical: 0, horizontal: 90 };
   var UNIT_DEGREES = { deg: 1, d: 1, grad: 0.9, rad: 180 / Math.PI, turn: 360 };
@@ -8767,14 +9291,14 @@ var kuinetic = (() => {
       settle2 = resolve;
     });
     let landed = false;
-    const land = () => {
+    const land2 = () => {
       if (landed) return;
       landed = true;
       stage.classList.remove("kui-slat-animating");
       built.restore();
       settle2();
     };
-    const timer = ctx.win.setTimeout(land, slatAssembleFinishMs(params, count));
+    const timer = ctx.win.setTimeout(land2, slatAssembleFinishMs(params, count));
     return {
       cleanup: () => {
         ctx.win.clearTimeout(timer);
@@ -8785,7 +9309,7 @@ var kuinetic = (() => {
       finished,
       finish: () => {
         ctx.win.clearTimeout(timer);
-        land();
+        land2();
       }
     };
   }
@@ -8920,7 +9444,9 @@ var kuinetic = (() => {
     {
       id: "slat-assemble",
       renderer: "javascript",
-      channels: [CHANNEL.opacity, CHANNEL.translate, CHANNEL.rotate],
+      // `position` for the `relative` it gives an unpositioned host, and the subtree because
+      // `installSlatStage` appends its slat stage there.
+      channels: [CHANNEL.opacity, CHANNEL.translate, CHANNEL.rotate, "position", SUBTREE_CHANNEL],
       parameters: slatParams,
       supportedTimelines: ["time"],
       supportedActivations: ["load", "enter", "hover", "focus", "click", "manual"],
@@ -8944,12 +9470,15 @@ var kuinetic = (() => {
        * and it is what makes `background-media, video-scrub` on one element a reported conflict
        * rather than two effects silently fighting over the same picture.
        *
-       * `layout` is claimed for the same reason `pin` claims it: preparation writes `position` and
-       * `isolation` on the *host*, which is a stacking-context claim on someone else's element. Left
-       * undeclared, `background-media, pin-section` composed silently while both decided what
-       * `position` the host has — the conflict detector cannot report a claim it was never told about.
+       * `position` and `isolation` are the two properties preparation writes on the *host*, a
+       * stacking-context claim on someone else's element. Left undeclared, `background-media,
+       * pin-section` composed silently while both decided what `position` the host has — the
+       * conflict detector cannot report a claim it was never told about.
+       *
+       * And the subtree, because the layer is appended into the host (`installBackgroundMedia`): it
+       * would become a deck's last slide, or `scroll-story`'s `:last-child` in place of its sections.
        */
-      channels: ["media", "layout"],
+      channels: ["media", "position", "isolation", SUBTREE_CHANNEL],
       renderer: "javascript",
       parameters: backgroundMediaParams,
       // Not a claim to support four timelines — an abstention. A backdrop is not driven by progress
@@ -9478,7 +10007,9 @@ var kuinetic = (() => {
     return {
       id,
       renderer: "javascript",
-      channels: ["content"],
+      // The subtree too: both counters rebuild the host's children (the number, or the odometer's
+      // digit columns), so a deck or a widget beside one would lose what it put there.
+      channels: ["content", SUBTREE_CHANNEL],
       parameters,
       supportedTimelines: ["time"],
       supportedActivations: ["load", "enter", "hover", "focus", "click", "manual"],
@@ -9866,7 +10397,9 @@ var kuinetic = (() => {
     return {
       id,
       renderer: "javascript",
-      channels,
+      // Every one of these replaces the host's children with its own spans or layers, so it owns
+      // them: beside a deck it would split the slides, beside `slow-mo` it would swallow the toggle.
+      channels: [...channels, SUBTREE_CHANNEL],
       parameters: options.parameters,
       supportedTimelines: ["time"],
       supportedActivations: ["load", "enter", "hover", "focus", "click", "manual"],
@@ -9996,21 +10529,21 @@ var kuinetic = (() => {
     const finished = new Promise((resolve) => {
       settle2 = resolve;
     });
-    const land = () => {
+    const land2 = () => {
       ctx.win.clearTimeout(timer);
       timer = void 0;
       layers.decorative.removeAttribute("aria-hidden");
       layers.srOnly.remove();
       settle2();
     };
-    let timer = ctx.win.setTimeout(land, splitRevealFinishMs(params, count));
+    let timer = ctx.win.setTimeout(land2, splitRevealFinishMs(params, count));
     return {
       finished,
-      land,
+      land: land2,
       rearm(nextCount) {
         if (timer === void 0) return;
         ctx.win.clearTimeout(timer);
-        timer = ctx.win.setTimeout(land, splitRevealFinishMs(params, nextCount));
+        timer = ctx.win.setTimeout(land2, splitRevealFinishMs(params, nextCount));
       },
       cancel() {
         if (timer !== void 0) ctx.win.clearTimeout(timer);
@@ -10249,7 +10782,8 @@ var kuinetic = (() => {
       prepare: deferPrepare(prepareTypewriter),
       perfClass: "continuous"
     }),
-    jsTextPrimitive("scramble-text", ["content"], {
+    // `min-width`/`min-height`: the rest box it pins while the glyphs churn (`prepareScramble`).
+    jsTextPrimitive("scramble-text", ["content", "min-width", "min-height"], {
       parameters: scrambleParams,
       prepare: deferPrepare(prepareScramble),
       perfClass: "continuous"
@@ -10658,6 +11192,36 @@ var kuinetic = (() => {
     return registry;
   }
 
+  // src/core/deck-viewer.ts
+  var provided = null;
+  function provideDeckViewer(viewer) {
+    provided = viewer;
+  }
+  function attachDeckViewer(request) {
+    return provided ? provided(request) : null;
+  }
+  var VIEWER_EVENT = "kui:viewer";
+  function announceViewer(doc, opener, open2) {
+    const Ctor = doc.defaultView?.CustomEvent ?? CustomEvent;
+    const source = opener.isConnected ? opener : doc;
+    source.dispatchEvent(new Ctor(VIEWER_EVENT, { bubbles: true, detail: { open: open2 } }));
+  }
+  var DECK_LIGHTBOX_PARAM = {
+    type: "keyword",
+    default: "false",
+    cssProperty: "--kui-deck-lightbox",
+    keywords: ["true", "false"]
+  };
+  function deckLightbox(enabled, request, warn) {
+    if (!enabled) return () => {
+    };
+    const release2 = attachDeckViewer(request);
+    if (release2) return release2;
+    warn("lightbox:true needs the showcase module (the lightbox gallery), which is not loaded; cards will not open");
+    return () => {
+    };
+  }
+
   // src/effects/step-marking.ts
   var STEP_STATE_ATTR = "data-kui-step-state";
   var STEP_OFFSET_ATTR = "data-kui-step-offset";
@@ -10746,28 +11310,49 @@ var kuinetic = (() => {
     }
     return Math.max(1, ...groups.values());
   }
+  function bindControl(request, param, run) {
+    const { el, ctx, params, label } = request;
+    const selector = resolveTarget(params.text(param), ctx, `${label} ${param}`);
+    if (!selector) return null;
+    if (queryControls(el, ctx, selector).length === 0) ctx.warn(`${label} ${param} "${selector}" matched nothing`);
+    return { selector, run };
+  }
   function delegateControls(request) {
-    const { el, ctx, scope, groups } = request;
+    const { el, ctx, groups } = request;
     if (groups.length === 0) return () => {
     };
-    const root = scope === "page" ? ctx.doc : el;
-    const onClick = (event) => {
-      const from = event.target;
-      if (typeof from?.closest !== "function") return;
+    const press = (from, inside) => {
       for (const { selector, run } of groups) {
-        const matches = queryScoped(el, ctx, selector, scope);
+        const matches = queryControls(el, ctx, selector);
         const matched = new Set(matches);
+        const stop = inside ? el : null;
         let node = from;
-        while (node && !matched.has(node)) node = node.parentElement;
-        if (!node) continue;
+        while (node && node !== stop && !matched.has(node)) node = node.parentElement;
+        if (!node || node === stop) continue;
         run(node, matches.indexOf(node));
       }
     };
-    root.addEventListener("click", onClick);
-    return () => root.removeEventListener("click", onClick);
+    const pressed = (event) => {
+      const from = event.target;
+      return typeof from?.closest === "function" ? from : null;
+    };
+    const onInside = (event) => {
+      const from = pressed(event);
+      if (from) press(from, true);
+    };
+    const onOutside = (event) => {
+      const from = pressed(event);
+      if (from && !el.contains(from)) press(from, false);
+    };
+    el.addEventListener("click", onInside);
+    ctx.doc.addEventListener("click", onOutside);
+    return () => {
+      el.removeEventListener("click", onInside);
+      ctx.doc.removeEventListener("click", onOutside);
+    };
   }
   function createStepIndex(options) {
-    const { el, params, ctx, scope, resolveSteps, onRender } = options;
+    const { el, params, ctx, resolveSteps, onRender } = options;
     const name = options.name ?? "step-progress";
     const marker = createStepMarker(resolveSteps, (message) => ctx.warn(`${name} ${message}`));
     const self = createAttributeLedger(el);
@@ -10786,26 +11371,23 @@ var kuinetic = (() => {
     };
     const next = () => goTo(nextStep(step, total()));
     const prev = () => goTo(prevStep(step, total()));
-    const groups = [];
-    const bindControl = (param, run) => {
-      const selector = resolveTarget(params.text(param), ctx, `${name} ${param}`);
-      if (!selector) return false;
-      if (queryScoped(el, ctx, selector, scope).length === 0) {
-        ctx.warn(`${name} ${param} "${selector}" matched nothing`);
-      }
-      groups.push({ selector, run });
-      return true;
+    const byHand = (move) => {
+      options.onInput?.();
+      move();
     };
-    const named = [
-      bindControl("next", next),
-      bindControl("prev", prev),
-      bindControl("jump", (_node, position) => {
-        if (position >= 0) goTo(position);
-      })
-    ].some(Boolean);
-    const fallback = options.clickFallback !== false && !named;
-    if (fallback) el.addEventListener("click", next);
-    const releaseControls = delegateControls({ el, ctx, scope, groups });
+    const request = { el, ctx, params, label: name };
+    const groups = [
+      bindControl(request, "next", () => byHand(next)),
+      bindControl(request, "prev", () => byHand(prev)),
+      bindControl(request, "jump", (_node, position) => {
+        if (position >= 0) byHand(() => goTo(position));
+      }),
+      ...options.controls ?? []
+    ].filter((group) => group !== null);
+    const fallback = options.clickFallback !== false && groups.length === 0;
+    const onContainerClick = () => byHand(next);
+    if (fallback) el.addEventListener("click", onContainerClick);
+    const releaseControls = delegateControls({ el, ctx, groups });
     render();
     return {
       goTo,
@@ -10814,7 +11396,7 @@ var kuinetic = (() => {
       current: () => step,
       total,
       release: () => {
-        if (fallback) el.removeEventListener("click", next);
+        if (fallback) el.removeEventListener("click", onContainerClick);
         releaseControls();
         self.restore();
         selfStyle.restore();
@@ -10823,24 +11405,300 @@ var kuinetic = (() => {
     };
   }
 
-  // src/effects/forms/primitives.ts
-  var timing = {
-    duration: { type: "time", default: "400ms", cssProperty: "--kui-duration" },
-    ...TRIGGER_DELAY_PARAM,
-    ease: { type: "easing", default: "ease-out", cssProperty: "--kui-ease" }
-  };
-  var FORM_STATE_TIMING = {
-    because: "forms.css pins its timing literally \u2014 the motion lands on a sibling that inline custom properties cannot reach"
-  };
-  var NATIVE_STATE_PRIMITIVE = {
-    id: "native-state",
-    renderer: "javascript",
-    channels: [CHANNEL.translate, CHANNEL.scale, CHANNEL.opacity, CHANNEL.stroke, CHANNEL.color],
-    parameters: {},
-    supportedTimelines: ["time"],
-    supportedActivations: ["load"],
-    defaultActivation: "load",
-    perfClass: "compositor",
+  // src/effects/auto-motion.ts
+  var MIN_PERIOD_MS = 2e3;
+  var MAX_FRAME_MS = 100;
+  function clampPeriod(ms) {
+    if (!Number.isFinite(ms) || ms === 0) return 0;
+    return Math.sign(ms) * Math.max(MIN_PERIOD_MS, Math.abs(ms));
+  }
+  function cyclesFor(dtMs, periodMs) {
+    return Math.min(Math.max(dtMs, 0), MAX_FRAME_MS) / periodMs;
+  }
+  function isKeyboardFocus(target) {
+    const node = target;
+    if (typeof node?.matches !== "function") return true;
+    try {
+      return node.matches(":focus-visible");
+    } catch {
+      return true;
+    }
+  }
+  function createAutoMotion(request) {
+    const { el, ctx, spinMs, autoplayMs, settleMs, advance, step, setSpinning, onPausedChange } = request;
+    const pauseOnHover = request.pauseOnHover ?? true;
+    const enabled = spinMs !== 0 || autoplayMs !== 0;
+    if (!enabled) {
+      return {
+        enabled,
+        interrupt() {
+        },
+        hold() {
+        },
+        toggle() {
+        },
+        release() {
+        }
+      };
+    }
+    const win = ctx.win;
+    let userPaused = ctx.reducedMotion;
+    let hovered = false;
+    let focused = false;
+    let onscreen = true;
+    let gesture = false;
+    let held = false;
+    let viewing = false;
+    let viewerOpen = false;
+    let focusBeforeViewer = false;
+    let frame = 0;
+    let lastFrameAt = null;
+    let timer = null;
+    let holdTimer = null;
+    let spinning = false;
+    const active = () => !userPaused && !hovered && !focused && onscreen && !gesture && !held && !viewing && !ctx.doc.hidden;
+    const requestFrame = (callback) => typeof win.requestAnimationFrame === "function" ? win.requestAnimationFrame(callback) : win.setTimeout(() => callback(Date.now()), 16);
+    const cancelFrame = (handle) => {
+      if (typeof win.cancelAnimationFrame === "function") win.cancelAnimationFrame(handle);
+      else win.clearTimeout(handle);
+    };
+    const publishSpinning = (next) => {
+      if (next === spinning) return;
+      spinning = next;
+      setSpinning(next);
+    };
+    const tick = (now) => {
+      frame = 0;
+      if (!active()) return;
+      if (lastFrameAt !== null) advance(cyclesFor(now - lastFrameAt, spinMs));
+      lastFrameAt = now;
+      frame = requestFrame(tick);
+    };
+    const startSpin = () => {
+      if (frame !== 0) return;
+      publishSpinning(true);
+      lastFrameAt = null;
+      frame = requestFrame(tick);
+    };
+    const stopSpin = () => {
+      if (frame !== 0) cancelFrame(frame);
+      frame = 0;
+      publishSpinning(false);
+    };
+    const armAutoplay = () => {
+      if (timer !== null) return;
+      timer = win.setTimeout(() => {
+        timer = null;
+        step(autoplayMs > 0 ? 1 : -1);
+        update();
+      }, Math.abs(autoplayMs));
+    };
+    const clearAutoplay = () => {
+      if (timer === null) return;
+      win.clearTimeout(timer);
+      timer = null;
+    };
+    function update() {
+      const running = active();
+      if (spinMs !== 0) (running ? startSpin : stopSpin)();
+      if (autoplayMs !== 0) (running ? armAutoplay : clearAutoplay)();
+    }
+    const onEnter = () => {
+      hovered = true;
+      update();
+    };
+    const onLeave = () => {
+      hovered = false;
+      update();
+    };
+    const onFocusIn = (event) => {
+      focused = (!viewerOpen || focusBeforeViewer) && isKeyboardFocus(event.target);
+      update();
+    };
+    const onFocusOut = (event) => {
+      if (!viewerOpen) focusBeforeViewer = focused;
+      const next = event.relatedTarget;
+      focused = next !== null && el.contains(next) && isKeyboardFocus(next);
+      update();
+    };
+    const onVisibility = () => update();
+    const onViewer = (event) => {
+      const open2 = event.detail?.open === true;
+      viewerOpen = open2;
+      viewing = open2 && el.contains(event.target);
+      update();
+    };
+    if (pauseOnHover) {
+      el.addEventListener("pointerenter", onEnter);
+      el.addEventListener("pointerleave", onLeave);
+    }
+    el.addEventListener("focusin", onFocusIn);
+    el.addEventListener("focusout", onFocusOut);
+    ctx.doc.addEventListener("visibilitychange", onVisibility);
+    ctx.doc.addEventListener(VIEWER_EVENT, onViewer);
+    const Observer = win.IntersectionObserver;
+    const observer = Observer ? new Observer((entries) => {
+      for (const entry of entries) onscreen = entry.isIntersecting;
+      update();
+    }) : null;
+    observer?.observe(el);
+    onPausedChange(userPaused);
+    update();
+    return {
+      enabled,
+      interrupt() {
+        held = true;
+        if (holdTimer !== null) win.clearTimeout(holdTimer);
+        holdTimer = win.setTimeout(() => {
+          holdTimer = null;
+          held = false;
+          update();
+        }, Math.max(0, settleMs));
+        update();
+      },
+      hold(holding) {
+        gesture = holding;
+        update();
+      },
+      toggle() {
+        userPaused = !userPaused;
+        onPausedChange(userPaused);
+        update();
+      },
+      release() {
+        if (frame !== 0) cancelFrame(frame);
+        frame = 0;
+        if (timer !== null) win.clearTimeout(timer);
+        if (holdTimer !== null) win.clearTimeout(holdTimer);
+        timer = null;
+        holdTimer = null;
+        observer?.disconnect();
+        el.removeEventListener("pointerenter", onEnter);
+        el.removeEventListener("pointerleave", onLeave);
+        el.removeEventListener("focusin", onFocusIn);
+        el.removeEventListener("focusout", onFocusOut);
+        ctx.doc.removeEventListener("visibilitychange", onVisibility);
+        ctx.doc.removeEventListener(VIEWER_EVENT, onViewer);
+        publishSpinning(false);
+      }
+    };
+  }
+  var AUTOPLAY_PARAM = { type: "time", default: "0s", cssProperty: "--kui-autoplay" };
+  var PAUSE_PARAM = { type: "text", default: "", cssProperty: "--kui-pause" };
+  var HOVER_PARAM = {
+    type: "keyword",
+    default: "pause",
+    keywords: ["pause", "none"],
+    cssProperty: "--kui-hover"
+  };
+  function motionPeriods(request) {
+    const { params, ctx, label } = request;
+    const spinRaw = request.spin ? params.ms("spin", 0) : 0;
+    const autoplayRaw = params.ms("autoplay", 0);
+    const spin2 = clampPeriod(spinRaw);
+    const autoplay = clampPeriod(autoplayRaw);
+    if (spin2 !== spinRaw) ctx.warn(`${label} spin: minimum is 2s; clamped to ${Math.abs(spin2) / 1e3}s`);
+    if (autoplay !== autoplayRaw) {
+      ctx.warn(`${label} autoplay: minimum is 2s; clamped to ${Math.abs(autoplay) / 1e3}s`);
+    }
+    if (spin2 !== 0 && autoplay !== 0) {
+      ctx.warn(`${label}: spin: and autoplay: are both set; spin: wins`);
+      return { spin: spin2, autoplay: 0 };
+    }
+    return { spin: spin2, autoplay };
+  }
+  function createDeckMotion(request) {
+    const { el, ctx, params, label, settleMs, step } = request;
+    const { spin: spin2, autoplay } = motionPeriods(request);
+    const ledgers = /* @__PURE__ */ new Map();
+    const pauseSelector = resolveTarget(params.text("pause"), ctx, `${label} pause`);
+    const reflectPaused = (paused) => {
+      if (!pauseSelector) return;
+      for (const node of queryControls(el, ctx, pauseSelector)) {
+        let ledger = ledgers.get(node);
+        if (!ledger) {
+          ledger = createAttributeLedger(node);
+          ledgers.set(node, ledger);
+        }
+        ledger.set("aria-pressed", String(paused));
+      }
+    };
+    const motion = createAutoMotion({
+      el,
+      ctx,
+      spinMs: spin2,
+      autoplayMs: autoplay,
+      settleMs,
+      pauseOnHover: !params.is("hover", "none"),
+      advance: request.spin?.advance,
+      step,
+      setSpinning: request.spin?.setSpinning,
+      onPausedChange: reflectPaused
+    });
+    let pause = null;
+    if (pauseSelector && !motion.enabled) {
+      ctx.warn(`${label} pause: has nothing to pause without ${request.spin ? "spin: or " : ""}autoplay:`);
+    } else if (pauseSelector) {
+      pause = bindControl({ el, ctx, params, label }, "pause", () => motion.toggle());
+    }
+    return {
+      motion,
+      pause,
+      release() {
+        motion.release();
+        for (const ledger of ledgers.values()) ledger.restore();
+        ledgers.clear();
+      }
+    };
+  }
+
+  // src/effects/swipe-event.ts
+  var SWIPE_EVENT = "kui:swipe";
+  var DIRECTIONS = /* @__PURE__ */ new Set(["left", "right", "up", "down"]);
+  function announceSwipe(win, el, direction) {
+    const Ctor = win.CustomEvent;
+    el.dispatchEvent(new Ctor(SWIPE_EVENT, { bubbles: true, detail: { direction } }));
+  }
+  function swipeStep(direction) {
+    return direction === "left" || direction === "up" ? 1 : -1;
+  }
+  function swipeReaches(source, el) {
+    if (source === el) return true;
+    if (!source.contains(el)) return false;
+    for (let node = el.parentElement; node && node !== source; node = node.parentElement) {
+      if (node.hasAttribute("data-kui-step")) return false;
+    }
+    return true;
+  }
+  function stepOnSwipe(doc, el, step) {
+    const onSwipe = (event) => {
+      const direction = event.detail?.direction;
+      const source = event.target;
+      if (!direction || !DIRECTIONS.has(direction) || source.nodeType !== 1) return;
+      if (swipeReaches(source, el)) step(swipeStep(direction));
+    };
+    doc.addEventListener(SWIPE_EVENT, onSwipe);
+    return () => doc.removeEventListener(SWIPE_EVENT, onSwipe);
+  }
+
+  // src/effects/forms/primitives.ts
+  var timing = {
+    duration: { type: "time", default: "400ms", cssProperty: "--kui-duration" },
+    ...TRIGGER_DELAY_PARAM,
+    ease: { type: "easing", default: "ease-out", cssProperty: "--kui-ease" }
+  };
+  var FORM_STATE_TIMING = {
+    because: "forms.css pins its timing literally \u2014 the motion lands on a sibling that inline custom properties cannot reach"
+  };
+  var NATIVE_STATE_PRIMITIVE = {
+    id: "native-state",
+    renderer: "javascript",
+    channels: [CHANNEL.translate, CHANNEL.scale, CHANNEL.opacity, CHANNEL.stroke, CHANNEL.color],
+    parameters: {},
+    supportedTimelines: ["time"],
+    supportedActivations: ["load"],
+    defaultActivation: "load",
+    perfClass: "compositor",
     // Native pseudo-classes drive these and the motion lands on a sibling, not on the control that
     // carries the attribute, so base.css's policy layer enforces this through its sibling
     // `transition-duration` rules rather than the `animation-*` ones.
@@ -10943,7 +11801,7 @@ var kuinetic = (() => {
   }
   var STRENGTH_METER_PRIMITIVE = jsInputPrimitive(
     "strength-meter",
-    ["meter"],
+    ["meter", attributeChannel("data-kui-strength-level")],
     {},
     deferPrepare(prepareStrengthMeter)
   );
@@ -10954,14 +11812,55 @@ var kuinetic = (() => {
     deferPrepare(prepareRangeFill)
   );
   function prepareStepProgress(el, params, ctx) {
-    const selector = resolveTarget(params.text("target"), ctx, "step-progress");
+    const label = "step-progress";
+    const selector = resolveTarget(params.text("target"), ctx, label);
     const scope = scopeParam(params, "page");
     const resolveSteps = () => selector ? queryScoped(el, ctx, selector, scope) : el.children;
-    return createStepIndex({ el, params, ctx, scope, resolveSteps }).release;
+    const lightbox = params.is("lightbox");
+    const { motion, pause, release: releaseMotion } = createDeckMotion({
+      el,
+      ctx,
+      params,
+      label,
+      settleMs: effectDurationMs(params, 400),
+      step: (direction) => direction > 0 ? index.next() : index.prev()
+    });
+    const index = createStepIndex({
+      el,
+      params,
+      ctx,
+      resolveSteps,
+      controls: pause ? [pause] : [],
+      onInput: () => motion.interrupt(),
+      /*
+       * With `lightbox:true` a click on a slide opens the viewer, so the container click cannot also
+       * advance the deck: one press would both open the gallery and move the slide behind it. The
+       * deck still moves on its arrows, dots, swipe and autoplay.
+       */
+      clickFallback: !lightbox
+    });
+    const releaseViewer = deckLightbox(
+      lightbox,
+      { host: el, cards: resolveSteps, doc: ctx.doc, reducedMotion: ctx.reducedMotion },
+      (message) => ctx.warn(`${label} ${message}`)
+    );
+    const releaseSwipe = stepOnSwipe(ctx.doc, el, (direction) => {
+      motion.interrupt();
+      if (direction > 0) index.next();
+      else index.prev();
+    });
+    return () => {
+      releaseViewer();
+      releaseSwipe();
+      releaseMotion();
+      index.release();
+    };
   }
   var STEP_PROGRESS_BASE = jsInputPrimitive(
     "step-progress",
-    ["state"],
+    // The host's children are its steps unless `target:` says otherwise, so a widget that inserts
+    // one (`slow-mo`'s toggle) would become a step: the subtree is this deck's.
+    [SUBTREE_CHANNEL, attributeChannel("data-kui-step")],
     {
       // Empty default, not '4': `readParams` fills every declared default in unconditionally and
       // does not validate it, so an empty one is how `prepareStepProgress` tells "unauthored" from
@@ -11008,6 +11907,16 @@ var kuinetic = (() => {
        * at 390px and at 1440px, and the page keeps owning the box. Same reason `rest:` is a number.
        */
       main: { type: "number", default: "1", cssProperty: "--kui-main", finite: true, minimum: 0 },
+      /*
+       * The deck steps itself every `autoplay:` (`0s`, the default, is off), and `pause:` names the
+       * author's play/pause control, and `hover:none` stops a resting pointer pausing it. The spatial
+       * decks' declarations and scheduler, shared — see `prepareStepProgress` and `effects/auto-motion.ts`.
+       */
+      autoplay: AUTOPLAY_PARAM,
+      pause: PAUSE_PARAM,
+      hover: HOVER_PARAM,
+      // A click on a slide opens every slide in the lightbox gallery. See `core/deck-viewer.ts`.
+      lightbox: DECK_LIGHTBOX_PARAM,
       // Which tree `target:` is searched in. Unset means this primitive's own historical answer —
       // see `prepareStepProgress`. One declaration, shared: `effects/step-marking.ts`.
       scope: SCOPE_PARAM
@@ -11054,7 +11963,7 @@ var kuinetic = (() => {
   }
   var SUBMIT_FLOW_PRIMITIVE = jsInputPrimitive(
     "submit-flow",
-    ["state"],
+    [attributeChannel("data-kui-stage")],
     {
       load: { type: "time", default: "1200ms", cssProperty: "--kui-load" },
       hold: { type: "time", default: "1500ms", cssProperty: "--kui-hold" }
@@ -11104,9 +12013,12 @@ var kuinetic = (() => {
      * two readings is the stylesheet. `step-progress` was the wrong word to type on a deck of
      * slides, which is the only reason this alias exists; nothing behaves differently under it.
      *
-     * It is still an *index*, not a carousel component: no ARIA, no roving focus, no autoplay. That
-     * boundary is the one section H states — the library animates elements you control and does not
-     * own the widget — and naming this `carousel` does not move it.
+     * It is still an *index*, not a carousel component: no ARIA, no roving focus. That boundary is
+     * the one section H states — the library animates elements you control and does not own the
+     * widget — and naming this `carousel` does not move it. `autoplay:`/`pause:` do not cross it: they
+     * press the same "next" a visitor's control does, on a timer, and the control is still the
+     * author's markup (`effects/auto-motion.ts`, shared with the spatial decks). Likewise
+     * `lightbox:true` hands a click on a slide to the showcase gallery (`core/deck-viewer.ts`).
      *
      * No `requiresOwnSubtree` here, unlike `step-progress` beside it. That flag means "this name's
      * shipped CSS reaches past the element into its descendants, so the universal `target:` must
@@ -11185,6 +12097,17 @@ var kuinetic = (() => {
       longPressTimer = null;
     }
     function onDown(event) {
+      if (origin && pointerId !== null && event.pointerId !== pointerId) {
+        clearLongPress();
+        const last = samples[samples.length - 1];
+        releaseCapture(pointerId);
+        finish({ x: last.x, y: last.y, time: deps.now() });
+        return;
+      }
+      if (options.accept && !options.accept(event)) {
+        origin = null;
+        return;
+      }
       origin = sampleOf(event);
       samples = [origin];
       active = false;
@@ -11268,7 +12191,9 @@ var kuinetic = (() => {
       stopListeningOnDocument();
       releaseCapture(event.pointerId);
       if (!origin) return;
-      const sample = sampleOf(event);
+      finish(sampleOf(event));
+    }
+    function finish(sample) {
       samples.push(sample);
       reportEnd(vectorNow(sample), sample);
       origin = null;
@@ -11277,6 +12202,7 @@ var kuinetic = (() => {
       samples = [];
     }
     function onLostCapture(event) {
+      if (event.target !== el) return;
       if (!captured || event.pointerId !== pointerId) return;
       captured = false;
       onUp(event);
@@ -11431,16 +12357,19 @@ var kuinetic = (() => {
     runners.x.to(offset.x + vector.vx * carry);
     runners.y.to(offset.y + vector.vy * carry);
   }
-  function prepareSwipeable(el, params) {
+  function prepareSwipeable(el, params, ctx) {
+    const axis = params.text("axis", "both");
+    if (axis !== "both") ctx.style.set("touch-action", `${axis === "x" ? "pan-y" : "pan-x"} pinch-zoom`);
     const stop = recognise(
       el,
       {
         onSwipe(direction) {
           el.setAttribute("data-kui-swipe", direction);
+          announceSwipe(ctx.win, el, direction);
         }
       },
       {
-        axis: params.text("axis", "both"),
+        axis,
         swipeVelocity: params.num("velocity", 300),
         // This primitive moves nothing, so it must not hold the pointer from `pointerdown` — that
         // retargets the following `click` at this element and kills every interactive child (a
@@ -11506,7 +12435,7 @@ var kuinetic = (() => {
   var GESTURE_PRIMITIVES = [
     gesturePrimitive(
       "draggable",
-      ["translate"],
+      ["translate", attributeChannel("data-kui-dragging")],
       {
         ...springParams2,
         axis: { type: "keyword", default: "both", cssProperty: "--kui-axis", keywords: ["x", "y", "both"] },
@@ -11537,7 +12466,7 @@ var kuinetic = (() => {
     ),
     gesturePrimitive(
       "swipeable",
-      ["state"],
+      [attributeChannel("data-kui-swipe")],
       {
         axis: { type: "keyword", default: "both", cssProperty: "--kui-axis", keywords: ["x", "y", "both"] },
         velocity: { type: "number", default: "300", cssProperty: "--kui-velocity" }
@@ -11546,7 +12475,7 @@ var kuinetic = (() => {
     ),
     gesturePrimitive(
       "pressable",
-      ["state"],
+      [attributeChannel("data-kui-pressed")],
       { duration: { type: "time", default: "500ms", cssProperty: "--kui-duration" } },
       // `duration` here is the hold threshold, not a span of motion — `long-press 800ms` means
       // "count it once the finger has been down for 800ms". It is read (see `preparePressable`), so
@@ -11597,6 +12526,7 @@ var kuinetic = (() => {
     },
     { name: "swipe", primitive: "swipeable", phase: "state" },
     { name: "swipe-x", primitive: "swipeable", params: { axis: "x" }, phase: "state" },
+    { name: "swipe-y", primitive: "swipeable", params: { axis: "y" }, phase: "state" },
     { name: "long-press", primitive: "pressable", phase: "state" },
     { name: "magnetic", primitive: "magnetic", phase: "state" },
     {
@@ -11892,13 +12822,15 @@ var kuinetic = (() => {
     ),
     layoutPrimitive(
       "auto-height",
-      ["layout"],
+      // The two properties it writes on the panel: `overflow: hidden`, and the `height` it animates.
+      ["overflow", "height"],
       { attribute: { type: "text", default: "data-open", cssProperty: "--kui-attribute" } },
       deferPrepare(prepareAutoHeight)
     ),
     layoutPrimitive(
       "flip-indicator",
-      ["translate", "layout"],
+      // The bar's landing spot (`translate`) and its `width`, matched to the selected tab.
+      ["translate", "width"],
       {
         follow: { type: "text", default: "", cssProperty: "--kui-follow" },
         attribute: { type: "text", default: "aria-selected", cssProperty: "--kui-attribute" }
@@ -12147,26 +13079,25 @@ var kuinetic = (() => {
   var NAV_JS_PRIMITIVES = [
     navPrimitive(
       "header-shrink",
-      // `'shadow'` alongside `'layout'`: `header-shrink`'s host rule also transitions `box-shadow`
-      // (navigation.css), which `layout` alone does not cover — see `header-shrink`'s own
-      // `Preset.transitions` below and `channel-properties.ts`'s `layout` entry for why the two
-      // interpolated properties (`padding-block`/`font-size`) stay on `layout` while this one moves
-      // to the channel that already owns every other box-shadow writer (`lift-shadow`,
-      // `border-glow`). Composing `header-shrink` with either of those is now a refused conflict
-      // instead of a silent clobber on the same property — the self-consistency bug this closes.
-      ["layout", "shadow"],
+      // The three properties its host rule writes (navigation.css): the two it interpolates from
+      // `--kui-shrink`, `padding-block` and `font-size`, each under its own name, and `box-shadow`
+      // on the channel that already owns every other box-shadow writer (`lift-shadow`,
+      // `border-glow`), so composing `header-shrink` with either of those is a refused conflict
+      // instead of a silent clobber. The two used to sit in the shared `'layout'` bucket, which also
+      // refused `header-shrink, pin-until` — a sticky header that shrinks — over nothing they share.
+      ["padding", "font-size", "shadow", attributeChannel("data-kui-shrunk")],
       { offset: { type: "number", default: "120", cssProperty: "--kui-offset" } },
       deferPrepare(prepareHeaderShrink)
     ),
     navPrimitive(
       "header-hide-on-scroll",
-      [CHANNEL.translate],
+      [CHANNEL.translate, attributeChannel("data-kui-hidden")],
       { offset: { type: "number", default: "8", cssProperty: "--kui-offset" } },
       deferPrepare(prepareHeaderHide)
     ),
     navPrimitive(
       "back-to-top-fade",
-      [CHANNEL.opacity, CHANNEL.translate],
+      [CHANNEL.opacity, CHANNEL.translate, attributeChannel("data-kui-visible")],
       { offset: { type: "number", default: "400", cssProperty: "--kui-offset" } },
       deferPrepare(prepareBackToTop)
     )
@@ -12729,7 +13660,10 @@ var kuinetic = (() => {
   var SCROLL_PRIMITIVES = [
     scrollPrimitive({
       id: "pin",
-      channels: ["layout", "progress"],
+      // `position: sticky` and its `top` (`installSticky`): the host's position is what it holds. The
+      // spacer it can insert is a sibling, not a child, so the host's subtree is not claimed. And the
+      // `data-kui-pinned` flag it publishes while holding.
+      channels: ["position", "progress", attributeChannel("data-kui-pinned")],
       parameters: {
         ...distanceParam2,
         ...stickyParams
@@ -12739,7 +13673,13 @@ var kuinetic = (() => {
     }),
     scrollPrimitive({
       id: "scroll-progress",
-      channels: ["progress"],
+      // `data-kui-step` beside `progress`: with `steps:` this publishes the same index attribute (and
+      // its `--kui-step` twin) a `carousel` does, so the two on one element would overwrite each
+      // other's step every frame. The claim is static, so it holds with `steps:0` too — a list can't
+      // be composed or refused per param value. One claim covers both writes: every primitive that
+      // writes the `--kui-step` index also writes the attribute, so a separate channel for the
+      // property could never change a decision.
+      channels: ["progress", attributeChannel("data-kui-step")],
       parameters: {
         ...distanceParam2,
         steps: { type: "number", default: "0", cssProperty: "--kui-steps" },
@@ -12775,7 +13715,8 @@ var kuinetic = (() => {
     }),
     scrollPrimitive({
       id: "media-scrub",
-      channels: ["media", "progress"],
+      // `position`: it holds its host the way a pin does (`position: sticky` and its `top`).
+      channels: ["media", "progress", "position"],
       parameters: {
         ...distanceParam2,
         // A scrub is a hold, so it needs the same two knobs a pin does. Declaring them here is what
@@ -12794,7 +13735,7 @@ var kuinetic = (() => {
     }),
     scrollPrimitive({
       id: "scroll-spy",
-      channels: ["state"],
+      channels: [attributeChannel("data-kui-active")],
       parameters: {
         // `distance`: the per-section form only. `offset-top`: the container form only. Each is a
         // no-op — warned, not silent — in the other; see `prepareScrollSpySingle` and
@@ -12820,8 +13761,8 @@ var kuinetic = (() => {
     scrollPrimitive({
       id: "smooth-scroll",
       /*
-       * Its own channel, not the `'layout'` it used to share with `pin`, `stacking-cards` and
-       * `scroll-snap`. The channel model exists to stop two effects fighting over the same CSS
+       * Its own channel, not the `'layout'` bucket it used to share with `pin`, `stacking-cards` and
+       * `scroll-snap` (a bucket since split into the properties each writes). The channel model exists to stop two effects fighting over the same CSS
        * property, and this one writes exactly `scroll-behavior` — a property that describes how a
        * *user-or-script-initiated* scroll is performed, and that no other primitive touches.
        *
@@ -12842,7 +13783,11 @@ var kuinetic = (() => {
     }),
     scrollPrimitive({
       id: "scroll-snap",
-      channels: ["layout"],
+      // `scroll-snap-type`, and with `target:` the container it makes of the host (`installSnapContainer`):
+      // `overflow`, and `display: flex` on the x axis — `discrete`'s property. A claim is static, so
+      // it holds without `target:` too. The subtree likewise: with no `target:` the host's children
+      // are the snap items, each given a `scroll-snap-align`.
+      channels: ["scroll-snap-type", "overflow", "discrete", SUBTREE_CHANNEL],
       parameters: {
         axis: { type: "keyword", default: "y", cssProperty: "--kui-axis", keywords: ["x", "y"] },
         strictness: {
@@ -13184,7 +14129,7 @@ var kuinetic = (() => {
     return children.filter((child) => child.textContent.trim() === "");
   }
   function withIconParts(inner) {
-    return (el, params, ctx) => {
+    return inheritTimingContract(inner, (el, params, ctx) => {
       if (!el.querySelector(".kui-bar")) {
         const bars = findBars(el);
         if (bars.length > 0) {
@@ -13203,7 +14148,7 @@ var kuinetic = (() => {
         }
       }
       return inner(el, params, ctx);
-    };
+    });
   }
 
   // src/effects/svg/index.ts
@@ -13242,18 +14187,18 @@ var kuinetic = (() => {
     };
     let current = 0;
     const enter = () => drive(1);
-    const leave = () => drive(0);
+    const leave2 = () => drive(0);
     el.addEventListener("pointerenter", enter, { passive: true });
     el.addEventListener("focusin", enter, { passive: true });
-    el.addEventListener("pointerleave", leave, { passive: true });
-    el.addEventListener("focusout", leave, { passive: true });
+    el.addEventListener("pointerleave", leave2, { passive: true });
+    el.addEventListener("focusout", leave2, { passive: true });
     return () => {
       cancelled = true;
       cancelAnimationFrame(frame);
       el.removeEventListener("pointerenter", enter);
       el.removeEventListener("focusin", enter);
-      el.removeEventListener("pointerleave", leave);
-      el.removeEventListener("focusout", leave);
+      el.removeEventListener("pointerleave", leave2);
+      el.removeEventListener("focusout", leave2);
       path2.setAttribute("d", startPath);
     };
   }
@@ -13274,7 +14219,16 @@ var kuinetic = (() => {
   var ICON_TOGGLE_PRIMITIVE = {
     id: "icon-toggle",
     renderer: "javascript",
-    channels: [CHANNEL.translate, CHANNEL.rotate, CHANNEL.scale, CHANNEL.opacity, CHANNEL.clip],
+    // The subtree too: with no `.kui-bar` markup the host's own children are the bars
+    // (`icon-parts.ts` stamps them), so a deck or widget beside it would have its children moved.
+    channels: [
+      CHANNEL.translate,
+      CHANNEL.rotate,
+      CHANNEL.scale,
+      CHANNEL.opacity,
+      CHANNEL.clip,
+      SUBTREE_CHANNEL
+    ],
     parameters: {
       duration: { type: "time", default: "260ms", cssProperty: "--kui-duration" },
       // The state flip is the start moment: `aria-expanded` goes true and the bars begin to move.
@@ -13472,8 +14426,10 @@ var kuinetic = (() => {
     // `'discrete'` alongside `rotate`: the unconditional `[data-kui-fx~='flip-card']` rule pins
     // `display: grid` so the two faces stack in one cell instead of flowing as normal block
     // siblings — unrelated to `catalog/discrete.ts`'s show/hide use of the same physical property,
-    // but `display` is tracked as one channel regardless of the value written into it.
-    channels: [CHANNEL.rotate, "discrete"],
+    // but `display` is tracked as one channel regardless of the value written into it. The subtree
+    // because the host's children are the two faces (`flip-parts.ts` marks them, and injects the
+    // toggle button when none is authored).
+    channels: [CHANNEL.rotate, "discrete", SUBTREE_CHANNEL],
     parameters: {
       duration: { type: "time", default: "700ms", cssProperty: "--kui-duration" },
       // The turn has a start moment — the click, or the pointer arriving — so a delay before it is
@@ -13611,8 +14567,8 @@ var kuinetic = (() => {
   function snapTo(projected) {
     return Math.round(projected) + 0;
   }
-  function wrapPlace(place2, total) {
-    return total > 0 ? (place2 % total + total) % total : 0;
+  function wrapPlace(place3, total) {
+    return total > 0 ? (place3 % total + total) % total : 0;
   }
   var KEY_DELTAS = {
     ArrowRight: 1,
@@ -13624,8 +14580,26 @@ var kuinetic = (() => {
     Home: null,
     End: null
   };
-  function createRingDrag(request) {
-    const { el, ctx, enabled, travelPx, total, positionOf, moveTo, setDragging } = request;
+  function holdSelection(doc) {
+    let ledger;
+    const release2 = () => {
+      ledger?.restore();
+      ledger = void 0;
+    };
+    return {
+      hold() {
+        release2();
+        doc.getSelection()?.removeAllRanges();
+        ledger = createStyleLedger(doc.documentElement);
+        ledger.claim("user-select");
+        ledger.claim("-webkit-user-select");
+        ledger.set("user-select", "none");
+        ledger.set("-webkit-user-select", "none");
+      },
+      release: release2
+    };
+  }
+  function guardClicks(el, enabled) {
     let suppressClick = false;
     const onClickCapture = (event) => {
       if (!suppressClick) return;
@@ -13633,19 +14607,49 @@ var kuinetic = (() => {
       event.stopPropagation();
       event.preventDefault();
     };
+    const onPressCapture = () => {
+      suppressClick = false;
+    };
+    const onNativeDrag = (event) => {
+      event.preventDefault();
+    };
+    el.addEventListener("click", onClickCapture, true);
+    el.addEventListener("pointerdown", onPressCapture, true);
+    if (enabled) el.addEventListener("dragstart", onNativeDrag);
+    return {
+      arm() {
+        suppressClick = true;
+      },
+      release() {
+        el.removeEventListener("click", onClickCapture, true);
+        el.removeEventListener("pointerdown", onPressCapture, true);
+        el.removeEventListener("dragstart", onNativeDrag);
+      }
+    };
+  }
+  function createRingDrag(request) {
+    const { el, ctx, enabled, travelPx, total, positionOf, moveTo, setDragging } = request;
+    const clicks = guardClicks(el, enabled);
+    let dragFrom = 0;
+    let sign = 1;
+    const selection = holdSelection(el.ownerDocument);
     const stopRecognising = enabled ? recognise(
       el,
       {
         onStart() {
+          dragFrom = positionOf();
+          sign = request.travelSign();
+          selection.hold();
           setDragging(true);
         },
         onMove(vector) {
-          moveTo(positionOf() - vector.dx / travelPx);
+          moveTo(dragFrom - sign * vector.dx / travelPx);
         },
         onEnd(vector) {
+          selection.release();
           setDragging(false);
-          suppressClick = true;
-          const settled = snapTo(projectRelease(positionOf(), vector.vx, travelPx));
+          clicks.arm();
+          const settled = snapTo(projectRelease(positionOf(), sign * vector.vx, travelPx));
           moveTo(wrapPlace(settled, total()));
         }
       },
@@ -13654,7 +14658,15 @@ var kuinetic = (() => {
       // threshold than `recognise`'s own default of 4px is what buys that — a ring occupies a
       // large slab of a phone screen, and a scroll that begins with a two-pixel horizontal wobble
       // should not capture the pointer away from the page.
-      { axis: "x", threshold: DRAG_THRESHOLD_PX }
+      //
+      // Capture only once the press becomes a drag (`'drag'`), never on `pointerdown`. Held from
+      // the press, capture retargets the `click` that ends a plain tap at this host instead of the
+      // card under the pointer — found by the `lightbox:true` browser tier, where a real click on
+      // a card arrived as a click on the ring and opened nothing. The same retargeting made every
+      // link and button inside a card dead in a real browser while jsdom (which has no capture)
+      // stayed green. The host never moves under the pointer — its cards do — so the press has
+      // nothing to stay captured for until it is a drag, and a drag's click is swallowed above.
+      { axis: "x", threshold: DRAG_THRESHOLD_PX, capturePointer: "drag" }
     ) : () => {
     };
     if (enabled) ctx.style.set("touch-action", "pan-y");
@@ -13673,216 +14685,213 @@ var kuinetic = (() => {
     const grantedFocus = el.getAttribute("tabindex") === null;
     if (grantedFocus) el.setAttribute("tabindex", "0");
     el.addEventListener("keydown", onKeyDown);
-    el.addEventListener("click", onClickCapture, true);
     return () => {
       stopRecognising();
+      selection.release();
       el.removeEventListener("keydown", onKeyDown);
-      el.removeEventListener("click", onClickCapture, true);
+      clicks.release();
       if (grantedFocus) el.removeAttribute("tabindex");
     };
   }
 
-  // src/effects/carousel/index.ts
+  // src/effects/carousel/deck.ts
   var DRAGGING_ATTR = "data-kui-ring-dragging";
-  var FACE_ATTR = "data-kui-ring-face";
-  var QUARTER_TURN_DEG = 90;
-  var FLATTENING = [
-    ["overflow", (value) => value !== "" && value !== "visible"],
-    ["clip-path", (value) => value !== "" && value !== "none"],
-    ["opacity", (value) => value !== "" && Number(value) < 1],
-    ["filter", (value) => value !== "" && value !== "none"],
-    ["backdrop-filter", (value) => value !== "" && value !== "none"]
+  var SPATIAL_DECK_CHANNELS = [
+    SUBTREE_CHANNEL,
+    attributeChannel("data-kui-step"),
+    attributeChannel(DRAGGING_ATTR),
+    attributeChannel("tabindex")
   ];
-  function warnFlatteningAncestor(el, ctx) {
-    const body = el.ownerDocument.body;
-    let node = el.parentElement;
-    while (node && node !== body) {
-      const found = flatteningDeclaration(node, ctx);
-      if (found) {
-        ctx.warn(
-          `carousel: an ancestor <${node.localName}> has ${found.property}: ${found.value}, which flattens transform-style: preserve-3d \u2014 the ring will render as flat overlapping cards. Move the ring out of it, or drop that property on the ancestor.`
-        );
-        return;
-      }
-      node = node.parentElement;
-    }
-  }
-  function flatteningDeclaration(node, ctx) {
-    const style = ctx.win.getComputedStyle?.(node);
-    if (!style) return null;
-    for (const [property2, flattens] of FLATTENING) {
-      const value = style.getPropertyValue(property2);
-      if (flattens(value)) return { property: property2, value };
-    }
-    return null;
-  }
-  function ledgersFor(store, node) {
-    let attributes = store.attributes.get(node);
-    if (!attributes) {
-      attributes = createAttributeLedger(node);
-      store.attributes.set(node, attributes);
-    }
-    let styles = store.styles.get(node);
-    if (!styles) {
-      styles = createStyleLedger(node);
-      store.styles.set(node, styles);
-    }
-    return { attributes, styles };
+  var SPINNING_ATTR = "data-kui-ring-spinning";
+  var FACE_ATTR = "data-kui-ring-face";
+  var WRAP_ATTR = "data-kui-ring-wrap";
+  function commitStyle(win, node) {
+    return win.getComputedStyle?.(node).transform;
   }
-  function faceAt(angleDeg) {
-    return Math.abs(normaliseDegrees(angleDeg)) >= QUARTER_TURN_DEG ? "back" : "front";
+  function travelSign(liveX, nextX, previousX) {
+    if (nextX !== null) return nextX < liveX ? -1 : 1;
+    if (previousX !== null) return previousX > liveX ? -1 : 1;
+    return 1;
   }
-  function normaliseDegrees(angleDeg) {
-    const wrapped2 = (angleDeg % 360 + 360) % 360;
-    return wrapped2 > 180 ? wrapped2 - 360 : wrapped2;
+  function offsetWrapped(previous, next, count) {
+    return Math.abs(next - previous) > count / 2;
   }
   function snapPosition(position, total) {
     if (total <= 0) return { step: 0, drift: 0 };
     const nearest = Math.round(position);
     return { step: (nearest % total + total) % total, drift: position - nearest };
   }
-  var RING_PARAMETERS = {
+  var DECK_PARAMETERS = {
     duration: { type: "time", default: "620ms", cssProperty: "--kui-duration" },
     ...TRIGGER_DELAY_PARAM,
     ease: { type: "easing", default: "cubic-bezier(0.22, 1, 0.36, 1)", cssProperty: "--kui-ease" },
-    /*
-     * A real CSS `<angle>`, not a normalised scalar.
-     *
-     * A designer specifies fifteen degrees; nobody specifies 0.375 of an unstated maximum. A
-     * normalised knob also bakes taste into a coordinate — the maximum *is* an opinion about how much
-     * tilt is too much, expressed as a unit — and it cannot be typed in the spelling the rest of the
-     * attribute grammar uses (`0.05turn` is a legal angle and means something exact). Legibility is
-     * still bounded, but the bound is applied to the angle, in `carousel.css`, where it is one
-     * `clamp()` an author can see in devtools rather than a hidden rescale.
-     *
-     * Sign convention: **positive tilts the camera up and over the ring**, looking down at it. That
-     * is the opposite sign from the `rotateX()` it compiles to — see `carousel.css` for the
-     * derivation — and the inversion is deliberate: "18 degrees above" is the sentence a designer
-     * says, and it should not be spelled `-18deg` because of which way a matrix happens to turn.
-     */
-    tilt: { type: "angle", default: "0deg", cssProperty: "--kui-tilt" },
-    /*
-     * How far the ring spreads. `360deg` is a full ring; anything less is a slice.
-     *
-     * This is the parameter the concave name exists around. From the centre of a *full* ring most of
-     * it is behind your head, so a 360-degree spread there is not a design choice but a way of hiding
-     * two thirds of the content — the inside name defaults to a slice for that reason.
-     */
-    arc: { type: "angle", default: "360deg", cssProperty: "--kui-arc" },
-    /*
-     * The ring's radius, or unset for one derived from the content.
-     *
-     * Empty default, not a number, and for the same reason `step-progress`'s `steps` is empty:
-     * `readParams` fills every declared default in unconditionally, so an empty one is the only way
-     * to tell "the author said nothing" from "the author said 320px". Unset, `carousel.css` computes
-     * the circumradius of a regular polygon with this many sides and this much side length —
-     * `(width + gap) / (2 * tan(step / 2))` — which is the arrangement where neighbours just touch.
-     * Every consumer solving that by hand was the alternative, and they would all have solved it
-     * differently.
-     *
-     * The width half of that has to come from JavaScript: CSS can compute with a measurement but
-     * cannot take one. See `measureItemWidth`.
-     */
-    radius: { type: "length", default: "", cssProperty: "--kui-radius" },
-    /** Breathing room between neighbours, spent by the derived radius above. */
-    gap: { type: "length", default: "24px", cssProperty: "--kui-gap" },
-    /** Camera distance. Shorter is a wider lens: more foreshortening, more drama, more distortion. */
-    perspective: { type: "length", default: "1600px", cssProperty: "--kui-perspective" },
-    /*
-     * Whether a slot keeps its own outward orientation, or turns to keep facing the viewer.
-     *
-     * `radial` is the ring's natural state and needs nothing: a slot placed by
-     * `rotateY(θ) translateZ(R)` already faces outward along its own radius, which is why the live
-     * one faces you. It is what you want for a cover-flow, and it is what makes the far side of the
-     * ring read as the far side.
-     *
-     * `camera` counter-rotates each slot's *child* — never the slot itself; the placement transform
-     * and the billboard have to stay on separate boxes or every later change to one silently
-     * multiplies into the other — so text stays readable at every position, which is what a raised
-     * camera needs. Costs one element of markup per slide; see `docs/catalog.md`.
-     */
-    facing: {
-      type: "keyword",
-      default: "radial",
-      cssProperty: "--kui-facing",
-      keywords: ["radial", "camera"]
-    },
-    /** Whether a pointer can spin the ring by hand. */
+    /** Whether a pointer can move the deck by hand. */
     grab: { type: "keyword", default: "true", cssProperty: "--kui-grab", keywords: ["true", "false"] },
     /*
-     * How far the pointer travels, in pixels, to move the ring one place.
+     * How far the pointer travels, in pixels, to move the deck one place.
      *
      * A pixels-per-step mapping rather than pixels-per-degree, because a step is the unit everything
      * else here is in — the index, the offset, the snap — and a degree is not: the same drag would
      * move a six-item ring one place and a sixty-item ring ten, purely because the spacing changed.
      */
     travel: { type: "number", default: "220", cssProperty: "--kui-travel", finite: true, minimum: 1 },
-    /** Which elements sit on the ring. Unset means this element's own children. */
+    /** Which elements are the slides. Unset means this element's own children. */
     target: { type: "text", default: "", cssProperty: "--kui-target" },
     /** Optional controls, resolved exactly as `step-progress` resolves its own. */
     next: { type: "text", default: "", cssProperty: "--kui-next" },
     prev: { type: "text", default: "", cssProperty: "--kui-prev" },
     jump: { type: "text", default: "", cssProperty: "--kui-jump" },
+    /** A control that pauses and resumes `spin:`/`autoplay:`. See `PAUSE_PARAM` (`auto-motion.ts`). */
+    pause: PAUSE_PARAM,
+    /** `hover:none`: a resting pointer no longer pauses `spin:`/`autoplay:`. See `HOVER_PARAM`. */
+    hover: HOVER_PARAM,
+    /*
+     * Continuous rotation: how long one full cycle of the deck takes. `0s` is off.
+     *
+     * A period rather than a speed because a period is what a designer can picture ("one turn every
+     * forty seconds") and it is a `time`, which the attribute grammar already reads, clamps and
+     * documents. A full cycle is every slide passing once — one revolution of a full ring — so adding a
+     * card does not change how fast the ring turns. **Negative runs the other way**: `spin:-40s`. A
+     * signed value rather than a `direction:` keyword so one row can say everything about its motion
+     * in one token, which is what three rows at three speeds on one page want.
+     */
+    spin: { type: "time", default: "0s", cssProperty: "--kui-spin" },
+    /*
+     * Stepped motion: how long the deck rests on each slide. When both are set `spin:` wins, because a
+     * deck cannot be both gliding and resting. See `AUTOPLAY_PARAM` (`auto-motion.ts`).
+     */
+    autoplay: AUTOPLAY_PARAM,
+    /*
+     * `lightbox:true`: a click on a card opens every card of this deck in the shared lightbox gallery,
+     * at the card clicked. A drag still only moves the deck — its click is swallowed before it can
+     * reach a card (`drag.ts`). The gallery itself lives in the showcase module; see
+     * `core/deck-viewer.ts` for how a deck reaches it without importing it.
+     */
+    lightbox: DECK_LIGHTBOX_PARAM,
     scope: SCOPE_PARAM
   };
-  function measureItemWidth(styles, slots) {
-    for (const slot of slots) {
-      const width = slot.offsetWidth;
-      if (width > 0) styles.set("--kui-item-width", `${width}px`);
-      return;
-    }
-  }
-  function prepareSpatialRing(el, params, ctx) {
-    warnFlatteningAncestor(el, ctx);
-    mirrorTimingToCss("spatial-ring", ALL_TIMING_TOKENS, params, ctx);
-    const selector = resolveTarget(params.text("target"), ctx, "carousel");
+  function ledgerFor(store, node) {
+    let ledger = store.attributes.get(node);
+    if (!ledger) {
+      ledger = createAttributeLedger(node);
+      store.attributes.set(node, ledger);
+    }
+    return ledger;
+  }
+  function measureItem(styles, slots) {
+    const first = slots[0];
+    if (!first) return;
+    if (first.offsetWidth > 0) styles.set("--kui-item-width", `${first.offsetWidth}px`);
+    if (first.offsetHeight > 0) styles.set("--kui-item-height", `${first.offsetHeight}px`);
+  }
+  function prepareSpatialDeck(el, params, ctx, layout) {
+    const { label } = layout;
+    mirrorTimingToCss(layout.id, ALL_TIMING_TOKENS, params, ctx);
+    const selector = resolveTarget(params.text("target"), ctx, label);
     const scope = scopeParam(params, "self");
     const resolveSlots = () => selector ? queryScoped(el, ctx, selector, scope) : el.children;
-    const marker = createStepMarker(resolveSlots, (message) => ctx.warn(`carousel ${message}`));
+    const marker = createStepMarker(resolveSlots, (message) => ctx.warn(`${label} ${message}`));
     const total = () => countSteps(params, resolveSlots);
     const hostAttributes = createAttributeLedger(el);
     const hostStyles = createStyleLedger(el);
-    hostAttributes.set("data-kui-ring-facing", params.text("facing", "radial"));
-    const slots = { attributes: /* @__PURE__ */ new Map(), styles: /* @__PURE__ */ new Map() };
-    const derivesRadius = params.text("radius") === "";
+    for (const [name, value] of Object.entries(layout.hostAttributes ?? {})) hostAttributes.set(name, value);
+    const slots = { attributes: /* @__PURE__ */ new Map() };
+    const attachment = layout.attach?.(hostStyles);
     let position = 0;
-    const arcDeg = degreesOf(params.text("arc", "360deg"), 360);
+    let rendered = { step: -1, count: 1, nodes: [] };
+    const lastOffsets = /* @__PURE__ */ new WeakMap();
+    const settleWrapped = (nodes, count) => {
+      for (const node of nodes) {
+        const raw = Number(node.getAttribute("data-kui-step-offset"));
+        const offset = layout.placeOf ? layout.placeOf(raw, count) : raw;
+        const previous = lastOffsets.get(node);
+        lastOffsets.set(node, offset);
+        if (previous === void 0 || !offsetWrapped(previous, offset, count)) continue;
+        const flag = createAttributeLedger(node);
+        flag.set(WRAP_ATTR, "true");
+        commitStyle(ctx.win, node);
+        flag.restore();
+      }
+    };
+    const markFaces = (nodes, count, drift2) => {
+      for (const node of nodes) {
+        const offset = Number(node.getAttribute("data-kui-step-offset"));
+        const face = layout.faceOf(offset - drift2, offset, count);
+        if (node.getAttribute(FACE_ATTR) !== face) ledgerFor(slots, node).set(FACE_ATTR, face);
+      }
+    };
+    const publishPosition = (step, drift2) => {
+      hostStyles.set("--kui-step-position", (step + drift2).toFixed(4));
+    };
     const render = () => {
       const count = total();
       const { step, drift: drift2 } = snapPosition(position, count);
       hostAttributes.set("data-kui-step", String(step));
       hostStyles.set("--kui-step", String(step));
-      hostStyles.set("--kui-step-position", (step + drift2).toFixed(4));
+      hostStyles.set("--kui-item-count", String(count));
+      publishPosition(step, drift2);
       marker.mark(step);
-      const slotNodes = [...resolveSlots()];
-      if (derivesRadius) measureItemWidth(hostStyles, slotNodes);
-      const spacing = arcDeg / count;
-      for (const node of slotNodes) {
-        const offset = Number(node.getAttribute("data-kui-step-offset"));
-        const angle = (offset - drift2) * spacing;
-        ledgersFor(slots, node).attributes.set(FACE_ATTR, faceAt(angle));
+      const nodes = [...resolveSlots()];
+      if (layout.measure) measureItem(hostStyles, nodes);
+      markFaces(nodes, count, drift2);
+      settleWrapped(nodes, count);
+      attachment?.render(nodes, count);
+      rendered = { step, count, nodes };
+    };
+    const renderFrame = () => {
+      const { step, drift: drift2 } = snapPosition(position, rendered.count);
+      if (step !== rendered.step) {
+        render();
+        return;
       }
+      publishPosition(step, drift2);
+      markFaces(rendered.nodes, rendered.count, drift2);
     };
+    const { motion, pause, release: releaseMotion } = createDeckMotion({
+      el,
+      ctx,
+      params,
+      label,
+      settleMs: effectDurationMs(params, 620),
+      step(direction) {
+        const count = total();
+        const { step } = snapPosition(position, count);
+        position = direction > 0 ? nextStep(step, count) : prevStep(step, count);
+        render();
+      },
+      spin: {
+        advance(cycles) {
+          position = wrapPlace(position + cycles * rendered.count, rendered.count);
+          renderFrame();
+        },
+        setSpinning: (spinning) => hostAttributes.set(SPINNING_ATTR, String(spinning))
+      }
+    });
     const goTo = (next) => {
+      motion.interrupt();
       position = next;
       render();
     };
-    const groups = [];
-    const bindControl = (param, run) => {
-      const control2 = resolveTarget(params.text(param), ctx, `carousel ${param}`);
-      if (!control2) return false;
-      if (queryScoped(el, ctx, control2, scope).length === 0) {
-        ctx.warn(`carousel ${param} "${control2}" matched nothing`);
+    const request = { el, ctx, params, label };
+    const groups = [
+      bindControl(request, "next", () => goTo(nextStep(snapPosition(position, total()).step, total()))),
+      bindControl(request, "prev", () => goTo(prevStep(snapPosition(position, total()).step, total()))),
+      bindControl(request, "jump", (_node, at) => {
+        if (at >= 0) goTo(at);
+      }),
+      pause
+    ].filter((group) => group !== null);
+    const releaseControls = delegateControls({ el, ctx, groups });
+    const screenTravel = () => {
+      const centres = /* @__PURE__ */ new Map();
+      for (const node of rendered.nodes) {
+        const offset = Number(node.getAttribute("data-kui-step-offset"));
+        if (Math.abs(offset) > 1) continue;
+        const box = node.getBoundingClientRect();
+        centres.set(offset, box.left + box.width / 2);
       }
-      groups.push({ selector: control2, run });
-      return true;
+      return travelSign(centres.get(0) ?? 0, centres.get(1) ?? null, centres.get(-1) ?? null);
     };
-    bindControl("next", () => goTo(nextStep(snapPosition(position, total()).step, total())));
-    bindControl("prev", () => goTo(prevStep(snapPosition(position, total()).step, total())));
-    bindControl("jump", (_node, at) => {
-      if (at >= 0) goTo(at);
-    });
-    const releaseControls = delegateControls({ el, ctx, scope, groups });
     const releaseDrag = createRingDrag({
       el,
       ctx,
@@ -13890,22 +14899,405 @@ var kuinetic = (() => {
       travelPx: params.num("travel", 220),
       total,
       positionOf: () => position,
+      travelSign: screenTravel,
       moveTo: goTo,
-      setDragging: (dragging) => hostAttributes.set(DRAGGING_ATTR, String(dragging))
+      setDragging: (dragging) => {
+        hostAttributes.set(DRAGGING_ATTR, String(dragging));
+        motion.hold(dragging);
+      }
     });
+    const releaseViewer = deckLightbox(
+      params.is("lightbox"),
+      { host: el, cards: resolveSlots, doc: ctx.doc, reducedMotion: ctx.reducedMotion },
+      (message) => ctx.warn(`${label} ${message}`)
+    );
     render();
     return () => {
+      releaseViewer();
+      releaseMotion();
       releaseDrag();
       releaseControls();
       marker.restore();
       for (const ledger of slots.attributes.values()) ledger.restore();
-      for (const ledger of slots.styles.values()) ledger.restore();
       slots.attributes.clear();
-      slots.styles.clear();
+      attachment?.release();
       hostAttributes.restore();
       hostStyles.restore();
     };
   }
+
+  // src/effects/carousel/fit.ts
+  var RING_FIT_PROPERTY = "--kui-ring-fit";
+  var SAMPLE_DEG = 0.25;
+  var SEARCH_CEILING_PX = 1e5;
+  var SEARCH_STEPS = 34;
+  var RAD = Math.PI / 180;
+  function reachableAngles(arcDeg, count) {
+    if (Math.abs(arcDeg) >= 360) return { fromDeg: -180, toDeg: 180 };
+    const places = Math.max(1, count);
+    const spacing = arcDeg / places;
+    const high = Math.floor(places / 2);
+    const low = high - places + 1;
+    const ends = [(low - 0.5) * spacing, (high + 0.5) * spacing];
+    return { fromDeg: Math.min(...ends), toDeg: Math.max(...ends) };
+  }
+  function place2(point, { sinA, cosA, sinT, cosT }) {
+    const [x, y, z] = point;
+    const x1 = x * cosA + z * sinA;
+    const z1 = -x * sinA + z * cosA;
+    return [x1, y * cosT - z1 * sinT, y * sinT + z1 * cosT];
+  }
+  function cardFits(g, r, rotation) {
+    const z0 = (g.inside ? -1 : 1) * r;
+    const centre = place2([0, 0, z0], rotation);
+    const hw = g.width / 2;
+    const hh = g.height / 2;
+    for (const [cx, cy] of [[-hw, -hh], [hw, -hh], [-hw, hh], [hw, hh]]) {
+      const [x, , z] = g.facing === "camera" ? [centre[0] + cx, centre[1] + cy, centre[2]] : place2([cx, cy, z0], rotation);
+      if (z >= g.perspective - 1) return false;
+      const scale = Number.isFinite(g.perspective) ? g.perspective / (g.perspective - z) : 1;
+      const screen2 = (g.originOffset + x) * scale;
+      if (screen2 < g.minX || screen2 > g.maxX) return false;
+    }
+    return true;
+  }
+  function fitsAt(g, r, angles) {
+    const sinT = Math.sin(g.tiltDeg * RAD);
+    const cosT = Math.cos(g.tiltDeg * RAD);
+    return angles.every((angle) => cardFits(g, r, { sinA: Math.sin(angle * RAD), cosA: Math.cos(angle * RAD), sinT, cosT }));
+  }
+  function sampleAngles(g) {
+    const from = g.inside ? Math.max(g.fromDeg, -90) : g.fromDeg;
+    const to = g.inside ? Math.min(g.toDeg, 90) : g.toDeg;
+    const steps = Math.max(1, Math.ceil((to - from) / SAMPLE_DEG));
+    return Array.from({ length: steps + 1 }, (_, i) => from + (to - from) * i / steps);
+  }
+  function solveRingFit(g) {
+    const angles = sampleAngles(g);
+    if (!fitsAt(g, 0, angles)) return 0;
+    if (fitsAt(g, SEARCH_CEILING_PX, angles)) return Infinity;
+    let low = 0;
+    let high = SEARCH_CEILING_PX;
+    for (let i = 0; i < SEARCH_STEPS; i++) {
+      const mid = (low + high) / 2;
+      if (fitsAt(g, mid, angles)) low = mid;
+      else high = mid;
+    }
+    return Math.floor(low * 100) / 100;
+  }
+  function fitBounds(el, win) {
+    const doc = el.ownerDocument;
+    for (let node = el.parentElement; node && node !== doc.body && node !== doc.documentElement; node = node.parentElement) {
+      const overflow = win.getComputedStyle(node).overflowX;
+      if (overflow === "clip" || overflow === "hidden") return null;
+      if (overflow === "auto" || overflow === "scroll") {
+        const left2 = node.getBoundingClientRect().left + node.clientLeft;
+        return { left: left2, right: left2 + node.clientWidth };
+      }
+    }
+    const left = -win.scrollX;
+    return { left, right: left + doc.documentElement.clientWidth };
+  }
+  function pixels(value, fallback) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  function createRingFit(options) {
+    const { el, ctx, styles } = options;
+    if (typeof ctx.win.getComputedStyle !== "function" || typeof ctx.win.addEventListener !== "function") {
+      return { render() {
+      }, release() {
+      } };
+    }
+    const tiltDeg = Math.min(80, Math.max(-80, -options.tiltParamDeg));
+    let card;
+    let count = 1;
+    const solve = () => {
+      const bounds = fitBounds(el, ctx.win);
+      if (!bounds || !card || card.offsetWidth === 0) {
+        styles.set(RING_FIT_PROPERTY, "");
+        return;
+      }
+      const style = ctx.win.getComputedStyle(el);
+      const host = el.getBoundingClientRect();
+      const originX = host.left + pixels(style.perspectiveOrigin, host.width / 2);
+      const fit = solveRingFit({
+        width: card.offsetWidth,
+        height: card.offsetHeight,
+        perspective: pixels(style.perspective, Infinity),
+        tiltDeg,
+        // The stylesheet's own selector for the concave placement, read rather than threaded through
+        // as a parameter: the name is what `carousel.css` branches on, so it is what this must too.
+        inside: el.matches("[data-kui-fx~='carousel-3d-inside']"),
+        // `facing:camera` counter-rotates the slot's element *children* (`carousel.css`); a slot with
+        // none — bare text — is drawn at its radial angle, and is fitted as the radial card it is.
+        facing: card.firstElementChild ? options.facing : "radial",
+        ...reachableAngles(options.arcDeg, count),
+        originOffset: host.left + host.width / 2 - originX,
+        minX: bounds.left - originX,
+        maxX: bounds.right - originX
+      });
+      styles.set(RING_FIT_PROPERTY, Number.isFinite(fit) ? `${fit}px` : "");
+    };
+    const frame = frameScheduler(ctx.win, solve);
+    const watch = watchElementSize(ctx.win, frame.request);
+    watch.observe(el);
+    watch.observe(el.ownerDocument.documentElement);
+    return {
+      render(nodes, total) {
+        const first = nodes[0];
+        if (first === card && total === count) return;
+        card = first;
+        count = total;
+        solve();
+      },
+      release() {
+        watch.disconnect();
+        frame.cancel();
+      }
+    };
+  }
+
+  // src/effects/carousel/stack.ts
+  function stackFace(offset, drift2, count, depth) {
+    const ahead = stackPlace(offset, count) - drift2;
+    return ahead > -0.5 && ahead < depth + 1 ? "front" : "back";
+  }
+  function stackPlace(offset, count) {
+    return wrapPlace(offset + 1, count) - 1;
+  }
+  var STACK_PARAMETERS = {
+    ...DECK_PARAMETERS,
+    /*
+     * How far each card behind the front one steps sideways. Positive is to the right, negative to
+     * the left. A length rather than a percentage because the host reserves `depth × shift` of room
+     * on that side (cards moved by a transform take no layout space) and a padding percentage would
+     * resolve against a different box than a translate percentage does.
+     */
+    shift: { type: "length", default: "48px", cssProperty: "--kui-stack-shift" },
+    /** How far each card behind steps upward. Negative recedes downward instead. */
+    rise: { type: "length", default: "36px", cssProperty: "--kui-stack-rise" },
+    /** Scale lost per place behind the front: `0.08` makes the third card back 76% size. */
+    shrink: { type: "number", default: "0.08", cssProperty: "--kui-stack-shrink", finite: true, minimum: 0, maximum: 0.3 },
+    /** Blur added per place behind the front. The front card is always sharp. */
+    blur: { type: "length", default: "2px", cssProperty: "--kui-stack-blur" },
+    /** Opacity lost per place behind the front. */
+    fade: { type: "number", default: "0.2", cssProperty: "--kui-stack-fade", finite: true, minimum: 0, maximum: 1 },
+    /*
+     * How many cards show behind the front one. The rest wait, hidden, at the back — `visibility`,
+     * not only `opacity`, so a card nobody can see is also not a tab stop or a click target.
+     */
+    depth: { type: "number", default: "3", cssProperty: "--kui-stack-depth", integer: true, minimum: 1, maximum: 8 }
+  };
+  function prepareSpatialStack(el, params, ctx) {
+    const depth = params.num("depth", 3);
+    return prepareSpatialDeck(el, params, ctx, {
+      id: "spatial-stack",
+      label: "carousel-stack",
+      faceOf: (place3, offset, count) => stackFace(offset, offset - place3, count, depth),
+      placeOf: stackPlace,
+      measure: false
+    });
+  }
+  var SPATIAL_STACK_PRIMITIVE = {
+    id: "spatial-stack",
+    renderer: "javascript",
+    // What `deck.ts` writes on the host: the cards (the subtree), the step index, the drag.
+    channels: [CHANNEL.skew, "discrete", CHANNEL.opacity, CHANNEL.filter, ...SPATIAL_DECK_CHANNELS],
+    parameters: STACK_PARAMETERS,
+    supportedTimelines: ["time"],
+    supportedActivations: ["load", "enter", "click", "manual"],
+    defaultActivation: "load",
+    perfClass: "compositor",
+    reducedMotion: "shorten",
+    prepare: deferPrepare(prepareSpatialStack)
+  };
+  var STACK_PRESETS = [
+    {
+      name: "carousel-stack",
+      primitive: "spatial-stack",
+      requiresOwnSubtree: true,
+      phase: "idle"
+    }
+  ];
+
+  // src/effects/carousel/index.ts
+  var QUARTER_TURN_DEG = 90;
+  var FLATTENING = [
+    ["overflow", (value) => value !== "" && value !== "visible"],
+    ["clip-path", (value) => value !== "" && value !== "none"],
+    ["opacity", (value) => value !== "" && Number(value) < 1],
+    ["filter", (value) => value !== "" && value !== "none"],
+    ["backdrop-filter", (value) => value !== "" && value !== "none"],
+    ["isolation", (value) => value === "isolate"],
+    ["mix-blend-mode", (value) => value !== "" && value !== "normal"],
+    ["mask-image", (value) => value !== "" && value !== "none"]
+  ];
+  function warnFlattenedHost(el, ctx) {
+    const found = flatteningDeclaration(el, ctx);
+    if (!found) return;
+    ctx.warn(
+      `carousel: the ring's own <${el.localName}> has ${found.property}: ${found.value}, which flattens transform-style: preserve-3d \u2014 the ring will render as flat overlapping cards. Move that property to a wrapper around the ring: an ancestor does not flatten it.`
+    );
+  }
+  function flatteningDeclaration(node, ctx) {
+    const style = ctx.win.getComputedStyle?.(node);
+    if (!style) return null;
+    for (const [property2, flattens] of FLATTENING) {
+      const value = style.getPropertyValue(property2);
+      if (flattens(value)) return { property: property2, value };
+    }
+    return null;
+  }
+  function faceAt(angleDeg) {
+    return Math.abs(normaliseDegrees(angleDeg)) >= QUARTER_TURN_DEG ? "back" : "front";
+  }
+  function normaliseDegrees(angleDeg) {
+    const wrapped2 = (angleDeg % 360 + 360) % 360;
+    return wrapped2 > 180 ? wrapped2 - 360 : wrapped2;
+  }
+  var RING_PARAMETERS = {
+    ...DECK_PARAMETERS,
+    /*
+     * A real CSS `<angle>`, not a normalised scalar.
+     *
+     * A designer specifies fifteen degrees; nobody specifies 0.375 of an unstated maximum. A
+     * normalised knob also bakes taste into a coordinate — the maximum *is* an opinion about how much
+     * tilt is too much, expressed as a unit — and it cannot be typed in the spelling the rest of the
+     * attribute grammar uses (`0.05turn` is a legal angle and means something exact). Legibility is
+     * still bounded, but the bound is applied to the angle, in `carousel.css`, where it is one
+     * `clamp()` an author can see in devtools rather than a hidden rescale.
+     *
+     * Sign convention: **positive tilts the camera up and over the ring**, looking down at it. That
+     * is the opposite sign from the `rotateX()` it compiles to — see `carousel.css` for the
+     * derivation — and the inversion is deliberate: "18 degrees above" is the sentence a designer
+     * says, and it should not be spelled `-18deg` because of which way a matrix happens to turn.
+     */
+    tilt: { type: "angle", default: "0deg", cssProperty: "--kui-tilt" },
+    /*
+     * How far the ring spreads. `360deg` is a full ring; anything less is a slice.
+     *
+     * This is the parameter the concave name exists around. From the centre of a *full* ring most of
+     * it is behind your head, so a 360-degree spread there is not a design choice but a way of hiding
+     * two thirds of the content — the inside name defaults to a slice for that reason.
+     */
+    arc: { type: "angle", default: "360deg", cssProperty: "--kui-arc" },
+    /*
+     * The ring's radius, or unset for one derived from the content.
+     *
+     * Empty default, not a number, and for the same reason `step-progress`'s `steps` is empty:
+     * `readParams` fills every declared default in unconditionally, so an empty one is the only way
+     * to tell "the author said nothing" from "the author said 320px". Unset, `carousel.css` computes
+     * the circumradius of a regular polygon with this many sides and this much side length —
+     * `(width + gap) / (2 * tan(step / 2))` — which is the arrangement where neighbours just touch.
+     * Every consumer solving that by hand was the alternative, and they would all have solved it
+     * differently.
+     *
+     * The width half of that has to come from JavaScript: CSS can compute with a measurement but
+     * cannot take one. See `measureItem` in `deck.ts`.
+     *
+     * Authored or derived, a depth ring's radius is a ceiling: a ring that would push its page
+     * sideways is pulled in exactly as far as it has to be (`fit.ts`, `--kui-ring-fit`), and one that
+     * already fits — or sits inside an ancestor that clips it — keeps this radius to the pixel.
+     */
+    radius: { type: "length", default: "", cssProperty: "--kui-radius" },
+    /** Breathing room between neighbours, spent by the derived radius above. */
+    gap: { type: "length", default: "24px", cssProperty: "--kui-gap" },
+    /** Camera distance. Shorter is a wider lens: more foreshortening, more drama, more distortion. */
+    perspective: { type: "length", default: "1600px", cssProperty: "--kui-perspective" },
+    /*
+     * Whether a slot keeps its own outward orientation, or turns to keep facing the viewer.
+     *
+     * `radial` is the ring's natural state and needs nothing: a slot placed by
+     * `rotateY(θ) translateZ(R)` already faces outward along its own radius, which is why the live
+     * one faces you. It is what you want for a cover-flow, and it is what makes the far side of the
+     * ring read as the far side.
+     *
+     * `camera` counter-rotates each slot's *child* — never the slot itself; the placement transform
+     * and the billboard have to stay on separate boxes or every later change to one silently
+     * multiplies into the other — so text stays readable at every position, which is what a raised
+     * camera needs. Costs one element of markup per slide; see `docs/catalog.md`.
+     */
+    facing: {
+      type: "keyword",
+      default: "radial",
+      cssProperty: "--kui-facing",
+      keywords: ["radial", "camera"]
+    },
+    /*
+     * Which plane the ring lies in: `depth` (the default — a carousel you look *at*, turning about a
+     * vertical pole) or `screen` (a clock face, turning about the axis that points at you).
+     *
+     * ## Why a parameter of this primitive, and not a new one
+     *
+     * A flat ring of cards around a centred word is the same object as the 3D ring seen from its
+     * pole: N slots, evenly spaced by `arc / count`, placed from `--kui-offset` and the shared drift,
+     * advanced by the same drag, keys, controls and `spin:`. Every number this primitive publishes
+     * means the same thing in both planes; only the three transform functions that turn a place into
+     * a position differ, and those live in `carousel.css` anyway. A second primitive would have
+     * duplicated the whole index to change one stylesheet rule and one face test.
+     *
+     * It is a parameter rather than only a name (unlike convex/concave, which differ in every
+     * default and so earned two names) because the runtime has to know it: a flat slot is never
+     * turned away from the viewer, so the quarter-turn face test that stops the back of a 3D ring
+     * swallowing clicks would, on a clock face, disable every card in the bottom half. The name that
+     * ships it, `carousel-orbit`, sets it; the stylesheet gates on the published attribute rather
+     * than the name, so `carousel-3d plane:screen` is equally honoured — same rule as `facing:`.
+     *
+     * `facing:` keeps its meaning here. `radial` turns each card with the ring, top edge outward like
+     * the numerals on a watch bezel; `camera` keeps every card upright. In the screen plane upright
+     * needs no child counter-rotation at all — the slot is *translated* to its place on the circle
+     * instead of rotated there — so it costs no extra markup, unlike the 3D billboard.
+     */
+    plane: {
+      type: "keyword",
+      default: "depth",
+      cssProperty: "--kui-ring-plane",
+      keywords: ["depth", "screen"]
+    }
+  };
+  function prepareSpatialRing(el, params, ctx) {
+    const plane = params.text("plane", "depth");
+    if (plane === "depth") warnFlattenedHost(el, ctx);
+    const arcDeg = degreesOf(params.text("arc", "360deg"), 360);
+    const faceOf = (place3, _offset, count) => plane === "screen" ? "front" : faceAt(place3 * (arcDeg / count));
+    return prepareSpatialDeck(el, params, ctx, {
+      id: "spatial-ring",
+      label: "carousel",
+      faceOf,
+      /*
+       * A derived radius needs a card width; a flat ring also needs a card's size to reserve its own
+       * circle (the host is sized to it, since transformed slots take no layout space), so it measures
+       * even when the author named a radius.
+       */
+      measure: params.text("radius") === "" || plane === "screen",
+      hostAttributes: {
+        /*
+         * `facing:` and `plane:` reach CSS as attributes, not only as the custom properties their
+         * specs declare. A stylesheet cannot select on the *value* of a custom property — `@container
+         * style(--kui-facing: camera)` can, and is not supported widely enough to hang a documented
+         * parameter on — so the one thing a selector needs is published in the one form a selector
+         * can read. Same pairing, for the same reason, as the number/attribute pair `step-marking.ts`
+         * publishes for the ring place.
+         */
+        "data-kui-ring-facing": params.text("facing", "radial"),
+        "data-kui-ring-plane": plane
+      },
+      /*
+       * The fit to the page (`fit.ts`). Depth plane only: a flat ring already reserves and clamps to
+       * its own square (`carousel.css`, `[data-kui-ring-plane='screen']`), and its cards never leave
+       * the plane that square is measured in.
+       */
+      attach: plane === "depth" ? (styles) => createRingFit({
+        el,
+        ctx,
+        styles,
+        arcDeg,
+        tiltParamDeg: degreesOf(params.text("tilt", "0deg"), 0),
+        facing: params.text("facing", "radial") === "camera" ? "camera" : "radial"
+      }) : void 0
+    });
+  }
   function degreesOf(value, fallbackDeg) {
     const match = /^(-?[\d.]+)(deg|rad|turn|grad)?$/i.exec(value.trim());
     if (!match) return fallbackDeg;
@@ -13925,7 +15317,15 @@ var kuinetic = (() => {
   var SPATIAL_RING_PRIMITIVE = {
     id: "spatial-ring",
     renderer: "javascript",
-    channels: [CHANNEL.skew, "discrete"],
+    // What `deck.ts` writes on the host (the cards, the step index, the drag), then the two
+    // attributes only the ring's own layout publishes.
+    channels: [
+      CHANNEL.skew,
+      "discrete",
+      ...SPATIAL_DECK_CHANNELS,
+      attributeChannel("data-kui-ring-facing"),
+      attributeChannel("data-kui-ring-plane")
+    ],
     parameters: RING_PARAMETERS,
     supportedTimelines: ["time"],
     // `load`, not `enter`: a carousel that only wires its arrows once scrolled into view is broken,
@@ -13936,7 +15336,7 @@ var kuinetic = (() => {
     reducedMotion: "shorten",
     prepare: deferPrepare(prepareSpatialRing)
   };
-  var CAROUSEL_PRIMITIVES = [SPATIAL_RING_PRIMITIVE];
+  var CAROUSEL_PRIMITIVES = [SPATIAL_RING_PRIMITIVE, SPATIAL_STACK_PRIMITIVE];
   var CAROUSEL_PRESETS = [
     {
       name: "carousel-3d",
@@ -13973,10 +15373,31 @@ var kuinetic = (() => {
       params: { arc: "120deg", facing: "camera", perspective: "900px" },
       requiresOwnSubtree: true,
       phase: "idle"
+    },
+    /*
+     * The flat ring: cards on a clock face around whatever sits in the middle of the host (a word, a
+     * logo — anything the `target:` does not name stays centred and off the ring). `plane:screen` is
+     * the whole difference; see the parameter's note for why that is a parameter of this primitive and
+     * not a new one.
+     *
+     * Named for what it does rather than which way it goes — `orbit` is the motion, and it has no
+     * direction to name (the directional-naming rule, "named by travel", is about entrances that
+     * *have* one; a ring's direction is the sign of `spin:`). Not `carousel-3d-*`, because it is not
+     * three-dimensional, and a name that promised depth would send people looking for a `tilt:`.
+     *
+     * `facing:camera` by default: upright cards read as a set of things; radially turned ones read as
+     * a dial, which is the less common ask and one keyword away.
+     */
+    {
+      name: "carousel-orbit",
+      primitive: "spatial-ring",
+      params: { plane: "screen", facing: "camera" },
+      requiresOwnSubtree: true,
+      phase: "idle"
     }
   ];
   function registerCarousel(registry) {
-    return registry.registerPrimitives(CAROUSEL_PRIMITIVES).registerPresets(CAROUSEL_PRESETS);
+    return registry.registerPrimitives(CAROUSEL_PRIMITIVES).registerPresets(CAROUSEL_PRESETS).registerPresets(STACK_PRESETS);
   }
 
   // src/effects/tween/properties.ts
@@ -14532,7 +15953,10 @@ var kuinetic = (() => {
       keywords: [...DEVICE_FRAME_KINDS]
     },
     color: { type: "color", default: "#111", cssProperty: "--kui-device-color" },
-    radius: { type: "length", default: RADIUS_UNSET, cssProperty: "--kui-device-radius" }
+    radius: { type: "length", default: RADIUS_UNSET, cssProperty: "--kui-device-radius" },
+    // Its own knob rather than a reading of `radius:`: the frame's corner and the screen's are two
+    // shapes, and the derived screen value already follows `radius:` when this is left unwritten.
+    "screen-radius": { type: "length", default: RADIUS_UNSET, cssProperty: "--kui-device-screen-radius" }
   };
   function prepareDeviceFrame(el, params) {
     const state = createAttributeLedger(el);
@@ -14545,8 +15969,9 @@ var kuinetic = (() => {
       // Exclusive ownership of the frame chrome. Its static box-model declarations are outside
       // the channel-property audit, as they are for the existing catalog. The chrome also reaches
       // into the direct media child (`object-fit: cover` etc.); that is a `requiresOwnSubtree`
-      // question, as with the other showcase widgets.
-      channels: ["frame"],
+      // question, as with the other showcase widgets. The frame kind it stamps on the host is an
+      // attribute it writes, so it claims that too.
+      channels: ["frame", attributeChannel("data-kui-device")],
       parameters: deviceFrameParams,
       // `'layout'`: the bezel's `border`+`padding` are box-model properties added once, at
       // activation, which is a real (if one-time) layout — not the "transform/opacity only" budget
@@ -14581,10 +16006,12 @@ var kuinetic = (() => {
     state.lock = ledger;
   }
   function clearContent(state) {
-    state.current?.onClose?.();
+    const closing = state.current;
+    closing?.onClose?.();
     state.current = void 0;
     state.currentOwner = void 0;
     state.slot?.replaceChildren();
+    if (closing?.opener) announceViewer(state.doc, closing.opener, false);
   }
   function onClose(state) {
     state.dialog?.classList.remove("is-open");
@@ -14603,11 +16030,9 @@ var kuinetic = (() => {
     }, state.current.reducedMotion ? 0 : state.current.duration);
   }
   function clickedOutside(state, target) {
-    const content = state.current.node;
-    if (content.classList.contains("kui-lightbox-gallery")) {
-      return !content.contains(target) || !target.matches("img") && !target.closest("button");
-    }
-    return !content.contains(target) && !target.closest("button");
+    const { node, inside } = state.current;
+    if (inside) return !inside(target);
+    return !node.contains(target) && !target.closest("button");
   }
   function forceReflow(element) {
     return element.offsetWidth;
@@ -14657,6 +16082,7 @@ var kuinetic = (() => {
     dialog.scrollTop = 0;
     forceReflow(dialog);
     dialog.classList.add("is-open");
+    if (content.opener) announceViewer(state.doc, content.opener, true);
   }
   function closeNow(state) {
     if (state.timer !== void 0) clearTimeout(state.timer);
@@ -14736,25 +16162,31 @@ var kuinetic = (() => {
   }
 
   // src/showcase/lightbox.ts
+  var DEFAULT_DURATION_MS = 280;
+  var DEFAULT_SCALE = "0.965";
+  var DEFAULT_EASE = "cubic-bezier(0.22, 1, 0.36, 1)";
   var paramsSchema = {
-    media: { type: "keyword", default: "image", cssProperty: "--kui-lightbox-media", keywords: ["image", "video"] },
+    media: { type: "keyword", default: "image", cssProperty: "--kui-lightbox-media", keywords: ["image", "video", "mixed"] },
     target: { type: "text", default: "", cssProperty: "--kui-target" },
     scope: SCOPE_PARAM,
-    scale: { type: "number", default: "0.965", cssProperty: "--kui-from-scale", finite: true, minimum: 0 },
-    duration: { type: "time", default: "280ms", cssProperty: "--kui-lightbox-duration" },
-    ease: { type: "easing", default: "cubic-bezier(0.22, 1, 0.36, 1)", cssProperty: "--kui-lightbox-ease" },
+    scale: { type: "number", default: DEFAULT_SCALE, cssProperty: "--kui-from-scale", finite: true, minimum: 0 },
+    duration: { type: "time", default: `${DEFAULT_DURATION_MS}ms`, cssProperty: "--kui-lightbox-duration" },
+    ease: { type: "easing", default: DEFAULT_EASE, cssProperty: "--kui-lightbox-ease" },
     loop: { type: "keyword", default: "true", cssProperty: "--kui-lightbox-loop", keywords: ["true", "false"] },
     aspect: { type: "keyword", default: "", cssProperty: "--kui-lightbox-aspect", keywords: ["wide", "tall", "square"] },
     caption: { type: "keyword", default: "figcaption", cssProperty: "--kui-lightbox-caption", keywords: ["figcaption", "alt", "title", "none"] }
   };
   function defaultTargets(el, media) {
-    if (el.matches("a[href]") || media === "image" && el.matches("img")) return [el];
+    if (el.matches("a[href]") || media !== "video" && el.matches("img")) return [el];
     return [...el.querySelectorAll(media === "video" ? ":scope a[href]" : ":scope a[href], :scope img")];
   }
+  function effectName(media) {
+    return media === "video" ? "video-lightbox" : "lightbox";
+  }
   function targets(el, params, ctx, media) {
     const authored = params.text("target");
     if (!authored) return defaultTargets(el, media);
-    const selector = resolveTarget(authored, ctx, media === "video" ? "video-lightbox" : "lightbox");
+    const selector = resolveTarget(authored, ctx, effectName(media));
     return selector ? queryScoped(el, ctx, selector, scopeParam(params, "self")) : [];
   }
   function imageTrigger(target) {
@@ -14765,52 +16197,137 @@ var kuinetic = (() => {
   }
   function captionFor(trigger, image, source) {
     if (source === "none") return "";
-    if (source === "alt") return image.alt;
-    if (source === "title") return (trigger.getAttribute("title") || image.title).trim();
-    return trigger.closest("figure")?.querySelector("figcaption")?.textContent?.trim() || image.alt;
+    const alt = image?.alt ?? "";
+    if (source === "alt") return alt;
+    if (source === "title") return titleOf(trigger, image);
+    return trigger.closest("figure")?.querySelector("figcaption")?.textContent?.trim() || alt;
+  }
+  function titleOf(trigger, image) {
+    return (trigger.getAttribute("title") || image?.title || "").trim();
   }
   function imageItem(trigger, captionSource) {
     const image = imageIn(trigger);
     if (!image) return null;
     const link = trigger instanceof HTMLAnchorElement ? trigger : null;
     return {
+      kind: "image",
       trigger,
       image,
       src: link?.href ?? (image.currentSrc || image.src),
       caption: captionFor(trigger, image, captionSource)
     };
   }
-  function imageItems(targets2, captionSource) {
+  function videoTitle(link, poster) {
+    return link.title || poster?.getAttribute("alt") || link.getAttribute("aria-label")?.trim() || link.textContent?.trim() || "Video";
+  }
+  function videoItem(link, captionSource) {
+    const source = resolveMediaSource(link.getAttribute("href") ?? "");
+    if (!source) return null;
+    const poster = link.querySelector("img");
+    return { kind: "video", trigger: link, source, title: videoTitle(link, poster), caption: captionFor(link, poster, captionSource) };
+  }
+  function itemFor(trigger, media, captionSource) {
+    if (media !== "image" && trigger instanceof HTMLAnchorElement) {
+      const video = videoItem(trigger, captionSource);
+      if (video || media === "video") return video;
+    }
+    return imageItem(trigger, captionSource);
+  }
+  function triggersFor(found, media) {
     const seen = /* @__PURE__ */ new Set();
-    const items = [];
-    for (const target of targets2) {
-      const trigger = imageTrigger(target);
+    const triggers = [];
+    for (const target of found) {
+      const trigger = media === "video" ? target : imageTrigger(target);
       if (seen.has(trigger)) continue;
-      const item = imageItem(trigger, captionSource);
-      if (!item) continue;
+      if (!usable(trigger, media)) continue;
       seen.add(trigger);
-      items.push(item);
+      triggers.push(trigger);
     }
-    return items;
+    return triggers;
+  }
+  function usable(trigger, media) {
+    const link = trigger instanceof HTMLAnchorElement;
+    if (media === "video") return link;
+    const image = imageIn(trigger) !== null;
+    return media === "image" ? image : link || image;
   }
   function modalOptions(params, ctx) {
     return {
-      duration: params.timing.durationMs ?? params.ms("duration", 280),
-      scale: params.text("scale", "0.965"),
-      ease: params.timing.easing ?? params.text("ease", "cubic-bezier(0.22, 1, 0.36, 1)"),
+      duration: params.timing.durationMs ?? params.ms("duration", DEFAULT_DURATION_MS),
+      scale: params.text("scale", DEFAULT_SCALE),
+      ease: params.timing.easing ?? params.text("ease", DEFAULT_EASE),
       reducedMotion: ctx.reducedMotion
     };
   }
-  function showImage(item, view, caption) {
+  function showImage(item, view) {
     view.src = item.src;
     view.alt = item.image.alt;
-    caption.textContent = item.caption;
-    caption.hidden = item.caption === "";
     const ratio = item.image.naturalWidth ? item.image.naturalHeight / item.image.naturalWidth : 1;
     view.className = ratio > 1.5 ? "is-tall" : "is-fit";
   }
+  function videoFrame(item, aspect, doc) {
+    const frame = doc.createElement("div");
+    frame.className = `kui-lightbox-frame kui-lightbox-frame--${aspect || item.source.aspect}`;
+    if (item.source.kind === "file") {
+      const video = doc.createElement("video");
+      video.src = item.source.embedUrl;
+      video.controls = true;
+      video.autoplay = true;
+      video.playsInline = true;
+      video.setAttribute("aria-label", item.title);
+      frame.append(video);
+    } else {
+      const iframe = doc.createElement("iframe");
+      iframe.src = item.source.embedUrl;
+      iframe.title = item.title;
+      iframe.allow = "autoplay; encrypted-media; picture-in-picture; fullscreen";
+      iframe.allowFullscreen = true;
+      frame.append(iframe);
+    }
+    return frame;
+  }
+  function pauseVideo(video) {
+    if (video.readyState > 0) video.pause();
+  }
+  function stopMedia(frame) {
+    const video = frame.querySelector("video");
+    if (video) {
+      pauseVideo(video);
+      video.removeAttribute("src");
+    }
+    frame.replaceChildren();
+  }
+  function leave(state, node) {
+    if (node === state.view) return;
+    const video = node.querySelector("video");
+    if (video) pauseVideo(video);
+    else node.replaceChildren();
+  }
+  function land(state, item) {
+    if (item.kind === "image") {
+      showImage(item, state.view);
+      return state.view;
+    }
+    const cached2 = state.players.get(item);
+    if (cached2) {
+      void cached2.querySelector("video").play().catch(() => {
+      });
+      return cached2;
+    }
+    const frame = videoFrame(item, state.aspect, state.figure.ownerDocument);
+    if (item.source.kind === "file") state.players.set(item, frame);
+    return frame;
+  }
   function renderGallery(state, focus) {
-    showImage(state.items[state.index], state.view, state.caption);
+    const item = state.items[state.index];
+    if (state.shown?.item !== item) {
+      if (state.shown) leave(state, state.shown.node);
+      const node = land(state, item);
+      state.shown = { item, node };
+      state.caption.textContent = item.caption;
+      state.caption.hidden = item.caption === "";
+      state.figure.replaceChildren(node, state.caption);
+    }
     state.counter.textContent = `${state.index + 1} of ${state.items.length}`;
     state.previous.disabled = !state.loop && state.index === 0;
     state.next.disabled = !state.loop && state.index === state.items.length - 1;
@@ -14828,6 +16345,7 @@ var kuinetic = (() => {
   }
   function galleryKey(state, event) {
     if (state.items.length < 2) return;
+    if (event.target.closest("video")) return;
     if (event.key === "ArrowLeft") moveGallery(state, -1, true);
     else if (event.key === "ArrowRight") moveGallery(state, 1, true);
     else if (event.key === "Home") {
@@ -14839,8 +16357,40 @@ var kuinetic = (() => {
     } else return;
     event.preventDefault();
   }
-  function galleryContent(items, initial, loop2, options) {
-    const doc = items[initial].image.ownerDocument;
+  function swipeGallery(state, box) {
+    const viewport = box.ownerDocument.defaultView?.visualViewport ?? null;
+    const zoomed = () => (viewport?.scale ?? 1) > 1.01;
+    const sync = () => {
+      box.classList.toggle("is-swipeable", !zoomed());
+    };
+    sync();
+    viewport?.addEventListener("resize", sync);
+    const stop = recognise(box, {
+      onSwipe(direction) {
+        if (direction === "left" || direction === "right") moveGallery(state, swipeStep(direction), false);
+      }
+    }, {
+      // A press on a button still clicks it: capture is taken only once the finger has moved.
+      capturePointer: "drag",
+      accept: (event) => event.pointerType !== "mouse" && !zoomed() && event.target.closest("video") === null
+    });
+    return () => {
+      stop();
+      viewport?.removeEventListener("resize", sync);
+    };
+  }
+  function closeViewer(state) {
+    state.view.removeAttribute("src");
+    for (const frame of state.players.values()) stopMedia(frame);
+    if (state.shown && state.shown.node !== state.view) stopMedia(state.shown.node);
+  }
+  function vocabulary(items) {
+    const kinds = new Set(items.map((item) => item.kind));
+    if (kinds.size > 1) return { noun: "item", label: "Media viewer" };
+    return kinds.has("video") ? { noun: "video", label: "Video viewer" } : { noun: "image", label: "Image viewer" };
+  }
+  function galleryContent(items, initial, options) {
+    const doc = items[initial].trigger.ownerDocument;
     const box = doc.createElement("div");
     box.className = "kui-lightbox-gallery";
     const figure = doc.createElement("figure");
@@ -14848,7 +16398,6 @@ var kuinetic = (() => {
     const view = doc.createElement("img");
     view.decoding = "async";
     const caption = doc.createElement("figcaption");
-    figure.append(view, caption);
     box.append(figure);
     const counter = doc.createElement("span");
     counter.className = "kui-lightbox-counter";
@@ -14858,149 +16407,244 @@ var kuinetic = (() => {
     previous.type = next.type = "button";
     previous.textContent = "\u2039";
     next.textContent = "\u203A";
-    previous.setAttribute("aria-label", "Previous image");
-    next.setAttribute("aria-label", "Next image");
+    const { noun, label } = vocabulary(items);
+    previous.setAttribute("aria-label", `Previous ${noun}`);
+    next.setAttribute("aria-label", `Next ${noun}`);
     previous.className = "kui-lightbox-prev";
     next.className = "kui-lightbox-next";
-    const state = { items, index: initial, loop: loop2, figure, view, caption, counter, previous, next };
+    const state = {
+      items,
+      index: initial,
+      loop: options.loop,
+      aspect: options.aspect,
+      figure,
+      view,
+      caption,
+      counter,
+      previous,
+      next,
+      players: /* @__PURE__ */ new Map()
+    };
     if (items.length > 1) {
       box.append(previous, next, counter);
       previous.addEventListener("click", () => clickGallery(state, -1, previous));
       next.addEventListener("click", () => clickGallery(state, 1, next));
     }
     renderGallery(state, false);
+    const unswipe = items.length > 1 ? swipeGallery(state, box) : void 0;
+    const { duration, scale, ease, reducedMotion } = options;
     return {
-      ...options,
+      duration,
+      scale,
+      ease,
+      reducedMotion,
       node: box,
-      label: "Image viewer",
-      onClose: () => view.removeAttribute("src"),
+      label,
+      // The media and the controls keep the viewer open; the empty figure around them closes it.
+      inside: (target) => box.contains(target) && target.closest("img, video, iframe, button") !== null,
+      onClose: () => {
+        unswipe?.();
+        closeViewer(state);
+      },
       onKey: (event) => galleryKey(state, event)
     };
   }
-  function stopMedia(frame) {
-    const video = frame.querySelector("video");
-    if (video) {
-      if (video.readyState > 0) video.pause();
-      video.removeAttribute("src");
-    }
-    frame.replaceChildren();
-  }
-  function videoContent(link, source, options, aspect) {
-    const doc = link.ownerDocument;
-    const frame = doc.createElement("div");
-    frame.className = `kui-lightbox-frame kui-lightbox-frame--${aspect}`;
-    const poster = link.querySelector("img");
-    const title = link.title || poster?.getAttribute("alt") || link.getAttribute("aria-label")?.trim() || link.textContent?.trim() || "Video";
-    if (source.kind === "file") {
-      const video = doc.createElement("video");
-      video.src = source.embedUrl;
-      video.controls = true;
-      video.autoplay = true;
-      video.playsInline = true;
-      video.setAttribute("aria-label", title);
-      frame.append(video);
-    } else {
-      const iframe = doc.createElement("iframe");
-      iframe.src = source.embedUrl;
-      iframe.title = title;
-      iframe.allow = "autoplay; encrypted-media; picture-in-picture; fullscreen";
-      iframe.allowFullscreen = true;
-      frame.append(iframe);
-    }
-    return { ...options, node: frame, label: "Video viewer", onClose: () => stopMedia(frame) };
-  }
   function primaryClick(event) {
     return event.button === 0 && !event.ctrlKey && !event.metaKey && !event.shiftKey && !event.altKey;
   }
-  function wireImages(items, wiring, loop2) {
+  function openAt(triggers, trigger, wiring) {
+    const items = [];
+    let initial = -1;
+    for (const candidate of triggers) {
+      const item = itemFor(candidate, wiring.media, wiring.captionSource);
+      if (!item) continue;
+      if (candidate === trigger) initial = items.length;
+      items.push(item);
+    }
+    if (initial < 0) {
+      const href = trigger.getAttribute("href") ?? "";
+      if (!wiring.warned.has(href)) wiring.ctx.warn(`${effectName(wiring.media)} cannot embed "${href}"; the link will navigate normally`);
+      wiring.warned.add(href);
+      return false;
+    }
+    wiring.shell.open({ ...galleryContent(items, initial, wiring.options), opener: trigger });
+    return true;
+  }
+  function wireTriggers(triggers, wiring) {
     const restore = [];
-    items.forEach((item, index) => {
-      const bare = item.trigger === item.image;
+    for (const trigger of triggers) {
+      const bare = trigger instanceof HTMLImageElement;
       if (bare) {
-        const attrs = createAttributeLedger(item.image);
+        const attrs = createAttributeLedger(trigger);
         attrs.set("role", "button");
         attrs.set("tabindex", "0");
-        attrs.set("aria-label", item.image.alt ? `Open larger image: ${item.image.alt}` : "Open larger image");
+        attrs.set("aria-label", trigger.alt ? `Open larger image: ${trigger.alt}` : "Open larger image");
         restore.push(() => attrs.restore());
-        item.image.addEventListener("keydown", (event) => {
+        trigger.addEventListener("keydown", (event) => {
           if (event.key !== "Enter" && event.key !== " ") return;
           event.preventDefault();
-          wiring.shell.open(galleryContent(items, index, loop2, wiring.options));
+          openAt(triggers, trigger, wiring);
         }, { signal: wiring.signal });
       }
-      item.trigger.addEventListener("click", (event) => {
+      trigger.addEventListener("click", (event) => {
         if (!primaryClick(event)) return;
-        if (!bare) event.preventDefault();
-        wiring.shell.open(galleryContent(items, index, loop2, wiring.options));
+        if (openAt(triggers, trigger, wiring)) event.preventDefault();
       }, { signal: wiring.signal });
-    });
+    }
     return restore;
   }
-  function wireVideos(targets2, wiring, aspect, ctx) {
-    const warned = /* @__PURE__ */ new Set();
-    for (const target of targets2) {
-      if (!(target instanceof HTMLAnchorElement)) continue;
-      target.addEventListener("click", (event) => {
-        if (!primaryClick(event)) return;
-        const href = target.getAttribute("href") ?? "";
-        const source = resolveMediaSource(href);
-        if (!source) {
-          if (!warned.has(href)) ctx.warn(`video-lightbox cannot embed "${href}"; the link will navigate normally`);
-          warned.add(href);
-          return;
-        }
-        event.preventDefault();
-        wiring.shell.open(videoContent(target, source, wiring.options, aspect || source.aspect));
-      }, { signal: wiring.signal });
-    }
+  function cardItem(card) {
+    const link = card.matches("a[href]") ? card : card.querySelector("a[href]");
+    return link && itemFor(link, "mixed", "figcaption") || itemFor(card, "mixed", "figcaption");
+  }
+  var OWN_CLICK = "button, input, select, textarea, label, summary, [contenteditable]";
+  function attachDeckLightbox(request) {
+    const { host, cards, doc, reducedMotion } = request;
+    const shell = acquireModalShell(doc);
+    const options = {
+      duration: DEFAULT_DURATION_MS,
+      scale: DEFAULT_SCALE,
+      ease: DEFAULT_EASE,
+      reducedMotion,
+      loop: true,
+      aspect: ""
+    };
+    const turnedAway = (card) => card.getAttribute("data-kui-ring-face") === "back";
+    const openAt2 = (pick, faceChecked = false) => {
+      const all = [...cards()];
+      const card = all.find(pick);
+      if (!card || !faceChecked && turnedAway(card)) return false;
+      const items = [];
+      let initial = -1;
+      for (const candidate of all) {
+        const item = cardItem(candidate);
+        if (!item) continue;
+        if (candidate === card) initial = items.length;
+        items.push(item);
+      }
+      if (initial < 0) return false;
+      shell.open({ ...galleryContent(items, initial, options), opener: card });
+      return true;
+    };
+    let pressed = null;
+    const cardUnder = (event) => {
+      const all = [...cards()];
+      const hits = typeof doc.elementsFromPoint === "function" ? doc.elementsFromPoint(event.clientX, event.clientY) : [];
+      for (const node of [...hits, event.target]) {
+        const card = all.find((candidate) => candidate.contains(node));
+        if (card) return turnedAway(card) ? null : { card, node };
+      }
+      return null;
+    };
+    const onPress = (event) => {
+      pressed = event.button === 0 ? cardUnder(event) : null;
+    };
+    const onClick = (event) => {
+      const press = event.detail > 0 ? pressed : null;
+      pressed = null;
+      const target = event.target;
+      if (event.defaultPrevented || !primaryClick(event) || target.closest(OWN_CLICK)) return;
+      if (press?.node.closest(OWN_CLICK)) return;
+      const opened = press ? openAt2((card) => card === press.card, true) : openAt2((card) => card.contains(target));
+      if (opened) event.preventDefault();
+    };
+    const onKeyDown = (event) => {
+      const key = event.key;
+      if (event.target !== host || key !== "Enter" && key !== " ") return;
+      if (openAt2((card) => card.getAttribute(STEP_STATE_ATTR) === "active")) event.preventDefault();
+    };
+    host.addEventListener("pointerdown", onPress);
+    host.addEventListener("click", onClick);
+    host.addEventListener("keydown", onKeyDown);
+    return () => {
+      host.removeEventListener("pointerdown", onPress);
+      host.removeEventListener("click", onClick);
+      host.removeEventListener("keydown", onKeyDown);
+      shell.release();
+    };
   }
   function prepareLightbox(el, params, ctx) {
     const media = params.text("media", "image");
-    const found = targets(el, params, ctx, media);
-    if (found.length === 0) return () => {
+    const triggers = triggersFor(targets(el, params, ctx, media), media);
+    if (triggers.length === 0) return () => {
     };
     const controller = new AbortController();
     const shell = acquireModalShell(ctx.doc);
-    const wiring = { shell, options: modalOptions(params, ctx), signal: controller.signal };
-    let restore = [];
-    if (media === "video") {
-      wireVideos(found, wiring, params.text("aspect"), ctx);
-    } else {
-      const items = imageItems(found, params.text("caption", "figcaption"));
-      restore = wireImages(items, wiring, params.is("loop"));
-    }
+    const options = { ...modalOptions(params, ctx), loop: params.is("loop"), aspect: params.text("aspect") };
+    const restore = wireTriggers(triggers, {
+      shell,
+      options,
+      signal: controller.signal,
+      media,
+      captionSource: params.text("caption", "figcaption"),
+      ctx,
+      warned: /* @__PURE__ */ new Set()
+    });
     return continuousSetup(() => {
       controller.abort();
       for (const undo of restore) undo();
       shell.release();
     });
   }
+  var TRIGGERS_CHANNEL = "lightbox:triggers";
   var LIGHTBOX_PRIMITIVE = widgetPrimitive(
     "lightbox",
-    { channels: ["widget"], parameters: paramsSchema, perfClass: "paint" },
+    { channels: [TRIGGERS_CHANNEL], parameters: paramsSchema, perfClass: "paint" },
     withTimingContract("lightbox", { honours: ["duration", "ease"], because: "the dialog opens immediately, so it has no delay phase" }, deferPrepare(prepareLightbox))
   );
   var LIGHTBOX_PRESETS = [
     { name: "lightbox", primitive: "lightbox", params: { media: "image" } },
-    { name: "video-lightbox", primitive: "lightbox", params: { media: "video" } }
+    // A video row has never shown captions; `caption:figcaption` opts one in.
+    { name: "video-lightbox", primitive: "lightbox", params: { media: "video", caption: "none" } }
   ];
 
   // src/showcase/compare.ts
   var COMPARE_AXES = ["x", "y"];
   var COMPARE_AXIS_ATTR = "data-kui-compare-axis";
+  var COMPARE_DIVIDERS_ATTR = "data-kui-compare-dividers";
   var compareParams = {
     position: {
       type: "percentage",
       default: "50%",
       cssProperty: "--kui-compare"
     },
+    /*
+     * Where each divider of a three-or-more frame starts, as one quoted, space-separated list —
+     * `positions:'20% 45% 80%'` — because a comma would start a new step, not a new value. Default
+     * (empty) is an even split. `position:` stays the two-media spelling: it is a single percentage
+     * and every existing page relies on it validating as one.
+     */
+    positions: { type: "text", default: "", cssProperty: "--kui-compare-positions" },
     axis: {
       type: "keyword",
       default: "x",
       cssProperty: "--kui-compare-axis",
       keywords: [...COMPARE_AXES]
-    }
+    },
+    /*
+     * The auto-drag, in `background-media`'s words (`src/effects/catalog/media.ts`): `always` starts
+     * at load, `in-view` the first time the slider is on screen, `never` (default) not at all.
+     *
+     * Not `on:load` / `on:enter`, because the activation grammar already has a job here: it is what
+     * *builds* the slider, and a widget accepts only `on:load` (`src/showcase/shared.ts`) so the
+     * control exists before a keyboard user tabs to it. `on:enter` would defer the widget, not the
+     * motion — so the motion's start is its own parameter.
+     */
+    autoplay: {
+      type: "keyword",
+      default: "never",
+      cssProperty: "--kui-compare-autoplay",
+      keywords: ["never", "in-view", "always"]
+    },
+    /** One edge-to-edge sweep. The positional spelling (`compare 4s`) means the same thing. */
+    duration: { type: "time", default: "3s", cssProperty: "--kui-compare-duration" },
+    /** Head toward 0% first instead of 100%. */
+    reverse: { type: "keyword", default: "false", cssProperty: "--kui-compare-reverse", keywords: ["true", "false"] },
+    /** Sweep back and forth until someone takes the handle, instead of one pass. */
+    loop: { type: "keyword", default: "false", cssProperty: "--kui-compare-loop", keywords: ["true", "false"] }
   };
+  var MIN_SWEEP_MS = 250;
+  var MAX_FRAME_MS2 = 100;
   var VERTICAL_KEY_DELTA = { ArrowUp: -1, ArrowDown: 1 };
   function getMediaName(item, fallback) {
     const alt = item.localName === "picture" ? item.querySelector("img")?.getAttribute("alt") : item.getAttribute("alt");
@@ -15016,76 +16660,402 @@ var kuinetic = (() => {
     }
     return "Compare";
   }
-  function createCompareElements(doc, label, initialPercent, axis) {
+  function createRange(doc, label, value, axis) {
     const range = doc.createElement("input");
     range.type = "range";
     range.className = "kui-compare-range";
     range.min = "0";
     range.max = "100";
     range.step = "1";
-    range.value = String(initialPercent);
-    range.setAttribute("aria-label", label);
-    range.setAttribute("aria-valuetext", `${initialPercent}% after`);
+    range.value = String(value);
+    range.setAttribute("aria-label", label.name);
+    range.setAttribute("aria-valuetext", label.valueText);
     if (axis === "y") range.setAttribute("aria-orientation", "vertical");
+    return range;
+  }
+  function createHandle(doc) {
     const handle = doc.createElement("span");
     handle.className = "kui-compare-handle";
     handle.setAttribute("aria-hidden", "true");
-    return { range, handle };
+    return handle;
   }
-  function prepareCompare(el, params, ctx) {
-    const media = Array.from(el.querySelectorAll(":scope > :is(img, picture, video)"));
-    if (media.length < 2) {
-      ctx.warn("compare requires at least two media children (img, picture, or video)");
+  function verticalKeys(range, axis, onInput) {
+    return (event) => {
+      const delta = VERTICAL_KEY_DELTA[event.key];
+      if (axis !== "y" || delta === void 0) return;
+      event.preventDefault();
+      if (delta < 0) range.stepDown();
+      else range.stepUp();
+      onInput();
+    };
+  }
+  function sweepPercent(phase) {
+    return 50 - 50 * Math.cos(Math.PI * phase / 100);
+  }
+  function startPhase(percent, reverse) {
+    const outbound = 100 / Math.PI * Math.acos(1 - percent / 50);
+    return reverse ? 200 - outbound : outbound;
+  }
+  function sweepDuration(params, ctx) {
+    const authored = params.timing.durationMs ?? params.ms("duration", 3e3);
+    if (authored >= MIN_SWEEP_MS) return authored;
+    ctx.warn(`compare duration: minimum is ${MIN_SWEEP_MS}ms; clamped to ${MIN_SWEEP_MS}ms`);
+    return MIN_SWEEP_MS;
+  }
+  function bindAutoDrag(options) {
+    const { host, grab, ctx, mode, loop: loop2 } = options;
+    if (mode === "never" || ctx.reducedMotion) return () => {
+    };
+    const run = runAutoDrag(options, () => stop());
+    let observer = null;
+    if (mode === "in-view" || loop2) {
+      observer = observeOnscreen(ctx.win, host, run.setOnscreen);
     }
-    const axis = params.text("axis", "x");
-    const attrs = createAttributeLedger(el);
-    attrs.set(COMPARE_AXIS_ATTR, axis);
+    const stop = () => {
+      run.stop();
+      observer?.disconnect();
+      observer = null;
+      for (const target of grab) {
+        target.removeEventListener("pointerdown", stop);
+        target.removeEventListener("focus", stop);
+      }
+    };
+    for (const target of grab) {
+      target.addEventListener("pointerdown", stop);
+      target.addEventListener("focus", stop);
+    }
+    run.setOnscreen(mode === "always" || observer === null);
+    return stop;
+  }
+  function sweepPlan(options) {
+    const { write, homes, bounds, durationMs, reverse, loop: loop2 } = options;
+    const order = homes.map((_, index) => index);
+    if (reverse) order.reverse();
+    const cycleMs = 2 * durationMs;
+    const totalMs = cycleMs * order.length;
+    const phases = homes.map((home, index) => {
+      const [lo, hi] = bounds[index];
+      return hi > lo ? startPhase(100 * (home - lo) / (hi - lo), reverse) : 0;
+    });
+    const park = (slot2) => write(order[slot2], homes[order[slot2]]);
+    let slot = 0;
+    return {
+      show(elapsed) {
+        if (!loop2 && elapsed >= totalMs) {
+          park(slot);
+          return false;
+        }
+        const into = elapsed % totalMs;
+        const next = Math.floor(into / cycleMs);
+        if (next !== slot) park(slot);
+        slot = next;
+        const index = order[slot];
+        const [lo, hi] = bounds[index];
+        const phase = phases[index] + 100 * (into - slot * cycleMs) / durationMs;
+        write(index, lo + (hi - lo) * sweepPercent(phase) / 100);
+        return true;
+      }
+    };
+  }
+  function observeOnscreen(win, host, onChange) {
+    const Observer = win.IntersectionObserver;
+    if (!Observer) return null;
+    const observer = new Observer((entries) => {
+      for (const entry of entries) onChange(entry.isIntersecting);
+    });
+    observer.observe(host);
+    return observer;
+  }
+  function runAutoDrag(options, finish) {
+    const win = options.ctx.win;
+    const plan = sweepPlan(options);
+    let elapsed = 0;
+    let lastFrameAt = null;
+    let frame = 0;
+    let done = false;
+    let onscreen = false;
+    const update = () => {
+      const active = !done && onscreen;
+      if (active && frame === 0) {
+        lastFrameAt = null;
+        frame = win.requestAnimationFrame(tick);
+      } else if (!active && frame !== 0) {
+        win.cancelAnimationFrame(frame);
+        frame = 0;
+      }
+    };
+    function tick(now) {
+      frame = 0;
+      if (lastFrameAt !== null) elapsed += Math.min(now - lastFrameAt, MAX_FRAME_MS2);
+      lastFrameAt = now;
+      if (plan.show(elapsed)) frame = win.requestAnimationFrame(tick);
+      else finish();
+    }
+    return {
+      setOnscreen(next) {
+        onscreen = next;
+        update();
+      },
+      stop() {
+        done = true;
+        update();
+      }
+    };
+  }
+  function buildPair({ el, media, params, ctx, axis, timing: timing3 }) {
     const initialPercent = Math.round(params.num("position", 0.5) * 100);
     const style = createStyleLedger(el);
     style.set("--kui-compare", params.text("position", "50%"));
-    const { range, handle } = createCompareElements(
-      el.ownerDocument,
-      resolveCompareLabel(el, media),
+    const doc = el.ownerDocument;
+    const range = createRange(
+      doc,
+      { name: resolveCompareLabel(el, media), valueText: `${initialPercent}% after` },
       initialPercent,
       axis
     );
+    const handle = createHandle(doc);
     const onInput = () => {
       const val = range.value;
       style.set("--kui-compare", `${val}%`);
       range.setAttribute("aria-valuetext", `${val}% after`);
     };
-    const onKeyDown = (event) => {
-      const delta = VERTICAL_KEY_DELTA[event.key];
-      if (axis !== "y" || delta === void 0) return;
-      event.preventDefault();
-      if (delta < 0) range.stepDown();
-      else range.stepUp();
-      onInput();
+    const writeAuto = (_index, percent) => {
+      range.value = String(Math.round(percent));
+      style.set("--kui-compare", `${Number(percent.toFixed(3))}%`);
+      range.setAttribute("aria-valuetext", `${range.value}% after`);
     };
+    const onKeyDown = verticalKeys(range, axis, onInput);
     range.addEventListener("input", onInput);
     range.addEventListener("keydown", onKeyDown);
     el.appendChild(range);
     el.appendChild(handle);
-    return continuousSetup(() => {
+    const stopAutoDrag = bindAutoDrag({
+      ...timing3,
+      host: el,
+      grab: [range],
+      ctx,
+      write: writeAuto,
+      homes: [params.num("position", 0.5) * 100],
+      bounds: [[0, 100]]
+    });
+    return () => {
+      stopAutoDrag();
       range.removeEventListener("input", onInput);
       range.removeEventListener("keydown", onKeyDown);
       range.remove();
       handle.remove();
-      attrs.restore();
       style.restore();
+    };
+  }
+  var PERCENT_TOKEN = /^(\d+(?:\.\d+)?)%$/;
+  function resolvePositions(authored, count, warn) {
+    const even = Array.from({ length: count }, (_, k) => Math.round(100 * (k + 1) / (count + 1)));
+    if (authored.trim() === "") return even;
+    const tokens = authored.trim().split(/\s+/);
+    const values = tokens.map((token) => PERCENT_TOKEN.exec(token)?.[1]);
+    const numbers = values.map(Number);
+    const usable2 = tokens.length === count && values.every((value) => value !== void 0) && numbers.every((value, k) => value <= 100 && (k === 0 || value >= numbers[k - 1]));
+    if (usable2) return numbers.map(Math.round);
+    const example = even.map((value) => String(value) + "%").join(" ");
+    warn(
+      `compare positions: expected ${count} ascending percentages between 0% and 100% for ${count + 1} media (e.g. positions:'${example}'); using an even split`
+    );
+    return even;
+  }
+  function buildMulti({ el, media, params, ctx, axis, timing: timing3 }) {
+    if (params.text("position", "50%") !== "50%") {
+      ctx.warn(`compare position: sets the one divider of two media; with ${media.length}, use positions:`);
+    }
+    const positions = resolvePositions(params.text("positions", ""), media.length - 1, ctx.warn);
+    const homes = [...positions];
+    const attrs = createAttributeLedger(el);
+    attrs.set(COMPARE_DIVIDERS_ATTR, String(homes.length));
+    const dividers = createDividers(el, media, axis, positions);
+    const surface = bindSurface(el, axis, dividers);
+    const stopAutoDrag = bindAutoDrag({
+      ...timing3,
+      host: el,
+      grab: [surface.node, ...dividers.ranges],
+      ctx,
+      write: dividers.render,
+      homes,
+      bounds: homes.map((_, k) => boundsOf(homes, k))
+    });
+    return () => {
+      stopAutoDrag();
+      surface.destroy();
+      dividers.destroy();
+      attrs.restore();
+    };
+  }
+  function boundsOf(positions, k) {
+    return [k > 0 ? positions[k - 1] : 0, k < positions.length - 1 ? positions[k + 1] : 100];
+  }
+  function dividerLabel(el, media, k) {
+    const count = media.length - 1;
+    const authored = el.getAttribute("aria-label")?.trim();
+    if (authored) return `${authored}: divider ${k + 1} of ${count}`;
+    const before = getMediaName(media[k], `Image ${k + 1}`);
+    const after = getMediaName(media[k + 1], `Image ${k + 2}`);
+    return `Divider ${k + 1} of ${count}: ${before} / ${after}`;
+  }
+  function createDividers(el, media, axis, positions) {
+    const doc = el.ownerDocument;
+    const count = positions.length;
+    const clip = axis === "y" ? "inset(var(--kui-compare) 0 0 0)" : "inset(0 0 0 var(--kui-compare))";
+    const mediaStyles = media.slice(1).map((item) => createStyleLedger(item));
+    for (const ledger of mediaStyles) ledger.set("clip-path", clip);
+    const ranges = [];
+    const handles = [];
+    const cleanups = [];
+    const render = (k, shown) => {
+      positions[k] = Math.round(shown);
+      const css = `${Number(shown.toFixed(3))}%`;
+      handles[k].style.setProperty("--kui-compare", css);
+      mediaStyles[k].set("--kui-compare", css);
+      ranges[k].value = String(positions[k]);
+      ranges[k].setAttribute("aria-valuetext", `${positions[k]}%`);
+      if (k > 0) ranges[k - 1].max = String(positions[k]);
+      if (k < count - 1) ranges[k + 1].min = String(positions[k]);
+    };
+    for (let k = 0; k < count; k++) {
+      const range = createRange(doc, { name: dividerLabel(el, media, k), valueText: `${positions[k]}%` }, positions[k], axis);
+      const handle = createHandle(doc);
+      ranges.push(range);
+      handles.push(handle);
+      el.append(range, handle);
+      const onInput = () => render(k, Number(range.value));
+      const onKeyDown = verticalKeys(range, axis, onInput);
+      range.addEventListener("input", onInput);
+      range.addEventListener("keydown", onKeyDown);
+      cleanups.push(() => {
+        range.removeEventListener("input", onInput);
+        range.removeEventListener("keydown", onKeyDown);
+      });
+    }
+    for (let k = 0; k < count; k++) {
+      const [lo, hi] = boundsOf(positions, k);
+      ranges[k].min = String(lo);
+      ranges[k].max = String(hi);
+      render(k, positions[k]);
+    }
+    return {
+      ranges,
+      render,
+      moveTo(k, percent) {
+        const [lo, hi] = boundsOf(positions, k);
+        render(k, Math.min(hi, Math.max(lo, percent)));
+      },
+      nearest: (percent) => nearestDivider(positions, percent),
+      destroy() {
+        for (const cleanup of cleanups) cleanup();
+        for (const node of [...ranges, ...handles]) node.remove();
+        for (const ledger of mediaStyles) ledger.restore();
+      }
+    };
+  }
+  function nearestDivider(positions, percent) {
+    let best = 0;
+    for (let k = 1; k < positions.length; k++) {
+      const distance3 = Math.abs(positions[k] - percent);
+      const bestDistance = Math.abs(positions[best] - percent);
+      if (distance3 < bestDistance || distance3 === bestDistance && percent >= positions[k]) best = k;
+    }
+    return best;
+  }
+  function bindSurface(el, axis, dividers) {
+    const surface = el.ownerDocument.createElement("div");
+    surface.className = "kui-compare-surface";
+    surface.setAttribute("aria-hidden", "true");
+    el.appendChild(surface);
+    let dragging = -1;
+    let pointerId = null;
+    const percentAt = (event) => {
+      const rect = el.getBoundingClientRect();
+      const along = axis === "y" ? event.clientY - rect.top : event.clientX - rect.left;
+      const size = axis === "y" ? rect.height : rect.width;
+      return size > 0 ? 100 * along / size : 0;
+    };
+    const onPointerDown = (event) => {
+      if (event.button > 0 || pointerId !== null) return;
+      pointerId = event.pointerId;
+      const percent = percentAt(event);
+      dragging = dividers.nearest(percent);
+      event.preventDefault();
+      surface.setPointerCapture?.(event.pointerId);
+      dividers.ranges[dragging].focus({ preventScroll: true });
+      dividers.moveTo(dragging, percent);
+    };
+    const onPointerMove = (event) => {
+      if (dragging >= 0 && event.pointerId === pointerId) dividers.moveTo(dragging, percentAt(event));
+    };
+    const onPointerUp = (event) => {
+      if (event.pointerId !== pointerId) return;
+      dragging = -1;
+      pointerId = null;
+    };
+    const onLostCapture = (event) => {
+      if (event.target !== surface) return;
+      onPointerUp(event);
+    };
+    const listeners = [
+      ["pointerdown", onPointerDown],
+      ["pointermove", onPointerMove],
+      ["pointerup", onPointerUp],
+      ["pointercancel", onPointerUp],
+      ["lostpointercapture", onLostCapture]
+    ];
+    for (const [type, listener] of listeners) surface.addEventListener(type, listener);
+    return {
+      node: surface,
+      destroy() {
+        for (const [type, listener] of listeners) surface.removeEventListener(type, listener);
+        surface.remove();
+      }
+    };
+  }
+  function prepareCompare(el, params, ctx) {
+    const media = Array.from(el.querySelectorAll(":scope > :is(img, picture, video)"));
+    if (media.length < 2) {
+      ctx.warn("compare requires at least two media children (img, picture, or video)");
+    }
+    const axis = params.text("axis", "x");
+    const attrs = createAttributeLedger(el);
+    attrs.set(COMPARE_AXIS_ATTR, axis);
+    const build2 = media.length > 2 ? buildMulti : buildPair;
+    const teardown = build2({
+      el,
+      media,
+      params,
+      ctx,
+      axis,
+      timing: {
+        mode: params.text("autoplay", "never"),
+        durationMs: sweepDuration(params, ctx),
+        reverse: params.is("reverse"),
+        loop: params.is("loop")
+      }
+    });
+    return continuousSetup(() => {
+      teardown();
+      attrs.restore();
     });
   }
   var COMPARE_PRIMITIVE = widgetPrimitive(
     "compare",
     {
-      channels: ["clip", "widget"],
+      // The layers it stacks and the range, handle and surface it appends; the axis and divider
+      // markers it writes on the host. Not `clip`: its `clip-path` is on the after layer, never the
+      // host, so a `wipe-up` revealing the whole slider is not a fight over one property.
+      channels: [SUBTREE_CHANNEL, attributeChannel(COMPARE_AXIS_ATTR), attributeChannel(COMPARE_DIVIDERS_ATTR)],
       parameters: compareParams,
       perfClass: "paint"
     },
     withTimingContract(
       "compare",
       {
-        because: "it builds an interactive before/after slider; there is no motion to time"
+        honours: ["duration"],
+        because: "its only motion is the autoplay: sweep, which starts on autoplay: rather than after a delay and eases into each edge on its own curve"
       },
       deferPrepare(prepareCompare)
     )
@@ -15259,7 +17229,8 @@ var kuinetic = (() => {
   var HOTSPOTS_PRIMITIVE = widgetPrimitive(
     "hotspots",
     {
-      channels: ["widget"],
+      // The marker buttons it appends, placed in percent of the host, and the marker style it writes.
+      channels: [SUBTREE_CHANNEL, attributeChannel("data-kui-hotspot-marker")],
       parameters: hotspotsParams,
       perfClass: "layout"
     },
@@ -15463,7 +17434,7 @@ var kuinetic = (() => {
       hovered = true;
       update();
     };
-    const leave = () => {
+    const leave2 = () => {
       hovered = false;
       update();
     };
@@ -15480,7 +17451,7 @@ var kuinetic = (() => {
       update();
     };
     el.addEventListener("pointerenter", enter);
-    el.addEventListener("pointerleave", leave);
+    el.addEventListener("pointerleave", leave2);
     el.addEventListener("focusin", focus);
     el.addEventListener("focusout", blur);
     ctx.doc.addEventListener("visibilitychange", update);
@@ -15489,7 +17460,7 @@ var kuinetic = (() => {
     return () => {
       if (timer !== null) clearTimeout(timer);
       el.removeEventListener("pointerenter", enter);
-      el.removeEventListener("pointerleave", leave);
+      el.removeEventListener("pointerleave", leave2);
       el.removeEventListener("focusin", focus);
       el.removeEventListener("focusout", blur);
       ctx.doc.removeEventListener("visibilitychange", update);
@@ -15555,7 +17526,6 @@ var kuinetic = (() => {
       el,
       params,
       ctx,
-      scope,
       resolveSteps,
       name: "slideshow",
       clickFallback: false,
@@ -15583,7 +17553,19 @@ var kuinetic = (() => {
   }
   var SLIDESHOW_PRIMITIVE = widgetPrimitive(
     "slideshow",
-    { channels: ["widget"], parameters: slideshowParams, perfClass: "layout" },
+    // The controls it inserts, then what it writes on the host: `createStepIndex`'s `data-kui-step`,
+    // as every step deck does, and `decorateHost`'s mode and carousel roles.
+    {
+      channels: [
+        SUBTREE_CHANNEL,
+        attributeChannel("data-kui-step"),
+        attributeChannel(SLIDE_MODE_ATTR),
+        attributeChannel("role"),
+        attributeChannel("aria-roledescription")
+      ],
+      parameters: slideshowParams,
+      perfClass: "layout"
+    },
     withTimingContract(
       "slideshow",
       { honours: ["duration", "ease"], because: "the slideshow has no delayed start" },
@@ -15745,7 +17727,14 @@ var kuinetic = (() => {
   }
   var SCROLL_STORY_PRIMITIVE = widgetPrimitive(
     "scroll-story",
-    { channels: ["widget"], parameters: scrollStoryParams, perfClass: "layout" },
+    // Its stylesheet lays out the host's first and last child, so nothing else may insert one. The
+    // step index on the host (`applyStep`) is claimed so a `carousel` or `scroll-progress` beside it
+    // is refused rather than left to overwrite it.
+    {
+      channels: [SUBTREE_CHANNEL, attributeChannel("data-kui-step"), attributeChannel(STORY_SIDE_ATTR)],
+      parameters: scrollStoryParams,
+      perfClass: "layout"
+    },
     withTimingContract(
       "scroll-story",
       { because: "scroll position" },
@@ -15848,7 +17837,8 @@ var kuinetic = (() => {
   }
   var SLOW_MO_PRIMITIVE = widgetPrimitive(
     "slow-mo",
-    { channels: ["widget"], parameters: slowMoParams, perfClass: "compositor" },
+    // The toggle it prepends into the host, and the time scale it writes there.
+    { channels: [SUBTREE_CHANNEL, attributeChannel(TIME_SCALE_ATTR)], parameters: slowMoParams, perfClass: "compositor" },
     withTimingContract(
       "slow-mo",
       { because: "it changes playback rate rather than defining an animation timeline" },
@@ -15877,6 +17867,7 @@ var kuinetic = (() => {
     ...SLOW_MO_PRESETS
   ];
   function registerShowcase(target) {
+    provideDeckViewer(attachDeckLightbox);
     return registerInto(target, SHOWCASE_PRIMITIVES, SHOWCASE_PRESETS, "Showcase");
   }
 
@@ -15905,6 +17896,16 @@ var kuinetic = (() => {
     return new Animator({ registry: createRegistry(), ...options });
   }
   var src_default = kuinetic;
+  var catalog;
+  function describe2(name, options = {}) {
+    return describeEffect(options.registry ?? (catalog ??= createRegistry()), name, options.notes);
+  }
+  function describeSteps(value, options = {}) {
+    return describeAttribute(options.registry ?? (catalog ??= createRegistry()), value, options.notes);
+  }
+  function describeElement(value, options = {}) {
+    return describeElementAttribute(options.registry ?? (catalog ??= createRegistry()), value, options.notes);
+  }
   return __toCommonJS(src_exports);
 })();