@enigmax/primitives 0.1.0 → 0.1.2

package/README.md

@@ -69,7 +69,7 @@ Three of these cost a production bug each. They are the reason this package exis
 
 **`touch-action` decides whether a phone can scroll your page.** Without it the browser owns the horizontal swipe and the drag handlers never see it. With `none`, a visitor can no longer scroll the page by starting the gesture on the row, which on a phone is most of the width of the screen. The lane gets `pan-y` (or `pan-x` when vertical).
 
-**A hover effect that ignores `pointerType` sticks forever on touch.** A tap fires `pointerenter` too, and on touch nothing ever fires the `pointerleave` that undoes it, so a "slow down on hover" leaves the row at 15% speed for good after the first tap. Every hover path here is gated to `pointerType === "mouse"`.
+**A hover effect that ignores `pointerType` sticks forever on touch.** A tap fires `pointerenter` too, and on touch nothing ever fires the `pointerleave` that undoes it, so a "slow down on hover" leaves the row at 15% speed for good after the first tap. Every hover path here is gated to `pointerType === "mouse"` - and that gate alone is not enough, which cost a CI failure: Chromium follows a touch with *compatibility* pointer events that claim `pointerType: "mouse"`. It emits them on Linux and not on Windows, so the naive gate passes on one machine and fails on the other. A touch therefore also suppresses hover for a second, and `pointerleave` clears the state whatever the pointer type, because a hover that cannot be undone is the bug.
 
 The rest, in short: the lap is measured from the step between two copies rather than computed from item widths; the transform is driven by one `requestAnimationFrame` loop rather than CSS keyframes, which restart on every re-author; one integrator carries cruise, hover and momentum so none of them can arrive as a cut; a drag past ~6px cancels the click in the capture phase; a right click never starts a drag; a pointer held still for ~90ms before release throws nothing; and reduced motion drops the autoplay while keeping the drag, because a drag is an answer to the pointer and not motion of the page's own accord.
 

package/dist/{chunk-5Q5TAW2N.js → chunk-55J5JEWX.js}

@@ -4,6 +4,7 @@ var DRAG_THRESHOLD = 6;
 var STILL_MS = 90;
 var MAX_DT = 0.05;
 var VELOCITY_SMOOTHING = 0.6;
+var TOUCH_HOVER_SUPPRESS_MS = 1e3;
 var IDLE_EPSILON = 0.01;
 var DEFAULTS = {
   speed: 60,
@@ -33,6 +34,7 @@ function createMarquee(lane, track, options = {}) {
   let lastMoveTime = 0;
   let maxTravel = 0;
   let hovering = false;
+  let lastTouchAt = 0;
   const motionQuery = typeof window.matchMedia === "function" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null;
   let reducedMotion = motionQuery?.matches ?? false;
   function target() {
@@ -86,13 +88,19 @@ function createMarquee(lane, track, options = {}) {
   }
   function measure() {
     if (destroyed) return;
-    const measured = readPeriod();
-    const needed = requiredCopies(measured);
+    const cloning = opts.copies === "clone";
+    if (cloning && track.children.length < 2) syncClones(2);
+    let measured = readPeriod();
+    let needed = requiredCopies(measured);
+    if (cloning && track.children.length !== needed) {
+      syncClones(needed);
+      measured = readPeriod();
+      needed = requiredCopies(measured);
+    }
     const changed = measured !== period || needed !== copyCount;
     period = measured;
     if (needed !== copyCount) {
       copyCount = needed;
-      if (opts.copies === "clone") syncClones(needed);
       opts.onCopyCountChange?.(needed);
     }
     if (period > 0) offset = wrap(offset);
@@ -132,6 +140,7 @@ function createMarquee(lane, track, options = {}) {
     return opts.vertical ? event.clientY : event.clientX;
   }
   function onPointerDown(event) {
+    if (event.pointerType !== "mouse") noteTouch();
     if (!opts.draggable || event.button > 0 || pointerId !== null) return;
     pointerId = event.pointerId;
     dragging = true;
@@ -178,13 +187,23 @@ function createMarquee(lane, track, options = {}) {
     opts.onItemClick?.(event);
   }
   function onPointerEnter(event) {
-    if (event.pointerType !== "mouse") return;
+    if (event.pointerType !== "mouse") {
+      noteTouch();
+      return;
+    }
+    if (Date.now() - lastTouchAt < TOUCH_HOVER_SUPPRESS_MS) return;
     hovering = true;
     lane.dataset.hovering = "true";
     start();
   }
-  function onPointerLeave(event) {
-    if (event.pointerType !== "mouse") return;
+  function onPointerLeave() {
+    hovering = false;
+    delete lane.dataset.hovering;
+    start();
+  }
+  function noteTouch() {
+    lastTouchAt = Date.now();
+    if (!hovering) return;
     hovering = false;
     delete lane.dataset.hovering;
     start();
@@ -206,6 +225,7 @@ function createMarquee(lane, track, options = {}) {
     lane.addEventListener("pointerdown", onPointerDown);
     lane.addEventListener("pointerenter", onPointerEnter);
     lane.addEventListener("pointerleave", onPointerLeave);
+    lane.addEventListener("touchstart", noteTouch, { passive: true });
     lane.addEventListener("click", onClickCapture, true);
     lane.addEventListener("click", onClick);
     motionQuery?.addEventListener("change", onMotionChange);
@@ -255,6 +275,7 @@ function createMarquee(lane, track, options = {}) {
       lane.removeEventListener("pointerdown", onPointerDown);
       lane.removeEventListener("pointerenter", onPointerEnter);
       lane.removeEventListener("pointerleave", onPointerLeave);
+      lane.removeEventListener("touchstart", noteTouch);
       lane.removeEventListener("click", onClickCapture, true);
       lane.removeEventListener("click", onClick);
       window.removeEventListener("pointermove", onPointerMove);

package/dist/index.js

@@ -1 +1 @@
-export { createMarquee } from './chunk-5Q5TAW2N.js';
+export { createMarquee } from './chunk-55J5JEWX.js';

package/dist/react/index.js

@@ -1,4 +1,4 @@
-import { createMarquee } from '../chunk-5Q5TAW2N.js';
+import { createMarquee } from '../chunk-55J5JEWX.js';
 import { useRef, useState, useEffect, useLayoutEffect } from 'react';
 
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Headless interaction primitives: the behaviour, the timing and the accessibility of components like a draggable infinite marquee, with no styles of their own. Framework-agnostic core plus thin adapters.",
   "type": "module",
   "main": "./dist/index.js",

package/src/core/marquee.ts

@@ -20,6 +20,12 @@ const STILL_MS = 90;
 const MAX_DT = 0.05;
 /** One jittery frame must not decide the throw. */
 const VELOCITY_SMOOTHING = 0.6;
+/**
+ * How long a touch suppresses hover. Chromium's compatibility pointer events
+ * arrive within a frame or two of the touch and claim `pointerType: "mouse"`;
+ * a real mouse arriving later than this is a genuine hover.
+ */
+const TOUCH_HOVER_SUPPRESS_MS = 1000;
 /** Below this the row is idle and the frame loop can stop. */
 const IDLE_EPSILON = 0.01;
 
@@ -121,6 +127,7 @@ export function createMarquee(lane: HTMLElement, track: HTMLElement, options: Ma
     let lastMoveTime = 0;
     let maxTravel = 0;
     let hovering = false;
+    let lastTouchAt = 0;
 
     const motionQuery = typeof window.matchMedia === "function"
         ? window.matchMedia("(prefers-reduced-motion: reduce)")
@@ -198,13 +205,30 @@ export function createMarquee(lane: HTMLElement, track: HTMLElement, options: Ma
 
     function measure(): void {
         if (destroyed) return;
-        const measured = readPeriod();
-        const needed = requiredCopies(measured);
+        const cloning = opts.copies === "clone";
+
+        // The lap can only be READ from the step between two copies, so the second one
+        // has to exist before the number is worth anything. Without this, markup that
+        // ships a single copy is measured by that copy's own width instead.
+        if (cloning && track.children.length < 2) syncClones(2);
+
+        let measured = readPeriod();
+        let needed = requiredCopies(measured);
+
+        // Reconcile against the DOM, not against the previous count. `copyCount` starts
+        // optimistically at 2 while the markup carries one copy, so keying the clone on
+        // "the count changed" left a row that needs exactly 2 copies with only its
+        // original - and a visible gap once the lap scrolled past the lane.
+        if (cloning && track.children.length !== needed) {
+            syncClones(needed);
+            measured = readPeriod();
+            needed = requiredCopies(measured);
+        }
+
         const changed = measured !== period || needed !== copyCount;
         period = measured;
         if (needed !== copyCount) {
             copyCount = needed;
-            if (opts.copies === "clone") syncClones(needed);
             opts.onCopyCountChange?.(needed);
         }
         if (period > 0) offset = wrap(offset);
@@ -255,6 +279,7 @@ export function createMarquee(lane: HTMLElement, track: HTMLElement, options: Ma
 
     function onPointerDown(event: PointerEvent): void {
         // Non-negotiable 9: a right click must leave the context menu alone.
+        if (event.pointerType !== "mouse") noteTouch();
         if (!opts.draggable || event.button > 0 || pointerId !== null) return;
         pointerId = event.pointerId;
         dragging = true;
@@ -316,16 +341,38 @@ export function createMarquee(lane: HTMLElement, track: HTMLElement, options: Ma
         opts.onItemClick?.(event);
     }
 
-    /** Non-negotiable 8: a tap fires pointerenter and never the pointerleave that undoes it. */
+    /**
+     * Non-negotiable 8: a tap fires pointerenter and never the pointerleave that
+     * undoes it, so the row would keep the hover speed for good after one touch.
+     *
+     * Checking `pointerType` is NOT enough on its own. After a touch, Chromium
+     * also emits the COMPATIBILITY pointer events, and those carry
+     * `pointerType: "mouse"` - observed on Linux while the same tap on Windows
+     * emitted nothing, which is how this passed locally and failed in CI. So a
+     * recent touch suppresses the hover as well.
+     */
     function onPointerEnter(event: PointerEvent): void {
-        if (event.pointerType !== "mouse") return;
+        if (event.pointerType !== "mouse") {
+            noteTouch();
+            return;
+        }
+        if (Date.now() - lastTouchAt < TOUCH_HOVER_SUPPRESS_MS) return;
         hovering = true;
         lane.dataset.hovering = "true";
         start();
     }
 
-    function onPointerLeave(event: PointerEvent): void {
-        if (event.pointerType !== "mouse") return;
+    function onPointerLeave(): void {
+        // Clears on ANY pointer type: a hover that cannot be undone is the bug.
+        hovering = false;
+        delete lane.dataset.hovering;
+        start();
+    }
+
+    /** Stamp the last touch and drop any hover it may already have set. */
+    function noteTouch(): void {
+        lastTouchAt = Date.now();
+        if (!hovering) return;
         hovering = false;
         delete lane.dataset.hovering;
         start();
@@ -351,6 +398,9 @@ export function createMarquee(lane: HTMLElement, track: HTMLElement, options: Ma
         lane.addEventListener("pointerdown", onPointerDown);
         lane.addEventListener("pointerenter", onPointerEnter);
         lane.addEventListener("pointerleave", onPointerLeave);
+        // Fires BEFORE the compatibility pointer events a touch generates, so the
+        // suppression window is already open when the fake "mouse" enter arrives.
+        lane.addEventListener("touchstart", noteTouch, { passive: true });
         lane.addEventListener("click", onClickCapture, true);
         lane.addEventListener("click", onClick);
         motionQuery?.addEventListener("change", onMotionChange);
@@ -390,6 +440,7 @@ export function createMarquee(lane: HTMLElement, track: HTMLElement, options: Ma
             lane.removeEventListener("pointerdown", onPointerDown);
             lane.removeEventListener("pointerenter", onPointerEnter);
             lane.removeEventListener("pointerleave", onPointerLeave);
+            lane.removeEventListener("touchstart", noteTouch);
             lane.removeEventListener("click", onClickCapture, true);
             lane.removeEventListener("click", onClick);
             window.removeEventListener("pointermove", onPointerMove);