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

package/dist/core/ScrollAnimators.js

@@ -1,6 +1,7 @@
 // Mirrors DrawnUi scrolling physics: DecelerationTimingParameters + ScrollFlingAnimator (fling),
 // Spring + SpringTimingParameters + SpringWithVelocityAnimator (bounce), VelocityAccumulator, RubberBandUtils.
 import { SkiaValueAnimator } from "./Animators";
+import { VelocityTrail } from "./Gestures";
 /** UIKit-style exponential deceleration: value(t) = v0 * (rate^(1000 t) - 1) / k, k = 1000 ln(rate). */
 export class DecelerationTimingParameters {
     InitialValue;
@@ -201,6 +202,14 @@ export class VelocityAccumulator {
     Clear() { this.samples.length = 0; }
     CaptureVelocity(x, y, arrivedTimeNanos = 0) {
         const time = arrivedTimeNanos > 0 ? arrivedTimeNanos / 1e6 : performance.now();
+        // a move in the same burst as the last one replaces it: the first move of a burst carries only part of the burst's
+        // distance (DrawnUi.Rust VelocityAccumulator, 6d525f7)
+        const last = this.samples[this.samples.length - 1];
+        if (last && time - last.time < VelocityTrail.BurstMs) {
+            last.X = x;
+            last.Y = y;
+            return;
+        }
         if (this.samples.length === VelocityAccumulator.MaxSampleSize)
             this.samples.shift();
         this.samples.push({ X: x, Y: y, time });

package/dist/core/SkiaControl.d.ts

@@ -166,15 +166,15 @@ export declare class SkiaControl {
     private compositeDeep?;
     /** Set while an UpdateDraw climbs: the ancestors re-measure but an ImageComposite among them keeps its partial record. */
     private static drawOrigin;
-    /** Nonzero while a composite redraws only some areas: layouts skip children entirely outside the clip. */
-    static CompositionCulling: number;
     /** The children a composite record can re-record individually; layouts return their views. */
     protected GetCompositeChildren(): readonly SkiaControl[];
     /** C# TrackChildAsDirty (DirtyChildrenTracker): the child changed without a remeasure of this control. */
     TrackChildAsDirty(child: SkiaControl): void;
     private static readonly rejectRect;
-    /** During a partial composite record: true when this control draws nothing inside the canvas clip (skipped whole). */
-    OutsideCompositionClip(canvas: SkCanvas): boolean;
+    /** Its cache must be recorded before it can be drawn (none, dirty, another type, scale, size or GPU context). */
+    private CacheStale;
+    /** Its rect grown by its effects margin, through the matrix it is drawn with, lies outside the canvas clip. */
+    private OutsideClip;
     /** Drawn bounds in canvas pixels including transforms and effects margins (C# GetTransformedDirtyBounds). */
     GetTransformedDirtyBounds(): SKRect;
     /** Current cache, if any. */
@@ -214,7 +214,7 @@ export declare class SkiaControl {
      * 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: SKPoint, into: SkiaControl[]): boolean;
+    CollectHovered(point: SKPoint, into: SkiaControl[], xs?: number[], ys?: number[]): boolean;
     TouchEffectColor: Color;
     /** Plays a ripple (from the tap point) when Tapped fires. */
     AnimationTapped: SkiaTouchAnimation;
@@ -332,6 +332,8 @@ export declare class SkiaControl {
      * host's pointer cursor. Default: the control as a whole (AccessibilityCanInteract); SkiaLabel adds its tappable spans.
      */
     WantsPointerCursor(_x: number, _y: number): boolean;
+    /** A range control's value for screen readers (slider, progress); undefined for everything else (drawnui-cross 6c). */
+    get AccessibilityValue(): import("./Accessibility").AccessibilityValue | undefined;
     /** aria-pressed for toggles; undefined = not a toggle. */
     get AccessibilityIsPressed(): boolean | undefined;
     set AccessibilityIsPressed(v: boolean | undefined);
@@ -471,6 +473,16 @@ export declare class SkiaControl {
     Update(): void;
     /** Redraw without remeasure and WITHOUT dropping caches (position/overlay changes). */
     Repaint(): void;
+    /**
+     * 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(): boolean;
+    /** The control or a parent is hidden: its animators pause until it shows again. */
+    HiddenInTree(): boolean;
+    /** The control an invalidation started at while it climbs (InvalidateMeasure): a hidden parent of it wakes no frame. */
+    private static invalidateOrigin;
     /**
      * 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).

package/dist/core/SkiaControl.js

@@ -189,17 +189,24 @@ export class SkiaControl {
     compositeDeep;
     /** Set while an UpdateDraw climbs: the ancestors re-measure but an ImageComposite among them keeps its partial record. */
     static drawOrigin = null;
-    /** Nonzero while a composite redraws only some areas: layouts skip children entirely outside the clip. */
-    static CompositionCulling = 0;
     /** 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);
-    /** During a partial composite record: true when this control draws nothing inside the canvas clip (skipped whole). */
-    OutsideCompositionClip(canvas) {
-        const b = this.DrawnBoundsNow(this.RenderingScale), q = SkiaControl.rejectRect;
+    /** 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;
@@ -259,15 +266,17 @@ export class SkiaControl {
      * 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) {
+    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))
+                if (child.CollectHovered(child.TransformPointToLocalSpace(point), into, xs, ys))
                     return true;
             }
         }
@@ -528,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) {
@@ -691,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) {
@@ -704,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();
@@ -781,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)
@@ -982,13 +996,8 @@ export class SkiaControl {
                 this.DirtyChildrenInternal.add(c);
             for (const c of inside)
                 this.DirtyChildrenInternal.add(c);
-            SkiaControl.CompositionCulling++;
-            try {
-                this.PaintContent({ ...ctx, Context: { Canvas: canvas, Surface: surface, Origin: { X: r.Left, Y: r.Top } } });
-            }
-            finally {
-                SkiaControl.CompositionCulling--;
-            }
+            // 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;
             const redrawn = children.filter((c) => this.DirtyChildrenInternal.has(c));
             this.LastCompositeRecord = { Mode: "partial", Children: redrawn.length, Dirty: redrawn, Areas: areas, Changed: changed };
@@ -1257,8 +1266,24 @@ 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).
@@ -1356,12 +1381,19 @@ export class SkiaControl {
         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/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.js

@@ -126,6 +126,13 @@ const NAVIGATION_KEYS = new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDow
  * canvas. Keyboard and screen-reader input arrive as DOM events: Enter / Space activate (a Tapped), the navigation keys
  * go to the focused control and then to its arrow-key group; a group is one Tab stop (roving tabindex).
  */
+/** aria-valuenow / min / max / valuetext of a range control (drawnui-cross 6c); a slider reads as horizontal. */
+function valueAttributes(n) {
+    const v = n.Value;
+    if (!v)
+        return undefined;
+    return { "aria-valuenow": v.Now, "aria-valuemin": v.Min, "aria-valuemax": v.Max, "aria-valuetext": v.Text || undefined, "aria-orientation": n.Role === "slider" ? "horizontal" : undefined };
+}
 function AccessibilityOverlay({ view }) {
     const [nodes, setNodes] = useState(() => view.AccessibilityManager.Snapshot);
     // keyboard focus moved by the manager (arrow keys in a group): focus that node's element once it is rendered
@@ -147,6 +154,23 @@ function AccessibilityOverlay({ view }) {
         setFocusRequest(undefined);
         elementOf(focusRequest.id)?.focus({ preventScroll: true });
     }, [focusRequest]);
+    // the focused node went away (its page or popup closed): the focus goes to the first Tab stop on screen in reading
+    // order instead of falling back to the page (drawnui-cross 6c refocus); a focus the user moved away stays away
+    const focusedId = useRef(0);
+    useLayoutEffect(() => {
+        const id = focusedId.current;
+        if (!id || nodes.some((n) => n.Id === id))
+            return;
+        focusedId.current = 0;
+        const active = document.activeElement;
+        if (active && active !== document.body)
+            return;
+        const box = overlayRef.current?.getBoundingClientRect();
+        const first = nodes.find((n) => n.CanInteract && view.AccessibilityManager.IsTabStop(n.Source)
+            && (!box || (n.Rect.Bottom > 0 && n.Rect.Top < box.height && n.Rect.Right > 0 && n.Rect.Left < box.width)));
+        if (first)
+            elementOf(first.Id)?.focus({ preventScroll: true });
+    }, [nodes]);
     // Tab / Shift+Tab in a text field leave it for the next node, also after a click into it: DOM focus goes to the
     // field's own element (without taking the caret again) and the browser's Tab moves on from there
     const tabbingOut = useRef(0);
@@ -198,7 +222,7 @@ function AccessibilityOverlay({ view }) {
     return (_jsxs("div", { className: "drawnui-a11y-overlay", onScroll: pin, ref: overlayRef, children: [_jsx("style", { children: A11Y_CSS }), nodes.map((n) => {
                 const pos = { left: n.Rect.Left, top: n.Rect.Top, width: n.Rect.Width, height: n.Rect.Height };
                 const activate = () => SkiaAccessibilityManager.Activate(n.Source);
-                return n.CanInteract ? (_jsx("div", { "data-a11y-id": n.Id, role: n.Role, "aria-label": n.Label, title: n.Hint, "aria-pressed": n.Role === "button" ? n.IsPressed : undefined, "aria-checked": n.Role === "switch" || n.Role === "checkbox" || n.Role === "radio" ? n.IsPressed : undefined, "aria-live": n.Live, tabIndex: view.AccessibilityManager.IsTabStop(n.Source) ? 0 : -1, className: "drawnui-a11y-node", style: { ...pos, fontSize: 0, userSelect: "none" }, onClick: activate, onKeyDown: (e) => {
+                return n.CanInteract ? (_jsx("div", { "data-a11y-id": n.Id, role: n.Role, "aria-label": n.Label, title: n.Hint, ...valueAttributes(n), "aria-pressed": n.Role === "button" ? n.IsPressed : undefined, "aria-checked": n.Role === "switch" || n.Role === "checkbox" || n.Role === "radio" ? n.IsPressed : undefined, "aria-live": n.Live, tabIndex: view.AccessibilityManager.IsTabStop(n.Source) ? 0 : -1, className: "drawnui-a11y-node", style: { ...pos, fontSize: 0, userSelect: "none" }, onClick: activate, onKeyDown: (e) => {
                         if (e.key === "Enter" || e.key === " ") {
                             e.preventDefault();
                             activate();
@@ -206,6 +230,7 @@ function AccessibilityOverlay({ view }) {
                         else if (NAVIGATION_KEYS.has(e.key) && SkiaAccessibilityManager.Key(n.Source, e.key))
                             e.preventDefault();
                     }, onFocus: (e) => {
+                        focusedId.current = n.Id;
                         pin({ currentTarget: e.currentTarget.parentElement });
                         SkiaScrollCtrl.EnsureVisible(n.Source); // inside every enclosing scroll
                         if (tabbingOut.current === n.Id)
@@ -215,6 +240,8 @@ function AccessibilityOverlay({ view }) {
                         n.Source.NotifyAccessibilityFocused(true);
                         setFocusTick((t) => t + 1);
                     }, onBlur: (e) => {
+                        if (e.currentTarget.isConnected && focusedId.current === n.Id)
+                            focusedId.current = 0; // moved away on purpose
                         if (TextInputProxy.IsProxyTarget(e.relatedTarget))
                             return; // a text field moved DOM focus to its own input
                         n.Source.OnAccessibilityFocused(false);
@@ -223,7 +250,7 @@ function AccessibilityOverlay({ view }) {
                 // AccessibilityTextSelectable: one positioned span per drawn line, in the drawn font, so the browser selects and copies it like HTML
                 _jsx("div", { role: n.Role, title: n.Hint, "aria-disabled": n.Disabled || undefined, "aria-live": n.Live, className: "drawnui-a11y-node drawnui-a11y-text", style: pos, children: n.TextLines.map((l, i) => (_jsxs("span", { "data-w": l.Width, style: { left: l.Left, top: l.Top, height: l.Height, fontFamily: l.FontFamily, fontWeight: l.FontWeight, fontSize: l.FontSize, lineHeight: `${l.Height}px` }, children: [l.Text, i < n.TextLines.length - 1 ? "\n" : ""] }, i))) }, n.Id)) : (
                 // static text is exposed as real (transparent) text content; aria-label only for roles that need a name
-                _jsx("div", { role: n.Role, "aria-label": n.Role === "text" ? undefined : n.Label, title: n.Hint, "aria-disabled": n.Disabled || undefined, "aria-live": n.Live, className: "drawnui-a11y-node", style: pos, children: n.Label }, n.Id));
+                _jsx("div", { role: n.Role, "aria-label": n.Role === "text" ? undefined : n.Label, title: n.Hint, ...valueAttributes(n), "aria-disabled": n.Disabled || undefined, "aria-live": n.Live, className: "drawnui-a11y-node", style: pos, children: n.Label }, n.Id));
             })] }));
 }
 // One import for apps: React tags + every engine type (Colors, Thickness, Super, gestures, animators...).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawnui-react",
-  "version": "0.1.0-preview.16",
+  "version": "0.1.0-preview.17",
   "description": "DrawnUi for React: the DrawnUi (.NET) drawn-UI engine in TypeScript on CanvasKit (Skia WASM). Same controls, same PascalCase API as DrawnUi.Net.",
   "license": "MIT",
   "author": "Nick Kovalsky (AppoMobi)",
@@ -59,6 +59,20 @@
     "check:children": "node dev/check.mjs dev/check-children.tsx",
     "check:composite": "node dev/check.mjs dev/check-composite.tsx",
     "check:hover": "node dev/check.mjs dev/check-hover.ts",
+    "check:grid-label": "node dev/check.mjs dev/check-grid-label.ts",
+    "check:snap": "node dev/check.mjs dev/check-snap.ts",
+    "check:game": "node dev/check.mjs dev/check-game.ts",
+    "check:animation": "node dev/check.mjs dev/check-animation.ts",
+    "check:shape": "node dev/check.mjs dev/check-shape.ts",
+    "check:label": "node dev/check.mjs dev/check-label.ts",
+    "check:image": "node dev/check.mjs dev/check-image.ts",
+    "check:longpress": "node dev/check.mjs dev/check-longpress.ts",
+    "check:hidden": "node dev/check.mjs dev/check-hidden.ts",
+    "check:shell": "node dev/check.mjs dev/check-shell.tsx",
+    "check:wheel-routing": "node dev/check.mjs dev/check-wheel-routing.ts",
+    "check:velocity": "node dev/check.mjs dev/check-velocity.ts",
+    "check:scroll-index": "node dev/check.mjs dev/check-scroll-index.ts",
+    "check:culling": "node dev/check.mjs dev/check-culling.ts",
     "site:extras": "node dev/site-extras.mjs dist/demo",
     "build:lib": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json",
     "prepublishOnly": "npm run build:lib",