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

package/dist/controls/SkiaScroll.js

@@ -9,7 +9,7 @@ import { RubberBandUtils, ScrollFlingAnimator, Spring, SpringWithVelocityAnimato
  * 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 class SkiaScroll extends SkiaControl {
     static WheelLineSize = 150;
@@ -901,6 +901,9 @@ export class SkiaScroll extends SkiaControl {
                 return child;
             if (!this.RespondsToGestures || this.Orientation === "Neither")
                 return child ?? consumedDefault; // Neither: not used, a parent scroll may take it
+            // a vertical scroll leaves horizontal events (the sideways part of a diagonal swipe) to whatever is around it
+            if (e.Wheel.IsHorizontal && this.Orientation === "Vertical")
+                return child ?? consumedDefault;
             if (!this.ApplyWheelScroll(e.Wheel.Delta))
                 return consumedDefault; // at its edge: not used, the page may take it
             e.Handled = true;
@@ -1041,15 +1044,20 @@ export class SkiaScroll extends SkiaControl {
         return true;
     }
     /**
-     * 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.
      */
     ApplyWheelScroll(delta) {
-        const step = SkiaScroll.WheelLineSize * -Math.sign(delta); // wheel down = content up = more negative offset
+        const perNotch = this.Superview?.WheelDeltaPerNotch ?? 0;
+        const lines = perNotch > 0 ? delta / perNotch : Math.sign(delta);
+        const step = -SkiaScroll.WheelLineSize * lines; // wheel down = content up = more negative offset
         const horizontal = this.Orientation === "Horizontal";
-        const running = horizontal ? this.animatorFlingX : this.animatorFlingY;
-        const base = running.IsRunning && running.Parameters ? running.Parameters.Destination : horizontal ? this.offsetX : this.offsetY;
+        // the target the running wheel / ScrollTo move lands on: Parameters.Destination is where its deceleration curve would
+        // end if it ran on, beyond that target, so continuing from it overshot more with every event (a touchpad swipe flew away)
+        const running = horizontal ? this.animatorFlingX : this.animatorFlingY, target = horizontal ? this.scrollToTargetX : this.scrollToTargetY;
+        const base = running.IsRunning && target !== null ? target : horizontal ? this.offsetX : this.offsetY;
         const b = this.ContentOffsetBounds;
         const min = horizontal ? b.Left : b.Top, max = horizontal ? b.Right : b.Bottom;
         if ((step < 0 && base <= min) || (step > 0 && base >= max))
@@ -1059,7 +1067,18 @@ export class SkiaScroll extends SkiaControl {
             x = base + step;
         else
             y = base + step;
-        this.ScrollTo(x, y, this.AutoScrollingSpeedMs / 1000, true);
+        // a notch glides over AutoScrollingSpeedMs; smaller events (a touchpad, a free-spinning or high-resolution wheel) come
+        // as a stream and move the content at once, as the browser scrolls a page: easing each one over 600 ms kept the
+        // content behind the fingers, a visible delay before it started to move
+        const glide = perNotch <= 0 || Math.abs(delta) >= perNotch / 2;
+        this.ScrollTo(x, y, glide ? this.AutoScrollingSpeedMs / 1000 : 0, true);
+        // a restarted glide starts at the event, not at its first frame: a fast trackpad swipe sends a notch-sized event
+        // before every frame, and a glide drawn at progress 0 on each of them left the content standing still until the
+        // events stopped, then it jumped (DrawnUi.Rust dfe36fe). Never before the last frame, at most one frame back.
+        if (glide && running.IsRunning) {
+            const event = performance.now() * 1_000_000;
+            running.StartFrameTimeNanos = running.LastFrameTimeNanos = Math.max(this.Superview?.FrameTimeNanos ?? 0, event - 16_666_667);
+        }
         return true;
     }
 }

package/dist/controls/SkiaSlider.d.ts

@@ -70,5 +70,13 @@ export declare class SkiaSlider extends SkiaControl {
     protected Paint(ctx: DrawingContext): void;
     ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
     protected DefaultAccessibilityCanInteract(): boolean;
+    /** Enter / Space do nothing: the base taps the center, which would jump the value to the middle. */
+    OnAccessibilityActivated(): void;
+    /**
+     * Keyboard adjustment while the slider holds keyboard focus (C# SkiaSlider.OnAccessibilityKey): Right / Up increase and
+     * Left / Down decrease by Step (a hundredth of the range when Step is 0), PageUp / PageDown move a tenth of the range,
+     * Home / End go to Min / Max. A ranged slider moves its End thumb, which stops at Start.
+     */
+    OnAccessibilityKey(key: string): boolean;
     protected DefaultAccessibilityLabel(): string | undefined;
 }

package/dist/controls/SkiaSlider.js

@@ -239,5 +239,44 @@ export class SkiaSlider extends SkiaControl {
         return super.ProcessGestures(args, apply);
     }
     DefaultAccessibilityCanInteract() { return this.RespondsToGestures; }
+    /** Enter / Space do nothing: the base taps the center, which would jump the value to the middle. */
+    OnAccessibilityActivated() { }
+    /**
+     * Keyboard adjustment while the slider holds keyboard focus (C# SkiaSlider.OnAccessibilityKey): Right / Up increase and
+     * Left / Down decrease by Step (a hundredth of the range when Step is 0), PageUp / PageDown move a tenth of the range,
+     * Home / End go to Min / Max. A ranged slider moves its End thumb, which stops at Start.
+     */
+    OnAccessibilityKey(key) {
+        if (!this.RespondsToGestures)
+            return false;
+        const range = this.Max - this.Min, small = this.Step > 0 ? this.Step : range / 100, large = Math.max(small, range / 10);
+        const low = this.EnableRange ? this.Start : this.Min;
+        let value;
+        switch (key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                value = this.End + small;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                value = this.End - small;
+                break;
+            case "PageUp":
+                value = this.End + large;
+                break;
+            case "PageDown":
+                value = this.End - large;
+                break;
+            case "Home":
+                value = low;
+                break;
+            case "End":
+                value = this.Max;
+                break;
+            default: return false;
+        }
+        this.End = Math.min(this.Max, Math.max(low, value));
+        return true;
+    }
     DefaultAccessibilityLabel() { return this.EnableRange ? `${this.start} – ${this.end}` : `${this.end}`; }
 }

package/dist/controls/SkiaSvg.js

@@ -42,7 +42,7 @@ export class SkiaSvg extends SkiaControl {
         }
         const generation = ++this.loadGeneration;
         this.IsLoading = true;
-        fetch(value)
+        fetch(Super.ResolveAssetUrl(value))
             .then((r) => { if (!r.ok)
             throw new Error(`DrawnUi: ${r.status} loading svg '${value}'`); return r.text(); })
             .then((text) => { if (generation === this.loadGeneration)

package/dist/core/Accessibility.d.ts

@@ -1,3 +1,4 @@
+import type { InputKey } from "./KeyboardManager";
 import type { SkiaControl } from "./SkiaControl";
 import { SKRect } from "./Types";
 /** ARIA role constants (DrawnUi.Models.Aria) for `AccessibilityRole`. */
@@ -38,10 +39,19 @@ export declare const Aria: {
     readonly RoleRegion: "region";
     readonly RoleNavigation: "navigation";
     readonly RoleMain: "main";
+    readonly RoleGrid: "grid";
+    readonly RoleToolbar: "toolbar";
+    readonly RoleRadioGroup: "radiogroup";
+    readonly RoleMenuBar: "menubar";
     /** Removes the control from the accessibility tree even when a default role would apply (inner label of a button). */
     readonly RolePresentation: "presentation";
     readonly LivePolite: "polite";
     readonly LiveAssertive: "assertive";
+    /**
+     * Container roles whose items the arrow keys walk (C# Aria.IsCompositeRole): a layout with one of them is one Tab stop,
+     * its current item, and the arrow keys move between its items.
+     */
+    readonly IsCompositeRole: (role?: string) => boolean;
 };
 /** One laid-out text line exposed for native selection (AccessibilityTextSelectable): CSS px relative to the node. */
 export interface AccessibilityTextLine {
@@ -81,6 +91,7 @@ export declare class SkiaAccessibilityManager {
     private pending;
     private readonly changed;
     private readonly liveUpdated;
+    private readonly keyboardFocusRequested;
     /** Minimum milliseconds between snapshot rebuilds. */
     MinUpdateIntervalMs: number;
     Snapshot: AccessibilityNode[];
@@ -89,7 +100,54 @@ export declare class SkiaAccessibilityManager {
     OnChanged(cb: () => void): () => void;
     /** Fired immediately (bypassing the rate limit) when a live-region node's value changes. */
     OnLiveRegionUpdated(cb: (node: SkiaControl) => void): () => void;
+    /**
+     * Keyboard focus moved by the manager itself (arrow keys in a group): the overlay moves DOM focus to that node's
+     * element (C# KeyboardFocusRequested). Returns the unsubscribe function.
+     */
+    OnKeyboardFocusRequested(cb: (node: SkiaControl) => void): () => void;
     NotifyFocused(node?: SkiaControl): void;
+    /**
+     * Enter / Space from keyboard navigation or a screen reader: activates the node only while a tap could reach it
+     * (AccessibilityCanInteract), the rule every head applies.
+     */
+    static Activate(node?: SkiaControl): boolean;
+    /**
+     * Arrow keys, Home / End, PageUp / PageDown for the node in keyboard focus: the control gets them first, only while a
+     * pan could reach it (a slider steps its value); keys it does not use move keyboard focus between the items of the
+     * group around it (MoveInGroup). True when the key was used.
+     */
+    static Key(node: SkiaControl | undefined, key: InputKey): boolean;
+    /** Last focused node of each group: where Tab enters the group. */
+    private readonly groupFocus;
+    private groupRequest?;
+    /**
+     * The arrow-key group around `control`: its nearest ancestor with a composite role (Aria.IsCompositeRole, e.g.
+     * Aria.RoleList on a SkiaStack), and the item of that group holding the control (one of its children, a cell).
+     */
+    static TryFindGroup(control: SkiaControl): {
+        Group: SkiaControl;
+        Item: SkiaControl;
+    } | undefined;
+    /** Remembers where keyboard focus is inside its group, so the next Tab into the group lands there. */
+    private NoteFocus;
+    /**
+     * Whether Tab / Shift+Tab stop on this node. A group of items is one Tab stop, like a native list: its current item
+     * (the one keyboard focus last had there, else the group's first usable node) plus the controls inside that same
+     * item; the arrow keys move between items. Every node outside a group is a stop.
+     */
+    IsTabStop(node: SkiaControl): boolean;
+    /**
+     * Moves keyboard focus between the items of the group around `focused`, by item index like a native list: Down / Up in
+     * a Column, Right / Left in a Row, all four in a Wrap, a Grid or a Split layout (Up / Down by one row), Home / End to the
+     * first / last item, PageDown / PageUp by one viewport of the scroll around it. No wrap at the ends. The target is the
+     * item itself when it is an interactive node, else its first interactive node; items the pointer cannot use are
+     * skipped. An item not realized (recycled cells) is scrolled in with ScrollToIndex when the group is the scroll's
+     * content, and focused once drawn. True when the key belongs to the group.
+     */
+    MoveInGroup(focused: SkiaControl, key: InputKey): boolean;
+    /** Frame end: focus the requested item once it is drawn, skipping items that cannot take input. */
+    private ProcessGroupFocus;
+    private FocusFromKeyboard;
     Register(node: SkiaControl): void;
     NotifyUpdated(node: SkiaControl): void;
     ForceRebuildOnNextFrame(): void;
@@ -100,5 +158,6 @@ export declare class SkiaAccessibilityManager {
      * per MinUpdateIntervalMs otherwise (keeps rects in sync with scrolling); notifies only when the snapshot differs.
      */
     OnFrameEnd(scale: number, canvasWidthPx: number, canvasHeightPx: number, requestFrame: () => void): void;
+    private Rebuild;
     private static Same;
 }

package/dist/core/Accessibility.js

@@ -12,11 +12,23 @@ export const Aria = {
     RoleSeparator: "separator", RoleProgressBar: "progressbar", RoleTooltip: "tooltip", RoleDialog: "dialog",
     RoleAlertDialog: "alertdialog", RoleStatus: "status", RoleAlert: "alert", RoleGroup: "group", RoleRegion: "region",
     RoleNavigation: "navigation", RoleMain: "main",
+    // containers of items: with one of these roles a layout is an arrow-key group (IsCompositeRole)
+    RoleGrid: "grid", RoleToolbar: "toolbar", RoleRadioGroup: "radiogroup", RoleMenuBar: "menubar",
     /** Removes the control from the accessibility tree even when a default role would apply (inner label of a button). */
     RolePresentation: "presentation",
     // live regions
     LivePolite: "polite", LiveAssertive: "assertive",
+    /**
+     * Container roles whose items the arrow keys walk (C# Aria.IsCompositeRole): a layout with one of them is one Tab stop,
+     * its current item, and the arrow keys move between its items.
+     */
+    IsCompositeRole(role) {
+        return role === "list" || role === "listbox" || role === "grid" || role === "toolbar" || role === "radiogroup"
+            || role === "tablist" || role === "menu" || role === "menubar";
+    },
 };
+const asLayout = (c) => ("ChildrenFactory" in c && "Split" in c ? c : undefined);
+const asScroll = (c) => ("ScrollToIndex" in c && "ViewportOffsetY" in c ? c : undefined);
 /**
  * Mirrors DrawnUi SkiaAccessibilityManager: registry of accessible controls + a rate-limited snapshot
  * (at most one rebuild per MinUpdateIntervalMs, taken at frame end) that the DOM overlay renders.
@@ -30,6 +42,7 @@ export class SkiaAccessibilityManager {
     pending = 0;
     changed = new Set();
     liveUpdated = new Set();
+    keyboardFocusRequested = new Set();
     /** Minimum milliseconds between snapshot rebuilds. */
     MinUpdateIntervalMs = 1000;
     Snapshot = [];
@@ -38,8 +51,191 @@ export class SkiaAccessibilityManager {
     OnChanged(cb) { this.changed.add(cb); return () => this.changed.delete(cb); }
     /** Fired immediately (bypassing the rate limit) when a live-region node's value changes. */
     OnLiveRegionUpdated(cb) { this.liveUpdated.add(cb); return () => this.liveUpdated.delete(cb); }
-    NotifyFocused(node) { if (this.FocusedNode !== node)
-        this.FocusedNode = node; }
+    /**
+     * Keyboard focus moved by the manager itself (arrow keys in a group): the overlay moves DOM focus to that node's
+     * element (C# KeyboardFocusRequested). Returns the unsubscribe function.
+     */
+    OnKeyboardFocusRequested(cb) { this.keyboardFocusRequested.add(cb); return () => this.keyboardFocusRequested.delete(cb); }
+    NotifyFocused(node) {
+        if (this.FocusedNode === node)
+            return;
+        this.NoteFocus(node);
+        this.FocusedNode = node;
+    }
+    /**
+     * Enter / Space from keyboard navigation or a screen reader: activates the node only while a tap could reach it
+     * (AccessibilityCanInteract), the rule every head applies.
+     */
+    static Activate(node) {
+        if (!node || !node.AccessibilityCanInteract)
+            return false;
+        node.OnAccessibilityActivated();
+        return true;
+    }
+    /**
+     * Arrow keys, Home / End, PageUp / PageDown for the node in keyboard focus: the control gets them first, only while a
+     * pan could reach it (a slider steps its value); keys it does not use move keyboard focus between the items of the
+     * group around it (MoveInGroup). True when the key was used.
+     */
+    static Key(node, key) {
+        if (!node)
+            return false;
+        if (node.CanReceiveGesture("Panning") && node.OnAccessibilityKey(key))
+            return true;
+        return node.Superview?.AccessibilityManager.MoveInGroup(node, key) ?? false;
+    }
+    // ---- arrow-key groups (C# SkiaAccessibilityManager, "Arrow-key groups") ----
+    /** Last focused node of each group: where Tab enters the group. */
+    groupFocus = new WeakMap();
+    groupRequest;
+    /**
+     * The arrow-key group around `control`: its nearest ancestor with a composite role (Aria.IsCompositeRole, e.g.
+     * Aria.RoleList on a SkiaStack), and the item of that group holding the control (one of its children, a cell).
+     */
+    static TryFindGroup(control) {
+        for (let child = control, parent = control.Parent; parent; child = parent, parent = parent.Parent) {
+            if (Aria.IsCompositeRole(parent.AccessibilityRole))
+                return { Group: parent, Item: child };
+        }
+        return undefined;
+    }
+    /** Remembers where keyboard focus is inside its group, so the next Tab into the group lands there. */
+    NoteFocus(node) {
+        const found = node && SkiaAccessibilityManager.TryFindGroup(node);
+        if (found)
+            this.groupFocus.set(found.Group, node);
+    }
+    /**
+     * Whether Tab / Shift+Tab stop on this node. A group of items is one Tab stop, like a native list: its current item
+     * (the one keyboard focus last had there, else the group's first usable node) plus the controls inside that same
+     * item; the arrow keys move between items. Every node outside a group is a stop.
+     */
+    IsTabStop(node) {
+        const found = SkiaAccessibilityManager.TryFindGroup(node);
+        if (!found)
+            return true;
+        let stopItem;
+        const remembered = this.groupFocus.get(found.Group);
+        const current = remembered && !remembered.IsDisposed && remembered.AccessibilityCanInteract && this.Snapshot.some((n) => n.Source === remembered)
+            ? SkiaAccessibilityManager.TryFindGroup(remembered) : undefined;
+        if (current && current.Group === found.Group)
+            stopItem = current.Item;
+        else {
+            for (const n of this.Snapshot) {
+                if (!n.Source.AccessibilityCanInteract)
+                    continue;
+                const g = SkiaAccessibilityManager.TryFindGroup(n.Source);
+                if (g && g.Group === found.Group) {
+                    stopItem = g.Item;
+                    break;
+                }
+            }
+        }
+        return !stopItem || stopItem === found.Item;
+    }
+    /**
+     * Moves keyboard focus between the items of the group around `focused`, by item index like a native list: Down / Up in
+     * a Column, Right / Left in a Row, all four in a Wrap, a Grid or a Split layout (Up / Down by one row), Home / End to the
+     * first / last item, PageDown / PageUp by one viewport of the scroll around it. No wrap at the ends. The target is the
+     * item itself when it is an interactive node, else its first interactive node; items the pointer cannot use are
+     * skipped. An item not realized (recycled cells) is scrolled in with ScrollToIndex when the group is the scroll's
+     * content, and focused once drawn. True when the key belongs to the group.
+     */
+    MoveInGroup(focused, key) {
+        const found = SkiaAccessibilityManager.TryFindGroup(focused);
+        if (!found)
+            return false;
+        const { Group: group, Item: item } = found;
+        const scroll = FindScroll(group), axis = AxisOf(group), count = ItemCount(group);
+        const current = this.groupRequest?.Group === group ? this.groupRequest.Index : IndexOf(group, item);
+        if (current < 0 || count < 1)
+            return false;
+        const row = axis === "Both" ? RowLength(group, item) : 1;
+        const vertical = axis !== "Horizontal";
+        const page = () => PageSize(scroll, item, vertical) * row;
+        let target, step;
+        if ((key === "ArrowDown" && axis === "Vertical") || (key === "ArrowRight" && axis !== "Vertical")) {
+            target = current + 1;
+            step = 1;
+        }
+        else if ((key === "ArrowUp" && axis === "Vertical") || (key === "ArrowLeft" && axis !== "Vertical")) {
+            target = current - 1;
+            step = -1;
+        }
+        else if (key === "ArrowDown" && axis === "Both") {
+            target = Math.min(count - 1, current + row);
+            step = 1;
+        }
+        else if (key === "ArrowUp" && axis === "Both") {
+            target = Math.max(0, current - row);
+            step = -1;
+        }
+        else if (key === "Home") {
+            target = 0;
+            step = 1;
+        }
+        else if (key === "End") {
+            target = count - 1;
+            step = -1;
+        }
+        else if (key === "PageDown" && scroll) {
+            target = Math.min(count - 1, current + page());
+            step = 1;
+        }
+        else if (key === "PageUp" && scroll) {
+            target = Math.max(0, current - page());
+            step = -1;
+        }
+        else
+            return false;
+        if (target < 0 || target >= count || target === current)
+            return true; // at the end of the group nothing happens, the key still belongs to it
+        this.groupRequest = { Group: group, Scroll: scroll, Index: target, Step: step, Deadline: performance.now() + 3000, ScrollIssued: false };
+        group.Superview?.Update(); // resolved at the end of the next frame, together with the snapshot
+        return true;
+    }
+    /** Frame end: focus the requested item once it is drawn, skipping items that cannot take input. */
+    ProcessGroupFocus(scale, w, h, requestFrame) {
+        const request = this.groupRequest;
+        if (!request)
+            return;
+        const cell = ItemAt(request.Group, request.Index);
+        if (cell && IsDrawn(cell)) {
+            const node = FindTarget(cell);
+            if (node) {
+                this.groupRequest = undefined;
+                this.FocusFromKeyboard(node, scale, w, h);
+                return;
+            }
+            // this item cannot take input: go on to the next one in the same direction
+            request.Index += request.Step;
+            if (request.Index < 0 || request.Index >= ItemCount(request.Group)) {
+                this.groupRequest = undefined;
+                return;
+            }
+            request.Deadline = performance.now() + 3000;
+            request.ScrollIssued = false;
+        }
+        else if (performance.now() > request.Deadline || request.Group.IsDisposed) {
+            this.groupRequest = undefined;
+            return;
+        }
+        if (!request.ScrollIssued) {
+            request.ScrollIssued = true;
+            const next = ItemAt(request.Group, request.Index);
+            if ((!next || !IsDrawn(next)) && request.Scroll && request.Scroll.Content === request.Group) {
+                request.Scroll.ScrollToIndex(request.Index, true, request.Step > 0 ? "End" : "Start");
+            }
+        }
+        requestFrame(); // keep frames coming until the item is drawn
+    }
+    FocusFromKeyboard(node, scale, w, h) {
+        this.Rebuild(scale, w, h); // the overlay looks the node up in the snapshot: make sure it is there now
+        this.NoteFocus(node);
+        this.FocusedNode = node;
+        for (const cb of this.keyboardFocusRequested)
+            cb(node);
+    }
     Register(node) { this.nodes.add(node); this.dirty = true; }
     NotifyUpdated(node) {
         if (!this.nodes.has(node))
@@ -70,6 +266,7 @@ export class SkiaAccessibilityManager {
      * per MinUpdateIntervalMs otherwise (keeps rects in sync with scrolling); notifies only when the snapshot differs.
      */
     OnFrameEnd(scale, canvasWidthPx, canvasHeightPx, requestFrame) {
+        this.ProcessGroupFocus(scale, canvasWidthPx, canvasHeightPx, requestFrame);
         if (this.nodes.size === 0 && this.Snapshot.length === 0)
             return;
         const now = performance.now();
@@ -80,8 +277,11 @@ export class SkiaAccessibilityManager {
                 this.pending = window.setTimeout(() => { this.pending = 0; requestFrame(); }, wait);
             return;
         }
+        this.Rebuild(scale, canvasWidthPx, canvasHeightPx);
+    }
+    Rebuild(scale, canvasWidthPx, canvasHeightPx) {
         this.dirty = false;
-        this.lastRebuild = now;
+        this.lastRebuild = performance.now();
         const list = [];
         for (const n of this.nodes) {
             if (!n.Superview) {
@@ -108,6 +308,21 @@ export class SkiaAccessibilityManager {
             });
         }
         list.sort((a, b) => a.Rect.Top - b.Rect.Top || a.Rect.Left - b.Rect.Left);
+        // reading order: nodes whose tops are within half the smaller height form one row, read left to right, so a row of
+        // vertically centered controls of different heights keeps its visual order (C# RectComparer + LeftComparer)
+        for (let start = 0, i = 1; i <= list.length; i++) {
+            if (i < list.length) {
+                const first = list[start].Rect, next = list[i].Rect;
+                if (next.Top - first.Top < Math.min(first.Height, next.Height) / 2)
+                    continue;
+            }
+            if (i - start > 1) {
+                const row = list.slice(start, i).sort((a, b) => a.Rect.Left - b.Rect.Left);
+                for (let k = 0; k < row.length; k++)
+                    list[start + k] = row[k];
+            }
+            start = i;
+        }
         if (SkiaAccessibilityManager.Same(list, this.Snapshot))
             return;
         this.Snapshot = list;
@@ -138,6 +353,91 @@ export class SkiaAccessibilityManager {
         return true;
     }
 }
+// ---- group helpers (duck-typed layouts and scrolls) ----
+/** Children of a control (a layout's Views, a scroll's Content). */
+function ViewsOf(c) {
+    if ("Views" in c)
+        return c.Views;
+    const content = c.Content;
+    return content ? [content] : [];
+}
+function FindScroll(group) {
+    for (let p = group.Parent; p; p = p.Parent) {
+        const s = asScroll(p);
+        if (s)
+            return s;
+    }
+    return undefined;
+}
+/** Down / Up in a Column, Right / Left in a Row, all four in a Wrap, a Grid or a Split layout. */
+function AxisOf(group) {
+    const l = asLayout(group);
+    if (!l)
+        return "Vertical";
+    if (l.Type === "Column")
+        return l.Split <= 1 ? "Vertical" : "Both";
+    if (l.Type === "Row")
+        return "Horizontal";
+    if (l.Type === "Absolute")
+        return "Vertical";
+    return "Both";
+}
+/** Items per row of a 2D group: Split when set, else the items sharing the row of `item`. */
+function RowLength(group, item) {
+    const l = asLayout(group);
+    if (l && l.Split > 1)
+        return l.Split;
+    const top = item.GetAccessibilityPixelRect();
+    if (top.Height <= 0)
+        return 1;
+    const mid = (top.Top + top.Bottom) / 2;
+    let count = 0;
+    for (const child of ViewsOf(group)) {
+        const r = child.GetAccessibilityPixelRect();
+        if (r.Height > 0 && Math.abs((r.Top + r.Bottom) / 2 - mid) < top.Height / 2)
+            count++;
+    }
+    return Math.max(1, count);
+}
+function ItemCount(group) {
+    const l = asLayout(group);
+    return l?.IsTemplated ? l.ItemsSource?.length ?? 0 : ViewsOf(group).length;
+}
+function IndexOf(group, item) {
+    const l = asLayout(group);
+    return l?.IsTemplated ? item.ContextIndex : ViewsOf(group).indexOf(item);
+}
+/** The view of an item: the realized cell of a templated layout (none when its cell is not in use), else the child. */
+function ItemAt(group, index) {
+    const l = asLayout(group);
+    if (l?.IsTemplated) {
+        const v = l.ChildrenFactory.GetViewForIndex(index);
+        return v && v.ContextIndex === index ? v : undefined;
+    }
+    return index >= 0 && index < ViewsOf(group).length ? ViewsOf(group)[index] : undefined;
+}
+/** Arranged on the canvas: realized and laid out (a templated layout keeps only the cells it draws in use). */
+function IsDrawn(control) {
+    const r = control.GetAccessibilityPixelRect();
+    return !!control.Superview && r.Width > 0 && r.Height > 0;
+}
+/** Items per viewport of the scroll around the group. */
+function PageSize(scroll, item, vertical) {
+    const v = scroll.DrawingRect, size = item.MeasuredSize.Pixels;
+    const viewport = vertical ? v.Height : v.Width, s = vertical ? size.Height : size.Width;
+    return s > 0 ? Math.max(1, Math.floor(viewport / s)) : 1;
+}
+/** The item itself when it is an interactive node, else its first interactive node in tree order. */
+function FindTarget(item) {
+    if (item.IsAccessibilityElement && item.AccessibilityCanInteract)
+        return item;
+    for (const child of ViewsOf(item)) {
+        const found = FindTarget(child);
+        if (found)
+            return found;
+    }
+    return undefined;
+}
 /** True when any ancestor is hidden (IsVisible false or Opacity 0): the subtree is not drawn, so it gets no nodes. */
 function AccessibilityManagerHiddenByAncestor(control) {
     let p = control.Parent;

package/dist/core/Canvas.d.ts

@@ -77,6 +77,14 @@ export declare class Canvas {
     protected ExecuteAnimators(frameTimeNanos: number): number;
     /** Frames drawn so far (SkiaBackdrop uses it to refresh once after a cached record). */
     FrameIndex: number;
+    /**
+     * DrawnView.WheelDeltaPerNotch: the Wheel.Delta one mouse-wheel notch produces, 100 CSS pixels in Chrome and Edge. A
+     * scroll moves by the event's share of a notch, so a touchpad, which sends many small events, scrolls as far as the
+     * fingers moved. 0 = units unknown: every event scrolls one line.
+     */
+    WheelDeltaPerNotch: number;
+    /** Vsync time of the last frame the animators ran on (nanoseconds, the performance.now() timeline). */
+    FrameTimeNanos: number;
     /** On-screen surface (SkiaBackdrop snapshots it). */
     get Surface(): Surface | undefined;
     /**

package/dist/core/Canvas.js

@@ -140,6 +140,7 @@ export class Canvas {
         // (measured 12..23 ms between frames shown 16.7 ms apart), and a game loop moving by speed * delta then
         // jumps unevenly on screen.
         const frameTime = Number(document.timeline?.currentTime ?? started);
+        this.FrameTimeNanos = Math.round(frameTime * 1_000_000);
         const executed = this.ExecuteAnimators(Math.round(frameTime * 1_000_000));
         const canRender = this.CanRender;
         if (canRender && !this.WasRendered)
@@ -203,6 +204,14 @@ export class Canvas {
     }
     /** Frames drawn so far (SkiaBackdrop uses it to refresh once after a cached record). */
     FrameIndex = 0;
+    /**
+     * DrawnView.WheelDeltaPerNotch: the Wheel.Delta one mouse-wheel notch produces, 100 CSS pixels in Chrome and Edge. A
+     * scroll moves by the event's share of a notch, so a touchpad, which sends many small events, scrolls as far as the
+     * fingers moved. 0 = units unknown: every event scrolls one line.
+     */
+    WheelDeltaPerNotch = 100;
+    /** Vsync time of the last frame the animators ran on (nanoseconds, the performance.now() timeline). */
+    FrameTimeNanos = 0;
     /** On-screen surface (SkiaBackdrop snapshots it). */
     get Surface() { return this.surface; }
     /**
@@ -383,7 +392,11 @@ export class Canvas {
         args.Scale = this.RenderingScale;
         args.Location = new SKPoint((e.clientX - rect.left) * this.RenderingScale, (e.clientY - rect.top) * this.RenderingScale);
         args.StartingLocation = args.Location;
-        args.Wheel = { Delta: e.deltaY !== 0 ? e.deltaY : e.deltaX };
+        // lines and pages to pixels, then the dominant axis (the .NET browser heads, fc8980c1); a vertical scroll leaves
+        // horizontal events alone (C# ba03cb20)
+        const factor = e.deltaMode === 1 ? 40 : e.deltaMode === 2 ? 800 : 1;
+        const horizontal = Math.abs(e.deltaX) > Math.abs(e.deltaY);
+        args.Wheel = { Delta: (horizontal ? e.deltaX : e.deltaY) * factor, IsHorizontal: horizontal };
         if (this.gestures === "Lock") {
             e.preventDefault();
             this.OnGestureEvent(args, "Wheel");

package/dist/core/Gestures.d.ts

@@ -49,9 +49,13 @@ export declare class TouchActionEventArgs {
     Timestamp: number;
     /** ms since the previous event of the same pointer. */
     DeltaTimeMs: number;
-    /** Mouse wheel: Delta > 0 = wheel down (browser deltaY sign). */
+    /**
+     * Mouse wheel: Delta > 0 = wheel down / right (browser sign). IsHorizontal: the event is along the X axis (a tilting
+     * wheel, the sideways part of a two-finger touchpad swipe), as C# WheelEventArgs.IsHorizontal.
+     */
     Wheel: {
         Delta: number;
+        IsHorizontal?: boolean;
     };
     /**
      * AppoMobi TouchActionEventArgs.Handled: set by a control that actually used the event. The canvas prevents the