@lingxia/elements 0.5.0

package/src/textarea.ts

@@ -0,0 +1,959 @@
+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,";
+
+// Type definitions
+export interface LxTextareaEventDetail {
+  value?: string;
+  cursor?: number;
+  lineCount?: number;
+  height?: number;
+  duration?: number;
+  selectionStart?: number;
+  selectionEnd?: number;
+  heightRpx?: number;
+}
+
+export interface LxTextareaEvent extends CustomEvent<LxTextareaEventDetail> {
+  detail: LxTextareaEventDetail;
+}
+
+export type LxTextareaAttributes = {
+  id?: string;
+  value?: string;
+  placeholder?: string;
+  'placeholder-style'?: string;
+  'placeholder-class'?: string;
+  maxlength?: number | string;
+  disabled?: boolean | string;
+  'auto-focus'?: boolean | string;
+  focus?: boolean | string;
+  'auto-height'?: boolean | string;
+  'cursor-spacing'?: number | string;
+  'show-confirm-bar'?: boolean | string;
+  'adjust-position'?: boolean | string;
+  'hold-keyboard'?: boolean | string;
+  'disable-default-padding'?: boolean | string;
+  'confirm-type'?: 'send' | 'search' | 'next' | 'go' | 'done' | 'return';
+  'confirm-hold'?: boolean | string;
+  fixed?: boolean | string;
+  'adjust-keyboard-to'?: 'cursor' | 'bottom';
+  cursor?: number | string;
+  'selection-start'?: number | string;
+  'selection-end'?: number | string;
+  className?: string;
+  style?: any;
+  ref?: any;
+  onInput?: (e: LxTextareaEvent) => void;
+  onChange?: (e: LxTextareaEvent) => void;
+  onFocus?: (e: LxTextareaEvent) => void;
+  onBlur?: (e: LxTextareaEvent) => void;
+  onConfirm?: (e: LxTextareaEvent) => void;
+  onLinechange?: (e: LxTextareaEvent) => void;
+  onKeyboardheightchange?: (e: LxTextareaEvent) => void;
+  pageBindings?: Record<string, string>;
+};
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "lx-textarea": LxTextareaAttributes;
+    }
+  }
+}
+
+// Component implementation
+export class LxTextareaElement extends HTMLElement {
+  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"
+    ];
+  }
+
+  private componentId: string | null = null;
+  private mounted = false;
+  private unregister?: () => void;
+  private _handlers: Record<string, EventListenerOrEventListenerObject> = {};
+  private rawHandlers: Record<string, EventListenerOrEventListenerObject> = {};
+  private harmonyEmbed?: HTMLEmbedElement;
+  private lastHarmonyProps?: string;
+  private pendingHarmonyProps?: Record<string, unknown>;
+  private pendingHarmonyRetryTimer: number | null = null;
+  private pendingHarmonyRetryCount = 0;
+  private attrObserver?: MutationObserver;
+  private shadow?: ShadowRoot;
+  private innerTextarea?: HTMLTextAreaElement;
+  private lastNativeAutoHeight?: number;
+  private autoHeightMinHeight?: number;
+  private lastKeyboardHeight = 0;
+  private readonly updateState = new NativeComponentUpdateState();
+  private resizeObserver?: ResizeObserver;
+  private pendingLayoutFrame: number | null = null;
+  private focusLayoutSyncTimer: number | null = null;
+  private readonly layoutEventListener: EventListenerObject = {
+    handleEvent: () => this.schedulePositionSync()
+  };
+  private removeLayoutInvalidationListener?: () => void;
+  private _pageBindings: Record<string, string> = {};
+
+  set pageBindings(bindings: Record<string, string>) {
+    this._pageBindings = bindings ?? {};
+    if (this.isConnected) {
+      this.mountTextarea();
+    }
+  }
+
+  get pageBindings(): Record<string, string> {
+    return this._pageBindings;
+  }
+
+  private upgradeProperty(propName: string): void {
+    const self = this as unknown as Record<string, unknown>;
+    if (!Object.prototype.hasOwnProperty.call(self, propName)) return;
+    const value = self[propName];
+    delete self[propName];
+    self[propName] = value;
+  }
+
+  private registerNativeHandler(): void {
+    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) as LxTextareaEventDetail;
+      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 }));
+    });
+  }
+
+  private normalizeNativeDetail(detail: unknown): unknown {
+    if (!detail || typeof detail !== "object") {
+      return detail ?? {};
+    }
+    const raw = detail as Record<string, unknown>;
+    if (raw.data && typeof raw.data === "object") {
+      const data = raw.data as Record<string, unknown>;
+      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;
+  }
+
+  private unmountNativeComponentById(componentId: string): void {
+    const useDesktopFallback = isDesktop() && !isMacOS();
+    if (!componentId || isHarmony() || useDesktopFallback) return;
+    sendNativeComponentMessage({
+      action: "component.unmount",
+      id: componentId
+    });
+  }
+
+  private teardownHarmonyEmbed(): void {
+    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: string) {
+    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();
+  }
+
+  private getAttr(name: string, fallback = "") {
+    const raw = this.getPropOrAttr(name);
+    if (raw === undefined || raw === null) return fallback;
+    return String(raw);
+  }
+
+  private getBoolAttr(name: string): boolean {
+    return getSharedBoolAttr(this, name);
+  }
+
+  private getNumAttr(name: string): number | undefined {
+    return getSharedNumAttr(this, name);
+  }
+
+  private getPropOrAttr(name: string): unknown {
+    return getSharedPropOrAttr(this, name);
+  }
+
+  private shouldTrackNativeLayout(): boolean {
+    return isAndroid() || isIOS() || isHarmony();
+  }
+
+  private startTracking(): void {
+    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 });
+    }
+    window.visualViewport?.addEventListener("resize", this.layoutEventListener);
+    window.visualViewport?.addEventListener("scroll", this.layoutEventListener);
+    if (isAndroid()) {
+      this.removeLayoutInvalidationListener = addNativeComponentLayoutInvalidationListener(this.layoutEventListener);
+    }
+    this.startSizeObserver();
+    this.schedulePositionSync();
+  }
+
+  private stopTracking(): void {
+    window.removeEventListener("resize", this.layoutEventListener);
+    window.removeEventListener("scroll", this.layoutEventListener, true);
+    window.removeEventListener("scroll", this.layoutEventListener);
+    window.visualViewport?.removeEventListener("resize", this.layoutEventListener);
+    window.visualViewport?.removeEventListener("scroll", this.layoutEventListener);
+    this.removeLayoutInvalidationListener?.();
+    this.removeLayoutInvalidationListener = undefined;
+    this.stopSizeObserver();
+    if (this.pendingLayoutFrame !== null) {
+      cancelAnimationFrame(this.pendingLayoutFrame);
+      this.pendingLayoutFrame = null;
+    }
+  }
+
+  private startSizeObserver(): void {
+    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);
+  }
+
+  private stopSizeObserver(): void {
+    if (!this.resizeObserver) return;
+    this.resizeObserver.disconnect();
+    this.resizeObserver = undefined;
+  }
+
+  private schedulePositionSync(): void {
+    if (!this.shouldTrackNativeLayout() || !this.isConnected) return;
+    if (this.pendingLayoutFrame !== null) return;
+    this.pendingLayoutFrame = requestAnimationFrame(() => {
+      this.pendingLayoutFrame = null;
+      if (!this.isConnected) return;
+      this.mountTextarea();
+    });
+  }
+
+  private applyNativeAutoHeightIfNeeded(detail: LxTextareaEventDetail): void {
+    if (!this.getBoolAttr("auto-height")) {
+      this.autoHeightMinHeight = undefined;
+      return;
+    }
+    const height = this.parseHeight(detail.height ?? 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);
+  }
+
+  private parseHeight(value: unknown): number | undefined {
+    return parseNumberLike(value);
+  }
+
+  private collectProps() {
+    const autoFocus = this.getBoolAttr("auto-focus");
+    const value = this.getPropOrAttr("value");
+    const props: Record<string, any> = {
+      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;
+  }
+
+  private getHostTextColor(): string | undefined {
+    const color = getComputedStyle(this).color?.trim();
+    if (!color) return undefined;
+    if (color === "transparent" || color === "rgba(0, 0, 0, 0)") return undefined;
+    return color;
+  }
+
+  private shouldAdjustPosition(): boolean {
+    return this.getAttribute("adjust-position") !== "false";
+  }
+
+  private ensureVisibleForKeyboard(explicitKeyboardHeight = 0, forceCenter = false): void {
+    if (isHarmony() || isAndroid() || isIOS()) return;
+    if (!this.shouldAdjustPosition()) return;
+    ensureElementVisibleForKeyboard(this, explicitKeyboardHeight, forceCenter, [120]);
+  }
+
+  private resyncHarmonyLayoutAfterFocus(): void {
+    if (!isHarmony() || !this.isConnected) return;
+    this.mountTextarea();
+    setTimeout(() => {
+      if (!this.isConnected) return;
+      this.mountTextarea();
+    }, 32);
+    setTimeout(() => {
+      if (!this.isConnected) return;
+      this.mountTextarea();
+    }, 96);
+  }
+
+  private startFocusLayoutSync(): void {
+    if (!isHarmony()) return;
+    if (this.focusLayoutSyncTimer !== null) return;
+    this.focusLayoutSyncTimer = window.setInterval(() => {
+      if (!this.isConnected) {
+        this.stopFocusLayoutSync();
+        return;
+      }
+      this.mountTextarea();
+    }, 80);
+  }
+
+  private stopFocusLayoutSync(): void {
+    if (this.focusLayoutSyncTimer === null) return;
+    clearInterval(this.focusLayoutSyncTimer);
+    this.focusLayoutSyncTimer = null;
+  }
+
+  private shouldRefreshForAttribute(name: string): boolean {
+    return shouldRefreshSharedDataAttribute(name);
+  }
+
+  private startAttrObserver(): void {
+    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 });
+  }
+
+  private stopAttrObserver(): void {
+    if (!this.attrObserver) return;
+    this.attrObserver.disconnect();
+    this.attrObserver = undefined;
+  }
+
+  private collectDataset(): Record<string, string> {
+    return collectSharedDataset(this);
+  }
+
+
+  private autoResizeTextarea(textarea: HTMLTextAreaElement): void {
+    textarea.style.height = "auto";
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }
+
+  private getLineCount(textarea: HTMLTextAreaElement): number {
+    const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20;
+    return Math.round(textarea.scrollHeight / lineHeight);
+  }
+
+  private 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: LxTextareaEventDetail = { 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: LxTextareaEventDetail = { lineCount };
+          this.dispatchEvent(new CustomEvent("linechange", { detail: lineDetail, bubbles: true }));
+        }
+      });
+      textarea.addEventListener("change", (e) => {
+        e.stopPropagation();
+        const detail: LxTextareaEventDetail = { value: textarea.value };
+        this.dispatchEvent(new CustomEvent("change", { detail, bubbles: true }));
+      });
+      textarea.addEventListener("focus", (e) => {
+        e.stopPropagation();
+        const detail: LxTextareaEventDetail = { value: textarea.value };
+        this.dispatchEvent(new CustomEvent("focus", { detail, bubbles: true }));
+      });
+      textarea.addEventListener("blur", (e) => {
+        e.stopPropagation();
+        const detail: LxTextareaEventDetail = { 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: LxTextareaEventDetail = { 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();
+    }
+  }
+
+  private 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: any = {
+      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(): void {
+    if (!this.isConnected) return;
+    this.mountTextarea();
+  }
+
+  private ensureHostLayout(): void {
+    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: EventListener | null) {
+    const raw = cb as unknown;
+    const current = this._handlers['input'];
+    if (current) this.removeEventListener('input', current);
+
+    if (
+      typeof raw === "function" ||
+      (!!raw && typeof raw === "object" && typeof (raw as EventListenerObject).handleEvent === "function")
+    ) {
+      const listener =
+        typeof raw === "function"
+          ? ({ handleEvent: raw } as EventListenerObject)
+          : (raw as EventListenerOrEventListenerObject);
+      this._handlers['input'] = listener;
+      this.rawHandlers['input'] = raw as EventListenerOrEventListenerObject;
+      this.addEventListener('input', listener);
+    } else {
+      delete this._handlers['input'];
+      delete this.rawHandlers['input'];
+    }
+  }
+  get oninput() { return (this.rawHandlers['input'] as EventListener) || null; }
+
+  // Event handler getter/setter for 'change' event
+  set onchange(cb: EventListener | null) {
+    const raw = cb as unknown;
+    const current = this._handlers['change'];
+    if (current) this.removeEventListener('change', current);
+
+    if (
+      typeof raw === "function" ||
+      (!!raw && typeof raw === "object" && typeof (raw as EventListenerObject).handleEvent === "function")
+    ) {
+      const listener =
+        typeof raw === "function"
+          ? ({ handleEvent: raw } as EventListenerObject)
+          : (raw as EventListenerOrEventListenerObject);
+      this._handlers['change'] = listener;
+      this.rawHandlers['change'] = raw as EventListenerOrEventListenerObject;
+      this.addEventListener('change', listener);
+    } else {
+      delete this._handlers['change'];
+      delete this.rawHandlers['change'];
+    }
+  }
+  get onchange() { return (this.rawHandlers['change'] as EventListener) || null; }
+
+  private ensureHarmonyEmbed(
+    rect: { width: number; height: number },
+    props: Record<string, unknown>,
+    cornerRadius?: number
+  ) {
+    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";
+    }
+  }
+
+  private encodeHarmonyProps(props: Record<string, unknown>): string {
+    try {
+      const payload = { componentId: this.componentId, ...props };
+      return `${HARMONY_PROPS_PREFIX}${encodeURIComponent(JSON.stringify(payload))}`;
+    } catch (_e) {
+      return `${HARMONY_PROPS_PREFIX}%7B%7D`;
+    }
+  }
+
+  private pushHarmonyPropsUpdate(props: Record<string, unknown>): boolean {
+    if (!this.componentId || !isHarmony()) return false;
+    try {
+      const proxy = (window as unknown as Record<string, unknown>).LingXiaProxy as
+        | { nativeComponentUpdate?: ((componentId: string, payload: string) => void) | ((payload: string) => void) }
+        | undefined;
+      const updateFn = proxy?.nativeComponentUpdate;
+      if (typeof updateFn !== "function") {
+        return false;
+      }
+      const payload = JSON.stringify({ componentId: this.componentId, ...props });
+      try {
+        (updateFn as (payload: string) => void).call(proxy, payload);
+        return true;
+      } catch {
+        try {
+          (updateFn as (componentId: string, payload: string) => void).call(proxy, this.componentId, payload);
+          return true;
+        } catch {
+          return false;
+        }
+      }
+    } catch {
+      return false;
+    }
+  }
+
+  private scheduleHarmonyPropsRetry(props: Record<string, unknown>): void {
+    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);
+  }
+}