rune-scroller 1.0.0 → 2.1.0

package/README.md

@@ -1,4 +1,12 @@
-# ⚡ Rune Scroller
+# ⚡ Rune Scroller - Full Reference
+
+**📚 Complete API Reference** — Detailed documentation for all features and options.
+
+**Quick start?** See [README.md](../README.md) for a simpler introduction.
+
+**Development?** See [CLAUDE.md](../CLAUDE.md) for the developer guide.
+
+---
 
 <div align="center">
 	<img src="./logo.png" alt="Rune Scroller Logo" width="200" />
@@ -9,17 +17,63 @@
 > 🚀 **Open Source** by [ludoloops](https://github.com/ludoloops) at [LeLab.dev](https://lelab.dev)
 > 📜 Licensed under **MIT**
 
+<div align="center">
+	<a href="https://bundlephobia.com/package/rune-scroller">
+		<img src="https://img.shields.io/bundlephobia/minzip/rune-scroller" alt="minzipped size" />
+	</a>
+	<a href="https://bundlephobia.com/package/rune-scroller">
+		<img src="https://img.shields.io/bundlephobia/min/rune-scroller" alt="minified size" />
+	</a>
+</div>
+
 ---
 
 ## ✨ Features
 
-- **~2KB gzipped** - Minimal overhead
+- **12.7KB gzipped** (40.3KB uncompressed) - Minimal overhead, optimized for production
 - **Zero dependencies** - Pure Svelte 5 + IntersectionObserver
 - **14 animations** - Fade, Zoom, Flip, Slide, Bounce variants
-- **TypeScript** - Full type coverage
+- **Full TypeScript support** - Type definitions generated from JSDoc
 - **SSR-ready** - SvelteKit compatible
 - **GPU-accelerated** - Pure CSS transforms
 - **Accessible** - Respects `prefers-reduced-motion`
+- **v2.0.0 New** - `onVisible` callback, ResizeObserver support, animation validation, sentinel customization
+- **✨ Latest** - `useIntersection` migrated to Svelte 5 `$effect` rune for better lifecycle management
+- **🚀 Bundle optimized** - CSS with custom properties, production build minification
+
+---
+
+## 📊 Performance & Quality
+
+**Bundle Optimization (2026-01-12):**
+- ✅ **121/121 tests passing** (100%)
+- ✅ **Bundle size:** 12.7KB gzipped (-1.6KB from v2.0.0, -11.2%)
+- ✅ **Unpacked size:** 40.3KB (-7.1KB from v2.0.0, -15.0%)
+- ✅ **Type safety:** 0 errors (JSDoc + TypeScript)
+- ✅ **Memory leaks:** 0 detected
+- ✅ **Svelte 5 aligned:** Full runes support
+- ✅ **Removed deprecated `animate` action** - Simplified API
+- ✅ **Tests optimized for npm** - Excluded from package (tests/ directory)
+- ✅ **CSS optimized:** CSS custom properties (-36% CSS reduction)
+- ✅ **Production ready:** NODE_ENV guards for console warnings
+
+**Bundle breakdown (unpacked, optimized):**
+- `runeScroller.js`: 5.0KB (-12%)
+- `dom-utils.js`: 3.4KB (-24%)
+- `animations.css`: 2.5KB (-36%) ← Optimized with CSS custom properties
+- `types.js`: 2.1KB
+- `useIntersection.svelte.js`: 2.2KB (-18%)
+- `observer-utils.js`: 773B (-52%)
+- Type definitions (.d.ts): ~6KB (-33%)
+- Other (index.js, LICENSE, package.json): 2.8KB
+
+**Optimization details:**
+- CSS custom properties eliminate repetitive rules
+- Production builds strip console warnings via NODE_ENV
+- JSDoc optimized (kept types, removed verbose descriptions)
+- All features and animations remain unchanged
+
+See [`MIGRATION_METRICS.md`](../MIGRATION_METRICS.md) for detailed performance benchmarks.
 
 ---
 
@@ -91,17 +145,17 @@ yarn add rune-scroller
 
 ### Fade (5)
 - `fade-in` - Simple opacity fade
-- `fade-in-up` - Fade + move up 100px
-- `fade-in-down` - Fade + move down 100px
-- `fade-in-left` - Fade + move from right
-- `fade-in-right` - Fade + move from left
+- `fade-in-up` - Fade + move up 300px
+- `fade-in-down` - Fade + move down 300px
+- `fade-in-left` - Fade + move from right 300px
+- `fade-in-right` - Fade + move from left 300px
 
 ### Zoom (5)
-- `zoom-in` - Scale from 0.6 to 1
-- `zoom-out` - Scale from 1.2 to 1
-- `zoom-in-up` - Zoom + move up
-- `zoom-in-left` - Zoom + move from right
-- `zoom-in-right` - Zoom + move from left
+- `zoom-in` - Scale from 0.3 to 1
+- `zoom-out` - Scale from 2 to 1
+- `zoom-in-up` - Zoom (0.5→1) + move up 300px
+- `zoom-in-left` - Zoom (0.5→1) + move from right 300px
+- `zoom-in-right` - Zoom (0.5→1) + move from left 300px
 
 ### Others (4)
 - `flip` - 3D flip on Y-axis
@@ -116,20 +170,26 @@ yarn add rune-scroller
 ```typescript
 interface RuneScrollerOptions {
 	animation?: AnimationType;  // Animation name (default: 'fade-in')
-	duration?: number;          // Duration in ms (default: 2000)
+	duration?: number;          // Duration in ms (default: 800)
 	repeat?: boolean;           // Repeat on scroll (default: false)
 	debug?: boolean;            // Show sentinel as visible line (default: false)
 	offset?: number;            // Sentinel offset in px (default: 0, negative = above)
+	onVisible?: (element: HTMLElement) => void;  // Callback when animation triggers (v2.0.0+)
+	sentinelColor?: string;     // Sentinel debug color, e.g. '#ff6b6b' (v2.0.0+)
+	sentinelId?: string;        // Custom ID for sentinel identification (v2.0.0+)
 }
 ```
 
 ### Option Details
 
-- **`animation`** - Type of animation to play. Choose from 14 built-in animations listed above.
-- **`duration`** - How long the animation lasts in milliseconds (default: 2000ms).
+- **`animation`** - Type of animation to play. Choose from 14 built-in animations listed above. Invalid animations automatically fallback to 'fade-in' with a console warning.
+- **`duration`** - How long the animation lasts in milliseconds (default: 800ms).
 - **`repeat`** - If `true`, animation plays every time sentinel enters viewport. If `false`, plays only once.
-- **`debug`** - If `true`, displays the sentinel element as a visible cyan line below your element. Useful for seeing exactly when animations trigger.
+- **`debug`** - If `true`, displays the sentinel element as a visible line below your element. Useful for seeing exactly when animations trigger. Default color is cyan (#00e0ff), customize with `sentinelColor`.
 - **`offset`** - Offset of the sentinel in pixels. Positive values move sentinel down (delays animation), negative values move it up (triggers earlier). Useful for large elements where you want animation to trigger before the entire element is visible.
+- **`onVisible`** *(v2.0.0+)* - Callback function triggered when the animation becomes visible. Receives the animated element as parameter. Useful for analytics, lazy loading, or triggering custom effects.
+- **`sentinelColor`** *(v2.0.0+)* - Customize the debug sentinel color (e.g., '#ff6b6b' for red). Only visible when `debug: true`. Useful for distinguishing multiple sentinels on the same page.
+- **`sentinelId`** *(v2.0.0+)* - Set a custom ID for the sentinel element. If not provided, an auto-ID is generated (`sentinel-1`, `sentinel-2`, etc.). Useful for identifying sentinels in DevTools and tracking which element owns which sentinel.
 
 ### Examples
 
@@ -179,40 +239,50 @@ interface RuneScrollerOptions {
 }}>
 	Content with delayed animation
 </div>
-```
 
----
-
-## 🔧 Advanced Usage
-
-### Using the `animate` Action (Direct Control)
+<!-- v2.0.0: onVisible callback for analytics tracking -->
+<div use:runeScroller={{
+	animation: 'fade-in-up',
+	onVisible: (el) => {
+		console.log('Animation visible!', el);
+		// Track analytics, load images, trigger API calls, etc.
+		window.gtag?.('event', 'animation_visible', { element: el.id });
+	}
+}}>
+	Tracked animation
+</div>
 
-For advanced use cases, use `animate` for fine-grained IntersectionObserver control:
+<!-- v2.0.0: Custom sentinel color for debugging -->
+<div use:runeScroller={{
+	animation: 'fade-in',
+	debug: true,
+	sentinelColor: '#ff6b6b'  // Red instead of default cyan
+}}>
+	Red debug sentinel
+</div>
 
-```svelte
-<script>
-	import { animate } from 'rune-scroller';
-	import 'rune-scroller/animations.css';
-</script>
+<!-- v2.0.0: Custom sentinel ID for identification -->
+<div use:runeScroller={{
+	animation: 'zoom-in',
+	sentinelId: 'hero-zoom',
+	debug: true
+}}>
+	Identified sentinel (shows "hero-zoom" in debug mode)
+</div>
 
-<div use:animate={{
+<!-- v2.0.0: Auto-ID (sentinel-1, sentinel-2, etc) -->
+<div use:runeScroller={{
 	animation: 'fade-in-up',
-	duration: 1000,
-	delay: 200,
-	threshold: 0.5,
-	offset: 20,
-	once: true
+	debug: true
+	// sentinelId omitted → auto generates "sentinel-1", "sentinel-2", etc
 }}>
-	Advanced control
+	Auto-identified sentinel
 </div>
 ```
 
-**Options:**
-- `threshold` - Intersection ratio to trigger (0-1)
-- `offset` - Viewport offset percentage (0-100)
-- `rootMargin` - Custom IntersectionObserver margin
-- `delay` - Animation delay in ms
-- `once` - Trigger only once
+---
+
+## 🔧 Advanced Usage
 
 ### Using Composables
 
@@ -245,11 +315,18 @@ Rune Scroller uses **sentinel-based triggering**:
 3. This ensures precise timing regardless of element size
 4. Uses native IntersectionObserver for performance
 5. Pure CSS animations (GPU-accelerated)
+6. *(v2.0.0)* Sentinel automatically repositions on element resize via ResizeObserver
 
 **Why sentinels?**
 - Accurate timing across all screen sizes
 - No complex offset calculations
 - Handles staggered animations naturally
+- Sentinel stays fixed while element animates (no observer confusion with transforms)
+
+**Automatic ResizeObserver** *(v2.0.0+)*
+- Sentinel repositions automatically when element resizes
+- Works with responsive layouts and dynamic content
+- No configuration needed—it just works
 
 ---
 
@@ -304,16 +381,26 @@ Users who prefer reduced motion will see content without animations.
 ---
 
 ## 📚 API Reference
+### Public API
+
+Rune Scroller exports a **single action-based API** (no components):
+
+1. **`runeScroller`** (default) - Sentinel-based, simple, powerful
+
+**Why actions instead of components?**
+- Actions are lightweight directives
+- No DOM wrapper overhead
+- Better performance
+- More flexible
 
 ### Main Export
 
 ```typescript
-// Default export (recommended)
+// Default export
 import runeScroller from 'rune-scroller';
 
 // Named exports
 import {
-	animate,                    // Alternative action
 	useIntersection,            // Composable
 	useIntersectionOnce,        // Composable
 	calculateRootMargin         // Utility
@@ -323,7 +410,6 @@ import {
 import type {
 	AnimationType,
 	RuneScrollerOptions,
-	AnimateOptions,
 	IntersectionOptions,
 	UseIntersectionReturn
 } from 'rune-scroller';
@@ -343,16 +429,9 @@ interface RuneScrollerOptions {
 	repeat?: boolean;
 	debug?: boolean;
 	offset?: number;
-}
-
-interface AnimateOptions {
-	animation?: AnimationType;
-	duration?: number;
-	delay?: number;
-	threshold?: number;
-	rootMargin?: string;
-	offset?: number;
-	once?: boolean;
+	onVisible?: (element: HTMLElement) => void;      // v2.0.0+
+	sentinelColor?: string;                          // v2.0.0+
+	sentinelId?: string;                             // v2.0.0+
 }
 ```
 
@@ -406,7 +485,6 @@ interface AnimateOptions {
 
 - **npm Package**: [rune-scroller](https://www.npmjs.com/package/rune-scroller)
 - **GitHub**: [lelabdev/rune-scroller](https://github.com/lelabdev/rune-scroller)
-- **Documentation**: [CLAUDE.md](./CLAUDE.md)
 - **Changelog**: [CHANGELOG.md](./CHANGELOG.md)
 
 ---
@@ -423,10 +501,10 @@ Contributions welcome! Please open an issue or PR on GitHub.
 
 ```bash
 # Development
-pnpm install
-pnpm dev
-pnpm test
-pnpm build
+bun install
+bun run dev
+bun test
+bun run build
 ```
 
 ---

package/dist/animations.css

@@ -1,177 +1,80 @@
 /**
- * Reusable scroll animation styles
- * These styles define animation effects for scroll-triggered elements
+ * Reusable scroll animation styles - Optimized with CSS custom properties
+ * Reduces bundle size while maintaining all 14 animations
  */
 
-/* Base animation container */
+/* Base animation container with optimized transitions */
 .scroll-animate,
 .animated-element {
 	opacity: 0;
-	transition: all var(--duration, 800ms) cubic-bezier(0.34, 1.56, 0.64, 1);
-	transition-delay: var(--delay, 0ms);
+	transition: opacity var(--duration, 2500ms) linear var(--delay, 0ms),
+		transform var(--duration, 2500ms) cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay, 0ms);
+	transform: perspective(1000px) translate(var(--tx, 0), var(--ty, 0)) scale(var(--scale, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--rotate, 0deg));
 }
 
 .scroll-animate.is-visible,
 .animated-element.is-visible {
-	opacity: 1;
-	/* GPU acceleration only for visible elements to reduce initial memory pressure */
+	opacity: 1 !important;
 	will-change: transform, opacity;
+	transform: perspective(1000px) translate(var(--tx, 0), var(--ty, 0)) scale(var(--scale, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(var(--rotate, 0deg));
 }
 
-/* Animation states - transform-specific initial states */
-/* (opacity: 0 is already set in .scroll-animate base class) */
+/* Initial state - transform values before animation */
+[data-animation='fade-in'] { --tx: 0; --ty: 0; }
+[data-animation='fade-in-up'] { --ty: var(--translate-distance, 300px); }
+[data-animation='fade-in-down'] { --ty: calc(-1 * var(--translate-distance, 300px)); }
+[data-animation='fade-in-left'] { --tx: calc(-1 * var(--translate-distance, 300px)); }
+[data-animation='fade-in-right'] { --tx: var(--translate-distance, 300px); }
 
-/* Fade In (no transform, just opacity) */
-[data-animation='fade-in'] {
-	/* No transform needed, uses base opacity: 0 from .scroll-animate */
-}
-
-[data-animation='fade-in'].is-visible {
-	/* Inherits opacity: 1 from .scroll-animate.is-visible */
-	transform: none;
-}
-
-/* Fade In Up */
-[data-animation='fade-in-up'] {
-	transform: translateY(300px);
-}
-
-[data-animation='fade-in-up'].is-visible {
-	transform: translateY(0);
-}
-
-/* Fade In Down */
-[data-animation='fade-in-down'] {
-	transform: translateY(-300px);
-}
-
-[data-animation='fade-in-down'].is-visible {
-	transform: translateY(0);
-}
-
-/* Fade In Left */
-[data-animation='fade-in-left'] {
-	transform: translateX(-300px);
-}
-
-[data-animation='fade-in-left'].is-visible {
-	transform: translateX(0);
-}
-
-/* Fade In Right */
-[data-animation='fade-in-right'] {
-	transform: translateX(300px);
-}
-
-[data-animation='fade-in-right'].is-visible {
-	transform: translateX(0);
-}
-
-/* Zoom In */
-[data-animation='zoom-in'] {
-	transform: scale(0.3);
-}
-
-[data-animation='zoom-in'].is-visible {
-	transform: scale(1);
-}
-
-/* Zoom Out */
-[data-animation='zoom-out'] {
-	transform: scale(2);
-}
-
-[data-animation='zoom-out'].is-visible {
-	transform: scale(1);
-}
-
-/* Zoom In Up */
-[data-animation='zoom-in-up'] {
-	transform: scale(0.5) translateY(300px);
-}
-
-[data-animation='zoom-in-up'].is-visible {
-	transform: scale(1) translateY(0);
-}
-
-/* Zoom In Left */
-[data-animation='zoom-in-left'] {
-	transform: scale(0.5) translateX(-300px);
-}
-
-[data-animation='zoom-in-left'].is-visible {
-	transform: scale(1) translateX(0);
-}
-
-/* Zoom In Right */
-[data-animation='zoom-in-right'] {
-	transform: scale(0.5) translateX(300px);
-}
-
-[data-animation='zoom-in-right'].is-visible {
-	transform: scale(1) translateX(0);
-}
+[data-animation='zoom-in'] { --scale: 0.3; }
+[data-animation='zoom-out'] { --scale: 2; }
+[data-animation='zoom-in-up'] { --scale: 0.5; --ty: var(--translate-distance, 300px); }
+[data-animation='zoom-in-left'] { --scale: 0.5; --tx: calc(-1 * var(--translate-distance, 300px)); }
+[data-animation='zoom-in-right'] { --scale: 0.5; --tx: var(--translate-distance, 300px); }
 
-/* Flip */
-[data-animation='flip'] {
-	transform: perspective(1000px) rotateY(90deg);
-}
+[data-animation='flip'] { --ry: 90deg; }
+[data-animation='flip-x'] { --rx: 90deg; }
 
-[data-animation='flip'].is-visible {
-	transform: perspective(1000px) rotateY(0deg);
-}
+[data-animation='slide-rotate'] { --tx: calc(-1 * var(--translate-distance, 300px)); --rotate: -45deg; }
+[data-animation='bounce-in'] { --scale: 0; }
 
-/* Flip X */
-[data-animation='flip-x'] {
-	transform: perspective(1000px) rotateX(90deg);
-}
+/* Visible state - reset transform values to final position */
+[data-animation='fade-in-up'].is-visible { --ty: 0; }
+[data-animation='fade-in-down'].is-visible { --ty: 0; }
+[data-animation='fade-in-left'].is-visible { --tx: 0; }
+[data-animation='fade-in-right'].is-visible { --tx: 0; }
 
-[data-animation='flip-x'].is-visible {
-	transform: perspective(1000px) rotateX(0deg);
-}
+[data-animation='zoom-in'].is-visible { --scale: 1; }
+[data-animation='zoom-out'].is-visible { --scale: 1; }
+[data-animation='zoom-in-up'].is-visible { --scale: 1; --ty: 0; }
+[data-animation='zoom-in-left'].is-visible { --scale: 1; --tx: 0; }
+[data-animation='zoom-in-right'].is-visible { --scale: 1; --tx: 0; }
 
-/* Slide Rotate */
-[data-animation='slide-rotate'] {
-	transform: translateX(-300px) rotate(-45deg);
-}
+[data-animation='flip'].is-visible { --ry: 0deg; }
+[data-animation='flip-x'].is-visible { --rx: 0deg; }
 
-[data-animation='slide-rotate'].is-visible {
-	transform: translateX(0) rotate(0deg);
-}
+[data-animation='slide-rotate'].is-visible { --tx: 0; --rotate: 0deg; }
 
-/* Bounce In */
-[data-animation='bounce-in'] {
-	transform: scale(0);
+@keyframes bounce {
+	0% { transform: scale(0); }
+	50% { transform: scale(1.1); }
+	100% { transform: scale(1); }
 }
 
+/* Bounce animation - special case with keyframes */
 [data-animation='bounce-in'].is-visible {
-	transform: scale(1);
-	animation: bounce var(--duration, 800ms) cubic-bezier(0.68, -0.55, 0.265, 1.55);
+	animation: bounce var(--duration, 1500ms) cubic-bezier(0.68, -0.55, 0.265, 1.55);
 	animation-delay: var(--delay, 0ms);
 }
 
-@keyframes bounce {
-	0% {
-		transform: scale(0);
-	}
-	50% {
-		transform: scale(1.1);
-	}
-	100% {
-		transform: scale(1);
-	}
-}
-
 /* Accessibility: Respect user's motion preferences */
 @media (prefers-reduced-motion: reduce) {
 	.scroll-animate,
 	.animated-element {
-		/* Disable animations for users who prefer reduced motion */
 		transition: none;
 		animation: none !important;
 	}
 
-	/* Still show final state without animation */
 	.scroll-animate.is-visible,
 	.animated-element.is-visible {
 		opacity: 1;

package/dist/animations.d.ts

@@ -1,15 +1,18 @@
 /**
- * Animation type definitions and utilities
+ * Calculate rootMargin for IntersectionObserver from offset or custom rootMargin
+ *
+ * @param {number} [offset] - Viewport offset (0-100). 0 = bottom of viewport touches top of element, 100 = top of viewport touches top of element
+ * @param {string} [rootMargin] - Custom rootMargin string (takes precedence over offset)
+ * @returns {string} rootMargin string for IntersectionObserver
  */
+export function calculateRootMargin(offset?: number, rootMargin?: string): string;
 /**
- * Type-safe animation names
- * Maps to CSS classes in animations.css
+ * Animation utilities
+ * Type definitions have been moved to types.js for single source of truth
  */
-export type AnimationType = 'fade-in' | 'fade-in-up' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'zoom-in' | 'zoom-out' | 'zoom-in-up' | 'zoom-in-left' | 'zoom-in-right' | 'flip' | 'flip-x' | 'slide-rotate' | 'bounce-in';
 /**
- * Calculate rootMargin for IntersectionObserver from offset or custom rootMargin
- * @param offset - Viewport offset (0-100). 0 = bottom of viewport touches top of element, 100 = top of viewport touches top of element
- * @param rootMargin - Custom rootMargin string (takes precedence over offset)
- * @returns rootMargin string for IntersectionObserver
+ * All available animation types in the library
+ * Useful for programmatic access and validation
+ * @type {readonly string[]}
  */
-export declare function calculateRootMargin(offset?: number, rootMargin?: string): string;
+export const ANIMATION_TYPES: readonly string[];

package/dist/animations.js

@@ -1,13 +1,38 @@
 /**
- * Animation type definitions and utilities
+ * Animation utilities
+ * Type definitions have been moved to types.js for single source of truth
  */
+
+/**
+ * All available animation types in the library
+ * Useful for programmatic access and validation
+ * @type {readonly string[]}
+ */
+export const ANIMATION_TYPES = [
+	'fade-in',
+	'fade-in-up',
+	'fade-in-down',
+	'fade-in-left',
+	'fade-in-right',
+	'zoom-in',
+	'zoom-out',
+	'zoom-in-up',
+	'zoom-in-left',
+	'zoom-in-right',
+	'flip',
+	'flip-x',
+	'slide-rotate',
+	'bounce-in'
+];
+
 /**
  * Calculate rootMargin for IntersectionObserver from offset or custom rootMargin
- * @param offset - Viewport offset (0-100). 0 = bottom of viewport touches top of element, 100 = top of viewport touches top of element
- * @param rootMargin - Custom rootMargin string (takes precedence over offset)
- * @returns rootMargin string for IntersectionObserver
+ *
+ * @param {number} [offset] - Viewport offset (0-100). 0 = bottom of viewport touches top of element, 100 = top of viewport touches top of element
+ * @param {string} [rootMargin] - Custom rootMargin string (takes precedence over offset)
+ * @returns {string} rootMargin string for IntersectionObserver
  */
 export function calculateRootMargin(offset, rootMargin) {
-    return rootMargin ??
-        (offset !== undefined ? `-${100 - offset}% 0px -${offset}% 0px` : '-10% 0px -10% 0px');
+	return rootMargin ??
+		(offset !== undefined ? `-${100 - offset}% 0px -${offset}% 0px` : '-10% 0px -10% 0px');
 }

package/dist/dom-utils.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @param {HTMLElement} element
+ * @param {number} [duration]
+ * @param {number} [delay=0]
+ */
+export function setCSSVariables(element: HTMLElement, duration?: number, delay?: number): void;
+/**
+ * @param {HTMLElement} element
+ * @param {import('./types.js').AnimationType} animation
+ */
+export function setupAnimationElement(element: HTMLElement, animation: import("./types.js").AnimationType): void;
+/**
+ * @param {HTMLElement} element
+ * @param {boolean} [debug=false]
+ * @param {number} [offset=0]
+ * @param {string} [sentinelColor='#00e0ff']
+ * @param {string} [debugLabel]
+ * @param {string} [sentinelId]
+ * @returns {{ element: HTMLElement, id: string }}
+ */
+export function createSentinel(element: HTMLElement, debug?: boolean, offset?: number, sentinelColor?: string, debugLabel?: string, sentinelId?: string): {
+    element: HTMLElement;
+    id: string;
+};
+/**
+ * Check if CSS animations are loaded and warn if not (dev only)
+ * @returns {boolean} True if CSS appears to be loaded
+ */
+export function checkAndWarnIfCSSNotLoaded(): boolean;