@lingxia/elements 0.9.0 → 0.11.1

package/dist/textarea.js

@@ -1,841 +0,0 @@
-import { sendNativeComponentMessage, registerNativeComponentHandler, addNativeComponentLayoutInvalidationListener, invalidateNativeComponentLayout } from "./nativecomponent.js";
-import { ensureComponentId, NativeComponentUpdateState } from "./component.js";
-import { measureElement } from "./dom.js";
-import { isHarmony, isDesktop, isMacOS, isAndroid, isIOS } from "./platform.js";
-import { getPropOrAttr as getSharedPropOrAttr, getBoolAttr as getSharedBoolAttr, getNumAttr as getSharedNumAttr, parseNumberLike, shouldRefreshForDataAttribute as shouldRefreshSharedDataAttribute, collectDataset as collectSharedDataset, ensureElementVisibleForKeyboard } from "./text_component_shared.js";
-const HARMONY_PROPS_PREFIX = "data:application/json,";
-// Component implementation
-export class LxTextareaElement extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.componentId = null;
-        this.mounted = false;
-        this._handlers = {};
-        this.rawHandlers = {};
-        this.pendingHarmonyRetryTimer = null;
-        this.pendingHarmonyRetryCount = 0;
-        this.lastKeyboardHeight = 0;
-        this.updateState = new NativeComponentUpdateState();
-        this.pendingLayoutFrame = null;
-        this.focusLayoutSyncTimer = null;
-        this.layoutEventListener = {
-            handleEvent: () => this.schedulePositionSync()
-        };
-        this._pageBindings = {};
-    }
-    static get observedAttributes() {
-        return [
-            "id", "value", "placeholder", "placeholder-style",
-            "placeholder-class", "maxlength", "disabled", "auto-focus", "focus",
-            "auto-height", "cursor-spacing", "show-confirm-bar", "adjust-position",
-            "hold-keyboard", "disable-default-padding", "confirm-type",
-            "confirm-hold", "fixed", "adjust-keyboard-to", "cursor",
-            "selection-start", "selection-end"
-        ];
-    }
-    set pageBindings(bindings) {
-        this._pageBindings = bindings !== null && bindings !== void 0 ? bindings : {};
-        if (this.isConnected) {
-            this.mountTextarea();
-        }
-    }
-    get pageBindings() {
-        return this._pageBindings;
-    }
-    upgradeProperty(propName) {
-        const self = this;
-        if (!Object.prototype.hasOwnProperty.call(self, propName))
-            return;
-        const value = self[propName];
-        delete self[propName];
-        self[propName] = value;
-    }
-    registerNativeHandler() {
-        if (!this.componentId)
-            return;
-        if (this.unregister) {
-            this.unregister();
-            this.unregister = undefined;
-        }
-        this.unregister = registerNativeComponentHandler(this.componentId, (message) => {
-            if (typeof message.event !== "string")
-                return;
-            const detail = this.normalizeNativeDetail(message.detail);
-            if (isHarmony()) {
-            }
-            if (message.event === "linechange") {
-                this.applyNativeAutoHeightIfNeeded(detail);
-            }
-            else if (message.event === "keyboardheightchange") {
-                const nextKeyboardHeight = this.parseHeight(detail.height);
-                if (nextKeyboardHeight !== undefined) {
-                    this.lastKeyboardHeight = Math.max(0, nextKeyboardHeight);
-                }
-                this.resyncHarmonyLayoutAfterFocus();
-                this.ensureVisibleForKeyboard(this.lastKeyboardHeight, false);
-            }
-            else if (message.event === "focus") {
-                this.startFocusLayoutSync();
-                this.resyncHarmonyLayoutAfterFocus();
-            }
-            else if (message.event === "blur") {
-                this.lastKeyboardHeight = 0;
-                this.stopFocusLayoutSync();
-            }
-            this.dispatchEvent(new CustomEvent(message.event, { detail, bubbles: true }));
-        });
-    }
-    normalizeNativeDetail(detail) {
-        if (!detail || typeof detail !== "object") {
-            return detail !== null && detail !== void 0 ? detail : {};
-        }
-        const raw = detail;
-        if (raw.data && typeof raw.data === "object") {
-            const data = raw.data;
-            if ("value" in data ||
-                "cursor" in data ||
-                "selectionStart" in data ||
-                "selectionEnd" in data ||
-                "lineCount" in data ||
-                "height" in data ||
-                "heightRpx" in data ||
-                "duration" in data) {
-                return data;
-            }
-        }
-        return raw;
-    }
-    unmountNativeComponentById(componentId) {
-        const useDesktopFallback = isDesktop() && !isMacOS();
-        if (!componentId || isHarmony() || useDesktopFallback)
-            return;
-        sendNativeComponentMessage({
-            action: "component.unmount",
-            id: componentId
-        });
-    }
-    teardownHarmonyEmbed() {
-        if (this.harmonyEmbed && this.contains(this.harmonyEmbed)) {
-            this.removeChild(this.harmonyEmbed);
-        }
-        this.harmonyEmbed = undefined;
-        this.lastHarmonyProps = undefined;
-        if (this.pendingHarmonyRetryTimer !== null) {
-            clearTimeout(this.pendingHarmonyRetryTimer);
-            this.pendingHarmonyRetryTimer = null;
-        }
-        this.pendingHarmonyProps = undefined;
-        this.pendingHarmonyRetryCount = 0;
-    }
-    connectedCallback() {
-        this.upgradeProperty("pageBindings");
-        this.upgradeProperty("oninput");
-        this.upgradeProperty("onchange");
-        this.upgradeProperty("onfocus");
-        this.upgradeProperty("onblur");
-        this.upgradeProperty("onconfirm");
-        this.upgradeProperty("onlinechange");
-        this.upgradeProperty("onkeyboardheightchange");
-        this.componentId = ensureComponentId(this, "lx-textarea", this.componentId);
-        if (!this.componentId)
-            return;
-        this.registerNativeHandler();
-        this.startAttrObserver();
-        this.startTracking();
-        this.mountTextarea();
-        queueMicrotask(() => {
-            if (!this.isConnected)
-                return;
-            this.mountTextarea();
-        });
-    }
-    disconnectedCallback() {
-        if (this.shadow) {
-            this.innerTextarea = undefined;
-            this.shadow = undefined;
-        }
-        if (this.componentId) {
-            this.unmountNativeComponentById(this.componentId);
-        }
-        if (this.unregister) {
-            this.unregister();
-            this.unregister = undefined;
-        }
-        this.teardownHarmonyEmbed();
-        this.lastNativeAutoHeight = undefined;
-        this.autoHeightMinHeight = undefined;
-        this.lastKeyboardHeight = 0;
-        this.stopFocusLayoutSync();
-        this.stopTracking();
-        this.mounted = false;
-        this.updateState.reset();
-        this.stopAttrObserver();
-        Object.keys(this._handlers).forEach(name => {
-            this.removeEventListener(name, this._handlers[name]);
-        });
-        this._handlers = {};
-        this.rawHandlers = {};
-    }
-    attributeChangedCallback(name) {
-        if (name === "id") {
-            const prev = this.componentId;
-            this.componentId = ensureComponentId(this, "lx-textarea", this.componentId);
-            if (prev && this.componentId !== prev) {
-                this.mounted = false;
-                this.updateState.reset();
-                if (this.isConnected) {
-                    this.unmountNativeComponentById(prev);
-                    this.teardownHarmonyEmbed();
-                    this.registerNativeHandler();
-                }
-            }
-        }
-        if (!this.isConnected)
-            return;
-        this.mountTextarea();
-    }
-    getAttr(name, fallback = "") {
-        const raw = this.getPropOrAttr(name);
-        if (raw === undefined || raw === null)
-            return fallback;
-        return String(raw);
-    }
-    getBoolAttr(name) {
-        return getSharedBoolAttr(this, name);
-    }
-    getNumAttr(name) {
-        return getSharedNumAttr(this, name);
-    }
-    getPropOrAttr(name) {
-        return getSharedPropOrAttr(this, name);
-    }
-    shouldTrackNativeLayout() {
-        return isAndroid() || isIOS() || isHarmony();
-    }
-    startTracking() {
-        var _a, _b;
-        if (!this.shouldTrackNativeLayout())
-            return;
-        window.addEventListener("resize", this.layoutEventListener);
-        if (isAndroid()) {
-            // Android overlay can drift inside nested scrolling containers; capture phase catches element scroll events.
-            window.addEventListener("scroll", this.layoutEventListener, { capture: true, passive: true });
-        }
-        else if (isHarmony()) {
-            // Harmony native embed coordinates need continuous sync while page scrolls.
-            window.addEventListener("scroll", this.layoutEventListener, { capture: true, passive: true });
-        }
-        else if (isIOS()) {
-            // Match video behavior on iOS: track top-level page scrolling only.
-            window.addEventListener("scroll", this.layoutEventListener, { passive: true });
-        }
-        (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.addEventListener("resize", this.layoutEventListener);
-        (_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.addEventListener("scroll", this.layoutEventListener);
-        if (isAndroid()) {
-            this.removeLayoutInvalidationListener = addNativeComponentLayoutInvalidationListener(this.layoutEventListener);
-        }
-        this.startSizeObserver();
-        this.schedulePositionSync();
-    }
-    stopTracking() {
-        var _a, _b, _c;
-        window.removeEventListener("resize", this.layoutEventListener);
-        window.removeEventListener("scroll", this.layoutEventListener, true);
-        window.removeEventListener("scroll", this.layoutEventListener);
-        (_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.removeEventListener("resize", this.layoutEventListener);
-        (_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.removeEventListener("scroll", this.layoutEventListener);
-        (_c = this.removeLayoutInvalidationListener) === null || _c === void 0 ? void 0 : _c.call(this);
-        this.removeLayoutInvalidationListener = undefined;
-        this.stopSizeObserver();
-        if (this.pendingLayoutFrame !== null) {
-            cancelAnimationFrame(this.pendingLayoutFrame);
-            this.pendingLayoutFrame = null;
-        }
-    }
-    startSizeObserver() {
-        if (typeof ResizeObserver === "undefined" || this.resizeObserver)
-            return;
-        this.resizeObserver = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                if (entry.target !== this)
-                    continue;
-                this.schedulePositionSync();
-                break;
-            }
-        });
-        this.resizeObserver.observe(this);
-    }
-    stopSizeObserver() {
-        if (!this.resizeObserver)
-            return;
-        this.resizeObserver.disconnect();
-        this.resizeObserver = undefined;
-    }
-    schedulePositionSync() {
-        if (!this.shouldTrackNativeLayout() || !this.isConnected)
-            return;
-        if (this.pendingLayoutFrame !== null)
-            return;
-        this.pendingLayoutFrame = requestAnimationFrame(() => {
-            this.pendingLayoutFrame = null;
-            if (!this.isConnected)
-                return;
-            this.mountTextarea();
-        });
-    }
-    applyNativeAutoHeightIfNeeded(detail) {
-        var _a;
-        if (!this.getBoolAttr("auto-height")) {
-            this.autoHeightMinHeight = undefined;
-            return;
-        }
-        const height = this.parseHeight((_a = detail.height) !== null && _a !== void 0 ? _a : detail.heightRpx);
-        if (height === undefined || height <= 0)
-            return;
-        let nextHeight = height;
-        if (this.autoHeightMinHeight === undefined) {
-            // Preserve the initial CSS/layout height as the auto-height floor.
-            // Native runtimes may report content height for each extra line, but the
-            // component should only grow after it has consumed the configured height.
-            // Prefer inline style height over getBoundingClientRect() because the
-            // rect may still be 0 if linechange arrives before the first layout pass.
-            const styleHeight = Number.parseFloat(this.style.height);
-            const rectHeight = this.getBoundingClientRect().height;
-            const initialHeight = Number.isFinite(styleHeight) && styleHeight > 1
-                ? styleHeight
-                : rectHeight;
-            if (Number.isFinite(initialHeight) && initialHeight > 1) {
-                this.autoHeightMinHeight = initialHeight;
-            }
-        }
-        if (this.autoHeightMinHeight !== undefined) {
-            nextHeight = Math.max(nextHeight, this.autoHeightMinHeight);
-        }
-        if (this.lastNativeAutoHeight !== undefined && Math.abs(this.lastNativeAutoHeight - nextHeight) < 0.5)
-            return;
-        this.lastNativeAutoHeight = nextHeight;
-        this.style.height = `${nextHeight}px`;
-        if (isAndroid()) {
-            invalidateNativeComponentLayout();
-        }
-        this.mountTextarea();
-        requestAnimationFrame(() => {
-            if (!this.isConnected)
-                return;
-            this.mountTextarea();
-        });
-        setTimeout(() => {
-            if (!this.isConnected)
-                return;
-            this.mountTextarea();
-        }, 32);
-    }
-    parseHeight(value) {
-        return parseNumberLike(value);
-    }
-    collectProps() {
-        const autoFocus = this.getBoolAttr("auto-focus");
-        const value = this.getPropOrAttr("value");
-        const props = {
-            value: value === undefined || value === null ? undefined : String(value),
-            placeholder: this.getAttr("placeholder"),
-            placeholderStyle: this.getAttr("placeholder-style"),
-            disabled: this.getBoolAttr("disabled"),
-            // Use string values so "false" survives all bridge layers (some paths may drop falsy booleans).
-            focus: (this.getBoolAttr("focus") || autoFocus) ? "true" : "false",
-            autoFocus,
-            autoHeight: this.getBoolAttr("auto-height"),
-            showConfirmBar: this.getAttribute("show-confirm-bar") !== "false",
-            adjustPosition: this.getAttribute("adjust-position") !== "false",
-            holdKeyboard: this.getBoolAttr("hold-keyboard"),
-            disableDefaultPadding: this.getBoolAttr("disable-default-padding"),
-            confirmHold: this.getBoolAttr("confirm-hold"),
-            fixed: this.getBoolAttr("fixed"),
-        };
-        const textColor = this.getHostTextColor();
-        if (textColor)
-            props.textColor = textColor;
-        const placeholderClass = this.getAttr("placeholder-class");
-        if (placeholderClass)
-            props.placeholderClass = placeholderClass;
-        const maxlength = this.getNumAttr("maxlength");
-        if (maxlength !== undefined)
-            props.maxlength = maxlength;
-        const cursorSpacing = this.getNumAttr("cursor-spacing");
-        if (cursorSpacing !== undefined)
-            props.cursorSpacing = cursorSpacing;
-        const confirmType = this.getAttr("confirm-type");
-        if (confirmType)
-            props.confirmType = confirmType;
-        const adjustKeyboardTo = this.getAttr("adjust-keyboard-to");
-        if (adjustKeyboardTo)
-            props.adjustKeyboardTo = adjustKeyboardTo;
-        const cursor = this.getNumAttr("cursor");
-        if (cursor !== undefined)
-            props.cursor = cursor;
-        const selectionStart = this.getNumAttr("selection-start");
-        if (selectionStart !== undefined)
-            props.selectionStart = selectionStart;
-        const selectionEnd = this.getNumAttr("selection-end");
-        if (selectionEnd !== undefined)
-            props.selectionEnd = selectionEnd;
-        return props;
-    }
-    getHostTextColor() {
-        var _a;
-        const color = (_a = getComputedStyle(this).color) === null || _a === void 0 ? void 0 : _a.trim();
-        if (!color)
-            return undefined;
-        if (color === "transparent" || color === "rgba(0, 0, 0, 0)")
-            return undefined;
-        return color;
-    }
-    shouldAdjustPosition() {
-        return this.getAttribute("adjust-position") !== "false";
-    }
-    ensureVisibleForKeyboard(explicitKeyboardHeight = 0, forceCenter = false) {
-        if (isHarmony() || isAndroid() || isIOS())
-            return;
-        if (!this.shouldAdjustPosition())
-            return;
-        ensureElementVisibleForKeyboard(this, explicitKeyboardHeight, forceCenter, [120]);
-    }
-    resyncHarmonyLayoutAfterFocus() {
-        if (!isHarmony() || !this.isConnected)
-            return;
-        this.mountTextarea();
-        setTimeout(() => {
-            if (!this.isConnected)
-                return;
-            this.mountTextarea();
-        }, 32);
-        setTimeout(() => {
-            if (!this.isConnected)
-                return;
-            this.mountTextarea();
-        }, 96);
-    }
-    startFocusLayoutSync() {
-        if (!isHarmony())
-            return;
-        if (this.focusLayoutSyncTimer !== null)
-            return;
-        this.focusLayoutSyncTimer = window.setInterval(() => {
-            if (!this.isConnected) {
-                this.stopFocusLayoutSync();
-                return;
-            }
-            this.mountTextarea();
-        }, 80);
-    }
-    stopFocusLayoutSync() {
-        if (this.focusLayoutSyncTimer === null)
-            return;
-        clearInterval(this.focusLayoutSyncTimer);
-        this.focusLayoutSyncTimer = null;
-    }
-    shouldRefreshForAttribute(name) {
-        return shouldRefreshSharedDataAttribute(name);
-    }
-    startAttrObserver() {
-        if (typeof MutationObserver === "undefined" || this.attrObserver)
-            return;
-        this.attrObserver = new MutationObserver((mutations) => {
-            for (const mutation of mutations) {
-                const attrName = mutation.attributeName;
-                if (!attrName || !this.shouldRefreshForAttribute(attrName))
-                    continue;
-                this.mountTextarea();
-                break;
-            }
-        });
-        this.attrObserver.observe(this, { attributes: true });
-    }
-    stopAttrObserver() {
-        if (!this.attrObserver)
-            return;
-        this.attrObserver.disconnect();
-        this.attrObserver = undefined;
-    }
-    collectDataset() {
-        return collectSharedDataset(this);
-    }
-    autoResizeTextarea(textarea) {
-        textarea.style.height = "auto";
-        textarea.style.height = `${textarea.scrollHeight}px`;
-    }
-    getLineCount(textarea) {
-        const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20;
-        return Math.round(textarea.scrollHeight / lineHeight);
-    }
-    mountDesktopTextarea() {
-        const autoHeight = this.getBoolAttr("auto-height");
-        if (!this.shadow) {
-            this.shadow = this.attachShadow({ mode: "open" });
-            const style = document.createElement("style");
-            style.textContent = `
-        :host {
-          display: block;
-          width: 100%;
-        }
-        textarea {
-          display: block;
-          width: 100%;
-          box-sizing: border-box;
-          padding: 8px 12px;
-          border: 1px solid #d1d5db;
-          border-radius: 6px;
-          font-size: 14px;
-          line-height: 1.5;
-          color: #111827;
-          background: #fff;
-          outline: none;
-          transition: border-color 0.2s;
-          resize: vertical;
-          min-height: 80px;
-          font-family: inherit;
-        }
-        textarea.auto-height {
-          resize: none;
-          overflow: hidden;
-        }
-        textarea:focus {
-          border-color: #3b82f6;
-          box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
-        }
-        textarea:disabled {
-          background: #f3f4f6;
-          color: #9ca3af;
-          cursor: not-allowed;
-        }
-        textarea::placeholder {
-          color: #9ca3af;
-        }
-      `;
-            this.shadow.appendChild(style);
-            const textarea = document.createElement("textarea");
-            this.innerTextarea = textarea;
-            this.shadow.appendChild(textarea);
-            let lastLineCount = 0;
-            // Stop native composed events from leaking through shadow boundary
-            // to avoid double-firing (native retarget + our CustomEvent).
-            textarea.addEventListener("input", (e) => {
-                e.stopPropagation();
-                const detail = { value: textarea.value };
-                this.dispatchEvent(new CustomEvent("input", { detail, bubbles: true }));
-                if (textarea.classList.contains("auto-height")) {
-                    this.autoResizeTextarea(textarea);
-                }
-                const lineCount = this.getLineCount(textarea);
-                if (lineCount !== lastLineCount) {
-                    lastLineCount = lineCount;
-                    const lineDetail = { lineCount };
-                    this.dispatchEvent(new CustomEvent("linechange", { detail: lineDetail, bubbles: true }));
-                }
-            });
-            textarea.addEventListener("change", (e) => {
-                e.stopPropagation();
-                const detail = { value: textarea.value };
-                this.dispatchEvent(new CustomEvent("change", { detail, bubbles: true }));
-            });
-            textarea.addEventListener("focus", (e) => {
-                e.stopPropagation();
-                const detail = { value: textarea.value };
-                this.dispatchEvent(new CustomEvent("focus", { detail, bubbles: true }));
-            });
-            textarea.addEventListener("blur", (e) => {
-                e.stopPropagation();
-                const detail = { value: textarea.value };
-                this.dispatchEvent(new CustomEvent("blur", { detail, bubbles: true }));
-            });
-            textarea.addEventListener("keydown", (e) => {
-                if (e.key !== "Enter" || e.shiftKey)
-                    return;
-                const confirmType = this.getAttr("confirm-type", "return").trim().toLowerCase();
-                if (confirmType === "return")
-                    return;
-                e.preventDefault();
-                const detail = { value: textarea.value };
-                this.dispatchEvent(new CustomEvent("confirm", { detail, bubbles: true }));
-                if (!this.getBoolAttr("confirm-hold")) {
-                    textarea.blur();
-                }
-            });
-        }
-        // Sync attributes to inner textarea
-        const textarea = this.innerTextarea;
-        const props = this.collectProps();
-        textarea.placeholder = props.placeholder || "";
-        textarea.disabled = props.disabled;
-        if (props.maxlength !== undefined) {
-            textarea.maxLength = props.maxlength;
-        }
-        else {
-            textarea.removeAttribute("maxlength");
-        }
-        if (autoHeight) {
-            textarea.classList.add("auto-height");
-        }
-        else {
-            textarea.classList.remove("auto-height");
-        }
-        // Only sync value if it differs (avoid cursor jump)
-        if (props.value !== undefined && textarea.value !== props.value) {
-            textarea.value = props.value;
-        }
-        if (typeof props.selectionStart === "number" &&
-            typeof props.selectionEnd === "number" &&
-            props.selectionStart >= 0 &&
-            props.selectionEnd >= props.selectionStart) {
-            textarea.setSelectionRange(props.selectionStart, props.selectionEnd);
-        }
-        // Apply placeholder style (replace on every update so dynamic changes work)
-        const placeholderStyle = props.placeholderStyle;
-        const styleEl = this.shadow.querySelector("style");
-        const marker = "/* placeholder-style */";
-        const markerIdx = styleEl.textContent.indexOf(marker);
-        if (placeholderStyle) {
-            const rule = `\n${marker}\ntextarea::placeholder { ${placeholderStyle} }`;
-            if (markerIdx >= 0) {
-                styleEl.textContent = styleEl.textContent.substring(0, markerIdx) + rule;
-            }
-            else {
-                styleEl.textContent += rule;
-            }
-        }
-        else if (markerIdx >= 0) {
-            styleEl.textContent = styleEl.textContent.substring(0, markerIdx);
-        }
-        if (autoHeight) {
-            this.autoResizeTextarea(textarea);
-        }
-        if (props.focus && document.activeElement !== textarea) {
-            textarea.focus();
-        }
-    }
-    mountTextarea() {
-        if (!this.componentId)
-            return;
-        this.ensureHostLayout();
-        const props = this.collectProps();
-        const dataset = this.collectDataset();
-        props.dataset = dataset;
-        props.datasetJson = JSON.stringify(dataset);
-        const pageFuncBindings = this._pageBindings;
-        props.pageFuncBindings = pageFuncBindings;
-        props.pageFuncBindingsJson = JSON.stringify(pageFuncBindings);
-        const { rect, cornerRadius } = measureElement(this);
-        props.__layoutX = rect.x;
-        props.__layoutY = rect.y;
-        props.__layoutWidth = rect.width;
-        props.__layoutHeight = rect.height;
-        if (this.getBoolAttr("auto-height") && this.autoHeightMinHeight === undefined && rect.height > 1) {
-            this.autoHeightMinHeight = rect.height;
-        }
-        if (isHarmony()) {
-            this.ensureHarmonyEmbed(rect, props, cornerRadius);
-            this.mounted = true;
-            return;
-        }
-        if (!this.getBoolAttr("auto-height")) {
-            this.autoHeightMinHeight = undefined;
-        }
-        if (isDesktop() && !isMacOS()) {
-            this.mountDesktopTextarea();
-            this.mounted = true;
-            return;
-        }
-        const zIndex = 9999;
-        const decision = this.updateState.decide(rect, props, zIndex, !this.mounted);
-        if (!decision.shouldSend) {
-            this.mounted = true;
-            return;
-        }
-        const payload = {
-            action: this.mounted ? "component.update" : "component.mount",
-            id: this.componentId,
-            type: "textarea.native",
-            rect,
-            zIndex
-        };
-        if (!this.mounted || decision.propsChanged) {
-            payload.props = props;
-        }
-        if (cornerRadius !== undefined) {
-            payload.cornerRadius = cornerRadius;
-        }
-        sendNativeComponentMessage(payload);
-        this.mounted = true;
-    }
-    // Force a full native sync when host frameworks mutate properties without
-    // triggering observed attribute callbacks on custom elements.
-    syncNativeProps() {
-        if (!this.isConnected)
-            return;
-        this.mountTextarea();
-    }
-    ensureHostLayout() {
-        const computed = getComputedStyle(this);
-        if (computed.display === "inline") {
-            this.style.display = "block";
-        }
-        const height = Number.parseFloat(computed.height);
-        if (!Number.isFinite(height) || height <= 1) {
-            this.style.height = this.getBoolAttr("auto-height") ? "24px" : "96px";
-        }
-    }
-    // Event handler getter/setter for 'input' event
-    set oninput(cb) {
-        const raw = cb;
-        const current = this._handlers['input'];
-        if (current)
-            this.removeEventListener('input', current);
-        if (typeof raw === "function" ||
-            (!!raw && typeof raw === "object" && typeof raw.handleEvent === "function")) {
-            const listener = typeof raw === "function"
-                ? { handleEvent: raw }
-                : raw;
-            this._handlers['input'] = listener;
-            this.rawHandlers['input'] = raw;
-            this.addEventListener('input', listener);
-        }
-        else {
-            delete this._handlers['input'];
-            delete this.rawHandlers['input'];
-        }
-    }
-    get oninput() { return this.rawHandlers['input'] || null; }
-    // Event handler getter/setter for 'change' event
-    set onchange(cb) {
-        const raw = cb;
-        const current = this._handlers['change'];
-        if (current)
-            this.removeEventListener('change', current);
-        if (typeof raw === "function" ||
-            (!!raw && typeof raw === "object" && typeof raw.handleEvent === "function")) {
-            const listener = typeof raw === "function"
-                ? { handleEvent: raw }
-                : raw;
-            this._handlers['change'] = listener;
-            this.rawHandlers['change'] = raw;
-            this.addEventListener('change', listener);
-        }
-        else {
-            delete this._handlers['change'];
-            delete this.rawHandlers['change'];
-        }
-    }
-    get onchange() { return this.rawHandlers['change'] || null; }
-    ensureHarmonyEmbed(rect, props, cornerRadius) {
-        if (!this.harmonyEmbed) {
-            const embed = document.createElement("embed");
-            embed.setAttribute("type", "native/textarea");
-            embed.setAttribute("width", `${rect.width}`);
-            embed.setAttribute("height", `${rect.height}`);
-            embed.setAttribute("id", this.componentId);
-            embed.setAttribute("data-lx-component-id", this.componentId);
-            embed.style.display = "block";
-            embed.style.width = "100%";
-            embed.style.height = "100%";
-            embed.style.border = "none";
-            if (cornerRadius !== undefined) {
-                embed.style.borderRadius = `${cornerRadius}px`;
-                embed.style.overflow = "hidden";
-            }
-            const encodedProps = this.encodeHarmonyProps(props);
-            embed.setAttribute("src", encodedProps);
-            this.lastHarmonyProps = encodedProps;
-            this.appendChild(embed);
-            this.harmonyEmbed = embed;
-            this.pendingHarmonyRetryCount = 0;
-            return;
-        }
-        const encodedProps = this.encodeHarmonyProps(props);
-        if (encodedProps !== this.lastHarmonyProps) {
-            const pushed = this.pushHarmonyPropsUpdate(props);
-            if (pushed) {
-                this.lastHarmonyProps = encodedProps;
-                this.pendingHarmonyProps = undefined;
-                this.pendingHarmonyRetryCount = 0;
-            }
-            else {
-                // Fallback to src update path when proxy bridge is unavailable.
-                this.harmonyEmbed.setAttribute("src", encodedProps);
-                this.lastHarmonyProps = encodedProps;
-                this.scheduleHarmonyPropsRetry(props);
-            }
-        }
-        if (cornerRadius !== undefined && this.harmonyEmbed.style.borderRadius !== `${cornerRadius}px`) {
-            this.harmonyEmbed.style.borderRadius = `${cornerRadius}px`;
-            this.harmonyEmbed.style.overflow = "hidden";
-        }
-    }
-    encodeHarmonyProps(props) {
-        try {
-            const payload = { componentId: this.componentId, ...props };
-            return `${HARMONY_PROPS_PREFIX}${encodeURIComponent(JSON.stringify(payload))}`;
-        }
-        catch (_e) {
-            return `${HARMONY_PROPS_PREFIX}%7B%7D`;
-        }
-    }
-    pushHarmonyPropsUpdate(props) {
-        if (!this.componentId || !isHarmony())
-            return false;
-        try {
-            const proxy = window.LingXiaProxy;
-            const updateFn = proxy === null || proxy === void 0 ? void 0 : proxy.nativeComponentUpdate;
-            if (typeof updateFn !== "function") {
-                return false;
-            }
-            const payload = JSON.stringify({ componentId: this.componentId, ...props });
-            try {
-                updateFn.call(proxy, payload);
-                return true;
-            }
-            catch {
-                try {
-                    updateFn.call(proxy, this.componentId, payload);
-                    return true;
-                }
-                catch {
-                    return false;
-                }
-            }
-        }
-        catch {
-            return false;
-        }
-    }
-    scheduleHarmonyPropsRetry(props) {
-        this.pendingHarmonyProps = { ...props };
-        if (this.pendingHarmonyRetryTimer !== null) {
-            return;
-        }
-        this.pendingHarmonyRetryTimer = window.setTimeout(() => {
-            this.pendingHarmonyRetryTimer = null;
-            if (!this.isConnected || !this.pendingHarmonyProps) {
-                return;
-            }
-            const pendingProps = this.pendingHarmonyProps;
-            const pushed = this.pushHarmonyPropsUpdate(pendingProps);
-            if (pushed) {
-                this.lastHarmonyProps = this.encodeHarmonyProps(pendingProps);
-                this.pendingHarmonyProps = undefined;
-                this.pendingHarmonyRetryCount = 0;
-            }
-            else {
-                this.pendingHarmonyRetryCount += 1;
-                if (this.pendingHarmonyRetryCount < 20) {
-                    this.scheduleHarmonyPropsRetry(pendingProps);
-                }
-            }
-        }, 100);
-    }
-}
-// Register the custom element
-export function registerTextareaComponent() {
-    if (typeof window !== "undefined" && !customElements.get("lx-textarea")) {
-        customElements.define("lx-textarea", LxTextareaElement);
-    }
-}