kuinetic 0.2.0 → 0.2.2

package/dist/kuinetic.css

@@ -2523,7 +2523,7 @@
     padding-block: var(--kui-mask-bleed, 0px);
     margin-block: calc(-1 * var(--kui-mask-bleed, 0px));
   }
-  [data-kui-state=finished] [data-kui-split-fx] .kui-split-line {
+  [data-kui-state=finished] > [data-kui-split-fx] .kui-split-line {
     animation-name: none;
     opacity: 1;
     clip-path: none;

package/dist/kuinetic.js

@@ -589,18 +589,25 @@ var kuinetic = (() => {
     if (typeof IntersectionObserver === "undefined") return void 0;
     return (callback, init) => new IntersectionObserver(callback, init);
   }
+  function onlyBoundLate(name, claims) {
+    const authorising = authorisingActivations(name);
+    if (!authorising.includes("enter")) return false;
+    const suits = (claim2) => authorising.some((named) => claim2.supported.includes(named));
+    if (!claims.some((claim2) => claim2.entrance && suits(claim2))) return false;
+    return claims.every((claim2) => suits(claim2) || claim2.supported.includes("load"));
+  }
   function warnAboutActivation(request) {
     warnUnsupported(request);
     warnUnknownEvents(request);
   }
-  function warnUnsupported({ el, spec, supported, reporter }) {
-    if (supported.length === 0) return;
+  function warnUnsupported({ el, spec, supported, claims, reporter }) {
+    const declaredAny = supported.length > 0 || (claims?.some((claim2) => claim2.supported.length > 0) ?? false);
+    if (!declaredAny) return;
+    const shared = supported.length > 0 ? supported.join(", ") : "none in common across the composed effects";
     for (const name of spec.names) {
       if (authorisingActivations(name).some((named) => supported.includes(named))) continue;
-      reporter.warn(
-        `activation "${name}" is not supported by this effect (supports: ${supported.join(", ")})`,
-        el
-      );
+      if (claims && onlyBoundLate(name, claims)) continue;
+      reporter.warn(`activation "${name}" is not supported by this effect (supports: ${shared})`, el);
     }
   }
   function warnUnknownEvents({ el, spec, reporter }) {
@@ -3427,6 +3434,7 @@ var kuinetic = (() => {
       unknown,
       reducedMotion: "shorten",
       supportedActivations: [],
+      activationClaims: [],
       supportedTimelines: [],
       channels: [],
       warnings
@@ -3560,6 +3568,10 @@ var kuinetic = (() => {
       plan.fxNames.push(preset.name);
       plan.reducedMotion = strictestPolicy(plan.reducedMotion, primitive.reducedMotion);
       activations = intersect(activations, primitive.supportedActivations);
+      plan.activationClaims.push({
+        supported: primitive.supportedActivations,
+        entrance: phaseOf(entry) === "entrance"
+      });
       timelines = intersect(timelines, primitive.supportedTimelines);
       for (const channel of channelsFor(entry)) channels.add(channel);
       warnUnsupportedTimeline(preset.name, primitive.supportedTimelines, timeline, warnings);
@@ -5125,11 +5137,20 @@ var kuinetic = (() => {
     const windowRoot = windowScrollRoot(win);
     return (el) => {
       for (let node = el.parentElement; node; node = node.parentElement) {
+        if (scrollsTheViewport(node, win)) return windowRoot;
         if (isScrollable(node)) return elementScrollRoot(node, win);
       }
       return windowRoot;
     };
   }
+  function scrollsTheViewport(node, win) {
+    const root = win.document.documentElement;
+    if (node === root) return true;
+    if (node !== win.document.body) return false;
+    const rootStyle = win.getComputedStyle(root);
+    return !CLIPPING_OVERFLOW.has(rootStyle.overflowX) && !CLIPPING_OVERFLOW.has(rootStyle.overflowY);
+  }
+  var CLIPPING_OVERFLOW = /* @__PURE__ */ new Set(["auto", "scroll", "overlay", "hidden", "clip"]);
   var SCROLLABLE_OVERFLOW = /* @__PURE__ */ new Set(["auto", "scroll", "overlay"]);
   function defaultIsScrollable(win) {
     return (el) => {
@@ -5632,6 +5653,7 @@ var kuinetic = (() => {
         el,
         spec: resolveActivationSpec(config.activation),
         supported: plan.supportedActivations,
+        claims: plan.activationClaims,
         reporter: this.reporter
       });
       return config.activation;
@@ -11146,6 +11168,10 @@ var kuinetic = (() => {
     let active = false;
     let longPressTimer = null;
     let longPressFired = false;
+    let captured = false;
+    let pointerId = null;
+    let lastHandled = null;
+    let documentListening = null;
     function sampleOf(event) {
       return { x: event.clientX, y: event.clientY, time: deps.now() };
     }
@@ -11163,7 +11189,9 @@ var kuinetic = (() => {
       samples = [origin];
       active = false;
       longPressFired = false;
-      if (capturePointer) el.setPointerCapture?.(event.pointerId);
+      pointerId = event.pointerId;
+      captured = capturePointer === true && takeCapture(event.pointerId);
+      if (!captured) listenOnDocument();
       if (longPressMs > 0) {
         longPressTimer = deps.setTimer(() => {
           longPressFired = true;
@@ -11171,8 +11199,43 @@ var kuinetic = (() => {
         }, longPressMs);
       }
     }
+    function takeCapture(id) {
+      if (typeof el.setPointerCapture !== "function") return false;
+      try {
+        el.setPointerCapture(id);
+        return true;
+      } catch {
+        return false;
+      }
+    }
+    function captureOnDrag(event) {
+      if (capturePointer !== "drag") return;
+      captured = takeCapture(event.pointerId);
+      if (captured) stopListeningOnDocument();
+    }
+    function listenOnDocument() {
+      const doc = el.ownerDocument;
+      if (!doc || documentListening) return;
+      documentListening = doc;
+      doc.addEventListener("pointermove", onMove, { passive: true });
+      doc.addEventListener("pointerup", onUp, { passive: true });
+      doc.addEventListener("pointercancel", onUp, { passive: true });
+    }
+    function stopListeningOnDocument() {
+      const doc = documentListening;
+      if (!doc) return;
+      documentListening = null;
+      doc.removeEventListener("pointermove", onMove);
+      doc.removeEventListener("pointerup", onUp);
+      doc.removeEventListener("pointercancel", onUp);
+    }
+    function firstHearing(event) {
+      if (event === lastHandled) return false;
+      lastHandled = event;
+      return true;
+    }
     function onMove(event) {
-      if (!origin) return;
+      if (!origin || !firstHearing(event)) return;
       const sample = sampleOf(event);
       samples.push(sample);
       if (samples.length > MAX_SAMPLES2) samples.shift();
@@ -11181,17 +11244,17 @@ var kuinetic = (() => {
       if (!active) {
         active = true;
         clearLongPress();
+        captureOnDrag(event);
         handlers.onStart?.(origin);
       }
       handlers.onMove?.(vector, sample);
     }
-    function onUp(event) {
-      clearLongPress();
-      if (capturePointer) el.releasePointerCapture?.(event.pointerId);
-      if (!origin) return;
-      const sample = sampleOf(event);
-      samples.push(sample);
-      const vector = vectorNow(sample);
+    function releaseCapture(id) {
+      if (captured) el.releasePointerCapture?.(id);
+      captured = false;
+      pointerId = null;
+    }
+    function reportEnd(vector, sample) {
       if (active) {
         handlers.onEnd?.(vector, sample);
         const direction = swipeDirection(vector, swipeVelocity);
@@ -11199,21 +11262,38 @@ var kuinetic = (() => {
       } else if (longPressFired) {
         handlers.onEnd?.(vector, sample);
       }
+    }
+    function onUp(event) {
+      clearLongPress();
+      stopListeningOnDocument();
+      releaseCapture(event.pointerId);
+      if (!origin) return;
+      const sample = sampleOf(event);
+      samples.push(sample);
+      reportEnd(vectorNow(sample), sample);
       origin = null;
       active = false;
       longPressFired = false;
       samples = [];
     }
+    function onLostCapture(event) {
+      if (!captured || event.pointerId !== pointerId) return;
+      captured = false;
+      onUp(event);
+    }
     el.addEventListener("pointerdown", onDown);
     el.addEventListener("pointermove", onMove, { passive: true });
     el.addEventListener("pointerup", onUp, { passive: true });
     el.addEventListener("pointercancel", onUp, { passive: true });
+    el.addEventListener("lostpointercapture", onLostCapture, { passive: true });
     return () => {
       clearLongPress();
+      stopListeningOnDocument();
       el.removeEventListener("pointerdown", onDown);
       el.removeEventListener("pointermove", onMove);
       el.removeEventListener("pointerup", onUp);
       el.removeEventListener("pointercancel", onUp);
+      el.removeEventListener("lostpointercapture", onLostCapture);
     };
   }
   function defaultGestureDeps() {
@@ -11362,11 +11442,12 @@ var kuinetic = (() => {
       {
         axis: params.text("axis", "both"),
         swipeVelocity: params.num("velocity", 300),
-        // This primitive publishes an attribute and moves nothing, so it has no reason to hold the
-        // pointer — and holding it retargets the following `click` at this element, which silently
-        // breaks every interactive child. A `swipe-x` on a carousel shell killed its own dots and
-        // buttons that way. See `capturePointer` in `core/gesture.ts`.
-        capturePointer: false
+        // 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
+        // `swipe-x` on a carousel shell killed its own dots and buttons). But a flick that leaves a
+        // small element never delivers `pointerup` to it unless captured, so capture only once the
+        // drag starts. See `capturePointer` in `core/gesture.ts`.
+        capturePointer: "drag"
       }
     );
     return () => {
@@ -14663,7 +14744,8 @@ var kuinetic = (() => {
     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" },
     loop: { type: "keyword", default: "true", cssProperty: "--kui-lightbox-loop", keywords: ["true", "false"] },
-    aspect: { type: "keyword", default: "", cssProperty: "--kui-lightbox-aspect", keywords: ["wide", "tall", "square"] }
+    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];
@@ -14681,25 +14763,30 @@ var kuinetic = (() => {
   function imageIn(trigger) {
     return trigger instanceof HTMLImageElement ? trigger : trigger.querySelector("img");
   }
-  function imageItem(trigger) {
+  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;
+  }
+  function imageItem(trigger, captionSource) {
     const image = imageIn(trigger);
     if (!image) return null;
     const link = trigger instanceof HTMLAnchorElement ? trigger : null;
-    const caption = trigger.closest("figure")?.querySelector("figcaption")?.textContent?.trim();
     return {
       trigger,
       image,
       src: link?.href ?? (image.currentSrc || image.src),
-      caption: caption || image.alt
+      caption: captionFor(trigger, image, captionSource)
     };
   }
-  function imageItems(targets2) {
+  function imageItems(targets2, captionSource) {
     const seen = /* @__PURE__ */ new Set();
     const items = [];
     for (const target of targets2) {
       const trigger = imageTrigger(target);
       if (seen.has(trigger)) continue;
-      const item = imageItem(trigger);
+      const item = imageItem(trigger, captionSource);
       if (!item) continue;
       seen.add(trigger);
       items.push(item);
@@ -14803,7 +14890,7 @@ var kuinetic = (() => {
     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.textContent?.trim() || "Video";
+    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;
@@ -14879,7 +14966,7 @@ var kuinetic = (() => {
     if (media === "video") {
       wireVideos(found, wiring, params.text("aspect"), ctx);
     } else {
-      const items = imageItems(found);
+      const items = imageItems(found, params.text("caption", "figcaption"));
       restore = wireImages(items, wiring, params.is("loop"));
     }
     return continuousSetup(() => {
@@ -15434,7 +15521,7 @@ var kuinetic = (() => {
     return recognise(el, { onSwipe: (direction) => {
       if (direction === "left") index.next();
       if (direction === "right") index.prev();
-    } }, { axis: "x", capturePointer: false });
+    } }, { axis: "x", capturePointer: "drag" });
   }
   function prepareSlideshow(el, params, ctx) {
     const selector = resolveTarget(
@@ -15903,17 +15990,24 @@ var __kuineticBoot = (() => {
     }
   }
   function guarded(runtime, original, core, options) {
+    const wantsShared = !options || Object.entries(options).every(([key, value]) => key === "observe" && value === true);
+    if (runtime.manual) {
+      const made = original.call(core, options);
+      adoptManual(runtime, made);
+      return made;
+    }
     if (!runtime.started) {
       const replacement = original.call(core, options);
       adopt(runtime, replacement);
-      warnManualCall(
-        runtime,
-        "yours is now the one this page uses, exactly as it would have been before the script tag started one, so the call is safe to delete"
-      );
+      if (wantsShared) {
+        warnManualCall(
+          runtime,
+          "yours is now the one this page uses, exactly as it would have been before the script tag started one, so the call is safe to delete"
+        );
+      }
       return replacement;
     }
     const shared = runtime.animator;
-    const wantsShared = !options || Object.entries(options).every(([key, value]) => key === "observe" && value === true);
     if (shared && wantsShared) {
       warnManualCall(runtime, "you have been handed the one it already made, so this call is safe to delete");
       return shared;
@@ -15940,6 +16034,40 @@ var __kuineticBoot = (() => {
     runtime.animator = animator;
     globalScope().__kuinetic = animator;
   }
+  function adoptManual(runtime, animator) {
+    if (!runtime.animator) adopt(runtime, animator);
+    const entry = { animator, started: false };
+    const list = runtime.handBuilt ??= [];
+    list.push(entry);
+    const start = animator.start.bind(animator);
+    animator.start = () => {
+      entry.started = true;
+      return start();
+    };
+    if (typeof animator.destroy === "function") {
+      const destroy = animator.destroy.bind(animator);
+      animator.destroy = () => {
+        const at = list.indexOf(entry);
+        if (at >= 0) list.splice(at, 1);
+        return destroy();
+      };
+    }
+    for (const tier of runtime.pending) registerTier(tier, animator);
+  }
+  function registerTier(entry, animator) {
+    try {
+      entry.register(animator);
+    } catch (error) {
+      warn(`the "${entry.tier}" tier failed to register: ${String(error)}`);
+    }
+  }
+  function enlistOnManual(runtime, entry) {
+    runtime.pending.push(entry);
+    for (const { animator, started } of [...runtime.handBuilt ?? []]) {
+      registerTier(entry, animator);
+      if (started) recompile(animator);
+    }
+  }
   function createAnimator(runtime, core) {
     adopt(runtime, core.kuinetic({ observe: true }));
   }
@@ -15969,13 +16097,7 @@ var __kuineticBoot = (() => {
   }
   function drain(runtime, animator) {
     const pending = runtime.pending.splice(0, runtime.pending.length);
-    for (const entry of pending) {
-      try {
-        entry.register(animator);
-      } catch (error) {
-        warn(`the "${entry.tier}" tier failed to register: ${String(error)}`);
-      }
-    }
+    for (const entry of pending) registerTier(entry, animator);
     return pending.length;
   }
   function runBoot(runtime) {
@@ -15997,13 +16119,6 @@ var __kuineticBoot = (() => {
     }
     if (registered) recompile(animator);
   }
-  function optedOut(runtime, options) {
-    if (taggedManual()) {
-      if (options.core) runtime.manual = true;
-      return true;
-    }
-    return runtime.manual;
-  }
   function enlist(runtime, options) {
     if (options.core) {
       if (runtime.animator) return;
@@ -16017,7 +16132,17 @@ var __kuineticBoot = (() => {
     if (typeof document === "undefined" || typeof globalThis === "undefined") return;
     const runtime = getRuntime();
     checkVersion(runtime, options.tier);
-    if (optedOut(runtime, options)) return;
+    if (taggedManual()) {
+      if (options.core) {
+        runtime.manual = true;
+        installGuard(runtime, options.core, options.globalName);
+      }
+      return;
+    }
+    if (runtime.manual) {
+      if (options.register) enlistOnManual(runtime, { tier: options.tier, register: options.register });
+      return;
+    }
     enlist(runtime, options);
     schedule(runtime);
   }