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

package/dist/core/SkiaControl.d.ts

@@ -3,7 +3,7 @@ import { type Color, type LayoutOptions, SKRect, ScaledSize, type SkiaCacheType,
 import { 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 {
@@ -180,11 +180,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;
@@ -235,6 +248,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 +382,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";
@@ -238,12 +239,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 +283,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;
@@ -388,6 +408,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) {
@@ -1057,13 +1082,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 +1112,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 +1158,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";

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";

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; });

package/dist/react/index.d.ts

@@ -31,9 +31,17 @@ import { SkiaScroll as SkiaScrollCtrl } from "../controls/SkiaScroll";
 import type { SkiaShape as SkiaShapeCtrl } from "../controls/SkiaShape";
 import type { Color, RenderingModeType } from "../core/Types";
 import type { GesturesMode } from "../core/Gestures";
-/** Public settable properties of a control become its JSX props, same PascalCase names as C#. */
+/**
+ * Public settable properties of a control become its JSX props, same PascalCase names as C#.
+ *
+ * Function-typed members split in two: a METHOD (`Update(): void`) is not a prop and is dropped,
+ * while an EVENT is declared optional (`Tapped?: (sender, e) => void`) and is exactly the thing a
+ * caller passes in JSX. Optionality is the discriminator; without it every handler was missing
+ * from the props type, so `<SkiaButton Tapped={…} />` worked at runtime but failed to typecheck
+ * and never appeared in completion.
+ */
 type PropsOf<T> = Partial<{
-    [K in keyof T as T[K] extends Function ? never : K extends "Children" | "Views" | "Parent" | "Spans" | "GridStructure" | "AccessibilityId" | "IsAccessibilityElement" | "HasTransform" | "RenderTransformMatrix" | "RenderObjectPrevious" | "LastMeasuredIndex" | "ItemsInsertedAtStart" | "UsingControlStyle" | "Track" | "Thumb" | "FrameOn" | "FrameOff" | "ViewCheckOn" | "ViewOn" | "ViewText" | "Ratio" | "StartThumbX" | "EndThumbX" | "SnapPoints" | "CurrentPosition" | "CurrentSnap" | "ContentOffsetBounds" | "InTransition" | "CanAnimate" | "MaxIndex" | "ChildrenTotal" | "IsAtStart" | "IsAtEnd" | "ScrollProgress" | "ScrollAmount" | "TransitionProgress" | "LastIndex" | "ChildrenCount" | "Horizontal" | "Animator" | "Animation" | "IsPlaying" | "PlayWhenAvailable" | "TotalFrames" | "HasEffects" | "IsDisposed" | "Label" | "IsMultiline" | "HasSelection" | "LayoutVersion" | "LinesCount" | "MeasuredLineHeight" | "Focused" | "SpriteSheet" | "FrameWidth" | "FrameHeight" | "DurationMs" | "FrameDurationMs" | "CurrentSprite" | "Rects" | "HasTapHandler" | "HasDecorations" | "LinesCount" | "Superview" | "DrawingRect" | "MeasuredSize" | "RenderingScale" | "NeedMeasure" | "_superview" | "HitBoxAuto" | "TotalDown" | "TotalTapped" | "TouchDown" | "PostAnimators" | "LoadedSource" | "IsLoading" | "DisplayRect" | "AspectScale" | "Content" | "ContentSize" | "ContentOffsetBounds" | "OverscrollDistance" | "OverScrolled" | "IsUserPanning" | "IsUserFocused" | "IsScrolling" | "IsTemplated" | "FirstVisibleIndex" | "LastVisibleIndex" | "DebugString" | "ChildrenFactory" | "ContextIndex" | "RenderObject" | "UsingCacheType" | "TransitionEffect" | "TransitionFromIndex" | "TransitionToIndex" | "EffectPostRenderers" | "CachedImage" | "ImageBitmap" | "ShouldSubmitOnEnter" | "Header" | "Footer" | "RefreshIndicator" | "ScrollBar" | "ScrollBarHorizontal" | "IsRunning" | "VisibleRatio" | "CurrentIndex" | "LastCompositeRecord" | "DirtyChildrenInternal" | "IsRenderingWithComposition" ? never : K]: T[K];
+    [K in keyof T as T[K] extends Function ? (undefined extends T[K] ? K : never) : K extends "Children" | "Views" | "Parent" | "Spans" | "GridStructure" | "AccessibilityId" | "IsAccessibilityElement" | "HasTransform" | "RenderTransformMatrix" | "RenderObjectPrevious" | "LastMeasuredIndex" | "ItemsInsertedAtStart" | "UsingControlStyle" | "Track" | "Thumb" | "FrameOn" | "FrameOff" | "ViewCheckOn" | "ViewOn" | "ViewText" | "Ratio" | "StartThumbX" | "EndThumbX" | "SnapPoints" | "CurrentPosition" | "CurrentSnap" | "ContentOffsetBounds" | "InTransition" | "CanAnimate" | "MaxIndex" | "ChildrenTotal" | "IsAtStart" | "IsAtEnd" | "ScrollProgress" | "ScrollAmount" | "TransitionProgress" | "LastIndex" | "ChildrenCount" | "Horizontal" | "Animator" | "Animation" | "IsPlaying" | "PlayWhenAvailable" | "TotalFrames" | "HasEffects" | "IsDisposed" | "Label" | "IsMultiline" | "HasSelection" | "LayoutVersion" | "LinesCount" | "MeasuredLineHeight" | "Focused" | "SpriteSheet" | "FrameWidth" | "FrameHeight" | "DurationMs" | "FrameDurationMs" | "CurrentSprite" | "Rects" | "HasTapHandler" | "HasDecorations" | "LinesCount" | "Superview" | "DrawingRect" | "MeasuredSize" | "RenderingScale" | "NeedMeasure" | "_superview" | "HitBoxAuto" | "TotalDown" | "TotalTapped" | "TouchDown" | "PostAnimators" | "LoadedSource" | "IsLoading" | "DisplayRect" | "AspectScale" | "Content" | "ContentSize" | "ContentOffsetBounds" | "OverscrollDistance" | "OverScrolled" | "IsUserPanning" | "IsUserFocused" | "IsScrolling" | "IsTemplated" | "FirstVisibleIndex" | "LastVisibleIndex" | "DebugString" | "ChildrenFactory" | "ContextIndex" | "RenderObject" | "UsingCacheType" | "TransitionEffect" | "TransitionFromIndex" | "TransitionToIndex" | "EffectPostRenderers" | "CachedImage" | "ImageBitmap" | "ShouldSubmitOnEnter" | "Header" | "Footer" | "RefreshIndicator" | "ScrollBar" | "ScrollBarHorizontal" | "IsRunning" | "VisibleRatio" | "CurrentIndex" | "LastCompositeRecord" | "DirtyChildrenInternal" | "IsRenderingWithComposition" ? never : K]: T[K];
 }>;
 /** `ref` receives the engine control instance (react-reconciler getPublicInstance). */
 type LeafProps<T> = PropsOf<T> & {
@@ -92,19 +100,29 @@ export declare const SkiaDrawer: FC<LayoutProps<SkiaDrawerCtrl>>;
 export interface CanvasProps {
     BackgroundColor?: Color;
     RenderingMode?: RenderingModeType;
-    /** Disabled (default) / Enabled / Lock, like DrawnUi Canvas.Gestures. */
+    /**
+     * Disabled (default) / Enabled / Lock, like DrawnUi Canvas.Gestures. Enabled shares input with the page like MAUI's
+     * Enabled inside a native scroll view: a touch pan along an axis the page can scroll scrolls the page, and the wheel
+     * scrolls it unless a control used the wheel. A page that cannot scroll keeps every touch. Lock keeps all input.
+     */
     Gestures?: GesturesMode;
     children?: ReactNode;
     style?: CSSProperties;
     className?: string;
     /** Receives the engine Canvas (FPS, FrameTime, RenderingScale...). */
     ref?: Ref<CanvasView>;
+    /** Context-menu request (right click / long press / Menu key) no control handled; return true to suppress the browser menu. */
+    ContextMenu?: CanvasView["ContextMenu"];
+    /** DrawnView.WillFirstTimeDraw: once, right before the first frame is drawn, with its drawing context. */
+    WillFirstTimeDraw?: CanvasView["WillFirstTimeDraw"];
+    /** DrawnView.WasDrawn: after every drawn frame. */
+    WasDrawn?: CanvasView["WasDrawn"];
 }
 /**
  * Mirrors DrawnUi Canvas: the bridge between the DOM (react-dom) and the drawn tree (DrawnUi reconciler).
  * Requires Super.UseDrawnUi()...BuildAsync() to have completed.
  */
-export declare function Canvas({ BackgroundColor, RenderingMode, Gestures, children, style, className, ref: viewRef }: CanvasProps): import("react").JSX.Element;
+export declare function Canvas({ BackgroundColor, RenderingMode, Gestures, children, style, className, ref: viewRef, ContextMenu, WillFirstTimeDraw, WasDrawn }: CanvasProps): import("react").JSX.Element;
 export type { SkiaControl };
 export * from "../index";
 export * from "./SkiaShell";

package/dist/react/index.js

@@ -49,22 +49,40 @@ export const SkiaCarousel = "SkiaCarousel";
 /** Carousel whose slide changes are rendered by an SkSL transition (C# SkiaShaderCarousel); slides need UseCache="Image". */
 export const SkiaShaderCarousel = "SkiaShaderCarousel";
 export const SkiaDrawer = "SkiaDrawer";
+/**
+ * One-shot, at the first Canvas mount: removes the HTML the `drawnUiStatic` Vite plugin generated for crawlers
+ * (`[data-drawnui-static]`, placed after the mount element). A querySelectorAll once per page, never again; an
+ * app built without the plugin finds nothing.
+ */
+let staticRemoved = false;
+function removeStaticContent() {
+    if (staticRemoved || typeof document === "undefined")
+        return;
+    staticRemoved = true;
+    for (const el of document.querySelectorAll("[data-drawnui-static]"))
+        el.remove();
+}
 /**
  * Mirrors DrawnUi Canvas: the bridge between the DOM (react-dom) and the drawn tree (DrawnUi reconciler).
  * Requires Super.UseDrawnUi()...BuildAsync() to have completed.
  */
-export function Canvas({ BackgroundColor, RenderingMode, Gestures, children, style, className, ref: viewRef }) {
+export function Canvas({ BackgroundColor, RenderingMode, Gestures, children, style, className, ref: viewRef, ContextMenu, WillFirstTimeDraw, WasDrawn }) {
     const ref = useRef(null);
     const view = useRef(null);
     const root = useRef(null);
     const [engine, setEngine] = useState(null);
     useLayoutEffect(() => {
-        const v = new CanvasView(ref.current);
-        if (RenderingMode)
-            v.RenderingMode = RenderingMode;
+        // the engine draws frame 1 inside its constructor: the draw events and the rendering mode must be on it before that
+        const v = new CanvasView(ref.current, (c) => {
+            if (RenderingMode)
+                c.RenderingMode = RenderingMode;
+            c.WillFirstTimeDraw = WillFirstTimeDraw;
+            c.WasDrawn = WasDrawn;
+        });
         view.current = v;
         root.current = createDrawnRoot(v);
         setEngine(v);
+        removeStaticContent(); // the constructor drew frame 1: the crawlable block (drawnUiStatic) is duplicate content from here on
         return () => { root.current?.unmount(); v.Dispose(); view.current = null; root.current = null; setEngine(null); };
         // RenderingMode is read once at surface creation, like DrawnUi.
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -78,6 +96,9 @@ export function Canvas({ BackgroundColor, RenderingMode, Gestures, children, sty
             v.Update();
         }
         v.Gestures = Gestures ?? "Disabled";
+        v.ContextMenu = ContextMenu;
+        v.WillFirstTimeDraw = WillFirstTimeDraw;
+        v.WasDrawn = WasDrawn;
         root.current.render(children);
     });
     // The drawn surface is aria-hidden; the overlay is the accessibility tree (DrawnUi.Blazor pattern).

package/dist/react/reconciler.js

@@ -85,6 +85,8 @@ const hostConfig = {
         if (!ctor)
             throw new Error(`DrawnUi: unknown control <${type}>`);
         const inst = new ctor();
+        // ConfigureStyles defaults first, the JSX props below override them (a TextSpan is not a control, it has none)
+        inst.ApplyInitialStyles?.(true);
         applyProps(inst, null, props);
         return inst;
     },