drawnui-react 0.1.0-preview.1 → 0.1.0-preview.11

package/dist/core/Gestures.js

@@ -18,9 +18,20 @@ export class DistanceInfo {
     Total = SKPoint.Empty;
     Velocity = SKPoint.Empty;
 }
+/** AppoMobi.Gestures PointerData: the device and button behind a Down / Up / Tapped (every button is delivered). */
+export class PointerData {
+    Button = "Left";
+    /** 1 = Left, 2 = Right, 3 = Middle, 4+ = extended, like AppoMobi.Gestures. */
+    ButtonNumber = 1;
+    DeviceType = "Mouse";
+    /** DOM `buttons` bitmask of the buttons held (1 left, 2 right, 4 middle, 8 back, 16 forward). */
+    PressedButtons = 0;
+}
 /** AppoMobi.Gestures TouchActionEventArgs. */
 export class TouchActionEventArgs {
     Id = 0;
+    /** Device and button of this event (mouse, pen, touch); undefined for wheel. */
+    Pointer;
     Type = "Pressed";
     /** Pixels. */
     Location = SKPoint.Empty;
@@ -34,6 +45,11 @@ export class TouchActionEventArgs {
     DeltaTimeMs = 0;
     /** Mouse wheel: Delta > 0 = wheel down (browser deltaY sign). */
     Wheel = { Delta: 0 };
+    /**
+     * AppoMobi TouchActionEventArgs.Handled: set by a control that actually used the event. The canvas prevents the
+     * browser default (the page scrolling under the wheel) only for a Handled event in `Gestures="Enabled"`.
+     */
+    Handled = false;
     /** Same as the .NET helper: derives Start/End/Delta/Total from the previous event of the same pointer. */
     static FillDistanceInfo(current, previous) {
         if (!previous) {
@@ -91,7 +107,33 @@ export class SkiaGesturesInfo {
         this.Info = Info;
     }
 }
-/** DrawnUi ControlTappedEventArgs. */
+/**
+ * Arguments of SkiaControl.ContextMenu / Canvas.ContextMenu: a browser `contextmenu` request on the canvas (right
+ * click, long press on touch, the Menu key). Handlers return true to take it: the browser's own menu ("Save image")
+ * is then suppressed; otherwise it shows as usual.
+ */
+export class ContextMenuEventArgs {
+    Location;
+    Pixels;
+    Source;
+    Native;
+    /** Deepest control under the point that had a ContextMenu handler (set while routing). */
+    Control;
+    /** Point inside Control, in pixels relative to its DrawingRect origin (set while routing). */
+    Local = SKPoint.Empty;
+    constructor(
+    /** Point on the canvas, in points (CSS px). */
+    Location, 
+    /** Same point in pixels (canvas space). */
+    Pixels, Source, 
+    /** The DOM event: modifiers, target, preventDefault if you need it yourself. */
+    Native) {
+        this.Location = Location;
+        this.Pixels = Pixels;
+        this.Source = Source;
+        this.Native = Native;
+    }
+}
 export class ControlTappedEventArgs {
     Control;
     Parameters;

package/dist/core/SkiaControl.d.ts

@@ -1,9 +1,9 @@
 import type { Canvas as SkCanvas, Image, Path, SkPicture, Surface } from "canvaskit-wasm";
 import { type Color, type LayoutOptions, SKRect, ScaledSize, type SkiaCacheType, type SkiaGradient, type SkiaTouchAnimation, Thickness } from "./Types";
-import { type IOverlayEffect } from "./Animators";
+import { type AnimatorBase, type IOverlayEffect } from "./Animators";
 import { Easing } from "./Easing";
 import type { Canvas } from "./Canvas";
-import { ControlTappedEventArgs, GestureEventProcessingInfo, type LockTouch, SKPoint, SkiaGesturesInfo, SkiaGesturesParameters } from "./Gestures";
+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. */
 export interface DrawingContext {
@@ -164,6 +164,11 @@ export declare class SkiaControl {
     AnimationTappedSpeed: number;
     /** Overlay effects drawn above this control's content every frame (ripple etc). */
     readonly PostAnimators: IOverlayEffect[];
+    /**
+     * C# PendingUnattachedAnimators: animators started while no Canvas was above this control yet (e.g. a game loop
+     * started in a constructor). They start on the control's first arrange, where C# starts them in SuperViewChanged.
+     */
+    PendingUnattachedAnimators?: AnimatorBase[];
     private visualEffects;
     /** Post-renderer effects among VisualEffects (C# EffectPostRenderers). */
     EffectPostRenderers: (SkiaEffect & IPostRendererEffect)[];
@@ -180,11 +185,24 @@ export declare class SkiaControl {
     /** Clip overlay effects to the control's shape (CreateClip). */
     ClipEffects: boolean;
     Tapped?: (sender: SkiaControl, e: ControlTappedEventArgs) => void;
+    /**
+     * Context-menu request over this control (right click, long press on touch, Menu key). Return true to handle it:
+     * the browser's own canvas menu is suppressed. Routed deepest child first, then parents, then Canvas.ContextMenu.
+     * Not in DrawnUi.Net (a web concept).
+     */
+    ContextMenu?: (sender: SkiaControl, e: ContextMenuEventArgs) => boolean | void;
     ChildTapped?: (sender: SkiaControl, e: ControlTappedEventArgs) => void;
     /** Raw gesture hook: set e.Consumed = true to stop propagation (not for Up). */
     ConsumeGestures?: (sender: SkiaControl, e: SkiaGesturesInfo) => void;
     Parent?: SkiaControl;
     /** Containers override; a leaf control cannot host children. */
+    private styledInitially;
+    /**
+     * C# ApplyInitialStyles: takes the property defaults registered with `ConfigureStyles` for this control's class.
+     * The reconciler calls it with `atConstruction` right after `new`, before the JSX props, so props win; a control
+     * built in code-behind is styled on its first measure and keeps whatever the code already set.
+     */
+    ApplyInitialStyles(atConstruction?: boolean): void;
     AddSubView(_control: SkiaControl): void;
     InsertSubView(_index: number, control: SkiaControl): void;
     RemoveSubView(_control: SkiaControl): void;
@@ -207,6 +225,8 @@ export declare class SkiaControl {
     protected MeasureAbsolute(_widthConstraint: number, _heightConstraint: number, scale: number): ScaledSize;
     /** Places MeasuredSize inside destination per Margin + Horizontal/VerticalOptions -> DrawingRect. */
     Arrange(destination: SKRect, _widthRequest: number, _heightRequest: number, scale: number): void;
+    /** C# SuperViewChanged: starts the animators queued before this control was attached. */
+    private StartPendingAnimators;
     private static nextAccessibilityId;
     /** Stable identity for the DOM overlay. */
     readonly AccessibilityId: number;
@@ -235,6 +255,11 @@ export declare class SkiaControl {
     get AccessibilityCanInteract(): boolean;
     set AccessibilityCanInteract(v: boolean);
     protected DefaultAccessibilityCanInteract(): boolean;
+    /**
+     * Whether the mouse at this point (pixels, relative to DrawingRect's origin) is over something tappable, for the
+     * host's pointer cursor. Default: the control as a whole (AccessibilityCanInteract); SkiaLabel adds its tappable spans.
+     */
+    WantsPointerCursor(_x: number, _y: number): boolean;
     /** aria-pressed for toggles; undefined = not a toggle. */
     get AccessibilityIsPressed(): boolean | undefined;
     set AccessibilityIsPressed(v: boolean | undefined);
@@ -364,12 +389,23 @@ export declare class SkiaControl {
      * cache holds its composited output, so those are staled before redrawing (DrawnUi RedrawCanvas + parent invalidation).
      */
     RepaintComposition(): void;
+    /**
+     * DrawnUi IsParentIndependent: this control's size never changes the layout around it, so its own invalidation
+     * stops here (ancestors composite again, nothing above re-measures). The parent re-measures it on draw when
+     * NeedMeasure is set. Used by SkiaScroll for its scroll bars.
+     */
+    IsParentIndependent: boolean;
     /** Size or content may have changed: this control and all ancestors remeasure and re-record. */
     InvalidateMeasure(): void;
     /** Hit rect in pixels (no transforms in this port, so it is DrawingRect). */
     get HitBoxAuto(): SKRect;
     HitIsInside(x: number, y: number): boolean;
     IsGestureForChild(child: SkiaControl, point: SKPoint): boolean;
+    /**
+     * Routes a context-menu request like a tap: visible, non-transparent children under the point first (top-most
+     * first, each in its own transformed space), then this control's ContextMenu handler. True = handled.
+     */
+    ProcessContextMenu(point: SKPoint, e: ContextMenuEventArgs): boolean;
     /** Children that may receive gestures, top-most LAST (layouts return their Views). */
     protected GetGestureListeners(): readonly SkiaControl[];
     private static readonly NoListeners;

package/dist/core/SkiaControl.js

@@ -1,4 +1,5 @@
 import { Super } from "./Super";
+import { SkiaStyles } from "./Styles";
 import { Colors, SKRect, ScaledSize, Thickness } from "./Types";
 import { RippleAnimator, SkiaValueAnimator } from "./Animators";
 import { Easing } from "./Easing";
@@ -198,6 +199,11 @@ export class SkiaControl {
     AnimationTappedSpeed = 0;
     /** Overlay effects drawn above this control's content every frame (ripple etc). */
     PostAnimators = [];
+    /**
+     * C# PendingUnattachedAnimators: animators started while no Canvas was above this control yet (e.g. a game loop
+     * started in a constructor). They start on the control's first arrange, where C# starts them in SuperViewChanged.
+     */
+    PendingUnattachedAnimators;
     // ---- visual effects (C# VisualEffects: attached SkiaEffect objects) ----
     visualEffects = [];
     /** Post-renderer effects among VisualEffects (C# EffectPostRenderers). */
@@ -238,12 +244,29 @@ export class SkiaControl {
     ClipEffects = true;
     // ---- gesture events (single handler each; C# events map to one callback prop) ----
     Tapped;
+    /**
+     * Context-menu request over this control (right click, long press on touch, Menu key). Return true to handle it:
+     * the browser's own canvas menu is suppressed. Routed deepest child first, then parents, then Canvas.ContextMenu.
+     * Not in DrawnUi.Net (a web concept).
+     */
+    ContextMenu;
     ChildTapped;
     /** Raw gesture hook: set e.Consumed = true to stop propagation (not for Up). */
     ConsumeGestures;
     // ---- tree ----
     Parent;
     /** Containers override; a leaf control cannot host children. */
+    styledInitially = false;
+    /**
+     * C# ApplyInitialStyles: takes the property defaults registered with `ConfigureStyles` for this control's class.
+     * The reconciler calls it with `atConstruction` right after `new`, before the JSX props, so props win; a control
+     * built in code-behind is styled on its first measure and keeps whatever the code already set.
+     */
+    ApplyInitialStyles(atConstruction = false) {
+        this.styledInitially = true;
+        if (!SkiaStyles.IsEmpty)
+            SkiaStyles.Apply(this, atConstruction);
+    }
     AddSubView(_control) { throw new Error(`DrawnUi: ${this.constructor.name} cannot host children`); }
     InsertSubView(_index, control) { this.AddSubView(control); }
     RemoveSubView(_control) { }
@@ -265,6 +288,8 @@ export class SkiaControl {
      * this is what keeps a cached tree from re-measuring text every frame.
      */
     Measure(widthConstraint, heightConstraint, scale) {
+        if (!this.styledInitially)
+            this.ApplyInitialStyles(false);
         if (!this.NeedMeasure && this.RenderingScale === scale
             && Object.is(this.lastWidthConstraint, widthConstraint) && Object.is(this.lastHeightConstraint, heightConstraint)) {
             return this.MeasuredSize;
@@ -343,10 +368,21 @@ export class SkiaControl {
         const y = availT + SkiaControl.Align(this.VerticalOptions, fullH, h);
         this.DrawingRect = SKRect.Create(x, y, w, h);
         this.OnLayoutChanged();
+        if (this.PendingUnattachedAnimators)
+            this.StartPendingAnimators();
         // DrawnUi OnLayoutReady: an accessible control registers itself on its first layout
         if (!this.registeredWithAccessibility && this.IsAccessibilityElement)
             this.NotifyAccessibility();
     }
+    /** C# SuperViewChanged: starts the animators queued before this control was attached. */
+    StartPendingAnimators() {
+        if (!this.Superview)
+            return;
+        const pending = this.PendingUnattachedAnimators;
+        this.PendingUnattachedAnimators = undefined;
+        for (const animator of pending)
+            animator.Start();
+    }
     // ---- accessibility (DrawnUi ISkiaAccessibilityNode) ----
     static nextAccessibilityId = 1;
     /** Stable identity for the DOM overlay. */
@@ -388,6 +424,11 @@ export class SkiaControl {
         this.AccessibilityChanged();
     } }
     DefaultAccessibilityCanInteract() { return !!this.Tapped; }
+    /**
+     * Whether the mouse at this point (pixels, relative to DrawingRect's origin) is over something tappable, for the
+     * host's pointer cursor. Default: the control as a whole (AccessibilityCanInteract); SkiaLabel adds its tappable spans.
+     */
+    WantsPointerCursor(_x, _y) { return this.AccessibilityCanInteract; }
     /** aria-pressed for toggles; undefined = not a toggle. */
     get AccessibilityIsPressed() { return this.accessibilityIsPressed; }
     set AccessibilityIsPressed(v) { if (this.accessibilityIsPressed !== v) {
@@ -1013,6 +1054,7 @@ export class SkiaControl {
         this.ownAnimations.clear();
         for (const e of [...this.PostAnimators])
             e.Stop?.();
+        this.PendingUnattachedAnimators = undefined;
         this.PostAnimators.length = 0;
         this.DestroyRenderingObject();
         this.compositeSurface?.delete();
@@ -1057,13 +1099,21 @@ export class SkiaControl {
         }
         this.Repaint();
     }
+    /**
+     * DrawnUi IsParentIndependent: this control's size never changes the layout around it, so its own invalidation
+     * stops here (ancestors composite again, nothing above re-measures). The parent re-measures it on draw when
+     * NeedMeasure is set. Used by SkiaScroll for its scroll bars.
+     */
+    IsParentIndependent = false;
     /** Size or content may have changed: this control and all ancestors remeasure and re-record. */
     InvalidateMeasure() {
         this.NeedMeasure = true;
         this.cacheDirty = true;
         this.compositeFull = true; // structure may change: a composite cannot patch it
         this.effectsMarginCache = undefined;
-        if (this.Parent)
+        if (this.Parent && this.IsParentIndependent)
+            this.RepaintComposition();
+        else if (this.Parent)
             this.Parent.InvalidateMeasure();
         else
             this.Superview?.Update();
@@ -1079,6 +1129,25 @@ export class SkiaControl {
         const local = child.TransformPointToLocalSpace(point);
         return child.HitIsInside(local.X, local.Y);
     }
+    /**
+     * Routes a context-menu request like a tap: visible, non-transparent children under the point first (top-most
+     * first, each in its own transformed space), then this control's ContextMenu handler. True = handled.
+     */
+    ProcessContextMenu(point, e) {
+        const listeners = this.GetGestureListeners();
+        for (let i = listeners.length - 1; i >= 0; i--) {
+            const listener = listeners[i];
+            if (!listener.IsVisible || listener.InputTransparent || !this.IsGestureForChild(listener, point))
+                continue;
+            if (listener.ProcessContextMenu(listener.TransformPointToLocalSpace(point), e))
+                return true;
+        }
+        if (!this.ContextMenu)
+            return false;
+        e.Control = this;
+        e.Local = new SKPoint(point.X - this.DrawingRect.Left, point.Y - this.DrawingRect.Top);
+        return this.ContextMenu(this, e) === true;
+    }
     /** Children that may receive gestures, top-most LAST (layouts return their Views). */
     GetGestureListeners() { return SkiaControl.NoListeners; }
     static NoListeners = [];
@@ -1106,15 +1175,19 @@ export class SkiaControl {
         if (this.ConsumeGestures) {
             const sent = new SkiaGesturesInfo(args, apply);
             this.ConsumeGestures(this, sent);
-            if (args.Type !== "Up" && sent.Consumed)
+            if (args.Type !== "Up" && sent.Consumed) {
+                args.Event.Handled = true;
                 return this;
+            }
         }
         // C# EffectsGestureProcessors: attached effects that process gestures (ISkiaGestureProcessor) see them first
         if (!this.DisableEffects)
             for (const e of this.visualEffects) {
                 const p = e.ProcessGestures;
-                if (typeof p === "function" && p.call(e, args, apply) && args.Type !== "Up")
+                if (typeof p === "function" && p.call(e, args, apply) && args.Type !== "Up") {
+                    args.Event.Handled = true;
                     return this;
+                }
             }
         if (this.CheckChildrenGesturesLocked(args.Type))
             return consumedDefault;

package/dist/core/Styles.d.ts

@@ -0,0 +1,51 @@
+import type { SkiaControl } from "./SkiaControl";
+/**
+ * Mirrors DrawnUi.Net `Style` (SharedNet/Internals/Core/Style.cs): a set of property defaults for one control type,
+ * registered once at startup through `Super.UseDrawnUi().ConfigureStyles(...)`.
+ *
+ * The C# `Setters` list of `Setter { Property, Value }` becomes a plain object here, because React controls are
+ * classes with plain properties instead of BindableProperty: `Setters: { FontFamily: "FontText", FontSize: 14 }`.
+ */
+export interface Style {
+    /** The control class the style targets, e.g. `SkiaLabel`. */
+    TargetType: Function;
+    /** Also style classes deriving from TargetType (C# Style.ApplyToDerivedTypes). Default false. */
+    ApplyToDerivedTypes?: boolean;
+    /** Property defaults, by property name. Anything the app sets itself wins over these. */
+    Setters: Record<string, unknown>;
+}
+/** Mirrors DrawnUi.Net `IStylesCollection` / `StylesCollection`: the startup registry, static like the C# one. */
+export declare class StylesCollection {
+    /** Every style registered through ConfigureStyles, in registration order (C# StylesCollection.Styles). */
+    static readonly Styles: Style[];
+    AddStyle(style: Style): StylesCollection;
+}
+/**
+ * Applies registered styles to controls. Port of the C# `SkiaControl` styles partial
+ * (SharedNet/Draw/SkiaControl.NetShared.cs) with one difference forced by the language: C# knows which properties the
+ * app set explicitly (BindableProperty + ExplicitPropertiesSet) and skips those; here a property counts as "not set by
+ * the app" while it still equals the value the control's own constructor left, captured once per class.
+ */
+export declare class SkiaStyles {
+    private static readonly resolved;
+    private static readonly defaults;
+    /** True while no style is registered: lets Measure skip the whole feature at zero cost. */
+    static get IsEmpty(): boolean;
+    /** C# InvalidateStylesCache: drop the per-type resolution after the registry changed. */
+    static InvalidateStylesCache(): void;
+    /**
+     * Setters that apply to a control class: the exact-type style plus every ApplyToDerivedTypes style of a base class,
+     * furthest base first so a nearer style overrides it, exact type last (C# sorts by inheritance distance).
+     */
+    private static For;
+    /** The values a freshly constructed control of this class carries, for the properties a style touches. */
+    private static SnapshotDefaults;
+    /**
+     * C# ApplyInitialStyles: applies the registered defaults to one control. `atConstruction` is true when nothing has
+     * touched the control yet (the reconciler calls it between `new` and the JSX props), so every setter applies and the
+     * pre-style values are kept as this class's defaults; a control styled later only gets the properties that still
+     * hold those defaults, which is how an explicit assignment wins — the C# ExplicitPropertiesSet rule without
+     * property accessors.
+     */
+    static Apply(control: SkiaControl, atConstruction: boolean): void;
+}

package/dist/core/Styles.js

@@ -0,0 +1,92 @@
+/** Mirrors DrawnUi.Net `IStylesCollection` / `StylesCollection`: the startup registry, static like the C# one. */
+export class StylesCollection {
+    /** Every style registered through ConfigureStyles, in registration order (C# StylesCollection.Styles). */
+    static Styles = [];
+    AddStyle(style) {
+        StylesCollection.Styles.push(style);
+        SkiaStyles.InvalidateStylesCache();
+        return this;
+    }
+}
+/**
+ * Applies registered styles to controls. Port of the C# `SkiaControl` styles partial
+ * (SharedNet/Draw/SkiaControl.NetShared.cs) with one difference forced by the language: C# knows which properties the
+ * app set explicitly (BindableProperty + ExplicitPropertiesSet) and skips those; here a property counts as "not set by
+ * the app" while it still equals the value the control's own constructor left, captured once per class.
+ */
+export class SkiaStyles {
+    static resolved = new Map();
+    static defaults = new Map();
+    /** True while no style is registered: lets Measure skip the whole feature at zero cost. */
+    static get IsEmpty() { return StylesCollection.Styles.length === 0; }
+    /** C# InvalidateStylesCache: drop the per-type resolution after the registry changed. */
+    static InvalidateStylesCache() { SkiaStyles.resolved.clear(); SkiaStyles.defaults.clear(); }
+    /**
+     * Setters that apply to a control class: the exact-type style plus every ApplyToDerivedTypes style of a base class,
+     * furthest base first so a nearer style overrides it, exact type last (C# sorts by inheritance distance).
+     */
+    static For(type) {
+        let hit = SkiaStyles.resolved.get(type);
+        if (hit)
+            return hit;
+        const inherited = [];
+        let exact;
+        for (const style of StylesCollection.Styles) {
+            if (style.TargetType === type) {
+                exact = style;
+                continue;
+            }
+            if (!style.ApplyToDerivedTypes)
+                continue;
+            let distance = 0;
+            for (let base = Object.getPrototypeOf(type); base; base = Object.getPrototypeOf(base)) {
+                distance++;
+                if (base === style.TargetType) {
+                    inherited.push({ Distance: distance, Style: style });
+                    break;
+                }
+            }
+        }
+        inherited.sort((a, b) => b.Distance - a.Distance);
+        const setters = {};
+        for (const i of inherited)
+            Object.assign(setters, i.Style.Setters);
+        if (exact)
+            Object.assign(setters, exact.Setters);
+        hit = { Setters: setters, Empty: Object.keys(setters).length === 0 };
+        SkiaStyles.resolved.set(type, hit);
+        return hit;
+    }
+    /** The values a freshly constructed control of this class carries, for the properties a style touches. */
+    static SnapshotDefaults(type, sample, keys) {
+        if (SkiaStyles.defaults.has(type))
+            return;
+        const known = {};
+        for (const key of keys)
+            known[key] = sample[key];
+        SkiaStyles.defaults.set(type, known);
+    }
+    /**
+     * C# ApplyInitialStyles: applies the registered defaults to one control. `atConstruction` is true when nothing has
+     * touched the control yet (the reconciler calls it between `new` and the JSX props), so every setter applies and the
+     * pre-style values are kept as this class's defaults; a control styled later only gets the properties that still
+     * hold those defaults, which is how an explicit assignment wins — the C# ExplicitPropertiesSet rule without
+     * property accessors.
+     */
+    static Apply(control, atConstruction) {
+        const type = control.constructor;
+        const resolved = SkiaStyles.For(type);
+        if (resolved.Empty)
+            return;
+        const keys = Object.keys(resolved.Setters);
+        const target = control;
+        if (atConstruction)
+            SkiaStyles.SnapshotDefaults(type, control, keys);
+        const defaults = atConstruction ? undefined : SkiaStyles.defaults.get(type);
+        for (const key of keys) {
+            // no snapshot for this class (nothing of it ever went through the reconciler): apply as a plain default
+            if (!defaults || Object.is(target[key], defaults[key]))
+                target[key] = resolved.Setters[key];
+        }
+    }
+}

package/dist/core/Super.d.ts

@@ -1,4 +1,5 @@
 import { Thickness } from "./Types";
+import { StylesCollection } from "./Styles";
 import type { CanvasKit, Font, Typeface } from "canvaskit-wasm";
 /** Mirrors DrawnUi.Net IFontCollection: fonts.AddFont(source, alias[, weight]), plus the Blazor-head AddSymbols/AddEmojis. */
 export declare class FontCollection {
@@ -16,10 +17,16 @@ export declare class FontCollection {
     /** Registers a face under an alias; weight 100..900 lets FontWeight / FontAttributes=Bold pick the right file. */
     AddFont(source: string, alias: string, weight?: number): FontCollection;
 }
-/** Mirrors DrawnUi.Net DrawnUiBuilder: Super.UseDrawnUi().ConfigureFonts(...).BuildAsync(). */
+/** Mirrors DrawnUi.Net DrawnUiBuilder: Super.UseDrawnUi().ConfigureFonts(...).ConfigureStyles(...).BuildAsync(). */
 export declare class DrawnUiBuilder {
     private readonly fonts;
     ConfigureFonts(configure: (fonts: FontCollection) => void): DrawnUiBuilder;
+    /**
+     * Mirrors DrawnUi.Net ConfigureStyles: property defaults per control type, applied to every control unless the app
+     * sets that property itself. The usual one, same as the .NET Blazor / Fiddle hosts:
+     * `styles.AddStyle({ TargetType: SkiaLabel, ApplyToDerivedTypes: true, Setters: { FontFamily: "FontText" } })`.
+     */
+    ConfigureStyles(configure: (styles: StylesCollection) => void): DrawnUiBuilder;
     /** Loads CanvasKit + registered fonts. Must complete before the first Canvas is created. */
     BuildAsync(): Promise<void>;
 }
@@ -39,6 +46,8 @@ export declare class Super {
     static readonly Fonts: Map<string, Map<number, Typeface>>;
     /** First registered font, or CanvasKit's built-in one. */
     static DefaultTypeface?: Typeface;
+    /** CanvasKit's built-in face: what an empty FontFamily resolves to, like C# SKTypeface.CreateDefault(). */
+    static SkiaDefaultTypeface?: Typeface;
     private static readonly fontCache;
     static UseDrawnUi(): DrawnUiBuilder;
     /** Master switch: false makes every control render uncached (DrawnUi Super.CacheEnabled). */

package/dist/core/Super.js

@@ -1,4 +1,5 @@
 import { Thickness } from "./Types";
+import { StylesCollection } from "./Styles";
 // the "full" build: same API plus Skottie (SkiaLottie) and the paragraph module; +0.9 MB raw over the default build
 import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit.js";
 import wasmUrl from "canvaskit-wasm/bin/full/canvaskit.wasm?url";
@@ -22,13 +23,22 @@ export class FontCollection {
         return this;
     }
 }
-/** Mirrors DrawnUi.Net DrawnUiBuilder: Super.UseDrawnUi().ConfigureFonts(...).BuildAsync(). */
+/** Mirrors DrawnUi.Net DrawnUiBuilder: Super.UseDrawnUi().ConfigureFonts(...).ConfigureStyles(...).BuildAsync(). */
 export class DrawnUiBuilder {
     fonts = new FontCollection();
     ConfigureFonts(configure) {
         configure(this.fonts);
         return this;
     }
+    /**
+     * Mirrors DrawnUi.Net ConfigureStyles: property defaults per control type, applied to every control unless the app
+     * sets that property itself. The usual one, same as the .NET Blazor / Fiddle hosts:
+     * `styles.AddStyle({ TargetType: SkiaLabel, ApplyToDerivedTypes: true, Setters: { FontFamily: "FontText" } })`.
+     */
+    ConfigureStyles(configure) {
+        configure(new StylesCollection());
+        return this;
+    }
     /** Loads CanvasKit + registered fonts. Must complete before the first Canvas is created. */
     async BuildAsync() {
         Super.CK = await CanvasKitInit({ locateFile: () => wasmUrl });
@@ -61,7 +71,8 @@ export class DrawnUiBuilder {
             if (!Super.DefaultFontAlias)
                 Super.DefaultFontAlias = f.Alias;
         }
-        Super.DefaultTypeface ??= Super.CK.Typeface.GetDefault() ?? undefined;
+        Super.SkiaDefaultTypeface ??= Super.CK.Typeface.GetDefault() ?? undefined;
+        Super.DefaultTypeface ??= Super.SkiaDefaultTypeface;
     }
 }
 /** Mirrors DrawnUi static Super: global engine state. */
@@ -105,6 +116,8 @@ export class Super {
     static Fonts = new Map();
     /** First registered font, or CanvasKit's built-in one. */
     static DefaultTypeface;
+    /** CanvasKit's built-in face: what an empty FontFamily resolves to, like C# SKTypeface.CreateDefault(). */
+    static SkiaDefaultTypeface;
     static fontCache = new Map();
     static UseDrawnUi() { return new DrawnUiBuilder(); }
     /** Master switch: false makes every control render uncached (DrawnUi Super.CacheEnabled). */
@@ -145,7 +158,11 @@ export class Super {
     }
     /** Nearest registered weight of the alias (empty alias = the first registered family); reports the weight actually used. */
     static ResolveTypeface(alias, weight) {
-        const weights = Super.Fonts.get(alias || Super.DefaultFontAlias);
+        // No family: the Skia built-in face, like C# SkiaFontManager.GetFont("") -> SKTypeface.CreateDefault(). An app that
+        // wants its own font everywhere registers it as a style default (ConfigureStyles), exactly as the .NET hosts do.
+        if (!alias)
+            return { Typeface: Super.SkiaDefaultTypeface ?? Super.DefaultTypeface ?? null, Weight: 400 };
+        const weights = Super.Fonts.get(alias);
         const target = weight > 0 ? weight : 400;
         if (weights && weights.size > 0) {
             if (weights.has(target))

package/dist/core/Types.d.ts

@@ -134,9 +134,14 @@ export type DrawImageAlignment = "Start" | "Center" | "End";
 /** MAUI/DrawnUi ScrollOrientation. */
 export type ScrollOrientation = "Vertical" | "Horizontal" | "Both" | "Neither";
 /**
- * DrawnUi SkiaCacheType. Operations = recorded draw commands (SkPicture) replayed each frame;
+ * DrawnUi SkiaCacheType. Operations / OperationsFull = recorded draw commands (SkPicture) replayed each frame.
  * Image = offscreen surface snapshot blitted each frame (GPU-backed when the canvas is WebGL).
- * GPU / ImageDoubleBuffered / ImageComposite / ImageCompositeGPU are accepted and currently resolve to Image.
+ * ImageDoubleBuffered = an Image cache that keeps the previous one and draws it — or DrawPlaceholder when there is
+ * none — while a new one cannot be produced yet.
+ * ImageComposite / ImageCompositeGPU = an Image cache whose offscreen surface survives between records: when only
+ * children changed, their old and new bounds plus the siblings those overlap are erased and only those children are
+ * painted again.
+ * GPU resolves to Image and ImageCompositeGPU to ImageComposite; the browser has no separate GPU-only path.
  */
 export type SkiaCacheType = "None" | "Operations" | "OperationsFull" | "Image" | "ImageDoubleBuffered" | "ImageComposite" | "ImageCompositeGPU" | "GPU";
 /** DrawnUi GradientType (Conical accepted, drawn as Circular). */

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./core/Types";
 export * from "./core/Gestures";
+export * from "./core/Styles";
 export * from "./core/Easing";
 export * from "./core/Animators";
 export * from "./core/ScrollAnimators";
@@ -39,6 +40,7 @@ export * from "./controls/SkiaBackdrop";
 export * from "./controls/SkiaEditor";
 export * from "./controls/SkiaSprite";
 export * from "./controls/SkiaSpriteSet";
+export * from "./controls/DrawnGame";
 export * from "./core/KeyboardManager";
 export * from "./controls/AnimatedFramesRenderer";
 export * from "./controls/SkiaLottie";

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from "./core/Types";
 export * from "./core/Gestures";
+export * from "./core/Styles";
 export * from "./core/Easing";
 export * from "./core/Animators";
 export * from "./core/ScrollAnimators";
@@ -39,6 +40,7 @@ export * from "./controls/SkiaBackdrop";
 export * from "./controls/SkiaEditor";
 export * from "./controls/SkiaSprite";
 export * from "./controls/SkiaSpriteSet";
+export * from "./controls/DrawnGame";
 export * from "./core/KeyboardManager";
 export * from "./controls/AnimatedFramesRenderer";
 export * from "./controls/SkiaLottie";

package/dist/react/SkiaShell.js

@@ -440,9 +440,12 @@ export const SkiaShell = forwardRef(function SkiaShell({ Routes, children, NavBa
                     }
                 })();
             }
-            else if (depth > history.current.length) {
-                // forward: the hash names the pages, rebuild the stack without animation (overlays cannot be restored)
+            else {
+                // forward (depth grew), or the same depth with another hash = a plain <a href="#/route"> link or a typed hash:
+                // the hash names the pages, rebuild the stack without animation (overlays cannot be restored)
                 const target = parseHash();
+                if (depth === history.current.length && target.join("/") === live.current.stack.join("/"))
+                    return;
                 history.current = target.map(() => "page");
                 window.history.replaceState({ [HISTORY_KEY]: history.current.length }, "", hashFor(target));
                 setStacks((all) => { const next = all.slice(); next[live.current.selectedTab] = target; return next; });