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

package/dist/core/Accessibility.js

@@ -26,6 +26,16 @@ export const Aria = {
         return role === "list" || role === "listbox" || role === "grid" || role === "toolbar" || role === "radiogroup"
             || role === "tablist" || role === "menu" || role === "menubar";
     },
+    /**
+     * Roles a user operates (C# Aria.IsInteractiveRole, as DrawnUi.Rust is_control_role): a node with one of them that
+     * cannot take input is read as disabled (aria-disabled). C# also lists listbox and scrollbar; here a listbox is an
+     * arrow-key group and groups are never disabled.
+     */
+    IsInteractiveRole(role) {
+        return role === "button" || role === "link" || role === "checkbox" || role === "radio" || role === "switch"
+            || role === "slider" || role === "spinbutton" || role === "textbox" || role === "searchbox" || role === "combobox"
+            || role === "option" || role === "tab" || role === "menuitem" || role === "menuitemcheckbox" || role === "menuitemradio";
+    },
 };
 const asLayout = (c) => ("ChildrenFactory" in c && "Split" in c ? c : undefined);
 const asScroll = (c) => ("ScrollToIndex" in c && "ViewportOffsetY" in c ? c : undefined);
@@ -150,7 +160,7 @@ export class SkiaAccessibilityManager {
         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 row = axis === "Both" ? RowLength(group) : 1;
         const vertical = axis !== "Horizontal";
         const page = () => PageSize(scroll, item, vertical) * row;
         let target, step;
@@ -282,7 +292,7 @@ export class SkiaAccessibilityManager {
     Rebuild(scale, canvasWidthPx, canvasHeightPx) {
         this.dirty = false;
         this.lastRebuild = performance.now();
-        const list = [];
+        let list = [];
         for (const n of this.nodes) {
             if (!n.Superview) {
                 this.nodes.delete(n);
@@ -304,9 +314,11 @@ export class SkiaAccessibilityManager {
                 Id: n.AccessibilityId, Label: n.AccessibilityLabel, Hint: n.AccessibilityHint, Role: n.AccessibilityRole,
                 Rect: new SKRect(px.Left / scale, px.Top / scale, px.Right / scale, px.Bottom / scale),
                 CanInteract: n.AccessibilityCanInteract, IsPressed: n.AccessibilityIsPressed, Live: n.AccessibilityLive, Source: n,
+                Disabled: !n.AccessibilityCanInteract && Aria.IsInteractiveRole(n.AccessibilityRole),
                 TextLines: n.AccessibilityTextSelectable ? n.GetAccessibilityTextLines(scale) : undefined,
             });
         }
+        list = SayNamesOnce(list);
         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)
@@ -334,7 +346,7 @@ export class SkiaAccessibilityManager {
             return false;
         for (let i = 0; i < a.length; i++) {
             const x = a[i], y = b[i];
-            if (x.Source !== y.Source || x.Label !== y.Label || x.Hint !== y.Hint || x.Role !== y.Role || x.CanInteract !== y.CanInteract
+            if (x.Source !== y.Source || x.Label !== y.Label || x.Hint !== y.Hint || x.Role !== y.Role || x.CanInteract !== y.CanInteract || x.Disabled !== y.Disabled
                 || x.IsPressed !== y.IsPressed || x.Live !== y.Live
                 || Math.abs(x.Rect.Left - y.Rect.Left) > 0.5 || Math.abs(x.Rect.Top - y.Rect.Top) > 0.5
                 || Math.abs(x.Rect.Right - y.Rect.Right) > 0.5 || Math.abs(x.Rect.Bottom - y.Rect.Bottom) > 0.5)
@@ -353,6 +365,30 @@ export class SkiaAccessibilityManager {
         return true;
     }
 }
+/**
+ * Each name is said once in the flat overlay (DrawnUi.Rust said_by_child): a text or a heading whose label repeats the
+ * label of the node it is in (its nearest ancestor node) is said by one of them. Under an interactive node (a card
+ * button) the child is left out, the button keeps its name; under any other node (a group card and its title) the
+ * node loses its name and the heading says it. Selectable text (TextLines) always stays.
+ */
+function SayNamesOnce(list) {
+    const bySource = new Map(list.map((x) => [x.Source, x]));
+    const said = new Set();
+    for (const x of list) {
+        if (!x.Label || x.TextLines || (x.Role !== Aria.RoleText && x.Role !== Aria.RoleHeading))
+            continue;
+        let owner;
+        for (let p = x.Source.Parent; p && !owner; p = p.Parent)
+            owner = bySource.get(p);
+        if (!owner || owner.Label !== x.Label)
+            continue;
+        if (owner.CanInteract)
+            said.add(x);
+        else
+            owner.Label = undefined;
+    }
+    return said.size ? list.filter((x) => !said.has(x)) : list;
+}
 // ---- group helpers (duck-typed layouts and scrolls) ----
 /** Children of a control (a layout's Views, a scroll's Content). */
 function ViewsOf(c) {
@@ -383,11 +419,18 @@ function AxisOf(group) {
     return "Both";
 }
 /** Items per row of a 2D group: Split when set, else the items sharing the row of `item`. */
-function RowLength(group, item) {
+/**
+ * Items per row of a 2D group: the Split, else the items on the row of the group's first item. C# counts the focused
+ * item's row, which the short last row of a wrap leaves short (Up from it skipped items); DrawnUi.Rust afef66f.
+ */
+function RowLength(group) {
     const l = asLayout(group);
     if (l && l.Split > 1)
         return l.Split;
-    const top = item.GetAccessibilityPixelRect();
+    const first = ItemAt(group, 0) ?? FirstRealized(group);
+    if (!first)
+        return 1;
+    const top = first.GetAccessibilityPixelRect();
     if (top.Height <= 0)
         return 1;
     const mid = (top.Top + top.Bottom) / 2;
@@ -416,6 +459,14 @@ function ItemAt(group, index) {
     }
     return index >= 0 && index < ViewsOf(group).length ? ViewsOf(group)[index] : undefined;
 }
+/** The realized item with the lowest index (item 0 of a scrolled recycled group may not be realized). */
+function FirstRealized(group) {
+    let best;
+    for (const v of ViewsOf(group))
+        if (!best || IndexOf(group, v) < IndexOf(group, best))
+            best = v;
+    return best;
+}
 /** 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();

package/dist/core/Canvas.d.ts

@@ -2,6 +2,7 @@ import type { Surface } from "canvaskit-wasm";
 import type { DrawingContext, SkiaControl } from "./SkiaControl";
 import type { AnimatorBase } from "./Animators";
 import { SkiaAccessibilityManager } from "./Accessibility";
+import { HoverManager } from "./Hover";
 import { type Color, type RenderingModeType } from "./Types";
 import { ContextMenuEventArgs, type GesturesMode, SkiaGesturesParameters, TouchActionEventArgs } from "./Gestures";
 /**
@@ -37,6 +38,8 @@ export declare class Canvas {
     WasDrawn?: (sender: Canvas) => void;
     /** Registry + rate-limited snapshot of accessible controls, rendered by the DOM overlay (DrawnUi AccessibilityManager). */
     readonly AccessibilityManager: SkiaAccessibilityManager;
+    /** Mouse hover of the controls (drawnui-cross 6m): ReceivesHover / IsHovered / HoverChanged. */
+    readonly Hover: HoverManager;
     private content?;
     get Content(): SkiaControl | undefined;
     set Content(value: SkiaControl | undefined);
@@ -47,6 +50,13 @@ export declare class Canvas {
     private frameId;
     private disposed;
     private readonly observer;
+    /** The WebGL context is lost: no frames until the browser restores it. */
+    private contextLost;
+    /**
+     * Bumped when the WebGL context was restored: every GPU object made before (Image caches, picture caches that may
+     * replay them, kept composite surfaces, effect textures) is remade at its next draw (DrawnUi.Rust Gpu::epoch).
+     */
+    GpuEpoch: number;
     /** `init` runs before the first frame is drawn: the place to attach `WillFirstTimeDraw` / `WasDrawn` for that frame. */
     constructor(Element: HTMLCanvasElement, init?: (canvas: Canvas) => void);
     /** Request a redraw (full measure + arrange + render) on the next animation frame. */
@@ -61,6 +71,17 @@ export declare class Canvas {
      * redrawn content lands in the same paint and no blank frame is ever shown while dragging.
      */
     private OnResized;
+    /** WebGL context lost: keep the browser restoring it (preventDefault) and stop the frames. */
+    private readonly onContextLost;
+    /**
+     * WebGL context restored (as DrawnUi.Rust and the C# Wasm / Blazor heads): every GL object of the lost generation is
+     * gone. The old Skia context is abandoned first, while its own GL handle is current and before the new context makes
+     * any object, so its GL calls reach only lost-generation objects. CanvasKit exposes no `abandonContext`;
+     * `releaseResourcesAndAbandonContext` is its only way to abandon, and after it freeing an old image or surface makes no
+     * GL call. Then the same WebGL object is registered again (the old handle deleted first, which clears the canvas'
+     * context object) with a new GrContext and surface; GpuEpoch makes the old generation's GPU objects remake themselves.
+     */
+    private readonly onContextRestored;
     /** Draws one frame immediately (outside the rAF loop) and presents it. */
     private DrawNow;
     private Draw;
@@ -108,6 +129,8 @@ export declare class Canvas {
     private readonly previousTouchArgs;
     private readonly pendingGestures;
     private readonly onPointer;
+    /** The mouse left the canvas: hover ends at once, also while content moves. */
+    private readonly onPointerLeave;
     private readonly preventTouch;
     /** Gestures="Enabled": touch / pen pointers whose Down a control used (see OnTouchAction). */
     private readonly claimedTouches;

package/dist/core/Canvas.js

@@ -1,5 +1,6 @@
 import { Super } from "./Super";
 import { SkiaAccessibilityManager } from "./Accessibility";
+import { HoverManager } from "./Hover";
 import { Colors, SKRect } from "./Types";
 import { ContextMenuEventArgs, GestureEventProcessingInfo, PointerData, SKPoint, SkiaGesturesParameters, TouchActionEventArgs, } from "./Gestures";
 /**
@@ -35,6 +36,8 @@ export class Canvas {
     WasDrawn;
     /** Registry + rate-limited snapshot of accessible controls, rendered by the DOM overlay (DrawnUi AccessibilityManager). */
     AccessibilityManager = new SkiaAccessibilityManager();
+    /** Mouse hover of the controls (drawnui-cross 6m): ReceivesHover / IsHovered / HoverChanged. */
+    Hover = new HoverManager();
     content;
     get Content() { return this.content; }
     set Content(value) {
@@ -45,6 +48,7 @@ export class Canvas {
             value.Parent = undefined;
             value._superview = this;
         }
+        this.Hover.RequestCheck();
         this.Update();
     }
     surface;
@@ -54,19 +58,28 @@ export class Canvas {
     frameId = 0;
     disposed = false;
     observer;
+    /** The WebGL context is lost: no frames until the browser restores it. */
+    contextLost = false;
+    /**
+     * Bumped when the WebGL context was restored: every GPU object made before (Image caches, picture caches that may
+     * replay them, kept composite surfaces, effect textures) is remade at its next draw (DrawnUi.Rust Gpu::epoch).
+     */
+    GpuEpoch = 0;
     /** `init` runs before the first frame is drawn: the place to attach `WillFirstTimeDraw` / `WasDrawn` for that frame. */
     constructor(Element, init) {
         this.Element = Element;
         if (!Super.CK)
             throw new Error("DrawnUi: call Super.UseDrawnUi()...BuildAsync() before creating a Canvas");
         init?.(this);
+        Element.addEventListener("webglcontextlost", this.onContextLost);
+        Element.addEventListener("webglcontextrestored", this.onContextRestored);
         this.observer = new ResizeObserver(() => this.OnResized());
         this.observer.observe(Element);
         this.OnResized();
     }
     /** Request a redraw (full measure + arrange + render) on the next animation frame. */
     Update() {
-        if (this.frameId || !this.surface || this.disposed)
+        if (this.frameId || !this.surface || this.disposed || this.contextLost)
             return;
         const surface = this.surface;
         this.frameId = surface.requestAnimationFrame((c) => {
@@ -117,16 +130,53 @@ export class Canvas {
         this.RenderingScale = dpr;
         this.Element.width = w;
         this.Element.height = h;
+        if (this.contextLost)
+            return; // the restore makes the surface at this size
         this.ReleaseSurface();
         this.surface = this.CreateSurface(w, h);
         if (!this.surface)
             throw new Error("DrawnUi: cannot create surface");
         this.DrawNow();
     }
+    /** WebGL context lost: keep the browser restoring it (preventDefault) and stop the frames. */
+    onContextLost = (e) => {
+        e.preventDefault();
+        this.contextLost = true;
+        if (this.frameId) {
+            cancelAnimationFrame(this.frameId);
+            this.frameId = 0;
+        }
+    };
+    /**
+     * WebGL context restored (as DrawnUi.Rust and the C# Wasm / Blazor heads): every GL object of the lost generation is
+     * gone. The old Skia context is abandoned first, while its own GL handle is current and before the new context makes
+     * any object, so its GL calls reach only lost-generation objects. CanvasKit exposes no `abandonContext`;
+     * `releaseResourcesAndAbandonContext` is its only way to abandon, and after it freeing an old image or surface makes no
+     * GL call. Then the same WebGL object is registered again (the old handle deleted first, which clears the canvas'
+     * context object) with a new GrContext and surface; GpuEpoch makes the old generation's GPU objects remake themselves.
+     */
+    onContextRestored = () => {
+        if (this.disposed)
+            return;
+        if (this.grContext)
+            this.grContext.releaseResourcesAndAbandonContext();
+        this.surface?.delete();
+        this.surface = undefined;
+        this.grContext?.delete();
+        this.grContext = undefined;
+        if (this.glHandle) {
+            Super.CK.deleteContext(this.glHandle);
+            this.glHandle = undefined;
+        }
+        this.contextLost = false;
+        this.GpuEpoch++;
+        this.surface = this.CreateSurface(this.Element.width, this.Element.height);
+        this.DrawNow();
+    };
     /** Draws one frame immediately (outside the rAF loop) and presents it. */
     DrawNow() {
         const surface = this.surface;
-        if (!surface || this.disposed)
+        if (!surface || this.disposed || this.contextLost)
             return;
         this.Draw(surface.getCanvas());
         surface.flush();
@@ -155,6 +205,7 @@ export class Canvas {
             root.Render({ Context: { Canvas: canvas, Surface: this.surface }, Destination: new SKRect(0, 0, w, h), Scale: scale });
         }
         this.AccessibilityManager.OnFrameEnd(this.RenderingScale, this.Element.width, this.Element.height, () => this.Update());
+        this.Hover.AfterFrame(this.content, this.activeTouchIds.size > 0);
         const now = performance.now();
         this.FrameTime = now - started;
         this.FrameIndex++;
@@ -260,6 +311,8 @@ export class Canvas {
     }
     Dispose() {
         this.disposed = true;
+        this.Element.removeEventListener("webglcontextlost", this.onContextLost);
+        this.Element.removeEventListener("webglcontextrestored", this.onContextRestored);
         this.Gestures = "Disabled";
         this.observer.disconnect();
         this.content?.Dispose();
@@ -296,10 +349,14 @@ export class Canvas {
         if (!type)
             return;
         if (type === "Moved" && !this.activeTouchIds.has(e.pointerId)) {
+            if (e.pointerType === "touch")
+                return; // touch never hovers
             if (e.pointerType === "mouse")
                 this.UpdateCursor(e.offsetX, e.offsetY);
+            if (this.activeTouchIds.size === 0)
+                this.Hover.Move(this.content, e.offsetX * this.RenderingScale, e.offsetY * this.RenderingScale);
             return;
-        } // hover not ported (TouchActionResult.Pointer)
+        }
         if ((type === "Released" || type === "Cancelled") && !this.activeTouchIds.has(e.pointerId))
             return; // Up of a pointer that never pressed here
         // Capture so Up outside the element still arrives; throws for synthetic events (tests) — harmless.
@@ -329,6 +386,9 @@ export class Canvas {
             this.UpdateTouchAction();
         }
     };
+    /** The mouse left the canvas: hover ends at once, also while content moves. */
+    onPointerLeave = (e) => { if (e.pointerType !== "touch")
+        this.Hover.Leave(); };
     preventTouch = (e) => e.preventDefault();
     /** Gestures="Enabled": touch / pen pointers whose Down a control used (see OnTouchAction). */
     claimedTouches = new Set();
@@ -471,6 +531,7 @@ export class Canvas {
         el.style.userSelect = "none";
         for (const t of ["pointerdown", "pointermove", "pointerup", "pointercancel"])
             el.addEventListener(t, this.onPointer);
+        el.addEventListener("pointerleave", this.onPointerLeave);
         el.addEventListener("contextmenu", this.onContextMenu);
         el.addEventListener("wheel", this.onWheel, { passive: false });
         if (this.gestures === "Lock")
@@ -487,6 +548,7 @@ export class Canvas {
         el.style.userSelect = "";
         for (const t of ["pointerdown", "pointermove", "pointerup", "pointercancel"])
             el.removeEventListener(t, this.onPointer);
+        el.removeEventListener("pointerleave", this.onPointerLeave);
         el.removeEventListener("contextmenu", this.onContextMenu);
         el.removeEventListener("wheel", this.onWheel);
         el.removeEventListener("touchmove", this.preventTouch);

package/dist/core/Hover.d.ts

@@ -0,0 +1,37 @@
+import type { SkiaControl } from "./SkiaControl";
+/**
+ * DrawnUI hover (drawnui-cross 6m, C# DrawnView ReportHover / CommitHover): every control under the mouse that takes
+ * hover (`ReceivesHover`) is hovered, a card and the button inside it alike, as CSS :hover. Decided from the hit path
+ * of one pointer position, by the routing rules of ProcessGestures (visible, not InputTransparent, inside, children
+ * not locked, nothing below a control that blocks gestures below).
+ * While content moves under the pointer (a scroll glide, fling or pan, a carousel or drawer transition) hover is not
+ * tracked and what was hovered stays; one check at the last pointer position follows when it stops, and after
+ * controls are added or removed, a cell is rebound, a hovered control is hidden or a scroll jumps. Leaving the canvas
+ * clears hover at once. Touch never hovers. No allocation on frames where nothing changes.
+ */
+export declare class HoverManager {
+    /** The hovered controls, root first. */
+    readonly Hovered: SkiaControl[];
+    private readonly next;
+    private readonly path;
+    private readonly movers;
+    private hasPointer;
+    private x;
+    private y;
+    private paused;
+    private check;
+    /** The mouse (or a pen in range) moved to (x, y), canvas pixels, nothing pressed. */
+    Move(root: SkiaControl | undefined, x: number, y: number): void;
+    /** The pointer left the canvas: nothing is hovered, also while content moves. */
+    Leave(): void;
+    /** The controls under a still pointer may have changed: checked once at the end of the frame. */
+    RequestCheck(): void;
+    /** A control that moves its content (MovesContent) while drawn: hover waits while any of them moves. */
+    RegisterMover(control: SkiaControl): void;
+    /** End of a frame: pause while content moves, else run a pending check (at most one a frame, none while pressed). */
+    AfterFrame(root: SkiaControl | undefined, pressed: boolean): void;
+    private static Shown;
+    private Update;
+    /** `next` becomes the hovered set: the ones that left get HoverChanged(false), then the new ones (true). */
+    private Apply;
+}

package/dist/core/Hover.js

@@ -0,0 +1,118 @@
+import { SKPoint } from "./Gestures";
+/**
+ * DrawnUI hover (drawnui-cross 6m, C# DrawnView ReportHover / CommitHover): every control under the mouse that takes
+ * hover (`ReceivesHover`) is hovered, a card and the button inside it alike, as CSS :hover. Decided from the hit path
+ * of one pointer position, by the routing rules of ProcessGestures (visible, not InputTransparent, inside, children
+ * not locked, nothing below a control that blocks gestures below).
+ * While content moves under the pointer (a scroll glide, fling or pan, a carousel or drawer transition) hover is not
+ * tracked and what was hovered stays; one check at the last pointer position follows when it stops, and after
+ * controls are added or removed, a cell is rebound, a hovered control is hidden or a scroll jumps. Leaving the canvas
+ * clears hover at once. Touch never hovers. No allocation on frames where nothing changes.
+ */
+export class HoverManager {
+    /** The hovered controls, root first. */
+    Hovered = [];
+    next = [];
+    path = [];
+    movers = [];
+    hasPointer = false;
+    x = 0;
+    y = 0;
+    paused = false;
+    check = false;
+    /** The mouse (or a pen in range) moved to (x, y), canvas pixels, nothing pressed. */
+    Move(root, x, y) {
+        this.hasPointer = true;
+        this.x = x;
+        this.y = y;
+        if (this.paused)
+            return; // content moves under the pointer: what was hovered stays, one check when it stops
+        this.check = false;
+        this.Update(root);
+    }
+    /** The pointer left the canvas: nothing is hovered, also while content moves. */
+    Leave() {
+        this.hasPointer = false;
+        this.check = false;
+        this.next.length = 0;
+        this.Apply();
+    }
+    /** The controls under a still pointer may have changed: checked once at the end of the frame. */
+    RequestCheck() { if (this.hasPointer)
+        this.check = true; }
+    /** A control that moves its content (MovesContent) while drawn: hover waits while any of them moves. */
+    RegisterMover(control) { if (this.movers.indexOf(control) < 0)
+        this.movers.push(control); }
+    /** End of a frame: pause while content moves, else run a pending check (at most one a frame, none while pressed). */
+    AfterFrame(root, pressed) {
+        let moving = false;
+        for (let i = this.movers.length - 1; i >= 0; i--) {
+            const m = this.movers[i];
+            if (m.IsDisposed || !m.Superview) {
+                this.movers.splice(i, 1);
+                continue;
+            }
+            if (!moving && m.IsVisible && m.MovesContent())
+                moving = true;
+        }
+        if (moving) {
+            this.paused = true;
+            return;
+        }
+        if (this.paused) {
+            this.paused = false;
+            this.check = true;
+        }
+        // a hovered control (or an ancestor) hidden or removed under a still pointer stops being hovered
+        for (let i = 0; i < this.Hovered.length && !this.check; i++)
+            if (!HoverManager.Shown(this.Hovered[i]))
+                this.check = true;
+        if (!this.check)
+            return;
+        this.check = false;
+        if (!this.hasPointer || pressed)
+            return;
+        this.Update(root);
+    }
+    static Shown(control) {
+        if (control.IsDisposed || !control.Superview)
+            return false;
+        for (let c = control; c; c = c.Parent)
+            if (!c.IsVisible)
+                return false;
+        return true;
+    }
+    Update(root) {
+        const path = this.path, next = this.next;
+        path.length = 0;
+        next.length = 0;
+        if (root && root.IsVisible && !root.InputTransparent) {
+            const point = root.TransformPointToLocalSpace(new SKPoint(this.x, this.y));
+            if (root.HitIsInside(point.X, point.Y))
+                root.CollectHovered(point, path);
+        }
+        for (const c of path)
+            if (c.ReceivesHover)
+                next.push(c);
+        this.Apply();
+    }
+    /** `next` becomes the hovered set: the ones that left get HoverChanged(false), then the new ones (true). */
+    Apply() {
+        const now = this.Hovered, next = this.next;
+        if (now.length === next.length) {
+            let same = true;
+            for (let i = 0; i < now.length && same; i++)
+                same = now[i] === next[i];
+            if (same)
+                return;
+        }
+        const was = now.splice(0);
+        now.push(...next);
+        for (const c of was)
+            if (now.indexOf(c) < 0)
+                c.ApplyHover(false);
+        for (const c of now)
+            if (was.indexOf(c) < 0)
+                c.ApplyHover(true);
+    }
+}

package/dist/core/KeyboardManager.d.ts

@@ -20,6 +20,19 @@ export declare class KeyboardManager {
     static AttachToKeyboard(): void;
     static Subscribe(down: (key: InputKey, e: KeyboardEvent) => void, char: (ch: string, e: KeyboardEvent) => void, up?: (key: InputKey, e: KeyboardEvent) => void): void;
     static Unsubscribe(down: (key: InputKey, e: KeyboardEvent) => void, char: (ch: string, e: KeyboardEvent) => void, up?: (key: InputKey, e: KeyboardEvent) => void): void;
+    /**
+     * Hooks observe keys, they never take them from the element that owns them (C# 845b26e9, GitHub #231). True when a
+     * focused DOM element is the key's target: a page input, textarea, select, button, link or contenteditable, an
+     * accessibility overlay node, the drawn editor's hidden textarea. False when the key goes to the page itself (body,
+     * html) or the canvas. A handler that acts on keys (edits, moves, calls preventDefault) skips owned keys, except
+     * those of its own element.
+     */
+    static IsOwnedByElement(e: KeyboardEvent): boolean;
+    /**
+     * The key belongs to the input method (an IME composition, a soft keyboard): isComposing, keyCode 229, key "Process"
+     * or "Unidentified". Its result arrives as input events (TextInputProxy), never act on the key itself.
+     */
+    static IsInputMethodKey(e: KeyboardEvent): boolean;
     /** JS blurExternalTextInput: a page text input outside the canvas would keep receiving the keys. */
     static BlurExternalTextInput(): void;
 }

package/dist/core/KeyboardManager.js

@@ -45,6 +45,24 @@ export class KeyboardManager {
         if (up)
             KeyboardManager.keyUp.delete(up);
     }
+    /**
+     * Hooks observe keys, they never take them from the element that owns them (C# 845b26e9, GitHub #231). True when a
+     * focused DOM element is the key's target: a page input, textarea, select, button, link or contenteditable, an
+     * accessibility overlay node, the drawn editor's hidden textarea. False when the key goes to the page itself (body,
+     * html) or the canvas. A handler that acts on keys (edits, moves, calls preventDefault) skips owned keys, except
+     * those of its own element.
+     */
+    static IsOwnedByElement(e) {
+        const tag = e.target?.tagName;
+        return !!tag && tag !== "BODY" && tag !== "HTML" && tag !== "CANVAS";
+    }
+    /**
+     * The key belongs to the input method (an IME composition, a soft keyboard): isComposing, keyCode 229, key "Process"
+     * or "Unidentified". Its result arrives as input events (TextInputProxy), never act on the key itself.
+     */
+    static IsInputMethodKey(e) {
+        return e.isComposing || e.keyCode === 229 || e.key === "Process" || e.key === "Unidentified";
+    }
     /** JS blurExternalTextInput: a page text input outside the canvas would keep receiving the keys. */
     static BlurExternalTextInput() {
         const a = typeof document !== "undefined" ? document.activeElement : null;