drawnui-react 0.1.0-preview.1

package/dist/controls/SkiaSprite.d.ts

@@ -0,0 +1,99 @@
+import type { Image } from "canvaskit-wasm";
+import type { DrawingContext } from "../core/SkiaControl";
+import { SKRect, ScaledSize } from "../core/Types";
+import { AnimatedFramesRenderer } from "./AnimatedFramesRenderer";
+/** DrawnUi SpritePlacementConfig: how a frame maps to the sprite's box (units = points). */
+export interface SpritePlacementConfig {
+    UnitsPerPixel?: number;
+    WidthUnits?: number;
+    HeightUnits?: number;
+    AnchorX?: number;
+    AnchorY?: number;
+    OffsetXUnits?: number;
+    OffsetYUnits?: number;
+}
+/**
+ * Mirrors DrawnUi SkiaSprite: plays a spritesheet (`Source`, `Columns` × `Rows` frames, `MaxFrames`, optional
+ * `FrameSequence` / `AnimationName`) at `FramesPerSecond` on the frames animator (`AutoPlay`, `Repeat`,
+ * `SpeedRatio`, `Start` / `Stop` / `Seek`). Every frame is drawn from the sheet with nearest sampling, AspectFit
+ * into the box; transparent frame borders are trimmed like the C# SpriteFrameImage (content bounds scanned
+ * once per frame). `ApplyPlacementConfig` places the frame by units-per-pixel / size / anchor / offset.
+ */
+export declare class SkiaSprite extends AnimatedFramesRenderer {
+    /** Decoded sheets per source (C# CachedSpriteSheets; the images belong to SkiaImageManager too). */
+    static readonly CachedSpriteSheets: Map<string, Image>;
+    static readonly RegisteredAnimations: Map<string, number[]>;
+    /** Registers a named frame sequence usable through `AnimationName`. */
+    static CreateAnimationSequence(name: string, frameSequence: number[]): number[];
+    private source;
+    private columns;
+    private rows;
+    private maxFrames;
+    private framesPerSecond;
+    private frameSequence?;
+    private animationName?;
+    private currentFrame;
+    private loadGeneration;
+    private lastColumns;
+    private lastRows;
+    private contentBounds;
+    private pixels?;
+    private frameRect;
+    /** The decoded sheet (C# SpriteSheet). */
+    SpriteSheet?: Image;
+    FrameWidth: number;
+    FrameHeight: number;
+    TotalFrames: number;
+    DurationMs: number;
+    FrameDurationMs: number;
+    /** Placement (C# Render* fields), see ApplyPlacementConfig. */
+    RenderUnitsPerPixel: number;
+    RenderWidthUnits: number;
+    RenderHeightUnits: number;
+    RenderAnchorX: number;
+    RenderAnchorY: number;
+    RenderOffsetXUnits: number;
+    RenderOffsetYUnits: number;
+    /** Where the current frame was drawn last time, canvas pixels (C# Display.DisplayRect). */
+    DisplayRect: SKRect;
+    Success?: (sender: SkiaSprite, source: string) => void;
+    Error?: (sender: SkiaSprite, error: Error) => void;
+    get Source(): string;
+    set Source(v: string);
+    get Columns(): number;
+    set Columns(v: number);
+    get Rows(): number;
+    set Rows(v: number);
+    /** Frames to use from the sheet, 0 = all. */
+    get MaxFrames(): number;
+    set MaxFrames(v: number);
+    get FramesPerSecond(): number;
+    set FramesPerSecond(v: number);
+    /** Custom order of frames to play instead of 0..TotalFrames-1. */
+    get FrameSequence(): number[] | undefined;
+    set FrameSequence(v: number[] | undefined);
+    get AnimationName(): string | undefined;
+    set AnimationName(v: string | undefined);
+    get CurrentFrame(): number;
+    set CurrentFrame(v: number);
+    ApplyPlacementConfig(placement?: SpritePlacementConfig): void;
+    ReloadSource(): void;
+    static LoadSourceAsync(source: string): Promise<Image>;
+    SetSpriteSheet(image: Image): void;
+    protected RecalculateFrames(): void;
+    protected GetFrameNumberFromTime(msTime: number): number;
+    protected SetCurrentFrame(frameNumber: number): void;
+    /** Transparent borders of a frame, scanned once (C# ScanFrameContentBounds over the bitmap alpha). */
+    private GetFrameContentBounds;
+    protected OnAnimatorUpdated(value: number): void;
+    protected OnAnimatorSeeking(time: number): void;
+    protected OnAnimatorInitializing(): void;
+    protected ApplySpeed(): void;
+    protected CheckCanStartAnimator(): boolean;
+    Start(delayMs?: number): void;
+    protected MeasureAbsolute(widthConstraint: number, heightConstraint: number, scale: number): ScaledSize;
+    /** C# ResolveFrameMetrics: source rect of the trimmed content and its display rect inside dest. */
+    private ResolveFrameMetrics;
+    protected RenderFrame(ctx: DrawingContext): void;
+    protected OnDisposing(): void;
+}

package/dist/controls/SkiaSprite.js

@@ -0,0 +1,324 @@
+import { Super } from "../core/Super";
+import { SkiaImageManager } from "../core/SkiaImageManager";
+import { SKRect, ScaledSize } from "../core/Types";
+import { AnimatedFramesRenderer } from "./AnimatedFramesRenderer";
+/**
+ * Mirrors DrawnUi SkiaSprite: plays a spritesheet (`Source`, `Columns` × `Rows` frames, `MaxFrames`, optional
+ * `FrameSequence` / `AnimationName`) at `FramesPerSecond` on the frames animator (`AutoPlay`, `Repeat`,
+ * `SpeedRatio`, `Start` / `Stop` / `Seek`). Every frame is drawn from the sheet with nearest sampling, AspectFit
+ * into the box; transparent frame borders are trimmed like the C# SpriteFrameImage (content bounds scanned
+ * once per frame). `ApplyPlacementConfig` places the frame by units-per-pixel / size / anchor / offset.
+ */
+export class SkiaSprite extends AnimatedFramesRenderer {
+    /** Decoded sheets per source (C# CachedSpriteSheets; the images belong to SkiaImageManager too). */
+    static CachedSpriteSheets = new Map();
+    static RegisteredAnimations = new Map();
+    /** Registers a named frame sequence usable through `AnimationName`. */
+    static CreateAnimationSequence(name, frameSequence) { SkiaSprite.RegisteredAnimations.set(name, frameSequence); return frameSequence; }
+    source = "";
+    columns = 1;
+    rows = 1;
+    maxFrames = 0;
+    framesPerSecond = 24;
+    frameSequence;
+    animationName;
+    currentFrame = 0;
+    loadGeneration = 0;
+    lastColumns = -1;
+    lastRows = -1;
+    contentBounds = new Map();
+    pixels;
+    frameRect = { X: 0, Y: 0, Content: { Left: 0, Top: 0, Width: 0, Height: 0 } };
+    /** The decoded sheet (C# SpriteSheet). */
+    SpriteSheet;
+    FrameWidth = 0;
+    FrameHeight = 0;
+    TotalFrames = 0;
+    DurationMs = 0;
+    FrameDurationMs = 0;
+    /** Placement (C# Render* fields), see ApplyPlacementConfig. */
+    RenderUnitsPerPixel = -1;
+    RenderWidthUnits = -1;
+    RenderHeightUnits = -1;
+    RenderAnchorX = 0.5;
+    RenderAnchorY = 0.5;
+    RenderOffsetXUnits = 0;
+    RenderOffsetYUnits = 0;
+    /** Where the current frame was drawn last time, canvas pixels (C# Display.DisplayRect). */
+    DisplayRect = SKRect.Empty;
+    Success;
+    Error;
+    get Source() { return this.source; }
+    set Source(v) { if (this.source !== v) {
+        this.source = v ?? "";
+        this.ReloadSource();
+    } }
+    get Columns() { return this.columns; }
+    set Columns(v) { if (this.columns !== v) {
+        this.columns = v;
+        this.Update();
+    } }
+    get Rows() { return this.rows; }
+    set Rows(v) { if (this.rows !== v) {
+        this.rows = v;
+        this.Update();
+    } }
+    /** Frames to use from the sheet, 0 = all. */
+    get MaxFrames() { return this.maxFrames; }
+    set MaxFrames(v) { if (this.maxFrames !== v) {
+        this.maxFrames = v;
+        this.RecalculateFrames();
+        this.Update();
+    } }
+    get FramesPerSecond() { return this.framesPerSecond; }
+    set FramesPerSecond(v) { if (this.framesPerSecond !== v) {
+        this.framesPerSecond = v;
+        this.RecalculateFrames();
+        if (this.Animator) {
+            this.OnAnimatorInitializing();
+        }
+    } }
+    /** Custom order of frames to play instead of 0..TotalFrames-1. */
+    get FrameSequence() { return this.frameSequence; }
+    set FrameSequence(v) { if (this.frameSequence !== v) {
+        this.frameSequence = v;
+        this.RecalculateFrames();
+        this.Update();
+    } }
+    get AnimationName() { return this.animationName; }
+    set AnimationName(v) {
+        if (this.animationName === v)
+            return;
+        this.animationName = v;
+        if (v) {
+            const seq = SkiaSprite.RegisteredAnimations.get(v);
+            if (seq)
+                this.FrameSequence = seq;
+            else
+                console.warn(`[SkiaSprite] Animation sequence '${v}' not found`);
+        }
+    }
+    get CurrentFrame() { return this.currentFrame; }
+    set CurrentFrame(v) { this.SetCurrentFrame(v); }
+    ApplyPlacementConfig(placement) {
+        this.RenderUnitsPerPixel = placement?.UnitsPerPixel ?? -1;
+        this.RenderWidthUnits = placement?.WidthUnits ?? -1;
+        this.RenderHeightUnits = placement?.HeightUnits ?? -1;
+        this.RenderAnchorX = placement?.AnchorX ?? 0.5;
+        this.RenderAnchorY = placement?.AnchorY ?? 0.5;
+        this.RenderOffsetXUnits = placement?.OffsetXUnits ?? 0;
+        this.RenderOffsetYUnits = placement?.OffsetYUnits ?? 0;
+        this.Update();
+    }
+    // ---- loading (C# ReloadSource / LoadSourceAsync / SetSpriteSheet) ----
+    ReloadSource() {
+        if (!this.source)
+            return;
+        const generation = ++this.loadGeneration;
+        const source = this.source;
+        SkiaSprite.LoadSourceAsync(source).then((image) => { if (generation !== this.loadGeneration)
+            return; this.SetSpriteSheet(image); this.Success?.(this, source); }, (e) => { if (generation === this.loadGeneration)
+            this.Error?.(this, e); });
+    }
+    static async LoadSourceAsync(source) {
+        const cached = SkiaSprite.CachedSpriteSheets.get(source);
+        if (cached)
+            return cached;
+        const image = await SkiaImageManager.Instance.LoadImageAsync(source);
+        SkiaSprite.CachedSpriteSheets.set(source, image);
+        return image;
+    }
+    SetSpriteSheet(image) {
+        if (!image || image === this.SpriteSheet || this.IsDisposed)
+            return;
+        const wasPlaying = this.IsPlaying;
+        if (wasPlaying)
+            this.Stop();
+        this.SpriteSheet = image;
+        this.pixels = undefined;
+        this.contentBounds.clear();
+        this.RecalculateFrames();
+        if (this.TotalFrames > 0) {
+            this.InitializeAnimator(); // AutoPlay applied inside
+            this.SetCurrentFrame(this.DefaultFrame);
+            if (wasPlaying && !this.IsPlaying)
+                this.Start();
+        }
+        this.Update();
+    }
+    RecalculateFrames() {
+        const sheet = this.SpriteSheet;
+        if (!sheet)
+            return;
+        this.contentBounds.clear();
+        const framesX = Math.max(1, this.columns), framesY = Math.max(1, this.rows);
+        const inSheet = Math.min(framesX * framesY, this.maxFrames > 0 ? this.maxFrames : Number.MAX_SAFE_INTEGER);
+        this.FrameWidth = Math.floor(sheet.width() / framesX);
+        this.FrameHeight = Math.floor(sheet.height() / framesY);
+        this.TotalFrames = this.frameSequence && this.frameSequence.length > 0 ? this.frameSequence.length : inSheet;
+        this.FrameDurationMs = 1000 / (this.framesPerSecond || 24);
+        this.DurationMs = this.TotalFrames * this.FrameDurationMs;
+        this.lastColumns = this.columns;
+        this.lastRows = this.rows;
+    }
+    GetFrameNumberFromTime(msTime) {
+        if (this.DurationMs <= 0)
+            return 0;
+        if (msTime < 0)
+            msTime = this.DurationMs + msTime;
+        msTime %= this.DurationMs;
+        const frame = Math.floor(msTime / this.FrameDurationMs);
+        if (this.frameSequence && this.frameSequence.length > 0)
+            return frame % this.frameSequence.length;
+        return Math.min(frame, this.TotalFrames - 1);
+    }
+    SetCurrentFrame(frameNumber) {
+        if (!this.SpriteSheet || this.TotalFrames === 0)
+            return;
+        frameNumber = Math.max(0, Math.min(frameNumber, this.TotalFrames - 1));
+        const actual = this.frameSequence && this.frameSequence.length > 0 ? this.frameSequence[Math.min(frameNumber, this.frameSequence.length - 1)] : frameNumber;
+        this.currentFrame = frameNumber;
+        const framesX = Math.max(1, this.columns);
+        const x = (actual % framesX) * this.FrameWidth, y = Math.floor(actual / framesX) * this.FrameHeight;
+        this.frameRect = { X: x, Y: y, Content: this.GetFrameContentBounds(actual, x, y) };
+        this.InvalidateCache();
+        this.RepaintComposition();
+    }
+    /** Transparent borders of a frame, scanned once (C# ScanFrameContentBounds over the bitmap alpha). */
+    GetFrameContentBounds(frame, frameX, frameY) {
+        const cached = this.contentBounds.get(frame);
+        if (cached)
+            return cached;
+        const full = { Left: 0, Top: 0, Width: this.FrameWidth, Height: this.FrameHeight };
+        const sheet = this.SpriteSheet;
+        if (!sheet || this.FrameWidth <= 0 || this.FrameHeight <= 0)
+            return full;
+        if (!this.pixels) {
+            const CK = Super.CK;
+            const w = sheet.width(), h = sheet.height();
+            const px = sheet.readPixels(0, 0, { width: w, height: h, colorType: CK.ColorType.RGBA_8888, alphaType: CK.AlphaType.Unpremul, colorSpace: CK.ColorSpace.SRGB });
+            if (!px) {
+                this.contentBounds.set(frame, full);
+                return full;
+            }
+            this.pixels = px;
+        }
+        const w = sheet.width();
+        const maxX = Math.min(frameX + this.FrameWidth, w), maxY = Math.min(frameY + this.FrameHeight, sheet.height());
+        let minX = this.FrameWidth, minY = this.FrameHeight, mx = -1, my = -1;
+        for (let yy = frameY; yy < maxY; yy++) {
+            for (let xx = frameX; xx < maxX; xx++) {
+                if (this.pixels[(yy * w + xx) * 4 + 3] === 0)
+                    continue;
+                const lx = xx - frameX, ly = yy - frameY;
+                if (lx < minX)
+                    minX = lx;
+                if (ly < minY)
+                    minY = ly;
+                if (lx > mx)
+                    mx = lx;
+                if (ly > my)
+                    my = ly;
+            }
+        }
+        const bounds = mx < minX || my < minY ? full : { Left: minX, Top: minY, Width: mx - minX + 1, Height: my - minY + 1 };
+        this.contentBounds.set(frame, bounds);
+        return bounds;
+    }
+    // ---- animator ----
+    OnAnimatorUpdated(value) { this.Seek(value); }
+    OnAnimatorSeeking(time) {
+        if (!this.SpriteSheet)
+            return;
+        const frame = this.GetFrameNumberFromTime(time);
+        if (frame !== this.currentFrame)
+            this.SetCurrentFrame(frame);
+    }
+    OnAnimatorInitializing() {
+        if (!this.SpriteSheet || !this.Animator)
+            return;
+        this.ApplySpeed();
+        this.Animator.mValue = 0;
+        this.Animator.mMinValue = 0;
+        this.Animator.mMaxValue = this.DurationMs;
+    }
+    ApplySpeed() {
+        if (!this.SpriteSheet || !this.Animator)
+            return;
+        this.Animator.Speed = this.SpeedRatio < 1 ? this.DurationMs * (1 + this.SpeedRatio) : this.DurationMs / this.SpeedRatio;
+    }
+    CheckCanStartAnimator() { return !!this.SpriteSheet && this.TotalFrames > 0; }
+    Start(delayMs = 0) { if (this.SpriteSheet && this.TotalFrames > 0)
+        super.Start(delayMs); }
+    // ---- measure / draw (C# SpriteFrameImage: AspectFit of the FRAME into the box, then the placement config) ----
+    MeasureAbsolute(widthConstraint, heightConstraint, scale) {
+        let w = widthConstraint, h = heightConstraint;
+        const fw = this.FrameWidth, fh = this.FrameHeight;
+        if (fw > 0 && fh > 0) {
+            if (this.RenderUnitsPerPixel > 0) {
+                w = isFinite(w) ? w : fw * this.RenderUnitsPerPixel * scale;
+                h = isFinite(h) ? h : fh * this.RenderUnitsPerPixel * scale;
+            }
+            if (!isFinite(w) && isFinite(h))
+                w = h * fw / fh;
+            else if (!isFinite(h) && isFinite(w))
+                h = w * fh / fw;
+        }
+        if (!isFinite(w) || !isFinite(h))
+            return ScaledSize.FromPixels(0, 0, scale);
+        return ScaledSize.FromPixels(w, h, scale);
+    }
+    /** C# ResolveFrameMetrics: source rect of the trimmed content and its display rect inside dest. */
+    ResolveFrameMetrics(dest, scale) {
+        const fw = Math.max(1, this.FrameWidth), fh = Math.max(1, this.FrameHeight);
+        const c = this.frameRect.Content;
+        const cx = Math.max(0, Math.min(c.Left, fw - 1)), cy = Math.max(0, Math.min(c.Top, fh - 1));
+        const cw = c.Width > 0 ? Math.min(c.Width, fw - cx) : fw, ch = c.Height > 0 ? Math.min(c.Height, fh - cy) : fh;
+        const fit = Math.min(dest.Width / fw, dest.Height / fh); // AspectFit of the logical frame
+        let logicalW = fw * fit, logicalH = fh * fit;
+        if (this.RenderUnitsPerPixel > 0) {
+            logicalW = fw * this.RenderUnitsPerPixel * scale;
+            logicalH = fh * this.RenderUnitsPerPixel * scale;
+        }
+        if (this.RenderWidthUnits > 0 || this.RenderHeightUnits > 0) {
+            if (this.RenderWidthUnits > 0)
+                logicalW = this.RenderWidthUnits * scale;
+            if (this.RenderHeightUnits > 0)
+                logicalH = this.RenderHeightUnits * scale;
+            if (this.RenderWidthUnits > 0 && this.RenderHeightUnits <= 0)
+                logicalH = logicalW * fh / fw;
+            else if (this.RenderHeightUnits > 0 && this.RenderWidthUnits <= 0)
+                logicalW = logicalH * fw / fh;
+        }
+        const pxX = logicalW / fw, pxY = logicalH / fh;
+        const anchorX = dest.Left + dest.Width * this.RenderAnchorX, anchorY = dest.Top + dest.Height * this.RenderAnchorY;
+        const left = anchorX - logicalW * this.RenderAnchorX + cx * pxX + Math.round(this.RenderOffsetXUnits * scale);
+        const top = anchorY - logicalH * this.RenderAnchorY + cy * pxY + Math.round(this.RenderOffsetYUnits * scale);
+        return {
+            src: new SKRect(this.frameRect.X + cx, this.frameRect.Y + cy, this.frameRect.X + cx + cw, this.frameRect.Y + cy + ch),
+            display: new SKRect(left, top, left + cw * pxX, top + ch * pxY),
+        };
+    }
+    RenderFrame(ctx) {
+        const sheet = this.SpriteSheet;
+        if (!sheet || this.TotalFrames === 0)
+            return;
+        if (this.columns !== this.lastColumns || this.rows !== this.lastRows) {
+            this.RecalculateFrames();
+            this.SetCurrentFrame(this.currentFrame);
+        }
+        const CK = Super.CK;
+        const { src, display } = this.ResolveFrameMetrics(ctx.Destination, ctx.Scale);
+        this.DisplayRect = display;
+        const paint = new CK.Paint();
+        paint.setAntiAlias(false);
+        ctx.Context.Canvas.drawImageRectOptions(sheet, CK.LTRBRect(src.Left, src.Top, src.Right, src.Bottom), CK.LTRBRect(display.Left, display.Top, display.Right, display.Bottom), CK.FilterMode.Nearest, CK.MipmapMode.None, paint);
+        paint.delete();
+    }
+    OnDisposing() {
+        this.loadGeneration++;
+        super.OnDisposing();
+        this.SpriteSheet = undefined; // shared with the cache, never deleted here
+        this.pixels = undefined;
+    }
+}

package/dist/controls/SkiaSpriteSet.d.ts

@@ -0,0 +1,27 @@
+import type { SKRect } from "../core/Types";
+import { SkiaLayout } from "./SkiaLayout";
+import { SkiaSprite, type SpritePlacementConfig } from "./SkiaSprite";
+/**
+ * Mirrors DrawnUi SkiaSpriteSet: a stateful sprite switcher that pre-creates one SkiaSprite per integer `State`
+ * through `Define()`; setting `State` swaps the active child atomically (`OnChangeState`, override it and call
+ * super, then adjust `CurrentSprite`, e.g. ScaleX for mirroring). Sprites fill the set's box.
+ */
+export declare class SkiaSpriteSet extends SkiaLayout {
+    private readonly sprites;
+    private active?;
+    private state;
+    constructor();
+    /** Current integer state; setting it triggers OnChangeState. */
+    get State(): number;
+    set State(v: number);
+    /** The currently active SkiaSprite. */
+    get CurrentSprite(): SkiaSprite | undefined;
+    /** Creates and registers the sprite for a state (C# Define), preconfigured; it becomes active when it is the current state. */
+    Define(state: number, source: string, columns: number, rows: number, fps?: number, repeat?: number, autoPlay?: boolean, placement?: SpritePlacementConfig): this;
+    /** The hit box follows the drawn frame of the active sprite (C# HitBoxAuto). */
+    get HitBoxAuto(): SKRect;
+    private SetActive;
+    /** Base: swap the active child to the pre-created sprite for newState. */
+    protected OnChangeState(_oldState: number, newState: number): void;
+    protected DisposeChildren(): void;
+}

package/dist/controls/SkiaSpriteSet.js

@@ -0,0 +1,75 @@
+import { SkiaLayout } from "./SkiaLayout";
+import { SkiaSprite } from "./SkiaSprite";
+/**
+ * Mirrors DrawnUi SkiaSpriteSet: a stateful sprite switcher that pre-creates one SkiaSprite per integer `State`
+ * through `Define()`; setting `State` swaps the active child atomically (`OnChangeState`, override it and call
+ * super, then adjust `CurrentSprite`, e.g. ScaleX for mirroring). Sprites fill the set's box.
+ */
+export class SkiaSpriteSet extends SkiaLayout {
+    sprites = new Map();
+    active;
+    state = 0;
+    constructor() {
+        super();
+        this.Type = "Absolute";
+        this.UseCache = "Operations";
+    }
+    /** Current integer state; setting it triggers OnChangeState. */
+    get State() { return this.state; }
+    set State(v) { if (this.state !== v) {
+        const old = this.state;
+        this.state = v;
+        this.OnChangeState(old, v);
+        this.Update();
+    } }
+    /** The currently active SkiaSprite. */
+    get CurrentSprite() { return this.active; }
+    /** Creates and registers the sprite for a state (C# Define), preconfigured; it becomes active when it is the current state. */
+    Define(state, source, columns, rows, fps = 15, repeat = -1, autoPlay = true, placement) {
+        const s = new SkiaSprite();
+        s.UseCache = "Image";
+        s.HorizontalOptions = "Fill";
+        s.VerticalOptions = "Fill";
+        s.AutoPlay = autoPlay;
+        s.Repeat = repeat;
+        s.FramesPerSecond = fps;
+        s.Columns = columns;
+        s.Rows = rows;
+        s.Source = source;
+        s.ApplyPlacementConfig(placement);
+        this.sprites.set(state, s);
+        if (!this.active && state === this.state)
+            this.SetActive(s);
+        return this;
+    }
+    /** The hit box follows the drawn frame of the active sprite (C# HitBoxAuto). */
+    get HitBoxAuto() {
+        const d = this.active?.DisplayRect;
+        return d && d.Width > 0 ? d : super.HitBoxAuto;
+    }
+    SetActive(sprite) {
+        if (this.active === sprite)
+            return;
+        if (this.active) {
+            this.RemoveSubView(this.active);
+            this.active.Stop();
+        }
+        this.active = sprite;
+        this.AddSubView(sprite);
+        if (sprite.TotalFrames > 0)
+            sprite.Start();
+    }
+    /** Base: swap the active child to the pre-created sprite for newState. */
+    OnChangeState(_oldState, newState) {
+        const sprite = this.sprites.get(newState);
+        if (sprite)
+            this.SetActive(sprite);
+    }
+    DisposeChildren() {
+        super.DisposeChildren();
+        for (const s of this.sprites.values())
+            s.Dispose();
+        this.sprites.clear();
+        this.active = undefined;
+    }
+}

package/dist/controls/SkiaSvg.d.ts

@@ -0,0 +1,43 @@
+import { type DrawingContext, SkiaControl } from "../core/SkiaControl";
+import { type Color, type DrawImageAlignment, SKRect, ScaledSize, type TransformAspect } from "../core/Types";
+/**
+ * Mirrors DrawnUi SkiaSvg. CanvasKit's npm build has no SVG renderer, so the browser decodes the
+ * SVG (HTMLImageElement) and it is rasterized at the exact pixel size it is displayed at, re-rasterized
+ * only when that size changes — crisp at any scale, one bitmap per size. TintColor recolors via SrcIn.
+ */
+export declare class SkiaSvg extends SkiaControl {
+    Aspect: TransformAspect;
+    HorizontalAlignment: DrawImageAlignment;
+    VerticalAlignment: DrawImageAlignment;
+    /** Transparent = keep the SVG's own colors. */
+    TintColor: Color;
+    Success?: (sender: SkiaSvg, source: string) => void;
+    Error?: (sender: SkiaSvg, error: Error) => void;
+    IsLoading: boolean;
+    /** Where the scaled svg was drawn last frame, canvas pixels. */
+    DisplayRect: SKRect;
+    private source;
+    private svgString;
+    private loadGeneration;
+    private element?;
+    constructor();
+    private intrinsic;
+    private raster?;
+    private rasterKey;
+    /** URL of an .svg file (relative to the page or absolute). */
+    get Source(): string;
+    set Source(value: string);
+    /** Inline SVG markup; takes precedence over Source. */
+    get SvgString(): string;
+    set SvgString(value: string);
+    private Clear;
+    protected OnDisposing(): void;
+    private DropRaster;
+    private Decode;
+    /** Natural size: the decoded image's, else the viewBox (SVGs without width/height decode as 0x0 or 300x150). */
+    private static IntrinsicSize;
+    /** Bitmap of the svg at exactly w x h pixels (cached until the size changes). */
+    private GetRaster;
+    protected MeasureAbsolute(widthConstraint: number, heightConstraint: number, scale: number): ScaledSize;
+    protected Paint(ctx: DrawingContext): void;
+}