kuinetic 0.1.2 → 0.1.3

package/dist/esm/{chunk-LWS4OSLX.mjs → chunk-JT4PZL3A.mjs}

@@ -114,7 +114,18 @@ var CHANNEL = {
   background: "background",
   color: "color",
   stroke: "stroke",
-  text: "text"
+  text: "text",
+  /**
+   * Skew is the one transform CSS never gave an independent property to — there is no `skew:`
+   * beside `translate:`/`rotate:`/`scale:`, so it can only be written through the `transform`
+   * shorthand. That makes it its own channel: anything writing `transform` clobbers the whole
+   * shorthand, so every primitive that does is on this channel, whatever the transform is for.
+   * `scroll-skew` is one member; `flip-face` (`effects/three-d`) and `flip-3d`
+   * (`effects/catalog/core`, the `flip-in-*`/`flip-out-*` family) are the other two — both need
+   * the `perspective()` transform *function* for an element to have depth on itself, which
+   * likewise only exists inside `transform`.
+   */
+  skew: "skew"
 };
 function inertInstance(destroy = () => {
 }) {
@@ -146,7 +157,7 @@ var PATTERNS = {
 var HEX_COLOR = /^#[0-9a-f]{3,8}$/i;
 var COLOR_FUNCTIONS = /^(?:rgba?|hsla?|okl(?:ch|ab)|l(?:ch|ab)|color)\([^()]*\)$/i;
 var COLOR_KEYWORD = /^[a-z]+$/i;
-var EASING_KEYWORD = /^(?:linear|ease|step-start|step-end|spring|[a-z]+-(?:in|out|in-out))$/i;
+var EASING_KEYWORD = /^(?:linear|ease|step-start|step-end|spring|bounce|[a-z]+-(?:in|out|in-out))$/i;
 var EASING_FUNCTION = /^(?:cubic-bezier|steps|linear)\([^()]*\)$/i;
 var CALC_TYPES = /* @__PURE__ */ new Set(["length", "percentage", "number"]);
 var CALC_CHARACTER = /^[\d.\s+\-*/%a-z,]$/i;
@@ -445,7 +456,22 @@ function windowScrollRoot(win) {
       viewportLeft: 0
     }),
     onScroll: (handler) => listen(win, "scroll", handler),
-    onResize: (handler) => listen(win, "resize", handler)
+    /*
+     * The document's own height counts as a resize, not just the window's.
+     *
+     * `elementScrollRoot` has observed its element's size since it was written, for the reason
+     * stated three doc comments down: "images loading, fonts swapping, a container changing size,
+     * or content being inserted". Every one of those applies at least as strongly to the page
+     * itself, and the page root was the one that only listened for `window.resize` — so on any
+     * document with lazy-loaded media below the fold, every cached content offset silently drifted
+     * by however much the page grew after it was measured, with no epoch bump to correct it.
+     *
+     * Measured on `demo/scroll.html` (32,000px of lazy screenshots): the horizontal track's stage
+     * moved ~840px between page load and reaching it, which is a third of that effect's whole
+     * scroll range. Nothing was wrong with the maths; the number it was doing the maths on was
+     * taken before forty images existed.
+     */
+    onResize: (handler) => observeSize(win.document.documentElement, win, handler)
   };
 }
 function elementScrollRoot(el, win) {
@@ -553,7 +579,7 @@ function restartCssAnimation(el, ledger) {
   flushComputedAnimationName(el);
   ledger.set("animation-name", name);
 }
-function createCssInstance(el, ledger, animationNames) {
+function createCssInstance(el, ledger, animationNames, scrubbed = false) {
   const ownedNames = new Set(animationNames);
   let settle;
   let finished = new Promise((resolve) => {
@@ -572,6 +598,10 @@ function createCssInstance(el, ledger, animationNames) {
       finished = new Promise((resolve) => {
         settle = resolve;
       });
+      if (scrubbed) {
+        settle?.();
+        return;
+      }
       let animations = ownedAnimationsOf(el, ownedNames);
       if (!activatedBefore) {
         restartCssAnimation(el, ledger);
@@ -604,6 +634,9 @@ function createCssInstance(el, ledger, animationNames) {
     }
   };
 }
+function continuousSetup(cleanup) {
+  return { cleanup, continuous: true };
+}
 function cleanupOf(result) {
   if (result === void 0) return void 0;
   return typeof result === "function" ? result : result.cleanup;
@@ -620,7 +653,7 @@ function deferredInstance(setup) {
   return createJsInstance({
     activate() {
       running = setup();
-      if (typeof running === "function") return;
+      if (typeof running === "function" || "continuous" in running) return;
       const work = running.finished;
       finished = new Promise((resolve) => {
         settle = resolve;
@@ -629,11 +662,14 @@ function deferredInstance(setup) {
     },
     cancel: teardown,
     finish() {
-      if (typeof running === "object") running.finish?.();
+      if (typeof running === "object" && "finish" in running) running.finish?.();
       settle?.();
     },
     destroy: teardown,
-    finished: () => finished
+    finished: () => finished,
+    // Only an explicit marker counts. A bare `Cleanup` deliberately does not — see
+    // `ContinuousSetup` above for why the two cannot be told apart by shape.
+    continuous: () => typeof running === "object" && "continuous" in running
   });
 }
 function deferPrepare(setup) {
@@ -657,6 +693,9 @@ function createJsInstance(hooks) {
     get finished() {
       return hooks.finished?.() ?? Promise.resolve();
     },
+    get continuous() {
+      return hooks.continuous?.() ?? false;
+    },
     destroy() {
       active = false;
       hooks.destroy();
@@ -668,6 +707,7 @@ function createJsInstance(hooks) {
 function createStyleLedger(el) {
   const style = el.style;
   const previous = /* @__PURE__ */ new Map();
+  const authoredStyleAttribute = el.hasAttribute("style");
   function remember(property) {
     if (previous.has(property)) return;
     const existing = style.getPropertyValue(property);
@@ -685,6 +725,8 @@ function createStyleLedger(el) {
         else style.setProperty(property, value);
       }
       previous.clear();
+      if (!authoredStyleAttribute && style.length === 0 && !el.getAttribute("style"))
+        el.removeAttribute("style");
     },
     owned: () => [...previous.keys()]
   };
@@ -722,6 +764,7 @@ export {
   clamp01,
   createMeasureCache,
   createCssInstance,
+  continuousSetup,
   deferPrepare,
   createStyleLedger,
   createAttributeLedger,

package/dist/esm/{chunk-5EVG7CIY.mjs → chunk-QUVFODSQ.mjs}

@@ -10,7 +10,7 @@ import {
   resolveParams,
   suggest,
   timingProperty
-} from "./chunk-LWS4OSLX.mjs";
+} from "./chunk-JT4PZL3A.mjs";
 
 // src/core/attrs.ts
 var ATTR = {
@@ -30,7 +30,7 @@ var ATTR = {
 
 // src/core/element-config.ts
 var ACTIVATIONS = /* @__PURE__ */ new Set(["load", "enter", "hover", "focus", "click", "manual"]);
-var TIMELINES = /* @__PURE__ */ new Set(["time", "view", "scroll", "pointer"]);
+var TIMELINES = /* @__PURE__ */ new Set(["time", "view", "scroll", "pointer", "pin"]);
 function readAttributes(el) {
   return {
     source: el.getAttribute(ATTR.source) ?? "",
@@ -282,7 +282,7 @@ function buildPlan(entries, timeline, unknown, warnings) {
       plan.vars,
       resolveParams(entry.spec.params, primitive.parameters, (m) => warnings.push(m))
     );
-    if (primitive.renderer === "css-keyframes") pushTrack(tracks, entry);
+    if (primitive.renderer === "css-keyframes") pushTrack(tracks, entry, timeline);
     else plan.jsEffects.push(entry);
   }
   Object.assign(plan.declarations, declarationsFor(tracks));
@@ -298,12 +298,13 @@ function intersect(accumulated, supported) {
 function iterationCountProperty(presetName) {
   return `--kui-fx-${presetName}-iterations`;
 }
-function pushTrack(tracks, entry) {
+function pushTrack(tracks, entry, timeline) {
   const { spec, resolved } = entry;
   const id = resolved.primitive.id;
   tracks.names.push(resolved.preset.keyframes ?? `kui-${resolved.preset.name}`);
-  tracks.durations.push(spec.duration ?? `var(${timingProperty(id, "duration")}, 600ms)`);
-  tracks.delays.push(staggerDelay(spec.delay, id));
+  const duration = spec.duration ?? `var(${timingProperty(id, "duration")}, 600ms)`;
+  tracks.durations.push(duration);
+  tracks.delays.push(staggerDelay(spec.delay, id, timeline, duration));
   tracks.easings.push(easingValue(spec.easing, id));
   tracks.iterationCounts.push(`var(${iterationCountProperty(resolved.preset.name)}, 1)`);
 }
@@ -327,9 +328,12 @@ function warnUnsupportedTimeline(name, supported, timeline, warnings) {
     `"${name}" does not support timeline "${timeline}" (supports: ${supported.join(", ")})`
   );
 }
-function staggerDelay(delay, primitiveId) {
+function staggerDelay(delay, primitiveId, timeline, duration) {
   const base = delay ?? `var(${timingProperty(primitiveId, "delay")}, 0ms)`;
-  return `calc(${base} + var(--kui-i, 0) * var(--kui-stagger, 0ms))`;
+  const staggered = `${base} + var(--kui-i, 0) * var(--kui-stagger, 0ms)`;
+  if (timeline !== "pin") return `calc(${staggered})`;
+  const span = `${duration} + (var(--kui-stagger-count, 1) - 1) * var(--kui-stagger, 0ms)`;
+  return `calc(${staggered} - var(--kui-progress, 0) * (${span}))`;
 }
 function easingValue(easing, primitiveId) {
   if (!easing) return `var(${timingProperty(primitiveId, "ease")}, ease-out)`;
@@ -499,7 +503,8 @@ var EASING_KEYWORDS = /* @__PURE__ */ new Set([
   "back-in-out",
   "quart-out",
   "circ-out",
-  "spring"
+  "spring",
+  "bounce"
 ]);
 function splitTopLevel(input, delimiter, warnings = []) {
   const parts = [];
@@ -775,6 +780,8 @@ function indexStaggerGroup(group) {
       index++;
     }
   }
+  ;
+  group.style.setProperty("--kui-stagger-count", String(Math.max(index, 1)));
 }
 function applyStagger(root) {
   const selector = `[${ATTR.stagger}]`;
@@ -786,12 +793,14 @@ function applyStagger(root) {
 function planStyles(input) {
   const { plan, config, capabilities, respectReducedMotion } = input;
   const reduce = respectReducedMotion && capabilities.reducedMotion;
-  const useNativeTimeline = supportsTimeline(config.timeline, capabilities) && plan.supportedTimelines.includes(config.timeline);
+  const scrubbed = config.timeline === "pin" && plan.supportedTimelines.includes("pin");
+  const useNativeTimeline = !scrubbed && supportsTimeline(config.timeline, capabilities) && plan.supportedTimelines.includes(config.timeline);
   const properties = { ...plan.vars, ...plan.declarations };
   Object.assign(properties, timelineProperties(config, capabilities, useNativeTimeline));
   const hasCssAnimation = Object.keys(plan.declarations).length > 0;
   const gate = resolveGate({
     useNativeTimeline,
+    scrubbed: scrubbed && hasCssAnimation,
     reduce,
     activation: config.activation,
     // JS effects are gated too. They emit no `animation` declaration, so only the play-state
@@ -806,7 +815,7 @@ function planStyles(input) {
     // already applied under reduced motion.
     unsupportedTransform: needsIndividualTransforms(plan.channels, capabilities)
   });
-  if (gate === "deferred") properties["animation-play-state"] = "paused";
+  if (gate === "deferred" || gate === "scrubbed") properties["animation-play-state"] = "paused";
   return {
     properties,
     attributes: {
@@ -830,6 +839,7 @@ function timelineProperties(config, capabilities, useNativeTimeline) {
 }
 function resolveGate(input) {
   if (input.useNativeTimeline) return "native-timeline";
+  if (input.scrubbed) return "scrubbed";
   if (!input.hasWork) return "immediate";
   if (input.reduce || input.activation === "load" || input.unsupportedTransform) return "immediate";
   return "deferred";
@@ -1010,7 +1020,9 @@ var Animator = class {
     this.liveElements.add(el);
     if (Object.keys(stylePlan.properties).some((property) => property.startsWith("animation-"))) {
       const animationNames = (plan.declarations["animation-name"] ?? "").split(",").map((name) => name.trim()).filter(Boolean);
-      state.instances.push(createCssInstance(el, ledger, animationNames));
+      state.instances.push(
+        createCssInstance(el, ledger, animationNames, stylePlan.gate === "scrubbed")
+      );
     }
     state.instances.push(
       ...this.jsEffectPreparer.prepare({ el, plan, signal: controller.signal, ledger })
@@ -1071,7 +1083,9 @@ var Animator = class {
       state.attributes.set(ATTR.state, "failed");
       return;
     }
-    void Promise.all(started.map((instance) => instance.finished)).then(() => {
+    const timed = started.filter((instance) => !instance.continuous);
+    if (timed.length === 0 && started.length > 0) return;
+    void Promise.all(timed.map((instance) => instance.finished)).then(() => {
       if (this.states.get(el) !== state || state.status !== "running") return;
       state.status = "finished";
       state.attributes.set(ATTR.state, "finished");

package/dist/esm/core/index.mjs

@@ -10,12 +10,12 @@ import {
   resolveTargets,
   silentReporter,
   toAttributeValue
-} from "../chunk-5EVG7CIY.mjs";
+} from "../chunk-QUVFODSQ.mjs";
 import {
   CHANNEL,
   Registry,
   inertInstance
-} from "../chunk-LWS4OSLX.mjs";
+} from "../chunk-JT4PZL3A.mjs";
 export {
   ATTR,
   Animator,

package/dist/esm/effects/index.mjs

@@ -10,8 +10,8 @@ import {
   registerScrollMechanics,
   registerSvg,
   registerThreeD
-} from "../chunk-WPU33HDL.mjs";
-import "../chunk-LWS4OSLX.mjs";
+} from "../chunk-5DON3UFQ.mjs";
+import "../chunk-JT4PZL3A.mjs";
 export {
   COMBOS,
   PRESETS,

package/dist/esm/index.mjs

@@ -10,18 +10,18 @@ import {
   resolveTargets,
   silentReporter,
   toAttributeValue
-} from "./chunk-5EVG7CIY.mjs";
+} from "./chunk-QUVFODSQ.mjs";
 import {
   COMBOS,
   PRESETS,
   PRIMITIVES,
   createRegistry
-} from "./chunk-WPU33HDL.mjs";
+} from "./chunk-5DON3UFQ.mjs";
 import {
   CHANNEL,
   Registry,
   inertInstance
-} from "./chunk-LWS4OSLX.mjs";
+} from "./chunk-JT4PZL3A.mjs";
 
 // src/index.ts
 function kuinetic(options = {}) {