@gjsify/canvas2d-core 0.4.0 → 0.4.4

package/package.json

@@ -1,48 +1,52 @@
 {
-  "name": "@gjsify/canvas2d-core",
-  "version": "0.4.0",
-  "description": "Cairo-backed Canvas 2D core (CanvasRenderingContext2D, Path2D, ImageData) — no GTK dependency",
-  "type": "module",
-  "module": "lib/esm/index.js",
-  "types": "lib/types/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./lib/types/index.d.ts",
-      "default": "./lib/esm/index.js"
+    "name": "@gjsify/canvas2d-core",
+    "version": "0.4.4",
+    "description": "Cairo-backed Canvas 2D core (CanvasRenderingContext2D, Path2D, ImageData) — no GTK dependency",
+    "type": "module",
+    "module": "lib/esm/index.js",
+    "types": "lib/types/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./lib/types/index.d.ts",
+            "default": "./lib/esm/index.js"
+        }
+    },
+    "files": [
+        "lib"
+    ],
+    "scripts": {
+        "clear": "rm -rf lib tmp tsconfig.tsbuildinfo test.gjs.mjs || exit 0",
+        "check": "tsc --noEmit",
+        "build": "gjsify run build:gjsify && gjsify run build:types",
+        "build:gjsify": "gjsify build --library 'src/**/*.{ts,js}' --exclude 'src/**/*.spec.{mts,ts}' 'src/test.{mts,ts}'",
+        "build:types": "tsc",
+        "build:test": "gjsify run build:test:gjs",
+        "build:test:gjs": "gjsify build src/test.mts --app gjs --outfile test.gjs.mjs",
+        "build:test:browser": "gjsify build src/test.browser.mts --app browser --outfile dist/test.browser.mjs",
+        "test": "gjsify run build:gjsify && gjsify run build:test && gjsify run test:gjs",
+        "test:gjs": "gjsify run test.gjs.mjs"
+    },
+    "keywords": [
+        "gjs",
+        "canvas",
+        "canvas2d",
+        "cairo",
+        "offscreen"
+    ],
+    "dependencies": {
+        "@girs/gdk-4.0": "4.0.0-4.0.0-rc.15",
+        "@girs/gdkpixbuf-2.0": "2.0.0-4.0.0-rc.15",
+        "@girs/gjs": "4.0.0-rc.15",
+        "@girs/glib-2.0": "2.88.0-4.0.0-rc.15",
+        "@girs/gobject-2.0": "2.88.0-4.0.0-rc.15",
+        "@girs/pango-1.0": "1.57.1-4.0.0-rc.15",
+        "@girs/pangocairo-1.0": "1.0.0-4.0.0-rc.15"
+    },
+    "devDependencies": {
+        "@gjsify/cli": "^0.4.4",
+        "@gjsify/dom-elements": "^0.4.4",
+        "@gjsify/unit": "^0.4.4",
+        "@types/node": "^25.6.2",
+        "typescript": "^6.0.3"
     }
-  },
-  "scripts": {
-    "clear": "rm -rf lib tmp tsconfig.tsbuildinfo test.gjs.mjs || exit 0",
-    "check": "tsc --noEmit",
-    "build": "yarn build:gjsify && yarn build:types",
-    "build:gjsify": "gjsify build --library 'src/**/*.{ts,js}' --exclude 'src/**/*.spec.{mts,ts}' 'src/test.{mts,ts}'",
-    "build:types": "tsc",
-    "build:test": "yarn build:test:gjs",
-    "build:test:gjs": "gjsify build src/test.mts --app gjs --outfile test.gjs.mjs",
-    "build:test:browser": "gjsify build src/test.browser.mts --app browser --outfile dist/test.browser.mjs",
-    "test": "yarn build:gjsify && yarn build:test && yarn test:gjs",
-    "test:gjs": "gjsify run test.gjs.mjs"
-  },
-  "keywords": [
-    "gjs",
-    "canvas",
-    "canvas2d",
-    "cairo",
-    "offscreen"
-  ],
-  "dependencies": {
-    "@girs/gdk-4.0": "4.0.0-4.0.0-rc.15",
-    "@girs/gdkpixbuf-2.0": "2.0.0-4.0.0-rc.15",
-    "@girs/gjs": "4.0.0-rc.15",
-    "@girs/glib-2.0": "2.88.0-4.0.0-rc.15",
-    "@girs/gobject-2.0": "2.88.0-4.0.0-rc.15",
-    "@girs/pango-1.0": "1.57.1-4.0.0-rc.15",
-    "@girs/pangocairo-1.0": "1.0.0-4.0.0-rc.15"
-  },
-  "devDependencies": {
-    "@gjsify/cli": "^0.4.0",
-    "@gjsify/unit": "^0.4.0",
-    "@types/node": "^25.6.2",
-    "typescript": "^6.0.3"
-  }
-}
+}

package/src/cairo-types.ts

@@ -1,44 +0,0 @@
-// Local typed shape for Cairo objects whose runtime methods are missing from
-// the GIR-generated `@girs/cairo-1.0` / `@girs/gjs/cairo` typings.
-//
-// `setExtend()` and `setFilter()` exist at runtime on every Cairo pattern but
-// are absent from the .d.ts (the GIR generator emits an empty `class Pattern`
-// for "Foreign Struct" types). Rather than reach for `(pat as any).setFilter`
-// at every call site, we declare a thin interface here and narrow the
-// `Cairo.Pattern` returned by `Cairo.Context.getSource()` through a single
-// helper.
-//
-// Reference: https://www.cairographics.org/manual/cairo-cairo-pattern-t.html
-//
-// This is a pure type-level construct; runtime behavior is unchanged.
-
-import type Cairo from 'cairo';
-
-/**
- * The `setExtend` / `setFilter` slice that exists at runtime on every
- * `cairo_pattern_t` but is missing from the GIR types. Combined with
- * `Cairo.Pattern` to give us a fully-typed view.
- */
-export interface CairoPatternRuntime {
-    setExtend(extend: Cairo.Extend): void;
-    getExtend(): Cairo.Extend;
-    setFilter(filter: Cairo.Filter): void;
-    getFilter(): Cairo.Filter;
-}
-
-/** A `Cairo.Pattern` augmented with the runtime methods documented above. */
-export type CairoPattern = Cairo.Pattern & CairoPatternRuntime;
-
-/**
- * Narrow a `Cairo.Pattern` returned by the GIR API to the augmented type.
- * Returns `null` if the input is missing the runtime methods (e.g. a future
- * Cairo binding that reshapes the API).
- */
-export function asCairoPattern(pat: Cairo.Pattern | undefined | null): CairoPattern | null {
-    if (!pat) return null;
-    const candidate = pat as CairoPattern;
-    if (typeof candidate.setFilter !== 'function' || typeof candidate.setExtend !== 'function') {
-        return null;
-    }
-    return candidate;
-}

package/src/cairo-utils.ts

@@ -1,254 +0,0 @@
-// Cairo utility helpers for Canvas 2D context
-// Handles format conversions and path operations not directly available in Cairo.
-
-import type Cairo from 'cairo';
-
-/**
- * Convert quadratic Bezier control point to cubic Bezier control points.
- * Canvas 2D has quadraticCurveTo but Cairo only has cubic curveTo.
- *
- * Given current point (cx, cy), quadratic control point (cpx, cpy), and end (x, y):
- *   cp1 = current + 2/3 * (cp - current)
- *   cp2 = end + 2/3 * (cp - end)
- */
-export function quadraticToCubic(
-    cx: number, cy: number,
-    cpx: number, cpy: number,
-    x: number, y: number,
-): { cp1x: number; cp1y: number; cp2x: number; cp2y: number } {
-    return {
-        cp1x: cx + (2 / 3) * (cpx - cx),
-        cp1y: cy + (2 / 3) * (cpy - cy),
-        cp2x: x + (2 / 3) * (cpx - x),
-        cp2y: y + (2 / 3) * (cpy - y),
-    };
-}
-
-/**
- * Compute arcTo parameters.
- * Canvas arcTo(x1,y1,x2,y2,radius) draws a line from current point to the tangent point,
- * then an arc of the given radius tangent to both lines (current→p1 and p1→p2).
- *
- * Returns the two tangent points and arc center, or null if degenerate (collinear points).
- */
-export function computeArcTo(
-    x0: number, y0: number,
-    x1: number, y1: number,
-    x2: number, y2: number,
-    radius: number,
-): { tx0: number; ty0: number; tx1: number; ty1: number; cx: number; cy: number; startAngle: number; endAngle: number; counterclockwise: boolean } | null {
-    // Direction vectors
-    const dx0 = x0 - x1;
-    const dy0 = y0 - y1;
-    const dx1 = x2 - x1;
-    const dy1 = y2 - y1;
-
-    // Lengths
-    const len0 = Math.sqrt(dx0 * dx0 + dy0 * dy0);
-    const len1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
-
-    if (len0 === 0 || len1 === 0) return null;
-
-    // Normalize
-    const ux0 = dx0 / len0;
-    const uy0 = dy0 / len0;
-    const ux1 = dx1 / len1;
-    const uy1 = dy1 / len1;
-
-    // Cross product to determine direction
-    const cross = ux0 * uy1 - uy0 * ux1;
-    if (Math.abs(cross) < 1e-10) return null; // Collinear
-
-    // Half-angle between the two direction vectors
-    const dot = ux0 * ux1 + uy0 * uy1;
-    const halfAngle = Math.acos(Math.max(-1, Math.min(1, dot))) / 2;
-
-    // Distance from p1 to tangent point
-    const tanDist = radius / Math.tan(halfAngle);
-
-    // Tangent points
-    const tx0 = x1 + ux0 * tanDist;
-    const ty0 = y1 + uy0 * tanDist;
-    const tx1 = x1 + ux1 * tanDist;
-    const ty1 = y1 + uy1 * tanDist;
-
-    // Center of the arc circle: perpendicular to the bisector, distance = radius / sin(halfAngle)
-    const centerDist = radius / Math.sin(halfAngle);
-    const bisectX = (ux0 + ux1) / 2;
-    const bisectY = (uy0 + uy1) / 2;
-    const bisectLen = Math.sqrt(bisectX * bisectX + bisectY * bisectY);
-    const cx = x1 + (bisectX / bisectLen) * centerDist;
-    const cy = y1 + (bisectY / bisectLen) * centerDist;
-
-    // Start and end angles
-    const startAngle = Math.atan2(ty0 - cy, tx0 - cx);
-    const endAngle = Math.atan2(ty1 - cy, tx1 - cx);
-
-    // Counterclockwise if cross product is positive
-    const counterclockwise = cross > 0;
-
-    return { tx0, ty0, tx1, ty1, cx, cy, startAngle, endAngle, counterclockwise };
-}
-
-/**
- * Apply an arcTo operation to a Cairo context.
- */
-export function cairoArcTo(
-    ctx: Cairo.Context,
-    x0: number, y0: number,
-    x1: number, y1: number,
-    x2: number, y2: number,
-    radius: number,
-): void {
-    const result = computeArcTo(x0, y0, x1, y1, x2, y2, radius);
-    if (!result) {
-        // Degenerate: just draw a line to (x1, y1)
-        ctx.lineTo(x1, y1);
-        return;
-    }
-
-    const { tx0, ty0, cx, cy, startAngle, endAngle, counterclockwise } = result;
-
-    // Line from current point to first tangent point
-    ctx.lineTo(tx0, ty0);
-
-    // Arc
-    if (counterclockwise) {
-        ctx.arcNegative(cx, cy, radius, startAngle, endAngle);
-    } else {
-        ctx.arc(cx, cy, radius, startAngle, endAngle);
-    }
-}
-
-/**
- * Draw an ellipse on a Cairo context.
- * Canvas ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, counterclockwise)
- * is implemented via save/translate/rotate/scale/arc/restore.
- */
-export function cairoEllipse(
-    ctx: Cairo.Context,
-    x: number, y: number,
-    radiusX: number, radiusY: number,
-    rotation: number,
-    startAngle: number, endAngle: number,
-    counterclockwise: boolean,
-): void {
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.rotate(rotation);
-    ctx.scale(radiusX, radiusY);
-
-    if (counterclockwise) {
-        ctx.arcNegative(0, 0, 1, startAngle, endAngle);
-    } else {
-        ctx.arc(0, 0, 1, startAngle, endAngle);
-    }
-
-    ctx.restore();
-}
-
-/**
- * Draw a rounded rectangle path on a Cairo context.
- * Implements the Canvas roundRect(x, y, w, h, radii) method.
- */
-export function cairoRoundRect(
-    ctx: Cairo.Context,
-    x: number, y: number,
-    w: number, h: number,
-    radii: number | number[],
-): void {
-    // Normalize radii to [topLeft, topRight, bottomRight, bottomLeft]
-    let tl: number, tr: number, br: number, bl: number;
-    if (typeof radii === 'number') {
-        tl = tr = br = bl = radii;
-    } else if (radii.length === 1) {
-        tl = tr = br = bl = radii[0];
-    } else if (radii.length === 2) {
-        tl = br = radii[0];
-        tr = bl = radii[1];
-    } else if (radii.length === 3) {
-        tl = radii[0];
-        tr = bl = radii[1];
-        br = radii[2];
-    } else {
-        tl = radii[0];
-        tr = radii[1];
-        br = radii[2];
-        bl = radii[3];
-    }
-
-    // Clamp radii so they don't exceed half the width/height
-    const maxR = Math.min(w / 2, h / 2);
-    tl = Math.min(tl, maxR);
-    tr = Math.min(tr, maxR);
-    br = Math.min(br, maxR);
-    bl = Math.min(bl, maxR);
-
-    const PI_2 = Math.PI / 2;
-
-    ctx.newSubPath();
-    // Top-left corner
-    ctx.arc(x + tl, y + tl, tl, Math.PI, Math.PI + PI_2);
-    // Top-right corner
-    ctx.arc(x + w - tr, y + tr, tr, -PI_2, 0);
-    // Bottom-right corner
-    ctx.arc(x + w - br, y + h - br, br, 0, PI_2);
-    // Bottom-left corner
-    ctx.arc(x + bl, y + h - bl, bl, PI_2, Math.PI);
-    ctx.closePath();
-}
-
-/**
- * Map Canvas globalCompositeOperation to Cairo.Operator values.
- *
- * Cairo.Operator enum (verified runtime in GJS 1.86):
- *   CLEAR=0, SOURCE=1, OVER=2, IN=3, OUT=4, ATOP=5,
- *   DEST=6, DEST_OVER=7, DEST_IN=8, DEST_OUT=9, DEST_ATOP=10,
- *   XOR=11, ADD=12, SATURATE=13,
- *   MULTIPLY=14, SCREEN=15, OVERLAY=16, DARKEN=17, LIGHTEN=18,
- *   COLOR_DODGE=19, COLOR_BURN=20, HARD_LIGHT=21, SOFT_LIGHT=22,
- *   DIFFERENCE=23, EXCLUSION=24, HSL_HUE=25, HSL_SATURATION=26,
- *   HSL_COLOR=27, HSL_LUMINOSITY=28
- */
-export const COMPOSITE_OP_MAP: Record<string, number> = {
-    'source-over': 2,      // OVER
-    'source-in': 3,        // IN
-    'source-out': 4,       // OUT
-    'source-atop': 5,      // ATOP
-    'destination-over': 7, // DEST_OVER
-    'destination-in': 8,   // DEST_IN
-    'destination-out': 9,  // DEST_OUT
-    'destination-atop': 10,// DEST_ATOP
-    'lighter': 12,         // ADD
-    'copy': 1,             // SOURCE
-    'xor': 11,             // XOR
-    'multiply': 14,        // MULTIPLY
-    'screen': 15,          // SCREEN
-    'overlay': 16,         // OVERLAY
-    'darken': 17,          // DARKEN
-    'lighten': 18,         // LIGHTEN
-    'color-dodge': 19,     // COLOR_DODGE
-    'color-burn': 20,      // COLOR_BURN
-    'hard-light': 21,      // HARD_LIGHT
-    'soft-light': 22,      // SOFT_LIGHT
-    'difference': 23,      // DIFFERENCE
-    'exclusion': 24,       // EXCLUSION
-    'hue': 25,             // HSL_HUE
-    'saturation': 26,      // HSL_SATURATION
-    'color': 27,           // HSL_COLOR
-    'luminosity': 28,      // HSL_LUMINOSITY
-};
-
-/** Map Canvas lineCap to Cairo.LineCap values */
-export const LINE_CAP_MAP: Record<string, number> = {
-    'butt': 0,
-    'round': 1,
-    'square': 2,
-};
-
-/** Map Canvas lineJoin to Cairo.LineJoin values */
-export const LINE_JOIN_MAP: Record<string, number> = {
-    'miter': 0,
-    'round': 1,
-    'bevel': 2,
-};

package/src/canvas-clearing.spec.ts

@@ -1,126 +0,0 @@
-// Canvas 2D clearRect tests — verifies the Cairo.Operator.CLEAR path
-// correctly clears the specified rectangle regardless of transform,
-// clip, globalAlpha, and globalCompositeOperation.
-//
-// Ported from refs/wpt/html/canvas/element/drawing-rectangles-to-the-canvas/
-//   2d.clearRect.{basic,transform,clip,globalalpha,globalcomposite,
-//   negative,path,nonfinite}.html
-// Original: Copyright (c) Web Platform Tests contributors. 3-Clause BSD.
-// Reimplemented for GJS using @gjsify/canvas2d-core + @gjsify/unit.
-
-import { describe, it, expect } from '@gjsify/unit';
-import { CanvasRenderingContext2D } from './canvas-rendering-context-2d.js';
-
-function makeCtx(width = 30, height = 30): CanvasRenderingContext2D {
-    const canvas = { width, height };
-    return new CanvasRenderingContext2D(canvas);
-}
-
-function assertPixel(
-    ctx: CanvasRenderingContext2D,
-    x: number,
-    y: number,
-    r: number, g: number, b: number, a: number,
-): void {
-    const data = ctx.getImageData(x, y, 1, 1).data;
-    expect(data[0]).toBe(r);
-    expect(data[1]).toBe(g);
-    expect(data[2]).toBe(b);
-    expect(data[3]).toBe(a);
-}
-
-export default async () => {
-    await describe('CanvasRenderingContext2D — clearRect', async () => {
-
-        await it('clears a red-filled canvas to transparent black', async () => {
-            const ctx = makeCtx(20, 20);
-            ctx.fillStyle = 'rgb(255, 0, 0)';
-            ctx.fillRect(0, 0, 20, 20);
-            assertPixel(ctx, 10, 10, 255, 0, 0, 255);
-            ctx.clearRect(0, 0, 20, 20);
-            assertPixel(ctx, 10, 10, 0, 0, 0, 0);
-        });
-
-        await it('clears only the specified sub-rectangle', async () => {
-            const ctx = makeCtx(20, 20);
-            ctx.fillStyle = 'rgb(0, 0, 255)';
-            ctx.fillRect(0, 0, 20, 20);
-            ctx.clearRect(5, 5, 10, 10);
-            // Inside cleared region
-            assertPixel(ctx, 10, 10, 0, 0, 0, 0);
-            // Outside cleared region — still blue
-            assertPixel(ctx, 2, 2, 0, 0, 255, 255);
-            assertPixel(ctx, 17, 17, 0, 0, 255, 255);
-        });
-
-        await it('clearRect is transformed by the current matrix', async () => {
-            const ctx = makeCtx(30, 30);
-            ctx.fillStyle = 'rgb(0, 255, 0)';
-            ctx.fillRect(0, 0, 30, 30);
-            ctx.translate(10, 10);
-            ctx.clearRect(0, 0, 5, 5);
-            // The cleared region is at (10,10)-(15,15) in canvas coords
-            assertPixel(ctx, 12, 12, 0, 0, 0, 0);
-            // Pixel just outside the cleared region — still green
-            assertPixel(ctx, 16, 16, 0, 255, 0, 255);
-        });
-
-        await it('clearRect ignores globalAlpha (spec: always 0)', async () => {
-            const ctx = makeCtx(20, 20);
-            ctx.fillStyle = 'red';
-            ctx.fillRect(0, 0, 20, 20);
-            ctx.globalAlpha = 0.5;
-            ctx.clearRect(0, 0, 20, 20);
-            // Spec: clearRect completely clears, globalAlpha is ignored
-            assertPixel(ctx, 10, 10, 0, 0, 0, 0);
-        });
-
-        await it('clearRect ignores globalCompositeOperation (spec: always CLEAR)', async () => {
-            const ctx = makeCtx(20, 20);
-            ctx.fillStyle = 'red';
-            ctx.fillRect(0, 0, 20, 20);
-            ctx.globalCompositeOperation = 'xor';
-            ctx.clearRect(0, 0, 20, 20);
-            // Spec: clearRect uses CLEAR operator regardless of
-            // globalCompositeOperation
-            assertPixel(ctx, 10, 10, 0, 0, 0, 0);
-        });
-
-        await it('clearRect with negative width clears the normalized region', async () => {
-            const ctx = makeCtx(20, 20);
-            ctx.fillStyle = 'rgb(255, 255, 0)';
-            ctx.fillRect(0, 0, 20, 20);
-            // clearRect(15, 5, -10, 10) ≡ clearRect(5, 5, 10, 10)
-            ctx.clearRect(15, 5, -10, 10);
-            assertPixel(ctx, 10, 10, 0, 0, 0, 0);
-            assertPixel(ctx, 2, 2, 255, 255, 0, 255);
-        });
-
-        await it('clearRect restricted by a clip region', async () => {
-            const ctx = makeCtx(30, 30);
-            ctx.fillStyle = 'rgb(255, 0, 255)';
-            ctx.fillRect(0, 0, 30, 30);
-            // Clip to a 10×10 box starting at (10,10)
-            ctx.beginPath();
-            ctx.rect(10, 10, 10, 10);
-            ctx.clip();
-            // Try to clear the full canvas — only the clipped region should
-            // actually be cleared.
-            ctx.clearRect(0, 0, 30, 30);
-            // Inside clip → cleared
-            assertPixel(ctx, 15, 15, 0, 0, 0, 0);
-            // Outside clip → still filled
-            assertPixel(ctx, 5, 5, 255, 0, 255, 255);
-            assertPixel(ctx, 25, 25, 255, 0, 255, 255);
-        });
-
-        await it('clearRect with zero width is a no-op', async () => {
-            const ctx = makeCtx(20, 20);
-            ctx.fillStyle = 'rgb(128, 128, 128)';
-            ctx.fillRect(0, 0, 20, 20);
-            ctx.clearRect(5, 5, 0, 10);
-            // Nothing cleared — pixel still grey
-            assertPixel(ctx, 10, 10, 128, 128, 128, 255);
-        });
-    });
-};

package/src/canvas-color.spec.ts

@@ -1,113 +0,0 @@
-// parseColor tests — RGB, hex, named, and HSL formats
-// Covers Excalibur's non-standard HSL output (0-1 normalized values without %)
-// Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl
-
-import { describe, it, expect } from '@gjsify/unit';
-import { parseColor } from './color.js';
-
-export default async () => {
-
-    await describe('parseColor — hex and named', async () => {
-        await it('parses #ffffff as white', async () => {
-            const c = parseColor('#ffffff')!;
-            expect(c.r).toBe(1); expect(c.g).toBe(1); expect(c.b).toBe(1); expect(c.a).toBe(1);
-        });
-
-        await it('parses named "white" as white', async () => {
-            const c = parseColor('white')!;
-            expect(c.r).toBe(1); expect(c.g).toBe(1); expect(c.b).toBe(1);
-        });
-
-        await it('parses "black" as black', async () => {
-            const c = parseColor('black')!;
-            expect(c.r).toBe(0); expect(c.g).toBe(0); expect(c.b).toBe(0);
-        });
-    });
-
-    await describe('parseColor — rgb()/rgba()', async () => {
-        await it('parses rgb(255,0,0) as red', async () => {
-            const c = parseColor('rgb(255, 0, 0)')!;
-            expect(c.r).toBe(1); expect(c.g).toBe(0); expect(c.b).toBe(0); expect(c.a).toBe(1);
-        });
-
-        await it('parses rgba(0,0,255,0.5) as semi-transparent blue', async () => {
-            const c = parseColor('rgba(0, 0, 255, 0.5)')!;
-            expect(c.r).toBe(0); expect(c.b).toBe(1); expect(c.a).toBe(0.5);
-        });
-    });
-
-    await describe('parseColor — standard CSS hsl()/hsla()', async () => {
-        await it('hsl(0, 0%, 100%) → white', async () => {
-            const c = parseColor('hsl(0, 0%, 100%)')!;
-            expect(c).toBeDefined();
-            expect(c.r).toBeGreaterThan(0.99);
-            expect(c.g).toBeGreaterThan(0.99);
-            expect(c.b).toBeGreaterThan(0.99);
-        });
-
-        await it('hsl(0, 0%, 0%) → black', async () => {
-            const c = parseColor('hsl(0, 0%, 0%)')!;
-            expect(c).toBeDefined();
-            expect(c.r).toBe(0); expect(c.g).toBe(0); expect(c.b).toBe(0);
-        });
-
-        await it('hsl(120, 100%, 50%) → green', async () => {
-            const c = parseColor('hsl(120, 100%, 50%)')!;
-            expect(c).toBeDefined();
-            expect(c.g).toBeGreaterThan(0.99);
-            expect(c.r).toBeLessThan(0.01);
-            expect(c.b).toBeLessThan(0.01);
-        });
-
-        await it('hsla(0, 100%, 50%, 0.5) → semi-transparent red', async () => {
-            const c = parseColor('hsla(0, 100%, 50%, 0.5)')!;
-            expect(c).toBeDefined();
-            expect(c.r).toBeGreaterThan(0.99);
-            expect(c.a).toBe(0.5);
-        });
-    });
-
-    await describe('parseColor — Excalibur non-standard HSL (0-1 normalized)', async () => {
-        // Excalibur's Color.toString() → HSLColor.fromRGBA().toString()
-        // uses toFixed(0) on h/s/l values stored in 0-1 range → "hsla(h, s, l, a)"
-        // without % signs and with values that are 0 or 1 after rounding.
-
-        await it('hsla(0, 0, 1, 1) → white (Color.White)', async () => {
-            // Color.White = fromHex("#FFFFFF") → r=255,g=255,b=255,a=1
-            // → HSLColor(h=0, s=0, l=1, a=1) → "hsla(0, 0, 1, 1)"
-            const c = parseColor('hsla(0, 0, 1, 1)')!;
-            expect(c).toBeDefined();
-            expect(c.r).toBeGreaterThan(0.99);
-            expect(c.g).toBeGreaterThan(0.99);
-            expect(c.b).toBeGreaterThan(0.99);
-            expect(c.a).toBe(1);
-        });
-
-        await it('hsla(0, 0, 0, 1) → black (Color.Black)', async () => {
-            const c = parseColor('hsla(0, 0, 0, 1)')!;
-            expect(c).toBeDefined();
-            expect(c.r).toBe(0); expect(c.g).toBe(0); expect(c.b).toBe(0);
-            expect(c.a).toBe(1);
-        });
-
-        await it('hsla(0, 0, 0, 0) → transparent black', async () => {
-            const c = parseColor('hsla(0, 0, 0, 0)')!;
-            expect(c).toBeDefined();
-            expect(c.a).toBe(0);
-        });
-    });
-
-    await describe('parseColor — fillStyle round-trip via Excalibur HSL', async () => {
-        await it('returns non-null for Excalibur white string', async () => {
-            expect(parseColor('hsla(0, 0, 1, 1)')).toBeDefined();
-        });
-
-        await it('returns non-null for Excalibur black string', async () => {
-            expect(parseColor('hsla(0, 0, 0, 1)')).toBeDefined();
-        });
-
-        await it('returns null for completely invalid color string', async () => {
-            expect(parseColor('not-a-color')).toBeNull();
-        });
-    });
-};