@hawsen-the-first/interactiv 0.0.1

package/README.md

@@ -0,0 +1,326 @@
+# Interactiv
+
+A TypeScript framework for building embedded interactive applications with event management, state management, navigation, and screensaver functionality. The package is designed to maximise compatibility with older versions of Node/Chromium, specifically to work with BrightSign media players. 
+
+The package also emphsises support for touchscreen input, but can also be used for cursor/poiner device inputs. 
+test change
+## Installation
+
+### Local Development with npm link
+
+Since this is a local package, you can install it in your projects using npm link:
+
+```bash
+# In the interactiv package directory
+npm link
+
+# In your project directory
+npm link interactiv
+```
+
+## Features
+
+- **Event Management**: Unified pointer interactions (mouse & touch)
+- **State Management**: Global and external state management with subscriptions
+- **Navigation**: Page and view-based navigation system
+- **Screensaver**: Built-in screensaver functionality
+- **Settings Manager**: Hidden settings page with corner touch activation
+- **Animation Bus**: Animation coordination system
+- **App Builder**: Component-based application architecture
+
+## Basic Usage
+
+```typescript
+import {
+  createOrchestrator,
+  AppBuilder,
+  Page,
+  View,
+  Component,
+  html,
+  css,
+} from "interactiv";
+
+// Import animations CSS
+import "interactiv/animations.css";
+
+// Create orchestrator
+const orchestrator = createOrchestrator();
+
+// Create app
+const app = new AppBuilder(orchestrator);
+
+// Create a page
+const homePage = new Page("home-page", orchestrator, false);
+
+// Create a view
+const homeView = new View(
+  "home-view",
+  orchestrator,
+  false,
+  html`<div class="home"><h1>Welcome</h1></div>`,
+  css`.home { padding: 2rem; }`
+);
+
+// Add view to page
+homePage.addView(homeView);
+
+// Add page to app
+app.addPage(homePage);
+
+// Attach to DOM
+app.attachToDom();
+
+// Navigate to view - Two equivalent methods:
+
+// Method 1: Via AppBuilder (convenient when you have app reference)
+app.navigateToView("home-view");
+
+// Method 2: Via Orchestrator directly (recommended in components)
+orchestrator.navigateToView("home-view", {
+  type: "fade",
+  duration: 300
+});
+```
+
+## Core Modules
+
+### Event Orchestrator
+
+Create and manage event buses for communication between components:
+
+```typescript
+import { createOrchestrator } from "interactiv";
+
+const orchestrator = createOrchestrator();
+const eventBus = orchestrator.registerEventBus("my-bus");
+
+eventBus.on("my-event", (event) => {
+  console.log(event.detail);
+});
+
+eventBus.emit("my-event", { data: "Hello!" });
+```
+
+### State Management
+
+Manage global application state with subscriptions:
+
+```typescript
+import {
+  setGlobalState,
+  getGlobalState,
+  subscribeToGlobalState,
+} from "interactiv";
+
+// Set state
+setGlobalState("user.name", "John");
+
+// Get state
+const userName = getGlobalState("user.name");
+
+// Subscribe to changes
+subscribeToGlobalState("user.name", (value) => {
+  console.log("Name changed:", value);
+});
+```
+
+### Navigation Manager
+
+**Important:** NavigationManager is a singleton service that should not be instantiated directly. It is automatically created by AppBuilder, and you access navigation methods through your AppBuilder instance.
+
+Navigate between pages and views:
+
+```typescript
+// ✅ Correct: Use navigation through AppBuilder
+const app = new AppBuilder(orchestrator);
+
+// Add your pages and views
+app.addPage(homePage);
+
+// Navigate to a page
+app.navigateToPage("home-page");
+
+// Navigate to a view with optional transition
+app.navigateToView("home-view", {
+  type: "fade",
+  duration: 300,
+  easing: "ease-in-out"
+});
+
+// Get current navigation state
+const currentPageId = app.getCurrentPageId();
+const currentViewId = app.getCurrentViewId();
+const isTransitioning = app.isTransitioning();
+```
+
+**❌ Incorrect Usage:**
+```typescript
+// Don't create NavigationManager directly - this will throw an error!
+const navManager = new NavigationManager(orchestrator); // ERROR!
+```
+
+The NavigationManager uses shared global state and event bus namespaces. Creating multiple instances would cause:
+- Conflicting global state management
+- Event bus namespace collisions
+- Ambiguous navigation routing
+
+For this reason, only one instance exists per application, managed by AppBuilder.
+
+#### Navigating from Within Components
+
+All components have access to the `orchestrator` via `this.orchestrator`, making navigation simple and consistent:
+
+```typescript
+import { Component } from "interactiv";
+
+class MyComponent extends Component {
+  constructor(id: string, orchestrator: EventOrchestrator) {
+    super(id, orchestrator);
+    this.setupNavigation();
+  }
+
+  private setupNavigation(): void {
+    // Navigate to a view when button is clicked
+    this.point(".nav-button", () => {
+      this.orchestrator.navigateToView("target-view", {
+        type: "slide",
+        direction: "left",
+        duration: 300
+      });
+    });
+
+    // Navigate to a page
+    this.point(".page-button", () => {
+      this.orchestrator.navigateToPage("target-page", {
+        type: "fade",
+        duration: 400
+      });
+    });
+  }
+
+  protected defineTemplate(): void {
+    this.template = html`
+      <div>
+        <button class="nav-button">Go to View</button>
+        <button class="page-button">Go to Page</button>
+      </div>
+    `;
+  }
+
+  protected defineStyles(): void {
+    this.styles = css`
+      button {
+        padding: 1rem;
+        margin: 0.5rem;
+      }
+    `;
+  }
+}
+```
+
+**Key Benefits:**
+- Simple and direct API - no need to access event bus manually
+- Consistent mental model: orchestrator coordinates everything
+- Less boilerplate code
+- Type-safe navigation methods
+
+### Event Manager
+
+Handle pointer interactions (mouse & touch) in components:
+
+```typescript
+import { EventManager } from "interactiv";
+
+const eventManager = new EventManager(shadowRoot, "my-component");
+
+// Point interaction (click/tap)
+eventManager.point(".button", (data) => {
+  console.log("Clicked at:", data.x, data.y);
+});
+
+// Hover interaction
+eventManager.hover(".item", {
+  enter: (data) => console.log("Hover enter"),
+  leave: (data) => console.log("Hover leave"),
+});
+
+// Drag interaction
+eventManager.drag(".draggable", {
+  start: (data) => console.log("Drag start"),
+  move: (data) => console.log("Dragging"),
+  end: (data) => console.log("Drag end"),
+});
+```
+
+### Settings Manager
+
+Create hidden settings pages with corner touch activation. See [SETTINGS_MANAGER.md](./SETTINGS_MANAGER.md) for detailed documentation.
+
+## Template Helpers
+
+Use the `html` and `css` tagged template literals for better IDE support:
+
+```typescript
+import { html, css } from "interactiv";
+
+const template = html`
+  <div class="container">
+    <h1>Title</h1>
+  </div>
+`;
+
+const styles = css`
+  .container {
+    padding: 1rem;
+  }
+`;
+```
+
+## TypeScript Support
+
+This package includes full TypeScript definitions. Import types as needed:
+
+```typescript
+import type {
+  PageProps,
+  ViewProps,
+  ComponentProps,
+  PointerEventData,
+  DragCallbacks,
+  HoverCallbacks,
+  SwipeCallbacks,
+  StateSubscription,
+} from "interactiv";
+```
+
+## Development
+
+### Building the Package
+
+```bash
+npm run build
+```
+
+This compiles TypeScript to JavaScript and copies the CSS file to the dist folder.
+
+### Linting and Formatting
+
+```bash
+# Lint
+npm run lint
+
+# Format
+npm run format
+
+# Check both
+npm run check
+```
+
+## License
+
+ISC
+
+## Contributing
+
+Contributions are welcome! Please ensure all code passes linting and formatting checks before submitting.

package/dist/animations.css

@@ -0,0 +1,160 @@
+/* Base navigation item styles */
+.nav-item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.nav-item.nav-hidden {
+  opacity: 0 !important;
+  pointer-events: none;
+}
+
+/* Animation base classes */
+.animated {
+  /*Defaults: duration of 2s and timing function linear unless otherwise specified.*/
+  transition-duration: 2s;
+  transition-timing-function: linear;
+}
+
+/* Durations */
+.snap {
+  transition-duration: 0.5s !important;
+}
+
+.fast {
+  transition-duration: 1s !important;
+}
+
+.slow {
+  transition-duration: 5s !important;
+}
+
+.gradual {
+  transition-duration: 8s !important;
+}
+
+/* Snap Navigation - Immediate transitions with no animation */
+.snap-active {
+  transition: none !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  transform: none !important;
+}
+
+/* Fade Animations */
+.fade {
+  transition: opacity;
+}
+
+.fade.out {
+  opacity: 0;
+}
+
+.fade.in {
+  opacity: 1;
+}
+
+/* Fade animations for NavigationManager */
+.fade-out {
+  opacity: 0;
+}
+
+.fade-in {
+  opacity: 0;
+}
+
+.fade-active {
+  opacity: 1;
+}
+
+.transition-right {
+  transition: left 2000ms linear;
+  position: relative !important;
+  left: 1000px !important;
+}
+
+/* Slide Animations */
+.slide-out-left {
+  transform: translateX(-100%);
+}
+
+.slide-out-right {
+  transform: translateX(100%);
+}
+
+.slide-out-up {
+  transform: translateY(-100%);
+}
+
+.slide-out-down {
+  transform: translateY(100%);
+}
+
+.slide-in-left {
+  transform: translateX(-100%);
+}
+
+.slide-in-right {
+  transform: translateX(100%);
+}
+
+.slide-in-up {
+  transform: translateY(-100%);
+}
+
+.slide-in-down {
+  transform: translateY(100%);
+}
+
+.slide-active {
+  transform: translateX(0) translateY(0);
+}
+
+/* Scale Animations */
+.scale-out {
+  transform: scale(0);
+  opacity: 0;
+}
+
+.scale-in {
+  transform: scale(0);
+  opacity: 0;
+}
+
+.scale-active {
+  transform: scale(1);
+  opacity: 1;
+}
+
+/* Flip Animations */
+.flip-out {
+  transform: rotateY(-90deg);
+  opacity: 0;
+}
+
+.flip-in {
+  transform: rotateY(90deg);
+  opacity: 0;
+}
+
+.flip-active {
+  transform: rotateY(0deg);
+  opacity: 1;
+}
+
+/* Legacy fade classes for backward compatibility */
+.fade {
+  transition-property: opacity;
+}
+
+.fade.in {
+  opacity: 1;
+}
+
+.fade.out {
+  opacity: 0;
+}

package/dist/index.d.ts

@@ -0,0 +1,20 @@
+import { AppBuilder, Page, View, Component } from "./src/appBuilder";
+import { createOrchestrator, EventOrchestrator, EventBus } from "./src/eventBus";
+import { NavigationManager } from "./src/navigationManager";
+import { ScreensaverManager } from "./src/screensaverManager";
+import { SettingsManager } from "./src/settingsManager";
+import { EventManager } from "./src/eventManager";
+import { stateManager, getGlobalState, setGlobalState, subscribeToGlobalState, useGlobalStateExternal, ExternalStateManager, ComponentStateManager } from "./src/stateManager";
+import type { PointerEventData, DragCallbacks, HoverCallbacks, SwipeCallbacks } from "./src/eventManager";
+import type { StateSubscription } from "./src/stateManager";
+import type { ScreensaverConfig } from "./src/screensaverManager";
+import type { SettingsConfig } from "./src/settingsManager";
+import type { PageProps, ComponentProps, ViewProps } from "./src/types";
+import { css, html } from "./utils/template-helpers";
+import { Logger } from "./utils/logger";
+import { useAnimations, AnimationManager } from "./src/animationBus";
+import { configureLogger } from "./src/logger";
+import { GarbageCollector, createGarbageCollector, type GarbageCollectionStats } from "./src/garbageCollector";
+export { createOrchestrator, EventOrchestrator, EventBus, AppBuilder, Page, View, Component, NavigationManager, ScreensaverManager, SettingsManager, EventManager, AnimationManager, stateManager, getGlobalState, setGlobalState, subscribeToGlobalState, useGlobalStateExternal, useAnimations, ExternalStateManager, ComponentStateManager, GarbageCollector, createGarbageCollector, css, html, Logger, configureLogger, };
+export type { PointerEventData, DragCallbacks, HoverCallbacks, SwipeCallbacks, StateSubscription, ScreensaverConfig, SettingsConfig, PageProps, ViewProps, ComponentProps, GarbageCollectionStats, };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EACL,YAAY,EACZ,cAAc,EACd,cAAc,EACd,sBAAsB,EACtB,sBAAsB,EACtB,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EACV,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,cAAc,EACf,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,KAAK,sBAAsB,EAC5B,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,QAAQ,EACR,UAAU,EACV,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,YAAY,EACZ,gBAAgB,EAEhB,YAAY,EACZ,cAAc,EACd,cAAc,EACd,sBAAsB,EACtB,sBAAsB,EACtB,aAAa,EACb,oBAAoB,EACpB,qBAAqB,EAErB,gBAAgB,EAChB,sBAAsB,EACtB,GAAG,EACH,IAAI,EACJ,MAAM,EACN,eAAe,GAChB,CAAC;AAEF,YAAY,EACV,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,SAAS,EACT,SAAS,EACT,cAAc,EACd,sBAAsB,GACvB,CAAC"}

package/dist/index.js

@@ -0,0 +1,26 @@
+import { AppBuilder, Page, View, Component } from "./src/appBuilder";
+import { createOrchestrator, EventOrchestrator, EventBus } from "./src/eventBus";
+import { NavigationManager } from "./src/navigationManager";
+import { ScreensaverManager } from "./src/screensaverManager";
+import { SettingsManager } from "./src/settingsManager";
+import { EventManager } from "./src/eventManager";
+import { stateManager, getGlobalState, setGlobalState, subscribeToGlobalState, useGlobalStateExternal, ExternalStateManager, ComponentStateManager, } from "./src/stateManager";
+import { css, html } from "./utils/template-helpers";
+import { Logger } from "./utils/logger";
+import { useAnimations, AnimationManager } from "./src/animationBus";
+import { configureLogger } from "./src/logger";
+import { GarbageCollector, createGarbageCollector, } from "./src/garbageCollector";
+export { createOrchestrator, EventOrchestrator, EventBus, AppBuilder, Page, View, Component, NavigationManager, ScreensaverManager, SettingsManager, EventManager, AnimationManager, 
+// External State Management
+stateManager, getGlobalState, setGlobalState, subscribeToGlobalState, useGlobalStateExternal, useAnimations, ExternalStateManager, ComponentStateManager, 
+// Garbage Collection
+GarbageCollector, createGarbageCollector, css, html, Logger, configureLogger, };
+// Named exports for direct import
+// export {
+//   stateManager,
+//   getGlobalState,
+//   setGlobalState,
+//   subscribeToGlobalState,
+//   useGlobalStateExternal,
+//   ExternalStateManager,
+// };

package/dist/src/animationBus.d.ts

@@ -0,0 +1,30 @@
+import { EventOrchestrator } from "./eventBus";
+export declare function useAnimations(orchestrator: EventOrchestrator): AnimationManager;
+export declare class AnimationManager {
+    private orchestrator;
+    private animationRecords;
+    constructor(orchestrator: EventOrchestrator);
+    private initAnimationListeners;
+    /**
+     * Remove an animation from the records array
+     * This is called when an animation finishes or is cancelled
+     */
+    private cleanupAnimation;
+    /**
+     * Get the current number of active animations
+     */
+    getActiveAnimationCount(): number;
+    /**
+     * Clean up stale animation records (animations that are finished but not cleaned up)
+     * This is a safety net for any animations that didn't fire their finish/cancel events
+     */
+    cleanupStaleAnimations(): void;
+}
+export interface AnimationRequest {
+    type: string;
+    target: HTMLElement;
+    keyframes: Keyframe[];
+    options: KeyframeAnimationOptions;
+}
+export declare function testAnimation(orchestrator: EventOrchestrator): void;
+//# sourceMappingURL=animationBus.d.ts.map

package/dist/src/animationBus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animationBus.d.ts","sourceRoot":"","sources":["../../src/animationBus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAKzD,wBAAgB,aAAa,CAAC,YAAY,EAAE,iBAAiB,oBAI5D;AAED,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,YAAY,CAAoB;IACxC,OAAO,CAAC,gBAAgB,CAAyB;gBAErC,YAAY,EAAE,iBAAiB;IAU3C,OAAO,CAAC,sBAAsB;IA6E9B;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAQxB;;OAEG;IACI,uBAAuB,IAAI,MAAM;IAIxC;;;OAGG;IACI,sBAAsB,IAAI,IAAI;CActC;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,WAAW,CAAC;IACpB,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,OAAO,EAAE,wBAAwB,CAAC;CACnC;AASD,wBAAgB,aAAa,CAAC,YAAY,EAAE,iBAAiB,QAQ5D"}

package/dist/src/animationBus.js

@@ -0,0 +1,125 @@
+import { logger } from "./logger";
+import { generateGUID } from "../utils/generateGuid";
+const log = logger;
+export function useAnimations(orchestrator) {
+    // Initialize the AnimationManager
+    const animationManager = new AnimationManager(orchestrator);
+    return animationManager;
+}
+export class AnimationManager {
+    orchestrator;
+    animationRecords = [];
+    constructor(orchestrator) {
+        this.orchestrator = orchestrator;
+        this.orchestrator.registerEventBus("animate");
+        const animationBus = this.orchestrator.getEventBus("animate");
+        if (animationBus) {
+            this.initAnimationListeners(animationBus);
+        }
+    }
+    initAnimationListeners(animationBus) {
+        const me = this;
+        animationBus.on("add", (e) => {
+            const animationRecord = {
+                id: generateGUID(),
+                request: e.detail,
+            };
+            me.animationRecords.push(animationRecord);
+            // Auto-start the animation immediately after adding it
+            const { keyframes, options, target } = animationRecord.request;
+            animationRecord.animation = target.animate(keyframes, options);
+            // Add cleanup listeners for when animation completes
+            animationRecord.animation.addEventListener("finish", () => {
+                me.cleanupAnimation(animationRecord.id);
+                log.trace(`Animation finished and cleaned up: ${animationRecord.id} (${animationRecord.request.type})`);
+            });
+            animationRecord.animation.addEventListener("cancel", () => {
+                me.cleanupAnimation(animationRecord.id);
+                log.trace(`Animation cancelled and cleaned up: ${animationRecord.id} (${animationRecord.request.type})`);
+            });
+            log.trace(`Animation started: ${animationRecord.id} (${animationRecord.request.type})`);
+        });
+        animationBus.on("start", (e) => {
+            const animationRecord = me.animationRecords.filter((a) => a.id === e.detail)[0];
+            if (animationRecord && !animationRecord.animation) {
+                const { keyframes, options, target } = animationRecord.request;
+                animationRecord.animation = target.animate(keyframes, options);
+                log.trace(`Animation manually started: ${animationRecord.id}`);
+            }
+        });
+        animationBus.on("stop", (e) => {
+            if (e.detail === "all") {
+                for (const animationRecord of me.animationRecords) {
+                    if (animationRecord.animation instanceof Animation) {
+                        animationRecord.animation.cancel();
+                        log.trace(`Animation stopped: ${animationRecord.id}`);
+                    }
+                }
+                // Clean up all animations after cancelling
+                me.animationRecords = [];
+            }
+            else {
+                const animationRecord = me.animationRecords.filter((a) => a.id === e.detail)[0];
+                if (animationRecord?.animation) {
+                    animationRecord.animation.cancel();
+                    log.trace(`Animation stopped: ${animationRecord.id}`);
+                }
+                // Animation will be cleaned up by the cancel event listener
+            }
+        });
+        animationBus.on("stopGroup", (e) => {
+            const groupAnimations = me.animationRecords.filter((ar) => ar.group === e.detail);
+            for (const a of groupAnimations) {
+                if (a.animation) {
+                    a.animation.cancel();
+                    log.trace(`Group animation stopped: ${a.id} (group: ${e.detail})`);
+                }
+            }
+            // Animations will be cleaned up by their cancel event listeners
+        });
+    }
+    /**
+     * Remove an animation from the records array
+     * This is called when an animation finishes or is cancelled
+     */
+    cleanupAnimation(animationId) {
+        const index = this.animationRecords.findIndex((a) => a.id === animationId);
+        if (index !== -1) {
+            this.animationRecords.splice(index, 1);
+            log.trace(`Animation record removed. Total active animations: ${this.animationRecords.length}`);
+        }
+    }
+    /**
+     * Get the current number of active animations
+     */
+    getActiveAnimationCount() {
+        return this.animationRecords.length;
+    }
+    /**
+     * Clean up stale animation records (animations that are finished but not cleaned up)
+     * This is a safety net for any animations that didn't fire their finish/cancel events
+     */
+    cleanupStaleAnimations() {
+        const beforeCount = this.animationRecords.length;
+        this.animationRecords = this.animationRecords.filter((record) => {
+            if (record.animation) {
+                const playState = record.animation.playState;
+                return playState !== "finished" && playState !== "idle";
+            }
+            return false; // Remove records without animation reference
+        });
+        const removedCount = beforeCount - this.animationRecords.length;
+        if (removedCount > 0) {
+            log.trace(`Cleaned up ${removedCount} stale animation records. Remaining: ${this.animationRecords.length}`);
+        }
+    }
+}
+export function testAnimation(orchestrator) {
+    const div = document.createElement("div");
+    orchestrator.enqueue("transition", "animate", "animation", {
+        type: "fade",
+        style: "linear",
+        duration: 1000,
+        target: div,
+    });
+}