drawnui-react 0.1.0-preview.1

package/dist/core/SkiaImageManager.js

@@ -0,0 +1,122 @@
+import { Super } from "./Super";
+const PRIORITY_RANK = { High: 0, Normal: 1, Low: 2 };
+/**
+ * Mirrors DrawnUi SkiaImageManager: loads + decodes image sources once and shares the decoded CanvasKit Image
+ * between all SkiaImage instances using the same source (`ReuseBitmaps`). `LoadImageManagedAsync` goes through the
+ * priority queue (High > Normal > Low, at most `MaxParallelLoads` fetches in flight, C# semaphore of 5; the same
+ * source requested twice is fetched once), `LoadImageAsync` loads directly. `PreloadImages` warms the cache,
+ * `CancelAll` drops what is still queued. Sources are URLs (absolute, or relative to the page like "images/photo.jpg").
+ */
+export class SkiaImageManager {
+    static Instance = new SkiaImageManager();
+    /** Keep decoded images for reuse across controls (DrawnUi ReuseBitmaps). */
+    static ReuseBitmaps = true;
+    /** Fetches in flight at once through the managed queue (C# CreateSemaphoreForLocalFiles: 5). */
+    static MaxParallelLoads = 5;
+    /** C# CanReload: raised when a queued load failed so the caller may retry later. */
+    CanReload;
+    cache = new Map();
+    pending = new Map();
+    queue = [];
+    waiting = new Map();
+    running = 0;
+    /** Queue diagnostics. */
+    get QueuedCount() { return this.queue.length; }
+    get RunningCount() { return this.running; }
+    /** Cached decoded image, if loaded already (C# GetFromCache). */
+    GetFromCache(source) { return this.cache.get(source); }
+    /** Direct load without the queue (C# LoadImageAsync); cached and de-duplicated. Rejects on network/decode failure. */
+    LoadImageAsync(source, signal) {
+        const cached = this.cache.get(source);
+        if (cached)
+            return Promise.resolve(cached);
+        let inflight = this.pending.get(source);
+        if (inflight)
+            return inflight;
+        inflight = this.Fetch(source, signal);
+        this.pending.set(source, inflight);
+        inflight.finally(() => this.pending.delete(source)).catch(() => undefined);
+        return inflight;
+    }
+    async Fetch(source, signal) {
+        const response = await fetch(source, signal ? { signal } : undefined);
+        if (!response.ok)
+            throw new Error(`DrawnUi: ${response.status} loading image '${source}'`);
+        const image = Super.CK.MakeImageFromEncoded(await response.arrayBuffer());
+        if (!image)
+            throw new Error(`DrawnUi: cannot decode image '${source}'`);
+        if (SkiaImageManager.ReuseBitmaps)
+            this.cache.set(source, image);
+        return image;
+    }
+    /** Queued load (C# LoadImageManagedAsync): cached images resolve at once, the rest wait their turn by priority. */
+    LoadImageManagedAsync(source, signal, priority = "Normal") {
+        const cached = this.cache.get(source);
+        if (cached)
+            return Promise.resolve(cached);
+        const inflight = this.pending.get(source);
+        if (inflight)
+            return inflight;
+        return new Promise((resolve, reject) => {
+            const item = { source, priority, signal, resolve, reject };
+            const same = this.waiting.get(source);
+            if (same) {
+                same.push(item);
+                return;
+            } // already queued: one fetch serves every requester
+            this.waiting.set(source, [item]);
+            const rank = PRIORITY_RANK[priority];
+            let at = this.queue.length;
+            while (at > 0 && PRIORITY_RANK[this.queue[at - 1].priority] > rank)
+                at--;
+            this.queue.splice(at, 0, item);
+            this.Pump();
+        });
+    }
+    Pump() {
+        while (this.running < SkiaImageManager.MaxParallelLoads && this.queue.length > 0) {
+            const item = this.queue.shift();
+            const requesters = this.waiting.get(item.source) ?? [item];
+            this.waiting.delete(item.source);
+            if (item.signal?.aborted) {
+                for (const r of requesters)
+                    r.reject(new Error("DrawnUi: image load cancelled"));
+                continue;
+            }
+            this.running++;
+            const task = this.LoadImageAsync(item.source, item.signal);
+            task.then((image) => { for (const r of requesters)
+                r.resolve(image); }, (error) => { this.CanReload?.(item.source, error); for (const r of requesters)
+                r.reject(error); }).finally(() => { this.running--; this.Pump(); });
+        }
+    }
+    /** C# PreloadImage: warms the cache for one source; failures are ignored. */
+    async PreloadImage(source, priority = "Normal") {
+        await this.LoadImageManagedAsync(source, undefined, priority).catch(() => undefined);
+    }
+    /** Warms the cache so first paint of these images is instant (DrawnUi PreloadImages). Failures are ignored. */
+    async PreloadImages(sources, priority = "Normal") {
+        await Promise.all(sources.map((s) => this.PreloadImage(s, priority)));
+    }
+    /** Drops everything still waiting in the queue (C# CancelAll); loads already in flight finish. */
+    CancelAll() {
+        const items = this.queue.splice(0);
+        for (const item of items) {
+            const requesters = this.waiting.get(item.source) ?? [item];
+            this.waiting.delete(item.source);
+            for (const r of requesters)
+                r.reject(new Error("DrawnUi: image load cancelled"));
+        }
+    }
+    /** Drops a cached image (or everything) — decoded images hold GPU/WASM memory. */
+    Clear(source) {
+        if (source) {
+            this.cache.get(source)?.delete();
+            this.cache.delete(source);
+            return;
+        }
+        for (const img of this.cache.values())
+            img.delete();
+        this.cache.clear();
+    }
+}

package/dist/core/Super.d.ts

@@ -0,0 +1,61 @@
+import { Thickness } from "./Types";
+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 {
+    /** Where the shipped subset fonts are served from (the demo copies them to public/fonts). */
+    static ContentRoot: string;
+    readonly Fonts: {
+        Source: string;
+        Alias: string;
+        Weight: number;
+    }[];
+    /** Noto Sans Math + Symbols 2 subsets as "FontSymbols" / "FontSymbols2" (arrows, math, misc symbols) — DrawnUi.Blazor AddSymbols. */
+    AddSymbols(): FontCollection;
+    /** Noto Color Emoji subset (faces + hands) as "FontEmoji" — DrawnUi.Blazor AddEmojis. */
+    AddEmojis(): 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(). */
+export declare class DrawnUiBuilder {
+    private readonly fonts;
+    ConfigureFonts(configure: (fonts: FontCollection) => void): DrawnUiBuilder;
+    /** Loads CanvasKit + registered fonts. Must complete before the first Canvas is created. */
+    BuildAsync(): Promise<void>;
+}
+/** Mirrors DrawnUi static Super: global engine state. */
+export declare class Super {
+    private static insets?;
+    private static insetsProbe?;
+    private static readonly insetsChanged;
+    /** Safe-area insets in CSS px (points), measured once and on resize; zero outside a browser. */
+    static get Insets(): Thickness;
+    /** Subscribe to inset changes (orientation / resize); returns the unsubscribe. */
+    static OnInsetsChanged(handler: () => void): () => void;
+    static MeasureInsets(): void;
+    /** CanvasKit instance, valid after BuildAsync(). */
+    static CK: CanvasKit;
+    /** Registered typefaces by alias (FontFamily) and weight. */
+    static readonly Fonts: Map<string, Map<number, Typeface>>;
+    /** First registered font, or CanvasKit's built-in one. */
+    static DefaultTypeface?: Typeface;
+    private static readonly fontCache;
+    static UseDrawnUi(): DrawnUiBuilder;
+    /** Master switch: false makes every control render uncached (DrawnUi Super.CacheEnabled). */
+    static CacheEnabled: boolean;
+    private static readonly colorCache;
+    /**
+     * Color string -> CanvasKit color. Hex follows the MAUI/DrawnUi convention: #RGB, #ARGB, #RRGGBB, #AARRGGBB
+     * (alpha FIRST — CSS puts it last, CanvasKit's own parser would read "#22FFFFFF" as opaque cyan).
+     * rgb()/rgba() strings are passed to CanvasKit as is.
+     */
+    static ParseColor(color: string): Float32Array;
+    /** Typeface for an alias at a weight: exact, else the nearest registered weight, else the default face. */
+    /** Alias of the first registered font: what an empty FontFamily resolves to (weights included). */
+    static DefaultFontAlias: string;
+    static GetTypeface(alias?: string, weight?: number): Typeface | null;
+    /** Nearest registered weight of the alias (empty alias = the first registered family); reports the weight actually used. */
+    private static ResolveTypeface;
+    /** Shared Font (typeface + pixel size + synthetic italic), cached across all labels. */
+    static GetFont(alias: string, weight: number, italic: boolean, sizePx: number): Font;
+}

package/dist/core/Super.js

@@ -0,0 +1,178 @@
+import { Thickness } from "./Types";
+// 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";
+/** Mirrors DrawnUi.Net IFontCollection: fonts.AddFont(source, alias[, weight]), plus the Blazor-head AddSymbols/AddEmojis. */
+export class FontCollection {
+    /** Where the shipped subset fonts are served from (the demo copies them to public/fonts). */
+    static ContentRoot = "fonts/";
+    Fonts = [];
+    /** Noto Sans Math + Symbols 2 subsets as "FontSymbols" / "FontSymbols2" (arrows, math, misc symbols) — DrawnUi.Blazor AddSymbols. */
+    AddSymbols() {
+        return this.AddFont(FontCollection.ContentRoot + "NotoSansMathSymbols-Subset.ttf", "FontSymbols")
+            .AddFont(FontCollection.ContentRoot + "NotoSansSymbols2-Subset.ttf", "FontSymbols2");
+    }
+    /** Noto Color Emoji subset (faces + hands) as "FontEmoji" — DrawnUi.Blazor AddEmojis. */
+    AddEmojis() {
+        return this.AddFont(FontCollection.ContentRoot + "NotoColorEmoji-Subset.ttf", "FontEmoji");
+    }
+    /** Registers a face under an alias; weight 100..900 lets FontWeight / FontAttributes=Bold pick the right file. */
+    AddFont(source, alias, weight = 400) {
+        this.Fonts.push({ Source: source, Alias: alias, Weight: weight });
+        return this;
+    }
+}
+/** Mirrors DrawnUi.Net DrawnUiBuilder: Super.UseDrawnUi().ConfigureFonts(...).BuildAsync(). */
+export class DrawnUiBuilder {
+    fonts = new FontCollection();
+    ConfigureFonts(configure) {
+        configure(this.fonts);
+        return this;
+    }
+    /** Loads CanvasKit + registered fonts. Must complete before the first Canvas is created. */
+    async BuildAsync() {
+        Super.CK = await CanvasKitInit({ locateFile: () => wasmUrl });
+        const loaded = new Map(); // same file registered twice = one face
+        for (const f of this.fonts.Fonts) {
+            let face = loaded.get(f.Source);
+            if (!face) {
+                const data = await (await fetch(f.Source)).arrayBuffer();
+                face = Super.CK.Typeface.MakeFreeTypeFaceFromData(data) ?? undefined;
+                if (!face)
+                    throw new Error(`DrawnUi: cannot load font '${f.Source}'`);
+                loaded.set(f.Source, face);
+                // the same face as a CSS font under the alias: the accessibility overlay's selectable text lines up with the drawn glyphs
+                if (typeof FontFace !== "undefined" && typeof document !== "undefined") {
+                    try {
+                        const css = new FontFace(f.Alias, data, { weight: String(f.Weight) });
+                        await css.load();
+                        document.fonts.add(css);
+                    }
+                    catch { /* selection text falls back to a system font */ }
+                }
+            }
+            let weights = Super.Fonts.get(f.Alias);
+            if (!weights) {
+                weights = new Map();
+                Super.Fonts.set(f.Alias, weights);
+            }
+            weights.set(f.Weight, face);
+            Super.DefaultTypeface ??= face;
+            if (!Super.DefaultFontAlias)
+                Super.DefaultFontAlias = f.Alias;
+        }
+        Super.DefaultTypeface ??= Super.CK.Typeface.GetDefault() ?? undefined;
+    }
+}
+/** Mirrors DrawnUi static Super: global engine state. */
+export class Super {
+    // ---- insets (C# Super.Insets / InsetsChanged): the browser's safe area from env(safe-area-inset-*) ----
+    static insets;
+    static insetsProbe;
+    static insetsChanged = new Set();
+    /** Safe-area insets in CSS px (points), measured once and on resize; zero outside a browser. */
+    static get Insets() {
+        if (!Super.insets)
+            Super.MeasureInsets();
+        return Super.insets ?? Thickness.Zero;
+    }
+    /** Subscribe to inset changes (orientation / resize); returns the unsubscribe. */
+    static OnInsetsChanged(handler) { Super.insetsChanged.add(handler); return () => Super.insetsChanged.delete(handler); }
+    static MeasureInsets() {
+        if (typeof document === "undefined") {
+            Super.insets = Thickness.Zero;
+            return;
+        }
+        let probe = Super.insetsProbe;
+        if (!probe) {
+            probe = document.createElement("div");
+            probe.style.cssText = "position:fixed;left:0;top:0;width:0;height:0;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);";
+            document.body.appendChild(probe);
+            Super.insetsProbe = probe;
+            window.addEventListener("resize", () => Super.MeasureInsets());
+        }
+        const cs = getComputedStyle(probe);
+        const next = new Thickness(parseFloat(cs.paddingLeft) || 0, parseFloat(cs.paddingTop) || 0, parseFloat(cs.paddingRight) || 0, parseFloat(cs.paddingBottom) || 0);
+        const prev = Super.insets;
+        Super.insets = next;
+        if (prev && (prev.Left !== next.Left || prev.Top !== next.Top || prev.Right !== next.Right || prev.Bottom !== next.Bottom))
+            for (const h of [...Super.insetsChanged])
+                h();
+    }
+    /** CanvasKit instance, valid after BuildAsync(). */
+    static CK;
+    /** Registered typefaces by alias (FontFamily) and weight. */
+    static Fonts = new Map();
+    /** First registered font, or CanvasKit's built-in one. */
+    static DefaultTypeface;
+    static fontCache = new Map();
+    static UseDrawnUi() { return new DrawnUiBuilder(); }
+    /** Master switch: false makes every control render uncached (DrawnUi Super.CacheEnabled). */
+    static CacheEnabled = true;
+    static colorCache = new Map();
+    /**
+     * Color string -> CanvasKit color. Hex follows the MAUI/DrawnUi convention: #RGB, #ARGB, #RRGGBB, #AARRGGBB
+     * (alpha FIRST — CSS puts it last, CanvasKit's own parser would read "#22FFFFFF" as opaque cyan).
+     * rgb()/rgba() strings are passed to CanvasKit as is.
+     */
+    static ParseColor(color) {
+        let c = Super.colorCache.get(color);
+        if (c)
+            return c;
+        if (color.startsWith("#")) {
+            let h = color.slice(1);
+            if (h.length === 3 || h.length === 4)
+                h = [...h].map((ch) => ch + ch).join("");
+            let a = 1, rgb = h;
+            if (h.length === 8) {
+                a = parseInt(h.slice(0, 2), 16) / 255;
+                rgb = h.slice(2);
+            }
+            const r = parseInt(rgb.slice(0, 2), 16) / 255, g = parseInt(rgb.slice(2, 4), 16) / 255, b = parseInt(rgb.slice(4, 6), 16) / 255;
+            c = Super.CK.Color4f(r, g, b, a);
+        }
+        else {
+            c = Super.CK.parseColorString(color);
+        }
+        Super.colorCache.set(color, c);
+        return c;
+    }
+    /** Typeface for an alias at a weight: exact, else the nearest registered weight, else the default face. */
+    /** Alias of the first registered font: what an empty FontFamily resolves to (weights included). */
+    static DefaultFontAlias = "";
+    static GetTypeface(alias, weight = 0) {
+        return Super.ResolveTypeface(alias, weight).Typeface;
+    }
+    /** 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);
+        const target = weight > 0 ? weight : 400;
+        if (weights && weights.size > 0) {
+            if (weights.has(target))
+                return { Typeface: weights.get(target), Weight: target };
+            let best;
+            for (const w of weights.keys())
+                if (best === undefined || Math.abs(w - target) < Math.abs(best - target))
+                    best = w;
+            return { Typeface: weights.get(best), Weight: best };
+        }
+        return { Typeface: Super.DefaultTypeface ?? null, Weight: 400 };
+    }
+    /** Shared Font (typeface + pixel size + synthetic italic), cached across all labels. */
+    static GetFont(alias, weight, italic, sizePx) {
+        const key = `${alias}|${weight}|${italic ? 1 : 0}|${sizePx}`;
+        let font = Super.fontCache.get(key);
+        if (!font) {
+            const resolved = Super.ResolveTypeface(alias, weight);
+            font = new Super.CK.Font(resolved.Typeface, sizePx);
+            font.setSubpixel(true);
+            if (italic)
+                font.setSkewX(-0.25);
+            // no bold face registered: synthetic bold, like C# Font.Embolden = IsBold
+            if (weight >= 600 && resolved.Weight < 600)
+                font.setEmbolden(true);
+            Super.fontCache.set(key, font);
+        }
+        return font;
+    }
+}

package/dist/core/TextInputProxy.d.ts

@@ -0,0 +1,31 @@
+import type { SkiaEditor } from "../controls/SkiaEditor";
+/**
+ * Hidden DOM textarea standing in for the focused SkiaEditor so IME composition, mobile soft keyboards,
+ * autocorrect, native copy / cut / paste and undo reach the drawn editor. Not part of DrawnUi.Blazor (which has no
+ * DOM input): the textarea mirrors the editor's text + selection, and every `input` event is diffed against the
+ * editor and applied through the same stub methods the physical keyboard uses (`StubSelectRange` + `StubTypeText`
+ * / `StubBackspace`, a line break through `StubPressEnter`). Keys that the textarea turns into input events
+ * (characters, Backspace, Delete, Enter, clipboard shortcuts) are skipped by the KeyboardManager path while the
+ * proxy is active; navigation keys keep going through `KeyDown`.
+ */
+export declare class TextInputProxy {
+    private static element?;
+    private static owner?;
+    private static composing;
+    private static applying;
+    /** The textarea (created on first use); KeyboardManager recognizes it through `data-drawnui-text-input`. */
+    static get Element(): HTMLTextAreaElement | undefined;
+    static IsActive(editor: SkiaEditor): boolean;
+    static IsProxyTarget(target: EventTarget | null): boolean;
+    private static Create;
+    /** The editor took focus: the textarea mirrors it and gets DOM focus (soft keyboard, IME). */
+    static Attach(editor: SkiaEditor): void;
+    static Detach(editor: SkiaEditor): void;
+    private static Configure;
+    /** Editor text / selection changed: mirror it (never while an IME composition is in flight). */
+    static Sync(editor: SkiaEditor): void;
+    /** Puts the textarea over the editor so mobile browsers scroll the right spot into view. */
+    private static Place;
+    /** The textarea changed (typing, IME commit, paste, undo): diff against the editor and replay through the stubs. */
+    private static ApplyFromElement;
+}

package/dist/core/TextInputProxy.js

@@ -0,0 +1,144 @@
+/**
+ * Hidden DOM textarea standing in for the focused SkiaEditor so IME composition, mobile soft keyboards,
+ * autocorrect, native copy / cut / paste and undo reach the drawn editor. Not part of DrawnUi.Blazor (which has no
+ * DOM input): the textarea mirrors the editor's text + selection, and every `input` event is diffed against the
+ * editor and applied through the same stub methods the physical keyboard uses (`StubSelectRange` + `StubTypeText`
+ * / `StubBackspace`, a line break through `StubPressEnter`). Keys that the textarea turns into input events
+ * (characters, Backspace, Delete, Enter, clipboard shortcuts) are skipped by the KeyboardManager path while the
+ * proxy is active; navigation keys keep going through `KeyDown`.
+ */
+export class TextInputProxy {
+    static element;
+    static owner;
+    static composing = false;
+    static applying = false;
+    /** The textarea (created on first use); KeyboardManager recognizes it through `data-drawnui-text-input`. */
+    static get Element() { return TextInputProxy.element; }
+    static IsActive(editor) { return TextInputProxy.owner === editor; }
+    static IsProxyTarget(target) { return !!target && target === TextInputProxy.element; }
+    static Create() {
+        if (typeof document === "undefined")
+            return undefined;
+        const el = document.createElement("textarea");
+        el.dataset.drawnuiTextInput = "1";
+        el.setAttribute("aria-hidden", "true");
+        el.tabIndex = -1;
+        el.autocomplete = "off";
+        el.setAttribute("autocorrect", "off");
+        el.setAttribute("autocapitalize", "off");
+        el.rows = 1;
+        // fixed 1x1 box over the caret: invisible, still focusable, 16px font keeps iOS from zooming the page
+        el.style.cssText = "position:fixed;left:0;top:0;width:1px;height:1px;padding:0;border:0;margin:0;opacity:0.01;font-size:16px;line-height:1;resize:none;overflow:hidden;outline:none;background:transparent;color:transparent;caret-color:transparent;pointer-events:none;z-index:-1;";
+        el.addEventListener("compositionstart", () => { TextInputProxy.composing = true; });
+        el.addEventListener("compositionend", () => { TextInputProxy.composing = false; TextInputProxy.ApplyFromElement(); });
+        el.addEventListener("input", () => TextInputProxy.ApplyFromElement());
+        el.addEventListener("blur", () => {
+            // focus moved to another DOM text field (a page input): the drawn editor loses focus like C# BlurExternalTextInput
+            queueMicrotask(() => {
+                const a = document.activeElement;
+                const owner = TextInputProxy.owner;
+                if (owner && a && a !== el && (a.tagName === "INPUT" || a.tagName === "TEXTAREA" || a.isContentEditable))
+                    owner.IsFocused = false;
+            });
+        });
+        // a tap on the canvas moves DOM focus to the body: give it back to the proxy synchronously (keeps the soft keyboard)
+        window.addEventListener("pointerup", (e) => {
+            const owner = TextInputProxy.owner;
+            if (owner && owner.IsFocused && e.target?.tagName === "CANVAS")
+                el.focus({ preventScroll: true });
+        }, true);
+        document.body.appendChild(el);
+        return el;
+    }
+    /** The editor took focus: the textarea mirrors it and gets DOM focus (soft keyboard, IME). */
+    static Attach(editor) {
+        const el = TextInputProxy.element ?? (TextInputProxy.element = TextInputProxy.Create());
+        if (!el)
+            return;
+        TextInputProxy.owner = editor;
+        TextInputProxy.composing = false;
+        TextInputProxy.Configure(editor, el);
+        TextInputProxy.Sync(editor);
+        el.focus({ preventScroll: true });
+    }
+    static Detach(editor) {
+        if (TextInputProxy.owner !== editor)
+            return;
+        TextInputProxy.owner = undefined;
+        const el = TextInputProxy.element;
+        if (el && document.activeElement === el)
+            el.blur();
+    }
+    static Configure(editor, el) {
+        const modes = { Default: "text", Numeric: "numeric", Decimal: "decimal", Phone: "tel", Email: "email" };
+        el.inputMode = modes[editor.KeyboardType] ?? "text";
+        const hints = { Done: "done", Go: "go", Next: "next", Search: "search", Send: "send" };
+        el.enterKeyHint = hints[editor.ReturnType] ?? (editor.IsMultiline ? "enter" : "done");
+        el.spellcheck = editor.IsSpellCheckEnabled;
+    }
+    /** Editor text / selection changed: mirror it (never while an IME composition is in flight). */
+    static Sync(editor) {
+        const el = TextInputProxy.element;
+        if (!el || TextInputProxy.owner !== editor || TextInputProxy.composing || TextInputProxy.applying)
+            return;
+        if (el.value !== editor.Text)
+            el.value = editor.Text;
+        const start = editor.CursorPosition, end = start + editor.SelectionLength;
+        if (el.selectionStart !== start || el.selectionEnd !== end)
+            el.setSelectionRange(start, end);
+        TextInputProxy.Place(editor, el);
+    }
+    /** Puts the textarea over the editor so mobile browsers scroll the right spot into view. */
+    static Place(editor, el) {
+        const canvas = editor.Superview?.Element;
+        if (!canvas)
+            return;
+        const b = canvas.getBoundingClientRect();
+        const scale = editor.RenderingScale || 1;
+        const r = editor.DrawingRect;
+        el.style.left = `${Math.round(b.left + r.Left / scale)}px`;
+        el.style.top = `${Math.round(b.top + r.Top / scale)}px`;
+    }
+    /** The textarea changed (typing, IME commit, paste, undo): diff against the editor and replay through the stubs. */
+    static ApplyFromElement() {
+        const el = TextInputProxy.element, editor = TextInputProxy.owner;
+        if (!el || !editor || TextInputProxy.composing)
+            return;
+        const next = el.value, prev = editor.Text;
+        if (next === prev) {
+            TextInputProxy.Sync(editor);
+            return;
+        }
+        let start = 0;
+        const max = Math.min(prev.length, next.length);
+        while (start < max && prev.charCodeAt(start) === next.charCodeAt(start))
+            start++;
+        let endPrev = prev.length, endNext = next.length;
+        while (endPrev > start && endNext > start && prev.charCodeAt(endPrev - 1) === next.charCodeAt(endNext - 1)) {
+            endPrev--;
+            endNext--;
+        }
+        const inserted = next.slice(start, endNext);
+        TextInputProxy.applying = true;
+        try {
+            editor.StubSelectRange(start, endPrev - start);
+            if (inserted.includes("\n") && (!editor.IsMultiline || editor.ShouldSubmitOnEnter)) {
+                // Enter on a single-line editor (or a Send editor): submit instead of inserting the break
+                const text = inserted.replace(/\n/g, "");
+                if (text)
+                    editor.StubTypeText(text);
+                else if (endPrev > start)
+                    editor.StubBackspace();
+                editor.StubPressEnter(false, false);
+            }
+            else if (inserted)
+                editor.StubTypeText(inserted);
+            else
+                editor.StubBackspace();
+        }
+        finally {
+            TextInputProxy.applying = false;
+        }
+        TextInputProxy.Sync(editor);
+    }
+}