drawnui-react 0.1.0-preview.1

package/dist/core/Canvas.js

@@ -0,0 +1,328 @@
+import { Super } from "./Super";
+import { SkiaAccessibilityManager } from "./Accessibility";
+import { Colors, SKRect } from "./Types";
+import { GestureEventProcessingInfo, SKPoint, SkiaGesturesParameters, TouchActionEventArgs, } from "./Gestures";
+/**
+ * Mirrors DrawnUi Canvas (DrawnView): hosts one Content control on an HTML canvas element,
+ * owns RenderingScale (devicePixelRatio), the surface, the on-demand frame loop and raw input.
+ * Frames are drawn only after Update() (invalidation), never continuously.
+ * Gestures are accumulated and processed in order at the START of the next frame, like DrawnUi.
+ */
+export class Canvas {
+    Element;
+    /** Points a pointer may travel between Down and Up and still count as a tap (AppoMobi TouchEffect default). */
+    static TappedCancelMoveThresholdPoints = 16;
+    BackgroundColor = Colors.Transparent;
+    /** Accelerated = WebGL surface, Default = software. Read once at first frame. */
+    RenderingMode = "Accelerated";
+    RenderingScale = 1;
+    /** Duration of the last Draw in ms (measure + arrange + render, excluding GPU flush). */
+    FrameTime = 0;
+    /** Frames per second over the last second of drawn frames. */
+    FPS = 0;
+    frameTimes = [];
+    /** Registry + rate-limited snapshot of accessible controls, rendered by the DOM overlay (DrawnUi AccessibilityManager). */
+    AccessibilityManager = new SkiaAccessibilityManager();
+    content;
+    get Content() { return this.content; }
+    set Content(value) {
+        if (this.content)
+            this.content._superview = undefined;
+        this.content = value;
+        if (value) {
+            value.Parent = undefined;
+            value._superview = this;
+        }
+        this.Update();
+    }
+    surface;
+    /** GL context + GrContext live for the Canvas lifetime; only the on-screen surface is recreated on resize. */
+    glHandle;
+    grContext;
+    frameId = 0;
+    disposed = false;
+    observer;
+    constructor(Element) {
+        this.Element = Element;
+        if (!Super.CK)
+            throw new Error("DrawnUi: call Super.UseDrawnUi()...BuildAsync() before creating a Canvas");
+        this.observer = new ResizeObserver(() => this.OnResized());
+        this.observer.observe(Element);
+        this.OnResized();
+    }
+    /** Request a redraw (full measure + arrange + render) on the next animation frame. */
+    Update() {
+        if (this.frameId || !this.surface || this.disposed)
+            return;
+        const surface = this.surface;
+        this.frameId = surface.requestAnimationFrame((c) => {
+            this.frameId = 0;
+            if (this.surface === surface && !this.disposed) {
+                this.Draw(c);
+                surface.flush();
+                this.DrainDisposeQueue();
+            }
+        });
+    }
+    /** Deletes the current surface; a pending frame on it is cancelled first (drawing on a deleted surface faults). */
+    ReleaseSurface() {
+        if (this.frameId) {
+            cancelAnimationFrame(this.frameId);
+            this.frameId = 0;
+        }
+        this.surface?.delete();
+        this.surface = undefined;
+    }
+    /** On-screen surface at the element's current pixel size, reusing the GL/GrContext when accelerated. */
+    CreateSurface(w, h) {
+        const CK = Super.CK;
+        if (this.RenderingMode === "Accelerated") {
+            if (!this.grContext) {
+                this.glHandle = CK.GetWebGLContext(this.Element);
+                this.grContext = (this.glHandle ? CK.MakeWebGLContext(this.glHandle) : null) ?? undefined;
+            }
+            if (this.grContext) {
+                const gl = CK.MakeOnScreenGLSurface(this.grContext, w, h, CK.ColorSpace.SRGB);
+                if (gl)
+                    return gl;
+            }
+        }
+        return CK.MakeSWCanvasSurface(this.Element) ?? undefined;
+    }
+    /**
+     * Resize = the browser wipes the bitmap when width/height change, so the new frame is drawn
+     * SYNCHRONOUSLY here. ResizeObserver callbacks run after layout and before paint, so the
+     * redrawn content lands in the same paint and no blank frame is ever shown while dragging.
+     */
+    OnResized() {
+        const dpr = window.devicePixelRatio || 1;
+        const w = Math.max(1, Math.round(this.Element.clientWidth * dpr));
+        const h = Math.max(1, Math.round(this.Element.clientHeight * dpr));
+        if (this.surface && this.Element.width === w && this.Element.height === h && this.RenderingScale === dpr)
+            return;
+        this.RenderingScale = dpr;
+        this.Element.width = w;
+        this.Element.height = h;
+        this.ReleaseSurface();
+        this.surface = this.CreateSurface(w, h);
+        if (!this.surface)
+            throw new Error("DrawnUi: cannot create surface");
+        this.DrawNow();
+    }
+    /** Draws one frame immediately (outside the rAF loop) and presents it. */
+    DrawNow() {
+        const surface = this.surface;
+        if (!surface || this.disposed)
+            return;
+        this.Draw(surface.getCanvas());
+        surface.flush();
+        this.DrainDisposeQueue();
+    }
+    Draw(canvas) {
+        const started = performance.now();
+        this.ProcessPendingGestures();
+        const executed = this.ExecuteAnimators(Math.round(started * 1_000_000));
+        canvas.clear(Super.ParseColor(this.BackgroundColor));
+        const root = this.content;
+        if (root) {
+            const scale = this.RenderingScale;
+            const w = this.Element.width, h = this.Element.height;
+            root.Measure(w, h, scale);
+            root.Arrange(new SKRect(0, 0, w, h), root.WidthRequest, root.HeightRequest, scale);
+            root.Render({ Context: { Canvas: canvas, Surface: this.surface }, Destination: new SKRect(0, 0, w, h), Scale: scale });
+        }
+        this.AccessibilityManager.OnFrameEnd(this.RenderingScale, this.Element.width, this.Element.height, () => this.Update());
+        const now = performance.now();
+        this.FrameTime = now - started;
+        this.FrameIndex++;
+        this.frameTimes.push(now);
+        while (this.frameTimes.length && this.frameTimes[0] < now - 1000)
+            this.frameTimes.shift();
+        this.FPS = this.frameTimes.length;
+        if (executed > 0)
+            this.Update(); // animators running: keep frames coming
+    }
+    // ---- deferred disposal (DrawnUi DisposeObject: never delete Skia objects mid-frame) ----
+    disposeQueue = [];
+    /** Queues a cache for deletion after the current frame has been flushed. */
+    DisposeObject(obj) { this.disposeQueue.push(obj); }
+    DrainDisposeQueue() {
+        if (this.disposeQueue.length === 0)
+            return;
+        for (const o of this.disposeQueue)
+            o.Dispose();
+        this.disposeQueue.length = 0;
+    }
+    // ---- animators (DrawnView.AnimatingControls) ----
+    AnimatingControls = new Map();
+    RegisterAnimator(animator) {
+        if (this.disposed)
+            return false;
+        this.AnimatingControls.set(animator.Uid, animator);
+        return true;
+    }
+    UnregisterAnimator(uid) { this.AnimatingControls.delete(uid); }
+    /** Ticks every registered animator once; returns how many ran. */
+    ExecuteAnimators(frameTimeNanos) {
+        let executed = 0;
+        for (const a of [...this.AnimatingControls.values()]) {
+            if (!a.Parent) {
+                this.AnimatingControls.delete(a.Uid);
+                continue;
+            }
+            a.TickFrame(frameTimeNanos);
+            executed++;
+        }
+        return executed;
+    }
+    /** Frames drawn so far (SkiaBackdrop uses it to refresh once after a cached record). */
+    FrameIndex = 0;
+    /** On-screen surface (SkiaBackdrop snapshots it). */
+    get Surface() { return this.surface; }
+    Dispose() {
+        this.disposed = true;
+        this.Gestures = "Disabled";
+        this.observer.disconnect();
+        this.content?.Dispose();
+        this.Content = undefined;
+        this.ReleaseSurface();
+        this.grContext?.delete();
+        this.grContext = undefined;
+        if (this.glHandle) {
+            Super.CK.deleteContext(this.glHandle);
+            this.glHandle = undefined;
+        }
+    }
+    // ---- gestures: raw pointer -> TouchActionEventArgs -> recognized SkiaGesturesParameters -> queue ----
+    gestures = "Disabled";
+    get Gestures() { return this.gestures; }
+    set Gestures(value) {
+        if (this.gestures === value)
+            return;
+        if (this.gestures !== "Disabled")
+            this.DetachInput();
+        this.gestures = value;
+        if (value !== "Disabled")
+            this.AttachInput();
+    }
+    activeTouchIds = new Set();
+    pointerDownArgs = new Map();
+    previousTouchArgs = new Map();
+    pendingGestures = [];
+    onPointer = (e) => {
+        const type = e.type === "pointerdown" ? "Pressed" :
+            e.type === "pointermove" ? "Moved" :
+                e.type === "pointerup" ? "Released" :
+                    e.type === "pointercancel" ? "Cancelled" : undefined;
+        if (!type)
+            return;
+        if (type === "Moved" && !this.activeTouchIds.has(e.pointerId))
+            return; // hover not ported (TouchActionResult.Pointer)
+        // Capture so Up outside the element still arrives; throws for synthetic events (tests) — harmless.
+        if (type === "Pressed") {
+            try {
+                this.Element.setPointerCapture(e.pointerId);
+            }
+            catch { /* synthetic pointer */ }
+        }
+        const rect = this.Element.getBoundingClientRect();
+        const args = new TouchActionEventArgs();
+        args.Id = e.pointerId;
+        args.Type = type;
+        args.Scale = this.RenderingScale;
+        args.Location = new SKPoint((e.clientX - rect.left) * this.RenderingScale, (e.clientY - rect.top) * this.RenderingScale);
+        this.OnTouchAction(args);
+    };
+    preventTouch = (e) => e.preventDefault();
+    /** Mouse wheel -> TouchActionResult.Wheel (page scroll suppressed while gestures are enabled). */
+    onWheel = (e) => {
+        e.preventDefault();
+        const rect = this.Element.getBoundingClientRect();
+        const args = new TouchActionEventArgs();
+        args.Id = -1;
+        args.Type = "Wheel";
+        args.Scale = this.RenderingScale;
+        args.Location = new SKPoint((e.clientX - rect.left) * this.RenderingScale, (e.clientY - rect.top) * this.RenderingScale);
+        args.StartingLocation = args.Location;
+        args.Wheel = { Delta: e.deltaY !== 0 ? e.deltaY : e.deltaX };
+        this.OnGestureEvent(args, "Wheel");
+    };
+    AttachInput() {
+        const el = this.Element;
+        el.style.touchAction = "none";
+        el.style.userSelect = "none";
+        for (const t of ["pointerdown", "pointermove", "pointerup", "pointercancel"])
+            el.addEventListener(t, this.onPointer);
+        el.addEventListener("wheel", this.onWheel, { passive: false });
+        if (this.gestures === "Lock")
+            el.addEventListener("touchmove", this.preventTouch, { passive: false });
+    }
+    DetachInput() {
+        const el = this.Element;
+        el.style.touchAction = "";
+        el.style.userSelect = "";
+        for (const t of ["pointerdown", "pointermove", "pointerup", "pointercancel"])
+            el.removeEventListener(t, this.onPointer);
+        el.removeEventListener("wheel", this.onWheel);
+        el.removeEventListener("touchmove", this.preventTouch);
+        this.activeTouchIds.clear();
+        this.pointerDownArgs.clear();
+        this.previousTouchArgs.clear();
+    }
+    /** Port of DrawnUi.Blazor Canvas.OnTouchAction: per-pointer state machine producing Down / Panning / Tapped / Up. */
+    OnTouchAction(args) {
+        if (this.gestures === "Disabled")
+            return;
+        const id = args.Id;
+        if (args.Type === "Pressed") {
+            this.activeTouchIds.add(id);
+            args.NumberOfTouches = this.activeTouchIds.size;
+            args.StartingLocation = args.Location;
+            args.IsInContact = true;
+            this.pointerDownArgs.set(id, args);
+            this.previousTouchArgs.set(id, args);
+            this.OnGestureEvent(args, "Down");
+            return;
+        }
+        args.NumberOfTouches = this.activeTouchIds.size;
+        TouchActionEventArgs.FillDistanceInfo(args, this.previousTouchArgs.get(id));
+        const downArgs = this.pointerDownArgs.get(id);
+        args.StartingLocation = downArgs ? downArgs.StartingLocation : args.Location;
+        if (args.Type === "Moved") {
+            if (args.Distance.Delta.X !== 0 || args.Distance.Delta.Y !== 0)
+                this.OnGestureEvent(args, "Panning");
+            this.previousTouchArgs.set(id, args);
+            return;
+        }
+        if (args.Type === "Released" || args.Type === "Cancelled") {
+            args.IsInContact = args.NumberOfTouches > 1;
+            if (!args.IsInContact && downArgs && args.Type === "Released") {
+                const threshold = Canvas.TappedCancelMoveThresholdPoints * Math.max(0.1, this.RenderingScale);
+                if (Math.abs(args.Distance.Total.X) < threshold && Math.abs(args.Distance.Total.Y) < threshold)
+                    this.OnGestureEvent(args, "Tapped");
+            }
+            this.OnGestureEvent(args, "Up");
+            this.previousTouchArgs.delete(id);
+            this.pointerDownArgs.delete(id);
+            this.activeTouchIds.delete(id);
+        }
+    }
+    OnGestureEvent(args, result) {
+        this.pendingGestures.push(SkiaGesturesParameters.Create(result, args));
+        this.Update();
+    }
+    ProcessPendingGestures() {
+        if (this.pendingGestures.length === 0)
+            return;
+        const batch = this.pendingGestures.splice(0);
+        const root = this.content;
+        if (!root)
+            return;
+        for (const args of batch)
+            this.ProcessGestures(root, args);
+    }
+    /** Entry into the control tree, same shape as DrawnUi Canvas.ProcessGestures. */
+    ProcessGestures(root, args) {
+        return root.ProcessGestures(args, new GestureEventProcessingInfo(args.Event.Location, SKPoint.Empty, SKPoint.Empty, null));
+    }
+}

package/dist/core/ControlStyle.d.ts

@@ -0,0 +1,6 @@
+/** DrawnUi PrebuiltControlStyle: the look a styled control builds its default content with. */
+export type PrebuiltControlStyle = "Unset" | "Platform" | "Cupertino" | "Material" | "Material3" | "Windows";
+/** Resolved look: `Platform` picks from the browser's OS (C# picks from the running platform). */
+export type ResolvedControlStyle = Exclude<PrebuiltControlStyle, "Platform">;
+/** C# UsingControlStyle: Platform -> iOS/macOS = Cupertino, Android = Material, Windows = Windows, else the DrawnUi default look. */
+export declare function ResolveControlStyle(style: PrebuiltControlStyle): ResolvedControlStyle;

package/dist/core/ControlStyle.js

@@ -0,0 +1,11 @@
+let platformStyle;
+/** C# UsingControlStyle: Platform -> iOS/macOS = Cupertino, Android = Material, Windows = Windows, else the DrawnUi default look. */
+export function ResolveControlStyle(style) {
+    if (style !== "Platform")
+        return style;
+    if (!platformStyle) {
+        const ua = typeof navigator !== "undefined" ? navigator.userAgent : "";
+        platformStyle = /iPhone|iPad|iPod|Macintosh/.test(ua) ? "Cupertino" : /Android/.test(ua) ? "Material" : /Windows/.test(ua) ? "Windows" : "Unset";
+    }
+    return platformStyle;
+}

package/dist/core/Easing.d.ts

@@ -0,0 +1,13 @@
+/** Mirrors MAUI Easing (subset): Ease(t) with t in 0..1. */
+export declare class Easing {
+    private readonly fn;
+    constructor(fn: (x: number) => number);
+    Ease(x: number): number;
+    static readonly Linear: Easing;
+    static readonly CubicIn: Easing;
+    static readonly CubicOut: Easing;
+    static readonly CubicInOut: Easing;
+    static readonly SinOut: Easing;
+    static readonly SinIn: Easing;
+    static readonly Default: Easing;
+}

package/dist/core/Easing.js

@@ -0,0 +1,15 @@
+/** Mirrors MAUI Easing (subset): Ease(t) with t in 0..1. */
+export class Easing {
+    fn;
+    constructor(fn) {
+        this.fn = fn;
+    }
+    Ease(x) { return this.fn(x); }
+    static Linear = new Easing((x) => x);
+    static CubicIn = new Easing((x) => x * x * x);
+    static CubicOut = new Easing((x) => (x - 1) ** 3 + 1);
+    static CubicInOut = new Easing((x) => (x < 0.5 ? 4 * x ** 3 : (x - 1) * (2 * x - 2) ** 2 + 1));
+    static SinOut = new Easing((x) => Math.sin((x * Math.PI) / 2));
+    static SinIn = new Easing((x) => 1 - Math.cos((x * Math.PI) / 2));
+    static Default = Easing.CubicInOut;
+}

package/dist/core/Gestures.d.ts

@@ -0,0 +1,74 @@
+import type { SkiaControl } from "./SkiaControl";
+export declare class SKPoint {
+    X: number;
+    Y: number;
+    constructor(X?: number, Y?: number);
+    static readonly Empty: SKPoint;
+    Add(p: SKPoint): SKPoint;
+    Subtract(p: SKPoint): SKPoint;
+}
+/** Raw platform action (subset of TouchActionType). */
+export type TouchActionType = "Pressed" | "Moved" | "Released" | "Cancelled" | "Wheel" | "Pointer";
+/** Recognized gesture (TouchActionResult). LongPressing/Wheel/Pointer/Touch declared for parity, not produced yet. */
+export type TouchActionResult = "Touch" | "Down" | "Up" | "Tapped" | "LongPressing" | "Panning" | "Wheel" | "Pointer";
+export type GesturesMode = "Disabled" | "Enabled" | "Lock";
+export type LockTouch = "Disabled" | "Enabled" | "PassNone" | "PassTap" | "PassTapAndLongPress";
+/** TouchActionEventArgs.DistanceInfo. Velocity is pixels per second. */
+export declare class DistanceInfo {
+    Start: SKPoint;
+    End: SKPoint;
+    Delta: SKPoint;
+    Total: SKPoint;
+    Velocity: SKPoint;
+}
+/** AppoMobi.Gestures TouchActionEventArgs. */
+export declare class TouchActionEventArgs {
+    Id: number;
+    Type: TouchActionType;
+    /** Pixels. */
+    Location: SKPoint;
+    StartingLocation: SKPoint;
+    Distance: DistanceInfo;
+    NumberOfTouches: number;
+    IsInContact: boolean;
+    Scale: number;
+    Timestamp: number;
+    /** ms since the previous event of the same pointer. */
+    DeltaTimeMs: number;
+    /** Mouse wheel: Delta > 0 = wheel down (browser deltaY sign). */
+    Wheel: {
+        Delta: number;
+    };
+    /** Same as the .NET helper: derives Start/End/Delta/Total from the previous event of the same pointer. */
+    static FillDistanceInfo(current: TouchActionEventArgs, previous: TouchActionEventArgs | undefined): void;
+}
+/** DrawnUi SkiaGesturesParameters: recognized gesture + its raw event. */
+export declare class SkiaGesturesParameters {
+    Type: TouchActionResult;
+    Event: TouchActionEventArgs;
+    ArrivedTimeNanos: number;
+    static Create(action: TouchActionResult, args: TouchActionEventArgs): SkiaGesturesParameters;
+}
+/** DrawnUi GestureEventProcessingInfo. */
+export declare class GestureEventProcessingInfo {
+    MappedLocation: SKPoint;
+    ChildOffset: SKPoint;
+    ChildOffsetDirect: SKPoint;
+    AlreadyConsumed: SkiaControl | null;
+    constructor(MappedLocation?: SKPoint, ChildOffset?: SKPoint, ChildOffsetDirect?: SKPoint, AlreadyConsumed?: SkiaControl | null);
+    static readonly Empty: GestureEventProcessingInfo;
+}
+/** DrawnUi SkiaGesturesInfo: payload of ConsumeGestures, set Consumed=true to stop propagation. */
+export declare class SkiaGesturesInfo {
+    Args: SkiaGesturesParameters;
+    Info: GestureEventProcessingInfo;
+    Consumed: boolean;
+    constructor(Args: SkiaGesturesParameters, Info: GestureEventProcessingInfo);
+}
+/** DrawnUi ControlTappedEventArgs. */
+export declare class ControlTappedEventArgs {
+    Control: SkiaControl;
+    Parameters: SkiaGesturesParameters;
+    ProcessingInfo: GestureEventProcessingInfo;
+    constructor(Control: SkiaControl, Parameters: SkiaGesturesParameters, ProcessingInfo: GestureEventProcessingInfo);
+}

package/dist/core/Gestures.js

@@ -0,0 +1,104 @@
+// Mirrors AppoMobi.Gestures + DrawnUi.Features.Gestures types. Locations are PIXELS (like DrawnUi Event.Location).
+export class SKPoint {
+    X;
+    Y;
+    constructor(X = 0, Y = 0) {
+        this.X = X;
+        this.Y = Y;
+    }
+    static Empty = new SKPoint();
+    Add(p) { return new SKPoint(this.X + p.X, this.Y + p.Y); }
+    Subtract(p) { return new SKPoint(this.X - p.X, this.Y - p.Y); }
+}
+/** TouchActionEventArgs.DistanceInfo. Velocity is pixels per second. */
+export class DistanceInfo {
+    Start = SKPoint.Empty;
+    End = SKPoint.Empty;
+    Delta = SKPoint.Empty;
+    Total = SKPoint.Empty;
+    Velocity = SKPoint.Empty;
+}
+/** AppoMobi.Gestures TouchActionEventArgs. */
+export class TouchActionEventArgs {
+    Id = 0;
+    Type = "Pressed";
+    /** Pixels. */
+    Location = SKPoint.Empty;
+    StartingLocation = SKPoint.Empty;
+    Distance = new DistanceInfo();
+    NumberOfTouches = 1;
+    IsInContact = false;
+    Scale = 1;
+    Timestamp = performance.now();
+    /** ms since the previous event of the same pointer. */
+    DeltaTimeMs = 0;
+    /** Mouse wheel: Delta > 0 = wheel down (browser deltaY sign). */
+    Wheel = { Delta: 0 };
+    /** Same as the .NET helper: derives Start/End/Delta/Total from the previous event of the same pointer. */
+    static FillDistanceInfo(current, previous) {
+        if (!previous) {
+            current.Distance = new DistanceInfo();
+            return;
+        }
+        current.StartingLocation = previous.StartingLocation;
+        current.IsInContact = previous.IsInContact;
+        current.DeltaTimeMs = current.Timestamp - previous.Timestamp;
+        const d = new DistanceInfo();
+        d.Start = previous.Location;
+        const released = current.Type === "Released" || current.Type === "Cancelled";
+        d.End = released ? previous.Location : current.Location;
+        d.Delta = released ? SKPoint.Empty : current.Location.Subtract(previous.Location);
+        d.Total = previous.Distance.Total.Add(d.Delta);
+        const secs = current.DeltaTimeMs / 1000;
+        d.Velocity = secs > 0 && !released ? new SKPoint(d.Delta.X / secs, d.Delta.Y / secs) : previous.Distance.Velocity;
+        current.Distance = d;
+    }
+}
+/** DrawnUi SkiaGesturesParameters: recognized gesture + its raw event. */
+export class SkiaGesturesParameters {
+    Type = "Touch";
+    Event = new TouchActionEventArgs();
+    ArrivedTimeNanos = 0;
+    static Create(action, args) {
+        const p = new SkiaGesturesParameters();
+        p.Type = action;
+        p.Event = args;
+        p.ArrivedTimeNanos = Math.round(performance.now() * 1e6);
+        return p;
+    }
+}
+/** DrawnUi GestureEventProcessingInfo. */
+export class GestureEventProcessingInfo {
+    MappedLocation;
+    ChildOffset;
+    ChildOffsetDirect;
+    AlreadyConsumed;
+    constructor(MappedLocation = SKPoint.Empty, ChildOffset = SKPoint.Empty, ChildOffsetDirect = SKPoint.Empty, AlreadyConsumed = null) {
+        this.MappedLocation = MappedLocation;
+        this.ChildOffset = ChildOffset;
+        this.ChildOffsetDirect = ChildOffsetDirect;
+        this.AlreadyConsumed = AlreadyConsumed;
+    }
+    static Empty = new GestureEventProcessingInfo();
+}
+/** DrawnUi SkiaGesturesInfo: payload of ConsumeGestures, set Consumed=true to stop propagation. */
+export class SkiaGesturesInfo {
+    Args;
+    Info;
+    Consumed = false;
+    constructor(Args, Info) {
+        this.Args = Args;
+        this.Info = Info;
+    }
+}
+/** DrawnUi ControlTappedEventArgs. */
+export class ControlTappedEventArgs {
+    Control;
+    Parameters;
+    ProcessingInfo;
+    constructor(Control, Parameters, ProcessingInfo) {
+        this.Control = Control;
+        this.Parameters = Parameters;
+        this.ProcessingInfo = ProcessingInfo;
+    }
+}

package/dist/core/ImageEffects.d.ts

@@ -0,0 +1,29 @@
+import type { ColorFilter } from "canvaskit-wasm";
+import type { Color } from "./Types";
+/** DrawnUi SkiaImageEffect. */
+export type SkiaImageEffect = "None" | "BlackAndWhite" | "Pastel" | "Tint" | "Darken" | "Lighten" | "Grayscale" | "Sepia" | "InvertColors" | "Contrast" | "Saturation" | "Brightness" | "Gamma" | "TSL" | "HSL" | "Custom";
+/** SKBlendMode names understood by CanvasKit (`CK.BlendMode[name]`). */
+export type BlendMode = "Clear" | "Src" | "Dst" | "SrcOver" | "DstOver" | "SrcIn" | "DstIn" | "SrcOut" | "DstOut" | "SrcATop" | "DstATop" | "Xor" | "Plus" | "Modulate" | "Screen" | "Overlay" | "Darken" | "Lighten" | "ColorDodge" | "ColorBurn" | "HardLight" | "SoftLight" | "Difference" | "Exclusion" | "Multiply" | "Hue" | "Saturation" | "Color" | "Luminosity";
+/**
+ * Port of DrawnUi SkiaImageEffects (color matrices). C# matrices use 0..255 translation values (SkiaSharp);
+ * CanvasKit's MakeMatrix takes 0..1, so every translation is divided by 255 here to keep the same look.
+ */
+export declare const SkiaImageEffects: {
+    Matrix(m: number[]): ColorFilter;
+    Tint(color: Color, mode: BlendMode): ColorFilter;
+    Darken(amount: number): ColorFilter;
+    Lighten(amount: number): ColorFilter;
+    Grayscale(): ColorFilter;
+    Pastel(): ColorFilter;
+    Sepia(): ColorFilter;
+    InvertColors(): ColorFilter;
+    Contrast(amount: number): ColorFilter;
+    Saturation(amount: number): ColorFilter;
+    Brightness(amount: number): ColorFilter;
+    Lightness(amount: number): ColorFilter;
+    /** C# uses a lookup table (SKColorFilter.CreateTable); CanvasKit has no table filter, so gamma is approximated by a linear contrast/brightness fit. */
+    Gamma(gamma: number): ColorFilter;
+    /** C# HSL: saturation + lightness matrices, then a tint with the color at (hue, 1, lightness) (MAUI Color.FromHsla). */
+    HSL(hue: number, saturation: number, lightness: number, mode: BlendMode): ColorFilter;
+    TintSL(tint: Color, saturation: number, lightness: number, mode: BlendMode): ColorFilter;
+};

package/dist/core/ImageEffects.js

@@ -0,0 +1,55 @@
+import { Super } from "./Super";
+/**
+ * Port of DrawnUi SkiaImageEffects (color matrices). C# matrices use 0..255 translation values (SkiaSharp);
+ * CanvasKit's MakeMatrix takes 0..1, so every translation is divided by 255 here to keep the same look.
+ */
+export const SkiaImageEffects = {
+    Matrix(m) { return Super.CK.ColorFilter.MakeMatrix(m); },
+    Tint(color, mode) {
+        const CK = Super.CK;
+        return CK.ColorFilter.MakeBlend(Super.ParseColor(color), CK.BlendMode[mode] ?? CK.BlendMode.SrcIn);
+    },
+    Darken(amount) { const a = -amount / 255; return SkiaImageEffects.Matrix([1, 0, 0, 0, a, 0, 1, 0, 0, a, 0, 0, 1, 0, a, 0, 0, 0, 1, 0]); },
+    Lighten(amount) { const a = amount / 255; return SkiaImageEffects.Matrix([1, 0, 0, 0, a, 0, 1, 0, 0, a, 0, 0, 1, 0, a, 0, 0, 0, 1, 0]); },
+    Grayscale() { return SkiaImageEffects.Matrix([0.2989, 0.587, 0.114, 0, 0, 0.2989, 0.587, 0.114, 0, 0, 0.2989, 0.587, 0.114, 0, 0, 0, 0, 0, 1, 0]); },
+    Pastel() { return SkiaImageEffects.Matrix([0.75, 0.25, 0.25, 0, 0, 0.25, 0.75, 0.25, 0, 0, 0.25, 0.25, 0.75, 0, 0, 0, 0, 0, 1, 0]); },
+    Sepia() { return SkiaImageEffects.Matrix([0.393, 0.769, 0.189, 0, 0, 0.349, 0.686, 0.168, 0, 0, 0.272, 0.534, 0.131, 0, 0, 0, 0, 0, 1, 0]); },
+    InvertColors() { return SkiaImageEffects.Matrix([-1, 0, 0, 0, 1, 0, -1, 0, 0, 1, 0, 0, -1, 0, 1, 0, 0, 0, 1, 0]); },
+    Contrast(amount) {
+        const c = amount + 1, l = (0.5 * (1 - amount)) / 255;
+        return SkiaImageEffects.Matrix([c, 0, 0, 0, l, 0, c, 0, 0, l, 0, 0, c, 0, l, 0, 0, 0, 1, 0]);
+    },
+    Saturation(amount) {
+        const rr = 0.213 * (1 - amount), rg = 0.715 * (1 - amount), rb = 0.072 * (1 - amount);
+        return SkiaImageEffects.Matrix([rr + amount, rg, rb, 0, 0, rr, rg + amount, rb, 0, 0, rr, rg, rb + amount, 0, 0, 0, 0, 0, 1, 0]);
+    },
+    Brightness(amount) { return SkiaImageEffects.Matrix([1, 0, 0, 0, amount, 0, 1, 0, 0, amount, 0, 0, 1, 0, amount, 0, 0, 0, 1, 0]); },
+    Lightness(amount) { const a = amount / 255; return SkiaImageEffects.Matrix([1, 0, 0, 0, a, 0, 1, 0, 0, a, 0, 0, 1, 0, a, 0, 0, 0, 1, 0]); },
+    /** C# uses a lookup table (SKColorFilter.CreateTable); CanvasKit has no table filter, so gamma is approximated by a linear contrast/brightness fit. */
+    Gamma(gamma) {
+        if (gamma < 1)
+            gamma += 1;
+        else if (gamma > 1)
+            gamma -= 1;
+        const g = Math.max(0.01, gamma);
+        // best linear fit of x^g on [0,1]: slope/offset from the endpoints and midpoint
+        const mid = Math.pow(0.5, g), slope = 2 * (mid - 0), offset = 0.5 - slope * 0.5 + (mid - 0.5) * 0;
+        return SkiaImageEffects.Matrix([slope, 0, 0, 0, offset, 0, slope, 0, 0, offset, 0, 0, slope, 0, offset, 0, 0, 0, 1, 0]);
+    },
+    /** C# HSL: saturation + lightness matrices, then a tint with the color at (hue, 1, lightness) (MAUI Color.FromHsla). */
+    HSL(hue, saturation, lightness, mode) {
+        const CK = Super.CK;
+        const h = ((hue % 1) + 1) % 1, l = Math.max(0, Math.min(1, lightness));
+        const q = l < 0.5 ? l * 2 : 1, p = 2 * l - q; // s = 1
+        const ch = (t) => { t = ((t % 1) + 1) % 1; return t < 1 / 6 ? p + (q - p) * 6 * t : t < 0.5 ? q : t < 2 / 3 ? p + (q - p) * (2 / 3 - t) * 6 : p; };
+        const toHex = (v) => Math.round(v * 255).toString(16).padStart(2, "0");
+        const tint = `#${toHex(ch(h + 1 / 3))}${toHex(ch(h))}${toHex(ch(h - 1 / 3))}`;
+        const combined = CK.ColorFilter.MakeCompose(SkiaImageEffects.Saturation(saturation), SkiaImageEffects.Lightness(lightness));
+        return CK.ColorFilter.MakeCompose(combined, SkiaImageEffects.Tint(tint, mode));
+    },
+    TintSL(tint, saturation, lightness, mode) {
+        const CK = Super.CK;
+        const a = CK.ColorFilter.MakeCompose(SkiaImageEffects.Lightness(lightness), SkiaImageEffects.Saturation(saturation));
+        return CK.ColorFilter.MakeCompose(SkiaImageEffects.Tint(tint, mode), a);
+    },
+};

package/dist/core/KeyboardManager.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Mirrors DrawnUi KeyboardManager (Blazor / Wasm heads, drawnui-keyboard.js): window-level keydown / keyup
+ * capture listeners feeding `KeyDown` / `KeyUp` (the DOM `event.code`, e.g. "KeyA", "Backspace", "ArrowLeft")
+ * and `KeyChar` (a printable character, no Ctrl / Alt / Meta), plus the modifier state. A drawn editor
+ * subscribes while focused. Characters typed into the hidden TextInputProxy textarea (IME, soft keyboard) arrive
+ * as input events there, so its key events are not forwarded as KeyChar here (a React-port addition over
+ * DrawnUi.Blazor, which has no DOM text input).
+ */
+export type InputKey = string;
+export declare class KeyboardManager {
+    private static attached;
+    private static readonly pressed;
+    private static readonly keyDown;
+    private static readonly keyUp;
+    private static readonly keyChar;
+    static get IsShiftPressed(): boolean;
+    static get IsControlPressed(): boolean;
+    static get IsAltPressed(): boolean;
+    /** C# AttachToKeyboardAsync / JS attachGlobalKeyboard: idempotent. */
+    static AttachToKeyboard(): void;
+    static Subscribe(down: (key: InputKey, e: KeyboardEvent) => void, char: (ch: string, e: KeyboardEvent) => void, up?: (key: InputKey, e: KeyboardEvent) => void): void;
+    static Unsubscribe(down: (key: InputKey, e: KeyboardEvent) => void, char: (ch: string, e: KeyboardEvent) => void, up?: (key: InputKey, e: KeyboardEvent) => void): void;
+    /** JS blurExternalTextInput: a page text input outside the canvas would keep receiving the keys. */
+    static BlurExternalTextInput(): void;
+}