drawnui-react 0.1.0-preview.15 → 0.1.0-preview.17

package/dist/core/SkiaControl.js

@@ -134,6 +134,7 @@ export class SkiaControl {
             return;
         this.bindingContext = value;
         this.OnBindingContextChanged();
+        this.Superview?.Hover?.RequestCheck(); // a recycled cell under a still mouse now shows another item
     }
     /** Index of the bound item inside its ItemsSource, -1 when not templated. */
     ContextIndex = -1;
@@ -166,15 +167,52 @@ export class SkiaControl {
     compositeSurface;
     /** Own content or structure changed: the next composite record is a full one. */
     compositeFull = true;
+    /** Where the kept composite surface starts relative to DrawingRect (the effects margin it was laid out with). */
+    compositeInsetX = 0;
+    compositeInsetY = 0;
     /** Canvas-pixel bounds this control covered when its parent last recorded it (composite erase region). */
     lastCompositeBounds;
-    /** What the last composite record did (diagnostics): "full" or "partial", the number of children re-recorded and which ones. */
-    LastCompositeRecord = { Mode: "full", Children: 0, Dirty: [] };
+    /**
+     * What the last composite record did (diagnostics): "full" or "partial", the number of children re-recorded and which
+     * ones; Areas: the pixels erased and drawn again for changes deeper than a child (C# Areas), Changed: the controls
+     * those areas belong to (C# Changed).
+     */
+    LastCompositeRecord = { Mode: "full", Children: 0, Dirty: [], Areas: [], Changed: [] };
+    /** C# MaxCompositionAreas: more areas than this in one composite record draw it whole instead. */
+    static MaxCompositionAreas = 16;
+    /** C# MaxCompositionShare: areas covering more than this share of a composite draw it whole instead. */
+    static MaxCompositionShare = 0.5;
+    /**
+     * Changes deeper than a direct child since the last composite record (drawnui-cross 6m): the control, the direct child
+     * it is in, where it was drawn before the change (its own drawn bounds, as drawn) and its rect then.
+     */
+    compositeDeep;
+    /** Set while an UpdateDraw climbs: the ancestors re-measure but an ImageComposite among them keeps its partial record. */
+    static drawOrigin = null;
     /** The children a composite record can re-record individually; layouts return their views. */
     GetCompositeChildren() { return []; }
     /** C# TrackChildAsDirty (DirtyChildrenTracker): the child changed without a remeasure of this control. */
     TrackChildAsDirty(child) { if (this.IsCacheComposite)
         this.DirtyChildrenInternal.add(child); }
+    static rejectRect = new Float32Array(4);
+    /** Its cache must be recorded before it can be drawn (none, dirty, another type, scale, size or GPU context). */
+    CacheStale(scale) {
+        const cacheType = this.UsingCacheType;
+        if (cacheType === "None")
+            return false;
+        const o = this.RenderObject, r = cacheType === "Operations" ? this.ExpandedCacheRect(scale) : this.AlignedCacheRect(scale);
+        return this.cacheDirty || !o || o.Type !== cacheType || o.Epoch !== (this.Superview?.GpuEpoch ?? 0) || o.Scale !== scale
+            || Math.round(o.Bounds.Width) !== Math.round(r.Width) || Math.round(o.Bounds.Height) !== Math.round(r.Height);
+    }
+    /** Its rect grown by its effects margin, through the matrix it is drawn with, lies outside the canvas clip. */
+    OutsideClip(canvas, scale) {
+        const b = SkiaControl.MapRect(this.RenderTransformMatrix, this.ExpandedCacheRect(scale)), q = SkiaControl.rejectRect;
+        q[0] = b.Left;
+        q[1] = b.Top;
+        q[2] = b.Right;
+        q[3] = b.Bottom;
+        return canvas.quickReject(q);
+    }
     /** Drawn bounds in canvas pixels including transforms and effects margins (C# GetTransformedDirtyBounds). */
     GetTransformedDirtyBounds() {
         const r = this.ExpandedCacheRect(this.RenderingScale), m = this.RenderTransformMatrix;
@@ -193,6 +231,57 @@ export class SkiaControl {
     /** Consume every gesture that lands on this control so nothing below (z-order) receives it. */
     BlockGesturesBelow = false;
     LockChildrenGestures = "Disabled";
+    // ---- hover (drawnui-cross 6m, C# ReceivesHover / IsHovered / HoverChanged) ----
+    receivesHover;
+    /**
+     * Whether this control takes mouse hover: the canvas sets IsHovered while the mouse is over it. Opt-in: false by
+     * default, true by default only in the controls that always had hover (SkiaButton, SkiaSlider, the toggles,
+     * SkiaRadioButton, SkiaCarousel, SkiaDrawer), never because a control has a tap handler. A HoverChanged handler turns
+     * it on (C# fluent OnHovered) unless it is set.
+     */
+    get ReceivesHover() { return this.receivesHover ?? (this.HoverChanged ? true : this.ReceivesHoverByDefault()); }
+    set ReceivesHover(value) { this.receivesHover = value; }
+    /** The value of ReceivesHover until it is set. */
+    ReceivesHoverByDefault() { return false; }
+    isHovered = false;
+    /**
+     * True while the mouse is over this control and it takes hover. Every such control under the pointer is hovered at
+     * once (a card and the button inside it, as CSS :hover); it stays as it is while content moves under the pointer and
+     * is checked again when that stops. Touch never hovers.
+     */
+    get IsHovered() { return this.isHovered; }
+    /** IsHovered changed: true when the mouse came over this control, false when it left (C# HoverChanged / OnHovered). */
+    HoverChanged;
+    /** Set by the canvas's HoverManager. */
+    ApplyHover(on) {
+        if (this.isHovered === on)
+            return;
+        this.isHovered = on;
+        this.HoverChanged?.(this, on);
+    }
+    /** A scroll, carousel or drawer moving its content right now: hover waits until it stops (C# IsScrolling / InTransition). */
+    MovesContent() { return false; }
+    /**
+     * Hover hit path (HoverManager): this control is under the point (in its own space), its children under it follow,
+     * top-most first, by the routing rules of ProcessGestures. True when this subtree blocks gestures below it, so the
+     * controls under it get no hover (a popup over a list).
+     */
+    CollectHovered(point, into, xs, ys) {
+        into.push(this);
+        xs?.push(point.X);
+        ys?.push(point.Y);
+        if (!this.CheckChildrenGesturesLocked("Pointer")) {
+            const listeners = this.GetGestureListeners();
+            for (let i = listeners.length - 1; i >= 0; i--) {
+                const child = listeners[i];
+                if (!child.IsVisible || child.InputTransparent || !this.IsGestureForChild(child, point))
+                    continue;
+                if (child.CollectHovered(child.TransformPointToLocalSpace(point), into, xs, ys))
+                    return true;
+            }
+        }
+        return this.BlockGesturesBelow;
+    }
     // ---- touch feedback (same names as DrawnUi) ----
     TouchEffectColor = Colors.White;
     /** Plays a ripple (from the tap point) when Tapped fires. */
@@ -277,6 +366,11 @@ export class SkiaControl {
         if (!SkiaStyles.IsEmpty)
             SkiaStyles.Apply(this, atConstruction);
     }
+    /**
+     * C# IsChildrenItem: added by the app (JSX children or the `Children` list), not a part the control made itself. A new
+     * `Children` list drops only these, so a control's own parts keep their place.
+     */
+    IsChildrenItem = false;
     AddSubView(_control) { throw new Error(`DrawnUi: ${this.constructor.name} cannot host children`); }
     InsertSubView(_index, control) { this.AddSubView(control); }
     RemoveSubView(_control) { }
@@ -443,6 +537,8 @@ export class SkiaControl {
      * host's pointer cursor. Default: the control as a whole (AccessibilityCanInteract); SkiaLabel adds its tappable spans.
      */
     WantsPointerCursor(_x, _y) { return this.AccessibilityCanInteract; }
+    /** A range control's value for screen readers (slider, progress); undefined for everything else (drawnui-cross 6c). */
+    get AccessibilityValue() { return undefined; }
     /** aria-pressed for toggles; undefined = not a toggle. */
     get AccessibilityIsPressed() { return this.accessibilityIsPressed; }
     set AccessibilityIsPressed(v) { if (this.accessibilityIsPressed !== v) {
@@ -606,6 +702,23 @@ export class SkiaControl {
         const offsetOnly = (this.Left !== 0 || this.Top !== 0) && this.UsingCacheType !== "None" && this.TranslationX === 0 && this.TranslationY === 0
             && this.Rotation === 0 && this.ScaleX === 1 && this.ScaleY === 1 && this.SkewX === 0 && this.SkewY === 0;
         const needTransform = this.HasTransform && !offsetOnly;
+        let dx = 0, dy = 0;
+        if (needTransform) {
+            this.RenderTransformMatrix = this.CreateRenderTransformMatrix(this.DrawingRect, ctx.Scale);
+        }
+        else if (offsetOnly) {
+            dx = this.Left * ctx.Scale;
+            dy = this.Top * ctx.Scale;
+            this.RenderTransformMatrix = Super.CK.Matrix.translated(dx, dy); // gestures / accessibility still map through it
+        }
+        else {
+            this.RenderTransformMatrix = undefined;
+        }
+        // drawn entirely outside the clip: skipped with its subtree (C# layout Virtualisation, DrawnUi.Rust); the matrix
+        // above stays current for hit tests. A cache that must be recorded is still recorded here, as before, so its cost
+        // does not move into the frame where the control scrolls in (DrawnUi.Rust records it then)
+        if (this.OutsideClip(canvas, ctx.Scale) && !this.CacheStale(ctx.Scale))
+            return;
         let saved = false;
         // same as DrawnUi: opacity = a layer with alpha, transforms = canvas matrix around the whole subtree (cache included)
         if (applyOpacity) {
@@ -619,19 +732,8 @@ export class SkiaControl {
             canvas.save();
             saved = true;
         }
-        let dx = 0, dy = 0;
-        if (needTransform) {
-            this.RenderTransformMatrix = this.CreateRenderTransformMatrix(this.DrawingRect, ctx.Scale);
+        if (needTransform)
             canvas.concat(this.RenderTransformMatrix);
-        }
-        else if (offsetOnly) {
-            dx = this.Left * ctx.Scale;
-            dy = this.Top * ctx.Scale;
-            this.RenderTransformMatrix = Super.CK.Matrix.translated(dx, dy); // gestures / accessibility still map through it
-        }
-        else {
-            this.RenderTransformMatrix = undefined;
-        }
         if (this.IsClippedToBounds) {
             if (!saved) {
                 canvas.save();
@@ -696,10 +798,7 @@ export class SkiaControl {
             const epoch = this.Superview?.GpuEpoch ?? 0;
             if (this.RenderObjectPrevious && this.RenderObjectPrevious.Epoch !== epoch)
                 this.DisposePrevious(); // made on a lost GPU context
-            const stale = this.cacheDirty || !this.RenderObject || this.RenderObject.Type !== cacheType || this.RenderObject.Epoch !== epoch
-                || this.RenderObject.Scale !== ctx.Scale
-                || Math.round(this.RenderObject.Bounds.Width) !== Math.round(r.Width) || Math.round(this.RenderObject.Bounds.Height) !== Math.round(r.Height);
-            if (stale)
+            if (this.CacheStale(ctx.Scale))
                 this.CreateRenderingObject({ ...ctx, Destination: this.DrawingRect }, cacheType);
             if (this.RenderObject) {
                 // C# DrawRenderObject: with post renderers an Image cache is not blitted, the effects sample it (CachedImage)
@@ -813,14 +912,46 @@ export class SkiaControl {
         }
         const canvas = surface.getCanvas();
         const children = this.GetCompositeChildren();
-        const partial = sameGeometry && !this.compositeFull && this.DirtyChildrenInternal.size > 0 && children.length > 0;
+        const deep = this.compositeDeep;
+        // the same size with another effects margin moves the content inside the surface: record whole (C# 97683f19)
+        const insetX = r.Left - this.DrawingRect.Left, insetY = r.Top - this.DrawingRect.Top;
+        const sameInset = insetX === this.compositeInsetX && insetY === this.compositeInsetY;
+        this.compositeInsetX = insetX;
+        this.compositeInsetY = insetY;
+        let partial = sameGeometry && sameInset && !this.compositeFull && children.length > 0 && (this.DirtyChildrenInternal.size > 0 || !!deep?.length);
+        // changes deeper than a child: only their areas, the child they are in drawn clipped to them (drawnui-cross 6m)
+        const areas = [], changed = [], inside = new Set();
+        if (partial && deep?.length) {
+            let covered = 0;
+            for (const d of deep) {
+                if (!children.includes(d.Child) || this.DirtyChildrenInternal.has(d.Child))
+                    continue;
+                const area = SkiaControl.DeepArea(d, this, ctx.Scale);
+                if (area === null) {
+                    partial = false;
+                    break;
+                }
+                if (!area) {
+                    this.DirtyChildrenInternal.add(d.Child);
+                    continue;
+                }
+                areas.push(area);
+                changed.push(d.Origin);
+                inside.add(d.Child);
+                covered += area.Width * area.Height;
+            }
+            if (areas.length > SkiaControl.MaxCompositionAreas || covered > r.Width * r.Height * SkiaControl.MaxCompositionShare)
+                partial = false;
+        }
+        if (deep)
+            deep.length = 0;
         const offset = prev && sameGeometry ? { X: r.Left - prev.Bounds.Left, Y: r.Top - prev.Bounds.Top } : { X: 0, Y: 0 };
         const saved = canvas.save();
         canvas.translate(-r.Left, -r.Top);
         if (partial) {
             // dirty = reported children + siblings intersecting their old or new bounds (C# makes intersecting children dirty too)
             const dirty = new Set();
-            const rects = [];
+            const rects = [...areas];
             const boundsOf = (c) => {
                 const out = [c.GetTransformedDirtyBounds()];
                 if (c.lastCompositeBounds)
@@ -836,7 +967,7 @@ export class SkiaControl {
             while (grew) {
                 grew = false;
                 for (const c of children) {
-                    if (dirty.has(c) || !c.IsVisible)
+                    if (dirty.has(c) || inside.has(c) || !c.IsVisible)
                         continue;
                     const own = boundsOf(c);
                     if (rects.some((d) => own.some((o) => o.Left < d.Right && d.Left < o.Right && o.Top < d.Bottom && d.Top < o.Bottom))) {
@@ -863,14 +994,18 @@ export class SkiaControl {
             this.DirtyChildrenInternal.clear();
             for (const c of dirty)
                 this.DirtyChildrenInternal.add(c);
+            for (const c of inside)
+                this.DirtyChildrenInternal.add(c);
+            // children entirely outside the redrawn areas are skipped by their own clip check (Render)
             this.PaintContent({ ...ctx, Context: { Canvas: canvas, Surface: surface, Origin: { X: r.Left, Y: r.Top } } });
             this.IsRenderingWithComposition = false;
-            this.LastCompositeRecord = { Mode: "partial", Children: dirty.size, Dirty: [...dirty] };
+            const redrawn = children.filter((c) => this.DirtyChildrenInternal.has(c));
+            this.LastCompositeRecord = { Mode: "partial", Children: redrawn.length, Dirty: redrawn, Areas: areas, Changed: changed };
         }
         else {
             canvas.clear(CK.TRANSPARENT);
             this.PaintContent({ ...ctx, Context: { Canvas: canvas, Surface: surface, Origin: { X: r.Left, Y: r.Top } } });
-            this.LastCompositeRecord = { Mode: "full", Children: children.length, Dirty: children };
+            this.LastCompositeRecord = { Mode: "full", Children: children.length, Dirty: children, Areas: [], Changed: [] };
         }
         canvas.restoreToCount(saved);
         for (const c of children)
@@ -916,7 +1051,11 @@ export class SkiaControl {
     /** Marks the cache stale; re-recorded on the next frame (a composite records fully: its own content changed). */
     InvalidateCache() { this.cacheDirty = true; this.compositeFull = true; }
     /** Effects margin recomputed on the next use (C# InvalidateEffectsMargin). */
-    InvalidateEffectsMargin() { this.effectsMarginCache = undefined; }
+    InvalidateEffectsMargin() {
+        // a layout's margin aggregates what its children paint outside it: every ancestor recomputes too (C# 97683f19)
+        for (let c = this; c; c = c.Parent)
+            c.effectsMarginCache = undefined;
+    }
     /** Draws PostAnimators above content; an effect returning true asks for another frame. */
     ExecutePostAnimators(ctx) {
         if (this.PostAnimators.length === 0)
@@ -1127,22 +1266,107 @@ export class SkiaControl {
     }
     /** Redraw without remeasure and WITHOUT dropping caches (position/overlay changes). */
     Repaint() {
-        this.Superview?.Update();
+        if (!this.UnderHiddenParent())
+            this.Superview?.Update();
+    }
+    /**
+     * A parent (not the control itself) is hidden: a change here asks for no frame and the latest state shows when the
+     * parent is shown again (C# 329f6c44 HiddenUpdateTests, DrawnUi.Rust hidden_updates). The control's own visibility
+     * change still draws: it is the one that hides or shows it.
+     */
+    UnderHiddenParent() {
+        for (let p = this.Parent; p; p = p.Parent)
+            if (!p.IsVisible)
+                return true;
+        return false;
     }
+    /** The control or a parent is hidden: its animators pause until it shows again. */
+    HiddenInTree() { return !this.IsVisible || this.UnderHiddenParent(); }
+    /** The control an invalidation started at while it climbs (InvalidateMeasure): a hidden parent of it wakes no frame. */
+    static invalidateOrigin = null;
     /**
      * Transform / Opacity changed: this control's own cache is still valid (content unchanged) but every ancestor
      * cache holds its composited output, so those are staled before redrawing (DrawnUi RedrawCanvas + parent invalidation).
      */
     RepaintComposition() {
-        let child = this, p = this.Parent;
-        while (p) {
+        this.ReportToComposites();
+        for (let p = this.Parent; p; p = p.Parent)
             p.cacheDirty = true;
-            p.TrackChildAsDirty(child);
-            child = p;
-            p = p.Parent;
-        }
         this.Repaint();
     }
+    /**
+     * Update() for a change of how this control looks, not of its size (a color set through props, C# NeedDraw): the same
+     * re-measure and cache invalidation, but an ImageComposite above redraws only this control's area instead of
+     * recording whole (drawnui-cross 6m). The record still goes whole when the control's rect changed after all.
+     */
+    UpdateDraw() {
+        this.ReportToComposites();
+        const outer = SkiaControl.drawOrigin;
+        SkiaControl.drawOrigin = this;
+        try {
+            this.InvalidateMeasure();
+        }
+        finally {
+            SkiaControl.drawOrigin = outer;
+        }
+    }
+    /**
+     * A change of this control that keeps its layout, to every ImageComposite above: a direct child is drawn again whole
+     * (C# TrackChildAsDirty), a deeper control by its area, read now as it was drawn (its last matrix and effects margin).
+     */
+    ReportToComposites() {
+        let before;
+        let child = this;
+        for (let p = this.Parent; p; child = p, p = p.Parent) {
+            if (!p.IsCacheComposite)
+                continue;
+            if (child === this) {
+                p.TrackChildAsDirty(child);
+                continue;
+            }
+            const deep = p.compositeDeep ??= [];
+            if (deep.some((d) => d.Origin === this))
+                continue;
+            before ??= this.GetTransformedDirtyBounds();
+            const r = this.DrawingRect;
+            deep.push({ Origin: this, Child: child, Before: before, Rect: new SKRect(r.Left, r.Top, r.Right, r.Bottom) });
+        }
+    }
+    /** The matrix this control will be drawn with (Render), from its current properties; undefined when none. */
+    CurrentMatrix(scale) {
+        return this.HasTransform ? this.CreateRenderTransformMatrix(this.DrawingRect, scale) : undefined;
+    }
+    /** Where this control will be drawn: its rect grown by its effects margin, through its current matrix. */
+    DrawnBoundsNow(scale) { return SkiaControl.MapRect(this.CurrentMatrix(scale), this.ExpandedCacheRect(scale)); }
+    static MapRect(m, r) {
+        if (!m)
+            return r;
+        const pts = Super.CK.Matrix.mapPoints(m, [r.Left, r.Top, r.Right, r.Top, r.Right, r.Bottom, r.Left, r.Bottom]);
+        return new SKRect(Math.min(pts[0], pts[2], pts[4], pts[6]), Math.min(pts[1], pts[3], pts[5], pts[7]), Math.max(pts[0], pts[2], pts[4], pts[6]), Math.max(pts[1], pts[3], pts[5], pts[7]));
+    }
+    /** Its output depends on all of its content (a visual effect; a backdrop samples below): a change inside redraws it whole. */
+    get SamplesContent() { return !this.DisableEffects && this.visualEffects.length > 0; }
+    /**
+     * Where a deep change shows inside the composite (drawnui-cross 6m rule b): the control as drawn before and as drawn
+     * now, then through the transform of every ancestor up to the composite. undefined: draw the child whole (an effect
+     * or a backdrop on the way, the control gone from the child); null: the layout changed, record whole.
+     */
+    static DeepArea(d, composite, scale) {
+        const o = d.Origin, r = o.DrawingRect;
+        if (r.Left !== d.Rect.Left || r.Top !== d.Rect.Top || r.Right !== d.Rect.Right || r.Bottom !== d.Rect.Bottom)
+            return null;
+        if (!o.IsVisible)
+            return undefined;
+        const now = o.DrawnBoundsNow(scale);
+        let area = new SKRect(Math.min(now.Left, d.Before.Left), Math.min(now.Top, d.Before.Top), Math.max(now.Right, d.Before.Right), Math.max(now.Bottom, d.Before.Bottom));
+        let p = o.Parent, child = o;
+        for (; p && p !== composite; child = p, p = p.Parent) {
+            if (p.SamplesContent || !p.IsVisible)
+                return undefined;
+            area = SkiaControl.MapRect(p.CurrentMatrix(scale), area);
+        }
+        return p === composite && child === d.Child ? area : undefined;
+    }
     /**
      * DrawnUi IsParentIndependent: this control's size never changes the layout around it, so its own invalidation
      * stops here (ancestors composite again, nothing above re-measures). The parent re-measures it on draw when
@@ -1153,14 +1377,23 @@ export class SkiaControl {
     InvalidateMeasure() {
         this.NeedMeasure = true;
         this.cacheDirty = true;
-        this.compositeFull = true; // structure may change: a composite cannot patch it
+        // structure may change: a composite cannot patch it; a draw-only change (UpdateDraw) reported its area instead
+        if (SkiaControl.drawOrigin === null || SkiaControl.drawOrigin === this)
+            this.compositeFull = true;
         this.effectsMarginCache = undefined;
-        if (this.Parent && this.IsParentIndependent)
-            this.RepaintComposition();
-        else if (this.Parent)
-            this.Parent.InvalidateMeasure();
-        else
-            this.Superview?.Update();
+        const outer = SkiaControl.invalidateOrigin;
+        SkiaControl.invalidateOrigin ??= this;
+        try {
+            if (this.Parent && this.IsParentIndependent)
+                this.RepaintComposition();
+            else if (this.Parent)
+                this.Parent.InvalidateMeasure();
+            else if (!SkiaControl.invalidateOrigin.UnderHiddenParent())
+                this.Superview?.Update();
+        }
+        finally {
+            SkiaControl.invalidateOrigin = outer;
+        }
     }
     // ---- gestures (same names as DrawnUi) ----
     /** Hit rect in pixels (no transforms in this port, so it is DrawingRect). */

package/dist/index.d.ts

@@ -9,6 +9,7 @@ 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";

package/dist/index.js

@@ -9,6 +9,7 @@ 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";

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 }));
 }

package/dist/react/index.d.ts

@@ -42,7 +42,7 @@ import type { GesturesMode } from "../core/Gestures";
  * and never appeared in completion.
  */
 type PropsOf<T> = Partial<{
-    [K in keyof T as T[K] extends Function ? (undefined extends T[K] ? K : never) : K extends "Children" | "Views" | "Parent" | "Spans" | "GridStructure" | "AccessibilityId" | "IsAccessibilityElement" | "HasTransform" | "RenderTransformMatrix" | "RenderObjectPrevious" | "LastMeasuredIndex" | "ItemsInsertedAtStart" | "UsingControlStyle" | "Track" | "Thumb" | "FrameOn" | "FrameOff" | "ViewCheckOn" | "ViewOn" | "ViewText" | "Ratio" | "StartThumbX" | "EndThumbX" | "SnapPoints" | "CurrentPosition" | "CurrentSnap" | "ContentOffsetBounds" | "InTransition" | "CanAnimate" | "MaxIndex" | "ChildrenTotal" | "IsAtStart" | "IsAtEnd" | "ScrollProgress" | "ScrollAmount" | "TransitionProgress" | "LastIndex" | "ChildrenCount" | "Horizontal" | "Animator" | "Animation" | "IsPlaying" | "PlayWhenAvailable" | "TotalFrames" | "HasEffects" | "IsDisposed" | "Label" | "IsMultiline" | "HasSelection" | "LayoutVersion" | "LinesCount" | "MeasuredLineHeight" | "Focused" | "SpriteSheet" | "FrameWidth" | "FrameHeight" | "DurationMs" | "FrameDurationMs" | "CurrentSprite" | "Rects" | "HasTapHandler" | "HasDecorations" | "LinesCount" | "Superview" | "DrawingRect" | "MeasuredSize" | "RenderingScale" | "NeedMeasure" | "_superview" | "HitBoxAuto" | "TotalDown" | "TotalTapped" | "TouchDown" | "PostAnimators" | "LoadedSource" | "IsLoading" | "DisplayRect" | "AspectScale" | "Content" | "ContentSize" | "ContentOffsetBounds" | "OverscrollDistance" | "OverScrolled" | "IsUserPanning" | "IsUserFocused" | "IsScrolling" | "IsTemplated" | "FirstVisibleIndex" | "LastVisibleIndex" | "DebugString" | "ChildrenFactory" | "ContextIndex" | "RenderObject" | "UsingCacheType" | "TransitionEffect" | "TransitionFromIndex" | "TransitionToIndex" | "EffectPostRenderers" | "CachedImage" | "ImageBitmap" | "ShouldSubmitOnEnter" | "Header" | "Footer" | "RefreshIndicator" | "ScrollBar" | "ScrollBarHorizontal" | "IsRunning" | "VisibleRatio" | "CurrentIndex" | "LastCompositeRecord" | "DirtyChildrenInternal" | "IsRenderingWithComposition" ? never : K]: T[K];
+    [K in keyof T as T[K] extends Function ? (undefined extends T[K] ? K : never) : K extends "Children" | "Views" | "Parent" | "Spans" | "GridStructure" | "AccessibilityId" | "IsAccessibilityElement" | "HasTransform" | "RenderTransformMatrix" | "RenderObjectPrevious" | "LastMeasuredIndex" | "ItemsInsertedAtStart" | "UsingControlStyle" | "Track" | "Thumb" | "FrameOn" | "FrameOff" | "ViewCheckOn" | "ViewOn" | "ViewText" | "Ratio" | "StartThumbX" | "EndThumbX" | "SnapPoints" | "CurrentPosition" | "CurrentSnap" | "ContentOffsetBounds" | "InTransition" | "CanAnimate" | "MaxIndex" | "ChildrenTotal" | "IsAtStart" | "IsAtEnd" | "ScrollProgress" | "ScrollAmount" | "TransitionProgress" | "LastIndex" | "ChildrenCount" | "Horizontal" | "Animator" | "Animation" | "IsPlaying" | "PlayWhenAvailable" | "TotalFrames" | "HasEffects" | "IsDisposed" | "Label" | "IsMultiline" | "HasSelection" | "LayoutVersion" | "LinesCount" | "MeasuredLineHeight" | "Focused" | "SpriteSheet" | "FrameWidth" | "FrameHeight" | "DurationMs" | "FrameDurationMs" | "CurrentSprite" | "Rects" | "HasTapHandler" | "HasDecorations" | "LinesCount" | "Superview" | "DrawingRect" | "MeasuredSize" | "RenderingScale" | "NeedMeasure" | "_superview" | "HitBoxAuto" | "TotalDown" | "TotalTapped" | "TouchDown" | "PostAnimators" | "LoadedSource" | "IsLoading" | "DisplayRect" | "AspectScale" | "Content" | "ContentSize" | "ContentOffsetBounds" | "OverscrollDistance" | "OverScrolled" | "IsUserPanning" | "IsUserFocused" | "IsScrolling" | "IsTemplated" | "FirstVisibleIndex" | "LastVisibleIndex" | "DebugString" | "ChildrenFactory" | "ContextIndex" | "RenderObject" | "UsingCacheType" | "TransitionEffect" | "TransitionFromIndex" | "TransitionToIndex" | "EffectPostRenderers" | "CachedImage" | "ImageBitmap" | "ShouldSubmitOnEnter" | "Header" | "Footer" | "RefreshIndicator" | "ScrollBar" | "ScrollBarHorizontal" | "IsRunning" | "VisibleRatio" | "CurrentIndex" | "LastCompositeRecord" | "DirtyChildrenInternal" | "IsRenderingWithComposition" | "IsHovered" ? never : K]: T[K];
 }>;
 /** `ref` receives the engine control instance (react-reconciler getPublicInstance). */
 type LeafProps<T> = PropsOf<T> & {