@internetarchive/elements 0.2.13-webdev-9022.2 → 0.2.13

package/dist/src/elements/ia-image-viewer/image-viewer-gestures.js

@@ -1,254 +0,0 @@
-import { prefersReducedMotion } from '../../util/prefers-reduced-motion.js';
-/** Minimum horizontal travel before a gesture counts as a swipe at all */
-const SWIPE_THRESHOLD = 30;
-/** Minimum swipe distance (fraction of width) to commit navigation */
-const SWIPE_COMMIT_FRACTION = 0.25;
-/** Minimum velocity (px/ms) for a flick to commit regardless of distance */
-const SWIPE_FLICK_VELOCITY = 0.3;
-/** Longest the track takes to settle after the finger lifts */
-const SETTLE_MAX_MS = 300;
-/** How long a snap-back takes when the swipe didn't go far enough */
-const SNAP_BACK_MS = 200;
-/** Horizontal wheel travel that adds up to one navigation */
-const WHEEL_THRESHOLD = 80;
-/** How long after an animation to keep ignoring wheel inertia */
-const WHEEL_COOLDOWN_MS = 300;
-/** How far a finger travels before the gesture locks in as horizontal */
-const SWIPE_LOCK_DISTANCE = 10;
-/**
- * Touch, wheel and keyboard navigation for the image viewer.
- *
- * A drag is driven imperatively: it translates the track directly and asks the
- * viewer to insert neighbouring slides by hand, because a re-render mid-gesture
- * would replace the element the touch started on and the browser would fire
- * touchcancel.
- */
-export class ImageViewerGestures {
-    constructor(host) {
-        /** Whether a drag is in progress. The viewer reads this while rendering. */
-        this.dragging = false;
-        /**
-         * The element the touch and wheel listeners are currently on, so they can
-         * follow the image area when it's replaced. A boolean wouldn't: the area is
-         * removed whenever the image list empties, and a later refill renders a
-         * different element.
-         */
-        this.listeningTo = null;
-        this.touchStartX = null;
-        this.touchStartY = null;
-        this.touchStartTime = 0;
-        /** Whether the current gesture has locked in as a horizontal swipe */
-        this.swiping = false;
-        /** Set when a swipe completes, so the tap it ends on doesn't open the image */
-        this.swipeHandled = false;
-        this.dragOffsetX = 0;
-        this.wheelDeltaX = 0;
-        this.wheelAnimating = false;
-        this.wheelAnimationEndTime = 0;
-        this.onTouchStart = (e) => {
-            if (this.host.imageCount <= 1)
-                return;
-            this.host.settleIfAnimating();
-            const touch = e.touches[0];
-            this.touchStartX = touch.clientX;
-            this.touchStartY = touch.clientY;
-            this.touchStartTime = e.timeStamp;
-            this.swiping = false;
-            this.dragOffsetX = 0;
-        };
-        this.onTouchMove = (e) => {
-            if (this.touchStartX === null || this.touchStartY === null)
-                return;
-            const dx = e.touches[0].clientX - this.touchStartX;
-            const dy = e.touches[0].clientY - this.touchStartY;
-            const locksHorizontal = Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > SWIPE_LOCK_DISTANCE;
-            if (!this.swiping && locksHorizontal) {
-                this.swiping = true;
-                this.dragging = true;
-                this.host.preloadAroundIndex(this.host.currentIndex);
-                this.host.insertDragSlides();
-            }
-            if (!this.swiping)
-                return;
-            e.preventDefault();
-            this.dragOffsetX = dx;
-            this.applyDragTransform();
-        };
-        this.onTouchEnd = (e) => {
-            if (this.touchStartX === null)
-                return;
-            const dx = e.changedTouches[0].clientX - this.touchStartX;
-            const elapsed = e.timeStamp - this.touchStartTime;
-            this.touchStartX = null;
-            this.touchStartY = null;
-            if (!this.swiping)
-                return;
-            this.swiping = false;
-            const track = this.host.slideTrack;
-            const area = this.host.imageArea;
-            if (!track || !area) {
-                this.dragging = false;
-                return;
-            }
-            const width = area.offsetWidth;
-            const velocity = Math.abs(dx) / Math.max(elapsed, 1);
-            const pastThreshold = Math.abs(dx) > width * SWIPE_COMMIT_FRACTION;
-            const flicked = velocity > SWIPE_FLICK_VELOCITY;
-            const shouldCommit = (pastThreshold || flicked) && Math.abs(dx) >= SWIPE_THRESHOLD;
-            const direction = dx < 0 ? 'next' : 'prev';
-            this.swipeHandled = true;
-            // The rest of the way is proportional to how far the finger already got,
-            // so a nearly complete swipe finishes almost instantly.
-            const remainingFraction = (width - Math.abs(dx)) / width;
-            const completionDuration = shouldCommit
-                ? Math.round(Math.max(100, Math.min(SETTLE_MAX_MS, remainingFraction * SETTLE_MAX_MS)))
-                : SNAP_BACK_MS;
-            const finalTransform = !shouldCommit
-                ? 'translateX(-100%)'
-                : direction === 'next'
-                    ? 'translateX(-200%)'
-                    : 'translateX(0%)';
-            const finish = () => {
-                track.style.transition = '';
-                track.style.transform = '';
-                if (shouldCommit)
-                    this.host.commitDrag(direction);
-                this.dragging = false;
-                this.dragOffsetX = 0;
-                // Remove the hand-inserted slides before the viewer renders, since it
-                // doesn't track them and would leave them in the track.
-                this.host.removeDragSlides();
-                this.host.preloadAroundIndex(this.host.currentIndex);
-                this.host.requestUpdate();
-            };
-            // With reduced motion there's nothing to transition, and a zero-duration
-            // transition doesn't fire transitionend, so settle straight away rather
-            // than waiting on the timeout that would otherwise cover for it.
-            if (prefersReducedMotion()) {
-                track.style.transform = finalTransform;
-                finish();
-                return;
-            }
-            track.style.transition = `transform ${completionDuration}ms ease-out`;
-            track.style.transform = finalTransform;
-            let settled = false;
-            const onTransitionDone = () => {
-                if (settled)
-                    return;
-                settled = true;
-                track.removeEventListener('transitionend', onTransitionDone);
-                finish();
-            };
-            track.addEventListener('transitionend', onTransitionDone);
-            // Fallback in case transitionend doesn't fire
-            setTimeout(onTransitionDone, completionDuration + 50);
-        };
-        this.onWheel = (e) => {
-            if (this.host.imageCount <= 1)
-                return;
-            // Ignore vertical-dominant scrolls
-            if (Math.abs(e.deltaY) > Math.abs(e.deltaX))
-                return;
-            if (e.deltaX === 0)
-                return;
-            e.preventDefault();
-            // Block during animation and for a brief cooldown after to absorb inertia
-            const inCooldown = performance.now() - this.wheelAnimationEndTime < WHEEL_COOLDOWN_MS;
-            if (this.wheelAnimating || inCooldown) {
-                this.wheelDeltaX = 0;
-                return;
-            }
-            this.wheelDeltaX += e.deltaX;
-            if (Math.abs(this.wheelDeltaX) < WHEEL_THRESHOLD)
-                return;
-            const forward = this.wheelDeltaX > 0;
-            this.wheelDeltaX = 0;
-            this.wheelAnimating = true;
-            if (forward)
-                this.host.showNext();
-            else
-                this.host.showPrevious();
-        };
-        this.onKeydown = (e) => {
-            if (this.host.imageCount <= 1)
-                return;
-            const target = e.target;
-            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')
-                return;
-            if (target.isContentEditable)
-                return;
-            if (e.key === 'ArrowLeft')
-                this.host.showPrevious();
-            else if (e.key === 'ArrowRight')
-                this.host.showNext();
-        };
-        this.host = host;
-        host.addController(this);
-    }
-    hostConnected() {
-        document.addEventListener('keydown', this.onKeydown);
-        // Reconnecting doesn't schedule an update, so the gesture listeners have
-        // to be put back here rather than waiting for one.
-        this.attachListeners();
-    }
-    hostUpdated() {
-        this.attachListeners();
-    }
-    hostDisconnected() {
-        document.removeEventListener('keydown', this.onKeydown);
-        this.detachListeners();
-    }
-    /**
-     * Whether a swipe just ended on this tap, meaning the click that follows it
-     * should be ignored rather than treated as opening the image.
-     */
-    consumeSwipeTap() {
-        if (!this.swipeHandled)
-            return false;
-        this.swipeHandled = false;
-        return true;
-    }
-    /** Lets wheel navigation resume once a slide animation has finished. */
-    animationSettled() {
-        this.wheelAnimating = false;
-        this.wheelAnimationEndTime = performance.now();
-        this.wheelDeltaX = 0;
-    }
-    /**
-     * Points the gesture listeners at the current image area, moving them off
-     * the previous one. The area isn't rendered until there are images to show,
-     * and it's torn down and rebuilt whenever the list empties and refills, so
-     * this runs on every update and re-attaches whenever the element changes.
-     */
-    attachListeners() {
-        const area = this.host.imageArea;
-        if (area === this.listeningTo)
-            return;
-        this.detachListeners();
-        if (!area)
-            return;
-        this.listeningTo = area;
-        area.addEventListener('touchstart', this.onTouchStart, { passive: true });
-        area.addEventListener('touchmove', this.onTouchMove, { passive: false });
-        area.addEventListener('touchend', this.onTouchEnd, { passive: true });
-        area.addEventListener('wheel', this.onWheel, { passive: false });
-    }
-    detachListeners() {
-        const area = this.listeningTo;
-        if (!area)
-            return;
-        area.removeEventListener('touchstart', this.onTouchStart);
-        area.removeEventListener('touchmove', this.onTouchMove);
-        area.removeEventListener('touchend', this.onTouchEnd);
-        area.removeEventListener('wheel', this.onWheel);
-        this.listeningTo = null;
-    }
-    /** Applies the drag offset to the track during touch gestures. */
-    applyDragTransform() {
-        const track = this.host.slideTrack;
-        if (!this.dragging || !track)
-            return;
-        track.style.transform = `translateX(calc(-100% + ${this.dragOffsetX}px))`;
-    }
-}
-//# sourceMappingURL=image-viewer-gestures.js.map

package/dist/src/elements/ia-image-viewer/image-viewer-gestures.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-viewer-gestures.js","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/image-viewer-gestures.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ReactiveController, ReactiveControllerHost } from 'lit';\n\nimport { prefersReducedMotion } from '@src/util/prefers-reduced-motion';\nimport type { SlideDirection } from './models';\n\n/** What the gesture controller needs from the viewer it drives. */\nexport type ImageViewerGestureHost = ReactiveControllerHost & {\n  readonly imageCount: number;\n\n  readonly currentIndex: number;\n\n  /** The element gestures are tracked against, once it has rendered. */\n  readonly imageArea?: HTMLElement;\n\n  /** The element a drag translates. */\n  readonly slideTrack?: HTMLElement;\n\n  /** Commits an in-flight slide animation so a new one starts from rest. */\n  settleIfAnimating(): void;\n\n  showNext(): void;\n\n  showPrevious(): void;\n\n  preloadAroundIndex(index: number): void;\n\n  /** Adds the neighbouring slides a drag reveals on either side. */\n  insertDragSlides(): void;\n\n  removeDragSlides(): void;\n\n  /** Advances to the neighbouring image a completed drag landed on. */\n  commitDrag(direction: SlideDirection): void;\n};\n\n/** Minimum horizontal travel before a gesture counts as a swipe at all */\nconst SWIPE_THRESHOLD = 30;\n\n/** Minimum swipe distance (fraction of width) to commit navigation */\nconst SWIPE_COMMIT_FRACTION = 0.25;\n\n/** Minimum velocity (px/ms) for a flick to commit regardless of distance */\nconst SWIPE_FLICK_VELOCITY = 0.3;\n\n/** Longest the track takes to settle after the finger lifts */\nconst SETTLE_MAX_MS = 300;\n\n/** How long a snap-back takes when the swipe didn't go far enough */\nconst SNAP_BACK_MS = 200;\n\n/** Horizontal wheel travel that adds up to one navigation */\nconst WHEEL_THRESHOLD = 80;\n\n/** How long after an animation to keep ignoring wheel inertia */\nconst WHEEL_COOLDOWN_MS = 300;\n\n/** How far a finger travels before the gesture locks in as horizontal */\nconst SWIPE_LOCK_DISTANCE = 10;\n\n/**\n * Touch, wheel and keyboard navigation for the image viewer.\n *\n * A drag is driven imperatively: it translates the track directly and asks the\n * viewer to insert neighbouring slides by hand, because a re-render mid-gesture\n * would replace the element the touch started on and the browser would fire\n * touchcancel.\n */\nexport class ImageViewerGestures implements ReactiveController {\n  /** Whether a drag is in progress. The viewer reads this while rendering. */\n  dragging = false;\n\n  private host: ImageViewerGestureHost;\n\n  /**\n   * The element the touch and wheel listeners are currently on, so they can\n   * follow the image area when it's replaced. A boolean wouldn't: the area is\n   * removed whenever the image list empties, and a later refill renders a\n   * different element.\n   */\n  private listeningTo: HTMLElement | null = null;\n\n  private touchStartX: number | null = null;\n\n  private touchStartY: number | null = null;\n\n  private touchStartTime = 0;\n\n  /** Whether the current gesture has locked in as a horizontal swipe */\n  private swiping = false;\n\n  /** Set when a swipe completes, so the tap it ends on doesn't open the image */\n  private swipeHandled = false;\n\n  private dragOffsetX = 0;\n\n  private wheelDeltaX = 0;\n\n  private wheelAnimating = false;\n\n  private wheelAnimationEndTime = 0;\n\n  constructor(host: ImageViewerGestureHost) {\n    this.host = host;\n    host.addController(this);\n  }\n\n  hostConnected(): void {\n    document.addEventListener('keydown', this.onKeydown);\n    // Reconnecting doesn't schedule an update, so the gesture listeners have\n    // to be put back here rather than waiting for one.\n    this.attachListeners();\n  }\n\n  hostUpdated(): void {\n    this.attachListeners();\n  }\n\n  hostDisconnected(): void {\n    document.removeEventListener('keydown', this.onKeydown);\n    this.detachListeners();\n  }\n\n  /**\n   * Whether a swipe just ended on this tap, meaning the click that follows it\n   * should be ignored rather than treated as opening the image.\n   */\n  consumeSwipeTap(): boolean {\n    if (!this.swipeHandled) return false;\n    this.swipeHandled = false;\n    return true;\n  }\n\n  /** Lets wheel navigation resume once a slide animation has finished. */\n  animationSettled(): void {\n    this.wheelAnimating = false;\n    this.wheelAnimationEndTime = performance.now();\n    this.wheelDeltaX = 0;\n  }\n\n  /**\n   * Points the gesture listeners at the current image area, moving them off\n   * the previous one. The area isn't rendered until there are images to show,\n   * and it's torn down and rebuilt whenever the list empties and refills, so\n   * this runs on every update and re-attaches whenever the element changes.\n   */\n  private attachListeners(): void {\n    const area = this.host.imageArea;\n    if (area === this.listeningTo) return;\n    this.detachListeners();\n    if (!area) return;\n\n    this.listeningTo = area;\n    area.addEventListener('touchstart', this.onTouchStart, { passive: true });\n    area.addEventListener('touchmove', this.onTouchMove, { passive: false });\n    area.addEventListener('touchend', this.onTouchEnd, { passive: true });\n    area.addEventListener('wheel', this.onWheel, { passive: false });\n  }\n\n  private detachListeners(): void {\n    const area = this.listeningTo;\n    if (!area) return;\n    area.removeEventListener('touchstart', this.onTouchStart);\n    area.removeEventListener('touchmove', this.onTouchMove);\n    area.removeEventListener('touchend', this.onTouchEnd);\n    area.removeEventListener('wheel', this.onWheel);\n    this.listeningTo = null;\n  }\n\n  private onTouchStart = (e: TouchEvent): void => {\n    if (this.host.imageCount <= 1) return;\n    this.host.settleIfAnimating();\n    const touch = e.touches[0];\n    this.touchStartX = touch.clientX;\n    this.touchStartY = touch.clientY;\n    this.touchStartTime = e.timeStamp;\n    this.swiping = false;\n    this.dragOffsetX = 0;\n  };\n\n  private onTouchMove = (e: TouchEvent): void => {\n    if (this.touchStartX === null || this.touchStartY === null) return;\n    const dx = e.touches[0].clientX - this.touchStartX;\n    const dy = e.touches[0].clientY - this.touchStartY;\n\n    const locksHorizontal =\n      Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > SWIPE_LOCK_DISTANCE;\n    if (!this.swiping && locksHorizontal) {\n      this.swiping = true;\n      this.dragging = true;\n      this.host.preloadAroundIndex(this.host.currentIndex);\n      this.host.insertDragSlides();\n    }\n\n    if (!this.swiping) return;\n    e.preventDefault();\n\n    this.dragOffsetX = dx;\n    this.applyDragTransform();\n  };\n\n  private onTouchEnd = (e: TouchEvent): void => {\n    if (this.touchStartX === null) return;\n    const dx = e.changedTouches[0].clientX - this.touchStartX;\n    const elapsed = e.timeStamp - this.touchStartTime;\n    this.touchStartX = null;\n    this.touchStartY = null;\n\n    if (!this.swiping) return;\n    this.swiping = false;\n\n    const track = this.host.slideTrack;\n    const area = this.host.imageArea;\n    if (!track || !area) {\n      this.dragging = false;\n      return;\n    }\n\n    const width = area.offsetWidth;\n    const velocity = Math.abs(dx) / Math.max(elapsed, 1);\n    const pastThreshold = Math.abs(dx) > width * SWIPE_COMMIT_FRACTION;\n    const flicked = velocity > SWIPE_FLICK_VELOCITY;\n    const shouldCommit =\n      (pastThreshold || flicked) && Math.abs(dx) >= SWIPE_THRESHOLD;\n    const direction: SlideDirection = dx < 0 ? 'next' : 'prev';\n\n    this.swipeHandled = true;\n\n    // The rest of the way is proportional to how far the finger already got,\n    // so a nearly complete swipe finishes almost instantly.\n    const remainingFraction = (width - Math.abs(dx)) / width;\n    const completionDuration = shouldCommit\n      ? Math.round(\n          Math.max(\n            100,\n            Math.min(SETTLE_MAX_MS, remainingFraction * SETTLE_MAX_MS),\n          ),\n        )\n      : SNAP_BACK_MS;\n\n    const finalTransform = !shouldCommit\n      ? 'translateX(-100%)'\n      : direction === 'next'\n        ? 'translateX(-200%)'\n        : 'translateX(0%)';\n\n    const finish = (): void => {\n      track.style.transition = '';\n      track.style.transform = '';\n\n      if (shouldCommit) this.host.commitDrag(direction);\n\n      this.dragging = false;\n      this.dragOffsetX = 0;\n      // Remove the hand-inserted slides before the viewer renders, since it\n      // doesn't track them and would leave them in the track.\n      this.host.removeDragSlides();\n      this.host.preloadAroundIndex(this.host.currentIndex);\n      this.host.requestUpdate();\n    };\n\n    // With reduced motion there's nothing to transition, and a zero-duration\n    // transition doesn't fire transitionend, so settle straight away rather\n    // than waiting on the timeout that would otherwise cover for it.\n    if (prefersReducedMotion()) {\n      track.style.transform = finalTransform;\n      finish();\n      return;\n    }\n\n    track.style.transition = `transform ${completionDuration}ms ease-out`;\n    track.style.transform = finalTransform;\n\n    let settled = false;\n    const onTransitionDone = (): void => {\n      if (settled) return;\n      settled = true;\n      track.removeEventListener('transitionend', onTransitionDone);\n      finish();\n    };\n\n    track.addEventListener('transitionend', onTransitionDone);\n    // Fallback in case transitionend doesn't fire\n    setTimeout(onTransitionDone, completionDuration + 50);\n  };\n\n  /** Applies the drag offset to the track during touch gestures. */\n  private applyDragTransform(): void {\n    const track = this.host.slideTrack;\n    if (!this.dragging || !track) return;\n    track.style.transform = `translateX(calc(-100% + ${this.dragOffsetX}px))`;\n  }\n\n  private onWheel = (e: WheelEvent): void => {\n    if (this.host.imageCount <= 1) return;\n\n    // Ignore vertical-dominant scrolls\n    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) return;\n    if (e.deltaX === 0) return;\n\n    e.preventDefault();\n\n    // Block during animation and for a brief cooldown after to absorb inertia\n    const inCooldown =\n      performance.now() - this.wheelAnimationEndTime < WHEEL_COOLDOWN_MS;\n    if (this.wheelAnimating || inCooldown) {\n      this.wheelDeltaX = 0;\n      return;\n    }\n\n    this.wheelDeltaX += e.deltaX;\n    if (Math.abs(this.wheelDeltaX) < WHEEL_THRESHOLD) return;\n\n    const forward = this.wheelDeltaX > 0;\n    this.wheelDeltaX = 0;\n    this.wheelAnimating = true;\n    if (forward) this.host.showNext();\n    else this.host.showPrevious();\n  };\n\n  private onKeydown = (e: KeyboardEvent): void => {\n    if (this.host.imageCount <= 1) return;\n    const target = e.target as HTMLElement;\n    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;\n    if (target.isContentEditable) return;\n    if (e.key === 'ArrowLeft') this.host.showPrevious();\n    else if (e.key === 'ArrowRight') this.host.showNext();\n  };\n}\n"]}

package/dist/src/elements/ia-image-viewer/models.d.ts

@@ -1,20 +0,0 @@
-/**
- * One image the viewer can show.
- *
- * Deliberately plain data. The viewer doesn't know where the images come from
- * or how their URLs were built, so a host can feed it archive.org derivatives,
- * a local directory listing, or anything else.
- */
-export type ImageViewerImage = {
-    /** Identifies the image within the set. Used as the key in change events. */
-    name: string;
-    /** Where to load the image from, and where the link points. */
-    url: string;
-    /** Alt text. Falls back to `name` when absent. */
-    title?: string;
-};
-/** Which way the viewer is moving through the set. */
-export type SlideDirection = 'next' | 'prev';
-/** Which edge the viewer just wrapped around. */
-export type WrapEdge = 'start' | 'end';
-//# sourceMappingURL=models.d.ts.map

package/dist/src/elements/ia-image-viewer/models.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"models.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/models.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,6EAA6E;IAC7E,IAAI,EAAE,MAAM,CAAC;IAEb,+DAA+D;IAC/D,GAAG,EAAE,MAAM,CAAC;IAEZ,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,sDAAsD;AACtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;AAE7C,iDAAiD;AACjD,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC"}

package/dist/src/elements/ia-image-viewer/models.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=models.js.map

package/dist/src/elements/ia-image-viewer/models.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"models.js","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/models.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * One image the viewer can show.\n *\n * Deliberately plain data. The viewer doesn't know where the images come from\n * or how their URLs were built, so a host can feed it archive.org derivatives,\n * a local directory listing, or anything else.\n */\nexport type ImageViewerImage = {\n  /** Identifies the image within the set. Used as the key in change events. */\n  name: string;\n\n  /** Where to load the image from, and where the link points. */\n  url: string;\n\n  /** Alt text. Falls back to `name` when absent. */\n  title?: string;\n};\n\n/** Which way the viewer is moving through the set. */\nexport type SlideDirection = 'next' | 'prev';\n\n/** Which edge the viewer just wrapped around. */\nexport type WrapEdge = 'start' | 'end';\n"]}

package/dist/src/util/prefers-reduced-motion.d.ts

@@ -1,10 +0,0 @@
-/**
- * Whether the user has asked the system for reduced motion.
- *
- * Read at the moment an animation would start rather than cached, so changing
- * the system setting takes effect without a reload. CSS handles the purely
- * decorative animations on its own; this is for the places where JavaScript
- * schedules or waits on one.
- */
-export declare function prefersReducedMotion(): boolean;
-//# sourceMappingURL=prefers-reduced-motion.d.ts.map

package/dist/src/util/prefers-reduced-motion.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"prefers-reduced-motion.d.ts","sourceRoot":"","sources":["../../../src/util/prefers-reduced-motion.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAI9C"}

package/dist/src/util/prefers-reduced-motion.js

@@ -1,12 +0,0 @@
-/**
- * Whether the user has asked the system for reduced motion.
- *
- * Read at the moment an animation would start rather than cached, so changing
- * the system setting takes effect without a reload. CSS handles the purely
- * decorative animations on its own; this is for the places where JavaScript
- * schedules or waits on one.
- */
-export function prefersReducedMotion() {
-    return (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false);
-}
-//# sourceMappingURL=prefers-reduced-motion.js.map

package/dist/src/util/prefers-reduced-motion.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"prefers-reduced-motion.js","sourceRoot":"","sources":["../../../src/util/prefers-reduced-motion.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,UAAU,oBAAoB;IAClC,OAAO,CACL,MAAM,CAAC,UAAU,EAAE,CAAC,kCAAkC,CAAC,CAAC,OAAO,IAAI,KAAK,CACzE,CAAC;AACJ,CAAC","sourcesContent":["/**\n * Whether the user has asked the system for reduced motion.\n *\n * Read at the moment an animation would start rather than cached, so changing\n * the system setting takes effect without a reload. CSS handles the purely\n * decorative animations on its own; this is for the places where JavaScript\n * schedules or waits on one.\n */\nexport function prefersReducedMotion(): boolean {\n  return (\n    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false\n  );\n}\n"]}