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

package/dist/controls/SkiaLayout.d.ts

@@ -6,9 +6,11 @@ import { SkiaGridStructure } from "./GridStructure";
  * Mirrors DrawnUi SkiaLayout (Absolute / Column / Row / Wrap / Grid).
  * Column/Row give children an infinite main axis (MAUI stack semantics: Fill on the main axis = auto-sized).
  *
- * Templated mode (ItemsSource + ItemTemplate) is a Column only: cells are created through the ViewsAdapter for
- * the indexes inside the visible viewport (+ VirtualisationInflated), everything else is arithmetic —
- * MeasureFirst measures one cell and assumes uniform size, MeasureAll measures every item once.
+ * Templated mode (ItemsSource + ItemTemplate): a single-column Column is the virtualized list, cells are created through
+ * the ViewsAdapter for the indexes inside the visible viewport (+ VirtualisationInflated), everything else is arithmetic —
+ * MeasureAll (default) measures every item once, MeasureFirst measures one cell and assumes uniform size. A templated
+ * Row / Wrap / Grid / split Column follows RecyclingTemplate: Enabled measures every item on pooled views and binds views
+ * only to the slots drawn, Disabled keeps one view per item.
  */
 export declare class SkiaLayout extends SkiaControl {
     /** Layout type. SkiaShape redeclares it as ShapeType (any shape value lays out as Absolute), like the C# hidden Type. */
@@ -24,7 +26,10 @@ export declare class SkiaLayout extends SkiaControl {
     RowSpacing: number;
     /** Structure computed by the last measure; cells are arranged from it. */
     GridStructure?: SkiaGridStructure;
-    RecyclingTemplate: RecyclingTemplate;
+    private recyclingTemplate;
+    /** Enabled: views come from a pool and are bound to the items being drawn; Disabled: one view per item, never rebound. */
+    get RecyclingTemplate(): RecyclingTemplate;
+    set RecyclingTemplate(value: RecyclingTemplate);
     /** Column count for Column / Wrap content and a templated Grid (0 = free flow); C# Split. */
     Split: number;
     /** Split > 0: every slot keeps the same width (true) or the cell keeps its measured width (C# SplitAlign). */
@@ -33,6 +38,7 @@ export declare class SkiaLayout extends SkiaControl {
     DynamicColumns: boolean;
     /** Templated Grid: fill column-major (top to bottom, then next column) instead of row-major (C# Invert). */
     Invert: boolean;
+    /** Default MeasureAll (DrawnUi 1.10.6.20): every item keeps its own size; MeasureFirst is explicit uniform rows. */
     MeasureItemsStrategy: MeasuringStrategy;
     /** Realized views per item (Disabled) or a recycled pool for the visible range (Enabled). */
     readonly ChildrenFactory: ViewsAdapter;
@@ -41,7 +47,7 @@ export declare class SkiaLayout extends SkiaControl {
     private itemsSource?;
     private itemTemplate?;
     private structureDirty;
-    /** Per-item heights in pixels (MeasureAll) or a single uniform height (MeasureFirst). */
+    /** Per-item heights in pixels (MeasureAll, the default) or a single uniform height (MeasureFirst). */
     private itemHeights;
     private uniformHeight;
     private measuredWidthPx;
@@ -70,13 +76,30 @@ export declare class SkiaLayout extends SkiaControl {
      * anything else rebuilds. Returns false when a full rebuild is needed.
      */
     private ApplyIncrementalChange;
+    /**
+     * Same items in another order — a drag-to-reorder, or any code writing a permuted array. DrawnUi handles the
+     * matching `ObservableCollection.Move` by keeping the structure and only rebinding the contexts, because its
+     * arrange re-flows each row from its bound view (`HandleStructurePreservingMove` / `ApplyMoveChange`, 2026-09-08).
+     * The measured heights here are index-keyed and authoritative, so they travel with their items instead: nothing is
+     * remeasured, the extent cannot change, and the scroll keeps its offset. Rebuilding instead would reset
+     * `MeasureVisible` to "exact for the first screen, estimated after" and throw a scrolled list back towards the top.
+     * Returns false when the two arrays are not a permutation of each other, so a real content change still rebuilds.
+     */
+    private ApplyReorderChange;
     /** Factory creating one cell (DrawnUi DataTemplate). Cells receive the item as BindingContext. */
     get ItemTemplate(): (() => SkiaControl) | undefined;
     set ItemTemplate(value: (() => SkiaControl) | undefined);
     get IsTemplated(): boolean;
-    /** The virtualized list case: a templated single-column Column. Templated Row / Wrap / Grid realize every item. */
+    /** The virtualized list case: a templated single-column Column. */
     private get IsTemplatedList();
-    /** Views taking part in the layout pass: static children, or every item of a templated Row / Wrap / Grid (C# non-list layouts are not virtualized). */
+    /** A templated Row / Wrap / Grid / split Column with RecyclingTemplate Enabled: slots measured on pooled views, views bound to the slots drawn. */
+    private get IsRecycledLayout();
+    /** Slots of a recycled layout, one per item. */
+    private slots?;
+    /**
+     * What the layout pass measures and arranges: static children; the slots of a recycled templated layout; or, with
+     * RecyclingTemplate Disabled, one realized view per item.
+     */
     private LayoutViews;
     /** Drops realized cells and rebuilds the structure (DrawnUi ApplyItemsSource). */
     ApplyItemsSource(): void;
@@ -89,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[];
@@ -127,12 +165,31 @@ 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;
     protected OnLayoutChanged(): void;
+    /** Static children and realized views are arranged; the slots of a recycled layout record where their item goes. */
+    private ArrangeChildren;
     protected Paint(ctx: DrawingContext): void;
     protected GetCompositeChildren(): readonly SkiaControl[];
+    private readonly drawnSlots;
+    /**
+     * Recycled templated layout (C# DrawStack): a view from the pool is bound to each slot that can be seen and drawn
+     * there; the views of the other slots go back to the pool.
+     */
+    private PaintSlots;
+    /**
+     * Where slots are drawn (C# GetOnScreenVisibleArea): what can be seen, inflated by VirtualisationInflated. Under a
+     * cache (this layout's or an ancestor's, below the nearest scroll) every slot, because the cache is blitted later at
+     * other offsets.
+     */
+    private SlotsArea;
     /** Realizes, binds, arranges and draws only the cells intersecting the visible viewport (+ inflation). */
     private PaintTemplated;
     /**

package/dist/controls/SkiaLayout.js

@@ -2,13 +2,81 @@ import { SkiaControl } from "../core/SkiaControl";
 import { ViewsAdapter } from "../core/ViewsAdapter";
 import { SKRect, ScaledSize, Thickness } from "../core/Types";
 import { SkiaGridStructure } from "./GridStructure";
+/**
+ * The place of one item in a recycled templated Row / Wrap / Grid / split Column. C# measures the structure on one
+ * template instance bound to each item in turn: Measure here binds a pooled view to the item, keeps its size, the
+ * constraints and what the template decided for that item, then gives the view back unless the item is on screen.
+ * The same item measured again with the same constraints keeps its size without a rebind (as the list keeps its item
+ * heights: a new ItemsSource array is how content changes). Arrange only records the slot; the drawing pass binds a
+ * view to each slot it draws.
+ */
+class TemplatedSlot {
+    Index;
+    factory;
+    IsVisible = true;
+    Row = 0;
+    Column = 0;
+    RowSpan = 1;
+    ColumnSpan = 1;
+    HorizontalOptions = "Start";
+    VerticalOptions = "Start";
+    Margin = Thickness.Zero;
+    WidthRequest = -1;
+    HeightRequest = -1;
+    MinimumWidthRequest = -1;
+    MinimumHeightRequest = -1;
+    MeasuredSize = ScaledSize.Default;
+    WidthConstraint = Infinity;
+    HeightConstraint = Infinity;
+    /** The rect the layout arranged this slot in (pixels). */
+    Destination = SKRect.Empty;
+    /** The view last arranged in this slot and the Destination it got, so an unchanged view is not arranged twice. */
+    ArrangedView;
+    ArrangedFor;
+    measuredItem;
+    measuredScale = 0;
+    constructor(Index, factory) {
+        this.Index = Index;
+        this.factory = factory;
+    }
+    Measure(widthConstraint, heightConstraint, scale) {
+        const shown = this.factory.GetViewForIndex(this.Index), item = this.factory.Items[this.Index];
+        if (!shown && item === this.measuredItem && scale === this.measuredScale
+            && Object.is(widthConstraint, this.WidthConstraint) && Object.is(heightConstraint, this.HeightConstraint))
+            return this.MeasuredSize;
+        const view = shown ?? this.factory.GetOrCreateViewForIndex(this.Index, true);
+        if (!view)
+            return (this.MeasuredSize = ScaledSize.Default);
+        this.MeasuredSize = view.Measure(widthConstraint, heightConstraint, scale);
+        this.measuredItem = item;
+        this.measuredScale = scale;
+        this.WidthConstraint = widthConstraint;
+        this.HeightConstraint = heightConstraint;
+        this.IsVisible = view.IsVisible;
+        this.RowSpan = view.RowSpan;
+        this.ColumnSpan = view.ColumnSpan;
+        this.HorizontalOptions = view.HorizontalOptions;
+        this.VerticalOptions = view.VerticalOptions;
+        this.Margin = view.Margin;
+        this.WidthRequest = view.WidthRequest;
+        this.HeightRequest = view.HeightRequest;
+        this.MinimumWidthRequest = view.MinimumWidthRequest;
+        this.MinimumHeightRequest = view.MinimumHeightRequest;
+        if (!shown)
+            this.factory.ReleaseViewAt(this.Index);
+        return this.MeasuredSize;
+    }
+    Arrange(destination, _widthRequest, _heightRequest, _scale) { this.Destination = destination; }
+}
 /**
  * Mirrors DrawnUi SkiaLayout (Absolute / Column / Row / Wrap / Grid).
  * Column/Row give children an infinite main axis (MAUI stack semantics: Fill on the main axis = auto-sized).
  *
- * Templated mode (ItemsSource + ItemTemplate) is a Column only: cells are created through the ViewsAdapter for
- * the indexes inside the visible viewport (+ VirtualisationInflated), everything else is arithmetic —
- * MeasureFirst measures one cell and assumes uniform size, MeasureAll measures every item once.
+ * Templated mode (ItemsSource + ItemTemplate): a single-column Column is the virtualized list, cells are created through
+ * the ViewsAdapter for the indexes inside the visible viewport (+ VirtualisationInflated), everything else is arithmetic —
+ * MeasureAll (default) measures every item once, MeasureFirst measures one cell and assumes uniform size. A templated
+ * Row / Wrap / Grid / split Column follows RecyclingTemplate: Enabled measures every item on pooled views and binds views
+ * only to the slots drawn, Disabled keeps one view per item.
  */
 export class SkiaLayout extends SkiaControl {
     /** Layout type. SkiaShape redeclares it as ShapeType (any shape value lays out as Absolute), like the C# hidden Type. */
@@ -26,7 +94,16 @@ export class SkiaLayout extends SkiaControl {
     /** Structure computed by the last measure; cells are arranged from it. */
     GridStructure;
     // ---- templated children (same names as DrawnUi) ----
-    RecyclingTemplate = "Enabled";
+    recyclingTemplate = "Enabled";
+    /** Enabled: views come from a pool and are bound to the items being drawn; Disabled: one view per item, never rebound. */
+    get RecyclingTemplate() { return this.recyclingTemplate; }
+    set RecyclingTemplate(value) {
+        if (this.recyclingTemplate === value)
+            return;
+        this.recyclingTemplate = value;
+        if (this.itemTemplate)
+            this.ApplyItemsSource(); // the pool follows the mode
+    }
     /** Column count for Column / Wrap content and a templated Grid (0 = free flow); C# Split. */
     Split = 0;
     /** Split > 0: every slot keeps the same width (true) or the cell keeps its measured width (C# SplitAlign). */
@@ -35,7 +112,8 @@ export class SkiaLayout extends SkiaControl {
     DynamicColumns = false;
     /** Templated Grid: fill column-major (top to bottom, then next column) instead of row-major (C# Invert). */
     Invert = false;
-    MeasureItemsStrategy = "MeasureFirst";
+    /** Default MeasureAll (DrawnUi 1.10.6.20): every item keeps its own size; MeasureFirst is explicit uniform rows. */
+    MeasureItemsStrategy = "MeasureAll";
     /** Realized views per item (Disabled) or a recycled pool for the visible range (Enabled). */
     ChildrenFactory = new ViewsAdapter(this);
     FirstVisibleIndex = -1;
@@ -43,7 +121,7 @@ export class SkiaLayout extends SkiaControl {
     itemsSource;
     itemTemplate;
     structureDirty = true;
-    /** Per-item heights in pixels (MeasureAll) or a single uniform height (MeasureFirst). */
+    /** Per-item heights in pixels (MeasureAll, the default) or a single uniform height (MeasureFirst). */
     itemHeights = [];
     uniformHeight = 0;
     measuredWidthPx = 0;
@@ -87,7 +165,11 @@ export class SkiaLayout extends SkiaControl {
      */
     ApplyIncrementalChange(old, items) {
         const n = items.length, o = old.length;
-        if (n <= o || o === 0)
+        if (o === 0)
+            return false;
+        if (n === o)
+            return this.ApplyReorderChange(old, items);
+        if (n < o)
             return false;
         const k = n - o;
         const scale = this.RenderingScale, gap = this.Spacing * scale, w = this.measuredWidthPx;
@@ -143,6 +225,65 @@ export class SkiaLayout extends SkiaControl {
         }
         return false;
     }
+    /**
+     * Same items in another order — a drag-to-reorder, or any code writing a permuted array. DrawnUi handles the
+     * matching `ObservableCollection.Move` by keeping the structure and only rebinding the contexts, because its
+     * arrange re-flows each row from its bound view (`HandleStructurePreservingMove` / `ApplyMoveChange`, 2026-09-08).
+     * The measured heights here are index-keyed and authoritative, so they travel with their items instead: nothing is
+     * remeasured, the extent cannot change, and the scroll keeps its offset. Rebuilding instead would reset
+     * `MeasureVisible` to "exact for the first screen, estimated after" and throw a scrolled list back towards the top.
+     * Returns false when the two arrays are not a permutation of each other, so a real content change still rebuilds.
+     */
+    ApplyReorderChange(old, items) {
+        const n = items.length;
+        if (this.MeasureItemsStrategy === "MeasureAll" && this.itemHeights.length !== n)
+            return false;
+        if (this.MeasureItemsStrategy === "MeasureVisible" && this.mvHeights.length !== n)
+            return false;
+        const moved = [];
+        for (let i = 0; i < n; i++)
+            if (old[i] !== items[i])
+                moved.push(i);
+        if (moved.length === 0) {
+            this.ChildrenFactory.UpdateItems(items);
+            return true;
+        } // same order, new array reference
+        // every slot that changed must hold an item that was in one of those slots before, otherwise this is not a reorder
+        const free = new Map();
+        for (const i of moved) {
+            const q = free.get(old[i]);
+            if (q)
+                q.push(i);
+            else
+                free.set(old[i], [i]);
+        }
+        const from = new Int32Array(n);
+        for (let i = 0; i < n; i++)
+            from[i] = i;
+        for (const i of moved) {
+            const q = free.get(items[i]);
+            if (!q || q.length === 0)
+                return false;
+            from[i] = q.shift();
+        }
+        if (this.MeasureItemsStrategy === "MeasureAll") {
+            const was = this.itemHeights;
+            this.itemHeights = Array.from({ length: n }, (_, i) => was[from[i]]);
+        }
+        else if (this.MeasureItemsStrategy === "MeasureVisible") {
+            const was = this.mvHeights, heights = new Float64Array(n);
+            for (let i = 0; i < n; i++)
+                heights[i] = was[from[i]];
+            this.mvHeights = heights;
+            // an item that was never measured can land inside the exact prefix: rebuild it over the leading measured run
+            this.mvPrefix = new Float64Array(n + 1);
+            this.mvMeasured = 0;
+            this.MvExtendPrefix(this.Spacing * this.RenderingScale);
+        }
+        // MeasureFirst has one height for every row, so a reorder is a pure rebind there (same as the C# note).
+        this.ChildrenFactory.UpdateItems(items);
+        return true;
+    }
     /** Factory creating one cell (DrawnUi DataTemplate). Cells receive the item as BindingContext. */
     get ItemTemplate() { return this.itemTemplate; }
     set ItemTemplate(value) {
@@ -152,13 +293,26 @@ export class SkiaLayout extends SkiaControl {
         this.ApplyItemsSource();
     }
     get IsTemplated() { return !!this.itemTemplate && !!this.itemsSource; }
-    /** The virtualized list case: a templated single-column Column. Templated Row / Wrap / Grid realize every item. */
+    /** The virtualized list case: a templated single-column Column. */
     get IsTemplatedList() { return this.IsTemplated && this.Type === "Column" && this.Split <= 1; }
-    /** Views taking part in the layout pass: static children, or every item of a templated Row / Wrap / Grid (C# non-list layouts are not virtualized). */
+    /** A templated Row / Wrap / Grid / split Column with RecyclingTemplate Enabled: slots measured on pooled views, views bound to the slots drawn. */
+    get IsRecycledLayout() { return this.IsTemplated && !this.IsTemplatedList && this.recyclingTemplate === "Enabled"; }
+    /** Slots of a recycled layout, one per item. */
+    slots;
+    /**
+     * What the layout pass measures and arranges: static children; the slots of a recycled templated layout; or, with
+     * RecyclingTemplate Disabled, one realized view per item.
+     */
     LayoutViews() {
         if (!this.IsTemplated)
             return this.views;
-        const n = this.itemsSource.length, out = [];
+        const n = this.itemsSource.length;
+        if (this.IsRecycledLayout) {
+            if (this.slots?.length !== n)
+                this.slots = Array.from({ length: n }, (_, i) => new TemplatedSlot(i, this.ChildrenFactory));
+            return this.slots;
+        }
+        const out = [];
         for (let i = 0; i < n; i++) {
             const v = this.ChildrenFactory.GetOrCreateViewForIndex(i);
             if (v)
@@ -168,7 +322,8 @@ export class SkiaLayout extends SkiaControl {
     }
     /** Drops realized cells and rebuilds the structure (DrawnUi ApplyItemsSource). */
     ApplyItemsSource() {
-        this.ChildrenFactory.Initialize(this.itemTemplate, this.itemsSource ?? [], this.RecyclingTemplate);
+        this.ChildrenFactory.Initialize(this.itemTemplate, this.itemsSource ?? [], this.recyclingTemplate);
+        this.slots = undefined;
         this.structureDirty = true;
         this.InvalidateMeasure();
     }
@@ -204,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). */
@@ -235,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);
@@ -248,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) {
@@ -371,7 +591,7 @@ export class SkiaLayout extends SkiaControl {
                 }
             });
         }
-        const g = new SkiaGridStructure(this, wPts, hPts, scale);
+        const g = new SkiaGridStructure(this, wPts, hPts, scale, this.LayoutViews());
         g.DecompressStars(wPts, hPts);
         const needAutoWidth = this.WidthRequest < 0 && this.HorizontalOptions !== "Fill";
         const needAutoHeight = this.HeightRequest < 0 && this.VerticalOptions !== "Fill";
@@ -511,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;
@@ -536,6 +761,22 @@ export class SkiaLayout extends SkiaControl {
     OnLayoutChanged() {
         if (this.IsTemplatedList)
             return; // cells are arranged per frame for the visible range only
+        this.ArrangeChildren();
+        // views on screen follow their slots also when a cache above skips the drawing pass (gestures, accessibility)
+        if (this.IsRecycledLayout) {
+            const scale = this.RenderingScale;
+            for (const v of this.ChildrenFactory.GetViewsInUse()) {
+                const s = this.slots?.[v.ContextIndex];
+                if (s) {
+                    v.Arrange(s.Destination, v.WidthRequest, v.HeightRequest, scale);
+                    s.ArrangedView = v;
+                    s.ArrangedFor = s.Destination;
+                }
+            }
+        }
+    }
+    /** Static children and realized views are arranged; the slots of a recycled layout record where their item goes. */
+    ArrangeChildren() {
         const scale = this.RenderingScale;
         const p = this.Padding;
         const r = this.DrawingRect;
@@ -582,12 +823,68 @@ export class SkiaLayout extends SkiaControl {
             this.PaintTemplated(ctx);
             return;
         }
+        if (this.IsRecycledLayout) {
+            this.PaintSlots(ctx);
+            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();
+    /**
+     * Recycled templated layout (C# DrawStack): a view from the pool is bound to each slot that can be seen and drawn
+     * there; the views of the other slots go back to the pool.
+     */
+    PaintSlots(ctx) {
+        const slots = this.slots ?? [], f = this.ChildrenFactory, scale = this.RenderingScale, area = this.SlotsArea();
+        const drawn = this.drawnSlots;
+        drawn.clear();
+        for (const s of slots) {
+            const d = s.Destination;
+            if (s.IsVisible && d.Right > area.Left && d.Left < area.Right && d.Bottom > area.Top && d.Top < area.Bottom)
+                drawn.add(s.Index);
+        }
+        f.ReleaseExcept(drawn);
+        this.FirstVisibleIndex = this.LastVisibleIndex = -1;
+        for (const i of drawn) {
+            const s = slots[i], view = f.GetOrCreateViewForIndex(i, true);
+            if (!view)
+                continue;
+            // a view last measured for another item is measured for this one; the whole size is compared because a Wrap has
+            // no main-axis size key (C# 3d7bd78f)
+            const has = view.MeasuredSize.Pixels, want = s.MeasuredSize.Pixels;
+            if (Math.abs(has.Width - want.Width) > 1 || Math.abs(has.Height - want.Height) > 1)
+                view.NeedMeasure = true;
+            const size = view.MeasuredSize;
+            view.Measure(s.WidthConstraint, s.HeightConstraint, scale);
+            if (s.ArrangedView !== view || s.ArrangedFor !== s.Destination || view.MeasuredSize !== size) {
+                view.Arrange(s.Destination, view.WidthRequest, view.HeightRequest, scale);
+                s.ArrangedView = view;
+                s.ArrangedFor = s.Destination;
+            }
+            view.Render(ctx);
+            if (this.FirstVisibleIndex < 0)
+                this.FirstVisibleIndex = i;
+            this.LastVisibleIndex = i;
+        }
+    }
+    /**
+     * Where slots are drawn (C# GetOnScreenVisibleArea): what can be seen, inflated by VirtualisationInflated. Under a
+     * cache (this layout's or an ancestor's, below the nearest scroll) every slot, because the cache is blitted later at
+     * other offsets.
+     */
+    SlotsArea() {
+        for (let c = this; c && !("ViewportOffsetY" in c); c = c.Parent)
+            if (c.UsingCacheType !== "None")
+                return this.DrawingRect;
+        const v = this.GetVisibleViewport(), inflate = this.VirtualisationInflated * this.RenderingScale;
+        return new SKRect(v.Left - inflate, v.Top - inflate, v.Right + inflate, v.Bottom + inflate);
     }
-    GetCompositeChildren() { return this.IsTemplatedList ? [] : this.GetOrderedSubviews(); }
     /** Realizes, binds, arranges and draws only the cells intersecting the visible viewport (+ inflation). */
     PaintTemplated(ctx) {
         const items = this.itemsSource;

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) {
@@ -174,7 +176,7 @@ export class SkiaLottie extends AnimatedFramesRenderer {
             return Promise.resolve(cached);
         let p = SkiaLottie.inFlight.get(source);
         if (!p) {
-            p = fetch(source).then(async (r) => { if (!r.ok)
+            p = fetch(Super.ResolveAssetUrl(source)).then(async (r) => { if (!r.ok)
                 throw new Error(`${r.status} ${source}`); const json = await r.text(); SkiaLottie.CachedAnimations.set(source, json); return json; })
                 .finally(() => SkiaLottie.inFlight.delete(source));
             SkiaLottie.inFlight.set(source, p);

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/SkiaRadioButton.js

@@ -37,8 +37,7 @@ export class SkiaRadioButton extends SkiaToggle {
         return table[this.UsingControlStyle]?.[name];
     }
     CreateDefaultContent() {
-        if (this.MinimumHeightRequest < 0)
-            this.MinimumHeightRequest = 24;
+        this.SetMinimumContentHeight(24);
         const s = this.usingStyle;
         const size = s === "Unset" ? 18 : 20;
         const box = new SkiaLayout();
@@ -145,8 +144,10 @@ export class SkiaRadioButton extends SkiaToggle {
         super.OnToggledChanged();
     }
     ProcessGestures(args, apply) {
+        if (!this.RespondsToGestures)
+            return this.BlockedGestureResult(args); // a tap does not select it, nor reach controls under it
         if (args.Type === "Tapped") {
-            if (!this.IsToggled && this.RespondsToGestures) {
+            if (!this.IsToggled) {
                 this.IsToggled = true;
                 return this;
             }