ngwr 6.0.0 → 7.0.0

package/fesm2022/ngwr-rotating-text.mjs

@@ -0,0 +1,256 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, signal, computed, inject, ElementRef, DestroyRef, PLATFORM_ID, afterNextRender, effect, ViewEncapsulation, Component } from '@angular/core';
+import { WrPlatform } from 'ngwr/platform';
+import { numAttr } from 'ngwr/utils';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ *
+ * Angular adaptation of the RotatingText effect by David Haz / reactbits.dev.
+ * Original: https://www.reactbits.dev/text-animations/rotating-text
+ *
+ * The reactbits version uses `motion/react` + `AnimatePresence`. This
+ * port is dependency-free — vanilla DOM split + Web Animations API for
+ * the enter/exit transitions.
+ */
+const DEFAULT_EASING = 'cubic-bezier(0.16, 1, 0.3, 1)';
+function graphemes(text) {
+    if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
+        const seg = new Intl.Segmenter('en', { granularity: 'grapheme' });
+        return Array.from(seg.segment(text), s => s.segment);
+    }
+    return Array.from(text);
+}
+function splitWords(text, by) {
+    if (!text)
+        return [];
+    if (by === 'lines') {
+        const lines = text.split('\n');
+        return lines.map((line, i) => ({ characters: [line], needsSpace: i !== lines.length - 1 }));
+    }
+    if (by === 'words') {
+        const words = text.split(' ');
+        return words.map((w, i) => ({ characters: [w], needsSpace: i !== words.length - 1 }));
+    }
+    // characters: split each word into graphemes, keep word boundaries for spacing.
+    const words = text.split(' ');
+    return words.map((w, i) => ({ characters: graphemes(w), needsSpace: i !== words.length - 1 }));
+}
+/**
+ * Cycles through a list of strings, animating each transition
+ * character-by-character (or word/line). Auto-advances on a timer by
+ * default; can also be controlled imperatively via `next()` /
+ * `previous()` / `jumpTo()` / `reset()`.
+ *
+ * @example
+ * ```html
+ * <wr-rotating-text [texts]="['design', 'ship', 'iterate']" />
+ *
+ * // Manual control:
+ * @ViewChild(WrRotatingText) rotator!: WrRotatingText;
+ * onClick(): void { this.rotator.next(); }
+ * ```
+ *
+ * @see https://www.reactbits.dev/text-animations/rotating-text
+ */
+class WrRotatingText {
+    /** Strings to cycle. Required. */
+    texts = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "texts" }] : /* istanbul ignore next */ []));
+    /** Auto-advance interval in ms. @default 2000 */
+    rotationInterval = input(2000, { ...(ngDevMode ? { debugName: "rotationInterval" } : /* istanbul ignore next */ {}), transform: numAttr(2000) });
+    /** Granularity of the split. @default 'characters' */
+    splitBy = input('characters', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "splitBy" }] : /* istanbul ignore next */ []));
+    /** Auto-advance on a timer. @default true */
+    auto = input(true, { ...(ngDevMode ? { debugName: "auto" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Loop back to the first string after the last. @default true */
+    loop = input(true, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Per-swap tween duration in seconds. @default 0.6 */
+    duration = input(0.6, { ...(ngDevMode ? { debugName: "duration" } : /* istanbul ignore next */ {}), transform: numAttr(0.6) });
+    /** CSS easing of the per-piece tween. @default 'cubic-bezier(0.16, 1, 0.3, 1)' (~power3.out) */
+    easing = input(DEFAULT_EASING, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "easing" }] : /* istanbul ignore next */ []));
+    /** Per-piece stagger in seconds. @default 0 */
+    staggerDuration = input(0, { ...(ngDevMode ? { debugName: "staggerDuration" } : /* istanbul ignore next */ {}), transform: numAttr(0) });
+    /** Stagger origin. @default 'first' */
+    staggerFrom = input('first', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "staggerFrom" }] : /* istanbul ignore next */ []));
+    /** Emitted with the new index on every rotation. */
+    nextChange = output();
+    index = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    current = computed(() => {
+        const arr = this.texts();
+        return arr.length === 0 ? '' : arr[Math.min(this.index(), arr.length - 1)];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    words = computed(() => splitWords(this.current(), this.splitBy()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "words" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    platform = inject(WrPlatform);
+    timerId;
+    isAnimating = false;
+    constructor() {
+        if (!this.isBrowser)
+            return;
+        afterNextRender(() => this.animateIn());
+        // Restart the timer when interval / auto change.
+        effect(() => {
+            this.rotationInterval();
+            this.auto();
+            this.restartTimer();
+        });
+        this.destroyRef.onDestroy(() => clearInterval(this.timerId));
+    }
+    // Public imperative API
+    next() {
+        const arr = this.texts();
+        if (arr.length === 0)
+            return;
+        const cur = this.index();
+        const last = arr.length - 1;
+        const target = cur === last ? (this.loop() ? 0 : cur) : cur + 1;
+        if (target !== cur)
+            void this.transitionTo(target);
+    }
+    previous() {
+        const arr = this.texts();
+        if (arr.length === 0)
+            return;
+        const cur = this.index();
+        const last = arr.length - 1;
+        const target = cur === 0 ? (this.loop() ? last : cur) : cur - 1;
+        if (target !== cur)
+            void this.transitionTo(target);
+    }
+    jumpTo(target) {
+        const arr = this.texts();
+        if (arr.length === 0)
+            return;
+        const clamped = Math.max(0, Math.min(target, arr.length - 1));
+        if (clamped !== this.index())
+            void this.transitionTo(clamped);
+    }
+    reset() {
+        if (this.index() !== 0)
+            void this.transitionTo(0);
+    }
+    // Internals
+    restartTimer() {
+        clearInterval(this.timerId);
+        if (!this.auto())
+            return;
+        this.timerId = setInterval(() => this.next(), this.rotationInterval());
+    }
+    async transitionTo(target) {
+        if (this.isAnimating)
+            return;
+        this.isAnimating = true;
+        await this.animateOut();
+        this.index.set(target);
+        this.nextChange.emit(target);
+        // Wait one microtask so the new spans are rendered, then animate in.
+        queueMicrotask(() => {
+            this.animateIn();
+            this.isAnimating = false;
+        });
+    }
+    animateIn() {
+        const targets = this.host.nativeElement.querySelectorAll('.wr-rotating-text__char');
+        if (targets.length === 0)
+            return;
+        // Reduced motion: the word swap itself is content and keeps cycling,
+        // but each swap is instant — no per-char rise/fall tween.
+        if (this.platform.prefersReducedMotion()) {
+            targets.forEach(el => {
+                el.style.opacity = '1';
+                el.style.transform = 'translate3d(0, 0, 0)';
+            });
+            return;
+        }
+        const stagger = this.staggerDuration() * 1000;
+        targets.forEach((el, i) => {
+            const delay = this.delayFor(i, targets.length, stagger);
+            el.style.opacity = '0';
+            el.style.transform = 'translate3d(0, 100%, 0)';
+            const anim = el.animate([
+                { opacity: 0, transform: 'translate3d(0, 100%, 0)' },
+                { opacity: 1, transform: 'translate3d(0, 0, 0)' },
+            ], { duration: this.duration() * 1000, delay, easing: this.easing(), fill: 'forwards' });
+            anim.onfinish = () => {
+                el.style.opacity = '1';
+                el.style.transform = 'translate3d(0, 0, 0)';
+                try {
+                    anim.cancel();
+                }
+                catch {
+                    /* noop */
+                }
+            };
+        });
+    }
+    animateOut() {
+        const targets = this.host.nativeElement.querySelectorAll('.wr-rotating-text__char');
+        if (targets.length === 0)
+            return Promise.resolve();
+        if (this.platform.prefersReducedMotion())
+            return Promise.resolve();
+        const stagger = this.staggerDuration() * 1000;
+        const promises = [];
+        targets.forEach((el, i) => {
+            const delay = this.delayFor(i, targets.length, stagger);
+            const anim = el.animate([
+                { opacity: 1, transform: 'translate3d(0, 0, 0)' },
+                { opacity: 0, transform: 'translate3d(0, -120%, 0)' },
+            ], { duration: this.duration() * 1000, delay, easing: this.easing(), fill: 'forwards' });
+            promises.push(new Promise(resolve => {
+                anim.onfinish = () => {
+                    try {
+                        anim.cancel();
+                    }
+                    catch {
+                        /* noop */
+                    }
+                    resolve();
+                };
+            }));
+        });
+        return Promise.all(promises).then(() => undefined);
+    }
+    delayFor(i, total, stagger) {
+        if (stagger === 0)
+            return 0;
+        switch (this.staggerFrom()) {
+            case 'last':
+                return (total - 1 - i) * stagger;
+            case 'center': {
+                const center = Math.floor(total / 2);
+                return Math.abs(center - i) * stagger;
+            }
+            case 'first':
+            default:
+                return i * stagger;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrRotatingText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.1", type: WrRotatingText, isStandalone: true, selector: "wr-rotating-text", inputs: { texts: { classPropertyName: "texts", publicName: "texts", isSignal: true, isRequired: true, transformFunction: null }, rotationInterval: { classPropertyName: "rotationInterval", publicName: "rotationInterval", isSignal: true, isRequired: false, transformFunction: null }, splitBy: { classPropertyName: "splitBy", publicName: "splitBy", isSignal: true, isRequired: false, transformFunction: null }, auto: { classPropertyName: "auto", publicName: "auto", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, easing: { classPropertyName: "easing", publicName: "easing", isSignal: true, isRequired: false, transformFunction: null }, staggerDuration: { classPropertyName: "staggerDuration", publicName: "staggerDuration", isSignal: true, isRequired: false, transformFunction: null }, staggerFrom: { classPropertyName: "staggerFrom", publicName: "staggerFrom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nextChange: "nextChange" }, host: { classAttribute: "wr-rotating-text" }, ngImport: i0, template: "<!-- Screen-reader-only live region with the canonical text. -->\n<span class=\"wr-rotating-text__sr-only\">{{ current() }}</span>\n\n<!-- Animated visual content. -->\n<span class=\"wr-rotating-text__inner\" aria-hidden=\"true\">\n  @for (word of words(); track $index) {\n    <span class=\"wr-rotating-text__word\">\n      @for (char of word.characters; track $index) {\n        <span class=\"wr-rotating-text__char\">{{ char }}</span>\n      }\n      @if (word.needsSpace) {\n        <span class=\"wr-rotating-text__space\">&nbsp;</span>\n      }\n    </span>\n  }\n</span>\n", styles: [".wr-rotating-text{display:inline-flex;align-items:center;overflow:hidden;vertical-align:bottom}.wr-rotating-text__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.wr-rotating-text__inner{display:inline-flex;flex-wrap:wrap}.wr-rotating-text__word{display:inline-flex;align-items:center}.wr-rotating-text__char{display:inline-block;will-change:transform,opacity}.wr-rotating-text__space{display:inline;white-space:pre}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrRotatingText, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-rotating-text', encapsulation: ViewEncapsulation.None, host: { class: 'wr-rotating-text' }, template: "<!-- Screen-reader-only live region with the canonical text. -->\n<span class=\"wr-rotating-text__sr-only\">{{ current() }}</span>\n\n<!-- Animated visual content. -->\n<span class=\"wr-rotating-text__inner\" aria-hidden=\"true\">\n  @for (word of words(); track $index) {\n    <span class=\"wr-rotating-text__word\">\n      @for (char of word.characters; track $index) {\n        <span class=\"wr-rotating-text__char\">{{ char }}</span>\n      }\n      @if (word.needsSpace) {\n        <span class=\"wr-rotating-text__space\">&nbsp;</span>\n      }\n    </span>\n  }\n</span>\n", styles: [".wr-rotating-text{display:inline-flex;align-items:center;overflow:hidden;vertical-align:bottom}.wr-rotating-text__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.wr-rotating-text__inner{display:inline-flex;flex-wrap:wrap}.wr-rotating-text__word{display:inline-flex;align-items:center}.wr-rotating-text__char{display:inline-block;will-change:transform,opacity}.wr-rotating-text__space{display:inline;white-space:pre}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { texts: [{ type: i0.Input, args: [{ isSignal: true, alias: "texts", required: true }] }], rotationInterval: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotationInterval", required: false }] }], splitBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "splitBy", required: false }] }], auto: [{ type: i0.Input, args: [{ isSignal: true, alias: "auto", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], easing: [{ type: i0.Input, args: [{ isSignal: true, alias: "easing", required: false }] }], staggerDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "staggerDuration", required: false }] }], staggerFrom: [{ type: i0.Input, args: [{ isSignal: true, alias: "staggerFrom", required: false }] }], nextChange: [{ type: i0.Output, args: ["nextChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrRotatingText };
+//# sourceMappingURL=ngwr-rotating-text.mjs.map

package/fesm2022/ngwr-rotating-text.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-rotating-text.mjs","sources":["../../../projects/lib/rotating-text/rotating-text.ts","../../../projects/lib/rotating-text/rotating-text.html","../../../projects/lib/rotating-text/ngwr-rotating-text.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n *\n * Angular adaptation of the RotatingText effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/text-animations/rotating-text\n *\n * The reactbits version uses `motion/react` + `AnimatePresence`. This\n * port is dependency-free — vanilla DOM split + Web Animations API for\n * the enter/exit transitions.\n */\n\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\nimport type { WrRotatingTextSplit, WrRotatingTextStaggerFrom } from './interfaces';\n\nconst DEFAULT_EASING = 'cubic-bezier(0.16, 1, 0.3, 1)';\n\ninterface Word {\n  readonly characters: readonly string[];\n  readonly needsSpace: boolean;\n}\n\nfunction graphemes(text: string): readonly string[] {\n  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n    const seg = new Intl.Segmenter('en', { granularity: 'grapheme' });\n    return Array.from(seg.segment(text), s => s.segment);\n  }\n  return Array.from(text);\n}\n\nfunction splitWords(text: string, by: WrRotatingTextSplit): readonly Word[] {\n  if (!text) return [];\n  if (by === 'lines') {\n    const lines = text.split('\\n');\n    return lines.map((line, i) => ({ characters: [line], needsSpace: i !== lines.length - 1 }));\n  }\n  if (by === 'words') {\n    const words = text.split(' ');\n    return words.map((w, i) => ({ characters: [w], needsSpace: i !== words.length - 1 }));\n  }\n  // characters: split each word into graphemes, keep word boundaries for spacing.\n  const words = text.split(' ');\n  return words.map((w, i) => ({ characters: graphemes(w), needsSpace: i !== words.length - 1 }));\n}\n\n/**\n * Cycles through a list of strings, animating each transition\n * character-by-character (or word/line). Auto-advances on a timer by\n * default; can also be controlled imperatively via `next()` /\n * `previous()` / `jumpTo()` / `reset()`.\n *\n * @example\n * ```html\n * <wr-rotating-text [texts]=\"['design', 'ship', 'iterate']\" />\n *\n * // Manual control:\n * @ViewChild(WrRotatingText) rotator!: WrRotatingText;\n * onClick(): void { this.rotator.next(); }\n * ```\n *\n * @see https://www.reactbits.dev/text-animations/rotating-text\n */\n@Component({\n  selector: 'wr-rotating-text',\n  templateUrl: './rotating-text.html',\n  styleUrl: './rotating-text.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: { class: 'wr-rotating-text' },\n})\nexport class WrRotatingText {\n  /** Strings to cycle. Required. */\n  readonly texts = input.required<readonly string[]>();\n\n  /** Auto-advance interval in ms. @default 2000 */\n  readonly rotationInterval = input(2000, { transform: numAttr(2000) });\n\n  /** Granularity of the split. @default 'characters' */\n  readonly splitBy = input<WrRotatingTextSplit>('characters');\n\n  /** Auto-advance on a timer. @default true */\n  readonly auto = input(true, { transform: coerceBooleanProperty });\n\n  /** Loop back to the first string after the last. @default true */\n  readonly loop = input(true, { transform: coerceBooleanProperty });\n\n  /** Per-swap tween duration in seconds. @default 0.6 */\n  readonly duration = input(0.6, { transform: numAttr(0.6) });\n\n  /** CSS easing of the per-piece tween. @default 'cubic-bezier(0.16, 1, 0.3, 1)' (~power3.out) */\n  readonly easing = input(DEFAULT_EASING);\n\n  /** Per-piece stagger in seconds. @default 0 */\n  readonly staggerDuration = input(0, { transform: numAttr(0) });\n\n  /** Stagger origin. @default 'first' */\n  readonly staggerFrom = input<WrRotatingTextStaggerFrom>('first');\n\n  /** Emitted with the new index on every rotation. */\n  readonly nextChange = output<number>();\n\n  protected readonly index = signal(0);\n\n  protected readonly current = computed(() => {\n    const arr = this.texts();\n    return arr.length === 0 ? '' : arr[Math.min(this.index(), arr.length - 1)];\n  });\n\n  protected readonly words = computed<readonly Word[]>(() => splitWords(this.current(), this.splitBy()));\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly platform = inject(WrPlatform);\n\n  private timerId: ReturnType<typeof setInterval> | undefined;\n  private isAnimating = false;\n\n  constructor() {\n    if (!this.isBrowser) return;\n\n    afterNextRender(() => this.animateIn());\n\n    // Restart the timer when interval / auto change.\n    effect(() => {\n      this.rotationInterval();\n      this.auto();\n      this.restartTimer();\n    });\n\n    this.destroyRef.onDestroy(() => clearInterval(this.timerId));\n  }\n\n  // Public imperative API\n\n  next(): void {\n    const arr = this.texts();\n    if (arr.length === 0) return;\n    const cur = this.index();\n    const last = arr.length - 1;\n    const target = cur === last ? (this.loop() ? 0 : cur) : cur + 1;\n    if (target !== cur) void this.transitionTo(target);\n  }\n\n  previous(): void {\n    const arr = this.texts();\n    if (arr.length === 0) return;\n    const cur = this.index();\n    const last = arr.length - 1;\n    const target = cur === 0 ? (this.loop() ? last : cur) : cur - 1;\n    if (target !== cur) void this.transitionTo(target);\n  }\n\n  jumpTo(target: number): void {\n    const arr = this.texts();\n    if (arr.length === 0) return;\n    const clamped = Math.max(0, Math.min(target, arr.length - 1));\n    if (clamped !== this.index()) void this.transitionTo(clamped);\n  }\n\n  reset(): void {\n    if (this.index() !== 0) void this.transitionTo(0);\n  }\n\n  // Internals\n\n  private restartTimer(): void {\n    clearInterval(this.timerId);\n    if (!this.auto()) return;\n    this.timerId = setInterval(() => this.next(), this.rotationInterval());\n  }\n\n  private async transitionTo(target: number): Promise<void> {\n    if (this.isAnimating) return;\n    this.isAnimating = true;\n\n    await this.animateOut();\n    this.index.set(target);\n    this.nextChange.emit(target);\n    // Wait one microtask so the new spans are rendered, then animate in.\n    queueMicrotask(() => {\n      this.animateIn();\n      this.isAnimating = false;\n    });\n  }\n\n  private animateIn(): void {\n    const targets = this.host.nativeElement.querySelectorAll<HTMLElement>('.wr-rotating-text__char');\n    if (targets.length === 0) return;\n\n    // Reduced motion: the word swap itself is content and keeps cycling,\n    // but each swap is instant — no per-char rise/fall tween.\n    if (this.platform.prefersReducedMotion()) {\n      targets.forEach(el => {\n        el.style.opacity = '1';\n        el.style.transform = 'translate3d(0, 0, 0)';\n      });\n      return;\n    }\n\n    const stagger = this.staggerDuration() * 1000;\n    targets.forEach((el, i) => {\n      const delay = this.delayFor(i, targets.length, stagger);\n      el.style.opacity = '0';\n      el.style.transform = 'translate3d(0, 100%, 0)';\n      const anim = el.animate(\n        [\n          { opacity: 0, transform: 'translate3d(0, 100%, 0)' },\n          { opacity: 1, transform: 'translate3d(0, 0, 0)' },\n        ],\n        { duration: this.duration() * 1000, delay, easing: this.easing(), fill: 'forwards' }\n      );\n      anim.onfinish = (): void => {\n        el.style.opacity = '1';\n        el.style.transform = 'translate3d(0, 0, 0)';\n        try {\n          anim.cancel();\n        } catch {\n          /* noop */\n        }\n      };\n    });\n  }\n\n  private animateOut(): Promise<void> {\n    const targets = this.host.nativeElement.querySelectorAll<HTMLElement>('.wr-rotating-text__char');\n    if (targets.length === 0) return Promise.resolve();\n    if (this.platform.prefersReducedMotion()) return Promise.resolve();\n    const stagger = this.staggerDuration() * 1000;\n    const promises: Promise<void>[] = [];\n    targets.forEach((el, i) => {\n      const delay = this.delayFor(i, targets.length, stagger);\n      const anim = el.animate(\n        [\n          { opacity: 1, transform: 'translate3d(0, 0, 0)' },\n          { opacity: 0, transform: 'translate3d(0, -120%, 0)' },\n        ],\n        { duration: this.duration() * 1000, delay, easing: this.easing(), fill: 'forwards' }\n      );\n      promises.push(\n        new Promise<void>(resolve => {\n          anim.onfinish = (): void => {\n            try {\n              anim.cancel();\n            } catch {\n              /* noop */\n            }\n            resolve();\n          };\n        })\n      );\n    });\n    return Promise.all(promises).then(() => undefined);\n  }\n\n  private delayFor(i: number, total: number, stagger: number): number {\n    if (stagger === 0) return 0;\n    switch (this.staggerFrom()) {\n      case 'last':\n        return (total - 1 - i) * stagger;\n      case 'center': {\n        const center = Math.floor(total / 2);\n        return Math.abs(center - i) * stagger;\n      }\n      case 'first':\n      default:\n        return i * stagger;\n    }\n  }\n}\n\nexport type { WrRotatingTextSplit, WrRotatingTextStaggerFrom } from './interfaces';\n","<!-- Screen-reader-only live region with the canonical text. -->\n<span class=\"wr-rotating-text__sr-only\">{{ current() }}</span>\n\n<!-- Animated visual content. -->\n<span class=\"wr-rotating-text__inner\" aria-hidden=\"true\">\n  @for (word of words(); track $index) {\n    <span class=\"wr-rotating-text__word\">\n      @for (char of word.characters; track $index) {\n        <span class=\"wr-rotating-text__char\">{{ char }}</span>\n      }\n      @if (word.needsSpace) {\n        <span class=\"wr-rotating-text__space\">&nbsp;</span>\n      }\n    </span>\n  }\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-scramble-text.mjs

@@ -0,0 +1,165 @@
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, inject, ElementRef, DestroyRef, PLATFORM_ID, afterNextRender, ViewEncapsulation, Component } from '@angular/core';
+import { WrPlatform } from 'ngwr/platform';
+import { numAttr } from 'ngwr/utils';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ *
+ * Angular adaptation of the ScrambledText effect by David Haz / reactbits.dev.
+ * Original: https://www.reactbits.dev/text-animations/scrambled-text
+ *
+ * The reactbits version uses GSAP's paid SplitText + ScrambleTextPlugin.
+ * This port is dependency-free — splits via vanilla DOM, scrambles via a
+ * per-char `setInterval` loop, restores on settle.
+ */
+function pickRandom(pool, exclude) {
+    if (pool.length === 0)
+        return exclude;
+    if (pool.length === 1)
+        return pool;
+    // Avoid landing on the original mid-scramble — looks like nothing happened.
+    let pick = pool.charAt(Math.floor(Math.random() * pool.length));
+    for (let tries = 0; tries < 3 && pick === exclude; tries++) {
+        pick = pool.charAt(Math.floor(Math.random() * pool.length));
+    }
+    return pick;
+}
+/**
+ * Cursor-proximity scrambler. Each character inside the projected text
+ * scrambles through `scrambleChars` whenever the pointer moves within
+ * `radius` px of it, then settles back to the original. Closer pointer →
+ * longer scramble.
+ *
+ * @example
+ * ```html
+ * <wr-scramble-text
+ *   [radius]="120"
+ *   [duration]="1.4"
+ *   scrambleChars="!&%*"
+ * >
+ *   Hover this paragraph to scramble characters near the cursor.
+ * </wr-scramble-text>
+ * ```
+ *
+ * @see https://www.reactbits.dev/text-animations/scrambled-text
+ */
+class WrScrambleText {
+    /** Proximity radius in pixels. @default 100 */
+    radius = input(100, { ...(ngDevMode ? { debugName: "radius" } : /* istanbul ignore next */ {}), transform: numAttr(100) });
+    /** Max scramble duration in seconds (scaled by proximity — closer = longer). @default 1.2 */
+    duration = input(1.2, { ...(ngDevMode ? { debugName: "duration" } : /* istanbul ignore next */ {}), transform: numAttr(1.2) });
+    /** Approximate seconds between random-char swaps. Lower = faster scramble. @default 0.05 */
+    speed = input(0.05, { ...(ngDevMode ? { debugName: "speed" } : /* istanbul ignore next */ {}), transform: numAttr(0.05) });
+    /** Pool of glyphs to scramble through. @default '.:' */
+    scrambleChars = input('.:', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrambleChars" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    destroyRef = inject(DestroyRef);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    platform = inject(WrPlatform);
+    /** One entry per active scramble, keyed by char span. */
+    active = new Map();
+    /** Cached list of char spans. Re-computed after each render. */
+    chars = [];
+    constructor() {
+        if (!this.isBrowser)
+            return;
+        afterNextRender(() => this.split());
+        this.destroyRef.onDestroy(() => this.clearAll());
+    }
+    onPointerMove(event) {
+        if (this.chars.length === 0)
+            return;
+        // Reduced motion: pointer proximity stops scrambling — text stays put.
+        if (this.platform.prefersReducedMotion())
+            return;
+        const radius = this.radius();
+        const duration = this.duration() * 1000;
+        const swapInterval = Math.max(16, this.speed() * 1000);
+        const pool = this.scrambleChars();
+        for (const charEl of this.chars) {
+            const rect = charEl.getBoundingClientRect();
+            const dx = event.clientX - (rect.left + rect.width / 2);
+            const dy = event.clientY - (rect.top + rect.height / 2);
+            const dist = Math.hypot(dx, dy);
+            if (dist > radius)
+                continue;
+            // Cancel any in-flight scramble for this char — we're restarting.
+            this.cancelOne(charEl);
+            // Proximity factor: 0 at the edge, 1 at the centre.
+            const proximity = 1 - dist / radius;
+            const scrambleMs = duration * proximity;
+            const original = charEl.dataset['scrambleOriginal'] ?? '';
+            const swapId = setInterval(() => {
+                charEl.textContent = pickRandom(pool, original);
+            }, swapInterval);
+            const settleId = setTimeout(() => {
+                clearInterval(swapId);
+                charEl.textContent = original;
+                this.active.delete(charEl);
+            }, scrambleMs);
+            this.active.set(charEl, { swapId, settleId });
+        }
+    }
+    /** Walk the projected text and wrap each non-whitespace character in a span. */
+    split() {
+        const inner = this.host.nativeElement.querySelector('.wr-scramble-text__inner');
+        if (!inner)
+            return;
+        const raw = inner.textContent ?? '';
+        if (!raw)
+            return;
+        const frag = document.createDocumentFragment();
+        for (const ch of [...raw]) {
+            if (/\s/.test(ch)) {
+                frag.appendChild(document.createTextNode(ch));
+            }
+            else {
+                const span = document.createElement('span');
+                span.className = 'wr-scramble-text__char';
+                span.textContent = ch;
+                span.dataset['scrambleOriginal'] = ch;
+                frag.appendChild(span);
+            }
+        }
+        inner.replaceChildren(frag);
+        this.chars = Array.from(inner.querySelectorAll('.wr-scramble-text__char'));
+    }
+    cancelOne(el) {
+        const entry = this.active.get(el);
+        if (!entry)
+            return;
+        clearInterval(entry.swapId);
+        clearTimeout(entry.settleId);
+        this.active.delete(el);
+    }
+    clearAll() {
+        for (const [el, entry] of this.active) {
+            clearInterval(entry.swapId);
+            clearTimeout(entry.settleId);
+            el.textContent = el.dataset['scrambleOriginal'] ?? '';
+        }
+        this.active.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrScrambleText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.1", type: WrScrambleText, isStandalone: true, selector: "wr-scramble-text", inputs: { radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, speed: { classPropertyName: "speed", publicName: "speed", isSignal: true, isRequired: false, transformFunction: null }, scrambleChars: { classPropertyName: "scrambleChars", publicName: "scrambleChars", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "pointermove": "onPointerMove($event)" }, classAttribute: "wr-scramble-text" }, ngImport: i0, template: '<span class="wr-scramble-text__inner" #inner><ng-content /></span>', isInline: true, styles: [".wr-scramble-text{display:block}.wr-scramble-text__char{display:inline-block;will-change:contents}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrScrambleText, decorators: [{
+            type: Component,
+            args: [{ selector: 'wr-scramble-text', template: '<span class="wr-scramble-text__inner" #inner><ng-content /></span>', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'wr-scramble-text',
+                        '(pointermove)': 'onPointerMove($event)',
+                    }, styles: [".wr-scramble-text{display:block}.wr-scramble-text__char{display:inline-block;will-change:contents}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], speed: [{ type: i0.Input, args: [{ isSignal: true, alias: "speed", required: false }] }], scrambleChars: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrambleChars", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrScrambleText };
+//# sourceMappingURL=ngwr-scramble-text.mjs.map

package/fesm2022/ngwr-scramble-text.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-scramble-text.mjs","sources":["../../../projects/lib/scramble-text/scramble-text.ts","../../../projects/lib/scramble-text/ngwr-scramble-text.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n *\n * Angular adaptation of the ScrambledText effect by David Haz / reactbits.dev.\n * Original: https://www.reactbits.dev/text-animations/scrambled-text\n *\n * The reactbits version uses GSAP's paid SplitText + ScrambleTextPlugin.\n * This port is dependency-free — splits via vanilla DOM, scrambles via a\n * per-char `setInterval` loop, restores on settle.\n */\n\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  Component,\n  DestroyRef,\n  ElementRef,\n  PLATFORM_ID,\n  ViewEncapsulation,\n  afterNextRender,\n  inject,\n  input,\n} from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\nimport { numAttr } from 'ngwr/utils';\n\ninterface ActiveScramble {\n  swapId: ReturnType<typeof setInterval>;\n  settleId: ReturnType<typeof setTimeout>;\n}\n\nfunction pickRandom(pool: string, exclude: string): string {\n  if (pool.length === 0) return exclude;\n  if (pool.length === 1) return pool;\n  // Avoid landing on the original mid-scramble — looks like nothing happened.\n  let pick = pool.charAt(Math.floor(Math.random() * pool.length));\n  for (let tries = 0; tries < 3 && pick === exclude; tries++) {\n    pick = pool.charAt(Math.floor(Math.random() * pool.length));\n  }\n  return pick;\n}\n\n/**\n * Cursor-proximity scrambler. Each character inside the projected text\n * scrambles through `scrambleChars` whenever the pointer moves within\n * `radius` px of it, then settles back to the original. Closer pointer →\n * longer scramble.\n *\n * @example\n * ```html\n * <wr-scramble-text\n *   [radius]=\"120\"\n *   [duration]=\"1.4\"\n *   scrambleChars=\"!&%*\"\n * >\n *   Hover this paragraph to scramble characters near the cursor.\n * </wr-scramble-text>\n * ```\n *\n * @see https://www.reactbits.dev/text-animations/scrambled-text\n */\n@Component({\n  selector: 'wr-scramble-text',\n  template: '<span class=\"wr-scramble-text__inner\" #inner><ng-content /></span>',\n  styleUrl: './scramble-text.scss',\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'wr-scramble-text',\n    '(pointermove)': 'onPointerMove($event)',\n  },\n})\nexport class WrScrambleText {\n  /** Proximity radius in pixels. @default 100 */\n  readonly radius = input(100, { transform: numAttr(100) });\n\n  /** Max scramble duration in seconds (scaled by proximity — closer = longer). @default 1.2 */\n  readonly duration = input(1.2, { transform: numAttr(1.2) });\n\n  /** Approximate seconds between random-char swaps. Lower = faster scramble. @default 0.05 */\n  readonly speed = input(0.05, { transform: numAttr(0.05) });\n\n  /** Pool of glyphs to scramble through. @default '.:' */\n  readonly scrambleChars = input('.:');\n\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));\n  private readonly platform = inject(WrPlatform);\n\n  /** One entry per active scramble, keyed by char span. */\n  private readonly active = new Map<HTMLElement, ActiveScramble>();\n\n  /** Cached list of char spans. Re-computed after each render. */\n  private chars: readonly HTMLElement[] = [];\n\n  constructor() {\n    if (!this.isBrowser) return;\n    afterNextRender(() => this.split());\n    this.destroyRef.onDestroy(() => this.clearAll());\n  }\n\n  protected onPointerMove(event: PointerEvent): void {\n    if (this.chars.length === 0) return;\n    // Reduced motion: pointer proximity stops scrambling — text stays put.\n    if (this.platform.prefersReducedMotion()) return;\n    const radius = this.radius();\n    const duration = this.duration() * 1000;\n    const swapInterval = Math.max(16, this.speed() * 1000);\n    const pool = this.scrambleChars();\n\n    for (const charEl of this.chars) {\n      const rect = charEl.getBoundingClientRect();\n      const dx = event.clientX - (rect.left + rect.width / 2);\n      const dy = event.clientY - (rect.top + rect.height / 2);\n      const dist = Math.hypot(dx, dy);\n      if (dist > radius) continue;\n\n      // Cancel any in-flight scramble for this char — we're restarting.\n      this.cancelOne(charEl);\n\n      // Proximity factor: 0 at the edge, 1 at the centre.\n      const proximity = 1 - dist / radius;\n      const scrambleMs = duration * proximity;\n      const original = charEl.dataset['scrambleOriginal'] ?? '';\n\n      const swapId = setInterval(() => {\n        charEl.textContent = pickRandom(pool, original);\n      }, swapInterval);\n\n      const settleId = setTimeout(() => {\n        clearInterval(swapId);\n        charEl.textContent = original;\n        this.active.delete(charEl);\n      }, scrambleMs);\n\n      this.active.set(charEl, { swapId, settleId });\n    }\n  }\n\n  /** Walk the projected text and wrap each non-whitespace character in a span. */\n  private split(): void {\n    const inner = this.host.nativeElement.querySelector<HTMLElement>('.wr-scramble-text__inner');\n    if (!inner) return;\n    const raw = inner.textContent ?? '';\n    if (!raw) return;\n\n    const frag = document.createDocumentFragment();\n    for (const ch of [...raw]) {\n      if (/\\s/.test(ch)) {\n        frag.appendChild(document.createTextNode(ch));\n      } else {\n        const span = document.createElement('span');\n        span.className = 'wr-scramble-text__char';\n        span.textContent = ch;\n        span.dataset['scrambleOriginal'] = ch;\n        frag.appendChild(span);\n      }\n    }\n    inner.replaceChildren(frag);\n    this.chars = Array.from(inner.querySelectorAll<HTMLElement>('.wr-scramble-text__char'));\n  }\n\n  private cancelOne(el: HTMLElement): void {\n    const entry = this.active.get(el);\n    if (!entry) return;\n    clearInterval(entry.swapId);\n    clearTimeout(entry.settleId);\n    this.active.delete(el);\n  }\n\n  private clearAll(): void {\n    for (const [el, entry] of this.active) {\n      clearInterval(entry.swapId);\n      clearTimeout(entry.settleId);\n      el.textContent = el.dataset['scrambleOriginal'] ?? '';\n    }\n    this.active.clear();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-scroll.mjs

@@ -0,0 +1,107 @@
+import { DOCUMENT } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Service } from '@angular/core';
+import { WrPlatform } from 'ngwr/platform';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Smooth-scroll utility. Resolves `id` / selector / element / coords
+ * targets; subtracts an `offset` (for sticky headers); respects
+ * `prefers-reduced-motion` — automatically falls back to instant
+ * scrolling when the user has opted out.
+ *
+ * SSR-safe — all methods no-op on the server.
+ *
+ * @example
+ * ```ts
+ * const scroll = inject(WrScroll);
+ * scroll.to('#section-three', { offset: 80 });
+ * scroll.toTop({ smooth: false });
+ * scroll.intoView(myEl, { offset: 64 });
+ * ```
+ *
+ * @see https://ngwr.dev/services/scroll
+ */
+class WrScroll {
+    doc = inject(DOCUMENT);
+    platform = inject(WrPlatform);
+    /** Scroll to an arbitrary target. */
+    to(target, options = {}) {
+        if (!this.platform.isBrowser)
+            return;
+        const win = this.doc.defaultView;
+        if (!win)
+            return;
+        const offset = options.offset ?? 0;
+        const behavior = this.behavior(options.smooth);
+        const container = options.container ?? win;
+        if (typeof target === 'object' && 'top' in target) {
+            this.scroll(container, { top: target.top - offset, left: target.left ?? 0, behavior });
+            return;
+        }
+        const el = typeof target === 'string' ? this.resolveSelector(target) : target;
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        if (container === win) {
+            const top = rect.top + win.scrollY - offset;
+            this.scroll(container, { top, left: 0, behavior });
+        }
+        else {
+            const ctx = container;
+            const ctxRect = ctx.getBoundingClientRect();
+            const top = rect.top - ctxRect.top + ctx.scrollTop - offset;
+            this.scroll(container, { top, left: 0, behavior });
+        }
+    }
+    /** Convenience for an element — accepts the same options. */
+    intoView(el, options = {}) {
+        this.to(el, options);
+    }
+    /** Scroll the page (or container) to the top. */
+    toTop(options = {}) {
+        this.to({ top: 0 }, options);
+    }
+    // Internals
+    resolveSelector(value) {
+        if (value.startsWith('#')) {
+            return this.doc.getElementById(value.slice(1));
+        }
+        try {
+            return this.doc.querySelector(value);
+        }
+        catch {
+            return null;
+        }
+    }
+    behavior(requested) {
+        if (requested === false)
+            return 'auto';
+        if (this.platform.prefersReducedMotion())
+            return 'auto';
+        return 'smooth';
+    }
+    scroll(container, options) {
+        if (container instanceof Window)
+            container.scrollTo(options);
+        else
+            container.scrollTo(options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrScroll, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.1", ngImport: i0, type: WrScroll });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: WrScroll, decorators: [{
+            type: Service
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrScroll };
+//# sourceMappingURL=ngwr-scroll.mjs.map

package/fesm2022/ngwr-scroll.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-scroll.mjs","sources":["../../../projects/lib/scroll/wr-scroll.ts","../../../projects/lib/scroll/ngwr-scroll.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { DOCUMENT } from '@angular/common';\nimport { Service, inject } from '@angular/core';\n\nimport { WrPlatform } from 'ngwr/platform';\n\nimport type { WrScrollOptions, WrScrollTarget } from './interfaces';\n\n/**\n * Smooth-scroll utility. Resolves `id` / selector / element / coords\n * targets; subtracts an `offset` (for sticky headers); respects\n * `prefers-reduced-motion` — automatically falls back to instant\n * scrolling when the user has opted out.\n *\n * SSR-safe — all methods no-op on the server.\n *\n * @example\n * ```ts\n * const scroll = inject(WrScroll);\n * scroll.to('#section-three', { offset: 80 });\n * scroll.toTop({ smooth: false });\n * scroll.intoView(myEl, { offset: 64 });\n * ```\n *\n * @see https://ngwr.dev/services/scroll\n */\n@Service()\nexport class WrScroll {\n  private readonly doc = inject(DOCUMENT);\n  private readonly platform = inject(WrPlatform);\n\n  /** Scroll to an arbitrary target. */\n  to(target: WrScrollTarget, options: WrScrollOptions = {}): void {\n    if (!this.platform.isBrowser) return;\n    const win = this.doc.defaultView;\n    if (!win) return;\n\n    const offset = options.offset ?? 0;\n    const behavior = this.behavior(options.smooth);\n    const container = options.container ?? win;\n\n    if (typeof target === 'object' && 'top' in target) {\n      this.scroll(container, { top: target.top - offset, left: target.left ?? 0, behavior });\n      return;\n    }\n\n    const el = typeof target === 'string' ? this.resolveSelector(target) : target;\n    if (!el) return;\n\n    const rect = el.getBoundingClientRect();\n    if (container === win) {\n      const top = rect.top + win.scrollY - offset;\n      this.scroll(container, { top, left: 0, behavior });\n    } else {\n      const ctx = container as Element;\n      const ctxRect = ctx.getBoundingClientRect();\n      const top = rect.top - ctxRect.top + ctx.scrollTop - offset;\n      this.scroll(container, { top, left: 0, behavior });\n    }\n  }\n\n  /** Convenience for an element — accepts the same options. */\n  intoView(el: Element, options: WrScrollOptions = {}): void {\n    this.to(el, options);\n  }\n\n  /** Scroll the page (or container) to the top. */\n  toTop(options: WrScrollOptions = {}): void {\n    this.to({ top: 0 }, options);\n  }\n\n  // Internals\n\n  private resolveSelector(value: string): Element | null {\n    if (value.startsWith('#')) {\n      return this.doc.getElementById(value.slice(1));\n    }\n    try {\n      return this.doc.querySelector(value);\n    } catch {\n      return null;\n    }\n  }\n\n  private behavior(requested: boolean | undefined): ScrollBehavior {\n    if (requested === false) return 'auto';\n    if (this.platform.prefersReducedMotion()) return 'auto';\n    return 'smooth';\n  }\n\n  private scroll(container: Window | Element, options: ScrollToOptions): void {\n    if (container instanceof Window) container.scrollTo(options);\n    else container.scrollTo(options);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}