@yewdiel21/motion-kit 0.10.0 → 0.15.0

package/src/components/scratch-card/engine.ts

@@ -0,0 +1,257 @@
+import { gsap, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { confetti } from '../../motion/confetti';
+import { blurIn } from '../../motion/micro';
+
+/*
+ * Scratch card: real HTML content (a coupon) under a metallic cover drawn on a
+ * canvas with a sheen and "Rasca aquí". The pointer scratches it with a round
+ * brush; progress is measured by sampling the cover. Past the threshold the
+ * rest dissolves with a blur, the content pops in and confetti flies. While
+ * covered the content is inert; a "Revelar" button is the way in for the
+ * keyboard and screen readers, and the reveal is announced. Without a 2D
+ * canvas the cover is plain CSS and the button reveals it.
+ */
+
+export interface ScratchCardOptions {
+  /** Share of the cover to scratch before it reveals itself (default .5). */
+  threshold?: number;
+  /** Brush radius in px (default 22). */
+  brush?: number;
+  coverLabel?: string;
+  revealLabel?: string;
+  revealedLabel?: string;
+  /** Confetti on reveal (default true). */
+  celebrate?: boolean;
+  onProgress?: (progress: number) => void;
+  onReveal?: () => void;
+}
+
+export interface ScratchCardInstance extends Instance {
+  reveal(): void;
+  reset(): void;
+  readonly revealed: boolean;
+  readonly progress: number;
+}
+
+export function createScratchCard(root: HTMLElement | null, options: ScratchCardOptions = {}): ScratchCardInstance {
+  if (!root) return inert({ reveal() {}, reset() {}, revealed: false, progress: 0 });
+  registerMotion();
+  const scope = createScope();
+  const threshold = Number.isFinite(options.threshold) ? Math.min(0.95, Math.max(0.05, options.threshold!)) : 0.5;
+  const brush = Number.isFinite(options.brush) && options.brush! > 2 ? options.brush! : 22;
+  const coverText = options.coverLabel ?? 'Rasca aquí';
+
+  let content = root.querySelector<HTMLElement>('[data-mk-scratch-content]');
+  const made: Element[] = [];
+  scope.add(() => made.forEach((element) => element.remove()));
+  if (!content) {
+    content = document.createElement('div');
+    content.dataset.mkScratchContent = '';
+    content.append(...root.childNodes);
+    root.append(content);
+    scope.add(() => {
+      root.append(...content!.childNodes);
+      content!.remove();
+    });
+  }
+  const cover = document.createElement('div');
+  cover.dataset.mkScratchCover = '';
+  cover.setAttribute('aria-hidden', 'true');
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d', { willReadFrequently: true } as CanvasRenderingContext2DSettings);
+  if (context) cover.append(canvas);
+  else {
+    cover.dataset.mkScratchFallback = '';
+    cover.textContent = coverText;
+  }
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.dataset.mkScratchReveal = '';
+  button.textContent = options.revealLabel ?? 'Revelar';
+  const live = document.createElement('span');
+  live.className = 'mk-sr-only';
+  live.setAttribute('role', 'status');
+  root.append(cover, button, live);
+  made.push(cover, button, live);
+  scope.attr(root, 'data-mk-ready', '');
+
+  let revealed = false;
+  let progress = 0;
+  let size = { width: 0, height: 0, ratio: 1 };
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  let party: ReturnType<typeof confetti> | null = null;
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    party?.stop();
+  });
+
+  const cover_ = (covered: boolean) => {
+    content!.inert = covered;
+    if (covered) content!.setAttribute('aria-hidden', 'true');
+    else content!.removeAttribute('aria-hidden');
+  };
+  scope.add(() => cover_(false));
+
+  /** Paint the metallic cover with its sheen and label. */
+  const paint = () => {
+    if (!context) return;
+    const box = root.getBoundingClientRect();
+    const ratio = Math.min(2, globalThis.devicePixelRatio || 1);
+    size = { width: Math.max(1, Math.round(box.width)), height: Math.max(1, Math.round(box.height)), ratio };
+    canvas.width = size.width * ratio;
+    canvas.height = size.height * ratio;
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    context.globalCompositeOperation = 'source-over';
+    const base = context.createLinearGradient(0, 0, size.width, size.height);
+    base.addColorStop(0, '#c9ccd2');
+    base.addColorStop(0.45, '#eef0f3');
+    base.addColorStop(0.55, '#d7dadf');
+    base.addColorStop(1, '#a9adb5');
+    context.fillStyle = base;
+    context.fillRect(0, 0, size.width, size.height);
+    // Fine grain, like foil.
+    for (let i = 0; i < (size.width * size.height) / 60; i++) {
+      context.fillStyle = Math.random() > 0.5 ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.06)';
+      context.fillRect(Math.random() * size.width, Math.random() * size.height, 1, 1);
+    }
+    context.fillStyle = 'rgba(40, 42, 48, 0.75)';
+    // The cover speaks in the page's typeface.
+    const family = getComputedStyle(root).fontFamily || 'system-ui, sans-serif';
+    context.font = `600 ${Math.max(14, Math.min(22, size.width / 14))}px ${family}`;
+    context.textAlign = 'center';
+    context.textBaseline = 'middle';
+    context.fillText(coverText, size.width / 2, size.height / 2);
+  };
+
+  const measure = () => {
+    if (!context || !size.width) return progress;
+    const data = context.getImageData(0, 0, canvas.width, canvas.height).data;
+    const step = 8 * size.ratio;
+    let clear = 0;
+    let total = 0;
+    for (let y = 0; y < canvas.height; y += step) {
+      for (let x = 0; x < canvas.width; x += step) {
+        total += 1;
+        if (data[(Math.floor(y) * canvas.width + Math.floor(x)) * 4 + 3]! < 64) clear += 1;
+      }
+    }
+    return total ? clear / total : 0;
+  };
+
+  const reveal = () => {
+    if (scope.disposed || revealed) return;
+    revealed = true;
+    progress = 1;
+    scope.attr(root, 'data-mk-revealed', '');
+    cover_(false);
+    button.hidden = true;
+    live.textContent = options.revealedLabel ?? 'Premio revelado';
+    const done = () => {
+      cover.hidden = true;
+    };
+    if (reduced()) done();
+    else {
+      keep(gsap.to(cover, { opacity: 0, filter: 'blur(12px)', scale: 1.04, duration: 0.5, ease: 'power2.out', onComplete: done }));
+      keep(blurIn(content, { from: 'pop', delay: 0.1 }));
+      if (options.celebrate !== false) party = confetti(root, { count: 60 });
+    }
+    options.onReveal?.();
+    root.dispatchEvent(new CustomEvent('mk:reveal', { bubbles: true }));
+  };
+
+  const reset = () => {
+    if (scope.disposed) return;
+    revealed = false;
+    progress = 0;
+    scope.attr(root, 'data-mk-revealed', null);
+    gsap.killTweensOf(cover);
+    gsap.set(cover, { clearProps: 'all' });
+    cover.hidden = false;
+    button.hidden = false;
+    cover_(true);
+    live.textContent = '';
+    paint();
+  };
+
+  let drawing = false;
+  let last: { x: number; y: number } | null = null;
+  let moves = 0;
+  const scratch = (event: PointerEvent) => {
+    if (!context || revealed) return;
+    const box = canvas.getBoundingClientRect();
+    const point = { x: event.clientX - box.left, y: event.clientY - box.top };
+    context.globalCompositeOperation = 'destination-out';
+    context.lineCap = 'round';
+    context.lineJoin = 'round';
+    context.lineWidth = brush * 2;
+    context.beginPath();
+    context.moveTo(last?.x ?? point.x, last?.y ?? point.y);
+    context.lineTo(point.x, point.y);
+    context.stroke();
+    last = point;
+    // Sampling every move would be wasteful: every fifth is enough.
+    if (++moves % 5) return;
+    progress = measure();
+    options.onProgress?.(progress);
+    root.dispatchEvent(new CustomEvent('mk:progress', { bubbles: true, detail: { progress } }));
+    if (progress >= threshold) reveal();
+  };
+  scope.on(canvas, 'pointerdown', (event) => {
+    const pointer = event as PointerEvent;
+    drawing = true;
+    last = null;
+    canvas.setPointerCapture?.(pointer.pointerId);
+    scratch(pointer);
+  });
+  scope.on(canvas, 'pointermove', (event) => {
+    if (drawing) scratch(event as PointerEvent);
+  });
+  const stop = () => {
+    drawing = false;
+    last = null;
+  };
+  scope.on(canvas, 'pointerup', stop);
+  scope.on(canvas, 'pointercancel', stop);
+  scope.on(button, 'click', reveal);
+  if (typeof ResizeObserver === 'function' && context) {
+    let width = 0;
+    scope.observe(
+      new ResizeObserver(() => {
+        const next = Math.round(root.getBoundingClientRect().width);
+        if (next === width || revealed) return;
+        width = next;
+        paint();
+      }),
+    ).observe(root);
+  }
+  cover_(true);
+  paint();
+  // A web font that arrives late repaints the untouched cover.
+  let alive = true;
+  scope.add(() => (alive = false));
+  document.fonts?.ready.then(() => {
+    if (alive && !revealed && progress === 0) paint();
+  });
+
+  return {
+    reveal,
+    reset,
+    get revealed() {
+      return revealed;
+    },
+    get progress() {
+      return progress;
+    },
+    destroy: () => scope.dispose(),
+  };
+}

package/src/components/scratch-card/react.tsx

@@ -0,0 +1,40 @@
+'use client';
+import { useRef, type HTMLAttributes, type MutableRefObject, type ReactNode } from 'react';
+import { useIsomorphicLayoutEffect, useLatest } from '../../react/use-recipe';
+import { createScratchCard, type ScratchCardInstance, type ScratchCardOptions } from './engine';
+
+export interface ScratchCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onProgress'>, ScratchCardOptions {
+  /** What the cover hides. */
+  children?: ReactNode;
+  instanceRef?: MutableRefObject<ScratchCardInstance | null>;
+}
+
+/** <ScratchCard onReveal={claim}><Coupon code="OTOÑO25" /></ScratchCard>. */
+export function ScratchCard({ threshold, brush, coverLabel, revealLabel, revealedLabel, celebrate, onProgress, onReveal, instanceRef, className, children, ...props }: ScratchCardProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const progress = useLatest(onProgress);
+  const reveal = useLatest(onReveal);
+  useIsomorphicLayoutEffect(() => {
+    const created = createScratchCard(ref.current, {
+      threshold,
+      brush,
+      coverLabel,
+      revealLabel,
+      revealedLabel,
+      celebrate,
+      onProgress: (value) => progress.current?.(value),
+      onReveal: () => reveal.current?.(),
+    });
+    if (instanceRef) instanceRef.current = created;
+    return () => {
+      created.destroy();
+      if (instanceRef) instanceRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [threshold, brush, coverLabel, revealLabel, revealedLabel, celebrate]);
+  return (
+    <div {...props} ref={ref} className={['mk-scratch-card', className].filter(Boolean).join(' ')}>
+      <div data-mk-scratch-content="">{children}</div>
+    </div>
+  );
+}

package/src/components/scratch-card/scratch-card.css

@@ -0,0 +1,74 @@
+/* scratch-card — a Melonmind card (20 px radius) whose content hides under a metallic cover; a small glass
+   "Revelar" pill sits on top for the keyboard. */
+.mk-scratch-card,
+mk-scratch-card {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border-radius: 20px;
+  background: var(--mk-surface-1);
+  box-shadow: inset 0 0 0 1px var(--mk-outline-soft);
+  isolation: isolate;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-content] {
+  position: relative;
+  min-height: 9rem;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-cover] {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  cursor: crosshair;
+  touch-action: none;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-cover] canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-cover][data-mk-scratch-fallback] {
+  display: grid;
+  place-items: center;
+  background: linear-gradient(135deg, #c9ccd2, #eef0f3 45%, #d7dadf 55%, #a9adb5);
+  color: rgb(40 42 48 / 0.75);
+  font-weight: 600;
+  cursor: default;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-cover][hidden] {
+  display: none;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-reveal] {
+  position: absolute;
+  right: 0.75rem;
+  bottom: 0.75rem;
+  z-index: 2;
+  min-height: 2.25rem;
+  padding: 0 0.9rem;
+  border: 0;
+  border-radius: 64px;
+  background: rgb(20 21 24 / 0.72);
+  box-shadow:
+    inset 1px 1px 1px rgb(255 255 255 / 0.14),
+    inset -1px -1px 1px rgb(255 255 255 / 0.05);
+  backdrop-filter: blur(12px);
+  color: #fff;
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-reveal]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+:is(.mk-scratch-card, mk-scratch-card) [data-mk-scratch-reveal][hidden] {
+  display: none;
+}

package/src/components/scroll-island/README.md

@@ -0,0 +1,34 @@
+# scroll-island
+
+Qué hace, en una frase.
+
+Origen: archivo del kit y parámetros (tiempos, curvas).
+
+## HTML / Astro
+
+```html
+<mk-scroll-island></mk-scroll-island>
+<script>
+  import { defineElements } from '@yewdiel21/motion-kit/elements';
+  defineElements(['mk-scroll-island']);
+</script>
+```
+
+## React
+
+```tsx
+<ScrollIsland />
+```
+
+## Opciones
+
+| Opción | Atributo | Por defecto | Qué hace |
+|---|---|---|---|
+
+## Variables CSS
+
+`--mk-scroll-island-radius`
+
+## Accesibilidad
+
+Roles, foco y teclado. Con movimiento reducido…

package/src/components/scroll-island/element.ts

@@ -0,0 +1,16 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createScrollIsland, type ScrollIslandInstance } from './engine';
+
+/**
+ * <mk-scroll-island class="mk-scroll-island" style="height: 24rem; overflow: auto">…</mk-scroll-island>
+ * or <mk-scroll-island page></mk-scroll-island> for the page. Emits mk:section ({section}).
+ */
+export class MkScrollIslandElement extends MkElement<ScrollIslandInstance> {
+  static options: Record<string, OptionType> = { sections: 'string', reach: 'number', idle: 'number', page: 'boolean' };
+
+  protected create(options: Record<string, unknown>) {
+    return createScrollIsland(options.page ? document.documentElement : this, options);
+  }
+}
+
+export const defineScrollIsland = () => defineElement('mk-scroll-island', MkScrollIslandElement);

package/src/components/scroll-island/engine.ts

@@ -0,0 +1,252 @@
+import { gsap, EASE, registerMotion } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import { createScope } from '../../core/scope';
+import { inert, type Instance } from '../../core/types';
+import { blurIn } from '../../motion/micro';
+
+/*
+ * Scroll island: the scroller's own bar is hidden and a thin pill takes its
+ * place, shown while scrolling (it fades .9 s after). When the mouse comes near
+ * the edge, the pill swells into an island, a dark capsule (like iOS's island)
+ * with the percentage read and the current section (its last heading above a
+ * third of the view), on Melonmind's swing; dragging the island scrolls, a click
+ * on the rail glides there. Far from the edge it shrinks back into the bar. It
+ * follows the page or any scrolling element; touch keeps the native scrolling.
+ * The island is decorative (aria-hidden): keyboard and assistive tech scroll as
+ * always.
+ */
+
+export interface ScrollIslandOptions {
+  /** Headings that name the sections (default 'h2, h3'); false: only the percentage. */
+  sections?: string | false;
+  /** How near the edge, in px, the pointer turns the bar into the island (default 56). */
+  reach?: number;
+  /** ms the bar stays after scrolling stops (default 900). */
+  idle?: number;
+  /** Follow the page's scroll (default: when the root is <html> or <body>). */
+  page?: boolean;
+  /** The current section changed (its heading's text, or null before the first). */
+  onSection?: (section: string | null) => void;
+}
+
+export interface ScrollIslandInstance extends Instance {
+  /** Measure again (after the content changed size). */
+  refresh(): void;
+}
+
+type State = 'hidden' | 'bar' | 'island';
+/** Space kept from the scroller's edges. */
+const INSET = 6;
+const BAR_WIDTH = 4;
+const ISLAND_HEIGHT = 36;
+const MIN_BAR = 28;
+
+export function createScrollIsland(root: HTMLElement | null, options: ScrollIslandOptions = {}): ScrollIslandInstance {
+  if (!root) return inert({ refresh() {} });
+  registerMotion();
+  const scope = createScope();
+  const page = options.page ?? (root === document.documentElement || root === document.body);
+  const scroller = page ? ((document.scrollingElement as HTMLElement | null) ?? document.documentElement) : root;
+  const reach = Number.isFinite(options.reach) ? Math.max(8, options.reach!) : 56;
+  const idle = Number.isFinite(options.idle) ? Math.max(0, options.idle!) : 900;
+  const marked = page ? document.documentElement : root;
+  // The scroller's own bar hides (scroll-island.css).
+  scope.attr(marked, 'data-mk-scroll-island-host', '');
+
+  const island = document.createElement('div');
+  island.dataset.mkScrollIsland = '';
+  island.dataset.mkState = 'hidden';
+  island.setAttribute('aria-hidden', 'true');
+  const rail = document.createElement('span');
+  rail.dataset.mkIslandRail = '';
+  const thumb = document.createElement('div');
+  thumb.dataset.mkIslandThumb = '';
+  const content = document.createElement('span');
+  content.dataset.mkIslandContent = '';
+  const percent = document.createElement('span');
+  percent.dataset.mkIslandPercent = '';
+  const sectionText = document.createElement('span');
+  sectionText.dataset.mkIslandSection = '';
+  content.append(percent, sectionText);
+  thumb.append(content);
+  island.append(rail, thumb);
+  document.body.append(island);
+  scope.add(() => island.remove());
+
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+  });
+
+  /** The scroller's box on screen (the window for the page). */
+  const frame = () => (page ? { top: 0, left: 0, right: innerWidth, bottom: innerHeight, height: innerHeight } : root.getBoundingClientRect());
+  const track = () => {
+    const box = frame();
+    return { top: box.top + INSET, height: Math.max(0, box.height - INSET * 2), right: box.right, left: box.left, bottom: box.bottom };
+  };
+  const range = () => Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+  const scrollable = () => range() > 1;
+  const progress = () => (range() ? Math.min(1, Math.max(0, scroller.scrollTop / range())) : 0);
+
+  let state: State = 'hidden';
+  let section: string | null | undefined;
+  let hideTimer: ReturnType<typeof setTimeout> | undefined;
+  let dragging: { id: number; offset: number } | null = null;
+  scope.add(() => clearTimeout(hideTimer));
+
+  const headings = () => (options.sections === false ? [] : [...(page ? document.body : root).querySelectorAll<HTMLElement>(options.sections ?? 'h2, h3')]);
+  const currentSection = () => {
+    const box = frame();
+    const line = box.top + scroller.clientHeight * 0.3;
+    let found: HTMLElement | null = null;
+    for (const heading of headings()) if (heading.getBoundingClientRect().top <= line) found = heading;
+    return found?.textContent?.trim() || null;
+  };
+
+  /** Where the thumb goes: the bar's length follows the view; the island is a fixed capsule. */
+  const geometry = (as: State) => {
+    const { height } = track();
+    const size = as === 'island' ? ISLAND_HEIGHT : Math.max(MIN_BAR, Math.min(height, height * (scroller.clientHeight / Math.max(1, scroller.scrollHeight))));
+    const top = (height - size) * progress();
+    if (as !== 'island') return { top, height: size, width: BAR_WIDTH, borderRadius: BAR_WIDTH / 2 };
+    return { top, height: size, width: Math.max(ISLAND_HEIGHT, content.scrollWidth + 28), borderRadius: size / 2 };
+  };
+
+  const place = () => {
+    const box = track();
+    Object.assign(island.style, { top: `${box.top}px`, height: `${box.height}px`, left: `${box.left}px`, width: `${Math.max(0, box.right - box.left - 4)}px` });
+  };
+
+  const paintText = () => {
+    percent.textContent = `${Math.round(progress() * 100)} %`;
+    const now = currentSection();
+    if (now !== section) {
+      const first = section === undefined;
+      section = now;
+      sectionText.textContent = now ?? '';
+      sectionText.hidden = !now;
+      if (!first && state === 'island' && !reduced()) keep(blurIn(sectionText, { from: 'soft', duration: 0.3 }));
+      options.onSection?.(now);
+      root.dispatchEvent(new CustomEvent('mk:section', { bubbles: true, detail: { section: now } }));
+    }
+  };
+
+  /** Move to a state; `follow` keeps the thumb on the position without a tween (while scrolling or dragging). */
+  const go = (next: State, follow = false) => {
+    if (!scrollable()) next = 'hidden';
+    const changed = next !== state;
+    state = next;
+    island.dataset.mkState = next;
+    place();
+    const shape = geometry(next === 'hidden' ? 'bar' : next);
+    if (follow || !changed || reduced()) {
+      gsap.killTweensOf(thumb);
+      gsap.set(thumb, shape);
+      return;
+    }
+    gsap.killTweensOf(thumb);
+    keep(gsap.to(thumb, { ...shape, duration: next === 'island' ? 0.42 : 0.32, ease: next === 'island' ? EASE.swatch : 'power3.out' }));
+  };
+
+  const settleLater = () => {
+    clearTimeout(hideTimer);
+    hideTimer = setTimeout(() => {
+      if (state === 'bar' && !dragging) go('hidden');
+    }, idle);
+  };
+
+  const onScroll = () => {
+    paintText();
+    if (state === 'island' || dragging) go(state, true);
+    else {
+      go('bar', true);
+      settleLater();
+    }
+  };
+  scope.on(page ? window : root, 'scroll', onScroll, { passive: true });
+  // A scroller inside the page moves with the page: the overlay follows it.
+  if (!page) scope.on(window, 'scroll', () => state !== 'hidden' && place(), { passive: true, capture: true });
+  scope.on(window, 'resize', () => go(state, true));
+
+  const near = (x: number, y: number) => {
+    const box = track();
+    return y >= box.top - INSET && y <= box.top + box.height + INSET && x <= box.right && box.right - x <= reach;
+  };
+  scope.on(window, 'pointermove', (event) => {
+    const move = event as PointerEvent;
+    if (move.pointerType === 'touch') return;
+    if (dragging) {
+      if (move.pointerId !== dragging.id) return;
+      const box = track();
+      const shape = geometry('island');
+      const ratio = (move.clientY - box.top - dragging.offset) / Math.max(1, box.height - shape.height);
+      scroller.scrollTop = Math.min(1, Math.max(0, ratio)) * range();
+      onScroll();
+      return;
+    }
+    if (near(move.clientX, move.clientY)) {
+      if (state !== 'island' && scrollable()) {
+        clearTimeout(hideTimer);
+        paintText();
+        go('island');
+      }
+    } else if (state === 'island') {
+      const box = track();
+      // A little slack, so the island does not flicker at the border of its reach.
+      if (box.right - move.clientX > reach + 24 || move.clientY < box.top - 24 || move.clientY > box.top + box.height + 24) {
+        go('bar');
+        settleLater();
+      }
+    }
+  });
+
+  // Dragging the island scrolls; a click on the rail glides there.
+  scope.on(thumb, 'pointerdown', (event) => {
+    const down = event as PointerEvent;
+    if (state !== 'island' || down.button !== 0) return;
+    down.preventDefault();
+    down.stopPropagation();
+    const box = thumb.getBoundingClientRect();
+    dragging = { id: down.pointerId, offset: down.clientY - box.top || ISLAND_HEIGHT / 2 };
+    island.setAttribute('data-mk-dragging', '');
+    try {
+      thumb.setPointerCapture(down.pointerId);
+    } catch {
+      // jsdom and synthetic events have no active pointer to capture.
+    }
+  });
+  const release = (event: Event) => {
+    if (!dragging || (event as PointerEvent).pointerId !== dragging.id) return;
+    dragging = null;
+    island.removeAttribute('data-mk-dragging');
+  };
+  scope.on(window, 'pointerup', release);
+  scope.on(window, 'pointercancel', release);
+  scope.on(rail, 'pointerdown', (event) => {
+    const down = event as PointerEvent;
+    if (state !== 'island' || down.button !== 0) return;
+    down.preventDefault();
+    const box = track();
+    const size = geometry('island').height;
+    const ratio = (down.clientY - box.top - size / 2) / Math.max(1, box.height - size);
+    scroller.scrollTo({ top: Math.round(Math.min(1, Math.max(0, ratio)) * range()), behavior: reduced() ? 'auto' : 'smooth' });
+  });
+
+  paintText();
+  go('hidden');
+
+  return {
+    refresh: () => {
+      paintText();
+      go(state, true);
+    },
+    destroy: () => scope.dispose(),
+  };
+}