@colletdev/core 0.1.3

package/src/elements/carousel.js

@@ -0,0 +1,895 @@
+// Custom behavior for <cx-carousel> — Embla-style attraction physics,
+// motion blur, morphing cursor, smart text contrast, and drag/swipe navigation.
+//
+// This is a faithful port of static/_behaviors/carousel.js (the SSR gallery
+// behavior) into the Custom Element lifecycle. The physics model is identical:
+// rAF attraction loop with exponential friction, velocity-projected snap targets,
+// pointer ring buffer, rubber-band boundaries, and per-slide SVG motion blur.
+//
+// Source: crates/wasm-api/src/carousel.rs (rendering)
+//         static/_behaviors/carousel.js (interaction reference)
+
+export function defineCxCarousel(wasmFn, baseClass) {
+  // ─── Physics tuning (matches SSR behavior exactly) ───
+  const ATTRACT_DURATION = 25;
+  const ATTRACT_FRICTION = 0.68;
+  const SETTLE_THRESHOLD = 0.5;
+  const DRAG_THRESHOLD = 8;
+  const MOMENTUM_FACTOR = 0.4;
+
+  // Visual constants
+  const MAX_BLUR = 12;
+  const CURSOR_LERP = 0.15;
+  const CURSOR_SIZE = 40;
+  const CURSOR_MORPH_W = 80;
+  const ACTIVE_OPACITY = '1';
+  const INACTIVE_OPACITY = '0.6';
+  const ACTIVE_SCALE = 'scale(1)';
+  const INACTIVE_SCALE = 'scale(0.97)';
+
+  class CxCarousel extends baseClass {
+    static observedAttributes = ['id', 'label', 'variant', 'shape', 'size', 'slides', 'autoplay', 'autoplay-interval', 'loop-mode', 'motion-blur', 'custom-cursor', 'indicator'];
+    static _booleanAttrs = new Set(['loop-mode', 'motion-blur', 'custom-cursor']);
+    static _numericAttrs = new Set(['autoplay-interval']);
+    static _hostDisplay = 'block';
+    static _focusable = false;
+
+    #cr = null;
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+      }
+      super.connectedCallback();
+    }
+
+    disconnectedCallback() {
+      this.#cleanup();
+      super.disconnectedCallback();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-carousel] render:', e);
+        return;
+      }
+      try {
+        this.#initCarousel();
+      } catch (e) {
+        console.error('[cx-carousel] init:', e);
+      }
+    }
+
+    #initCarousel() {
+      this.#cleanup();
+      const shadow = this._shadow;
+      const root = shadow.querySelector('[data-carousel]');
+      if (!root) return;
+
+      const track = root.querySelector('[data-carousel-track]');
+      if (!track) return;
+
+      const slides = Array.from(root.querySelectorAll('[data-carousel-slide]'));
+      if (!slides.length) return;
+
+      // Read state from embedded JSON script
+      const id = root.getAttribute('data-carousel') || '';
+      const stateEl = root.querySelector(`script[data-state="${id}"]`) || root.querySelector('script[data-state]');
+      let cfg = {};
+      try { if (stateEl) cfg = JSON.parse(stateEl.textContent); } catch (_) {}
+
+      const prefersReducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+      const hasFinePointer = window.matchMedia?.('(pointer: fine)').matches;
+
+      const cr = {
+        root,
+        track,
+        slides,
+        id,
+        current: cfg.current || 0,
+        total: slides.length,
+        loop: cfg.loop !== false,
+        autoplayOn: cfg.autoplay === 'on',
+        interval: cfg.interval || 5000,
+        useBlur: (cfg.motionBlur !== false) && !prefersReducedMotion,
+        useCursor: (cfg.customCursor !== false) && !prefersReducedMotion && hasFinePointer,
+        prefersReducedMotion,
+        hasFinePointer,
+        // Physics state
+        snapPositions: [],
+        trackOffset: 0,
+        velocity: 0,
+        animFrame: null,
+        isAnimating: false,
+        // Drag state
+        isDragging: false,
+        wasDragging: false,
+        dragStartX: 0,
+        dragStartOffset: 0,
+        dragStartSlideIndex: -1,
+        pointerHistory: [],
+        // Autoplay state
+        autoplayTimer: null,
+        isPlaying: false,
+        // Cursor state
+        cursorX: 0, cursorY: 0,
+        targetCursorX: 0, targetCursorY: 0,
+        cursorVisible: false,
+        cursorFrame: null,
+        prevMoveX: 0,
+        cursorMorphAmount: 0,
+        cursorW: CURSOR_SIZE,
+        // DOM refs
+        blurFilter: root.querySelector('[data-carousel-blur]'),
+        cursorEl: root.querySelector('[data-carousel-cursor]'),
+        liveRegion: root.querySelector('[data-carousel-live]'),
+        playBtn: root.querySelector('[data-carousel-play]'),
+        progressFill: root.querySelector('[data-carousel-progress-fill]'),
+        indicators: Array.from(root.querySelectorAll('[data-carousel-dot]')),
+        prevBtn: root.querySelector('[data-carousel-prev]'),
+        nextBtn: root.querySelector('[data-carousel-next]'),
+        // Cleanup
+        cleanups: [],
+      };
+      this.#cr = cr;
+
+      // Make root focusable for keyboard navigation
+      if (!root.hasAttribute('tabindex')) {
+        root.setAttribute('tabindex', '0');
+      }
+
+      // Remove SSR inert so pointer events work for drag
+      slides.forEach(s => s.removeAttribute('inert'));
+
+      // ── Smart text contrast (Editorial only) ──
+      const isCardVariant = root.getAttribute('data-variant') === 'card';
+      if (!isCardVariant) {
+        slides.forEach(slide => this.#analyzeSlideContrast(slide));
+      }
+
+      // ── Measure snap positions (after layout) ──
+      requestAnimationFrame(() => {
+        this.#measureSnaps();
+        cr.trackOffset = cr.snapPositions[cr.current] || 0;
+        track.style.transform = `translate3d(${cr.trackOffset}px,0,0)`;
+        track.style.willChange = 'transform';
+        this.#applySlideVisuals();
+        this.#updateNavButtons();
+      });
+
+      // ── Keyboard ──
+      const onKey = e => this.#handleKey(e);
+      root.addEventListener('keydown', onKey);
+      cr.cleanups.push(() => root.removeEventListener('keydown', onKey));
+
+      // ── Pointer drag ──
+      const onPointerDown = e => {
+        if (e.button !== 0) return;
+        cr.isDragging = true;
+        cr.wasDragging = false;
+        cr.dragStartX = e.clientX;
+        cr.pointerHistory = [{ x: e.clientX, t: performance.now() }];
+
+        // Record which slide was touched (for intent detection)
+        cr.dragStartSlideIndex = -1;
+        const el = e.target.closest('[data-carousel-slide]');
+        if (el) {
+          const idx = parseInt(el.getAttribute('data-carousel-slide'), 10);
+          if (!isNaN(idx)) cr.dragStartSlideIndex = idx;
+        }
+
+        // Cancel any running animation and clear residual blur
+        if (cr.animFrame) {
+          cancelAnimationFrame(cr.animFrame);
+          cr.animFrame = null;
+          cr.isAnimating = false;
+          this.#setBlur(0);
+        }
+
+        cr.dragStartOffset = cr.trackOffset;
+        this.#pauseAutoplay();
+        track.setPointerCapture(e.pointerId);
+        e.preventDefault();
+      };
+      track.addEventListener('pointerdown', onPointerDown);
+      cr.cleanups.push(() => track.removeEventListener('pointerdown', onPointerDown));
+
+      const onPointerMove = e => {
+        if (cr.useCursor && cr.hasFinePointer) {
+          cr.targetCursorX = e.clientX;
+          cr.targetCursorY = e.clientY;
+        }
+        if (!cr.isDragging) return;
+
+        const dx = e.clientX - cr.dragStartX;
+        if (Math.abs(dx) > DRAG_THRESHOLD) cr.wasDragging = true;
+
+        cr.trackOffset = cr.dragStartOffset + dx;
+
+        // Rubber-band at boundaries
+        let maxScroll = track.scrollWidth - root.offsetWidth;
+        if (maxScroll < 0) maxScroll = 0;
+        if (cr.trackOffset > 0) {
+          cr.trackOffset *= 0.3;
+        } else if (cr.trackOffset < -maxScroll) {
+          cr.trackOffset = -maxScroll + (cr.trackOffset + maxScroll) * 0.3;
+        }
+
+        track.style.transform = `translate3d(${cr.trackOffset}px,0,0)`;
+
+        // Velocity tracking (ring buffer of last 5 positions)
+        cr.pointerHistory.push({ x: e.clientX, t: performance.now() });
+        if (cr.pointerHistory.length > 5) cr.pointerHistory.shift();
+
+        // Live blur during drag
+        if (cr.useBlur && cr.pointerHistory.length >= 2) {
+          const last = cr.pointerHistory[cr.pointerHistory.length - 1];
+          const prev = cr.pointerHistory[cr.pointerHistory.length - 2];
+          const dt = (last.t - prev.t) / 1000;
+          if (dt > 0) this.#setBlur(Math.min(Math.abs((last.x - prev.x) / dt) * 0.005, MAX_BLUR));
+        }
+      };
+      track.addEventListener('pointermove', onPointerMove);
+      cr.cleanups.push(() => track.removeEventListener('pointermove', onPointerMove));
+
+      const onPointerUp = () => {
+        if (!cr.isDragging) return;
+        cr.isDragging = false;
+
+        // Calculate release velocity from last 3 pointer samples
+        let releaseVelocity = 0;
+        if (cr.pointerHistory.length >= 2) {
+          const si = Math.max(0, cr.pointerHistory.length - 3);
+          const first = cr.pointerHistory[si];
+          const last = cr.pointerHistory[cr.pointerHistory.length - 1];
+          const dt = (last.t - first.t) / 1000;
+          if (dt > 0) releaseVelocity = (last.x - first.x) / dt;
+        }
+
+        let targetIndex;
+
+        // Intent detection: user grabbed an ADJACENT non-active slide and
+        // dragged it toward center
+        const dragDx = cr.trackOffset - cr.dragStartOffset;
+        if (
+          cr.dragStartSlideIndex >= 0 &&
+          cr.dragStartSlideIndex !== cr.current &&
+          Math.abs(cr.dragStartSlideIndex - cr.current) === 1 &&
+          cr.wasDragging
+        ) {
+          const toRight = cr.dragStartSlideIndex > cr.current;
+          const towardCenter = (toRight && dragDx < 0) || (!toRight && dragDx > 0);
+          targetIndex = towardCenter ? cr.dragStartSlideIndex : cr.current;
+        } else {
+          // Loop wrap at boundaries
+          if (cr.loop && cr.wasDragging) {
+            if (cr.current === cr.total - 1 && releaseVelocity < -50) {
+              targetIndex = 0;
+            } else if (cr.current === 0 && releaseVelocity > 50) {
+              targetIndex = cr.total - 1;
+            }
+          }
+          // Normal snap resolution
+          if (targetIndex === undefined) {
+            targetIndex = this.#findSnapTarget(cr.trackOffset, releaseVelocity);
+          }
+        }
+
+        // Navigate or snap back
+        if (targetIndex !== cr.current) {
+          this.#goToSlide(targetIndex);
+        } else {
+          const snapPos = cr.snapPositions[cr.current] || 0;
+          if (Math.abs(cr.trackOffset - snapPos) > 1) {
+            this.#attractTo(snapPos);
+          }
+        }
+      };
+      track.addEventListener('pointerup', onPointerUp);
+      cr.cleanups.push(() => track.removeEventListener('pointerup', onPointerUp));
+
+      const onPointerCancel = () => {
+        if (!cr.isDragging) return;
+        cr.isDragging = false;
+        this.#setBlur(0);
+        this.#attractTo(cr.snapPositions[cr.current] || 0);
+      };
+      track.addEventListener('pointercancel', onPointerCancel);
+      cr.cleanups.push(() => track.removeEventListener('pointercancel', onPointerCancel));
+
+      // ── Click navigation (click non-active slide to navigate) ──
+      const onClick = e => {
+        if (cr.wasDragging) { cr.wasDragging = false; e.preventDefault(); return; }
+        const slideEl = e.target.closest('[data-carousel-slide]');
+        if (!slideEl || slideEl.hasAttribute('data-active')) return;
+        const idx = parseInt(slideEl.getAttribute('data-carousel-slide'), 10);
+        if (!isNaN(idx)) this.#goToSlide(idx);
+      };
+      track.addEventListener('click', onClick);
+      cr.cleanups.push(() => track.removeEventListener('click', onClick));
+
+      // ── Prev/Next buttons ──
+      if (cr.prevBtn) {
+        const fn = e => { e.stopPropagation(); this.#goToSlide(cr.current - 1); };
+        cr.prevBtn.addEventListener('click', fn);
+        cr.cleanups.push(() => cr.prevBtn.removeEventListener('click', fn));
+      }
+      if (cr.nextBtn) {
+        const fn = e => { e.stopPropagation(); this.#goToSlide(cr.current + 1); };
+        cr.nextBtn.addEventListener('click', fn);
+        cr.cleanups.push(() => cr.nextBtn.removeEventListener('click', fn));
+      }
+
+      // ── Indicator dots ──
+      cr.indicators.forEach(dot => {
+        const fn = () => {
+          const idx = parseInt(dot.getAttribute('data-carousel-dot'), 10);
+          if (!isNaN(idx)) this.#goToSlide(idx);
+        };
+        dot.addEventListener('click', fn);
+        cr.cleanups.push(() => dot.removeEventListener('click', fn));
+      });
+
+      // ── Custom cursor ──
+      if (cr.useCursor && cr.cursorEl) {
+        this.#initCustomCursor();
+      }
+
+      // ── Autoplay ──
+      if (cr.autoplayOn) {
+        if (cr.playBtn) {
+          const fn = () => this.#toggleAutoplay();
+          cr.playBtn.addEventListener('click', fn);
+          cr.cleanups.push(() => cr.playBtn.removeEventListener('click', fn));
+        }
+
+        const onEnter = () => {
+          if (cr.useCursor && cr.hasFinePointer) this.#showCursor();
+          if (cr.isPlaying) this.#pauseAutoplay();
+        };
+        const onLeave = () => {
+          this.#hideCursor();
+        };
+        root.addEventListener('mouseenter', onEnter);
+        root.addEventListener('mouseleave', onLeave);
+        cr.cleanups.push(() => {
+          root.removeEventListener('mouseenter', onEnter);
+          root.removeEventListener('mouseleave', onLeave);
+        });
+
+        const onFocusIn = () => { if (cr.isPlaying) this.#pauseAutoplay(); };
+        root.addEventListener('focusin', onFocusIn);
+        cr.cleanups.push(() => root.removeEventListener('focusin', onFocusIn));
+
+        if (!cr.prefersReducedMotion) this.#startAutoplay();
+      } else {
+        // Cursor events for non-autoplay carousels
+        if (cr.useCursor) {
+          const onEnter = e => {
+            cr.targetCursorX = cr.cursorX = e.clientX;
+            cr.targetCursorY = cr.cursorY = e.clientY;
+            this.#showCursor();
+          };
+          const onMove = e => {
+            cr.targetCursorX = e.clientX;
+            cr.targetCursorY = e.clientY;
+          };
+          const onLeave = () => this.#hideCursor();
+          root.addEventListener('mouseenter', onEnter);
+          root.addEventListener('mousemove', onMove);
+          root.addEventListener('mouseleave', onLeave);
+          cr.cleanups.push(() => {
+            root.removeEventListener('mouseenter', onEnter);
+            root.removeEventListener('mousemove', onMove);
+            root.removeEventListener('mouseleave', onLeave);
+          });
+        }
+      }
+
+      // ── ResizeObserver ──
+      if (typeof ResizeObserver !== 'undefined') {
+        const ro = new ResizeObserver(() => {
+          if (!cr.isDragging && !cr.isAnimating) {
+            this.#measureSnaps();
+            cr.trackOffset = cr.snapPositions[cr.current] || 0;
+            track.style.transform = `translate3d(${cr.trackOffset}px,0,0)`;
+          }
+        });
+        ro.observe(root);
+        cr.cleanups.push(() => ro.disconnect());
+      }
+    }
+
+    // ─── Snap positions ───
+    // Computed from measured slide widths + gaps — stable across navigation.
+
+    #measureSnaps() {
+      const cr = this.#cr;
+      if (!cr) return;
+      const widths = cr.slides.map(s => s.offsetWidth);
+      const gap = cr.slides.length > 1
+        ? cr.slides[1].getBoundingClientRect().left - cr.slides[0].getBoundingClientRect().right
+        : 0;
+      cr.snapPositions = [0];
+      let cumWidth = 0;
+      for (let i = 1; i < cr.slides.length; i++) {
+        cumWidth += widths[i - 1];
+        cr.snapPositions.push(-(cumWidth + gap * i));
+      }
+    }
+
+    // ─── Snap target resolution ───
+    // Projects position forward by velocity, finds nearest snap among neighbors.
+
+    #findSnapTarget(position, vel) {
+      const cr = this.#cr;
+      if (!cr) return 0;
+      const candidates = [cr.current];
+      if (cr.current > 0) candidates.push(cr.current - 1);
+      if (cr.current < cr.total - 1) candidates.push(cr.current + 1);
+
+      const projected = position + vel * MOMENTUM_FACTOR;
+      let best = cr.current;
+      let bestDist = Infinity;
+      for (const idx of candidates) {
+        const d = Math.abs(projected - (cr.snapPositions[idx] || 0));
+        if (d < bestDist) { bestDist = d; best = idx; }
+      }
+      return best;
+    }
+
+    // ─── Attraction animation (Embla-style) ───
+    // Exponential decay toward target — smooth, no overshoot.
+
+    #attractTo(target, onSettle) {
+      const cr = this.#cr;
+      if (!cr) return;
+      if (cr.animFrame) cancelAnimationFrame(cr.animFrame);
+      cr.velocity = 0;
+
+      if (cr.prefersReducedMotion) {
+        cr.trackOffset = target;
+        cr.track.style.transform = `translate3d(${target}px,0,0)`;
+        this.#setBlur(0);
+        if (onSettle) onSettle();
+        return;
+      }
+
+      cr.isAnimating = true;
+      const startTime = performance.now();
+
+      const settle = () => {
+        cr.trackOffset = target;
+        cr.track.style.transform = `translate3d(${target}px,0,0)`;
+        cr.velocity = 0;
+        cr.isAnimating = false;
+        cr.animFrame = null;
+        this.#setBlur(0);
+        if (onSettle) onSettle();
+      };
+
+      const tick = () => {
+        if (performance.now() - startTime > 2000) { settle(); return; }
+
+        const displacement = target - cr.trackOffset;
+        cr.velocity += displacement / ATTRACT_DURATION;
+        cr.velocity *= ATTRACT_FRICTION;
+        cr.trackOffset += cr.velocity;
+
+        cr.track.style.transform = `translate3d(${cr.trackOffset}px,0,0)`;
+
+        if (cr.useBlur) this.#setBlur(Math.min(Math.abs(cr.velocity) * 0.15, MAX_BLUR));
+
+        if (Math.abs(cr.velocity) < SETTLE_THRESHOLD && Math.abs(displacement) < SETTLE_THRESHOLD) {
+          settle();
+          return;
+        }
+        cr.animFrame = requestAnimationFrame(tick);
+      };
+      cr.animFrame = requestAnimationFrame(tick);
+    }
+
+    // ─── Navigation ───
+
+    #goToSlide(index, fromAutoplay) {
+      const cr = this.#cr;
+      if (!cr) return;
+
+      // Clamp or wrap
+      if (cr.loop) {
+        if (index < 0) index = cr.total - 1;
+        if (index >= cr.total) index = 0;
+      } else {
+        if (index < 0) index = 0;
+        if (index >= cr.total) index = cr.total - 1;
+      }
+      if (index === cr.current && !cr.isAnimating) return;
+
+      const isFarJump = Math.abs(index - cr.current) > 1;
+      cr.current = index;
+      this.#applySlideVisuals();
+      this.#updateLiveRegion();
+      this.#updateNavButtons();
+
+      const target = cr.snapPositions[cr.current] || 0;
+
+      if (isFarJump) {
+        this.#farJumpAnimation(target, fromAutoplay);
+      } else {
+        this.#attractTo(target, () => {
+          if (cr.autoplayOn && cr.isPlaying && fromAutoplay) this.#startAutoplay();
+        });
+      }
+
+      if (!fromAutoplay) this.#pauseAutoplay();
+      this._emit('cx-change', { index, total: cr.total });
+    }
+
+    // ─── Far-jump animation ───
+    // Motion-blur wipe: overshoot → teleport under max blur → decelerate into target.
+
+    #farJumpAnimation(target, fromAutoplay) {
+      const cr = this.#cr;
+      if (!cr) return;
+
+      if (cr.animFrame) { cancelAnimationFrame(cr.animFrame); cr.animFrame = null; }
+
+      if (cr.prefersReducedMotion) {
+        cr.trackOffset = target;
+        cr.track.style.transform = `translate3d(${target}px,0,0)`;
+        if (cr.autoplayOn && cr.isPlaying && fromAutoplay) this.#startAutoplay();
+        return;
+      }
+
+      cr.isAnimating = true;
+
+      const slideWidth = cr.slides[0] ? cr.slides[0].offsetWidth : 300;
+      const overshoot = slideWidth * 0.6;
+      const goingForward = (cr.current === 0);
+      const dir = goingForward ? -1 : 1;
+
+      const phase1Start = cr.trackOffset;
+      const phase1Target = cr.trackOffset + dir * overshoot;
+      let startTime = performance.now();
+      const PHASE1_MS = 80;
+      const PHASE2_MS = 60;
+
+      const setWipeBlur = (amount) => {
+        if (!cr.blurFilter) return;
+        cr.blurFilter.setAttribute('stdDeviation', amount.toFixed(1) + ',0');
+        const filterUrl = `url(#${cr.id}-blur)`;
+        cr.slides.forEach(s => {
+          s.style.filter = amount > 0.1 ? filterUrl : '';
+        });
+      };
+
+      const phase1 = (now) => {
+        const elapsed = now - startTime;
+        const t = Math.min(elapsed / PHASE1_MS, 1);
+        const eased = t * t;
+        cr.trackOffset = phase1Start + (phase1Target - phase1Start) * eased;
+        cr.track.style.transform = `translate3d(${cr.trackOffset}px,0,0)`;
+        setWipeBlur(MAX_BLUR * eased);
+
+        if (t < 1) {
+          cr.animFrame = requestAnimationFrame(phase1);
+        } else {
+          cr.trackOffset = target - dir * overshoot;
+          cr.track.style.transform = `translate3d(${cr.trackOffset}px,0,0)`;
+          startTime = performance.now();
+          cr.animFrame = requestAnimationFrame(phase2);
+        }
+      };
+
+      const phase2 = (now) => {
+        const elapsed = now - startTime;
+        const t = Math.min(elapsed / PHASE2_MS, 1);
+        const eased = 1 - (1 - t) * (1 - t);
+        cr.trackOffset = (target - dir * overshoot) + dir * overshoot * eased;
+        cr.track.style.transform = `translate3d(${cr.trackOffset}px,0,0)`;
+        setWipeBlur(MAX_BLUR * (1 - eased));
+
+        if (t < 1) {
+          cr.animFrame = requestAnimationFrame(phase2);
+        } else {
+          cr.trackOffset = target;
+          cr.track.style.transform = `translate3d(${target}px,0,0)`;
+          setWipeBlur(0);
+          cr.isAnimating = false;
+          cr.animFrame = null;
+          if (cr.autoplayOn && cr.isPlaying && fromAutoplay) this.#startAutoplay();
+        }
+      };
+
+      cr.animFrame = requestAnimationFrame(phase1);
+    }
+
+    // ─── Slide visuals ───
+
+    #applySlideVisuals() {
+      const cr = this.#cr;
+      if (!cr) return;
+
+      cr.slides.forEach((s, i) => {
+        if (i === cr.current) {
+          s.setAttribute('data-active', '');
+          s.removeAttribute('aria-hidden');
+          s.style.opacity = ACTIVE_OPACITY;
+          s.style.transform = ACTIVE_SCALE;
+        } else {
+          s.removeAttribute('data-active');
+          s.setAttribute('aria-hidden', 'true');
+          s.style.opacity = INACTIVE_OPACITY;
+          s.style.transform = INACTIVE_SCALE;
+        }
+      });
+      this.#updateIndicators();
+    }
+
+    #updateIndicators() {
+      const cr = this.#cr;
+      if (!cr || !cr.indicators.length) return;
+
+      const isDot = cr.indicators[0].classList.contains('rounded-full');
+      cr.indicators.forEach((dot, i) => {
+        if (i === cr.current) {
+          dot.setAttribute('data-active', '');
+          dot.style.background = 'var(--color-text)';
+          dot.style.width = isDot ? '10px' : '28px';
+          dot.style.height = isDot ? '10px' : '8px';
+        } else {
+          dot.removeAttribute('data-active');
+          dot.style.background = 'color-mix(in oklch, var(--color-text-muted) 40%, transparent)';
+          dot.style.width = isDot ? '8px' : '20px';
+          dot.style.height = isDot ? '8px' : '8px';
+        }
+      });
+    }
+
+    #updateLiveRegion() {
+      const cr = this.#cr;
+      if (!cr || !cr.liveRegion) return;
+      cr.liveRegion.textContent = `Slide ${cr.current + 1} of ${cr.total}`;
+    }
+
+    #updateNavButtons() {
+      const cr = this.#cr;
+      if (!cr) return;
+      if (cr.loop) return; // Both always enabled in loop mode
+
+      if (cr.prevBtn) {
+        if (cr.current === 0) {
+          cr.prevBtn.setAttribute('disabled', '');
+          cr.prevBtn.style.opacity = '0.3';
+          cr.prevBtn.style.pointerEvents = 'none';
+        } else {
+          cr.prevBtn.removeAttribute('disabled');
+          cr.prevBtn.style.opacity = '';
+          cr.prevBtn.style.pointerEvents = '';
+        }
+      }
+      if (cr.nextBtn) {
+        if (cr.current === cr.total - 1) {
+          cr.nextBtn.setAttribute('disabled', '');
+          cr.nextBtn.style.opacity = '0.3';
+          cr.nextBtn.style.pointerEvents = 'none';
+        } else {
+          cr.nextBtn.removeAttribute('disabled');
+          cr.nextBtn.style.opacity = '';
+          cr.nextBtn.style.pointerEvents = '';
+        }
+      }
+    }
+
+    // ─── Motion blur (SVG per-slide, matches SSR) ───
+
+    #setBlur(amount) {
+      const cr = this.#cr;
+      if (!cr || !cr.blurFilter) return;
+      cr.blurFilter.setAttribute('stdDeviation', amount.toFixed(1) + ',0');
+      cr.slides.forEach((s, i) => {
+        if (i !== cr.current && amount > 0.1) {
+          s.style.filter = `url(#${cr.id}-blur)`;
+        } else {
+          s.style.filter = '';
+        }
+      });
+    }
+
+    // ─── Smart text contrast ───
+    // Canvas pixel analysis of bottom 35% of slide image — matches SSR behavior.
+
+    #analyzeSlideContrast(slide) {
+      const origImg = slide.querySelector('img');
+      if (!origImg) return;
+      const doAnalysis = () => {
+        const testImg = new Image();
+        testImg.crossOrigin = 'anonymous';
+        testImg.onload = () => this.#analyzePixels(slide, testImg);
+        testImg.onerror = () => this.#applyContrast(slide, 0.3);
+        testImg.src = origImg.src;
+      };
+      if (origImg.complete && origImg.naturalWidth > 0) doAnalysis();
+      else origImg.addEventListener('load', doAnalysis, { once: true });
+    }
+
+    #analyzePixels(slide, img) {
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d', { willReadFrequently: true });
+      if (!ctx) { this.#applyContrast(slide, 0.3); return; }
+      const w = img.naturalWidth || img.width;
+      const h = img.naturalHeight || img.height;
+      if (w === 0 || h === 0) return;
+      const sampleH = Math.floor(h * 0.35);
+      const sw = Math.min(w, 80);
+      const sh = Math.min(sampleH, 30);
+      canvas.width = sw;
+      canvas.height = sh;
+      try {
+        ctx.drawImage(img, 0, h - sampleH, w, sampleH, 0, 0, sw, sh);
+        const data = ctx.getImageData(0, 0, sw, sh).data;
+        let totalLum = 0;
+        for (let i = 0; i < data.length; i += 4) {
+          totalLum += (0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2]) / 255;
+        }
+        this.#applyContrast(slide, totalLum / (data.length / 4));
+      } catch (_) { this.#applyContrast(slide, 0.3); }
+    }
+
+    #applyContrast(slide, luminance) {
+      const dark = luminance < 0.5;
+      const title = slide.querySelector('[data-carousel-title]');
+      const subtitle = slide.querySelector('[data-carousel-subtitle]');
+      const link = slide.querySelector('[data-carousel-link]');
+      if (title) title.style.color = dark ? 'white' : 'rgba(15,23,42,0.95)';
+      if (subtitle) subtitle.style.color = dark ? 'rgba(255,255,255,0.75)' : 'rgba(15,23,42,0.6)';
+      if (link) link.style.color = dark ? 'rgba(255,255,255,0.9)' : 'rgba(15,23,42,0.85)';
+    }
+
+    // ─── Custom cursor (morphing pill with velocity lerp) ───
+
+    #initCustomCursor() {
+      const cr = this.#cr;
+      if (!cr || !cr.cursorEl) return;
+
+      // Cursor events are managed via root mouseenter/mousemove/mouseleave
+      // which are already set up in the autoplay and non-autoplay branches.
+    }
+
+    #showCursor() {
+      const cr = this.#cr;
+      if (!cr || !cr.useCursor || !cr.cursorEl) return;
+      cr.cursorEl.style.opacity = '1';
+      cr.cursorVisible = true;
+      cr.root.style.cursor = 'none';
+      if (!cr.cursorFrame) cr.cursorFrame = requestAnimationFrame(() => this.#tickCursor());
+    }
+
+    #hideCursor() {
+      const cr = this.#cr;
+      if (!cr || !cr.cursorEl) return;
+      cr.cursorEl.style.opacity = '0';
+      cr.cursorVisible = false;
+      cr.root.style.cursor = '';
+      if (cr.cursorFrame) { cancelAnimationFrame(cr.cursorFrame); cr.cursorFrame = null; }
+    }
+
+    #tickCursor() {
+      const cr = this.#cr;
+      if (!cr || !cr.useCursor || !cr.cursorEl) return;
+
+      cr.cursorX += (cr.targetCursorX - cr.cursorX) * CURSOR_LERP;
+      cr.cursorY += (cr.targetCursorY - cr.cursorY) * CURSOR_LERP;
+      const moveVel = cr.targetCursorX - cr.prevMoveX;
+      cr.prevMoveX = cr.targetCursorX;
+
+      // Morph shape based on velocity
+      const morphTarget = (cr.isDragging || cr.isAnimating) ? Math.min(Math.abs(moveVel * 3) / 600, 1) : 0;
+      const morphLerp = morphTarget > cr.cursorMorphAmount ? 0.35 : 0.25;
+      cr.cursorMorphAmount += (morphTarget - cr.cursorMorphAmount) * morphLerp;
+      const w = CURSOR_SIZE + (CURSOR_MORPH_W - CURSOR_SIZE) * cr.cursorMorphAmount;
+      const r = 9999 - (9999 - 12) * cr.cursorMorphAmount;
+      cr.cursorW = w;
+      cr.cursorEl.style.width = w.toFixed(1) + 'px';
+      cr.cursorEl.style.height = CURSOR_SIZE + 'px';
+      cr.cursorEl.style.borderRadius = r.toFixed(0) + 'px';
+      cr.cursorEl.style.transform = `translate3d(${(cr.cursorX - cr.cursorW / 2).toFixed(1)}px,${(cr.cursorY - CURSOR_SIZE / 2).toFixed(1)}px,0)`;
+
+      if (cr.cursorVisible) cr.cursorFrame = requestAnimationFrame(() => this.#tickCursor());
+    }
+
+    // ─── Autoplay (rAF-driven with progress bar) ───
+
+    #startAutoplay() {
+      const cr = this.#cr;
+      if (!cr || !cr.autoplayOn || cr.prefersReducedMotion) return;
+      cr.isPlaying = true;
+      const startTime = performance.now();
+      if (cr.playBtn) {
+        cr.playBtn.setAttribute('aria-label', 'Stop automatic slide show');
+        cr.playBtn.innerHTML = '<svg aria-hidden="true" class="size-5 md:size-6" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>';
+      }
+      if (cr.liveRegion) cr.liveRegion.setAttribute('aria-live', 'off');
+
+      const tick = (now) => {
+        if (!cr.isPlaying) return;
+        const progress = (now - startTime) / cr.interval;
+        if (cr.progressFill) cr.progressFill.style.width = (Math.min(progress, 1) * 100) + '%';
+        if (progress >= 1) {
+          this.#goToSlide(cr.current + 1, true);
+          return;
+        }
+        cr.autoplayTimer = requestAnimationFrame(tick);
+      };
+      cr.autoplayTimer = requestAnimationFrame(tick);
+    }
+
+    #pauseAutoplay() {
+      const cr = this.#cr;
+      if (!cr) return;
+      cr.isPlaying = false;
+      if (cr.autoplayTimer) { cancelAnimationFrame(cr.autoplayTimer); cr.autoplayTimer = null; }
+      if (cr.progressFill) cr.progressFill.style.width = '0%';
+      if (cr.playBtn) {
+        cr.playBtn.setAttribute('aria-label', 'Start automatic slide show');
+        cr.playBtn.innerHTML = '<svg aria-hidden="true" class="size-5 md:size-6" viewBox="0 0 24 24" fill="currentColor"><polygon points="6,4 20,12 6,20"/></svg>';
+      }
+      if (cr.liveRegion) cr.liveRegion.setAttribute('aria-live', 'polite');
+    }
+
+    #toggleAutoplay() {
+      const cr = this.#cr;
+      if (!cr) return;
+      if (cr.isPlaying) this.#pauseAutoplay(); else this.#startAutoplay();
+    }
+
+    // ─── Keyboard ──
+
+    #handleKey(e) {
+      const cr = this.#cr;
+      if (!cr) return;
+      switch (e.key) {
+        case 'ArrowLeft':
+          e.preventDefault();
+          this.#goToSlide(cr.current - 1);
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          this.#goToSlide(cr.current + 1);
+          break;
+        case 'Home':
+          e.preventDefault();
+          this.#goToSlide(0);
+          break;
+        case 'End':
+          e.preventDefault();
+          this.#goToSlide(cr.total - 1);
+          break;
+      }
+    }
+
+    // ─── Public imperative API ───
+    next() { this.#goToSlide(this.#cr?.current + 1 ?? 0); }
+    prev() { this.#goToSlide(this.#cr?.current - 1 ?? 0); }
+    goTo(index) { this.#goToSlide(index); }
+
+    // ─── Cleanup ───
+
+    #cleanup() {
+      const cr = this.#cr;
+      if (!cr) return;
+      cr.isPlaying = false;
+      if (cr.animFrame) cancelAnimationFrame(cr.animFrame);
+      if (cr.autoplayTimer) cancelAnimationFrame(cr.autoplayTimer);
+      if (cr.cursorFrame) cancelAnimationFrame(cr.cursorFrame);
+      for (const fn of cr.cleanups) fn();
+      this.#cr = null;
+    }
+  }
+
+  customElements.define('cx-carousel', CxCarousel);
+  return CxCarousel;
+}