drawnui-react 0.1.0-preview.12 → 0.1.0-preview.14

package/SKIPPED.md

@@ -52,9 +52,9 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 | `Gestures` param | ported | Touch: `Lock` applies `touch-action:none`; `Enabled` behaves like MAUI's Enabled inside a native scroll view: `touch-action` is the axes the page (or a scrolling ancestor) can scroll (`pan-y` / `pan-x` / both, `none` when it cannot; inside an iframe the vertical axis always counts, because the embedding page cannot be inspected cross-origin), recomputed on attach, on window / html / body resize and after every touch, so a finger pan along a page axis scrolls the page and the canvas pointer is cancelled (a cancelled pointer never flings a `SkiaScroll`), taps and the other axis stay on the canvas, and a full-page app keeps every touch. `user-select:none` in both. Claimed touches: in `Enabled` a touch or pen Down is processed immediately (queued gestures first) and, when a control used it (same rule as the wheel: marked `Handled`, or a consumer that is not a `BlockGesturesBelow` layer), the touch is claimed and its `touchmove` events are default-prevented until it ends, so the page cannot take that drag mid-gesture (iOS Safari ignores `touch-action` for off-axis drags, w3c/pointerevents#303); unclaimed touches share the page as before. Controls that use a Down: `ConsumeGestures` handlers that set `Consumed`, `SkiaCarousel` (always), `SkiaSlider`, `SkiaEditor`, `SkiaButton` when `OnDown` accepts; `SkiaScroll` and plain `Tapped` controls do not. Mouse wheel: `Enabled` shares it with the page like Blazor's `TouchHandlingStyle.Manual` (the wheel is processed in the DOM handler and the browser default is prevented only when a control used it: a scroll that moved, a `ConsumeGestures` handler that consumed, or any other consumer that is not a `BlockGesturesBelow` layer merely blocking the controls below, so an embedded canvas lets the page scroll over anything that does not scroll, including a shell page, and a scroll at its edge hands the wheel to the page; `TouchActionEventArgs.Handled` is the AppoMobi marker for that use); `Lock` prevents every wheel and also blocks `touchmove` default. Not ported: Blazor's pointer capture policy for `Enabled` (capture only while locked, release when a pan is not consumed); React captures every press. |
 | Mouse cursor over interactive controls (Blazor `Canvas.razor` `.xaml-a11y-interactive { cursor: pointer }`) | ported (differently) | The overlay here is `pointer-events: none`, so `Canvas.UpdateCursor` hit-tests mouse moves with no active pointer against the accessibility snapshot rects (`CanInteract` = has `Tapped`, buttons, links) and asks each hit control `WantsPointerCursor(x, y)` (default `AccessibilityCanInteract`; `SkiaLabel` also answers for its tappable `TextSpan`s), setting the canvas element's `cursor` only when the answer changes. Touch pointers do nothing. Engine hover (`IsHovered` / `OnHover`, `TouchActionResult.Pointer`) stays skipped, see Gestures. |
 | `ContextMenu` (right click / long press / Menu key, React extension) | ported (web-only) | `SkiaControl.ContextMenu` / `Canvas.ContextMenu` handlers with `ContextMenuEventArgs` (`Location` points, `Pixels`, `Local` px in the control, `Source`, `Native`); the DOM `contextmenu` event is routed like a tap (`ProcessContextMenu`: visible non-transparent children top-most first through `TransformPointToLocalSpace`, then the control, then the canvas). `true` = handled, browser menu suppressed; nothing handled = browser menu. Not in DrawnUi.Net. |
-| Keyboard, focus (`FocusedChild`) | skipped | |
+| Keyboard navigation (drawnui-cross 6c) | ported | Through the accessibility overlay, the DrawnUi.Blazor way: Tab / Shift+Tab walk the interactive nodes in reading order, Enter / Space activate (`SkiaAccessibilityManager.Activate`), ArrowLeft / Right / Up / Down, Home / End, PageUp / PageDown go to the focused control first (`OnAccessibilityKey`, `SkiaAccessibilityManager.Key`: `SkiaSlider` steps, `SkiaEditor` keeps them while editing), then to its arrow-key group (`MoveInGroup`). A container with a composite role (`Aria.IsCompositeRole`: list, listbox, grid, toolbar, radiogroup, tablist, menu, menubar) is one Tab stop (roving tabindex, `IsTabStop`, entered on the item focused last); the arrows move by item index (Column: Up / Down, Row: Left / Right, Wrap / Grid / Split: all four, Up / Down by a row), no wrap, items not realized are scrolled in with `ScrollToIndex` and focused once drawn (`OnKeyboardFocusRequested`). `SkiaEditor` is a Tab stop: Tab in takes the caret, Tab / Shift+Tab leave it for the next node (also after a click into it). Focus ring = the overlay element's `:focus-visible` outline; focus scrolls the node into view in every enclosing scroll. Not ported: `FocusedChild` / canvas `KeyboardFocusNode`, Escape leaving the drawn nodes, a canvas-drawn focus ring. |
 | Canvas draw events | ported | `WillFirstTimeDraw` (once, right before the first frame drawn on a ready surface, with that frame's `{ Canvas, Surface }`), `WasDrawn` (after every frame, no context, like the C# `null`), `WasRendered` (set after the first frame completes, so the first `WasDrawn` still sees `false`, C# order), `CanRender` (surface ready). JSX: `<Canvas WillFirstTimeDraw WasDrawn>`; the engine draws frame 1 in its constructor, so the component hands both callbacks to the constructor's `init`. Not ported: `WillDraw`. |
-| Rendering stats | partial | `Canvas.FPS` (frames drawn over the last second) and `Canvas.FrameTime` (ms of the last measure + arrange + render, GPU flush excluded) are computed every frame and reachable from React through the `<Canvas>` ref. Not ported: the `SkiaLabelFps` control, `Super.EnableRenderingStats`. |
+| Rendering stats | partial | `Canvas.FPS` (frames drawn over the last second) and `Canvas.FrameTime` (ms of the last measure + arrange + render, GPU flush excluded) are computed every frame and reachable from React through the `<Canvas>` ref. `SkiaLabelFps` ported (label on top, input-transparent, parent-independent, re-measures itself on draw; its value changes only on frames that running animators request, see PARITY). Not ported: `SkiaLabelFps.ForceRefresh` / `Format` / `MonoForDigits`, `Super.EnableRenderingStats`. |
 | Insets / safe areas | ported | `Super.Insets` measures `env(safe-area-inset-*)` off a probe element (once, and again on resize / orientation), `Super.OnInsetsChanged` notifies; `SkiaShell` pads its nav and tab bars with them. Not ported: the C# per-page `IgnoreSafeArea` / MAUI inset plumbing. |
 
 ## Controls
@@ -77,13 +77,13 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 | `SkiaImageManager` | partial | `Instance.LoadImageAsync(url, signal)` (direct), `LoadImageManagedAsync(url, signal, priority)` through the priority queue (High > Normal > Low, `MaxParallelLoads` 5 in flight like the C# semaphore, one fetch per url serves every requester), `PreloadImage` / `PreloadImages(urls, priority)`, `CancelAll`, `GetFromCache`, `CanReload` callback on failure, `QueuedCount` / `RunningCount`, `ReuseBitmaps`, `Clear()`; in-memory cache of decoded images only. No `CacheLongevitySecs` eviction, no platform loaders, no `LoadImageOnlineAsync` retry policy, no `ImageSource` types (urls only). |
 | `SkiaImageTiles` | ported | `TileWidth` / `TileHeight` (points, nothing drawn until set), `TileAspect` (AspectCover), `TileOffsetX` / `TileOffsetY` (wrap), `TileCacheType` (Image) for the inner tile `SkiaImage` sharing the decoded source, clipped to bounds. |
 | `SkiaSvg` | partial | Inline `SvgString` without `xmlns` gets it injected (browsers refuse to decode an `<img>` SVG without it, SkiaSharp does not care) — the C# check-mark markup relies on that. `Source` (URL) / `SvgString`, `Aspect` (default `AspectFitFill`, uses the shared `RescaleAspect` math, not SkiaSvg's own matrix path), alignments, `TintColor` (SrcIn), `Success`/`Error`, `IsLoading`, `DisplayRect`. Rendering: browser decodes the SVG, rasterized at the displayed pixel size and cached per size (CanvasKit npm has no SVG module). Not ported: shadows, FontAwesome duotone colors, `FillGradient`, `Zoom*`/offsets/`InflateAmount`, `IconFilePath`/embedded resources, `UseCache=Operations` default (no caching yet). |
-| `SkiaScroll` | partial | `Orientation` Vertical/Horizontal/Both/Neither (Neither: pans never move the viewport, the wheel is not consumed so a parent scroll may take it; programmatic `ScrollTo` still works), single `Content`, `ViewportOffsetX/Y` (points, <= 0), pan with the C# 0.85 delta interpolation, fling on the DrawnUi deceleration curve (`FrictionScrolled`, `ChangeVelocityScrolled`, `MaxVelocity`, edge-cut duration), rubber-band overscroll (`Bounces`, `RubberEffect`) + spring bounce (`RubberDamping`, `MaxBounceVelocity`), mouse wheel (`WheelLineSize`, `AutoScrollingSpeedMs`, notches accumulate onto the running target), `ScrollTo`/`ScrollToTop`/`ScrollToBottom`/`StopScrolling`, `Scrolled`, `IgnoreWrongDirection`, `RespondsToGestures`, `IsUserPanning`/`IsScrolling`, `ContentSize`, `ContentOffsetBounds`, `OverScrolled`. `Header` / `Footer` (JSX children with `Tag="Header"` / `Tag="Footer"`; the header scrolls in the flow, `HeaderSticky` pins it at the viewport start drawn over the content, `HeaderBehind` draws it under the content, `HeaderParallaxRatio` (1 = with the content, 0.5 = half speed), `ParallaxOverscrollEnabled`, `ContentOffset` between a behind / sticky header and the content; both add to the scroll extent), scroll bars (`ScrollBarsVisibility` None / Vertical / Horizontal / Both creating default `SkiaScrollBar`s, `ScrollBar` / `ScrollBarHorizontal` custom `IScrollBar` controls via `Tag="ScrollBar"` / `"ScrollBarHorizontal"`, `ScrollBarThumbColor` / `ScrollBarTrackColor`; `SkiaScrollBar`: `Dock`, `ThumbColor`, `TrackColor`, `Thickness` 4, `EdgeMargin` 2, `MinThumbSize` 32, `AutoHide` + `HideDelaySecs` 1 + `HideDurationSecs` 0.25, thumb squashed on overscroll, `IsDraggable` + `GrabPadding` 8: the scroll takes a gesture that starts on the bar from down to up, thumb drag keeps the grab point, a track press jumps the thumb under the pointer, the content gets neither the pan nor the tap; a custom `IScrollBar` opts in by implementing `IsDraggable` / `BeginDrag` / `GetDragProgress`; bars are parent-independent (C# `IsParentIndependent`): a thumb resize invalidates the bar alone and the scroll re-measures it on draw, nothing above re-measures), pull to refresh (`RefreshEnabled`, `RefreshCommand` callback, `IsRefreshing` two-way, `RefreshDistanceLimit` 150, `RefreshShowDistance` 50, `RefreshIndicator` `IRefreshIndicator` control via `Tag="RefreshIndicator"`; `RefreshIndicator` base: `Orientation`, `SetDragRatio` slides the view in with the pull and parks it at RefreshShowDistance, `IsRunning` + `OnIsRunningChanged`, `VisibleRatio`), `SnapToChildren` Center / Side after a fling or a release (`Snap`, `CheckNeedToSnap`), `TrackIndexPosition` Start / Center / End + `TrackIndexPositionOffset` reporting `CurrentIndex` / `CurrentIndexChanged`. Not ported: `ScrollToIndex` with `Center`/deferred ordered scroll for unmeasured indexes (Start/End on measured structures ported), zoom (`ViewportZoom`, `ZoomLocked`), `ReverseGestures` (inverted chat), keyboard adaptation, `ResetScrollPositionOnContentSizeChanged`, `ScrollType`, `ScrollingEnded` event, `LottieRefreshIndicator`, virtualization hooks (`Virtualisation`, `UseVirtual`, windowed content bounds); the C# refresh-indicator position curve is replaced by a linear slide-in. |
+| `SkiaScroll` | partial | `Orientation` Vertical/Horizontal/Both/Neither (Neither: pans never move the viewport, the wheel is not consumed so a parent scroll may take it; programmatic `ScrollTo` still works), single `Content`, `ViewportOffsetX/Y` (points, <= 0), pan with the C# 0.85 delta interpolation, fling on the DrawnUi deceleration curve (`FrictionScrolled`, `ChangeVelocityScrolled`, `MaxVelocity`, edge-cut duration), rubber-band overscroll (`Bounces`, `RubberEffect`) + spring bounce (`RubberDamping`, `MaxBounceVelocity`), mouse wheel (`WheelLineSize` per notch, an event moving by its share of a notch: `Canvas.WheelDeltaPerNotch` 100 CSS px after `deltaMode` lines x 40 / pages x 800, dominant axis, as the C# browser heads; `AutoScrollingSpeedMs` glide for a notch, an event under half a notch moves at once (touchpads, see PARITY); events accumulate onto the running move's exact target, and a restarted glide starts at the event so a fast swipe moves on every frame; `Wheel.IsHorizontal`: a vertical scroll leaves horizontal events, a horizontal scroll takes both, C# ba03cb20), `ScrollTo`/`ScrollToTop`/`ScrollToBottom`/`StopScrolling`, `Scrolled`, `IgnoreWrongDirection`, `RespondsToGestures`, `IsUserPanning`/`IsScrolling`, `ContentSize`, `ContentOffsetBounds`, `OverScrolled`. `Header` / `Footer` (JSX children with `Tag="Header"` / `Tag="Footer"`; the header scrolls in the flow, `HeaderSticky` pins it at the viewport start drawn over the content, `HeaderBehind` draws it under the content, `HeaderParallaxRatio` (1 = with the content, 0.5 = half speed), `ParallaxOverscrollEnabled`, `ContentOffset` between a behind / sticky header and the content; both add to the scroll extent), scroll bars (`ScrollBarsVisibility` None / Vertical / Horizontal / Both creating default `SkiaScrollBar`s, `ScrollBar` / `ScrollBarHorizontal` custom `IScrollBar` controls via `Tag="ScrollBar"` / `"ScrollBarHorizontal"`, `ScrollBarThumbColor` / `ScrollBarTrackColor`; `SkiaScrollBar`: `Dock`, `ThumbColor`, `TrackColor`, `Thickness` 4, `EdgeMargin` 2, `MinThumbSize` 32, `AutoHide` + `HideDelaySecs` 1 + `HideDurationSecs` 0.25, thumb squashed on overscroll, `IsDraggable` + `GrabPadding` 8: the scroll takes a gesture that starts on the bar from down to up, thumb drag keeps the grab point, a track press jumps the thumb under the pointer, the content gets neither the pan nor the tap; a custom `IScrollBar` opts in by implementing `IsDraggable` / `BeginDrag` / `GetDragProgress`; bars are parent-independent (C# `IsParentIndependent`): a thumb resize invalidates the bar alone and the scroll re-measures it on draw, nothing above re-measures), pull to refresh (`RefreshEnabled`, `RefreshCommand` callback, `IsRefreshing` two-way, `RefreshDistanceLimit` 150, `RefreshShowDistance` 50, `RefreshIndicator` `IRefreshIndicator` control via `Tag="RefreshIndicator"`; `RefreshIndicator` base: `Orientation`, `SetDragRatio` slides the view in with the pull and parks it at RefreshShowDistance, `IsRunning` + `OnIsRunningChanged`, `VisibleRatio`), `SnapToChildren` Center / Side after a fling or a release (`Snap`, `CheckNeedToSnap`), `TrackIndexPosition` Start / Center / End + `TrackIndexPositionOffset` reporting `CurrentIndex` / `CurrentIndexChanged`. Not ported: `ScrollToIndex` with `Center`/deferred ordered scroll for unmeasured indexes (Start/End on measured structures ported), zoom (`ViewportZoom`, `ZoomLocked`), `ReverseGestures` (inverted chat), keyboard adaptation, `ResetScrollPositionOnContentSizeChanged`, `ScrollType`, `ScrollingEnded` event, `LottieRefreshIndicator`, virtualization hooks (`Virtualisation`, `UseVirtual`, windowed content bounds); the C# refresh-indicator position curve is replaced by a linear slide-in. |
 | `SkiaShape` (+ `SkiaFrame`) | partial | `BevelType` Bevel / Emboss + `Bevel` (`Depth`, `LightColor`, `ShadowColor`, `Opacity`; C# `PaintBevelEffect` edge paths for Rectangle, rounded Rectangle, Circle/Ellipse, Polygon, Path via ContourMeasure halves).  `Shadows` (`SkiaShadow` X/Y/Blur/Opacity/Color/ShadowOnly, plain literals accepted): fill painted once per shadow with a DropShadow image filter (C# `PaintWithShadowsInternal`), hollow shapes clip their outline away so only the outside shadow remains; caches record the effects margin (`3·Blur·scale ± offset`, C# `MergeShadowMargin`) via `ComputeEffectsMargin`/`ExpandedCacheRect`. Not ported: `PlatformShadow` (MAUI `Shadow` brush), `ExpandDirtyRegion`, bevel/emboss. `Type` Rectangle/Circle/Ellipse/Arc (`Value1` start, `Value2` sweep)/Polygon+Line (`Points` ratios)/Path (`PathData`, fitted + centered), `CornerRadius` (uniform or per-corner), `StrokeWidth` (points, negative = px) drawn inside the bounds, `StrokeColor`, `StrokeCap`, `ClipBackgroundColor`, children laid out inside the stroke and clipped to the shape, `CreateClip` = shape, `FillGradient` fill, `UseCache=Operations` default. Not ported: `Squricle`, `Custom`, `SmoothPoints`, `StrokePath` (dashes), `StrokeGradient`, `StrokeBlendMode`, sub-1px stroke compensation, `MeasuredStrokeAware*` exposure, `LayoutChildren` override hook. |
 | `SkiaButton` | partial | Now a `SkiaLayout` hosting a `SkiaShape` frame (`Tag="BtnShape"`) + `SkiaLabel` (`Tag="BtnText"`), sized from the label + Padding; `CornerRadius` (default 8), `StrokeColor`/`StrokeWidth`, `BackgroundColor`, text props, `ApplyEffect`, `Tapped`/`Down`/`Up`. Still no `ButtonStyle` looks, icons, `TextCase`, elevation, shimmer, custom templating through tags. |
 | `SnappingLayout` | ported | `Animated`, `RespondsToGestures`, `IgnoreWrongDirection`, `Bounces`, `RubberDamping`, `RubberEffect`, `AutoVelocityMultiplyPts`, `SnapDistanceRatio`, `SnapPoints`, `CurrentPosition`, `CurrentSnap`, `ContentOffsetBounds`, `IsUserPanning`/`IsUserFocused`, `InTransition`, `Scrolled`/`TransitionChanged`/`Stopped`, `ClampOffset` (rubber), `FindNearestAnchor`, `SelectNextAnchor` (dot product), `ScrollToNearestAnchor`, `ScrollToOffset` (spring `Spring(1+RubberDamping, 200, 0.5·(1+RubberDamping))` when `Bounces`, else 0.1–0.8 s from velocity). The settled state is reported when the snap animation stops (C# relies on `ApplyPosition` ticks). Not ported: `AnimatorSpring` reuse, `SnapDistanceRatio` for non-carousel layouts, hover. |
 | `UseCache="ImageComposite"` / `ImageCompositeGPU`, `Left` / `Top` | ported | ImageComposite keeps its offscreen surface across records; a child that calls `RepaintComposition` (transform / own repaint) is tracked as dirty by its composite ancestors (`TrackChildAsDirty`, `DirtyChildrenInternal`), the next record erases the dirty children's old + new transformed bounds plus the siblings they overlap and paints only those (`IsRenderingWithComposition`, layouts skip the rest); own content, a remeasure, a size / scale change record fully (`LastCompositeRecord` diagnostics). `Left` / `Top` on a cached control blit the cache at the offset without a matrix or save/restore (the translation is still set as `RenderTransformMatrix` so gestures / accessibility map through it); uncached controls keep the matrix path. Not ported: `ExpandDirtyRegion`, C# `CachedObject` surface reuse for plain `Image`. |
 | `SkiaCarousel` | ported | Static `Children` or recycled `ItemsSource` + `ItemTemplate` cells (only visible + neighbour slides realized, `ReleaseExcept` for the looped non-contiguous set); `IsVertical`, `SidesOffset`, `Spacing`, `IsLooped` (virtual anchors -1/-2, wrap by `GoNext`/`GoPrev`/swipe at the borders, unbounded offset along the axis, edge slides drawn on the far side, `FixIndex` teleport after the wrap, `InterruptSnapping` strip shift), `PreloadNeighboors` (default true), `DynamicSize` (auto-sized axis follows the selected slide, re-measured on index change), `SwipeSpeed` (velocity ×SwipeSpeed/2, spring stiffness 200·SwipeSpeed, linear cap 0.25/speedK s, `SinOut`), `LinearSpeedMs` (one slide = LinearSpeedMs), `SelectedIndex` + `SelectedIndexChanged`, `LastIndex`, `MaxIndex`, `ChildrenTotal`/`ChildrenCount`, `IsAtStart`/`IsAtEnd`, `ScrollProgress`, `ScrollAmount`, `TransitionProgress`, `ItemAppearing`/`ItemDisappearing`, `Stopped`, `GoNext`/`GoPrev`/`ScrollTo(index, animate)`, C# gesture rules (velocity dead zone 100, clamp 500, snap-if-no-pan on Up, only the slides drawn on screen receive gestures). `IsRightToLeft` accepted (C# TODO). Not ported: `TransitionDirection`, `SafeIndex`, `ScrolledCommand`/`SelectedIndexChangedCommand`, `SelectedItem`, `CheckConstraints` exception, `OnTemplatesAvailable` background init, hover, pinch. |
-| Templated `Row` / `Wrap` / `Grid`, `Split`, `SkiaDecoratedGrid` | ported | `ItemsSource` + `ItemTemplate` on any layout type: Column stays the virtualized list; Row / Wrap / Grid realize every item (no virtualization, like the C# non-list layouts) through the same `ViewsAdapter`. `Split` (column count for Wrap and for a Column, which then lays out like a wrap with fixed slots; a templated Grid places item i at (i % Split, i / Split), `Invert` column-major), `SplitAlign` (true: fixed slot width), `DynamicColumns` (a short last row spreads over the width). `SkiaDecoratedGrid`: `HorizontalLine` / `VerticalLine` gradients painted in `RowSpacing` / `ColumnSpacing` under the children (C# defaults). Not ported: `SplitSpace` (C# TODO), `SplitMax`, `MeasureItemsStrategy` for non-Column templated layouts, C# `CellsToRelease` recycling for Wrap. |
+| Templated `Row` / `Wrap` / `Grid`, `Split`, `SkiaDecoratedGrid` | ported | `ItemsSource` + `ItemTemplate` on any layout type: Column stays the virtualized list. Row / Wrap / Grid / a split Column follow `RecyclingTemplate` (drawnui-cross 6b): Enabled measures every item on pooled views (C# measures the structure on one template instance) and binds views only to the slots drawn, their views go back to the pool when the slot leaves the viewport (`VirtualisationInflated` widens it), every slot draws under a cache (C# `GetOnScreenVisibleArea`); Disabled keeps one view per item, never rebound. Changing `RecyclingTemplate` rebuilds the cells. `Split` (column count for Wrap and for a Column, which then lays out like a wrap with fixed slots; a templated Grid places item i at (i % Split, i / Split), `Invert` column-major), `SplitAlign` (true: fixed slot width), `DynamicColumns` (a short last row spreads over the width). `SkiaDecoratedGrid`: `HorizontalLine` / `VerticalLine` gradients painted in `RowSpacing` / `ColumnSpacing` under the children (C# defaults). Not ported: `SplitSpace` (C# TODO), `SplitMax`, `MeasureItemsStrategy` for non-Column templated layouts (every item is measured once per structure). |
 | `AccessibilityTextSelectable` (React extension) | ported | Opt-in per control, off by default: a `SkiaLabel` with it renders its laid-out lines as real, transparent DOM text in the accessibility overlay (one span per line at the drawn position, the registered font aliases are also installed as CSS `FontFace`s so glyphs line up), `pointer-events` on, so the browser selects, copies and reads it like HTML; the wheel over such text is re-dispatched to the canvas. Pointer input over the text never reaches the drawn control, hence opt-in. Not in DrawnUi.Net. |
 | `SkiaShaderCarousel` | ported | Only the selected slide takes gestures (C# `IsSlideHitTestable`): every slide sits on the same rect, so the topmost on-screen one used to catch every tap. `TransitionShader` (url), `TransitionShaderCode`, `TransitionTemplate`, `InterruptedTransitionMs` (50), `TransitionEffect` (`CreateTransitionEffect` factory), `TransitionFromIndex` / `TransitionToIndex`, `FromToChanged`; slides never move (`SlideOffset` hook), looped wrap rules, one gesture = at most one slide, interrupted transition wrapped up first, `RecyclingTemplate` Disabled; the carousel is cached as Image by default (React only, so the overlapping slides are never blitted). Slides MUST use `UseCache="Image"`. |
 | `SkiaDrawer` | ported | `Direction` (FromBottom/Top/Left/Right), `HeaderSize`, `AmplitudeSize`, `AutoClose`, `IsOpen` + `IsOpenChanged`, `StateTransitionComplete`, `Open()`/`Close()`; moves itself with `TranslationX/Y` like C#, so it must be edge-aligned by the parent (`VerticalOptions="End"` for FromBottom); snap points `[open, hidden]` rebuilt on size change; gestures ported (children first, then vertical/horizontal drag, lock-bounce at the open edge, velocity clamp 3000, touches outside the box ignored / `AutoClose`). Not ported: `IsOpenCommand`, hover, the C# +1 px header quirk. |
@@ -107,8 +107,9 @@ DrawnUi name and semantics; nothing here is a redesign, only an omission.
 | `SkiaProgress` / `SkiaSlider` | ported (painted, not composed) | `Value`/`Min`/`Max`, `TrackColor`/`ProgressColor`; slider `Min`/`Max`/`Step`/`Start`/`End`/`EnableRange`/`RangeMin`/`SliderHeight`/`ThumbColor`/`TrackColor`/`TrackSelectedColor`/`ClickOnTrailEnabled`/`StartChanged`/`EndChanged`, `StartThumbX`/`EndThumbX`, the C# position<->value math (`SliderHeight` = thumb box, `Step` rounding, `RangeMin` clamps), drag + click-on-trail + per-style looks (track heights, thumb sizes, palettes, Material3 gap + stop dot). Track/trail/thumbs are painted directly instead of child shapes (`SliderTrail`/`SliderThumb` not exposed). Not ported: `Orientation` Vertical, `Invert`, `ValueStringFormat`/`MinMaxStringFormat` + `StartDesc`/`EndDesc`, `IgnoreWrongDirection`, `AvailableWidthAdjustment`, `Trail*Offset`, `Cupertino*` sizing props, hover. |
 | `SkiaButton.ControlStyle` | ported | Cupertino / Material / Material3 / Windows accent, corner radius, font size/weight and minimum content size from the C# style builders, applied only when the user left `BackgroundColor`/`CornerRadius`(8)/`FontSize`(15)/`MinimumWidthRequest`/`MinimumHeightRequest` unset; default look is now the C# Crimson accent. `SetDefaultMinimumContentSize` is mirrored for BOTH axes (every C# style passes width 100, heights 41/36/40/40/32) and for the default `Unset` style too, skipped on a `Fill` axis or when a `WidthRequest`/`HeightRequest` is set, so short captions clamp to 100pt as in C#; the C# value adds `Margins` because it compares against a margin-inclusive size, here Measure applies it margin-exclusive and adds the margin after. Not ported: `Background` brushes, pressed-state shadow changes. |
 | `SkiaButton.FontFamilyFallback` | React extension | Pass-through to the inner label so icon-glyph buttons render with `AddSymbols()` faces. |
-| Accessibility (`ISkiaAccessibilityNode` + `SkiaAccessibilityManager` + Blazor ARIA overlay) | ported | `AccessibilityRole/Label/Hint/CanInteract/IsPressed/Live`, `Aria` constants, `IsAccessibilityElement`, `GetAccessibilityPixelRect`, `NotifyAccessibility`, `OnAccessibilityActivated` (synthetic Tapped), `OnAccessibilityFocused`, snapshot rate-limited by `MinUpdateIntervalMs`, top-left reading order, `SkiaButton` hides its inner label. Extensions: per-class `DefaultAccessibilityRole`, label/interaction defaults derived from text / `Tapped`, `pointer-events:none` overlay, detached/off-canvas nodes pruned at rebuild (no explicit unregister on removal). Not ported: `WithAccessibility*` fluent helpers, `FocusChanged` event consumers, UIA/AT-SPI (browser only), `aria-level` for headings. |
+| Accessibility (`ISkiaAccessibilityNode` + `SkiaAccessibilityManager` + Blazor ARIA overlay) | ported | `AccessibilityRole/Label/Hint/CanInteract/IsPressed/Live`, `Aria` constants, `IsAccessibilityElement`, `GetAccessibilityPixelRect`, `NotifyAccessibility`, `OnAccessibilityActivated` (synthetic Tapped), `OnAccessibilityFocused`, snapshot rate-limited by `MinUpdateIntervalMs`, reading order by rows (tops within half the smaller height form one row, read left to right), `AccessibilityCanInteract` only while a tap could reach the control (`CanReceiveGesture`: the control and its ancestors visible, none `InputTransparent`, no ancestor `LockChildrenGestures` holding the gesture, `AcceptsInput`, false for a disabled `SkiaButton`), `SkiaButton` hides its inner label. Extensions: per-class `DefaultAccessibilityRole`, label/interaction defaults derived from text / `Tapped`, `pointer-events:none` overlay, detached/off-canvas nodes pruned at rebuild (no explicit unregister on removal). Not ported: `WithAccessibility*` fluent helpers, `FocusChanged` event consumers, UIA/AT-SPI (browser only), `aria-level` for headings. |
 | Static HTML for crawlers (`drawnui-react/vite` `drawnUiStatic()`, React extension) | ported | Build-time only: after `vite build` the plugin serves the build, opens it in headless Chrome (`playwright-core`, optional peer), reads the accessibility snapshot of the root page and of every page a root button opens (or `routes`), and writes visible semantic HTML (heading → heading, button → `<a href="#/route">`, text → paragraph, other controls → list items; `img` and `presentation` dropped) after the mount element or at `<!-- drawnui-static -->`, with `DEFAULT_STATIC_STYLE` (`render.style` to override / disable). Runtime: the first `<Canvas>` mount removes every `[data-drawnui-static]` element right after its engine drew frame 1 (`removeStaticContent`, one querySelectorAll, nothing in the frame loop). Not in DrawnUi.Net (Blazor sites hand-write static SEO content, see the drawnui-blazor notes). Not done: per-route documents (pages live in the hash, one URL), `<title>` / meta per page, sitemap entries. |
+| Versioned public files (`drawnui-react/vite` `drawnUiAssetStamps()` + `Super.ResolveAssetUrl`, React extension) | ported | Build-time plugin: hashes every file of the public folder and writes the map into index.html as `globalThis.DrawnUiAssetStamps`, stamps the page's own `href` / `src` links to public files. Every engine loader (images and sprites through `SkiaImageManager`, fonts in `BuildAsync`, `SkiaSvg`, `SkiaGif`, `SkiaLottie`, shader sources) fetches through `Super.ResolveAssetUrl`, which appends `?v=<hash>` (`&v=` after an existing query) to a listed file; caches stay keyed by the source. Dev server untouched. Replaceable by the app. No C# counterpart. |
 | React context bridging across the `<Canvas>` boundary | skipped | Contexts from the DOM tree are not visible inside the drawn tree. |
 | Refs to engine controls from JSX | skipped | `getPublicInstance` returns the control, `ref` not wired/typed. |
 | Fluent code-behind API (`.Assign`, `.OnTapped`, `.ObserveProperty`) | skipped | Engine classes are plain TS classes; React is the composition layer. |

package/dist/controls/GridStructure.d.ts

@@ -16,6 +16,8 @@ export declare class DefinitionInfo {
 }
 /** Parses "*, 2*, Auto, 100" (or an array of the same values) into tracks. */
 export declare function ParseDefinitions(defs: string | GridLength[] | undefined): DefinitionInfo[];
+/** What the structure reads from a child: a control, or the slot of a recycled templated item (measured on a pooled view). */
+export type GridChild = Pick<SkiaControl, "IsVisible" | "Row" | "Column" | "RowSpan" | "ColumnSpan" | "HorizontalOptions" | "VerticalOptions" | "MinimumWidthRequest" | "MinimumHeightRequest" | "Margin" | "MeasuredSize" | "Measure">;
 /**
  * Port of DrawnUi SkiaGridStructure (itself adapted from the MAUI Grid manager). Works in POINTS: constraints come in
  * already reduced by the grid's padding, cells are returned relative to the padded box. Children are measured in
@@ -35,7 +37,7 @@ export declare class SkiaGridStructure {
     private readonly spans;
     private readonly explicitWidth;
     private readonly explicitHeight;
-    constructor(grid: SkiaLayout, widthConstraint: number, heightConstraint: number, scale: number);
+    constructor(grid: SkiaLayout, widthConstraint: number, heightConstraint: number, scale: number, children?: readonly GridChild[]);
     private InitializeTracks;
     private static CreateDefinitionIfMissing;
     private static ToLengthType;
@@ -46,7 +48,7 @@ export declare class SkiaGridStructure {
     LeftEdgeOfColumn(column: number): number;
     TopEdgeOfRow(row: number): number;
     /** Cell rectangle in points relative to the padded box (+ offsets). */
-    GetCellBoundsFor(view: SkiaControl, xOffset?: number, yOffset?: number): {
+    GetCellBoundsFor(view: GridChild, xOffset?: number, yOffset?: number): {
         Left: number;
         Top: number;
         Width: number;

package/dist/controls/GridStructure.js

@@ -88,7 +88,7 @@ export class SkiaGridStructure {
     spans = new Map();
     explicitWidth;
     explicitHeight;
-    constructor(grid, widthConstraint, heightConstraint, scale) {
+    constructor(grid, widthConstraint, heightConstraint, scale, children = grid.Views) {
         this.grid = grid;
         this.widthConstraint = widthConstraint;
         this.heightConstraint = heightConstraint;
@@ -99,7 +99,7 @@ export class SkiaGridStructure {
         this.explicitHeight = grid.HeightRequest;
         this.Rows = this.InitializeTracks(grid.RowDefinitions, grid.DefaultRowDefinition);
         this.Columns = this.InitializeTracks(grid.ColumnDefinitions, grid.DefaultColumnDefinition);
-        this.children = grid.Views.filter((v) => v.IsVisible);
+        this.children = children.filter((v) => v.IsVisible);
         this.InitializeCells();
         this.MeasureCells();
     }

package/dist/controls/SkiaButton.d.ts

@@ -41,6 +41,8 @@ export declare class SkiaButton extends SkiaLayout {
     static DefaultAccessibilityRole?: string;
     protected DefaultAccessibilityLabel(): string | undefined;
     protected DefaultAccessibilityCanInteract(): boolean;
+    /** A disabled button ignores taps, so keyboard navigation skips it too. */
+    protected AcceptsInput(): boolean;
     /** The button's own BackgroundColor/CornerRadius/Stroke are the frame's; the button itself paints nothing. */
     protected PaintBackground(): void;
     get UsingControlStyle(): ResolvedControlStyle;

package/dist/controls/SkiaButton.js

@@ -59,6 +59,8 @@ export class SkiaButton extends SkiaLayout {
     static DefaultAccessibilityRole;
     DefaultAccessibilityLabel() { return this.Text || undefined; }
     DefaultAccessibilityCanInteract() { return !this.IsDisabled; }
+    /** A disabled button ignores taps, so keyboard navigation skips it too. */
+    AcceptsInput() { return !this.IsDisabled; }
     /** The button's own BackgroundColor/CornerRadius/Stroke are the frame's; the button itself paints nothing. */
     PaintBackground() { }
     get UsingControlStyle() { return ResolveControlStyle(this.ControlStyle); }

package/dist/controls/SkiaCarousel.js

@@ -561,6 +561,10 @@ export class SkiaCarousel extends SnappingLayout {
                 if (!this.IsUserPanning) {
                     const movex = Math.abs(e.Distance.Total.X), movey = Math.abs(e.Distance.Total.Y);
                     const along = this.IsVertical ? movey : movex, across = this.IsVertical ? movex : movey;
+                    // a first move too short to tell the direction decides nothing yet (a 1 CSS px move at devicePixelRatio 2):
+                    // marking it wrong kept the whole drag dead until the next press (DrawnUi.Rust c6b22e3; C# decides on every move)
+                    if (along < scale * 2 && across < scale * 2)
+                        return consumedDefault;
                     if (along < scale * 2 || across > along) {
                         this.wrongDirection = true;
                         return consumedDefault;

package/dist/controls/SkiaEditor.d.ts

@@ -128,7 +128,14 @@ export declare class SkiaEditor extends SkiaShape {
     private LabelPoint;
     protected Paint(ctx: DrawingContext): void;
     ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
+    /** A text field is a Tab stop by default, like a native text box, with no Tapped handler needed. */
+    protected DefaultAccessibilityCanInteract(): boolean;
+    /** Keyboard navigation reached the field (Tab) or left it: take the caret and the input sink like a native text box, or release them. */
+    OnAccessibilityFocused(focused: boolean): void;
+    /** Enter / Space on the field while it has no caret start editing; while editing they are text. */
     OnAccessibilityActivated(): void;
+    /** While editing, arrows, Home / End and PageUp / PageDown belong to the text: they never move a surrounding group. */
+    OnAccessibilityKey(_key: string): boolean;
     protected DefaultAccessibilityLabel(): string | undefined;
     Submit(): void;
     private ExecuteSubmit;

package/dist/controls/SkiaEditor.js

@@ -508,7 +508,15 @@ export class SkiaEditor extends SkiaShape {
         }
         return this;
     }
-    OnAccessibilityActivated() { this.IsFocused = true; }
+    /** A text field is a Tab stop by default, like a native text box, with no Tapped handler needed. */
+    DefaultAccessibilityCanInteract() { return true; }
+    /** Keyboard navigation reached the field (Tab) or left it: take the caret and the input sink like a native text box, or release them. */
+    OnAccessibilityFocused(focused) { this.IsFocused = focused; }
+    /** Enter / Space on the field while it has no caret start editing; while editing they are text. */
+    OnAccessibilityActivated() { if (!this.IsFocused)
+        this.OnAccessibilityFocused(true); }
+    /** While editing, arrows, Home / End and PageUp / PageDown belong to the text: they never move a surrounding group. */
+    OnAccessibilityKey(_key) { return this.IsFocused; }
     DefaultAccessibilityLabel() { return this.text || this.placeholderText || undefined; }
     // ---- editing API (C# names) ----
     Submit() {

package/dist/controls/SkiaGif.js

@@ -158,7 +158,7 @@ export class SkiaGif extends AnimatedFramesRenderer {
     async LoadSource(source) {
         if (!source)
             return undefined;
-        const r = await fetch(source);
+        const r = await fetch(Super.ResolveAssetUrl(source));
         if (!r.ok)
             throw new Error(`${r.status} ${source}`);
         const animation = new GifAnimation();

package/dist/controls/SkiaLabelFps.d.ts

@@ -0,0 +1,16 @@
+import type { DrawingContext } from "../core/SkiaControl";
+import type { SKRect } from "../core/Types";
+import { SkiaLabel } from "./SkiaLabel";
+/**
+ * Mirrors DrawnUi SkiaLabelFps: a label showing the canvas FPS, drawn above its siblings, input-transparent, never
+ * re-laying out its parent. Divergence: C# sets Text on every draw, and each new value asks for another frame, so
+ * the counter keeps an idle canvas redrawing. Here the value changes only on frames that running animators already
+ * request (scroll inertia, transitions, Lottie, game loops): the counter never asks for a frame itself, and an idle
+ * canvas keeps the last value measured. Not ported: ForceRefresh, Format, MonoForDigits.
+ */
+export declare class SkiaLabelFps extends SkiaLabel {
+    constructor();
+    private arrangedIn?;
+    Arrange(destination: SKRect, widthRequest: number, heightRequest: number, scale: number): void;
+    Render(ctx: DrawingContext): void;
+}

package/dist/controls/SkiaLabelFps.js

@@ -0,0 +1,41 @@
+import { Aria } from "../core/Accessibility";
+import { SkiaLabel } from "./SkiaLabel";
+/**
+ * Mirrors DrawnUi SkiaLabelFps: a label showing the canvas FPS, drawn above its siblings, input-transparent, never
+ * re-laying out its parent. Divergence: C# sets Text on every draw, and each new value asks for another frame, so
+ * the counter keeps an idle canvas redrawing. Here the value changes only on frames that running animators already
+ * request (scroll inertia, transitions, Lottie, game loops): the counter never asks for a frame itself, and an idle
+ * canvas keeps the last value measured. Not ported: ForceRefresh, Format, MonoForDigits.
+ */
+export class SkiaLabelFps extends SkiaLabel {
+    constructor() {
+        super();
+        this.IsParentIndependent = true;
+        this.AccessibilityRole = Aria.RolePresentation;
+        this.Tag = "FPS";
+        this.Text = "FPS --";
+        this.MaxLines = 1;
+        this.BackgroundColor = "#000000";
+        this.TextColor = "#32CD32"; // LimeGreen
+        this.InputTransparent = true;
+        this.ZIndex = Number.MAX_SAFE_INTEGER;
+    }
+    arrangedIn;
+    Arrange(destination, widthRequest, heightRequest, scale) {
+        this.arrangedIn = destination;
+        super.Arrange(destination, widthRequest, heightRequest, scale);
+    }
+    Render(ctx) {
+        const view = this.Superview;
+        // the frame this asks for is requested anyway by the running animators
+        if (view && view.AnimatingControls.size > 0)
+            this.Text = `FPS ${view.FPS.toFixed(1).padStart(4, "0")}`;
+        // parent-independent: the parent does not re-lay out for it, so it re-measures itself here (as SkiaScroll does for its bars)
+        const d = this.arrangedIn;
+        if (this.NeedMeasure && d) {
+            this.Measure(d.Width, d.Height, ctx.Scale);
+            this.Arrange(d, this.WidthRequest, this.HeightRequest, ctx.Scale);
+        }
+        super.Render(ctx);
+    }
+}

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 —
- * MeasureAll (default) measures every item once, MeasureFirst measures one cell and assumes uniform size.
+ * 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). */
@@ -85,9 +90,16 @@ export declare class SkiaLayout extends SkiaControl {
     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;
@@ -142,8 +154,22 @@ export declare class SkiaLayout extends SkiaControl {
     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 —
- * MeasureAll (default) measures every item once, MeasureFirst measures one cell and assumes uniform size.
+ * 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). */
@@ -216,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)
@@ -232,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();
     }
@@ -435,7 +526,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";
@@ -600,6 +691,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;
@@ -646,12 +753,66 @@ 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);
     }
-    GetCompositeChildren() { return this.IsTemplatedList ? [] : this.GetOrderedSubviews(); }
+    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);
+    }
     /** Realizes, binds, arranges and draws only the cells intersecting the visible viewport (+ inflation). */
     PaintTemplated(ctx) {
         const items = this.itemsSource;

package/dist/controls/SkiaLottie.js

@@ -174,7 +174,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/SkiaScroll.d.ts

@@ -12,7 +12,7 @@ export interface ScaledPoint {
  * Mirrors DrawnUi SkiaScroll (plain content, no header/footer/refresh/virtualization yet).
  * Offsets are in POINTS and <= 0 while inside bounds (content moves up/left as you scroll).
  * Physics ported 1:1: deceleration fling (rate = 1 - FrictionScrolled/100) cut at the content edge,
- * rubber-band overscroll while dragging, spring bounce back on release, wheel = WheelLineSize per notch.
+ * rubber-band overscroll while dragging, spring bounce back on release, wheel = WheelLineSize per notch (an event moves by its share of a notch).
  */
 export declare class SkiaScroll extends SkiaControl {
     static WheelLineSize: number;
@@ -232,9 +232,10 @@ export declare class SkiaScroll extends SkiaControl {
     /** DrawnUi StartToFlingFrom + PrepareToFlingAfterInitialized: cut the curve so it stops exactly at the edge. */
     private StartToFlingFrom;
     /**
-     * One wheel notch = WheelLineSize points, hard-clamped, animated over AutoScrollingSpeedMs.
-     * Notches arriving while the previous one is still animating add onto its target, so a fast wheel
-     * spin travels N steps instead of restarting from the barely-moved current offset.
+     * One wheel notch = WheelLineSize points, hard-clamped, animated over AutoScrollingSpeedMs. An event moves by its share
+     * of a notch (Canvas.WheelDeltaPerNotch), so a touchpad's many small events scroll as far as the fingers moved (C#
+     * aaa871c3); an event under half a notch moves the content at once (no glide). Events arriving while the previous one is still animating add onto its target, so a fast wheel spin
+     * travels N steps instead of restarting from the barely-moved current offset.
      */
     private ApplyWheelScroll;
 }