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

package/dist/controls/SkiaScroll.js

@@ -333,6 +333,8 @@ export class SkiaScroll extends SkiaControl {
     loadMoreTopArmed = false;
     /** C# CheckNeedToLoadMore: fires once per content extent near an edge; re-arms when the content grows or the user moves away (>offset+100pt, >2 s). */
     CheckLoadMore() {
+        if (this.indexOrder)
+            return; // an open ScrollToIndex has the viewport on its way: the edges are looked at after it
         const vertical = this.Orientation !== "Horizontal";
         const offset = vertical ? this.offsetY : this.offsetX;
         const min = vertical ? this.ContentOffsetBounds.Top : this.ContentOffsetBounds.Left; // most negative offset
@@ -635,6 +637,7 @@ export class SkiaScroll extends SkiaControl {
     }
     Paint(ctx) {
         this.Superview?.Hover?.RegisterMover(this);
+        this.PursueIndexOrder();
         const c = this.content;
         if (!c)
             return;
@@ -737,6 +740,8 @@ export class SkiaScroll extends SkiaControl {
             this.ViewportOffsetY = target;
     }
     ScrollTo(x, y, maxSpeedSecs, clamp = true) {
+        if (!this.pursuing)
+            this.indexOrder = undefined; // another scroll drops an open ScrollToIndex
         this.StopAnimators(); // also forgets any pending edge bounce: a programmatic scroll never bounces
         let tx = x, ty = y;
         if (clamp) {
@@ -769,16 +774,82 @@ export class SkiaScroll extends SkiaControl {
         else
             this.ScrollTo(this.offsetX, this.ContentOffsetBounds.Top, maxTimeSecs);
     }
-    StopScrolling() { this.StopAnimators(); this.IsUserPanning = false; }
+    StopScrolling() { this.indexOrder = undefined; this.StopAnimators(); this.IsUserPanning = false; }
     /**
      * Scrolls so that item `index` is at the viewport start (or end). Like DrawnUi, Content must BE the
      * templated layout (the recycled list is the scroll's only child; a header goes above the scroll or in Header).
      */
     ScrollToIndex(index, animate, option = "Start") {
+        this.indexOrder = { Index: index, Option: option, Secs: animate ? this.ScrollingSpeedMs / 1000 : 0, Stalled: 0 };
+        this.PursueIndexOrder();
+        this.Repaint();
+    }
+    /**
+     * An open ScrollToIndex (C# OrderedScrollToIndex, DrawnUi.Rust scroll_to_index): a row not measured yet is gone to by
+     * the sizes as they are estimated, and the order is aimed again every frame until the row has its real place and the
+     * viewport stands on it; an animated move goes on to a moved target in the time it has left, later corrections jump.
+     * A press, the wheel or another scroll drops it; while it is open LoadMore waits.
+     */
+    indexOrder;
+    pursuing = false;
+    /** One step of the open order (C# ExecuteScrollToIndexOrder, Rust `pursue`), at the start of every paint. */
+    PursueIndexOrder() {
+        const order = this.indexOrder;
+        if (!order)
+            return;
+        const horizontal = this.Orientation === "Horizontal";
+        const before = horizontal ? this.offsetX : this.offsetY;
+        const running = horizontal ? this.animatorFlingX : this.animatorFlingY;
+        const aim = this.AimIndex(order.Index, order.Option);
+        let done = false;
+        if (aim) {
+            const c = this.ClampOffset(horizontal ? aim.Offset : this.offsetX, horizontal ? this.offsetY : aim.Offset, this.ContentOffsetBounds, true);
+            const target = horizontal ? c.X : c.Y;
+            const runningTo = horizontal ? this.scrollToTargetX : this.scrollToTargetY;
+            const move = (to, secs) => {
+                this.pursuing = true;
+                try {
+                    this.ScrollTo(horizontal ? to : this.offsetX, horizontal ? this.offsetY : to, secs, true);
+                }
+                finally {
+                    this.pursuing = false;
+                }
+            };
+            if (running.IsRunning && runningTo !== null) {
+                if (Math.abs(runningTo - target) > 0.5) {
+                    // on the way: the move goes on to the new target in the time it has left
+                    const now = this.Superview?.FrameTimeNanos || performance.now() * 1_000_000;
+                    move(target, running.StartFrameTimeNanos ? Math.max(0.016, running.Speed - (now - running.StartFrameTimeNanos) / 1e9) : running.Speed);
+                    running.StartFrameTimeNanos = running.LastFrameTimeNanos = now;
+                }
+            }
+            else if (Math.abs(before - target) <= 0.5) {
+                if (horizontal)
+                    this.ViewportOffsetX = target;
+                else
+                    this.ViewportOffsetY = target;
+                done = aim.Exact;
+            }
+            else {
+                move(target, order.Secs);
+                order.Secs = 0;
+            }
+        }
+        // no list yet, or a row that never gets its real place: not forever
+        order.Stalled = (horizontal ? this.offsetX : this.offsetY) === before && !running.IsRunning ? order.Stalled + 1 : 0;
+        if (done || order.Stalled >= 10) {
+            this.indexOrder = undefined;
+            this.CheckLoadMore();
+            return;
+        }
+        this.Repaint(); // the next frame aims again
+    }
+    /** The offset (points) that puts item `index` where `option` says, by the sizes the list knows now; Exact = its place is measured. */
+    AimIndex(index, option) {
         const layout = this.content instanceof SkiaLayout && this.content.IsTemplated ? this.content : undefined;
         const items = layout?.ItemsSource;
         if (!layout || !items || items.length === 0 || !this.content)
-            return;
+            return undefined;
         const i = Math.max(0, Math.min(items.length - 1, index));
         const scale = this.RenderingScale;
         const horizontal = this.Orientation === "Horizontal";
@@ -795,7 +866,7 @@ export class SkiaScroll extends SkiaControl {
             // arranged rect, like C# reads the structure cell's Destination.
             const cell = layout.ChildrenFactory.GetViewForIndex(i);
             if (!cell)
-                return;
+                return undefined;
             const r = cell.DrawingRect, c = this.content.DrawingRect;
             itemStart = (horizontal ? r.Left - c.Left : r.Top - c.Top) / scale;
             itemSize = (horizontal ? r.Width : r.Height) / scale;
@@ -805,11 +876,7 @@ export class SkiaScroll extends SkiaControl {
             target -= viewport - itemSize;
         else if (option === "Center")
             target -= (viewport - itemSize) / 2;
-        const time = animate ? this.ScrollingSpeedMs / 1000 : 0;
-        if (horizontal)
-            this.ScrollTo(-target, this.offsetY, time, true);
-        else
-            this.ScrollTo(this.offsetX, -target, time, true);
+        return { Offset: -target, Exact: layout.IsItemMeasured(i) };
     }
     StopAnimators() {
         this.flingEdgeX = null;
@@ -895,6 +962,7 @@ export class SkiaScroll extends SkiaControl {
         if (this.ProcessScrollBarGestures(args, apply))
             return this;
         if (args.Type === "Down") {
+            this.indexOrder = undefined; // a press drops an open ScrollToIndex
             this.hadDown = true;
             this.snapped = false;
             if (this.RespondsToGestures) {

package/dist/controls/SkiaShape.d.ts

@@ -20,6 +20,10 @@ export declare class SkiaShape extends SkiaLayout {
     StrokeCap: StrokeCap;
     /** Gradient painted along the stroke instead of StrokeColor (C# StrokeGradient). */
     StrokeGradient?: SkiaGradient;
+    /** Dashes in points: on, off, on, off... (C# StrokePath, each rounded to pixels). Empty = a solid line. */
+    StrokePath?: number[];
+    /** Blend mode of the stroke, an SKBlendMode name (C# StrokeBlendMode). */
+    StrokeBlendMode: string;
     /** Raised (Bevel) or pressed-in (Emboss) edges, drawn with Bevel after the background (C# BevelType). */
     BevelType: BevelType;
     private bevel?;
@@ -43,11 +47,18 @@ export declare class SkiaShape extends SkiaLayout {
     static ShadowFilter(shadow: SkiaShadow, scale: number): import("canvaskit-wasm").ImageFilter;
     constructor();
     private StrokePixels;
-    /** Rect the outline is drawn on: bounds deflated by half the stroke so the stroke stays inside. */
+    /**
+     * The outline the stroke runs on (C# CalculateShapeSizeForStroke): the bounds inset by half the stroke rounded up, at
+     * least a pixel, then on whole pixels inward, so a 1 px stroke on a plain rectangle sits on the line between two
+     * pixels as upstream draws it.
+     */
     private StrokeAwareRect;
+    /** The fill (C# MeasuredStrokeAwareClipSize): a third of the stroke inside the outline, so it does not show under the stroke's edge. */
+    private BackgroundRect;
     private UsesStroke;
     /** Builds the outline path for rect (canvas pixels). Caller deletes it. */
-    protected CreateShapePath(rect: SKRect, scale: number): Path;
+    /** `radiusReduce`: pixels taken off every corner radius (the fill inside a thick stroke, C# GetCorrectedBackgroundRadii). */
+    protected CreateShapePath(rect: SKRect, scale: number, radiusReduce?: number): Path;
     /** Children live inside the stroke (full width) + Padding. */
     private ChildrenRect;
     /** Clip for overlay effects (ripple) and children: the shape itself, inset by the stroke. */

package/dist/controls/SkiaShape.js

@@ -17,6 +17,10 @@ export class SkiaShape extends SkiaLayout {
     StrokeCap = "Round";
     /** Gradient painted along the stroke instead of StrokeColor (C# StrokeGradient). */
     StrokeGradient;
+    /** Dashes in points: on, off, on, off... (C# StrokePath, each rounded to pixels). Empty = a solid line. */
+    StrokePath;
+    /** Blend mode of the stroke, an SKBlendMode name (C# StrokeBlendMode). */
+    StrokeBlendMode = "SrcOver";
     /** Raised (Bevel) or pressed-in (Emboss) edges, drawn with Bevel after the background (C# BevelType). */
     BevelType = "None";
     bevel;
@@ -66,14 +70,28 @@ export class SkiaShape extends SkiaLayout {
             return 0;
         return this.StrokeWidth > 0 ? this.StrokeWidth * scale : -this.StrokeWidth;
     }
-    /** Rect the outline is drawn on: bounds deflated by half the stroke so the stroke stays inside. */
+    /**
+     * The outline the stroke runs on (C# CalculateShapeSizeForStroke): the bounds inset by half the stroke rounded up, at
+     * least a pixel, then on whole pixels inward, so a 1 px stroke on a plain rectangle sits on the line between two
+     * pixels as upstream draws it.
+     */
     StrokeAwareRect(r, scale) {
-        const half = this.StrokePixels(scale) / 2;
-        return new SKRect(r.Left + half, r.Top + half, r.Right - half, r.Bottom - half);
+        if (!this.UsesStroke())
+            return r;
+        const half = this.StrokePixels(scale) / 2, inset = half < 0.5 ? 1 : Math.ceil(half);
+        return new SKRect(Math.ceil(r.Left + inset), Math.ceil(r.Top + inset), Math.floor(r.Right - inset), Math.floor(r.Bottom - inset));
+    }
+    /** The fill (C# MeasuredStrokeAwareClipSize): a third of the stroke inside the outline, so it does not show under the stroke's edge. */
+    BackgroundRect(r, scale) {
+        if (!this.UsesStroke())
+            return r;
+        const o = this.StrokeAwareRect(r, scale), k = this.StrokePixels(scale) / 3;
+        return new SKRect(o.Left + k, o.Top + k, o.Right - k, o.Bottom - k);
     }
     UsesStroke() { return this.StrokeWidth !== 0 && this.StrokeColor !== Colors.Transparent; }
     /** Builds the outline path for rect (canvas pixels). Caller deletes it. */
-    CreateShapePath(rect, scale) {
+    /** `radiusReduce`: pixels taken off every corner radius (the fill inside a thick stroke, C# GetCorrectedBackgroundRadii). */
+    CreateShapePath(rect, scale, radiusReduce = 0) {
         const CK = Super.CK;
         const b = new CK.PathBuilder();
         const type = this.Type;
@@ -114,7 +132,8 @@ export class SkiaShape extends SkiaLayout {
         else {
             const c = this.cornerRadius;
             if (c.TopLeft || c.TopRight || c.BottomLeft || c.BottomRight) {
-                const tl = c.TopLeft * scale, tr = c.TopRight * scale, br = c.BottomRight * scale, bl = c.BottomLeft * scale;
+                const k = (v) => Math.max(0, v * scale - radiusReduce);
+                const tl = k(c.TopLeft), tr = k(c.TopRight), br = k(c.BottomRight), bl = k(c.BottomLeft);
                 b.addRRect(Float32Array.of(rect.Left, rect.Top, rect.Right, rect.Bottom, tl, tl, tr, tr, br, br, bl, bl));
             }
             else {
@@ -151,8 +170,11 @@ export class SkiaShape extends SkiaLayout {
             return; // open shapes: stroke only
         const CK = Super.CK;
         const canvas = ctx.Context.Canvas;
-        const rect = this.StrokeAwareRect(ctx.Destination, ctx.Scale);
-        const path = this.CreateShapePath(rect, ctx.Scale);
+        const rect = this.BackgroundRect(ctx.Destination, ctx.Scale);
+        // inside a stroke wider than a point the corners of the fill are rounded less (C# GetCorrectedBackgroundRadii)
+        const outline = this.StrokeAwareRect(ctx.Destination, ctx.Scale);
+        const reduce = this.UsesStroke() && this.StrokeWidth > 1 ? Math.min((outline.Width - rect.Width) / 2, (outline.Height - rect.Height) / 2) : 0;
+        const path = this.CreateShapePath(rect, ctx.Scale, reduce);
         // C# PaintWithShadowsInternal: the fill is drawn once per shadow with a drop-shadow filter; a hollow shape
         // (ClipBackgroundColor) clips its own outline away so only the shadow outside remains
         for (const shadow of this.shadows) {
@@ -295,18 +317,36 @@ export class SkiaShape extends SkiaLayout {
             clip.delete();
         }
         if (this.UsesStroke()) {
-            const rect = this.StrokeAwareRect(ctx.Destination, ctx.Scale);
-            const path = this.CreateShapePath(rect, ctx.Scale);
+            const scale = ctx.Scale, px = this.StrokePixels(scale), type = this.Type;
+            let rect = this.StrokeAwareRect(ctx.Destination, scale);
+            const c = this.cornerRadius;
+            const rounded = type === "Rectangle" && !!(c.TopLeft || c.TopRight || c.BottomLeft || c.BottomRight);
+            // C# PaintStroke: on curves a stroke of a point or less is thinned (its antialiasing makes it look heavier than
+            // the straight parts), a thin rounded rectangle runs through pixel centers, a line is at least a pixel wide
+            const curved = rounded || type === "Circle" || type === "Ellipse" || type === "Arc" || type === "Path";
+            const width = type === "Line" ? Math.max(1, px) : curved && px <= scale ? px * 0.55 : px;
+            if (rounded && px <= 2 * scale) {
+                const even = (v) => { const r = Math.round(v); return Math.abs(v % 1) === 0.5 && r % 2 !== 0 ? r - 1 : r; }; // C# Math.Round: ties to even
+                rect = new SKRect(even(rect.Left) + 0.5, even(rect.Top) + 0.5, even(rect.Right) - 0.5, even(rect.Bottom) - 0.5);
+            }
+            const path = this.CreateShapePath(rect, scale);
             const paint = new CK.Paint();
             paint.setAntiAlias(true);
             paint.setStyle(CK.PaintStyle.Stroke);
-            paint.setStrokeWidth(Math.max(1, this.StrokePixels(ctx.Scale)));
+            paint.setStrokeWidth(width);
             paint.setColor(Super.ParseColor(this.StrokeColor));
             if (this.StrokeGradient)
                 this.SetupGradient(paint, this.StrokeGradient, rect);
+            const blend = CK.BlendMode[this.StrokeBlendMode];
+            if (blend && this.StrokeBlendMode !== "SrcOver")
+                paint.setBlendMode(blend);
             paint.setStrokeCap(this.StrokeCap === "Butt" ? CK.StrokeCap.Butt : this.StrokeCap === "Square" ? CK.StrokeCap.Square : CK.StrokeCap.Round);
             paint.setStrokeJoin(this.StrokeCap === "Round" ? CK.StrokeJoin.Round : CK.StrokeJoin.Miter);
+            const dash = this.StrokePath?.length ? CK.PathEffect.MakeDash(this.StrokePath.map((v) => Math.round(v * scale)), 0) : null;
+            if (dash)
+                paint.setPathEffect(dash);
             canvas.drawPath(path, paint);
+            dash?.delete();
             paint.delete();
             path.delete();
         }

package/dist/controls/SkiaSlider.d.ts

@@ -80,5 +80,9 @@ export declare class SkiaSlider extends SkiaControl {
      * Home / End go to Min / Max. A ranged slider moves its End thumb, which stops at Start.
      */
     OnAccessibilityKey(key: string): boolean;
-    protected DefaultAccessibilityLabel(): string | undefined;
+    /**
+     * End between Min and Max, read as the number, or "20 – 80" in range mode; the step is the arrow key's. The name is
+     * the app's AccessibilityLabel only (C# used to make the value the name, drawnui-cross 6c).
+     */
+    get AccessibilityValue(): import("../core/Accessibility").AccessibilityValue;
 }

package/dist/controls/SkiaSlider.js

@@ -280,5 +280,11 @@ export class SkiaSlider extends SkiaControl {
         this.End = Math.min(this.Max, Math.max(low, value));
         return true;
     }
-    DefaultAccessibilityLabel() { return this.EnableRange ? `${this.start} – ${this.end}` : `${this.end}`; }
+    /**
+     * End between Min and Max, read as the number, or "20 – 80" in range mode; the step is the arrow key's. The name is
+     * the app's AccessibilityLabel only (C# used to make the value the name, drawnui-cross 6c).
+     */
+    get AccessibilityValue() {
+        return { Now: this.end, Min: this.Min, Max: this.Max, Step: this.Step > 0 ? this.Step : (this.Max - this.Min) / 100, Text: this.EnableRange ? `${this.start} – ${this.end}` : "" };
+    }
 }

package/dist/controls/SkiaSprite.d.ts

@@ -86,6 +86,7 @@ export declare class SkiaSprite extends AnimatedFramesRenderer {
     /** Transparent borders of a frame, scanned once (C# ScanFrameContentBounds over the bitmap alpha). */
     private GetFrameContentBounds;
     protected OnAnimatorUpdated(value: number): void;
+    protected NextChangeMs(value: number): number | undefined;
     protected OnAnimatorSeeking(time: number): void;
     protected OnAnimatorInitializing(): void;
     protected ApplySpeed(): void;

package/dist/controls/SkiaSprite.js

@@ -227,6 +227,10 @@ export class SkiaSprite extends AnimatedFramesRenderer {
     }
     // ---- animator ----
     OnAnimatorUpdated(value) { this.Seek(value); }
+    NextChangeMs(value) {
+        const fd = this.FrameDurationMs;
+        return fd > 0 ? (Math.floor(value / fd) + 1) * fd : undefined;
+    }
     OnAnimatorSeeking(time) {
         if (!this.SpriteSheet)
             return;

package/dist/controls/SnappingLayout.d.ts

@@ -61,6 +61,11 @@ export declare abstract class SnappingLayout extends SkiaLayout {
     protected FindNearestAnchorInternal(current: SKPoint, _velocity: SKPoint): SKPoint;
     /** The closest anchor lying in the direction of the velocity (dot product), else the origin. */
     SelectNextAnchor(origin: SKPoint, velocity: SKPoint): SKPoint;
+    /**
+     * Release speed, points per second along an axis, under which the snap ignores the velocity and goes to the nearest
+     * anchor by distance (C# SnapVelocityThreshold, drawnui-cross 6o): a finger held still before lifting is not a flick.
+     */
+    SnapVelocityThreshold: number;
     ScrollToNearestAnchor(location: SKPoint, velocity: SKPoint): void;
     get CanAnimate(): boolean;
     protected GetAutoVelocity(displacement: SKPoint): SKPoint;

package/dist/controls/SnappingLayout.js

@@ -138,9 +138,17 @@ export class SnappingLayout extends SkiaLayout {
         }
         return origin;
     }
+    /**
+     * Release speed, points per second along an axis, under which the snap ignores the velocity and goes to the nearest
+     * anchor by distance (C# SnapVelocityThreshold, drawnui-cross 6o): a finger held still before lifting is not a flick.
+     */
+    SnapVelocityThreshold = 100;
     ScrollToNearestAnchor(location, velocity) {
         if (this.SnapPoints.length === 0)
             return;
+        if (Math.abs(velocity.X) < this.SnapVelocityThreshold || Math.abs(velocity.Y) < this.SnapVelocityThreshold) {
+            velocity = new SKPoint(Math.abs(velocity.X) < this.SnapVelocityThreshold ? 0 : velocity.X, Math.abs(velocity.Y) < this.SnapVelocityThreshold ? 0 : velocity.Y);
+        }
         const origin = this.FindNearestAnchorInternal(location, velocity);
         const target = this.SelectNextAnchor(origin, velocity);
         if (SnappingLayout.Dist(location, target) >= 0.5)

package/dist/core/Accessibility.d.ts

@@ -70,6 +70,17 @@ export interface AccessibilityTextLine {
     FontWeight: number;
     FontSize: number;
 }
+/**
+ * The value of a range control (a slider, a progress bar): what a screen reader reads and adjusts (drawnui-cross 6c,
+ * C# AccessibilityValue): aria-valuenow / min / max, and aria-valuetext when Text is not empty ("65%", "20 – 80").
+ */
+export interface AccessibilityValue {
+    Now: number;
+    Min: number;
+    Max: number;
+    Step: number;
+    Text: string;
+}
 /** One entry of the accessibility snapshot (DrawnUi AccessibilityNode). Rect is CSS pixels relative to the canvas. */
 export interface AccessibilityNode {
     Id: number;
@@ -83,6 +94,8 @@ export interface AccessibilityNode {
     IsPressed?: boolean;
     Live?: string;
     Source: SkiaControl;
+    /** A range control's value (aria-valuenow / min / max / valuetext); its name stays the app's label. */
+    Value?: AccessibilityValue;
     /** Real text lines rendered into the overlay so the browser can select / copy them (opt-in per control). */
     TextLines?: AccessibilityTextLine[];
 }

package/dist/core/Accessibility.js

@@ -80,6 +80,7 @@ export class SkiaAccessibilityManager {
         if (!node || !node.AccessibilityCanInteract)
             return false;
         node.OnAccessibilityActivated();
+        node.Superview?.AccessibilityManager.ForceRebuildOnNextFrame(); // a screen reader reads the new state right back
         return true;
     }
     /**
@@ -90,8 +91,10 @@ export class SkiaAccessibilityManager {
     static Key(node, key) {
         if (!node)
             return false;
-        if (node.CanReceiveGesture("Panning") && node.OnAccessibilityKey(key))
+        if (node.CanReceiveGesture("Panning") && node.OnAccessibilityKey(key)) {
+            node.Superview?.AccessibilityManager.ForceRebuildOnNextFrame(); // the new value is read right back, not a second later
             return true;
+        }
         return node.Superview?.AccessibilityManager.MoveInGroup(node, key) ?? false;
     }
     // ---- arrow-key groups (C# SkiaAccessibilityManager, "Arrow-key groups") ----
@@ -255,7 +258,7 @@ export class SkiaAccessibilityManager {
             for (const cb of this.liveUpdated)
                 cb(node);
     }
-    ForceRebuildOnNextFrame() { this.lastRebuild = 0; this.dirty = true; }
+    ForceRebuildOnNextFrame() { this.lastRebuild = -Infinity; this.dirty = true; }
     Unregister(node) {
         if (this.nodes.delete(node)) {
             node.OnAccessibilityUnregistered();
@@ -311,7 +314,7 @@ export class SkiaAccessibilityManager {
             if (px.Right < -canvasWidthPx || px.Bottom < -canvasHeightPx || px.Left > 2 * canvasWidthPx || px.Top > 2 * canvasHeightPx)
                 continue;
             list.push({
-                Id: n.AccessibilityId, Label: n.AccessibilityLabel, Hint: n.AccessibilityHint, Role: n.AccessibilityRole,
+                Id: n.AccessibilityId, Label: n.AccessibilityLabel, Hint: n.AccessibilityHint, Role: n.AccessibilityRole, Value: n.AccessibilityValue,
                 Rect: new SKRect(px.Left / scale, px.Top / scale, px.Right / scale, px.Bottom / scale),
                 CanInteract: n.AccessibilityCanInteract, IsPressed: n.AccessibilityIsPressed, Live: n.AccessibilityLive, Source: n,
                 Disabled: !n.AccessibilityCanInteract && Aria.IsInteractiveRole(n.AccessibilityRole),
@@ -347,7 +350,7 @@ export class SkiaAccessibilityManager {
         for (let i = 0; i < a.length; i++) {
             const x = a[i], y = b[i];
             if (x.Source !== y.Source || x.Label !== y.Label || x.Hint !== y.Hint || x.Role !== y.Role || x.CanInteract !== y.CanInteract || x.Disabled !== y.Disabled
-                || x.IsPressed !== y.IsPressed || x.Live !== y.Live
+                || x.IsPressed !== y.IsPressed || x.Live !== y.Live || !SameValue(x.Value, y.Value)
                 || Math.abs(x.Rect.Left - y.Rect.Left) > 0.5 || Math.abs(x.Rect.Top - y.Rect.Top) > 0.5
                 || Math.abs(x.Rect.Right - y.Rect.Right) > 0.5 || Math.abs(x.Rect.Bottom - y.Rect.Bottom) > 0.5)
                 return false;
@@ -389,6 +392,9 @@ function SayNamesOnce(list) {
     }
     return said.size ? list.filter((x) => !said.has(x)) : list;
 }
+function SameValue(a, b) {
+    return a === b || (!!a && !!b && a.Now === b.Now && a.Min === b.Min && a.Max === b.Max && a.Step === b.Step && a.Text === b.Text);
+}
 // ---- group helpers (duck-typed layouts and scrolls) ----
 /** Children of a control (a layout's Views, a scroll's Content). */
 function ViewsOf(c) {

package/dist/core/Animators.d.ts

@@ -18,11 +18,28 @@ export declare class AnimatorBase {
     StartFrameTimeNanos: number;
     OnStart?: () => void;
     OnStop?: () => void;
+    /** Paused: the canvas does not tick it and it wakes no frames; Resume goes on from where it was (C# Pause / Resume). */
+    IsPaused: boolean;
+    /** Paused by the canvas because its control is hidden; resumed when it shows again. */
+    PausedWhileHidden: boolean;
+    /**
+     * Frame time (ns) before which nothing it shows changes: the canvas does not tick it and it keeps no frames coming
+     * until then, a timer wakes the frame loop at that time (a GIF or a sprite between two frames; DrawnUi.Rust frame
+     * animators sleep between changes). 0 = tick every frame.
+     */
+    SleepUntilNanos: number;
     private delayHandle;
+    private delayEnd;
+    private delayLeft;
+    private pausedAt;
     constructor(parent: SkiaControl);
     protected Register(): boolean;
     protected Unregister(): void;
     Start(delayMs?: number): void;
+    /** Freezes the run (and what is left of a start delay); Resume goes on from there. */
+    Pause(): void;
+    /** Goes on from where Pause froze it: the paused time is not counted. */
+    Resume(): void;
     Stop(): void;
     /** Returns true when there is nothing more to do (not running / finished). */
     TickFrame(frameTimeNanos: number): boolean;
@@ -55,10 +72,20 @@ export declare class SkiaValueAnimator extends AnimatorBase {
     TickFrame(frameTimeNanos: number): boolean;
     /** Passed over mValue; subclasses derive their own reported value here. */
     protected TransformReportedValue(_deltaT: number): number;
-    /** Updates mValue from elapsed time; true when the target was reached. */
+    /**
+     * Updates mValue from elapsed time; true when the run is over. The eased value is not clamped to the range: a spring
+     * easing goes past its ends, and a run whose mMinValue is above mMaxValue (a ping-pong's way back) goes down.
+     */
     protected UpdateValue(_deltaT: number, deltaFromStart: number): boolean;
     protected FinishedRunning(): boolean;
 }
+/** DrawnUi PingPongAnimator: every repeat runs the other way (Repeat -1 = forever by default). */
+export declare class PingPongAnimator extends SkiaValueAnimator {
+    /** One way done, the next starts (C# CycleFInished). */
+    CycleFinished?: () => void;
+    constructor(parent: SkiaControl);
+    protected FinishedRunning(): boolean;
+}
 /** DrawnUi RenderingAnimator: a value animator that paints itself above its Parent (IOverlayEffect). */
 export declare class RenderingAnimator extends SkiaValueAnimator implements IOverlayEffect {
     constructor(parent: SkiaControl);

package/dist/core/Animators.js

@@ -16,7 +16,20 @@ export class AnimatorBase {
     StartFrameTimeNanos = 0;
     OnStart;
     OnStop;
+    /** Paused: the canvas does not tick it and it wakes no frames; Resume goes on from where it was (C# Pause / Resume). */
+    IsPaused = false;
+    /** Paused by the canvas because its control is hidden; resumed when it shows again. */
+    PausedWhileHidden = false;
+    /**
+     * Frame time (ns) before which nothing it shows changes: the canvas does not tick it and it keeps no frames coming
+     * until then, a timer wakes the frame loop at that time (a GIF or a sprite between two frames; DrawnUi.Rust frame
+     * animators sleep between changes). 0 = tick every frame.
+     */
+    SleepUntilNanos = 0;
     delayHandle = 0;
+    delayEnd = 0;
+    delayLeft = 0;
+    pausedAt = 0;
     constructor(parent) { this.Parent = parent; }
     Register() {
         const parent = this.Parent;
@@ -60,6 +73,8 @@ export class AnimatorBase {
             this.delayHandle = 0;
         }
         if (delayMs > 0) {
+            // the delay waits without frames
+            this.delayEnd = performance.now() + delayMs;
             this.delayHandle = window.setTimeout(() => { this.delayHandle = 0; this.Start(); }, delayMs);
             return;
         }
@@ -72,7 +87,43 @@ export class AnimatorBase {
             }
         }
     }
+    /** Freezes the run (and what is left of a start delay); Resume goes on from there. */
+    Pause() {
+        if (this.IsPaused)
+            return;
+        this.IsPaused = true;
+        this.pausedAt = performance.now();
+        if (this.delayHandle) {
+            clearTimeout(this.delayHandle);
+            this.delayHandle = 0;
+            this.delayLeft = Math.max(0, this.delayEnd - this.pausedAt);
+        }
+    }
+    /** Goes on from where Pause froze it: the paused time is not counted. */
+    Resume() {
+        if (!this.IsPaused)
+            return;
+        this.IsPaused = false;
+        const paused = (performance.now() - this.pausedAt) * 1_000_000;
+        if (this.StartFrameTimeNanos !== 0) {
+            this.StartFrameTimeNanos += paused;
+            this.LastFrameTimeNanos += paused;
+        }
+        if (this.SleepUntilNanos !== 0)
+            this.SleepUntilNanos += paused;
+        if (this.delayLeft > 0) {
+            const left = this.delayLeft;
+            this.delayLeft = 0;
+            this.Start(left);
+            return;
+        }
+        this.Parent?.Repaint(); // frames again
+    }
     Stop() {
+        this.IsPaused = false;
+        this.PausedWhileHidden = false;
+        this.SleepUntilNanos = 0;
+        this.delayLeft = 0;
         if (this.delayHandle) {
             clearTimeout(this.delayHandle);
             this.delayHandle = 0;
@@ -155,23 +206,21 @@ export class SkiaValueAnimator extends AnimatorBase {
     }
     /** Passed over mValue; subclasses derive their own reported value here. */
     TransformReportedValue(_deltaT) { return this.mValue; }
-    /** Updates mValue from elapsed time; true when the target was reached. */
+    /**
+     * Updates mValue from elapsed time; true when the run is over. The eased value is not clamped to the range: a spring
+     * easing goes past its ends, and a run whose mMinValue is above mMaxValue (a ping-pong's way back) goes down.
+     */
     UpdateValue(_deltaT, deltaFromStart) {
         const elapsedMs = deltaFromStart / 1_000_000;
         const progress = this.Speed > 0 ? elapsedMs / this.Speed : 1;
         const deltaValue = this.mMaxValue - this.mMinValue;
         const eased = this.Easing.Ease(Math.min(progress, 1));
         this.Progress = eased;
-        const value = deltaValue * eased + this.mMinValue;
-        if (value < this.mMinValue) {
-            this.mValue = this.mMinValue;
-            return false;
-        }
-        if (value >= this.mMaxValue || progress >= 1) {
+        if (progress >= 1) {
             this.mValue = this.mMaxValue;
             return true;
         }
-        this.mValue = value;
+        this.mValue = deltaValue * eased + this.mMinValue;
         return false;
     }
     FinishedRunning() {
@@ -188,6 +237,25 @@ export class SkiaValueAnimator extends AnimatorBase {
         return true;
     }
 }
+/** DrawnUi PingPongAnimator: every repeat runs the other way (Repeat -1 = forever by default). */
+export class PingPongAnimator extends SkiaValueAnimator {
+    /** One way done, the next starts (C# CycleFInished). */
+    CycleFinished;
+    constructor(parent) { super(parent); this.Repeat = -1; }
+    FinishedRunning() {
+        if (this.Repeat !== 0) {
+            this.CycleFinished?.();
+            if (this.Repeat > 0)
+                this.Repeat--;
+            [this.mMinValue, this.mMaxValue] = [this.mMaxValue, this.mMinValue];
+            this.mValue = this.mMinValue;
+            this.LastFrameTimeNanos = 0;
+            this.StartFrameTimeNanos = 0;
+            return false;
+        }
+        return super.FinishedRunning();
+    }
+}
 /** DrawnUi RenderingAnimator: a value animator that paints itself above its Parent (IOverlayEffect). */
 export class RenderingAnimator extends SkiaValueAnimator {
     constructor(parent) { super(parent); }