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

package/dist/core/Gestures.js

@@ -43,7 +43,10 @@ export class TouchActionEventArgs {
     Timestamp = performance.now();
     /** ms since the previous event of the same pointer. */
     DeltaTimeMs = 0;
-    /** 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: 0 };
     /**
      * AppoMobi TouchActionEventArgs.Handled: set by a control that actually used the event. The canvas prevents the

package/dist/core/SkiaControl.d.ts

@@ -3,6 +3,7 @@ import { type Color, type LayoutOptions, SKRect, ScaledSize, type SkiaCacheType,
 import { type AnimatorBase, type IOverlayEffect } from "./Animators";
 import { Easing } from "./Easing";
 import type { Canvas } from "./Canvas";
+import type { InputKey } from "./KeyboardManager";
 import { ContextMenuEventArgs, ControlTappedEventArgs, GestureEventProcessingInfo, type LockTouch, SKPoint, SkiaGesturesInfo, SkiaGesturesParameters } from "./Gestures";
 import { type CachedTexture, type IPostRendererEffect, type SkiaEffect } from "./SkiaEffect";
 /** Mirrors DrawnUi DrawingContext: ctx.Context.Canvas / Surface, ctx.Destination (pixels), ctx.Scale. */
@@ -180,7 +181,12 @@ export declare class SkiaControl {
     protected OnVisualEffectsChanged(): void;
     /** Post renderers that can render this frame (compiled shaders); an unready effect leaves the control drawn plainly. */
     private ActivePostRenderers;
-    /** C# CachedImage: the cached texture and the canvas rect it was rasterized over (Image caches only). */
+    /**
+     * C# CachedImage: the cached texture (Image caches only) and the canvas rect it covers NOW. Scrolled content is
+     * re-arranged here, not drawn through a translated canvas, so a cache recorded before its control moved is blitted
+     * at the control's current aligned rect (RenderContent) and its record-time Bounds are stale: an effect sampling it
+     * there (the slides of a SkiaShaderCarousel after the page scrolled) was off by the scroll amount.
+     */
     get CachedImage(): CachedTexture | undefined;
     /** Clip overlay effects to the control's shape (CreateClip). */
     ClipEffects: boolean;
@@ -251,7 +257,11 @@ export declare class SkiaControl {
     protected DefaultAccessibilityLabel(): string | undefined;
     get AccessibilityHint(): string | undefined;
     set AccessibilityHint(v: string | undefined);
-    /** Tab stop + activation; unset = true when the control handles Tapped. */
+    /**
+     * Whether keyboard navigation and assistive technology may focus and use this node: the explicit value, else the class
+     * default (true when the control handles Tapped), and in both cases only while a tap could reach the control
+     * (CanReceiveGesture), so Tab, Enter / Space and screen-reader activation never use a control the pointer cannot.
+     */
     get AccessibilityCanInteract(): boolean;
     set AccessibilityCanInteract(v: boolean);
     protected DefaultAccessibilityCanInteract(): boolean;
@@ -288,6 +298,21 @@ export declare class SkiaControl {
     OnAccessibilityActivated(): void;
     /** Overlay focus arrives on / leaves this node (inputs may activate their sink here). */
     OnAccessibilityFocused(_focused: boolean): void;
+    /**
+     * Keyboard navigation hands this control the keys it may use while it holds keyboard focus (ArrowLeft / Right / Up /
+     * Down, Home, End, PageUp, PageDown, DOM `event.code` names). Return true when the key was used; the default uses none,
+     * so the key moves focus inside the arrow-key group around the control.
+     */
+    OnAccessibilityKey(_key: InputKey): boolean;
+    /**
+     * Whether a pointer gesture of this kind would reach this control, by the rules the gesture dispatch applies: the
+     * control and every ancestor draw, none of them is InputTransparent, no ancestor keeps this gesture from its children
+     * (LockChildrenGestures, PassNone included) and the control accepts input (AcceptsInput). Opacity does not count, as
+     * for the pointer. Keyboard navigation uses it: Tapped for Tab and Enter / Space, Panning for the arrow keys.
+     */
+    CanReceiveGesture(gesture: SkiaGesturesParameters["Type"]): boolean;
+    /** False while the control ignores gestures itself, e.g. a disabled button. Default true. */
+    protected AcceptsInput(): boolean;
     NotifyAccessibilityFocused(focused: boolean): void;
     /** DrawnUi SmartMax: larger of two sizes, an infinite one loses. */
     protected static SmartMax(a: number, b: number): number;

package/dist/core/SkiaControl.js

@@ -235,10 +235,18 @@ export class SkiaControl {
             return [];
         return this.EffectPostRenderers.filter((e) => e.NeedApply);
     }
-    /** C# CachedImage: the cached texture and the canvas rect it was rasterized over (Image caches only). */
+    /**
+     * C# CachedImage: the cached texture (Image caches only) and the canvas rect it covers NOW. Scrolled content is
+     * re-arranged here, not drawn through a translated canvas, so a cache recorded before its control moved is blitted
+     * at the control's current aligned rect (RenderContent) and its record-time Bounds are stale: an effect sampling it
+     * there (the slides of a SkiaShaderCarousel after the page scrolled) was off by the scroll amount.
+     */
     get CachedImage() {
         const c = this.RenderObject;
-        return c?.Image ? { Image: c.Image, Bounds: c.Bounds } : undefined;
+        if (!c?.Image)
+            return undefined;
+        const r = this.AlignedCacheRect(c.Scale);
+        return { Image: c.Image, Bounds: SKRect.Create(r.Left, r.Top, c.Bounds.Width, c.Bounds.Height) };
     }
     /** Clip overlay effects to the control's shape (CreateClip). */
     ClipEffects = true;
@@ -417,8 +425,12 @@ export class SkiaControl {
         this.accessibilityHint = v;
         this.AccessibilityChanged();
     } }
-    /** Tab stop + activation; unset = true when the control handles Tapped. */
-    get AccessibilityCanInteract() { return this.accessibilityCanInteract ?? this.DefaultAccessibilityCanInteract(); }
+    /**
+     * Whether keyboard navigation and assistive technology may focus and use this node: the explicit value, else the class
+     * default (true when the control handles Tapped), and in both cases only while a tap could reach the control
+     * (CanReceiveGesture), so Tab, Enter / Space and screen-reader activation never use a control the pointer cannot.
+     */
+    get AccessibilityCanInteract() { return (this.accessibilityCanInteract ?? this.DefaultAccessibilityCanInteract()) && this.CanReceiveGesture("Tapped"); }
     set AccessibilityCanInteract(v) { if (this.accessibilityCanInteract !== v) {
         this.accessibilityCanInteract = v;
         this.AccessibilityChanged();
@@ -503,6 +515,28 @@ export class SkiaControl {
     }
     /** Overlay focus arrives on / leaves this node (inputs may activate their sink here). */
     OnAccessibilityFocused(_focused) { }
+    /**
+     * Keyboard navigation hands this control the keys it may use while it holds keyboard focus (ArrowLeft / Right / Up /
+     * Down, Home, End, PageUp, PageDown, DOM `event.code` names). Return true when the key was used; the default uses none,
+     * so the key moves focus inside the arrow-key group around the control.
+     */
+    OnAccessibilityKey(_key) { return false; }
+    /**
+     * Whether a pointer gesture of this kind would reach this control, by the rules the gesture dispatch applies: the
+     * control and every ancestor draw, none of them is InputTransparent, no ancestor keeps this gesture from its children
+     * (LockChildrenGestures, PassNone included) and the control accepts input (AcceptsInput). Opacity does not count, as
+     * for the pointer. Keyboard navigation uses it: Tapped for Tab and Enter / Space, Panning for the arrow keys.
+     */
+    CanReceiveGesture(gesture) {
+        if (!this.IsVisible || this.IsDisposed || this.InputTransparent || !this.AcceptsInput())
+            return false;
+        for (let p = this.Parent; p; p = p.Parent)
+            if (!p.IsVisible || p.IsDisposed || p.InputTransparent || p.CheckChildrenGesturesLocked(gesture))
+                return false;
+        return true;
+    }
+    /** False while the control ignores gestures itself, e.g. a disabled button. Default true. */
+    AcceptsInput() { return true; }
     NotifyAccessibilityFocused(focused) { this.Superview?.AccessibilityManager.NotifyFocused(focused ? this : undefined); }
     /** DrawnUi SmartMax: larger of two sizes, an infinite one loses. */
     static SmartMax(a, b) {

package/dist/core/SkiaEffect.d.ts

@@ -125,6 +125,10 @@ export declare class SkiaShaderEffect extends SkiaEffect implements IPostRendere
     protected ApplyShaderSource(): void;
     /** Snapshot of what the parent painted (C# CreateSnapshot): the surface the pixels are on, mapped through its origin. */
     protected CreateSnapshot(ctx: DrawingContext, destination: SKRect): CachedTexture | undefined;
+    /** Where the parent was when the texture was frozen (Once): the texture moves with it, as its cache does. */
+    private frozenAt?;
+    private ParentOrigin;
+    private FollowParent;
     /** C# GetPrimaryTexture: the parent's cache, a frozen snapshot (Once) or nothing (Never). */
     protected GetPrimaryTexture(_ctx: DrawingContext, _destination: SKRect): CachedTexture | undefined;
     /** Image → shader with the effect's sampling, translated so texel (0,0) = bounds top-left; cached per image. */

package/dist/core/SkiaEffect.js

@@ -2,7 +2,7 @@ import { SkiaValueAnimator } from "./Animators";
 import { Easing } from "./Easing";
 import { SkiaImageManager } from "./SkiaImageManager";
 import { Super } from "./Super";
-import { Thickness } from "./Types";
+import { SKRect, Thickness } from "./Types";
 /**
  * Mirrors DrawnUi SkiaEffect: something attached to a control through `VisualEffects`. `Update()` re-renders the
  * parent (C# invalidates the parent's cache and redraws), `GetEffectMargin` reports what it paints outside the box.
@@ -129,6 +129,7 @@ export class SkiaShaderEffect extends SkiaEffect {
             this.DisposeImage(this.frozen.Image);
         this.frozen = undefined;
         this.frozenOwned = false;
+        this.frozenAt = undefined;
     }
     DisposeImage(image) {
         const sv = this.Parent?.Superview;
@@ -158,6 +159,18 @@ export class SkiaShaderEffect extends SkiaEffect {
             return undefined;
         return { Image: image, Bounds: destination, Origin: { X: ox, Y: oy } };
     }
+    /** Where the parent was when the texture was frozen (Once): the texture moves with it, as its cache does. */
+    frozenAt;
+    ParentOrigin() { const r = this.Parent?.DrawingRect; return { X: r?.Left ?? 0, Y: r?.Top ?? 0 }; }
+    FollowParent(texture) {
+        if (!texture || !this.frozenAt)
+            return texture;
+        const now = this.ParentOrigin(), dx = now.X - this.frozenAt.X, dy = now.Y - this.frozenAt.Y;
+        if (dx === 0 && dy === 0)
+            return texture;
+        const b = texture.Bounds;
+        return { Image: texture.Image, Bounds: new SKRect(b.Left + dx, b.Top + dy, b.Right + dx, b.Bottom + dy), Origin: texture.Origin && { X: texture.Origin.X + dx, Y: texture.Origin.Y + dy } };
+    }
     /** C# GetPrimaryTexture: the parent's cache, a frozen snapshot (Once) or nothing (Never). */
     GetPrimaryTexture(_ctx, _destination) {
         switch (this.UseBackground) {
@@ -175,9 +188,10 @@ export class SkiaShaderEffect extends SkiaEffect {
                         this.frozen = snapshot;
                         this.frozenOwned = owned;
                         this.AquiredBackground = true;
+                        this.frozenAt = this.ParentOrigin();
                     }
                 }
-                return this.frozen;
+                return this.FollowParent(this.frozen);
             default:
                 return this.Parent?.CachedImage;
         }
@@ -228,7 +242,7 @@ export class SkiaShaderEffect extends SkiaEffect {
     static async FetchText(url) {
         let p = sourceCache.get(url);
         if (!p) {
-            p = fetch(url).then((r) => { if (!r.ok)
+            p = fetch(Super.ResolveAssetUrl(url)).then((r) => { if (!r.ok)
                 throw new Error(`${r.status} ${url}`); return r.text(); });
             sourceCache.set(url, p);
         }

package/dist/core/SkiaImageManager.js

@@ -39,7 +39,7 @@ export class SkiaImageManager {
         return inflight;
     }
     async Fetch(source, signal) {
-        const response = await fetch(source, signal ? { signal } : undefined);
+        const response = await fetch(Super.ResolveAssetUrl(source), signal ? { signal } : undefined);
         if (!response.ok)
             throw new Error(`DrawnUi: ${response.status} loading image '${source}'`);
         const image = Super.CK.MakeImageFromEncoded(await response.arrayBuffer());

package/dist/core/Super.d.ts

@@ -52,6 +52,13 @@ export declare class Super {
     static UseDrawnUi(): DrawnUiBuilder;
     /** Master switch: false makes every control render uncached (DrawnUi Super.CacheEnabled). */
     static CacheEnabled: boolean;
+    /**
+     * Address every engine loader fetches a source from (images, sprites, fonts, SVG, GIF, Lottie, shaders); caches
+     * stay keyed by the source itself. Web-only, no C# counterpart. Default: a file listed in
+     * `globalThis.DrawnUiAssetStamps` (written into index.html by the `drawnUiAssetStamps()` Vite plugin) gets
+     * `?v=<content hash>`, so a browser never keeps an old copy of a changed file. Replace it to map sources elsewhere.
+     */
+    static ResolveAssetUrl: (source: string) => string;
     private static readonly colorCache;
     /**
      * Color string -> CanvasKit color. Hex follows the MAUI/DrawnUi convention: #RGB, #ARGB, #RRGGBB, #AARRGGBB

package/dist/core/Super.js

@@ -46,7 +46,7 @@ export class DrawnUiBuilder {
         for (const f of this.fonts.Fonts) {
             let face = loaded.get(f.Source);
             if (!face) {
-                const data = await (await fetch(f.Source)).arrayBuffer();
+                const data = await (await fetch(Super.ResolveAssetUrl(f.Source))).arrayBuffer();
                 face = Super.CK.Typeface.MakeFreeTypeFaceFromData(data) ?? undefined;
                 if (!face)
                     throw new Error(`DrawnUi: cannot load font '${f.Source}'`);
@@ -122,6 +122,20 @@ export class Super {
     static UseDrawnUi() { return new DrawnUiBuilder(); }
     /** Master switch: false makes every control render uncached (DrawnUi Super.CacheEnabled). */
     static CacheEnabled = true;
+    /**
+     * Address every engine loader fetches a source from (images, sprites, fonts, SVG, GIF, Lottie, shaders); caches
+     * stay keyed by the source itself. Web-only, no C# counterpart. Default: a file listed in
+     * `globalThis.DrawnUiAssetStamps` (written into index.html by the `drawnUiAssetStamps()` Vite plugin) gets
+     * `?v=<content hash>`, so a browser never keeps an old copy of a changed file. Replace it to map sources elsewhere.
+     */
+    static ResolveAssetUrl = (source) => {
+        const stamps = globalThis.DrawnUiAssetStamps;
+        if (!stamps)
+            return source;
+        const q = source.indexOf("?");
+        const v = stamps[(q < 0 ? source : source.slice(0, q)).replace(/^\.?\//, "")];
+        return v ? `${source}${q < 0 ? "?" : "&"}v=${v}` : source;
+    };
     static colorCache = new Map();
     /**
      * Color string -> CanvasKit color. Hex follows the MAUI/DrawnUi convention: #RGB, #ARGB, #RRGGBB, #AARRGGBB

package/dist/core/ViewsAdapter.d.ts

@@ -16,6 +16,8 @@ export declare class ViewsAdapter {
     Created: number;
     constructor(parent: SkiaControl);
     get PoolSize(): number;
+    /** The items views are bound to. */
+    get Items(): readonly unknown[];
     get InUseCount(): number;
     /** New template / items / mode: every realized view is dropped (DrawnUi ApplyItemsSource). */
     Initialize(template: (() => SkiaControl) | undefined, items: readonly unknown[], recycling: RecyclingTemplate): void;
@@ -26,8 +28,11 @@ export declare class ViewsAdapter {
     ShiftIndices(by: number, items: readonly unknown[]): void;
     /** The realized view for an index, if any (no creation). */
     GetViewForIndex(index: number): SkiaControl | undefined;
-    /** View bound to items[index]: existing, recycled from the pool, or freshly created. */
-    GetOrCreateViewForIndex(index: number): SkiaControl | undefined;
+    /**
+     * View bound to items[index]: existing, recycled from the pool, or freshly created. `quiet`: bound before it is
+     * attached, so the rebind invalidates the view alone and not the layout, which measures or draws it right away.
+     */
+    GetOrCreateViewForIndex(index: number, quiet?: boolean): SkiaControl | undefined;
     /** Index left the visible range: recycled views go back to the pool, non-recycled ones stay realized. */
     ReleaseViewAt(index: number): void;
     /** Releases every realized index outside [first, last]. */

package/dist/core/ViewsAdapter.js

@@ -16,6 +16,8 @@ export class ViewsAdapter {
         this.parent = parent;
     }
     get PoolSize() { return this.pool.length; }
+    /** The items views are bound to. */
+    get Items() { return this.items; }
     get InUseCount() { return this.inUse.size; }
     /** New template / items / mode: every realized view is dropped (DrawnUi ApplyItemsSource). */
     Initialize(template, items, recycling) {
@@ -52,8 +54,11 @@ export class ViewsAdapter {
     }
     /** The realized view for an index, if any (no creation). */
     GetViewForIndex(index) { return this.inUse.get(index); }
-    /** View bound to items[index]: existing, recycled from the pool, or freshly created. */
-    GetOrCreateViewForIndex(index) {
+    /**
+     * View bound to items[index]: existing, recycled from the pool, or freshly created. `quiet`: bound before it is
+     * attached, so the rebind invalidates the view alone and not the layout, which measures or draws it right away.
+     */
+    GetOrCreateViewForIndex(index, quiet = false) {
         const existing = this.inUse.get(index);
         if (existing)
             return existing;
@@ -64,9 +69,11 @@ export class ViewsAdapter {
             view = this.template();
             this.Created++;
         }
-        view.Parent = this.parent;
+        if (!quiet)
+            view.Parent = this.parent;
         view.ContextIndex = index;
         view.BindingContext = this.items[index];
+        view.Parent = this.parent;
         this.inUse.set(index, view);
         return view;
     }

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export * from "./core/Accessibility";
 export * from "./controls/SkiaLabel";
 export * from "./controls/TextSpan";
 export * from "./controls/SkiaRichLabel";
+export * from "./controls/SkiaLabelFps";
 export * from "./core/ControlStyle";
 export * from "./core/ImageEffects";
 export * from "./controls/SkiaToggle";

package/dist/index.js

@@ -12,6 +12,7 @@ export * from "./core/Accessibility";
 export * from "./controls/SkiaLabel";
 export * from "./controls/TextSpan";
 export * from "./controls/SkiaRichLabel";
+export * from "./controls/SkiaLabelFps";
 export * from "./core/ControlStyle";
 export * from "./core/ImageEffects";
 export * from "./controls/SkiaToggle";

package/dist/react/index.d.ts

@@ -4,6 +4,7 @@ import type { SkiaControl } from "../core/SkiaControl";
 import type { SkiaLabel as SkiaLabelCtrl } from "../controls/SkiaLabel";
 import type { TextSpan as TextSpanCtrl } from "../controls/TextSpan";
 import type { SkiaRichLabel as SkiaRichLabelCtrl } from "../controls/SkiaRichLabel";
+import type { SkiaLabelFps as SkiaLabelFpsCtrl } from "../controls/SkiaLabelFps";
 import type { SkiaSwitch as SkiaSwitchCtrl } from "../controls/SkiaSwitch";
 import type { SkiaCheckbox as SkiaCheckboxCtrl } from "../controls/SkiaCheckbox";
 import type { SkiaRadioButton as SkiaRadioButtonCtrl } from "../controls/SkiaRadioButton";
@@ -22,7 +23,7 @@ import type { SkiaScrollBar as SkiaScrollBarCtrl } from "../controls/SkiaScrollB
 import type { RefreshIndicator as RefreshIndicatorCtrl } from "../controls/RefreshIndicator";
 import type { SkiaSvg as SkiaSvgCtrl } from "../controls/SkiaSvg";
 import type { SkiaBackdrop as SkiaBackdropCtrl } from "../controls/SkiaBackdrop";
-import type { SkiaEditor as SkiaEditorCtrl } from "../controls/SkiaEditor";
+import { SkiaEditor as SkiaEditorCtrl } from "../controls/SkiaEditor";
 import type { SkiaSprite as SkiaSpriteCtrl } from "../controls/SkiaSprite";
 import type { SkiaSpriteSet as SkiaSpriteSetCtrl } from "../controls/SkiaSpriteSet";
 import type { SkiaLottie as SkiaLottieCtrl } from "../controls/SkiaLottie";
@@ -61,6 +62,8 @@ export declare const SkiaGrid: FC<LayoutProps<SkiaLayoutCtrl>>;
 /** Grid drawing gradient separator lines in its spacing (C# SkiaDecoratedGrid). */
 export declare const SkiaDecoratedGrid: FC<LayoutProps<SkiaDecoratedGridCtrl>>;
 export declare const SkiaLabel: FC<LayoutProps<SkiaLabelCtrl>>;
+/** Canvas FPS counter (C# SkiaLabelFps); its value changes only on frames running animators request anyway. */
+export declare const SkiaLabelFps: FC<LeafProps<SkiaLabelFpsCtrl>>;
 /** Markdown label (C# SkiaRichLabel): Text is markdown, rendered as spans; LinkTapped for [text](url). */
 export declare const SkiaRichLabel: FC<LeafProps<SkiaRichLabelCtrl>>;
 /** Child of <SkiaLabel>: a styled fragment (C# TextSpan). */

package/dist/react/index.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { SkiaAccessibilityManager } from "../core/Accessibility";
+import { TextInputProxy } from "../core/TextInputProxy";
 import { Canvas as CanvasView } from "../core/Canvas";
+import { SkiaEditor as SkiaEditorCtrl } from "../controls/SkiaEditor";
 import { SkiaScroll as SkiaScrollCtrl } from "../controls/SkiaScroll";
 import { createDrawnRoot } from "./reconciler";
 /** Typed JSX tags resolved by the reconciler Registry. */
@@ -13,6 +16,8 @@ export const SkiaGrid = "SkiaGrid";
 /** Grid drawing gradient separator lines in its spacing (C# SkiaDecoratedGrid). */
 export const SkiaDecoratedGrid = "SkiaDecoratedGrid";
 export const SkiaLabel = "SkiaLabel";
+/** Canvas FPS counter (C# SkiaLabelFps); its value changes only on frames running animators request anyway. */
+export const SkiaLabelFps = "SkiaLabelFps";
 /** Markdown label (C# SkiaRichLabel): Text is markdown, rendered as spans; LinkTapped for [text](url). */
 export const SkiaRichLabel = "SkiaRichLabel";
 /** Child of <SkiaLabel>: a styled fragment (C# TextSpan). */
@@ -114,19 +119,50 @@ const A11Y_CSS = `
 .drawnui-a11y-text>span{position:absolute;white-space:pre;color:transparent;user-select:text;-webkit-user-select:text;pointer-events:auto;cursor:text;line-height:1;font-kerning:none;font-feature-settings:"kern" 0,"liga" 0,"calt" 0;text-rendering:geometricPrecision}
 .drawnui-a11y-text>span::selection{background:rgba(110,168,254,.55);color:transparent}
 `;
+const NAVIGATION_KEYS = new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End", "PageUp", "PageDown"]);
 /**
- * Invisible ARIA elements mirroring the accessible drawn controls, positioned over the canvas.
- * Improvement over DrawnUi.Blazor: `pointer-events:none`, so hover and every pointer gesture still reach the canvas —
- * keyboard (Tab / Enter / Space) and screen-reader activation arrive as DOM events and are routed back as a Tapped.
+ * Invisible ARIA elements mirroring the accessible drawn controls, positioned over the canvas (the DrawnUi.Blazor
+ * overlay). Improvement over DrawnUi.Blazor: `pointer-events:none`, so hover and every pointer gesture still reach the
+ * canvas. Keyboard and screen-reader input arrive as DOM events: Enter / Space activate (a Tapped), the navigation keys
+ * go to the focused control and then to its arrow-key group; a group is one Tab stop (roving tabindex).
  */
 function AccessibilityOverlay({ view }) {
     const [nodes, setNodes] = useState(() => view.AccessibilityManager.Snapshot);
+    // keyboard focus moved by the manager (arrow keys in a group): focus that node's element once it is rendered
+    const [focusRequest, setFocusRequest] = useState();
+    // the Tab stop of a group moves with keyboard focus: re-render on focus
+    const [, setFocusTick] = useState(0);
     useEffect(() => {
         const mgr = view.AccessibilityManager;
         setNodes(mgr.Snapshot);
         const off = mgr.OnChanged(() => setNodes(mgr.Snapshot));
         const offLive = mgr.OnLiveRegionUpdated(() => { mgr.ForceRebuildOnNextFrame(); view.Update(); });
-        return () => { off(); offLive(); };
+        const offFocus = mgr.OnKeyboardFocusRequested((node) => { setNodes(mgr.Snapshot); setFocusRequest({ id: node.AccessibilityId }); });
+        return () => { off(); offLive(); offFocus(); };
+    }, [view]);
+    const elementOf = (id) => overlayRef.current?.querySelector(`[data-a11y-id="${id}"]`) ?? undefined;
+    useLayoutEffect(() => {
+        if (!focusRequest)
+            return;
+        setFocusRequest(undefined);
+        elementOf(focusRequest.id)?.focus({ preventScroll: true });
+    }, [focusRequest]);
+    // Tab / Shift+Tab in a text field leave it for the next node, also after a click into it: DOM focus goes to the
+    // field's own element (without taking the caret again) and the browser's Tab moves on from there
+    const tabbingOut = useRef(0);
+    useEffect(() => {
+        const onKey = (e) => {
+            const editor = SkiaEditorCtrl.Focused;
+            if (e.key !== "Tab" || !editor || editor.Superview !== view || !TextInputProxy.IsProxyTarget(e.target))
+                return;
+            const el = elementOf(editor.AccessibilityId);
+            if (!el)
+                return;
+            tabbingOut.current = editor.AccessibilityId;
+            el.focus({ preventScroll: true });
+        };
+        document.addEventListener("keydown", onKey, true);
+        return () => document.removeEventListener("keydown", onKey, true);
     }, [view]);
     // selectable text spans take pointer events: the wheel over them is re-dispatched to the canvas so drawn scrolls keep working
     const overlayRef = useRef(null);
@@ -161,11 +197,29 @@ function AccessibilityOverlay({ view }) {
     const pin = (e) => { e.currentTarget.scrollTop = 0; e.currentTarget.scrollLeft = 0; };
     return (_jsxs("div", { className: "drawnui-a11y-overlay", onScroll: pin, ref: overlayRef, children: [_jsx("style", { children: A11Y_CSS }), nodes.map((n) => {
                 const pos = { left: n.Rect.Left, top: n.Rect.Top, width: n.Rect.Width, height: n.Rect.Height };
-                const activate = () => n.Source.OnAccessibilityActivated();
-                return n.CanInteract ? (_jsx("div", { role: n.Role, "aria-label": n.Label, title: n.Hint, "aria-pressed": n.Role === "button" ? n.IsPressed : undefined, "aria-checked": n.Role === "switch" || n.Role === "checkbox" || n.Role === "radio" ? n.IsPressed : undefined, "aria-live": n.Live, tabIndex: 0, className: "drawnui-a11y-node", style: { ...pos, fontSize: 0, userSelect: "none" }, onClick: activate, onKeyDown: (e) => { if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        activate();
-                    } }, onFocus: (e) => { pin({ currentTarget: e.currentTarget.parentElement }); SkiaScrollCtrl.EnsureVisible(n.Source); n.Source.OnAccessibilityFocused(true); n.Source.NotifyAccessibilityFocused(true); }, onBlur: () => { n.Source.OnAccessibilityFocused(false); n.Source.NotifyAccessibilityFocused(false); }, children: n.Label }, n.Id)) : n.TextLines ? (
+                const activate = () => SkiaAccessibilityManager.Activate(n.Source);
+                return n.CanInteract ? (_jsx("div", { "data-a11y-id": n.Id, role: n.Role, "aria-label": n.Label, title: n.Hint, "aria-pressed": n.Role === "button" ? n.IsPressed : undefined, "aria-checked": n.Role === "switch" || n.Role === "checkbox" || n.Role === "radio" ? n.IsPressed : undefined, "aria-live": n.Live, tabIndex: view.AccessibilityManager.IsTabStop(n.Source) ? 0 : -1, className: "drawnui-a11y-node", style: { ...pos, fontSize: 0, userSelect: "none" }, onClick: activate, onKeyDown: (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault();
+                            activate();
+                        }
+                        else if (NAVIGATION_KEYS.has(e.key) && SkiaAccessibilityManager.Key(n.Source, e.key))
+                            e.preventDefault();
+                    }, onFocus: (e) => {
+                        pin({ currentTarget: e.currentTarget.parentElement });
+                        SkiaScrollCtrl.EnsureVisible(n.Source); // inside every enclosing scroll
+                        if (tabbingOut.current === n.Id)
+                            tabbingOut.current = 0; // leaving a text field: it keeps no caret
+                        else
+                            n.Source.OnAccessibilityFocused(true); // a text field takes the caret, as after a click
+                        n.Source.NotifyAccessibilityFocused(true);
+                        setFocusTick((t) => t + 1);
+                    }, onBlur: (e) => {
+                        if (TextInputProxy.IsProxyTarget(e.relatedTarget))
+                            return; // a text field moved DOM focus to its own input
+                        n.Source.OnAccessibilityFocused(false);
+                        n.Source.NotifyAccessibilityFocused(false);
+                    }, children: n.Label }, n.Id)) : n.TextLines ? (
                 // AccessibilityTextSelectable: one positioned span per drawn line, in the drawn font, so the browser selects and copies it like HTML
                 _jsx("div", { role: n.Role, title: n.Hint, "aria-live": n.Live, className: "drawnui-a11y-node drawnui-a11y-text", style: pos, children: n.TextLines.map((l, i) => (_jsxs("span", { "data-w": l.Width, style: { left: l.Left, top: l.Top, height: l.Height, fontFamily: l.FontFamily, fontWeight: l.FontWeight, fontSize: l.FontSize, lineHeight: `${l.Height}px` }, children: [l.Text, i < n.TextLines.length - 1 ? "\n" : ""] }, i))) }, n.Id)) : (
                 // static text is exposed as real (transparent) text content; aria-label only for roles that need a name

package/dist/react/reconciler.js

@@ -4,6 +4,7 @@ import { ConcurrentRoot, DefaultEventPriority } from "react-reconciler/constants
 import { SkiaLabel } from "../controls/SkiaLabel";
 import { TextSpan } from "../controls/TextSpan";
 import { SkiaRichLabel } from "../controls/SkiaRichLabel";
+import { SkiaLabelFps } from "../controls/SkiaLabelFps";
 import { SkiaSwitch } from "../controls/SkiaSwitch";
 import { SkiaCheckbox } from "../controls/SkiaCheckbox";
 import { SkiaRadioButton } from "../controls/SkiaRadioButton";
@@ -31,7 +32,7 @@ import { SkiaScroll } from "../controls/SkiaScroll";
 import { SkiaFrame, SkiaShape } from "../controls/SkiaShape";
 /** JSX tag name -> engine class. Add a control here to expose it to React. */
 export const Registry = {
-    SkiaLayout, SkiaStack, SkiaRow, SkiaLayer, SkiaWrap, SkiaGrid, SkiaDecoratedGrid, SkiaBackdrop, SkiaEditor, SkiaSprite, SkiaSpriteSet, SkiaLabel, SkiaRichLabel, TextSpan, SkiaHotspot, SkiaButton, SkiaImage, SkiaImageTiles, SkiaSvg, SkiaLottie, SkiaGif, SkiaScroll, SkiaScrollBar, RefreshIndicator, SkiaShape, SkiaFrame,
+    SkiaLayout, SkiaStack, SkiaRow, SkiaLayer, SkiaWrap, SkiaGrid, SkiaDecoratedGrid, SkiaBackdrop, SkiaEditor, SkiaSprite, SkiaSpriteSet, SkiaLabel, SkiaLabelFps, SkiaRichLabel, TextSpan, SkiaHotspot, SkiaButton, SkiaImage, SkiaImageTiles, SkiaSvg, SkiaLottie, SkiaGif, SkiaScroll, SkiaScrollBar, RefreshIndicator, SkiaShape, SkiaFrame,
     SkiaSwitch, SkiaCheckbox, SkiaRadioButton, SkiaProgress, SkiaSlider, SkiaCarousel, SkiaShaderCarousel, SkiaDrawer,
 };
 const SKIP = new Set(["children", "key", "ref"]);

package/dist/vite/index.d.ts

@@ -1,4 +1,13 @@
 import type { Plugin } from "vite";
+/**
+ * Versioned addresses for the files of the public folder (fonts, images, sprites, shaders, Lottie, favicon). Their
+ * names never change, and a browser or CDN may keep them for hours, so after a publish a returning visitor could
+ * get new code with an old file. On build every public file gets a short content hash: index.html receives the map
+ * as `globalThis.DrawnUiAssetStamps` (read by `Super.ResolveAssetUrl`, which every engine loader fetches through)
+ * and its own `href` / `src` links to public files get `?v=<hash>`. A changed file gets a new address, an unchanged
+ * one keeps its address and stays cached. Bundled files (hashed names) need nothing. The dev server is left alone.
+ */
+export declare function drawnUiAssetStamps(): Plugin;
 export interface DrawnUiStaticOptions {
     /**
      * Pages to generate, as URL hashes / paths appended to the site root ("" = the root page, "#/shapes"...).

package/dist/vite/index.js

@@ -1,9 +1,42 @@
 /**
- * Vite helpers for DrawnUi.React apps: `import { drawnUiStatic } from "drawnui-react/vite"`.
+ * Vite helpers for DrawnUi.React apps: `import { drawnUiStatic, drawnUiAssetStamps } from "drawnui-react/vite"`.
  * Build-time only; the runtime bundle never imports this module and the frame loop knows nothing about it.
  */
-import { readFileSync, writeFileSync } from "node:fs";
-import { resolve } from "node:path";
+import { createHash } from "node:crypto";
+import { readdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+/**
+ * Versioned addresses for the files of the public folder (fonts, images, sprites, shaders, Lottie, favicon). Their
+ * names never change, and a browser or CDN may keep them for hours, so after a publish a returning visitor could
+ * get new code with an old file. On build every public file gets a short content hash: index.html receives the map
+ * as `globalThis.DrawnUiAssetStamps` (read by `Super.ResolveAssetUrl`, which every engine loader fetches through)
+ * and its own `href` / `src` links to public files get `?v=<hash>`. A changed file gets a new address, an unchanged
+ * one keeps its address and stays cached. Bundled files (hashed names) need nothing. The dev server is left alone.
+ */
+export function drawnUiAssetStamps() {
+    let stamps = {};
+    return {
+        name: "drawnui-asset-stamps",
+        apply: "build",
+        configResolved(config) {
+            const dir = config.publicDir;
+            if (!dir)
+                return;
+            for (const rel of readdirSync(dir, { recursive: true })) {
+                const file = join(dir, rel);
+                if (statSync(file).isFile())
+                    stamps[rel.replace(/\\/g, "/")] = createHash("sha256").update(readFileSync(file)).digest("hex").slice(0, 10);
+            }
+        },
+        transformIndexHtml(html) {
+            const stamped = html.replace(/\b(href|src)="([^"?#:]+)"/g, (m, attr, url) => {
+                const v = stamps[url.replace(/^\.?\//, "")];
+                return v ? `${attr}="${url}?v=${v}"` : m;
+            });
+            return { html: stamped, tags: [{ tag: "script", children: `globalThis.DrawnUiAssetStamps=${JSON.stringify(stamps)}`, injectTo: "head-prepend" }] };
+        },
+    };
+}
 /**
  * Generates visible, semantic HTML for crawlers and AI agents from the app's own accessibility tree, at build time.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drawnui-react",
-  "version": "0.1.0-preview.12",
+  "version": "0.1.0-preview.14",
   "description": "DrawnUi for React: the DrawnUi (.NET) drawn-UI engine in TypeScript on CanvasKit (Skia WASM). Same controls, same PascalCase API as DrawnUi.Net.",
   "license": "MIT",
   "author": "Nick Kovalsky (AppoMobi)",
@@ -53,6 +53,9 @@
     "typecheck": "tsc --noEmit",
     "build": "tsc --noEmit && node dev/build-samples.mjs",
     "sync:skills": "node dev/sync-skills.mjs",
+    "check:recycling": "node dev/check.mjs dev/check-recycling.ts",
+    "check:keyboard": "node dev/check.mjs dev/check-keyboard.ts",
+    "check:wheel": "node dev/check.mjs dev/check-wheel.ts",
     "site:extras": "node dev/site-extras.mjs dist/demo",
     "build:lib": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsc -p tsconfig.build.json",
     "prepublishOnly": "npm run build:lib",