kuinetic 0.1.1 → 0.1.2

package/README.md

@@ -56,15 +56,22 @@ kuinetic({ observe: true }).start()
 
 ### CDN reference
 
-All files are also mirrored on unpkg (`https://unpkg.com/kuinetic/dist/kuinetic.js`) and jsDelivr
-(`https://cdn.jsdelivr.net/npm/kuinetic/dist/kuinetic.js`) — both update automatically from every
-npm release. Self-hosted on Cloudflare at **`kuinetic.pages.dev`**:
-
-| File | URL | Use when |
-|---|---|---|
-| `kuinetic.js` | `https://kuinetic.pages.dev/kuinetic.js` | Split bundle — pair with `kuinetic.css` below. Side-effect-free on load; you call `.start()` yourself. |
-| `kuinetic.css` | `https://kuinetic.pages.dev/kuinetic.css` | Required alongside `kuinetic.js`. Keeps working even if the JS is slow, blocked, or fails to load. |
-| `kuinetic.all.js` | `https://kuinetic.pages.dev/kuinetic.all.js` | One-tag drop-in — CSS embedded, auto-started with `observe: true`. Trades the CSS-independent guarantee above for one less step. |
+Every file is mirrored on jsDelivr and unpkg — both update automatically from every npm release,
+no separate action needed — and additionally self-hosted on Cloudflare at **`kuinetic.pages.dev`**:
+
+| File | cdn.jsdelivr.net | unpkg.com | kuinetic.pages.dev |
+|---|---|---|---|
+| `kuinetic.js` | [`/npm/kuinetic`](https://cdn.jsdelivr.net/npm/kuinetic) † | [`/kuinetic`](https://unpkg.com/kuinetic) † | [`/kuinetic.js`](https://kuinetic.pages.dev/kuinetic.js) |
+| `kuinetic.css` | [`/npm/kuinetic/dist/kuinetic.css`](https://cdn.jsdelivr.net/npm/kuinetic/dist/kuinetic.css) | [`/kuinetic/dist/kuinetic.css`](https://unpkg.com/kuinetic/dist/kuinetic.css) | [`/kuinetic.css`](https://kuinetic.pages.dev/kuinetic.css) |
+| `kuinetic.all.js` | [`/npm/kuinetic/dist/kuinetic.all.js`](https://cdn.jsdelivr.net/npm/kuinetic/dist/kuinetic.all.js) | [`/kuinetic/dist/kuinetic.all.js`](https://unpkg.com/kuinetic/dist/kuinetic.all.js) | [`/kuinetic.all.js`](https://kuinetic.pages.dev/kuinetic.all.js) |
+
+† shorthand — resolves via the `"jsdelivr"`/`"unpkg"` fields in `package.json`; only `kuinetic.js`
+gets one, since a package can only designate a single default file that way.
+
+`kuinetic.js` is the split bundle — side-effect-free on load, pair it with `kuinetic.css`, which
+keeps working even if the JS is slow,
+blocked, or fails to load. `kuinetic.all.js` is the one-tag drop-in — CSS embedded, auto-started
+with `observe: true` — trading that CSS-independence guarantee for one less step.
 
 ## Your first animation
 

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

@@ -824,7 +824,7 @@ function timelineProperties(config, capabilities, useNativeTimeline) {
     "animation-timeline": config.timeline === "scroll" ? "scroll()" : "view()"
   };
   if (capabilities.animationRange) {
-    properties["animation-range"] = config.range || "entry 0% cover 60%";
+    properties["animation-range"] = config.range || (config.timeline === "scroll" ? "0% 100%" : "entry 0% cover 60%");
   }
   return properties;
 }

package/dist/esm/{chunk-QZIJ7WZI.mjs → chunk-WPU33HDL.mjs}

@@ -53,7 +53,8 @@ var float = {
 };
 var pulse = {
   duration: { type: "time", default: "2.2s", cssProperty: "--kui-duration" },
-  ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" }
+  ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" },
+  scale: { type: "number", default: "1.15", cssProperty: "--kui-pulse-scale", finite: true, minimum: 1 }
 };
 var AMBIENT_PRIMITIVES = [
   cssPrimitive("ambient-gradient", [CHANNEL.background], {
@@ -156,7 +157,8 @@ var spin = {
 };
 var dotPulse = {
   duration: { type: "time", default: "1.2s", cssProperty: "--kui-duration" },
-  ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" }
+  ease: { type: "easing", default: "ease-in-out", cssProperty: "--kui-ease" },
+  dotSize: { type: "length", default: "8px", cssProperty: "--kui-dot-size" }
 };
 var progressTrack = {
   duration: { type: "time", default: "1.4s", cssProperty: "--kui-duration" },
@@ -173,7 +175,8 @@ var shake = {
 };
 var pop = {
   duration: { type: "time", default: "420ms", cssProperty: "--kui-duration" },
-  ease: { type: "easing", default: "back-out", cssProperty: "--kui-ease" }
+  ease: { type: "easing", default: "back-out", cssProperty: "--kui-ease" },
+  scale: { type: "number", default: "1.18", cssProperty: "--kui-pop-scale", finite: true, minimum: 1 }
 };
 var ripple = {
   duration: { type: "time", default: "600ms", cssProperty: "--kui-duration" },
@@ -184,6 +187,9 @@ var confirm = {
   duration: { type: "time", default: "1400ms", cssProperty: "--kui-duration" },
   ease: { type: "easing", default: "linear", cssProperty: "--kui-ease" }
 };
+var pull = {
+  distance: { type: "length", default: "36px", cssProperty: "--kui-pull-distance" }
+};
 var FEEDBACK_PRIMITIVES = [
   cssPrimitive("feedback-shimmer", [CHANNEL.background], {
     parameters: loop,
@@ -255,6 +261,7 @@ var FEEDBACK_PRIMITIVES = [
     defaultActivation: "click"
   }),
   cssPrimitive("feedback-pull", [CHANNEL.translate], {
+    parameters: pull,
     defaultActivation: "manual"
   })
 ];
@@ -285,18 +292,23 @@ var FEEDBACK_PRESETS = [
   },
   { name: "ripple", primitive: "feedback-ripple", keyframes: "kui-ripple" },
   { name: "badge-pop", primitive: "feedback-pop", keyframes: "kui-badge-pop" },
-  { name: "count-bump", primitive: "feedback-pop", keyframes: "kui-count-bump", params: { duration: "280ms" } },
+  {
+    name: "count-bump",
+    primitive: "feedback-pop",
+    keyframes: "kui-count-bump",
+    params: { duration: "280ms", scale: "1.3" }
+  },
   {
     name: "heart-burst",
     primitive: "feedback-burst",
     keyframes: "kui-heart-burst",
-    params: { duration: "700ms" }
+    params: { duration: "700ms", scale: "1.4" }
   },
   {
     name: "confetti-burst",
     primitive: "feedback-burst",
     keyframes: "kui-confetti-burst",
-    params: { duration: "900ms" }
+    params: { duration: "900ms", scale: "1.15" }
   },
   { name: "copy-confirm", primitive: "feedback-confirm", keyframes: "kui-copy-confirm" },
   {
@@ -441,12 +453,15 @@ var hoverTiming = {
   duration: { type: "time", default: "220ms", cssProperty: "--kui-duration" },
   ease: { type: "easing", default: "ease-out", cssProperty: "--kui-ease" }
 };
-function hoverPrimitive(id, channels) {
+var liftParams = {
+  distance: { type: "length", default: "6px", cssProperty: "--kui-lift-distance" }
+};
+function hoverPrimitive(id, channels, extraParams = {}) {
   return {
     id,
     renderer: "javascript",
     channels,
-    parameters: hoverTiming,
+    parameters: { ...hoverTiming, ...extraParams },
     supportedTimelines: ["time"],
     supportedActivations: ["load"],
     defaultActivation: "load",
@@ -461,8 +476,8 @@ function hoverPrimitive(id, channels) {
   };
 }
 var HOVER_PRIMITIVES = [
-  hoverPrimitive("lift", ["translate"]),
-  hoverPrimitive("lift-shadow", ["translate", "shadow"]),
+  hoverPrimitive("lift", ["translate"], liftParams),
+  hoverPrimitive("lift-shadow", ["translate", "shadow"], liftParams),
   hoverPrimitive("shine-sweep", ["sweep"]),
   hoverPrimitive("split-flap", ["rotate"]),
   hoverPrimitive("border-draw", ["border"]),
@@ -511,6 +526,13 @@ var springParams = {
     finite: true,
     minimum: 0.1,
     maximum: 1e3
+  },
+  mass: {
+    type: "number",
+    default: "1",
+    cssProperty: "--kui-mass",
+    finite: true,
+    minimum: 0.1
   }
 };
 function pointerPrimitive(id, channels, parameters, prepare) {
@@ -534,7 +556,8 @@ function springFrom(params) {
   return {
     ...DEFAULT_SPRING,
     stiffness: params.num("stiffness", DEFAULT_SPRING.stiffness),
-    damping: params.num("damping", DEFAULT_SPRING.damping)
+    damping: params.num("damping", DEFAULT_SPRING.damping),
+    mass: params.num("mass", DEFAULT_SPRING.mass)
   };
 }
 function springDepsFor(ctx) {
@@ -791,7 +814,7 @@ var MEDIA_PRIMITIVES = [
     perfClass: "paint"
   }),
   cssPrimitive("media-blur-up", [CHANNEL.translate, CHANNEL.filter], {
-    parameters: geometry,
+    parameters: { ...geometry, blur: { type: "length", default: "16px", cssProperty: "--kui-blur" } },
     perfClass: "paint"
   }),
   cssPrimitive("media-parallax-frame", [CHANNEL.translate], {
@@ -1354,11 +1377,18 @@ var fontWidthParams = {
 };
 var fontSlantParams = {
   from: { type: "angle", default: "0deg", cssProperty: "--kui-from-slant" },
-  to: { type: "angle", default: "-10deg", cssProperty: "--kui-to-slant" }
+  to: { type: "angle", default: "10deg", cssProperty: "--kui-to-slant" }
+};
+var textSweepParams = {
+  color: { type: "color", default: "currentColor", cssProperty: "--kui-sweep-color" }
+};
+var extrudeParams = {
+  angle: { type: "angle", default: "-20deg", cssProperty: "--kui-from-angle" },
+  distance: { type: "length", default: "32px", cssProperty: "--kui-distance" }
 };
 var TEXT_CSS_PRIMITIVES = [
   cssPrimitive("text-shimmer", [CHANNEL.background], { reducedMotion: "disable" }),
-  cssPrimitive("text-sweep", [CHANNEL.background]),
+  cssPrimitive("text-sweep", [CHANNEL.background], { parameters: textSweepParams }),
   cssPrimitive("text-outline-fill", [CHANNEL.stroke, CHANNEL.color]),
   cssPrimitive("var-weight", ["font"], { parameters: fontWeightParams }),
   cssPrimitive("var-width", ["font"], { parameters: fontWidthParams }),
@@ -1368,12 +1398,17 @@ var TEXT_CSS_PRIMITIVES = [
     reducedMotion: "disable"
   }),
   cssPrimitive("redaction-reveal", [CHANNEL.clip]),
-  cssPrimitive("text-3d-extrude", [CHANNEL.rotate, CHANNEL.translate])
+  cssPrimitive("text-3d-extrude", [CHANNEL.rotate, CHANNEL.translate], { parameters: extrudeParams })
 ];
 var TEXT_CSS_PRESETS = [
   { name: "gradient-shimmer", primitive: "text-shimmer", keyframes: "kui-gradient-shimmer" },
   { name: "gradient-sweep", primitive: "text-sweep", keyframes: "kui-gradient-sweep" },
-  { name: "highlight-sweep", primitive: "text-sweep", keyframes: "kui-highlight-sweep" },
+  {
+    name: "highlight-sweep",
+    primitive: "text-sweep",
+    keyframes: "kui-highlight-sweep",
+    params: { color: "gold" }
+  },
   { name: "underline-draw", primitive: "text-sweep", keyframes: "kui-underline-draw" },
   { name: "text-outline-fill", primitive: "text-outline-fill", keyframes: "kui-text-outline-fill" },
   { name: "var-weight", primitive: "var-weight", keyframes: "kui-var-weight" },
@@ -1847,6 +1882,29 @@ var NATIVE_STATE_PRIMITIVE = {
   reducedMotion: "disable",
   prepare: () => inertInstance()
 };
+function prepareSiblingScale(cssProperty) {
+  return (el, params) => {
+    const sibling = el.nextElementSibling;
+    sibling?.style.setProperty(cssProperty, String(params.num("scale", 1)));
+    return () => sibling?.style.removeProperty(cssProperty);
+  };
+}
+function siblingScalePrimitive(id, cssProperty) {
+  return {
+    id,
+    renderer: "javascript",
+    channels: [CHANNEL.translate, CHANNEL.scale, CHANNEL.opacity, CHANNEL.stroke, CHANNEL.color],
+    parameters: { scale: { type: "number", default: "1", cssProperty } },
+    supportedTimelines: ["time"],
+    supportedActivations: ["load"],
+    defaultActivation: "load",
+    perfClass: "compositor",
+    reducedMotion: "disable",
+    prepare: deferPrepare(prepareSiblingScale(cssProperty))
+  };
+}
+var TOGGLE_MORPH_PRIMITIVE = siblingScalePrimitive("toggle-morph", "--kui-toggle-scale");
+var RADIO_FILL_PRIMITIVE = siblingScalePrimitive("radio-fill", "--kui-radio-scale");
 var FOCUS_RING_PRIMITIVE = cssPrimitive("focus-ring", ["shadow"], {
   activations: ["focus", "manual"],
   defaultActivation: "focus"
@@ -1939,7 +1997,7 @@ function prepareStepProgress(el, params) {
 var STEP_PROGRESS_PRIMITIVE = jsInputPrimitive(
   "step-progress",
   ["state"],
-  { steps: { type: "number", default: "4", cssProperty: "--kui-steps", minimum: 1, integer: true } },
+  { steps: { type: "number", default: "4", cssProperty: "--kui-steps", minimum: 1, maximum: 20, integer: true } },
   deferPrepare(prepareStepProgress)
 );
 function nextSubmitStage(stage) {
@@ -1993,6 +2051,8 @@ var FORMS_PRIMITIVES = [
   VALIDATE_SHAKE_PRIMITIVE,
   VALIDATE_CHECK_PRIMITIVE,
   STRENGTH_METER_PRIMITIVE,
+  TOGGLE_MORPH_PRIMITIVE,
+  RADIO_FILL_PRIMITIVE,
   RANGE_FILL_PRIMITIVE,
   STEP_PROGRESS_PRIMITIVE,
   SUBMIT_FLOW_PRIMITIVE
@@ -2004,9 +2064,9 @@ var FORMS_PRESETS = [
   { name: "validate-shake", primitive: "validate-shake", keyframes: "kui-validate-shake" },
   { name: "validate-check", primitive: "validate-check", keyframes: "kui-validate-check" },
   { name: "strength-meter", primitive: "strength-meter" },
-  { name: "toggle-morph", primitive: "native-state" },
+  { name: "toggle-morph", primitive: "toggle-morph" },
   { name: "checkbox-draw", primitive: "native-state" },
-  { name: "radio-fill", primitive: "native-state" },
+  { name: "radio-fill", primitive: "radio-fill" },
   { name: "range-fill", primitive: "range-fill" },
   { name: "submit-to-spinner-to-check", primitive: "submit-flow" },
   { name: "step-progress", primitive: "step-progress" }
@@ -2047,6 +2107,7 @@ function recognise(el, handlers, options = {}, deps = defaultGestureDeps()) {
   let origin = null;
   let active = false;
   let longPressTimer = null;
+  let longPressFired = false;
   function sampleOf(event) {
     return { x: event.clientX, y: event.clientY, time: deps.now() };
   }
@@ -2063,9 +2124,13 @@ function recognise(el, handlers, options = {}, deps = defaultGestureDeps()) {
     origin = sampleOf(event);
     samples = [origin];
     active = false;
+    longPressFired = false;
     el.setPointerCapture?.(event.pointerId);
     if (longPressMs > 0) {
-      longPressTimer = deps.setTimer(() => handlers.onLongPress?.(origin), longPressMs);
+      longPressTimer = deps.setTimer(() => {
+        longPressFired = true;
+        handlers.onLongPress?.(origin);
+      }, longPressMs);
     }
   }
   function onMove(event) {
@@ -2093,9 +2158,12 @@ function recognise(el, handlers, options = {}, deps = defaultGestureDeps()) {
       handlers.onEnd?.(vector, sample);
       const direction = swipeDirection(vector, swipeVelocity);
       if (direction) handlers.onSwipe?.(direction, vector);
+    } else if (longPressFired) {
+      handlers.onEnd?.(vector, sample);
     }
     origin = null;
     active = false;
+    longPressFired = false;
     samples = [];
   }
   el.addEventListener("pointerdown", onDown);
@@ -2141,6 +2209,13 @@ var springParams2 = {
     finite: true,
     minimum: 0.1,
     maximum: 1e3
+  },
+  mass: {
+    type: "number",
+    default: "1",
+    cssProperty: "--kui-mass",
+    finite: true,
+    minimum: 0.1
   }
 };
 function gesturePrimitive(id, channels, parameters, prepare) {
@@ -2161,7 +2236,8 @@ function springFrom2(params) {
   return {
     ...DEFAULT_SPRING,
     stiffness: params.num("stiffness", DEFAULT_SPRING.stiffness),
-    damping: params.num("damping", DEFAULT_SPRING.damping)
+    damping: params.num("damping", DEFAULT_SPRING.damping),
+    mass: params.num("mass", DEFAULT_SPRING.mass)
   };
 }
 function springDeps(ctx) {
@@ -2175,6 +2251,8 @@ function prepareDraggable(el, params, ctx) {
   const bounds = params.num("bounds", 0);
   const returns = params.is("return");
   const inertia = params.is("inertia");
+  const resistance = params.num("resistance", 0.55);
+  const momentum = params.num("momentum", 0.2);
   const offset = { x: 0, y: 0 };
   const deps = springDeps(ctx);
   const runners = {
@@ -2195,11 +2273,11 @@ function prepareDraggable(el, params, ctx) {
         el.setAttribute("data-kui-dragging", "true");
       },
       onMove(vector) {
-        write({ x: resist(vector.dx, bounds), y: resist(vector.dy, bounds) });
+        write({ x: resist(vector.dx, bounds, resistance), y: resist(vector.dy, bounds, resistance) });
       },
       onEnd(vector) {
         el.setAttribute("data-kui-dragging", "false");
-        settle(runners, offset, vector, { returns, inertia });
+        settle(runners, offset, vector, { returns, inertia, momentum });
       }
     },
     { axis: params.text("axis", "both") }
@@ -2212,8 +2290,8 @@ function prepareDraggable(el, params, ctx) {
     el.removeAttribute("data-kui-dragging");
   };
 }
-function resist(delta, bounds) {
-  return bounds > 0 ? rubberBand(delta, bounds) : delta;
+function resist(delta, bounds, tension) {
+  return bounds > 0 ? rubberBand(delta, bounds, tension) : delta;
 }
 function settle(runners, offset, vector, mode) {
   runners.x.set(offset.x, mode.inertia ? vector.vx : 0);
@@ -2223,8 +2301,8 @@ function settle(runners, offset, vector, mode) {
     runners.y.to(0);
     return;
   }
-  runners.x.to(offset.x + vector.vx * 0.2);
-  runners.y.to(offset.y + vector.vy * 0.2);
+  runners.x.to(offset.x + vector.vx * mode.momentum);
+  runners.y.to(offset.y + vector.vy * mode.momentum);
 }
 function prepareSwipeable(el, params) {
   const stop = recognise(
@@ -2311,7 +2389,16 @@ var GESTURE_PRIMITIVES = [
         default: "false",
         cssProperty: "--kui-inertia",
         values: ["true", "false"]
-      }
+      },
+      resistance: {
+        type: "number",
+        default: "0.55",
+        cssProperty: "--kui-resistance",
+        finite: true,
+        minimum: 0,
+        maximum: 1
+      },
+      momentum: { type: "number", default: "0.2", cssProperty: "--kui-momentum", finite: true }
     },
     deferPrepare(prepareDraggable)
   ),

package/dist/esm/core/index.mjs

@@ -10,7 +10,7 @@ import {
   resolveTargets,
   silentReporter,
   toAttributeValue
-} from "../chunk-R3TGDJKA.mjs";
+} from "../chunk-5EVG7CIY.mjs";
 import {
   CHANNEL,
   Registry,

package/dist/esm/effects/index.mjs

@@ -10,7 +10,7 @@ import {
   registerScrollMechanics,
   registerSvg,
   registerThreeD
-} from "../chunk-QZIJ7WZI.mjs";
+} from "../chunk-WPU33HDL.mjs";
 import "../chunk-LWS4OSLX.mjs";
 export {
   COMBOS,

package/dist/esm/index.mjs

@@ -10,13 +10,13 @@ import {
   resolveTargets,
   silentReporter,
   toAttributeValue
-} from "./chunk-R3TGDJKA.mjs";
+} from "./chunk-5EVG7CIY.mjs";
 import {
   COMBOS,
   PRESETS,
   PRIMITIVES,
   createRegistry
-} from "./chunk-QZIJ7WZI.mjs";
+} from "./chunk-WPU33HDL.mjs";
 import {
   CHANNEL,
   Registry,