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

package/dist/controls/SkiaBackdrop.d.ts

@@ -8,6 +8,8 @@ import { SkiaLayout } from "./SkiaLayout";
  * on every frame it is drawn in; inside a cached parent it is re-recorded with that parent).
  */
 export declare class SkiaBackdrop extends SkiaLayout {
+    /** Samples what is drawn below: a composite above redraws it whole when something inside changes (drawnui-cross 6m). */
+    protected get SamplesContent(): boolean;
     Blur: number;
     Brightness: number;
     /** Snapshot the surface currently drawn into (true) or the on-screen surface (false). */

package/dist/controls/SkiaBackdrop.js

@@ -8,6 +8,8 @@ import { SkiaLayout } from "./SkiaLayout";
  * on every frame it is drawn in; inside a cached parent it is re-recorded with that parent).
  */
 export class SkiaBackdrop extends SkiaLayout {
+    /** Samples what is drawn below: a composite above redraws it whole when something inside changes (drawnui-cross 6m). */
+    get SamplesContent() { return true; }
     Blur = 5;
     Brightness = 1;
     /** Snapshot the surface currently drawn into (true) or the on-screen surface (false). */

package/dist/controls/SkiaButton.d.ts

@@ -10,6 +10,8 @@ import { type PrebuiltControlStyle, type ResolvedControlStyle } from "../core/Co
  * PanThreshold. Press feedback = ApplyEffect (ripple), no darkening.
  */
 export declare class SkiaButton extends SkiaLayout {
+    /** Takes mouse hover unless ReceivesHover is set false (C# ReceivesHoverByDefault). */
+    protected ReceivesHoverByDefault(): boolean;
     static PanThreshold: number;
     Text: string;
     /** Look of the default content (C# SkiaButton.ControlStyle): background, corners, font, minimum size when left unset. */
@@ -24,7 +26,17 @@ export declare class SkiaButton extends SkiaLayout {
     StrokeColor: Color;
     StrokeWidth: number;
     IsPressed: boolean;
-    IsDisabled: boolean;
+    private respondsToGestures;
+    /**
+     * False switches the button off for the user: taps, presses and keyboard activation do nothing (no Tapped, Down, Up),
+     * a tap on it does not reach controls under it, and screen readers report it disabled. Code can still change it.
+     * Same property as on toggles, sliders, scrolls and drawers (drawnui-cross 6w). Default true.
+     */
+    get RespondsToGestures(): boolean;
+    set RespondsToGestures(v: boolean);
+    /** @deprecated The opposite of RespondsToGestures, which every control uses: set `RespondsToGestures = false`. */
+    get IsDisabled(): boolean;
+    set IsDisabled(v: boolean);
     LockPanning: boolean;
     /** Touch feedback played on Down (DrawnUi SkiaButton.ApplyEffect). */
     ApplyEffect: SkiaTouchAnimation;
@@ -41,10 +53,15 @@ export declare class SkiaButton extends SkiaLayout {
     static DefaultAccessibilityRole?: string;
     protected DefaultAccessibilityLabel(): string | undefined;
     protected DefaultAccessibilityCanInteract(): boolean;
+    /** With RespondsToGestures = false the button ignores taps, keyboard navigation skips it and it is reported disabled. */
+    protected AcceptsInput(): boolean;
     /** The button's own BackgroundColor/CornerRadius/Stroke are the frame's; the button itself paints nothing. */
     protected PaintBackground(): void;
     get UsingControlStyle(): ResolvedControlStyle;
-    /** C# Create*StyleContent defaults: accent, corner radius, font size/weight, minimum content size. */
+    /**
+     * C# Create*StyleContent defaults: accent, corner radius, font size/weight, minimum content size.
+     * Every C# style calls SetDefaultMinimumContentSize(100, minH), so the width floor is 100 everywhere.
+     */
     private static Look;
     protected MeasureAbsolute(w: number, h: number, scale: number): ScaledSize;
     /** The frame sits under the padding box: arrange children in the full rect, the label centered inside padding. */

package/dist/controls/SkiaButton.js

@@ -10,6 +10,8 @@ import { ResolveControlStyle } from "../core/ControlStyle";
  * PanThreshold. Press feedback = ApplyEffect (ripple), no darkening.
  */
 export class SkiaButton extends SkiaLayout {
+    /** Takes mouse hover unless ReceivesHover is set false (C# ReceivesHoverByDefault). */
+    ReceivesHoverByDefault() { return true; }
     static PanThreshold = 5;
     Text = "";
     /** Look of the default content (C# SkiaButton.ControlStyle): background, corners, font, minimum size when left unset. */
@@ -24,7 +26,20 @@ export class SkiaButton extends SkiaLayout {
     StrokeColor = Colors.Transparent;
     StrokeWidth = 0;
     IsPressed = false;
-    IsDisabled = false;
+    respondsToGestures = true;
+    /**
+     * False switches the button off for the user: taps, presses and keyboard activation do nothing (no Tapped, Down, Up),
+     * a tap on it does not reach controls under it, and screen readers report it disabled. Code can still change it.
+     * Same property as on toggles, sliders, scrolls and drawers (drawnui-cross 6w). Default true.
+     */
+    get RespondsToGestures() { return this.respondsToGestures; }
+    set RespondsToGestures(v) { if (this.respondsToGestures !== v) {
+        this.respondsToGestures = v;
+        this.NotifyAccessibility();
+    } }
+    /** @deprecated The opposite of RespondsToGestures, which every control uses: set `RespondsToGestures = false`. */
+    get IsDisabled() { return !this.respondsToGestures; }
+    set IsDisabled(v) { this.RespondsToGestures = !v; }
     LockPanning = false;
     /** Touch feedback played on Down (DrawnUi SkiaButton.ApplyEffect). */
     ApplyEffect = "Ripple"; // C# default
@@ -49,22 +64,32 @@ export class SkiaButton extends SkiaLayout {
         this.label.VerticalOptions = "Center";
         this.AddSubView(this.frame);
         this.AddSubView(this.label);
+        // C# ButtonLabel is styled when the button builds its content, and ApplyProperties then overwrites FontFamily with
+        // the button's own (empty by default) value, which the style no longer touches. Same order here: style the caption
+        // now, MeasureAbsolute below pushes SkiaButton.FontFamily over it every measure.
+        this.frame.ApplyInitialStyles(true);
+        this.label.ApplyInitialStyles(true);
     }
     /** Set to `Aria.RoleButton` to expose every button (React extension). */
     static DefaultAccessibilityRole;
     DefaultAccessibilityLabel() { return this.Text || undefined; }
-    DefaultAccessibilityCanInteract() { return !this.IsDisabled; }
+    DefaultAccessibilityCanInteract() { return this.respondsToGestures; }
+    /** With RespondsToGestures = false the button ignores taps, keyboard navigation skips it and it is reported disabled. */
+    AcceptsInput() { return this.respondsToGestures; }
     /** The button's own BackgroundColor/CornerRadius/Stroke are the frame's; the button itself paints nothing. */
     PaintBackground() { }
     get UsingControlStyle() { return ResolveControlStyle(this.ControlStyle); }
-    /** C# Create*StyleContent defaults: accent, corner radius, font size/weight, minimum content size. */
+    /**
+     * C# Create*StyleContent defaults: accent, corner radius, font size/weight, minimum content size.
+     * Every C# style calls SetDefaultMinimumContentSize(100, minH), so the width floor is 100 everywhere.
+     */
     static Look(s) {
         switch (s) {
-            case "Cupertino": return { bg: "#007AFF", radius: 8, font: 17, weight: 600, minH: 36, shadow: new SkiaShadow({ X: 0, Y: 1, Blur: 2, Opacity: 0.2, Color: Colors.Black }) };
-            case "Material": return { bg: "#2196F3", radius: 4, font: 14, weight: 0, minH: 40, shadow: new SkiaShadow({ X: 0, Y: 2, Blur: 4, Opacity: 0.3, Color: Colors.Black }) };
-            case "Material3": return { bg: "#6750A4", radius: 20, font: 14, weight: 0, minH: 40 };
-            case "Windows": return { bg: "#0078D7", radius: 4, font: 15, weight: 500, minH: 32, shadow: new SkiaShadow({ X: 0, Y: 1, Blur: 1, Opacity: 0.2, Color: Colors.Black }) };
-            default: return { bg: "#DC143C", radius: 8, font: 15, weight: 0, minH: 41 };
+            case "Cupertino": return { bg: "#007AFF", radius: 8, font: 17, weight: 600, minW: 100, minH: 36, shadow: new SkiaShadow({ X: 0, Y: 1, Blur: 2, Opacity: 0.2, Color: Colors.Black }) };
+            case "Material": return { bg: "#2196F3", radius: 4, font: 14, weight: 0, minW: 100, minH: 40, shadow: new SkiaShadow({ X: 0, Y: 2, Blur: 4, Opacity: 0.3, Color: Colors.Black }) };
+            case "Material3": return { bg: "#6750A4", radius: 20, font: 14, weight: 0, minW: 100, minH: 40 };
+            case "Windows": return { bg: "#0078D7", radius: 4, font: 15, weight: 500, minW: 100, minH: 32, shadow: new SkiaShadow({ X: 0, Y: 1, Blur: 1, Opacity: 0.2, Color: Colors.Black }) };
+            default: return { bg: "#DC143C", radius: 8, font: 15, weight: 0, minW: 100, minH: 41 };
         }
     }
     MeasureAbsolute(w, h, scale) {
@@ -75,7 +100,12 @@ export class SkiaButton extends SkiaLayout {
         this.frame.StrokeWidth = this.StrokeWidth;
         if (this.frame.Shadows[0] !== look.shadow)
             this.frame.Shadows = look.shadow ? [look.shadow] : [];
-        if (this.MinimumHeightRequest < 0 && this.UsingControlStyle !== "Unset")
+        // C# SetDefaultMinimumContentSize(100, minH) from the style builder: a style default only where the app left the
+        // size unset, skipped on a Fill axis. C# adds Margins because it compares the minimum against a margin-inclusive
+        // size; here Measure applies it to the margin-excluded size and adds the margin after, so the plain value is used.
+        if (this.WidthRequest < 0 && this.MinimumWidthRequest < 0 && this.HorizontalOptions !== "Fill")
+            this.MinimumWidthRequest = look.minW;
+        if (this.HeightRequest < 0 && this.MinimumHeightRequest < 0 && this.VerticalOptions !== "Fill")
             this.MinimumHeightRequest = look.minH;
         this.label.Text = this.Text;
         this.label.TextColor = this.TextColor;
@@ -113,8 +143,8 @@ export class SkiaButton extends SkiaLayout {
         this.Repaint();
     }
     ProcessGestures(args, apply) {
-        if (this.IsDisabled)
-            return null;
+        if (!this.respondsToGestures)
+            return this.BlockedGestureResult(args); // no press, no Down / Up / Tapped; a tap on it stops here
         const point = args.Event.Location;
         if (args.Type === "Down") {
             this.IsPressed = true;

package/dist/controls/SkiaCarousel.d.ts

@@ -15,6 +15,8 @@ export interface SnapPoint {
  * `DynamicSize` sizes an auto-sized carousel from the selected slide, `SwipeSpeed` / `LinearSpeedMs` tune the snap.
  */
 export declare class SkiaCarousel extends SnappingLayout {
+    /** Takes mouse hover unless ReceivesHover is set false (C# ReceivesHoverByDefault). */
+    protected ReceivesHoverByDefault(): boolean;
     IsVertical: boolean;
     /** Side padding in points so the previous/next slides peek in. */
     SidesOffset: number;
@@ -99,7 +101,7 @@ export declare class SkiaCarousel extends SnappingLayout {
     private GetVirtualSnapPoints;
     protected GetVirtualAnchor(current: SKPoint): SnapPoint;
     protected FindNearestAnchorInternal(current: SKPoint, velocity: SKPoint): SKPoint;
-    /** C# SkiaCarousel.ScrollToNearestAnchor: velocity below 100 counts as none; looped snaps around virtual anchors. */
+    /** C# SkiaCarousel.ScrollToNearestAnchor: velocity below SnapVelocityThreshold counts as none; looped snaps around virtual anchors. */
     ScrollToNearestAnchor(location: SKPoint, velocity: SKPoint): void;
     /** C# SkiaCarousel.SelectNextAnchor: base choice, plus a wrap to the virtual anchor at the strip borders when looped. */
     SelectNextAnchor(origin: SKPoint, velocity: SKPoint): SKPoint;
@@ -127,6 +129,12 @@ export declare class SkiaCarousel extends SnappingLayout {
     /** C# RenderViewsList: position every slide, draw the visible ones (+ neighbours when PreloadNeighboors), release the rest. */
     protected Paint(ctx: DrawingContext): void;
     private SlideRect;
+    /**
+     * Whether the slide at `index` takes part in hit-testing for the frame being rendered (C# IsSlideHitTestable).
+     * Every slide drawn on screen does by default; a carousel whose slides share one rect (SkiaShaderCarousel) narrows
+     * this to the slide the user actually sees.
+     */
+    protected IsSlideHitTestable(_index: number): boolean;
     protected GetGestureListeners(): readonly SkiaControl[];
     ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
     protected DefaultAccessibilityLabel(): string | undefined;

package/dist/controls/SkiaCarousel.js

@@ -11,6 +11,8 @@ import { SnappingLayout } from "./SnappingLayout";
  * `DynamicSize` sizes an auto-sized carousel from the selected slide, `SwipeSpeed` / `LinearSpeedMs` tune the snap.
  */
 export class SkiaCarousel extends SnappingLayout {
+    /** Takes mouse hover unless ReceivesHover is set false (C# ReceivesHoverByDefault). */
+    ReceivesHoverByDefault() { return true; }
     IsVertical = false;
     /** Side padding in points so the previous/next slides peek in. */
     SidesOffset = 0;
@@ -230,9 +232,10 @@ export class SkiaCarousel extends SnappingLayout {
         }
         return super.FindNearestAnchorInternal(current, velocity);
     }
-    /** C# SkiaCarousel.ScrollToNearestAnchor: velocity below 100 counts as none; looped snaps around virtual anchors. */
+    /** C# SkiaCarousel.ScrollToNearestAnchor: velocity below SnapVelocityThreshold counts as none; looped snaps around virtual anchors. */
     ScrollToNearestAnchor(location, velocity) {
-        velocity = new SKPoint(Math.abs(velocity.X) < 100 ? 0 : velocity.X, Math.abs(velocity.Y) < 100 ? 0 : velocity.Y);
+        const t = this.SnapVelocityThreshold;
+        velocity = new SKPoint(Math.abs(velocity.X) < t ? 0 : velocity.X, Math.abs(velocity.Y) < t ? 0 : velocity.Y);
         if (this.ApplyLoopedLogic) {
             const origin = this.FindNearestAnchorInternal(location, velocity);
             const target = this.SelectNextAnchor(origin, velocity);
@@ -504,7 +507,7 @@ export class SkiaCarousel extends SnappingLayout {
                 view.Measure(inner.Width, inner.Height, scale); // recycled cells carry new content
             view.Arrange(this.SlideRect(inner, this.SlideOffset(cell.offset), scale), view.WidthRequest, view.HeightRequest, scale);
             view.Render(ctx);
-            if (cell.visible)
+            if (cell.visible && this.IsSlideHitTestable(cell.index))
                 visible.push(view);
         }
         this.visibleViews = visible;
@@ -514,6 +517,12 @@ export class SkiaCarousel extends SnappingLayout {
             ? SKRect.Create(inner.Left, inner.Top + offset.Y * scale, inner.Width, inner.Height)
             : SKRect.Create(inner.Left + offset.X * scale, inner.Top, inner.Width, inner.Height);
     }
+    /**
+     * Whether the slide at `index` takes part in hit-testing for the frame being rendered (C# IsSlideHitTestable).
+     * Every slide drawn on screen does by default; a carousel whose slides share one rect (SkiaShaderCarousel) narrows
+     * this to the slide the user actually sees.
+     */
+    IsSlideHitTestable(_index) { return true; }
     GetGestureListeners() { return this.visibleViews; }
     // ---- gestures (port of C# SkiaCarousel.ProcessGestures) ----
     ProcessGestures(args, apply) {
@@ -555,6 +564,10 @@ export class SkiaCarousel extends SnappingLayout {
                 if (!this.IsUserPanning) {
                     const movex = Math.abs(e.Distance.Total.X), movey = Math.abs(e.Distance.Total.Y);
                     const along = this.IsVertical ? movey : movex, across = this.IsVertical ? movex : movey;
+                    // a first move too short to tell the direction decides nothing yet (a 1 CSS px move at devicePixelRatio 2):
+                    // marking it wrong kept the whole drag dead until the next press (DrawnUi.Rust c6b22e3; C# decides on every move)
+                    if (along < scale * 2 && across < scale * 2)
+                        return consumedDefault;
                     if (along < scale * 2 || across > along) {
                         this.wrongDirection = true;
                         return consumedDefault;

package/dist/controls/SkiaCheckbox.d.ts

@@ -15,7 +15,6 @@ export declare class SkiaCheckbox extends SkiaToggle {
     get ColorCheckOn(): Color;
     set ColorCheckOn(v: Color);
     protected StyleDefault(name: "ColorThumbOn" | "ColorFrameOn" | "ColorThumbOff" | "ColorFrameOff"): Color | undefined;
-    private SetContentSize;
     protected CreateDefaultContent(): void;
     ApplyProperties(): void;
 }

package/dist/controls/SkiaCheckbox.js

@@ -27,12 +27,6 @@ export class SkiaCheckbox extends SkiaToggle {
         };
         return table[this.UsingControlStyle]?.[name];
     }
-    SetContentSize(w, h) {
-        if (this.WidthRequest < 0)
-            this.WidthRequest = w;
-        if (this.HeightRequest < 0)
-            this.HeightRequest = h;
-    }
     CreateDefaultContent() {
         const off = new SkiaShape();
         off.Tag = "FrameOff";

package/dist/controls/SkiaDrawer.d.ts

@@ -9,6 +9,8 @@ import { SnappingLayout } from "./SnappingLayout";
  * so it must be aligned to its edge by the parent (VerticalOptions="End" for FromBottom, etc.).
  */
 export declare class SkiaDrawer extends SnappingLayout {
+    /** Takes mouse hover unless ReceivesHover is set false (C# ReceivesHoverByDefault). */
+    protected ReceivesHoverByDefault(): boolean;
     Direction: DrawerDirection;
     /** Points that stay visible when closed. */
     HeaderSize: number;

package/dist/controls/SkiaDrawer.js

@@ -7,6 +7,8 @@ import { SnappingLayout } from "./SnappingLayout";
  * so it must be aligned to its edge by the parent (VerticalOptions="End" for FromBottom, etc.).
  */
 export class SkiaDrawer extends SnappingLayout {
+    /** Takes mouse hover unless ReceivesHover is set false (C# ReceivesHoverByDefault). */
+    ReceivesHoverByDefault() { return true; }
     Direction = "FromBottom";
     /** Points that stay visible when closed. */
     HeaderSize = 0;

package/dist/controls/SkiaEditor.d.ts

@@ -58,7 +58,8 @@ export declare class SkiaEditor extends SkiaShape {
     private readonly placeholder;
     private scrollX;
     private scrollY;
-    private blink;
+    /** The caret blinks on a timer, asleep between blinks: no frame runs while it waits (DrawnUi.Rust editor_rules). */
+    private blinkTimer;
     private caretVisible;
     private subscribed;
     private stubSelectionStop;
@@ -102,6 +103,9 @@ export declare class SkiaEditor extends SkiaShape {
     set CursorPosition(v: number);
     get SelectionLength(): number;
     set SelectionLength(v: number);
+    /** Shows the caret for a full half second, then blinks every 500 ms. */
+    private StartBlink;
+    private StopBlink;
     private OnCursorMoved;
     get IsFocused(): boolean;
     set IsFocused(v: boolean);
@@ -128,7 +132,14 @@ export declare class SkiaEditor extends SkiaShape {
     private LabelPoint;
     protected Paint(ctx: DrawingContext): void;
     ProcessGestures(args: SkiaGesturesParameters, apply: GestureEventProcessingInfo): SkiaControl | null;
+    /** A text field is a Tab stop by default, like a native text box, with no Tapped handler needed. */
+    protected DefaultAccessibilityCanInteract(): boolean;
+    /** Keyboard navigation reached the field (Tab) or left it: take the caret and the input sink like a native text box, or release them. */
+    OnAccessibilityFocused(focused: boolean): void;
+    /** Enter / Space on the field while it has no caret start editing; while editing they are text. */
     OnAccessibilityActivated(): void;
+    /** While editing, arrows, Home / End and PageUp / PageDown belong to the text: they never move a surrounding group. */
+    OnAccessibilityKey(_key: string): boolean;
     protected DefaultAccessibilityLabel(): string | undefined;
     Submit(): void;
     private ExecuteSubmit;

package/dist/controls/SkiaEditor.js

@@ -1,6 +1,5 @@
 import { SKPoint } from "../core/Gestures";
 import { Super } from "../core/Super";
-import { SkiaValueAnimator } from "../core/Animators";
 import { ResolveControlStyle } from "../core/ControlStyle";
 import { KeyboardManager } from "../core/KeyboardManager";
 import { TextInputProxy } from "../core/TextInputProxy";
@@ -67,13 +66,19 @@ export class SkiaEditor extends SkiaShape {
     placeholder = new SkiaLabel();
     scrollX = 0;
     scrollY = 0;
-    blink = new SkiaValueAnimator(this);
+    /** The caret blinks on a timer, asleep between blinks: no frame runs while it waits (DrawnUi.Rust editor_rules). */
+    blinkTimer = 0;
     caretVisible = true;
     subscribed = false;
     stubSelectionStop = -1;
     selectionMovingEdge = -1;
     onKeyDown = (key, e) => this.OnKeyDown(key, e);
-    onKeyChar = (ch, e) => { e.preventDefault(); this.StubTypeText(ch); };
+    onKeyChar = (ch, e) => {
+        if (KeyboardManager.IsOwnedByElement(e) || KeyboardManager.IsInputMethodKey(e))
+            return; // a page control or the IME owns it
+        e.preventDefault();
+        this.StubTypeText(ch);
+    };
     selectionAnchor = -1;
     dragSelecting = false;
     styleApplied = {};
@@ -93,15 +98,6 @@ export class SkiaEditor extends SkiaShape {
         this.placeholder.IsVisible = false;
         this.AddSubView(this.placeholder);
         this.AddSubView(this.Label);
-        this.blink.mMinValue = 0;
-        this.blink.mMaxValue = 1;
-        this.blink.Speed = 1000;
-        this.blink.Repeat = -1;
-        this.blink.OnUpdated = (v) => { const visible = v < 0.5; if (visible !== this.caretVisible) {
-            this.caretVisible = visible;
-            this.InvalidateCache();
-            this.RepaintComposition();
-        } };
         this.ApplyControlStyleVisuals();
         this.UpdateLabel();
     }
@@ -192,9 +188,22 @@ export class SkiaEditor extends SkiaShape {
         this.selectionLength = l;
         this.OnCursorMoved();
     }
+    /** Shows the caret for a full half second, then blinks every 500 ms. */
+    StartBlink() {
+        this.StopBlink();
+        this.caretVisible = true;
+        this.blinkTimer = window.setInterval(() => { this.caretVisible = !this.caretVisible; this.InvalidateCache(); this.RepaintComposition(); }, 500);
+    }
+    StopBlink() { if (this.blinkTimer) {
+        clearInterval(this.blinkTimer);
+        this.blinkTimer = 0;
+    } }
     OnCursorMoved() {
         this.ScrollToCaret();
-        this.caretVisible = true;
+        if (this.isFocused)
+            this.StartBlink();
+        else
+            this.caretVisible = true;
         TextInputProxy.Sync(this);
         this.CursorMoved?.(this);
         this.InvalidateCache();
@@ -210,8 +219,7 @@ export class SkiaEditor extends SkiaShape {
                 SkiaEditor.Focused.IsFocused = false;
             SkiaEditor.Focused = this;
             this.SetFocusNative(true);
-            this.caretVisible = true;
-            this.blink.Start();
+            this.StartBlink();
         }
         else {
             if (SkiaEditor.Focused === this)
@@ -220,7 +228,7 @@ export class SkiaEditor extends SkiaShape {
             this.dragSelecting = false;
             this.stubSelectionStop = -1;
             this.selectionMovingEdge = -1;
-            this.blink.Stop();
+            this.StopBlink();
             this.SetFocusNative(false);
         }
         this.FocusChanged?.(this, v);
@@ -305,6 +313,14 @@ export class SkiaEditor extends SkiaShape {
     MeasureAbsolute(w, h, scale) {
         const px = this.Padding.HorizontalThickness * scale, py = this.Padding.VerticalThickness * scale;
         const innerW = isFinite(w) ? Math.max(0, w - px) : Infinity;
+        // Single-line: the label is Start-aligned and measures to its content, so Center / End alignment had nothing to
+        // align in. Give it the field as a MINIMUM: short text centers in the field, longer text still grows past it and
+        // scrolls (C# 2e334ddd).
+        const minWidth = !this.IsMultiline && this.horizontalTextAlignment !== "Start" && isFinite(innerW) && innerW > 0 ? innerW / scale : -1;
+        if (this.Label.MinimumWidthRequest !== minWidth) {
+            this.Label.MinimumWidthRequest = minWidth;
+            this.Label.NeedMeasure = true;
+        }
         const labelSize = this.Label.Measure(this.IsMultiline ? innerW : Infinity, Infinity, scale);
         if (this.placeholder.IsVisible)
             this.placeholder.Measure(innerW, Infinity, scale);
@@ -500,7 +516,15 @@ export class SkiaEditor extends SkiaShape {
         }
         return this;
     }
-    OnAccessibilityActivated() { this.IsFocused = true; }
+    /** A text field is a Tab stop by default, like a native text box, with no Tapped handler needed. */
+    DefaultAccessibilityCanInteract() { return true; }
+    /** Keyboard navigation reached the field (Tab) or left it: take the caret and the input sink like a native text box, or release them. */
+    OnAccessibilityFocused(focused) { this.IsFocused = focused; }
+    /** Enter / Space on the field while it has no caret start editing; while editing they are text. */
+    OnAccessibilityActivated() { if (!this.IsFocused)
+        this.OnAccessibilityFocused(true); }
+    /** While editing, arrows, Home / End and PageUp / PageDown belong to the text: they never move a surrounding group. */
+    OnAccessibilityKey(_key) { return this.IsFocused; }
     DefaultAccessibilityLabel() { return this.text || this.placeholderText || undefined; }
     // ---- editing API (C# names) ----
     Submit() {
@@ -580,6 +604,10 @@ export class SkiaEditor extends SkiaShape {
     OnKeyDown(key, e) {
         const shift = KeyboardManager.IsShiftPressed, ctrl = KeyboardManager.IsControlPressed, alt = KeyboardManager.IsAltPressed;
         const handled = () => e.preventDefault();
+        // keys of another element (a page field or button, an overlay node) and of the input method are not the editor's:
+        // a composition keeps its arrows, Escape and Backspace (C# 845b26e9, GitHub #231)
+        if (KeyboardManager.IsInputMethodKey(e) || (KeyboardManager.IsOwnedByElement(e) && !TextInputProxy.IsProxyTarget(e.target)))
+            return;
         // with the hidden textarea focused these keys become input / clipboard events there and are applied from those
         if (TextInputProxy.IsActive(this) && TextInputProxy.IsProxyTarget(e.target) && (key === "Backspace" || key === "Delete" || key === "Enter" || key === "NumpadEnter" || (ctrl && (key === "KeyC" || key === "KeyX" || key === "KeyV"))))
             return;
@@ -794,8 +822,7 @@ export class SkiaEditor extends SkiaShape {
         return out;
     }
     OnDisposing() {
-        this.blink.Stop();
-        this.blink.Dispose();
+        this.StopBlink();
         if (SkiaEditor.Focused === this)
             SkiaEditor.Focused = undefined;
         this.SetFocusNative(false);

package/dist/controls/SkiaGif.d.ts

@@ -14,6 +14,8 @@ export declare class GifAnimation {
     private positionsMs;
     /** Negative = the last frame. */
     SeekFrame(frame: number): void;
+    /** Start (ms) of the frame after the one at `msTime`; DurationMs after the last one. */
+    NextFrameStartMs(msTime: number): number;
     GetFrameNumber(msTime: number): number;
     /** Decodes every frame of an encoded GIF (CanvasKit AnimatedImage). */
     LoadFromBytes(bytes: ArrayBuffer): void;
@@ -37,6 +39,7 @@ export declare class SkiaGif extends AnimatedFramesRenderer {
     set Source(v: string);
     Start(delayMs?: number): void;
     protected OnAnimatorUpdated(value: number): void;
+    protected NextChangeMs(value: number): number | undefined;
     /** Seeks by time in ms (the animator range is 0..DurationMs). */
     protected OnAnimatorSeeking(time: number): void;
     protected OnAnimatorInitializing(): void;

package/dist/controls/SkiaGif.js

@@ -21,6 +21,13 @@ export class GifAnimation {
         if (frame >= 0 && frame <= this.TotalFrames - 1)
             this.Frame = this.Frames[frame];
     }
+    /** Start (ms) of the frame after the one at `msTime`; DurationMs after the last one. */
+    NextFrameStartMs(msTime) {
+        for (let i = 0; i < this.positionsMs.length; i++)
+            if (msTime < this.positionsMs[i])
+                return this.positionsMs[i];
+        return this.DurationMs;
+    }
     GetFrameNumber(msTime) {
         if (this.positionsMs.length === 0 || this.DurationMs <= 0)
             return 0;
@@ -87,7 +94,9 @@ export class SkiaGif extends AnimatedFramesRenderer {
     loadGeneration = 0;
     constructor() {
         super();
-        this.UseCache = "ImageDoubleBuffered";
+        // C# ImageDoubleBuffered pays off where a thread bakes the bitmap; on the web it is one offscreen pass per frame
+        // change, so the web engines draw a GIF frame with no cache (drawnui-cross rule 3)
+        this.UseCache = "None";
     }
     get Source() { return this.source; }
     set Source(v) { if (this.source !== v) {
@@ -97,6 +106,7 @@ export class SkiaGif extends AnimatedFramesRenderer {
     Start(delayMs = 0) { if ((this.Animation?.TotalFrames ?? 0) > 0)
         super.Start(delayMs); }
     OnAnimatorUpdated(value) { this.Seek(value); }
+    NextChangeMs(value) { return this.Animation && this.Animation.DurationMs > 0 ? this.Animation.NextFrameStartMs(value) : undefined; }
     /** Seeks by time in ms (the animator range is 0..DurationMs). */
     OnAnimatorSeeking(time) {
         const a = this.Animation;
@@ -158,7 +168,7 @@ export class SkiaGif extends AnimatedFramesRenderer {
     async LoadSource(source) {
         if (!source)
             return undefined;
-        const r = await fetch(source);
+        const r = await fetch(Super.ResolveAssetUrl(source));
         if (!r.ok)
             throw new Error(`${r.status} ${source}`);
         const animation = new GifAnimation();

package/dist/controls/SkiaImage.js

@@ -164,20 +164,25 @@ export class SkiaImage extends SkiaControl {
     MeasureAbsolute(widthConstraint, heightConstraint, scale) {
         const img = this.LoadedSource;
         let w = widthConstraint, h = heightConstraint;
-        if (img) {
-            const aspect = img.width() / img.height();
-            if (!isFinite(w) && isFinite(h))
-                w = h * aspect;
-            else if (!isFinite(h) && isFinite(w))
-                h = w / aspect;
+        // nothing loaded: the box it is offered (C# OnMeasuring), an unbounded side 0
+        if (!img) {
+            this.AspectScale = { X: 0, Y: 0 };
+            return ScaledSize.FromPixels(isFinite(w) ? w : 0, isFinite(h) ? h : 0, scale);
         }
-        if (!isFinite(w) || !isFinite(h)) {
+        const iw = img.width(), ih = img.height();
+        if (!isFinite(w) && isFinite(h))
+            w = h * iw / ih;
+        else if (!isFinite(h) && isFinite(w))
+            h = w * ih / iw;
+        if (!isFinite(w) || !isFinite(h) || iw <= 0 || ih <= 0) {
             this.AspectScale = { X: 0, Y: 0 };
             return ScaledSize.FromPixels(0, 0, scale);
         }
-        if (img)
-            this.AspectScale = SkiaImage.RescaleAspect(img.width(), img.height(), SKRect.Create(0, 0, w, h), this.Aspect);
-        return ScaledSize.FromPixels(w, h, scale);
+        // C# OnMeasuring / DrawnUi.Rust: an auto-sized side is the bitmap's pixels scaled by the aspect for this box, never
+        // more than the box (a Fill or requested side still takes its box in Measure)
+        const s = SkiaImage.RescaleAspect(iw, ih, SKRect.Create(0, 0, w, h), this.Aspect);
+        this.AspectScale = s;
+        return ScaledSize.FromPixels(Math.min(iw * s.X, w), Math.min(ih * s.Y, h), scale);
     }
     Paint(ctx) {
         const img = this.LoadedSource;