drawnui-react 0.1.0-preview.2 → 0.1.0-preview.20

package/dist/core/SkiaEffect.d.ts

@@ -125,6 +125,13 @@ export declare class SkiaShaderEffect extends SkiaEffect implements IPostRendere
     protected ApplyShaderSource(): void;
     /** Snapshot of what the parent painted (C# CreateSnapshot): the surface the pixels are on, mapped through its origin. */
     protected CreateSnapshot(ctx: DrawingContext, destination: SKRect): CachedTexture | undefined;
+    private frozenEpoch;
+    /** Canvas.GpuEpoch: GPU textures made before a WebGL context restore are made again. */
+    protected GpuEpoch(): number;
+    /** Where the parent was when the texture was frozen (Once): the texture moves with it, as its cache does. */
+    private frozenAt?;
+    private ParentOrigin;
+    private FollowParent;
     /** C# GetPrimaryTexture: the parent's cache, a frozen snapshot (Once) or nothing (Never). */
     protected GetPrimaryTexture(_ctx: DrawingContext, _destination: SKRect): CachedTexture | undefined;
     /** Image → shader with the effect's sampling, translated so texel (0,0) = bounds top-left; cached per image. */

package/dist/core/SkiaEffect.js

@@ -2,7 +2,7 @@ import { SkiaValueAnimator } from "./Animators";
 import { Easing } from "./Easing";
 import { SkiaImageManager } from "./SkiaImageManager";
 import { Super } from "./Super";
-import { Thickness } from "./Types";
+import { SKRect, Thickness } from "./Types";
 /**
  * Mirrors DrawnUi SkiaEffect: something attached to a control through `VisualEffects`. `Update()` re-renders the
  * parent (C# invalidates the parent's cache and redraws), `GetEffectMargin` reports what it paints outside the box.
@@ -129,6 +129,7 @@ export class SkiaShaderEffect extends SkiaEffect {
             this.DisposeImage(this.frozen.Image);
         this.frozen = undefined;
         this.frozenOwned = false;
+        this.frozenAt = undefined;
     }
     DisposeImage(image) {
         const sv = this.Parent?.Superview;
@@ -158,12 +159,27 @@ export class SkiaShaderEffect extends SkiaEffect {
             return undefined;
         return { Image: image, Bounds: destination, Origin: { X: ox, Y: oy } };
     }
+    frozenEpoch = 0;
+    /** Canvas.GpuEpoch: GPU textures made before a WebGL context restore are made again. */
+    GpuEpoch() { return this.Parent?.Superview?.GpuEpoch ?? 0; }
+    /** Where the parent was when the texture was frozen (Once): the texture moves with it, as its cache does. */
+    frozenAt;
+    ParentOrigin() { const r = this.Parent?.DrawingRect; return { X: r?.Left ?? 0, Y: r?.Top ?? 0 }; }
+    FollowParent(texture) {
+        if (!texture || !this.frozenAt)
+            return texture;
+        const now = this.ParentOrigin(), dx = now.X - this.frozenAt.X, dy = now.Y - this.frozenAt.Y;
+        if (dx === 0 && dy === 0)
+            return texture;
+        const b = texture.Bounds;
+        return { Image: texture.Image, Bounds: new SKRect(b.Left + dx, b.Top + dy, b.Right + dx, b.Bottom + dy), Origin: texture.Origin && { X: texture.Origin.X + dx, Y: texture.Origin.Y + dy } };
+    }
     /** C# GetPrimaryTexture: the parent's cache, a frozen snapshot (Once) or nothing (Never). */
     GetPrimaryTexture(_ctx, _destination) {
         switch (this.UseBackground) {
             case "Never": return undefined;
             case "Once":
-                if (!this.AquiredBackground || !this.frozen) {
+                if (!this.AquiredBackground || !this.frozen || this.frozenEpoch !== this.GpuEpoch()) { // a frozen texture of a lost GPU context is taken again
                     this.ReleaseFrozenSnapshot();
                     let snapshot = this.Parent?.CachedImage;
                     let owned = false;
@@ -175,9 +191,11 @@ export class SkiaShaderEffect extends SkiaEffect {
                         this.frozen = snapshot;
                         this.frozenOwned = owned;
                         this.AquiredBackground = true;
+                        this.frozenAt = this.ParentOrigin();
+                        this.frozenEpoch = this.GpuEpoch();
                     }
                 }
-                return this.frozen;
+                return this.FollowParent(this.frozen);
             default:
                 return this.Parent?.CachedImage;
         }
@@ -228,7 +246,7 @@ export class SkiaShaderEffect extends SkiaEffect {
     static async FetchText(url) {
         let p = sourceCache.get(url);
         if (!p) {
-            p = fetch(url).then((r) => { if (!r.ok)
+            p = fetch(Super.ResolveAssetUrl(url)).then((r) => { if (!r.ok)
                 throw new Error(`${r.status} ${url}`); return r.text(); });
             sourceCache.set(url, p);
         }
@@ -420,7 +438,8 @@ export class ShaderDoubleTexturesEffect extends SkiaShaderEffect {
             return undefined;
         const w = Math.round(d.Width), h = Math.round(d.Height);
         const cur = slot === "p" ? this.resizedPrimary : this.resizedSecondary;
-        if (cur && cur.source === source && cur.w === w && cur.h === h)
+        const epoch = this.GpuEpoch();
+        if (cur && cur.source === source && cur.w === w && cur.h === h && cur.epoch === epoch)
             return cur.image;
         const main = ctx.Context.Surface;
         if (!main)
@@ -435,7 +454,7 @@ export class ShaderDoubleTexturesEffect extends SkiaShaderEffect {
         const image = surface.makeImageSnapshot();
         surface.delete();
         cur?.image.delete();
-        const entry = { source, w, h, image };
+        const entry = { source, w, h, epoch, image };
         if (slot === "p")
             this.resizedPrimary = entry;
         else

package/dist/core/SkiaImageManager.js

@@ -39,7 +39,7 @@ export class SkiaImageManager {
         return inflight;
     }
     async Fetch(source, signal) {
-        const response = await fetch(source, signal ? { signal } : undefined);
+        const response = await fetch(Super.ResolveAssetUrl(source), signal ? { signal } : undefined);
         if (!response.ok)
             throw new Error(`DrawnUi: ${response.status} loading image '${source}'`);
         const image = Super.CK.MakeImageFromEncoded(await response.arrayBuffer());

package/dist/core/Styles.d.ts

@@ -0,0 +1,51 @@
+import type { SkiaControl } from "./SkiaControl";
+/**
+ * Mirrors DrawnUi.Net `Style` (SharedNet/Internals/Core/Style.cs): a set of property defaults for one control type,
+ * registered once at startup through `Super.UseDrawnUi().ConfigureStyles(...)`.
+ *
+ * The C# `Setters` list of `Setter { Property, Value }` becomes a plain object here, because React controls are
+ * classes with plain properties instead of BindableProperty: `Setters: { FontFamily: "FontText", FontSize: 14 }`.
+ */
+export interface Style {
+    /** The control class the style targets, e.g. `SkiaLabel`. */
+    TargetType: Function;
+    /** Also style classes deriving from TargetType (C# Style.ApplyToDerivedTypes). Default false. */
+    ApplyToDerivedTypes?: boolean;
+    /** Property defaults, by property name. Anything the app sets itself wins over these. */
+    Setters: Record<string, unknown>;
+}
+/** Mirrors DrawnUi.Net `IStylesCollection` / `StylesCollection`: the startup registry, static like the C# one. */
+export declare class StylesCollection {
+    /** Every style registered through ConfigureStyles, in registration order (C# StylesCollection.Styles). */
+    static readonly Styles: Style[];
+    AddStyle(style: Style): StylesCollection;
+}
+/**
+ * Applies registered styles to controls. Port of the C# `SkiaControl` styles partial
+ * (SharedNet/Draw/SkiaControl.NetShared.cs) with one difference forced by the language: C# knows which properties the
+ * app set explicitly (BindableProperty + ExplicitPropertiesSet) and skips those; here a property counts as "not set by
+ * the app" while it still equals the value the control's own constructor left, captured once per class.
+ */
+export declare class SkiaStyles {
+    private static readonly resolved;
+    private static readonly defaults;
+    /** True while no style is registered: lets Measure skip the whole feature at zero cost. */
+    static get IsEmpty(): boolean;
+    /** C# InvalidateStylesCache: drop the per-type resolution after the registry changed. */
+    static InvalidateStylesCache(): void;
+    /**
+     * Setters that apply to a control class: the exact-type style plus every ApplyToDerivedTypes style of a base class,
+     * furthest base first so a nearer style overrides it, exact type last (C# sorts by inheritance distance).
+     */
+    private static For;
+    /** The values a freshly constructed control of this class carries, for the properties a style touches. */
+    private static SnapshotDefaults;
+    /**
+     * C# ApplyInitialStyles: applies the registered defaults to one control. `atConstruction` is true when nothing has
+     * touched the control yet (the reconciler calls it between `new` and the JSX props), so every setter applies and the
+     * pre-style values are kept as this class's defaults; a control styled later only gets the properties that still
+     * hold those defaults, which is how an explicit assignment wins — the C# ExplicitPropertiesSet rule without
+     * property accessors.
+     */
+    static Apply(control: SkiaControl, atConstruction: boolean): void;
+}

package/dist/core/Styles.js

@@ -0,0 +1,92 @@
+/** Mirrors DrawnUi.Net `IStylesCollection` / `StylesCollection`: the startup registry, static like the C# one. */
+export class StylesCollection {
+    /** Every style registered through ConfigureStyles, in registration order (C# StylesCollection.Styles). */
+    static Styles = [];
+    AddStyle(style) {
+        StylesCollection.Styles.push(style);
+        SkiaStyles.InvalidateStylesCache();
+        return this;
+    }
+}
+/**
+ * Applies registered styles to controls. Port of the C# `SkiaControl` styles partial
+ * (SharedNet/Draw/SkiaControl.NetShared.cs) with one difference forced by the language: C# knows which properties the
+ * app set explicitly (BindableProperty + ExplicitPropertiesSet) and skips those; here a property counts as "not set by
+ * the app" while it still equals the value the control's own constructor left, captured once per class.
+ */
+export class SkiaStyles {
+    static resolved = new Map();
+    static defaults = new Map();
+    /** True while no style is registered: lets Measure skip the whole feature at zero cost. */
+    static get IsEmpty() { return StylesCollection.Styles.length === 0; }
+    /** C# InvalidateStylesCache: drop the per-type resolution after the registry changed. */
+    static InvalidateStylesCache() { SkiaStyles.resolved.clear(); SkiaStyles.defaults.clear(); }
+    /**
+     * Setters that apply to a control class: the exact-type style plus every ApplyToDerivedTypes style of a base class,
+     * furthest base first so a nearer style overrides it, exact type last (C# sorts by inheritance distance).
+     */
+    static For(type) {
+        let hit = SkiaStyles.resolved.get(type);
+        if (hit)
+            return hit;
+        const inherited = [];
+        let exact;
+        for (const style of StylesCollection.Styles) {
+            if (style.TargetType === type) {
+                exact = style;
+                continue;
+            }
+            if (!style.ApplyToDerivedTypes)
+                continue;
+            let distance = 0;
+            for (let base = Object.getPrototypeOf(type); base; base = Object.getPrototypeOf(base)) {
+                distance++;
+                if (base === style.TargetType) {
+                    inherited.push({ Distance: distance, Style: style });
+                    break;
+                }
+            }
+        }
+        inherited.sort((a, b) => b.Distance - a.Distance);
+        const setters = {};
+        for (const i of inherited)
+            Object.assign(setters, i.Style.Setters);
+        if (exact)
+            Object.assign(setters, exact.Setters);
+        hit = { Setters: setters, Empty: Object.keys(setters).length === 0 };
+        SkiaStyles.resolved.set(type, hit);
+        return hit;
+    }
+    /** The values a freshly constructed control of this class carries, for the properties a style touches. */
+    static SnapshotDefaults(type, sample, keys) {
+        if (SkiaStyles.defaults.has(type))
+            return;
+        const known = {};
+        for (const key of keys)
+            known[key] = sample[key];
+        SkiaStyles.defaults.set(type, known);
+    }
+    /**
+     * C# ApplyInitialStyles: applies the registered defaults to one control. `atConstruction` is true when nothing has
+     * touched the control yet (the reconciler calls it between `new` and the JSX props), so every setter applies and the
+     * pre-style values are kept as this class's defaults; a control styled later only gets the properties that still
+     * hold those defaults, which is how an explicit assignment wins — the C# ExplicitPropertiesSet rule without
+     * property accessors.
+     */
+    static Apply(control, atConstruction) {
+        const type = control.constructor;
+        const resolved = SkiaStyles.For(type);
+        if (resolved.Empty)
+            return;
+        const keys = Object.keys(resolved.Setters);
+        const target = control;
+        if (atConstruction)
+            SkiaStyles.SnapshotDefaults(type, control, keys);
+        const defaults = atConstruction ? undefined : SkiaStyles.defaults.get(type);
+        for (const key of keys) {
+            // no snapshot for this class (nothing of it ever went through the reconciler): apply as a plain default
+            if (!defaults || Object.is(target[key], defaults[key]))
+                target[key] = resolved.Setters[key];
+        }
+    }
+}

package/dist/core/Super.d.ts

@@ -1,4 +1,5 @@
 import { Thickness } from "./Types";
+import { StylesCollection } from "./Styles";
 import type { CanvasKit, Font, Typeface } from "canvaskit-wasm";
 /** Mirrors DrawnUi.Net IFontCollection: fonts.AddFont(source, alias[, weight]), plus the Blazor-head AddSymbols/AddEmojis. */
 export declare class FontCollection {
@@ -16,10 +17,16 @@ export declare class FontCollection {
     /** Registers a face under an alias; weight 100..900 lets FontWeight / FontAttributes=Bold pick the right file. */
     AddFont(source: string, alias: string, weight?: number): FontCollection;
 }
-/** Mirrors DrawnUi.Net DrawnUiBuilder: Super.UseDrawnUi().ConfigureFonts(...).BuildAsync(). */
+/** Mirrors DrawnUi.Net DrawnUiBuilder: Super.UseDrawnUi().ConfigureFonts(...).ConfigureStyles(...).BuildAsync(). */
 export declare class DrawnUiBuilder {
     private readonly fonts;
     ConfigureFonts(configure: (fonts: FontCollection) => void): DrawnUiBuilder;
+    /**
+     * Mirrors DrawnUi.Net ConfigureStyles: property defaults per control type, applied to every control unless the app
+     * sets that property itself. The usual one, same as the .NET Blazor / Fiddle hosts:
+     * `styles.AddStyle({ TargetType: SkiaLabel, ApplyToDerivedTypes: true, Setters: { FontFamily: "FontText" } })`.
+     */
+    ConfigureStyles(configure: (styles: StylesCollection) => void): DrawnUiBuilder;
     /** Loads CanvasKit + registered fonts. Must complete before the first Canvas is created. */
     BuildAsync(): Promise<void>;
 }
@@ -39,10 +46,19 @@ export declare class Super {
     static readonly Fonts: Map<string, Map<number, Typeface>>;
     /** First registered font, or CanvasKit's built-in one. */
     static DefaultTypeface?: Typeface;
+    /** CanvasKit's built-in face: what an empty FontFamily resolves to, like C# SKTypeface.CreateDefault(). */
+    static SkiaDefaultTypeface?: Typeface;
     private static readonly fontCache;
     static UseDrawnUi(): DrawnUiBuilder;
     /** Master switch: false makes every control render uncached (DrawnUi Super.CacheEnabled). */
     static CacheEnabled: boolean;
+    /**
+     * Address every engine loader fetches a source from (images, sprites, fonts, SVG, GIF, Lottie, shaders); caches
+     * stay keyed by the source itself. Web-only, no C# counterpart. Default: a file listed in
+     * `globalThis.DrawnUiAssetStamps` (written into index.html by the `drawnUiAssetStamps()` Vite plugin) gets
+     * `?v=<content hash>`, so a browser never keeps an old copy of a changed file. Replace it to map sources elsewhere.
+     */
+    static ResolveAssetUrl: (source: string) => string;
     private static readonly colorCache;
     /**
      * Color string -> CanvasKit color. Hex follows the MAUI/DrawnUi convention: #RGB, #ARGB, #RRGGBB, #AARRGGBB

package/dist/core/Super.js

@@ -1,4 +1,5 @@
 import { Thickness } from "./Types";
+import { StylesCollection } from "./Styles";
 // the "full" build: same API plus Skottie (SkiaLottie) and the paragraph module; +0.9 MB raw over the default build
 import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit.js";
 import wasmUrl from "canvaskit-wasm/bin/full/canvaskit.wasm?url";
@@ -22,13 +23,22 @@ export class FontCollection {
         return this;
     }
 }
-/** Mirrors DrawnUi.Net DrawnUiBuilder: Super.UseDrawnUi().ConfigureFonts(...).BuildAsync(). */
+/** Mirrors DrawnUi.Net DrawnUiBuilder: Super.UseDrawnUi().ConfigureFonts(...).ConfigureStyles(...).BuildAsync(). */
 export class DrawnUiBuilder {
     fonts = new FontCollection();
     ConfigureFonts(configure) {
         configure(this.fonts);
         return this;
     }
+    /**
+     * Mirrors DrawnUi.Net ConfigureStyles: property defaults per control type, applied to every control unless the app
+     * sets that property itself. The usual one, same as the .NET Blazor / Fiddle hosts:
+     * `styles.AddStyle({ TargetType: SkiaLabel, ApplyToDerivedTypes: true, Setters: { FontFamily: "FontText" } })`.
+     */
+    ConfigureStyles(configure) {
+        configure(new StylesCollection());
+        return this;
+    }
     /** Loads CanvasKit + registered fonts. Must complete before the first Canvas is created. */
     async BuildAsync() {
         Super.CK = await CanvasKitInit({ locateFile: () => wasmUrl });
@@ -36,7 +46,7 @@ export class DrawnUiBuilder {
         for (const f of this.fonts.Fonts) {
             let face = loaded.get(f.Source);
             if (!face) {
-                const data = await (await fetch(f.Source)).arrayBuffer();
+                const data = await (await fetch(Super.ResolveAssetUrl(f.Source))).arrayBuffer();
                 face = Super.CK.Typeface.MakeFreeTypeFaceFromData(data) ?? undefined;
                 if (!face)
                     throw new Error(`DrawnUi: cannot load font '${f.Source}'`);
@@ -61,7 +71,8 @@ export class DrawnUiBuilder {
             if (!Super.DefaultFontAlias)
                 Super.DefaultFontAlias = f.Alias;
         }
-        Super.DefaultTypeface ??= Super.CK.Typeface.GetDefault() ?? undefined;
+        Super.SkiaDefaultTypeface ??= Super.CK.Typeface.GetDefault() ?? undefined;
+        Super.DefaultTypeface ??= Super.SkiaDefaultTypeface;
     }
 }
 /** Mirrors DrawnUi static Super: global engine state. */
@@ -105,10 +116,26 @@ export class Super {
     static Fonts = new Map();
     /** First registered font, or CanvasKit's built-in one. */
     static DefaultTypeface;
+    /** CanvasKit's built-in face: what an empty FontFamily resolves to, like C# SKTypeface.CreateDefault(). */
+    static SkiaDefaultTypeface;
     static fontCache = new Map();
     static UseDrawnUi() { return new DrawnUiBuilder(); }
     /** Master switch: false makes every control render uncached (DrawnUi Super.CacheEnabled). */
     static CacheEnabled = true;
+    /**
+     * Address every engine loader fetches a source from (images, sprites, fonts, SVG, GIF, Lottie, shaders); caches
+     * stay keyed by the source itself. Web-only, no C# counterpart. Default: a file listed in
+     * `globalThis.DrawnUiAssetStamps` (written into index.html by the `drawnUiAssetStamps()` Vite plugin) gets
+     * `?v=<content hash>`, so a browser never keeps an old copy of a changed file. Replace it to map sources elsewhere.
+     */
+    static ResolveAssetUrl = (source) => {
+        const stamps = globalThis.DrawnUiAssetStamps;
+        if (!stamps)
+            return source;
+        const q = source.indexOf("?");
+        const v = stamps[(q < 0 ? source : source.slice(0, q)).replace(/^\.?\//, "")];
+        return v ? `${source}${q < 0 ? "?" : "&"}v=${v}` : source;
+    };
     static colorCache = new Map();
     /**
      * Color string -> CanvasKit color. Hex follows the MAUI/DrawnUi convention: #RGB, #ARGB, #RRGGBB, #AARRGGBB
@@ -145,7 +172,11 @@ export class Super {
     }
     /** Nearest registered weight of the alias (empty alias = the first registered family); reports the weight actually used. */
     static ResolveTypeface(alias, weight) {
-        const weights = Super.Fonts.get(alias || Super.DefaultFontAlias);
+        // No family: the Skia built-in face, like C# SkiaFontManager.GetFont("") -> SKTypeface.CreateDefault(). An app that
+        // wants its own font everywhere registers it as a style default (ConfigureStyles), exactly as the .NET hosts do.
+        if (!alias)
+            return { Typeface: Super.SkiaDefaultTypeface ?? Super.DefaultTypeface ?? null, Weight: 400 };
+        const weights = Super.Fonts.get(alias);
         const target = weight > 0 ? weight : 400;
         if (weights && weights.size > 0) {
             if (weights.has(target))

package/dist/core/ViewsAdapter.d.ts

@@ -16,6 +16,8 @@ export declare class ViewsAdapter {
     Created: number;
     constructor(parent: SkiaControl);
     get PoolSize(): number;
+    /** The items views are bound to. */
+    get Items(): readonly unknown[];
     get InUseCount(): number;
     /** New template / items / mode: every realized view is dropped (DrawnUi ApplyItemsSource). */
     Initialize(template: (() => SkiaControl) | undefined, items: readonly unknown[], recycling: RecyclingTemplate): void;
@@ -26,8 +28,11 @@ export declare class ViewsAdapter {
     ShiftIndices(by: number, items: readonly unknown[]): void;
     /** The realized view for an index, if any (no creation). */
     GetViewForIndex(index: number): SkiaControl | undefined;
-    /** View bound to items[index]: existing, recycled from the pool, or freshly created. */
-    GetOrCreateViewForIndex(index: number): SkiaControl | undefined;
+    /**
+     * View bound to items[index]: existing, recycled from the pool, or freshly created. `quiet`: bound before it is
+     * attached, so the rebind invalidates the view alone and not the layout, which measures or draws it right away.
+     */
+    GetOrCreateViewForIndex(index: number, quiet?: boolean): SkiaControl | undefined;
     /** Index left the visible range: recycled views go back to the pool, non-recycled ones stay realized. */
     ReleaseViewAt(index: number): void;
     /** Releases every realized index outside [first, last]. */

package/dist/core/ViewsAdapter.js

@@ -16,6 +16,8 @@ export class ViewsAdapter {
         this.parent = parent;
     }
     get PoolSize() { return this.pool.length; }
+    /** The items views are bound to. */
+    get Items() { return this.items; }
     get InUseCount() { return this.inUse.size; }
     /** New template / items / mode: every realized view is dropped (DrawnUi ApplyItemsSource). */
     Initialize(template, items, recycling) {
@@ -52,8 +54,11 @@ export class ViewsAdapter {
     }
     /** The realized view for an index, if any (no creation). */
     GetViewForIndex(index) { return this.inUse.get(index); }
-    /** View bound to items[index]: existing, recycled from the pool, or freshly created. */
-    GetOrCreateViewForIndex(index) {
+    /**
+     * View bound to items[index]: existing, recycled from the pool, or freshly created. `quiet`: bound before it is
+     * attached, so the rebind invalidates the view alone and not the layout, which measures or draws it right away.
+     */
+    GetOrCreateViewForIndex(index, quiet = false) {
         const existing = this.inUse.get(index);
         if (existing)
             return existing;
@@ -64,9 +69,11 @@ export class ViewsAdapter {
             view = this.template();
             this.Created++;
         }
-        view.Parent = this.parent;
+        if (!quiet)
+            view.Parent = this.parent;
         view.ContextIndex = index;
         view.BindingContext = this.items[index];
+        view.Parent = this.parent;
         this.inUse.set(index, view);
         return view;
     }

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./core/Types";
 export * from "./core/Gestures";
+export * from "./core/Styles";
 export * from "./core/Easing";
 export * from "./core/Animators";
 export * from "./core/ScrollAnimators";
@@ -8,9 +9,11 @@ export * from "./core/SkiaControl";
 export * from "./core/Canvas";
 export * from "./controls/SkiaLayout";
 export * from "./core/Accessibility";
+export * from "./core/Hover";
 export * from "./controls/SkiaLabel";
 export * from "./controls/TextSpan";
 export * from "./controls/SkiaRichLabel";
+export * from "./controls/SkiaLabelFps";
 export * from "./core/ControlStyle";
 export * from "./core/ImageEffects";
 export * from "./controls/SkiaToggle";
@@ -39,6 +42,7 @@ export * from "./controls/SkiaBackdrop";
 export * from "./controls/SkiaEditor";
 export * from "./controls/SkiaSprite";
 export * from "./controls/SkiaSpriteSet";
+export * from "./controls/DrawnGame";
 export * from "./core/KeyboardManager";
 export * from "./controls/AnimatedFramesRenderer";
 export * from "./controls/SkiaLottie";

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from "./core/Types";
 export * from "./core/Gestures";
+export * from "./core/Styles";
 export * from "./core/Easing";
 export * from "./core/Animators";
 export * from "./core/ScrollAnimators";
@@ -8,9 +9,11 @@ export * from "./core/SkiaControl";
 export * from "./core/Canvas";
 export * from "./controls/SkiaLayout";
 export * from "./core/Accessibility";
+export * from "./core/Hover";
 export * from "./controls/SkiaLabel";
 export * from "./controls/TextSpan";
 export * from "./controls/SkiaRichLabel";
+export * from "./controls/SkiaLabelFps";
 export * from "./core/ControlStyle";
 export * from "./core/ImageEffects";
 export * from "./controls/SkiaToggle";
@@ -39,6 +42,7 @@ export * from "./controls/SkiaBackdrop";
 export * from "./controls/SkiaEditor";
 export * from "./controls/SkiaSprite";
 export * from "./controls/SkiaSpriteSet";
+export * from "./controls/DrawnGame";
 export * from "./core/KeyboardManager";
 export * from "./controls/AnimatedFramesRenderer";
 export * from "./controls/SkiaLottie";

package/dist/react/SkiaShell.js

@@ -389,6 +389,12 @@ export const SkiaShell = forwardRef(function SkiaShell({ Routes, children, NavBa
                 prev ? prev.TranslateToAsync(-dir * w, 0, TabsAnimationSpeed, TabsEasing) : Promise.resolve(),
             ]), TabsAnimationSpeed + 500);
         }
+        // the tab left stays mounted (its state kept): hidden first, then back in place for its next turn
+        if (prev) {
+            prev.IsVisible = false;
+            prev.TranslationX = 0;
+            prev.TranslationY = 0;
+        }
         setTabTransition(null);
     }, [hasTabs, Tabs, AnimateTabs, TabsAnimationSpeed]);
     // popstate: the browser popped OUR last entry (back) — or moved forward to a hash we can rebuild
@@ -405,7 +411,13 @@ export const SkiaShell = forwardRef(function SkiaShell({ Routes, children, NavBa
         }
         const onPop = () => {
             const depth = window.history.state?.[HISTORY_KEY] ?? 0;
-            if (depth < history.current.length) {
+            const target = parseHash();
+            // a Back lands on one of OUR entries: its hash is the stack it was pushed with (the first N pages, N = the page
+            // entries below it). A typed hash or a plain <a href="#/route"> makes a new entry with no state (depth 0):
+            // that is a navigation to the hash, not a Back to the root
+            const pagesBelow = history.current.slice(0, depth).filter((k) => k === "page").length;
+            const back = depth < history.current.length && target.join("/") === live.current.stack.slice(0, pagesBelow).join("/");
+            if (back) {
                 // back: unwind our entries down to depth
                 void (async () => {
                     while (history.current.length > depth) {
@@ -441,9 +453,8 @@ export const SkiaShell = forwardRef(function SkiaShell({ Routes, children, NavBa
                 })();
             }
             else {
-                // forward (depth grew), or the same depth with another hash = a plain <a href="#/route"> link or a typed hash:
+                // forward (depth grew), or another hash = a plain <a href="#/route"> link or a typed hash:
                 // the hash names the pages, rebuild the stack without animation (overlays cannot be restored)
-                const target = parseHash();
                 if (depth === history.current.length && target.join("/") === live.current.stack.join("/"))
                     return;
                 history.current = target.map(() => "page");
@@ -466,28 +477,36 @@ export const SkiaShell = forwardRef(function SkiaShell({ Routes, children, NavBa
     const transitioning = transitions > 0 || leaving !== null;
     const rootBottom = hasTabs ? TabBarHeight + insets.Bottom : 0;
     const navTop = NavBarHeight + insets.Top;
-    const rootNode = hasTabs ? RenderRoute(Tabs[selectedTab]?.route ?? "") : children;
+    // every tab keeps its root and its pages mounted (state, scroll positions), only the selected one shows (C# tab
+    // views, DrawnUi.Rust "tabs keep their stacks")
+    const tabIndexes = hasTabs ? Tabs.map((_, i) => i) : [0];
     const entering = tabTransition ? { TranslationX: tabTransition.dir * 0.75 * (typeof window !== "undefined" ? window.innerWidth : 0), Opacity: 0.001, ZIndex: 1 } : {};
-    return (_jsx(ShellContext.Provider, { value: nav, children: _jsxs(SkiaLayer, { VerticalOptions: "Fill", children: [tabTransition && (_jsx(SkiaLayer, { VerticalOptions: "Fill", Margin: new Thickness(0, 0, 0, rootBottom), ZIndex: 0, BackgroundColor: PageBackgroundColor, ref: (c) => { if (c)
-                        tabRoots.current.set(tabTransition.from, c); }, children: RenderRoute(Tabs[tabTransition.from]?.route ?? "") }, `tab-leaving-${tabTransition.from}`)), _jsx(SkiaLayer, { VerticalOptions: "Fill", Margin: new Thickness(0, 0, 0, rootBottom), IsVisible: visiblePages.length === 0 || transitioning, BackgroundColor: hasTabs ? PageBackgroundColor : undefined, ...entering, ref: (c) => { if (c)
-                        tabRoots.current.set(selectedTab, c); }, children: rootNode }, hasTabs ? `tab-${selectedTab}` : "root"), visiblePages.map((r, i) => (_jsxs(PageHost, { route: r, speed: PagesAnimationSpeed, visible: r === topRoute || transitioning, background: PageBackgroundColor, bottom: rootBottom, register: (c) => { if (c)
+    return (_jsx(ShellContext.Provider, { value: nav, children: _jsxs(SkiaLayer, { VerticalOptions: "Fill", children: [tabIndexes.map((t) => {
+                    const selected = t === selectedTab;
+                    return (_jsx(SkiaLayer, { VerticalOptions: "Fill", Margin: new Thickness(0, 0, 0, rootBottom), BackgroundColor: hasTabs ? PageBackgroundColor : undefined, IsVisible: selected ? visiblePages.length === 0 || transitioning : tabTransition?.from === t, ZIndex: 0, ...(selected ? entering : {}), ref: (c) => { if (c)
+                            tabRoots.current.set(t, c); }, children: hasTabs ? RenderRoute(Tabs[t]?.route ?? "") : children }, hasTabs ? `tab-${t}` : "root"));
+                }), tabIndexes.flatMap((t) => (t === selectedTab ? visiblePages : stacks[t] ?? []).map((r, i) => (_jsxs(PageHost, { route: r, speed: PagesAnimationSpeed, active: t === selectedTab, visible: t === selectedTab && (r === topRoute || transitioning), background: PageBackgroundColor, bottom: rootBottom, register: (c) => { if (c)
                         pageCtrls.current.set(r, c);
                     else
-                        pageCtrls.current.delete(r); }, children: [_jsx(SkiaLayer, { VerticalOptions: "Fill", Margin: new Thickness(0, navTop, 0, 0), children: RenderRoute(r) }), _jsxs(SkiaLayer, { HeightRequest: navTop, BackgroundColor: NavBarColor, Padding: new Thickness(0, insets.Top, 0, 0), children: [_jsx(SkiaButton, { Text: "\u2039  Back", BackgroundColor: "#00000000", TextColor: "#6EA8FE", FontSize: 16, VerticalOptions: "Center", Margin: new Thickness(8, 0), ApplyEffect: "Ripple", Tapped: () => void GoBackAsync(), AccessibilityRole: "button", AccessibilityLabel: "Back" }), _jsx(SkiaLabel, { Text: Titles?.[RouteName(r)] ?? RouteName(r), FontSize: 18, FontFamily: "FontTextBold", TextColor: Colors.White, HorizontalOptions: "Fill", HorizontalTextAlignment: "Center", VerticalOptions: "Center", MaxLines: 1, Margin: new Thickness(96, 0), AccessibilityRole: "heading" }), _jsx(SkiaButton, { Text: "Home", BackgroundColor: "#00000000", TextColor: "#6EA8FE", FontSize: 16, HorizontalOptions: "End", VerticalOptions: "Center", Margin: new Thickness(0, 0, 8, 0), ApplyEffect: "Ripple", Tapped: () => void PopToRootAsync(), AccessibilityRole: "button", AccessibilityLabel: "Home" }), _jsx(SkiaLayer, { HeightRequest: 1, VerticalOptions: "End", BackgroundColor: "#343A40" })] })] }, `${selectedTab}:${r}#${i}`))), hasTabs && (_jsxs(SkiaLayer, { HeightRequest: TabBarHeight + insets.Bottom, VerticalOptions: "End", BackgroundColor: TabBarColor, ZIndex: ShellDefaults.ZIndexModals - 1, BlockGesturesBelow: true, Padding: new Thickness(0, 0, 0, insets.Bottom), children: [_jsx(SkiaLayer, { HeightRequest: 1, BackgroundColor: "#343A40" }), _jsx(SkiaGrid, { ColumnDefinitions: Tabs.map(() => "*").join(","), HorizontalOptions: "Fill", VerticalOptions: "Fill", children: Tabs.map((t, i) => (_jsxs(SkiaLayer, { Column: i, HorizontalOptions: "Fill", VerticalOptions: "Fill", AnimationTapped: "Ripple", Tapped: () => void SelectTabAsync(i), AccessibilityRole: "button", AccessibilityLabel: t.title, children: [_jsx(SkiaLabel, { Text: t.title, FontSize: 13, FontFamily: i === selectedTab ? "FontTextBold" : undefined, TextColor: i === selectedTab ? ShellDefaults.TabSelectedColor : ShellDefaults.TabColor, HorizontalOptions: "Center", VerticalOptions: "Center", AccessibilityRole: "presentation" }), i === selectedTab && _jsx(SkiaShape, { Type: "Rectangle", HeightRequest: 3, WidthRequest: 36, CornerRadius: 2, BackgroundColor: ShellDefaults.TabSelectedColor, HorizontalOptions: "Center", VerticalOptions: "End" })] }, t.route))) })] })), modals.map((m) => m.node), popups.map((p) => p.node), toasts.map((t) => t.node)] }) }));
+                        pageCtrls.current.delete(r); }, children: [_jsx(SkiaLayer, { VerticalOptions: "Fill", Margin: new Thickness(0, navTop, 0, 0), children: RenderRoute(r) }), _jsxs(SkiaLayer, { HeightRequest: navTop, BackgroundColor: NavBarColor, Padding: new Thickness(0, insets.Top, 0, 0), children: [_jsx(SkiaButton, { Text: "\u2039  Back", BackgroundColor: "#00000000", TextColor: "#6EA8FE", FontSize: 16, VerticalOptions: "Center", Margin: new Thickness(8, 0), ApplyEffect: "Ripple", Tapped: () => void GoBackAsync(), AccessibilityRole: "button", AccessibilityLabel: "Back" }), _jsx(SkiaLabel, { Text: Titles?.[RouteName(r)] ?? RouteName(r), FontSize: 18, FontFamily: "FontTextBold", TextColor: Colors.White, HorizontalOptions: "Fill", HorizontalTextAlignment: "Center", VerticalOptions: "Center", MaxLines: 1, Margin: new Thickness(96, 0), AccessibilityRole: "heading" }), _jsx(SkiaButton, { Text: "Home", BackgroundColor: "#00000000", TextColor: "#6EA8FE", FontSize: 16, HorizontalOptions: "End", VerticalOptions: "Center", Margin: new Thickness(0, 0, 8, 0), ApplyEffect: "Ripple", Tapped: () => void PopToRootAsync(), AccessibilityRole: "button", AccessibilityLabel: "Home" }), _jsx(SkiaLayer, { HeightRequest: 1, VerticalOptions: "End", BackgroundColor: "#343A40" })] })] }, `${t}:${r}#${i}`)))), hasTabs && (_jsxs(SkiaLayer, { HeightRequest: TabBarHeight + insets.Bottom, VerticalOptions: "End", BackgroundColor: TabBarColor, ZIndex: ShellDefaults.ZIndexModals - 1, BlockGesturesBelow: true, Padding: new Thickness(0, 0, 0, insets.Bottom), children: [_jsx(SkiaLayer, { HeightRequest: 1, BackgroundColor: "#343A40" }), _jsx(SkiaGrid, { ColumnDefinitions: Tabs.map(() => "*").join(","), HorizontalOptions: "Fill", VerticalOptions: "Fill", children: Tabs.map((t, i) => (_jsxs(SkiaLayer, { Column: i, HorizontalOptions: "Fill", VerticalOptions: "Fill", AnimationTapped: "Ripple", Tapped: () => void SelectTabAsync(i), AccessibilityRole: "button", AccessibilityLabel: t.title, children: [_jsx(SkiaLabel, { Text: t.title, FontSize: 13, FontFamily: i === selectedTab ? "FontTextBold" : undefined, TextColor: i === selectedTab ? ShellDefaults.TabSelectedColor : ShellDefaults.TabColor, HorizontalOptions: "Center", VerticalOptions: "Center", AccessibilityRole: "presentation" }), i === selectedTab && _jsx(SkiaShape, { Type: "Rectangle", HeightRequest: 3, WidthRequest: 36, CornerRadius: 2, BackgroundColor: ShellDefaults.TabSelectedColor, HorizontalOptions: "Center", VerticalOptions: "End" })] }, t.route))) })] })), modals.map((m) => m.node), popups.map((p) => p.node), toasts.map((t) => t.node)] }) }));
 });
 /** A pushed page: slides in from the right on mount (C# SkiaViewSwitcher PushView), covers what is below. */
-function PageHost({ route, speed, visible, background, bottom, register, children }) {
+function PageHost({ route, speed, active, visible, background, bottom, register, children }) {
     const ctrl = useRef(null);
+    // slides in once, when pushed; a page of another tab stays mounted and is registered only while its tab is selected
     useEffect(() => {
         const c = ctrl.current;
-        if (!c)
-            return;
-        register(c);
-        if (speed > 0) {
+        if (c && speed > 0) {
             c.TranslationX = CanvasWidthPts(c);
             void c.TranslateToAsync(0, 0, speed);
         }
-        return () => register(null);
     }, [route]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        const c = ctrl.current;
+        if (!c || !active)
+            return;
+        register(c);
+        return () => register(null);
+    }, [route, active]); // eslint-disable-line react-hooks/exhaustive-deps
     return (_jsx(SkiaLayer, { ref: (c) => { ctrl.current = c; }, VerticalOptions: "Fill", HorizontalOptions: "Fill", Margin: new Thickness(0, 0, 0, bottom), BackgroundColor: background, IsVisible: visible, BlockGesturesBelow: true, children: children }));
 }