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

package/dist/controls/SkiaLayout.d.ts

@@ -112,7 +112,22 @@ export declare class SkiaLayout extends SkiaControl {
     get Views(): readonly SkiaControl[];
     /** Settable children list like DrawnUi Children (ignored while templated). */
     get Children(): readonly SkiaControl[];
+    /**
+     * C# Children reset (ChildrenCollectionSync, 66a1eb02): the app's children the new list no longer holds are removed,
+     * the ones it gained are added, then all of them take the list's order inside the slots app children occupy, so the
+     * parts a control made itself keep their place.
+     */
     set Children(value: readonly SkiaControl[]);
+    /**
+     * C# Insert / Move of a Children collection (the reconciler's appendChild / insertBefore): `child` goes before
+     * `before` among the app's children, or last without it. A new child is attached at the end of the views and an
+     * append stops there; otherwise the app's children take their new order inside the slots they occupy.
+     */
+    InsertChild(child: SkiaControl, before?: SkiaControl): void;
+    /** C# OrderViews: the given children, in their order, inside the slots they occupy in the views; nothing else moves. */
+    private OrderChildren;
+    /** C# ClearChildren: removes every subview, the control's own parts included. */
+    ClearChildren(): void;
     private orderedViews?;
     /** Static children sorted by ZIndex (stable), computed once per change (C# GetOrderedSubviews). */
     protected GetOrderedSubviews(): readonly SkiaControl[];
@@ -150,6 +165,11 @@ export declare class SkiaLayout extends SkiaControl {
     private MvScheduleBackground;
     /** Binds a cell to items[index] (through the adapter, so MeasureFirst's cell 0 stays realized) and measures it. */
     private MeasureItem;
+    /**
+     * The item's offset and height are real, not estimated (C# LastMeasuredIndexLocal >= index): MeasureVisible knows
+     * them once the measured prefix passed the item; the other strategies always do.
+     */
+    IsItemMeasured(index: number): boolean;
     /** Pixel offset of item index from the top of the layout content (inside padding). */
     GetItemOffsetPixels(index: number): number;
     private ItemHeightPixels;

package/dist/controls/SkiaLayout.js

@@ -359,11 +359,67 @@ export class SkiaLayout extends SkiaControl {
     get Views() { return this.IsTemplated ? this.ChildrenFactory.GetViewsInUse() : this.views; }
     /** Settable children list like DrawnUi Children (ignored while templated). */
     get Children() { return this.views; }
+    /**
+     * C# Children reset (ChildrenCollectionSync, 66a1eb02): the app's children the new list no longer holds are removed,
+     * the ones it gained are added, then all of them take the list's order inside the slots app children occupy, so the
+     * parts a control made itself keep their place.
+     */
     set Children(value) {
+        const keep = new Set(value);
+        for (const v of [...this.views])
+            if (v.IsChildrenItem && !keep.has(v))
+                this.RemoveSubView(v);
+        const inViews = new Set(this.views);
+        for (const v of value) {
+            v.IsChildrenItem = true;
+            if (!inViews.has(v))
+                this.AddSubView(v);
+        }
+        this.OrderChildren(value);
+    }
+    /**
+     * C# Insert / Move of a Children collection (the reconciler's appendChild / insertBefore): `child` goes before
+     * `before` among the app's children, or last without it. A new child is attached at the end of the views and an
+     * append stops there; otherwise the app's children take their new order inside the slots they occupy.
+     */
+    InsertChild(child, before) {
+        child.IsChildrenItem = true;
+        const attached = child.Parent === this && this.views.includes(child);
+        if (!attached)
+            this.AddSubView(child);
+        if (!attached && !before)
+            return;
+        const order = this.views.filter((v) => v.IsChildrenItem && v !== child);
+        const at = before ? order.indexOf(before) : -1;
+        order.splice(at < 0 ? order.length : at, 0, child);
+        this.OrderChildren(order);
+    }
+    /** C# OrderViews: the given children, in their order, inside the slots they occupy in the views; nothing else moves. */
+    OrderChildren(ordered) {
+        const inViews = new Set(this.views);
+        const present = ordered.filter((v) => inViews.delete(v));
+        if (present.length < 2)
+            return;
+        const isChild = new Set(present);
+        let next = 0, changed = false;
+        for (let i = 0; i < this.views.length && next < present.length; i++) {
+            if (!isChild.has(this.views[i]))
+                continue;
+            if (this.views[i] !== present[next]) {
+                this.views[i] = present[next];
+                changed = true;
+            }
+            next++;
+        }
+        if (changed) {
+            this.orderedViews = undefined;
+            this.InvalidateMeasure();
+        }
+    }
+    /** C# ClearChildren: removes every subview, the control's own parts included. */
+    ClearChildren() {
         for (const v of [...this.views])
             this.RemoveSubView(v);
-        for (const v of value)
-            this.AddSubView(v);
     }
     orderedViews;
     /** Static children sorted by ZIndex (stable), computed once per change (C# GetOrderedSubviews). */
@@ -390,10 +446,18 @@ export class SkiaLayout extends SkiaControl {
     }
     AddSubView(control) { this.InsertSubView(this.views.length, control); }
     InsertSubView(index, control) {
+        // already a child: a move (React reorders keyed children by inserting an existing one elsewhere), never a 2nd copy
+        const at = control.Parent === this ? this.views.indexOf(control) : -1;
+        if (at >= 0) {
+            this.views.splice(at, 1);
+            if (at < index)
+                index--;
+        }
         control.Parent = this;
-        this.views.splice(index, 0, control);
+        this.views.splice(Math.min(Math.max(0, index), this.views.length), 0, control);
         this.orderedViews = undefined;
         this.InvalidateMeasure();
+        this.Superview?.Hover?.RequestCheck(); // a popup / page under a still mouse
     }
     RemoveSubView(control) {
         const i = this.views.indexOf(control);
@@ -403,6 +467,7 @@ export class SkiaLayout extends SkiaControl {
         this.orderedViews = undefined;
         control.Parent = undefined;
         this.InvalidateMeasure();
+        this.Superview?.Hover?.RequestCheck();
     }
     // ---- measure ----
     MeasureAbsolute(widthConstraint, heightConstraint, scale) {
@@ -666,6 +731,11 @@ export class SkiaLayout extends SkiaControl {
             this.ChildrenFactory.ReleaseViewAt(index);
         return h;
     }
+    /**
+     * The item's offset and height are real, not estimated (C# LastMeasuredIndexLocal >= index): MeasureVisible knows
+     * them once the measured prefix passed the item; the other strategies always do.
+     */
+    IsItemMeasured(index) { return this.MeasureItemsStrategy !== "MeasureVisible" || index < this.mvMeasured; }
     /** Pixel offset of item index from the top of the layout content (inside padding). */
     GetItemOffsetPixels(index) {
         const scale = this.RenderingScale;
@@ -758,9 +828,11 @@ export class SkiaLayout extends SkiaControl {
             return;
         }
         const composing = this.IsRenderingWithComposition;
-        for (const v of this.GetOrderedSubviews())
-            if (!composing || this.DirtyChildrenInternal.has(v))
-                v.Render(ctx);
+        for (const v of this.GetOrderedSubviews()) {
+            if (composing && !this.DirtyChildrenInternal.has(v))
+                continue;
+            v.Render(ctx); // a child entirely outside the clip skips itself
+        }
     }
     GetCompositeChildren() { return this.IsTemplatedList || this.IsRecycledLayout ? [] : this.GetOrderedSubviews(); }
     drawnSlots = new Set();

package/dist/controls/SkiaLottie.js

@@ -32,7 +32,9 @@ export class SkiaLottie extends AnimatedFramesRenderer {
     Animation;
     constructor() {
         super();
-        this.UseCache = "ImageDoubleBuffered";
+        // C# ImageDoubleBuffered pays off where a thread bakes the bitmap; on the web it is one offscreen pass per frame
+        // while playing, so the web engines default to Operations (drawnui-cross rule 3)
+        this.UseCache = "Operations";
     }
     get Source() { return this.source; }
     set Source(v) { if (this.source !== v) {

package/dist/controls/SkiaProgress.d.ts

@@ -36,5 +36,6 @@ export declare class SkiaProgress extends SkiaControl {
     get Ratio(): number;
     protected MeasureAbsolute(w: number, _h: number, scale: number): ScaledSize;
     protected Paint(ctx: DrawingContext): void;
-    protected DefaultAccessibilityLabel(): string | undefined;
+    /** Value between Min and Max, read as "65%"; the name is the app's AccessibilityLabel only (drawnui-cross 6c). */
+    get AccessibilityValue(): import("../core/Accessibility").AccessibilityValue;
 }

package/dist/controls/SkiaProgress.js

@@ -33,9 +33,9 @@ export class SkiaProgress extends SkiaControl {
     set Max(v) { this.max = v; this.Update(); }
     /** Unset = per-style palette. */
     get TrackColor() { return this.trackColor ?? SkiaProgress.Palette(this.UsingControlStyle).track; }
-    set TrackColor(v) { this.trackColor = v; this.Update(); }
+    set TrackColor(v) { this.trackColor = v; this.UpdateDraw(); }
     get ProgressColor() { return this.progressColor ?? SkiaProgress.Palette(this.UsingControlStyle).progress; }
-    set ProgressColor(v) { this.progressColor = v; this.Update(); }
+    set ProgressColor(v) { this.progressColor = v; this.UpdateDraw(); }
     /** C# ResolvedTrackColor / ResolvedProgressColor / track heights per style. */
     static Palette(s) {
         switch (s) {
@@ -76,5 +76,8 @@ export class SkiaProgress extends SkiaControl {
         }
         paint.delete();
     }
-    DefaultAccessibilityLabel() { return `${Math.round(this.Ratio * 100)}%`; }
+    /** Value between Min and Max, read as "65%"; the name is the app's AccessibilityLabel only (drawnui-cross 6c). */
+    get AccessibilityValue() {
+        return { Now: this.value, Min: this.min, Max: this.max, Step: 0, Text: `${Math.round(this.Ratio * 100)}%` };
+    }
 }

package/dist/controls/SkiaScroll.d.ts

@@ -156,6 +156,10 @@ export declare class SkiaScroll extends SkiaControl {
     set ViewportOffsetX(value: number);
     get ViewportOffsetY(): number;
     set ViewportOffsetY(value: number);
+    /** An offset set without a glide or a pan (a jump, a touchpad step): the controls under a still mouse changed. */
+    private OffsetJumped;
+    /** Hover waits while the content glides, flings, bounces or follows a pan (C# IsScrolling). */
+    MovesContent(): boolean;
     private readonly animatorFlingX;
     private readonly animatorFlingY;
     private readonly bounceX;
@@ -214,6 +218,18 @@ export declare class SkiaScroll extends SkiaControl {
      * templated layout (the recycled list is the scroll's only child; a header goes above the scroll or in Header).
      */
     ScrollToIndex(index: number, animate: boolean, option?: RelativePositionType): void;
+    /**
+     * 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.
+     */
+    private indexOrder?;
+    private pursuing;
+    /** One step of the open order (C# ExecuteScrollToIndexOrder, Rust `pursue`), at the start of every paint. */
+    private PursueIndexOrder;
+    /** The offset (points) that puts item `index` where `option` says, by the sizes the list knows now; Exact = its place is measured. */
+    private AimIndex;
     private StopAnimators;
     /** DrawnUi DecelerationRatio: FrictionScrolled / 100, floored at 0.1 friction. */
     private get DecelerationRatio();

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
@@ -399,12 +401,19 @@ export class SkiaScroll extends SkiaControl {
     set ViewportOffsetX(value) { if (this.offsetX !== value) {
         this.offsetX = value;
         this.OnScrolled();
+        this.OffsetJumped();
     } }
     get ViewportOffsetY() { return this.offsetY; }
     set ViewportOffsetY(value) { if (this.offsetY !== value) {
         this.offsetY = value;
         this.OnScrolled();
+        this.OffsetJumped();
     } }
+    /** An offset set without a glide or a pan (a jump, a touchpad step): the controls under a still mouse changed. */
+    OffsetJumped() { if (!this.MovesContent())
+        this.Superview?.Hover?.RequestCheck(); }
+    /** Hover waits while the content glides, flings, bounces or follows a pan (C# IsScrolling). */
+    MovesContent() { return this.IsScrolling || this.IsUserPanning || !!this.draggedScrollBar; }
     animatorFlingX = new ScrollFlingAnimator(this);
     animatorFlingY = new ScrollFlingAnimator(this);
     bounceX = new SpringWithVelocityAnimator(this);
@@ -506,6 +515,7 @@ export class SkiaScroll extends SkiaControl {
     }
     InsertSubView(_index, control) { this.AddSubView(control); }
     RemoveSubView(control) {
+        this.Superview?.Hover?.RequestCheck();
         if (this.content === control)
             this.Content = undefined;
         else if (this.header === control)
@@ -626,6 +636,8 @@ export class SkiaScroll extends SkiaControl {
             }
     }
     Paint(ctx) {
+        this.Superview?.Hover?.RegisterMover(this);
+        this.PursueIndexOrder();
         const c = this.content;
         if (!c)
             return;
@@ -728,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) {
@@ -760,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";
@@ -786,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;
@@ -796,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;
@@ -886,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

@@ -8,6 +8,8 @@ import { type Color, ScaledSize, Thickness } from "../core/Types";
  * Track, selected trail and thumbs are painted directly; the C# thumb-position math (SliderHeight = thumb box) is kept.
  */
 export declare class SkiaSlider extends SkiaControl {
+    /** Takes mouse hover unless ReceivesHover is set false (C# ReceivesHoverByDefault). */
+    protected ReceivesHoverByDefault(): boolean;
     static DefaultAccessibilityRole?: string;
     ControlStyle: PrebuiltControlStyle;
     Min: number;
@@ -78,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

@@ -9,6 +9,8 @@ import { SkiaShape } from "./SkiaShape";
  * Track, selected trail and thumbs are painted directly; the C# thumb-position math (SliderHeight = thumb box) is kept.
  */
 export class SkiaSlider extends SkiaControl {
+    /** Takes mouse hover unless ReceivesHover is set false (C# ReceivesHoverByDefault). */
+    ReceivesHoverByDefault() { return true; }
     static DefaultAccessibilityRole = "slider";
     ControlStyle = "Unset";
     Min = 0;
@@ -60,11 +62,11 @@ export class SkiaSlider extends SkiaControl {
     get SliderHeight() { return this.sliderHeight ?? this.Look().thumb + (this.EnableRange && this.UsingControlStyle !== "Unset" ? 8 : 0); }
     set SliderHeight(v) { this.sliderHeight = v; this.Update(); }
     get ThumbColor() { return this.thumbColor ?? this.Look().thumbColor; }
-    set ThumbColor(v) { this.thumbColor = v; this.Update(); }
+    set ThumbColor(v) { this.thumbColor = v; this.UpdateDraw(); }
     get TrackColor() { return this.trackColor ?? this.Look().track; }
-    set TrackColor(v) { this.trackColor = v; this.Update(); }
+    set TrackColor(v) { this.trackColor = v; this.UpdateDraw(); }
     get TrackSelectedColor() { return this.trackSelectedColor ?? this.Look().selected; }
-    set TrackSelectedColor(v) { this.trackSelectedColor = v; this.Update(); }
+    set TrackSelectedColor(v) { this.trackSelectedColor = v; this.UpdateDraw(); }
     /** C# style builders: thumb diameter, track height, palette, thumb shadow. */
     Look() {
         switch (this.UsingControlStyle) {
@@ -278,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/SkiaToggle.d.ts

@@ -10,6 +10,8 @@ import { SkiaLayout } from "./SkiaLayout";
  * take the style defaults (C# SetStyleDefault).
  */
 export declare abstract class SkiaToggle extends SkiaLayout {
+    /** Takes mouse hover unless ReceivesHover is set false (C# ReceivesHoverByDefault): switch, checkbox, radio button. */
+    protected ReceivesHoverByDefault(): boolean;
     private controlStyle;
     get ControlStyle(): PrebuiltControlStyle;
     set ControlStyle(v: PrebuiltControlStyle);

package/dist/controls/SkiaToggle.js

@@ -8,6 +8,8 @@ import { SkiaLayout } from "./SkiaLayout";
  * take the style defaults (C# SetStyleDefault).
  */
 export class SkiaToggle extends SkiaLayout {
+    /** Takes mouse hover unless ReceivesHover is set false (C# ReceivesHoverByDefault): switch, checkbox, radio button. */
+    ReceivesHoverByDefault() { return true; }
     controlStyle = "Unset";
     get ControlStyle() { return this.controlStyle; }
     set ControlStyle(v) {
@@ -83,7 +85,7 @@ export class SkiaToggle extends SkiaLayout {
     RebuildDefaultContent() {
         if (!this.contentCreated)
             return;
-        this.Children = [];
+        this.ClearChildren();
         for (const p of this.stylePinned)
             this[p] = -1;
         this.stylePinned = [];