excalibur 0.33.0-alpha.99 → 1.1.0-alpha.310

package/build/{dist → esm/src/engine}/screen.d.ts

@@ -16,12 +16,50 @@ export declare enum DisplayMode {
      * Fit the aspect ratio given by the game resolution within the container at all times will fill any gaps with canvas.
      * The displayed area outside the aspect ratio is not guaranteed to be on the screen, only the {@apilink Screen.contentArea}
      * is guaranteed to be on screen.
+     *
+     * Behaves like {@apilink DisplayMode.FitScreenAndFill} but driven by the parent element size
+     * instead of the window. Same C-frame rooting rules apply:
+     * `contentArea.topLeft === (0, 0)` and `unsafeArea` spans the full resolution in the C-frame.
      */
     FitContainerAndFill = "FitContainerAndFill",
     /**
      * Fit the aspect ratio given by the game resolution the screen at all times will fill the screen.
      * This displayed area outside the aspect ratio is not guaranteed to be on the screen, only the {@apilink Screen.contentArea}
      * is guaranteed to be on screen.
+     *
+     * Screen space (the {@apilink CoordPlane.Screen} frame, "C") is rooted at the top-left of the
+     * safe {@apilink Screen.contentArea}: `contentArea.topLeft === (0, 0)` and
+     * `contentArea.bottomRight === (contentAreaWidth, contentAreaHeight)`. The unsafe area spans the
+     * full resolution but is expressed in the same C-frame, so it extends symmetrically past the
+     * content area by half the clip on each clipped axis. {@apilink Screen.contentAreaOffset} is
+     * the resolution-space ("R") location of the content area top-left, used to convert C<->R.
+     *
+     * Horizontal-clip example (window wider than the content aspect ratio):
+     *
+     * ```
+     *     Canvas / resolution frame (R)            Screen / CoordPlane.Screen (C)
+     *
+     *       (0,0)                                          (0,0)
+     *       +-------+------------------+-------+           +--------------------------+
+     *       |unsafe |    contentArea   |unsafe |           |                          |
+     *       |(clip, |   (safe area)    |(clip, |           |       contentArea       |
+     *       | off-  |                  | off-  |   ====>   |   (0,0)..(contentW,H)    |
+     *       |screen)| R-frame (0,0) is |screen)|           |                          |
+     *       |       | here ----------> |       |           |                          |
+     *       +-------+------------------+-------+           +--------------------------+
+     *       ^-clip -^                  ^-clip -^
+     *
+     *       contentAreaOffset.x = clip
+     *
+     *        unsafeArea (C-frame): left = -clip,
+     *                           right = contentRes.width + clip,
+     *                           width = resolution.width
+     *       contentArea.width   = contentRes.width
+     *       resolution.width    = contentRes.width + 2*clip
+     * ```
+     *
+     * Vertical-clip behaves analogously on the Y axis. {@apilink DisplayMode.FitContainerAndFill}
+     * follows the same rules but driven by the parent element size instead of the window.
      */
     FitScreenAndFill = "FitScreenAndFill",
     /**
@@ -30,6 +68,11 @@ export declare enum DisplayMode {
      *
      * **warning** This will clip some drawable area from the user because of the zoom,
      * use {@apilink Screen.contentArea} to know the safe to draw area.
+     *
+     * The safe content area is centered on the (zoomed) unsafe area; the C-frame origin
+     * ({@apilink CoordPlane.Screen}) is at `contentArea.topLeft`. {@apilink Screen.contentAreaOffset}
+     * holds the per-axis half-clip in resolution space, and {@apilink Screen.unsafeArea} spans the
+     * full resolution in the same C-frame (was uninitialized before the fix).
      */
     FitContainerAndZoom = "FitContainerAndZoom",
     /**
@@ -38,6 +81,11 @@ export declare enum DisplayMode {
      *
      * **warning** This will clip some drawable area from the user because of the zoom,
      * use {@apilink Screen.contentArea} to know the safe to draw area.
+     *
+     * The safe content area is centered on the (zoomed) unsafe area; the C-frame origin
+     * ({@apilink CoordPlane.Screen}) is at `contentArea.topLeft`. {@apilink Screen.contentAreaOffset}
+     * holds the per-axis half-clip in resolution space, and {@apilink Screen.unsafeArea} spans the
+     * full resolution in the same C-frame (was uninitialized before the fix).
      */
     FitScreenAndZoom = "FitScreenAndZoom",
     /**
@@ -170,7 +218,7 @@ export interface PixelRatioChangeEvent {
 /**
  * Fires when the browser fullscreen api is successfully engaged or disengaged
  */
-export interface FullScreenChangeEvent {
+export interface FullscreenChangeEvent {
     /**
      * Current fullscreen state
      */
@@ -191,12 +239,12 @@ export interface ScreenEvents {
     /**
      * Fires when the browser fullscreen api is successfully engaged or disengaged
      */
-    fullscreen: FullScreenChangeEvent;
+    fullscreen: FullscreenChangeEvent;
 }
 export declare const ScreenEvents: {
     readonly ScreenResize: "resize";
     readonly PixelRatioChange: "pixelratio";
-    readonly FullScreenChange: "fullscreen";
+    readonly FullscreenChange: "fullscreen";
 };
 /**
  * The Screen handles all aspects of interacting with the screen for Excalibur.
@@ -279,24 +327,10 @@ export declare class Screen {
      * Get or set screen antialiasing
      */
     set antialiasing(isSmooth: boolean);
-    /**
-     * Returns true if excalibur is fullscreen using the browser fullscreen api
-     * @deprecated use isFullscreen()
-     */
-    get isFullScreen(): boolean;
     /**
      * Returns true if excalibur is fullscreen using the browser fullscreen api
      */
     get isFullscreen(): boolean;
-    /**
-     * Requests to go fullscreen using the browser fullscreen api, requires user interaction to be successful.
-     * For example, wire this to a user click handler.
-     *
-     * Optionally specify a target element id to go fullscreen, by default the game canvas is used
-     * @param elementId
-     * @deprecated use enterFullscreen(...)
-     */
-    goFullScreen(elementId?: string): Promise<void>;
     /**
      * Requests to enter fullscreen using the browser fullscreen api, requires user interaction to be successful.
      * For example, wire this to a user click handler.
@@ -305,20 +339,20 @@ export declare class Screen {
      * @param elementId
      */
     enterFullscreen(elementId?: string): Promise<void>;
-    /**
-     * Requests to exit fullscreen using the browser fullscreen api
-     * @deprecated use exitFullscreen()
-     */
-    exitFullScreen(): Promise<void>;
     exitFullscreen(): Promise<void>;
     private _viewportToPixels;
     /**
      * Takes a coordinate in normal html page space, for example from a pointer move event, and translates it to
      * Excalibur screen space.
      *
-     * Excalibur screen space starts at the top left (0, 0) corner of the viewport, and extends to the
-     * bottom right corner (resolutionX, resolutionY). When using *AndFill suffixed display modes screen space
-     * (0, 0) is the top left of the safe content area bounding box not the viewport.
+     * Excalibur screen space is rooted at the top-left (0, 0) of the {@apilink Screen.contentArea} (the safe
+     * content area), and extends to (contentArea.width, contentArea.height). Anywhere the safe area differs from
+     * the full resolution (e.g. {@apilink DisplayMode.FitScreenAndFill}, {@apilink DisplayMode.FitContainerAndFill},
+     * {@apilink DisplayMode.FitScreenAndZoom}, {@apilink DisplayMode.FitContainerAndZoom}) the screen-space origin
+     * is shifted into the safe area, not the raw canvas top-left.
+     *
+     * This matches how {@apilink ScreenElement | `screen elements`} and {@apilink CoordPlane.Screen} entities are
+     * drawn: their local (0, 0) sits at {@apilink Screen.contentArea}.topLeft.
      * @param point
      */
     pageToScreenCoordinates(point: Vector): Vector;
@@ -326,14 +360,17 @@ export declare class Screen {
      * Takes a coordinate in Excalibur screen space, and translates it to normal html page space. For example,
      * this is where html elements might live if you want to position them relative to Excalibur.
      *
-     * Excalibur screen space starts at the top left (0, 0) corner of the viewport, and extends to the
-     * bottom right corner (resolutionX, resolutionY)
+     * Excalibur screen space is rooted at the top-left (0, 0) of the {@apilink Screen.contentArea} (the safe
+     * content area), the inverse of {@apilink Screen.pageToScreenCoordinates}.
      * @param point
      */
     screenToPageCoordinates(point: Vector): Vector;
     /**
      * Takes a coordinate in Excalibur screen space, and translates it to Excalibur world space.
      *
+     * The screen coordinate is rooted at the top-left of the {@apilink Screen.contentArea} (the safe content area),
+     * matching how {@apilink ScreenElement | `screen elements`} and {@apilink CoordPlane.Screen} entities are drawn.
+     *
      * World space is where {@apilink Entity | `entities`} in Excalibur live by default {@apilink CoordPlane.World}
      * and extends infinitely out relative from the {@apilink Camera}.
      * @param point  Screen coordinate to convert
@@ -342,7 +379,9 @@ export declare class Screen {
     /**
      * Takes a coordinate in Excalibur world space, and translates it to Excalibur screen space.
      *
-     * Screen space is where {@apilink ScreenElement | `screen elements`} and {@apilink Entity | `entities`} with {@apilink CoordPlane.Screen} live.
+     * Screen space is where {@apilink ScreenElement | `screen elements`} and {@apilink Entity | `entities`} with
+     * {@apilink CoordPlane.Screen} live. The returned coordinate is rooted at the top-left of the
+     * {@apilink Screen.contentArea} (the safe content area), matching how `CoordPlane.Screen` entities are drawn.
      * @param point  World coordinate to convert
      */
     worldToScreenCoordinates(point: Vector): Vector;
@@ -405,15 +444,44 @@ export declare class Screen {
      */
     get center(): Vector;
     /**
-     * Returns the content area in screen space where it is safe to place content
+     * Returns the content area in screen space where it is safe to place content.
+     *
+     * Screen space is rooted at the top-left of the content area, so
+     * `contentArea.topLeft` is always `(0, 0)` and `contentArea.bottomRight` is
+     * `(contentArea.width, contentArea.height)`. To convert a screen-space point
+     * back to the raw canvas/resolution frame, add
+     * {@apilink Screen.contentAreaOffset}.
+     *
+     * // TODO(phase-3): a `CoordPlane.Canvas` could expose the raw resolution
+     * frame to users that need true canvas-corner coordinates.
      */
     get contentArea(): BoundingBox;
     /**
      * Returns the unsafe area in screen space, this is the full screen and some space may not be onscreen.
+     *
+     * The unsafe area spans the full resolution, expressed in the same
+     * content-area-rooted screen space as {@apilink Screen.contentArea}: when the
+     * content area is inset from the canvas (e.g. {@apilink DisplayMode.FitScreenAndFill}),
+     * `unsafeArea.topLeft` is negative by the clip amount and `unsafeArea.width`
+     * equals {@apilink Screen.resolution}.width.
      */
     get unsafeArea(): BoundingBox;
+    /**
+     * Resolution-space offset of the safe content area's top-left corner. `(0, 0)`
+     * when the content area fills the canvas (no clipping); positive when the
+     * safe area is inset (e.g. under {@apilink DisplayMode.FitScreenAndFill}).
+     *
+     * Use this to convert between the {@apilink CoordPlane.Screen} frame (rooted
+     * at {@apilink Screen.contentArea}.topLeft) and the raw canvas/resolution
+     * frame (rooted at the canvas top-left). This is the value the engine
+     * translates by before drawing {@apilink CoordPlane.Screen} entities, and the
+     * inverse offset applied by {@apilink Screen.pageToScreenCoordinates} and
+     * {@apilink Screen.screenToWorldCoordinates}.
+     */
+    get contentAreaOffset(): Vector;
     private _contentArea;
     private _unsafeArea;
+    private _contentAreaOffset;
     private _computeFit;
     private _computeFitScreenAndFill;
     private _computeFitContainerAndFill;

package/build/{dist → esm/src/engine}/tile-map/isometric-entity-component.d.ts

@@ -7,6 +7,7 @@ export interface IsometricEntityComponentOptions {
     tileHeight: number;
 }
 export declare class IsometricEntityComponent extends Component {
+    private static _NAME;
     /**
      * Vertical "height" in the isometric world
      */

package/build/{dist → esm/src/engine}/tile-map/isometric-entity-system.d.ts

@@ -2,12 +2,11 @@ import { System, SystemType } from '../entity-component-system/system';
 import { TransformComponent } from '../entity-component-system/components/transform-component';
 import { IsometricEntityComponent } from './isometric-entity-component';
 import type { Query, World } from '../entity-component-system';
-import { PauseComponent } from '../entity-component-system/components/pause-component';
 export declare class IsometricEntitySystem extends System {
     world: World;
     static priority: number;
     readonly systemType = SystemType.Update;
-    query: Query<typeof TransformComponent | typeof IsometricEntityComponent | typeof PauseComponent>;
+    query: Query<typeof TransformComponent | typeof IsometricEntityComponent>;
     constructor(world: World);
-    update(): void;
+    onUpdate(): void;
 }

package/build/{dist → esm/src/engine}/tile-map/isometric-map.d.ts

@@ -161,16 +161,6 @@ export declare class IsometricMap extends Entity implements HasNestedPointerEven
      * List containing all of the tiles in IsometricMap
      */
     readonly tiles: IsometricTile[];
-    /**
-     * Whether tiles should be visible
-     * @deprecated use isVisible
-     */
-    get visible(): boolean;
-    /**
-     * Whether tiles should be visible
-     * @deprecated use isVisible
-     */
-    set visible(val: boolean);
     /**
      * Whether tiles should be visible
      */

package/build/{dist → esm/src/engine}/tile-map/tile-map.d.ts

@@ -81,6 +81,8 @@ export declare const TileMapEvents: {
     PostUpdate: string;
     PreDraw: string;
     PostDraw: string;
+    PointerEnter: string;
+    PointerLeave: string;
     PointerUp: string;
     PointerDown: string;
     PointerMove: string;

package/build/{dist → esm/src/engine}/timer.d.ts

@@ -1,5 +1,6 @@
 import type { Scene } from './scene';
-import type * as ex from './index';
+import { Random } from './math/random';
+import { EventEmitter } from './event-emitter';
 /**
  * Built in events supported by all entities
  */
@@ -30,10 +31,6 @@ export interface TimerOptions {
      * If a number is specified then it will only repeat a number of times
      */
     numberOfRepeats?: number;
-    /**
-     * @deprecated use action: () => void, will be removed in v1.0
-     */
-    fcn?: () => void;
     /**
      * Action to perform every time the timer fires
      */
@@ -49,7 +46,7 @@ export interface TimerOptions {
     /**
      * Optionally provide a random instance to use for random behavior, otherwise a new random will be created seeded from the current time.
      */
-    random?: ex.Random;
+    random?: Random;
     /**
      * Optionally provide a callback to fire once when the timer completes its last action callback.
      */
@@ -63,7 +60,7 @@ export declare class Timer {
     private _logger;
     private static _MAX_ID;
     id: number;
-    events: ex.EventEmitter<ex.TimerEvents>;
+    events: EventEmitter<TimerEvents>;
     private _elapsedTime;
     private _totalTimeAlive;
     private _running;
@@ -73,7 +70,7 @@ export declare class Timer {
     repeats: boolean;
     maxNumberOfRepeats: number;
     randomRange: [number, number];
-    random: ex.Random;
+    random: Random;
     private _baseInterval;
     private _generateRandomInterval;
     private _onComplete;

package/build/{dist/util/pool.d.ts → esm/src/engine/util/arena-pool.d.ts}

@@ -1,13 +1,19 @@
-export declare class Pool<Type> {
+/**
+ * This pool works like an arena allocator, it preallocates a large list of objects and passes them out sequentially
+ * It is meant to be freed all at once, so things that can be reclaimed after a frame are the ideal type.
+ *
+ * If you need to take singular objects and put singular objects back {@link RentalPool} is ideal.
+ */
+export declare class ArenaPool<Type> {
     builder: () => Type;
-    recycler?: (instance: Type) => Type;
+    recycler?: ((instance: Type) => Type) | undefined;
     maxObjects: number;
     totalAllocations: number;
     index: number;
     objects: Type[];
     disableWarnings: boolean;
     private _logger;
-    constructor(builder: () => Type, recycler?: (instance: Type) => Type, maxObjects?: number);
+    constructor(builder: () => Type, recycler?: ((instance: Type) => Type) | undefined, maxObjects?: number);
     dispose(): void;
     preallocate(): void;
     /**
@@ -16,7 +22,7 @@ export declare class Pool<Type> {
      * By returning values out of the context they will be un-hooked from the pool and are free to be passed to consumers
      * @param context
      */
-    using(context: (pool: Pool<Type>) => Type[] | void): Type[];
+    using(context: (pool: ArenaPool<Type>) => Type[] | void): Type[];
     /**
      * Use a single instance out of th pool and immediately return it to the pool
      * @param context
@@ -36,3 +42,8 @@ export declare class Pool<Type> {
     done(...objects: Type[]): Type[];
     done(): void;
 }
+/**
+ * @deprecated Use ArenaPool
+ */
+export declare class Pool<T> extends ArenaPool<T> {
+}

package/build/{dist → esm/src/engine}/util/browser.d.ts

@@ -5,6 +5,14 @@ export interface NativeEventable {
 export declare class BrowserComponent<T extends NativeEventable> {
     nativeComponent: T;
     private _paused;
+    /**
+     * Event name -> (original handler -> decorated wrapper)
+     *
+     * Supports multiple handlers per event name. Each registered handler is
+     * decorated with pause-awareness; the original handler reference is the key
+     * so callers can `off(eventName, originalHandler)` by the same reference they
+     * passed to `on`.
+     */
     private _nativeHandlers;
     on(eventName: string, handler: (evt: any) => void): void;
     off(eventName: string, handler?: (event: any) => void): void;

package/build/{dist → esm/src/engine}/util/detector.d.ts

@@ -15,7 +15,7 @@ export interface DetectedFeatures {
  * Excalibur internal feature detection helper class
  */
 export declare class Detector {
-    private _features;
+    private _features?;
     failedTests: string[];
     constructor();
     /**

package/build/{dist → esm/src/engine}/util/draw-util.d.ts

@@ -16,11 +16,11 @@ export type LineCapStyle = 'butt' | 'round' | 'square';
  * @param thickness The line thickness
  * @param cap The {@apilink LineCapStyle} (butt, round, or square)
  */
-export declare function line(ctx: CanvasRenderingContext2D, color: Color, x1: number, y1: number, x2: number, y2: number, thickness?: number, cap?: LineCapStyle): void;
+export declare function line(ctx: CanvasRenderingContext2D, color: Color | undefined, x1: number, y1: number, x2: number, y2: number, thickness?: number, cap?: LineCapStyle): void;
 /**
  * Draw the vector as a point onto the canvas.
  */
-export declare function point(ctx: CanvasRenderingContext2D, color: Color, point: Vector): void;
+export declare function point(ctx: CanvasRenderingContext2D, color: Color | undefined, point: Vector): void;
 /**
  * Draw the vector as a line onto the canvas starting a origin point.
  */

package/build/{dist → esm/src/engine}/util/index.d.ts

@@ -1,7 +1,6 @@
 export * from './util';
 export * from './log';
 export * from './observable';
-export * from './easing-functions';
 import * as drawUtil from './draw-util';
 export { drawUtil as DrawUtil };
 export { Serializer } from './serializer';

package/build/{dist → esm/src/engine}/util/pause-system.d.ts

@@ -3,10 +3,16 @@ import type { Query } from '../entity-component-system';
 import { System, SystemType } from '../entity-component-system';
 import { PauseComponent } from '../entity-component-system/components/pause-component';
 export declare class PauseSystem extends System {
+    static priority: number;
     systemType: SystemType;
     query: Query<typeof PauseComponent>;
     sceneEventEmitter: EventEmitter<SceneEvents>;
     isPaused: boolean;
+    wasPaused: boolean;
     constructor(scene: Scene);
-    update(elapsed: number): void;
+    /**
+     * Number of entities currently carrying the paused tag, lets the common "nothing is paused" frame skip the scan
+     */
+    private _pausedCount;
+    onUpdate(): void;
 }

package/build/{dist → esm/src/engine}/util/rental-pool.d.ts

@@ -3,6 +3,7 @@ export declare class RentalPool<T> {
     cleaner: (used: T) => T;
     private _pool;
     private _size;
+    private _returned;
     constructor(builder: () => T, cleaner: (used: T) => T, preAllocate?: number);
     /**
      * Grow the pool size by an amount

package/build/{dist → esm/src/engine}/util/serializer.d.ts

@@ -17,7 +17,7 @@ export interface EntityData extends SerializedData {
     tags: string[];
     components: ComponentData[];
     children: EntityData[];
-    customInstance?: string;
+    customInstance?: string | null;
 }
 /**
  * Component serialization format

package/build/{dist → esm/src/engine}/util/state-machine.d.ts

@@ -30,7 +30,7 @@ export declare class StateMachine<TPossibleStates extends string, TData> {
     get currentState(): State<TData>;
     set currentState(state: State<TData>);
     states: Map<string, State<TData>>;
-    data: TData;
+    data?: TData;
     static create<TMachine extends StateMachineDescription<TData>, TData>(machineDescription: TMachine, data?: TData): StateMachine<PossibleStates<TMachine>, TData>;
     in(state: TPossibleStates): boolean;
     go(stateName: TPossibleStates, eventData?: any): boolean;

package/package.json

@@ -1,30 +1,28 @@
 {
   "name": "excalibur",
+  "type": "module",
   "sideEffects": false,
-  "version": "0.33.0-alpha.99",
-  "exNextVersion": "0.33.0",
+  "version": "1.1.0-alpha.310",
+  "exNextVersion": "1.1.0",
   "publishConfig": {
     "provenance": true
   },
   "description": "Excalibur.js is a simple JavaScript game engine with TypeScript bindings for making 2D games in HTML5 Canvas. Our mission is to make web game development as simple as possible.",
   "author": "https://github.com/excaliburjs/Excalibur/graphs/contributors",
   "homepage": "https://github.com/excaliburjs/Excalibur",
-  "main": "build/dist/excalibur.min.js",
-  "typings": "build/dist/excalibur.d.ts",
+  "main": "build/esm/excalibur.min.js",
+  "typings": "build/esm/src/engine/excalibur.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "types": "./build/dist/excalibur.d.ts",
+      "types": "./build/esm/src/engine/excalibur.d.ts",
       "development": {
-        "import": "./build/esm/excalibur.development.js",
-        "require": "./build/dist/excalibur.development.js"
+        "import": "./build/esm/excalibur.development.js"
       },
       "production": {
-        "import": "./build/esm/excalibur.js",
-        "require": "./build/dist/excalibur.js"
+        "import": "./build/esm/excalibur.js"
       },
-      "import": "./build/esm/excalibur.js",
-      "require": "./build/dist/excalibur.js"
+      "import": "./build/esm/excalibur.js"
     }
   },
   "repository": {
@@ -45,15 +43,15 @@
   ],
   "scripts": {
     "all": "npm run format && npm run lint && npm run build && npm run test",
-    "all:ci": "npm run format && npm run lint && npm run test:ci && npm run build",
+    "all:ci": "npm run format && npm run lint && npm run apidocs && npm run test:ci && npm run build",
     "clean": "rimraf ./build",
-    "linux:ci": "npm run clean && npm run all:ci && npm run coveralls && npm run apidocs",
+    "linux:ci": "npm run clean && npm run all:ci && npm run coveralls",
     "appveyor": "npm run all:ci && npm run nuget 0.0.1",
     "browserstack": "npm run build:production && karma start karma.conf.browsers.js",
     "nuget": ".\\src\\tools\\NuGet.exe pack Excalibur.nuspec -OutputDirectory .\\build\\nuget -version",
     "dev": "concurrently --names \"build,types\" \"vite build --watch\" \"npm run types -- --watch\"",
     "start": "npm run build:watch",
-    "types": "tsc --project src/engine/tsconfig.json --declaration --incremental true --tsBuildInfoFile build/dist/.tsbuildinfo --emitDeclarationOnly",
+    "types": "tsc --project src/engine/tsconfig.json --declaration --incremental true --tsBuildInfoFile build/esm/.tsbuildinfo --emitDeclarationOnly",
     "build": "npm run build:production && npm run build:development && npm run types",
     "build:production": "vite build && vite build --minify false",
     "build:development": "vite build --mode development && vite build --mode development --minify false",
@@ -62,6 +60,7 @@
     "lint": "npm run eslint",
     "lint:fix": "npm run eslint -- --fix",
     "type-check": "cd src/engine && tsc --noEmit",
+    "type-check:tests": "cd src/spec && tsc --noEmit",
     "eslint": "eslint .",
     "visual": "storybook dev -p 6006",
     "build-storybook": "storybook build -o build-storybook",
@@ -74,29 +73,30 @@
     "test:debug:unit:headless": "npm run test:unit -- --browser.headless --inspect --no-file-parallelism",
     "test:visual": "vitest --project visual",
     "test:visual:headless": "npm run test:visual -- --browser.headless",
-    "apidocs": "node scripts/apidocs.js",
+    "apidocs": "node site/scripts/gen-typedoc-api.mjs",
     "release": "cross-env release=true npm run all",
     "prepare": "husky"
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
-    "@babel/preset-env": "7.29.2",
-    "@babel/preset-typescript": "7.28.5",
-    "@eslint/eslintrc": "3.3.5",
+    "@babel/core": "7.29.7",
+    "@babel/preset-env": "7.29.7",
+    "@babel/preset-typescript": "7.29.7",
+    "@eslint/eslintrc": "3.3.7",
     "@eslint/js": "9.30.1",
     "@fortawesome/fontawesome-free": "6.7.2",
     "@octokit/rest": "21.1.1",
-    "@storybook/html-vite": "9.1.20",
+    "@storybook/html-vite": "10.6.5",
     "@types/jasmine": "5.1.15",
-    "@types/node": "22.19.15",
+    "@types/node": "22.20.5",
     "@types/react-color": "3.0.13",
     "@types/webpack-env": "1.18.8",
-    "@vitest/browser": "3.2.4",
-    "@vitest/coverage-istanbul": "3.2.4",
-    "@vitest/ui": "3.2.4",
-    "concurrently": "9.2.1",
+    "@vitest/browser": "4.1.12",
+    "@vitest/browser-playwright": "4.1.12",
+    "@vitest/coverage-istanbul": "4.1.12",
+    "@vitest/ui": "4.1.12",
+    "concurrently": "9.2.5",
     "copyfiles": "2.4.1",
-    "coveralls-next": "5.0.0",
+    "coveralls-next": "6.0.2",
     "cross-env": "7.0.3",
     "css-loader": "6.11.0",
     "eslint": "9.30.1",
@@ -111,14 +111,14 @@
     "karma-chrome-launcher": "3.2.0",
     "karma-jasmine": "5.1.0",
     "karma-jasmine-order-reporter": "1.2.0",
-    "karma-spec-reporter": "0.0.36",
+    "karma-spec-reporter": "0.0.37",
     "karma-summary-reporter": "4.0.1",
     "karma-webpack": "5.0.1",
     "lint-staged": "15.5.2",
     "pixelmatch": "5.3.0",
-    "playwright": "1.59.1",
-    "prettier": "3.8.1",
-    "puppeteer": "24.40.0",
+    "playwright": "1.64.1",
+    "prettier": "3.8.3",
+    "puppeteer": "25.16.0",
     "raw-loader": "4.0.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -126,17 +126,16 @@
     "rimraf": "5.0.10",
     "serve": "14.2.6",
     "source-map-support": "0.5.21",
-    "storybook": "9.1.20",
+    "storybook": "10.6.5",
     "sync-request": "6.1.0",
-    "ts-loader": "9.5.4",
-    "typedoc": "0.25.13",
-    "typescript": "5.6.3",
-    "typescript-eslint": "8.38.0",
+    "ts-loader": "9.6.2",
+    "typescript": "6.0.3",
+    "typescript-eslint": "8.63.0",
     "url-loader": "4.1.1",
-    "vite": "6.4.1",
+    "vite": "8.1.6",
     "vite-plugin-banner": "0.8.1",
-    "vite-plugin-static-copy": "3.1.4",
-    "vitest": "3.2.4",
+    "vite-plugin-static-copy": "4.1.1",
+    "vitest": "4.1.12",
     "webpack": "5.104.1",
     "webpack-cli": "5.1.4"
   },
@@ -144,16 +143,11 @@
     "*.{js,jsx,ts,tsx,html,json,md,yml,yaml}": "prettier --write",
     "*.{js,jsx,ts,tsx,html}": "eslint --fix"
   },
-  "overrides": {
-    "typedoc": {
-      "typescript": ">=4.7.4"
-    }
-  },
   "devEngines": {
     "runtime": {
       "name": "node",
       "onFail": "error",
-      "version": ">=22"
+      "version": ">=24"
     },
     "packageManager": {
       "name": "npm",