@lingxia/elements 0.9.0 → 0.10.0

package/dist/index.d.ts

@@ -1,10 +1,7 @@
 export { registerVideoComponent, LxVideoElement, type LxVideoAttributes, } from "./video.js";
 export { registerMediaSwiperComponent, LxMediaSwiperElement, type LxMediaSwiperAttributes, type LxMediaSwiperItem, type LxMediaSwiperChangeEvent, type LxMediaSwiperChangeEventDetail, type LxMediaSwiperTransitionEndEvent, type LxMediaSwiperTransitionEndEventDetail, type LxMediaSwiperItemEvent, type LxMediaSwiperEventDetail, type LxMediaSwiperEndReachedEvent, type LxMediaSwiperEndReachedEventDetail, type LxMediaSwiperErrorEvent, type LxMediaSwiperErrorEventDetail, type LxMediaSwiperChangeSource, type LxMediaSwiperErrorCode, } from "./media_swiper.js";
 export { registerPickerComponent, LxPickerElement, type LxPickerAttributes, type LxPickerColumn, type LxPickerCascadingColumns, type LxPickerEvent, type LxPickerEventDetail, } from "./picker.js";
-export { registerInputComponent, LxInputElement, type LxInputAttributes, type LxInputEvent, type LxInputEventDetail, } from "./input.js";
-export { registerTextareaComponent, LxTextareaElement, type LxTextareaAttributes, type LxTextareaEvent, type LxTextareaEventDetail, } from "./textarea.js";
 export { LxNavigatorElement, type LxNavigatorAttributes, type LxNavigatorEvent, type NavigatorEnvVersion, type NavigatorOpenType, type NavigatorQuery, type NavigatorQueryValue, type NavigatorTarget, } from "./navigator.js";
 export { buildVideoNativeAttrs, buildMediaSwiperNativeAttrs, buildNavigatorNativeAttrs, buildPickerNativeAttrs, getPickerDisplayText, getPickerValueFromIndex, VIDEO_DOM_EVENT_MAP, MEDIA_SWIPER_DOM_EVENT_MAP, } from "./native_component_wrapper_shared.js";
-export { buildInputNativeAttrs, buildTextareaNativeAttrs, } from "./text_component_native_attrs.js";
 export { isHarmony, isIOS, isAndroid, isMacOS, isDesktop, getOS, } from "./platform.js";
 export { ensureComponentId, rectEquals, NativeComponentUpdateState, type Rect, } from "./component.js";

package/dist/index.js

@@ -1,10 +1,7 @@
 export { registerVideoComponent, LxVideoElement, } from "./video.js";
 export { registerMediaSwiperComponent, LxMediaSwiperElement, } from "./media_swiper.js";
 export { registerPickerComponent, LxPickerElement, } from "./picker.js";
-export { registerInputComponent, LxInputElement, } from "./input.js";
-export { registerTextareaComponent, LxTextareaElement, } from "./textarea.js";
 export { LxNavigatorElement, } from "./navigator.js";
 export { buildVideoNativeAttrs, buildMediaSwiperNativeAttrs, buildNavigatorNativeAttrs, buildPickerNativeAttrs, getPickerDisplayText, getPickerValueFromIndex, VIDEO_DOM_EVENT_MAP, MEDIA_SWIPER_DOM_EVENT_MAP, } from "./native_component_wrapper_shared.js";
-export { buildInputNativeAttrs, buildTextareaNativeAttrs, } from "./text_component_native_attrs.js";
 export { isHarmony, isIOS, isAndroid, isMacOS, isDesktop, getOS, } from "./platform.js";
 export { ensureComponentId, rectEquals, NativeComponentUpdateState, } from "./component.js";

package/dist/platform.d.ts

@@ -2,5 +2,6 @@ export declare function isHarmony(): boolean;
 export declare function isIOS(): boolean;
 export declare function isAndroid(): boolean;
 export declare function isMacOS(): boolean;
+export declare function isWindows(): boolean;
 export declare function isDesktop(): boolean;
 export declare function getOS(): string;

package/dist/platform.js

@@ -14,6 +14,10 @@ export function isMacOS() {
     var _a, _b, _c;
     return ((_c = (_b = (_a = window.LingXiaBridge) === null || _a === void 0 ? void 0 : _a.platform) === null || _b === void 0 ? void 0 : _b.isMacOS) === null || _c === void 0 ? void 0 : _c.call(_b)) === true;
 }
+export function isWindows() {
+    var _a, _b, _c;
+    return ((_c = (_b = (_a = window.LingXiaBridge) === null || _a === void 0 ? void 0 : _a.platform) === null || _b === void 0 ? void 0 : _b.isWindows) === null || _c === void 0 ? void 0 : _c.call(_b)) === true;
+}
 export function isDesktop() {
     var _a, _b, _c;
     return ((_c = (_b = (_a = window.LingXiaBridge) === null || _a === void 0 ? void 0 : _a.platform) === null || _b === void 0 ? void 0 : _b.isDesktop) === null || _c === void 0 ? void 0 : _c.call(_b)) === true;

package/dist/video.d.ts

@@ -50,6 +50,7 @@ export declare class LxVideoElement extends HTMLElement {
     private updateState;
     private unregister?;
     private resizeObserver?;
+    private winSettleFrame;
     private pendingLayoutFrame;
     private boundUpdatePosition;
     private _handlers;
@@ -110,6 +111,7 @@ export declare class LxVideoElement extends HTMLElement {
     set onratechange(cb: EventListener);
     get onratechange(): EventListener;
     private ensurePlaceholderStyle;
+    private syncPosterPlaceholder;
     private collectProps;
     private shouldRefreshForAttribute;
     private startAttrObserver;
@@ -125,6 +127,7 @@ export declare class LxVideoElement extends HTMLElement {
     private startSizeObserver;
     private stopSizeObserver;
     private scheduleMountRetry;
+    private scheduleWindowsMountSettle;
     private scheduleIOSBootstrapFrames;
     private mountOrUpdateHarmony;
     private ensureHarmonyEmbed;

package/dist/video.js

@@ -1,7 +1,7 @@
 import { sendNativeComponentMessage, registerNativeComponentHandler, addNativeComponentLayoutInvalidationListener } from "./nativecomponent.js";
 import { measureElement } from "./dom.js";
 import { ensureComponentId, NativeComponentUpdateState, iOSNativeComponentHelper } from "./component.js";
-import { isAndroid, isHarmony, isIOS } from "./platform.js";
+import { isAndroid, isHarmony, isIOS, isWindows } from "./platform.js";
 const HARMONY_PROPS_PREFIX = "data:application/json,";
 // Component implementation
 export class LxVideoElement extends HTMLElement {
@@ -10,6 +10,7 @@ export class LxVideoElement extends HTMLElement {
         this.componentId = null;
         this.mounted = false;
         this.updateState = new NativeComponentUpdateState();
+        this.winSettleFrame = null;
         this.pendingLayoutFrame = null;
         this.boundUpdatePosition = this.updatePosition.bind(this);
         this._handlers = {};
@@ -198,6 +199,17 @@ export class LxVideoElement extends HTMLElement {
         else {
             this.mountOrUpdate();
             this.startTracking();
+            // Windows only: the WebView2 surface is created at an intermediate size
+            // and resized to its final content bounds shortly after this element
+            // mounts, which reflows the page and moves the element. Unlike the other
+            // platforms' webviews, WebView2 doesn't reliably fire the resize /
+            // ResizeObserver that would make us re-report, and an early update can be
+            // lost in the bridge transport during page load — so the native overlay
+            // can stay pinned at the mount-time rect. Re-measure + re-report across the
+            // settle window to land the final position. No-op on every other platform.
+            if (isWindows()) {
+                this.scheduleWindowsMountSettle();
+            }
         }
     }
     disconnectedCallback() {
@@ -241,6 +253,9 @@ export class LxVideoElement extends HTMLElement {
         }
         if (!this.isConnected)
             return;
+        if (name === "poster" || name === "object-fit" || name === "objectfit") {
+            this.syncPosterPlaceholder();
+        }
         // Keep content-rotate/object-fit updates immediate across all native platforms.
         const forcePropsUpdate = name === "content-rotate" || name === "object-fit" || name === "objectfit";
         if (isHarmony() && forcePropsUpdate) {
@@ -314,6 +329,24 @@ export class LxVideoElement extends HTMLElement {
             this.style.backgroundColor = "black";
         if (!this.style.aspectRatio)
             this.style.aspectRatio = "16 / 9";
+        this.syncPosterPlaceholder();
+    }
+    /// The poster doubles as the element's CSS background: on platforms
+    /// where the native layer hides while no media is presented (Windows:
+    /// initial state, after stop, on error), the placeholder shows it.
+    syncPosterPlaceholder() {
+        var _a;
+        const poster = this.getAttribute("poster");
+        if (!poster) {
+            this.style.backgroundImage = "";
+            return;
+        }
+        const objectFit = this.parseObjectFitValue((_a = this.getAttribute("object-fit")) !== null && _a !== void 0 ? _a : this.getAttribute("objectfit"));
+        const size = objectFit === "cover" ? "cover" : objectFit === "fill" ? "100% 100%" : "contain";
+        this.style.backgroundImage = `url("${poster.replace(/"/g, '\\"')}")`;
+        this.style.backgroundSize = size;
+        this.style.backgroundPosition = "center";
+        this.style.backgroundRepeat = "no-repeat";
     }
     collectProps() {
         var _a;
@@ -520,6 +553,10 @@ export class LxVideoElement extends HTMLElement {
         (_a = this.removeLayoutInvalidationListener) === null || _a === void 0 ? void 0 : _a.call(this);
         this.removeLayoutInvalidationListener = undefined;
         this.stopSizeObserver();
+        if (this.winSettleFrame !== null) {
+            cancelAnimationFrame(this.winSettleFrame);
+            this.winSettleFrame = null;
+        }
         if (this.pendingLayoutFrame !== null) {
             cancelAnimationFrame(this.pendingLayoutFrame);
             this.pendingLayoutFrame = null;
@@ -575,6 +612,45 @@ export class LxVideoElement extends HTMLElement {
             this.mountOrUpdate();
         });
     }
+    scheduleWindowsMountSettle() {
+        if (typeof requestAnimationFrame === "undefined")
+            return;
+        if (this.winSettleFrame !== null)
+            return;
+        // Re-measure across the page-load / WebView2-resize settle window. The
+        // reflow that moves this element can land well after mount, so keep checking
+        // until the rect has been stable for a while; decide() dedups, so updates
+        // only fire when the rect changes.
+        let lastKey = "";
+        let stable = 0;
+        let elapsed = 0;
+        const tick = () => {
+            this.winSettleFrame = null;
+            if (!this.isConnected)
+                return;
+            // Force the re-send (don't dedup): an early update can be lost in the
+            // bridge transport during page load, and once the element has settled a
+            // dedup'd re-measure sees "no change" and never re-delivers it. Forcing
+            // each frame re-delivers the current rect until it lands.
+            this.mountOrUpdate(true);
+            const r = this.getBoundingClientRect();
+            const key = `${Math.round(r.top)}:${Math.round(r.width)}`;
+            if (key === lastKey) {
+                stable += 1;
+            }
+            else {
+                stable = 0;
+                lastKey = key;
+            }
+            elapsed += 1;
+            // Keep re-sending until the layout has held steady for a while (so a late
+            // settle is still caught), capped so it never runs unbounded.
+            if (stable < 12 && elapsed < 180) {
+                this.winSettleFrame = requestAnimationFrame(tick);
+            }
+        };
+        this.winSettleFrame = requestAnimationFrame(tick);
+    }
     scheduleIOSBootstrapFrames() {
         if (!isIOS())
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxia/elements",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "private": false,
   "description": "LingXia custom elements — native-backed web components for LxApp pages",
   "type": "module",

package/src/index.ts

@@ -33,21 +33,6 @@ export {
   type LxPickerEventDetail,
 } from "./picker.js";
 
-export {
-  registerInputComponent,
-  LxInputElement,
-  type LxInputAttributes,
-  type LxInputEvent,
-  type LxInputEventDetail,
-} from "./input.js";
-
-export {
-  registerTextareaComponent,
-  LxTextareaElement,
-  type LxTextareaAttributes,
-  type LxTextareaEvent,
-  type LxTextareaEventDetail,
-} from "./textarea.js";
 
 export {
   LxNavigatorElement,
@@ -71,11 +56,6 @@ export {
   MEDIA_SWIPER_DOM_EVENT_MAP,
 } from "./native_component_wrapper_shared.js";
 
-export {
-  buildInputNativeAttrs,
-  buildTextareaNativeAttrs,
-} from "./text_component_native_attrs.js";
-
 export {
   isHarmony,
   isIOS,

package/src/platform.ts

@@ -16,6 +16,10 @@ export function isMacOS(): boolean {
   return window.LingXiaBridge?.platform?.isMacOS?.() === true;
 }
 
+export function isWindows(): boolean {
+  return window.LingXiaBridge?.platform?.isWindows?.() === true;
+}
+
 export function isDesktop(): boolean {
   return window.LingXiaBridge?.platform?.isDesktop?.() === true;
 }

package/src/video.ts

@@ -5,7 +5,7 @@ import {
 } from "./nativecomponent.js";
 import { measureElement } from "./dom.js";
 import { ensureComponentId, NativeComponentUpdateState, iOSNativeComponentHelper } from "./component.js";
-import { isAndroid, isHarmony, isIOS } from "./platform.js";
+import { isAndroid, isHarmony, isIOS, isWindows } from "./platform.js";
 
 const HARMONY_PROPS_PREFIX = "data:application/json,";
 
@@ -85,6 +85,7 @@ export class LxVideoElement extends HTMLElement {
   private updateState = new NativeComponentUpdateState();
   private unregister?: () => void;
   private resizeObserver?: ResizeObserver;
+  private winSettleFrame: number | null = null;
   private pendingLayoutFrame: number | null = null;
   private boundUpdatePosition = this.updatePosition.bind(this);
   private _handlers: Record<string, EventListenerOrEventListenerObject> = {};
@@ -268,6 +269,17 @@ export class LxVideoElement extends HTMLElement {
     } else {
       this.mountOrUpdate();
       this.startTracking();
+      // Windows only: the WebView2 surface is created at an intermediate size
+      // and resized to its final content bounds shortly after this element
+      // mounts, which reflows the page and moves the element. Unlike the other
+      // platforms' webviews, WebView2 doesn't reliably fire the resize /
+      // ResizeObserver that would make us re-report, and an early update can be
+      // lost in the bridge transport during page load — so the native overlay
+      // can stay pinned at the mount-time rect. Re-measure + re-report across the
+      // settle window to land the final position. No-op on every other platform.
+      if (isWindows()) {
+        this.scheduleWindowsMountSettle();
+      }
     }
   }
 
@@ -314,6 +326,9 @@ export class LxVideoElement extends HTMLElement {
       }
     }
     if (!this.isConnected) return;
+    if (name === "poster" || name === "object-fit" || name === "objectfit") {
+      this.syncPosterPlaceholder();
+    }
     // Keep content-rotate/object-fit updates immediate across all native platforms.
     const forcePropsUpdate = name === "content-rotate" || name === "object-fit" || name === "objectfit";
     if (isHarmony() && forcePropsUpdate) {
@@ -399,6 +414,27 @@ export class LxVideoElement extends HTMLElement {
     if (!this.style.position) this.style.position = "relative"; // Needed for iOS scroll container
     if (!this.style.backgroundColor) this.style.backgroundColor = "black";
     if (!this.style.aspectRatio) this.style.aspectRatio = "16 / 9";
+    this.syncPosterPlaceholder();
+  }
+
+  /// The poster doubles as the element's CSS background: on platforms
+  /// where the native layer hides while no media is presented (Windows:
+  /// initial state, after stop, on error), the placeholder shows it.
+  private syncPosterPlaceholder() {
+    const poster = this.getAttribute("poster");
+    if (!poster) {
+      this.style.backgroundImage = "";
+      return;
+    }
+    const objectFit = this.parseObjectFitValue(
+      this.getAttribute("object-fit") ?? this.getAttribute("objectfit")
+    );
+    const size =
+      objectFit === "cover" ? "cover" : objectFit === "fill" ? "100% 100%" : "contain";
+    this.style.backgroundImage = `url("${poster.replace(/"/g, '\\"')}")`;
+    this.style.backgroundSize = size;
+    this.style.backgroundPosition = "center";
+    this.style.backgroundRepeat = "no-repeat";
   }
 
   private collectProps() {
@@ -621,6 +657,10 @@ export class LxVideoElement extends HTMLElement {
     this.removeLayoutInvalidationListener?.();
     this.removeLayoutInvalidationListener = undefined;
     this.stopSizeObserver();
+    if (this.winSettleFrame !== null) {
+      cancelAnimationFrame(this.winSettleFrame);
+      this.winSettleFrame = null;
+    }
     if (this.pendingLayoutFrame !== null) {
       cancelAnimationFrame(this.pendingLayoutFrame);
       this.pendingLayoutFrame = null;
@@ -675,6 +715,42 @@ export class LxVideoElement extends HTMLElement {
     });
   }
 
+  private scheduleWindowsMountSettle(): void {
+    if (typeof requestAnimationFrame === "undefined") return;
+    if (this.winSettleFrame !== null) return;
+    // Re-measure across the page-load / WebView2-resize settle window. The
+    // reflow that moves this element can land well after mount, so keep checking
+    // until the rect has been stable for a while; decide() dedups, so updates
+    // only fire when the rect changes.
+    let lastKey = "";
+    let stable = 0;
+    let elapsed = 0;
+    const tick = () => {
+      this.winSettleFrame = null;
+      if (!this.isConnected) return;
+      // Force the re-send (don't dedup): an early update can be lost in the
+      // bridge transport during page load, and once the element has settled a
+      // dedup'd re-measure sees "no change" and never re-delivers it. Forcing
+      // each frame re-delivers the current rect until it lands.
+      this.mountOrUpdate(true);
+      const r = this.getBoundingClientRect();
+      const key = `${Math.round(r.top)}:${Math.round(r.width)}`;
+      if (key === lastKey) {
+        stable += 1;
+      } else {
+        stable = 0;
+        lastKey = key;
+      }
+      elapsed += 1;
+      // Keep re-sending until the layout has held steady for a while (so a late
+      // settle is still caught), capped so it never runs unbounded.
+      if (stable < 12 && elapsed < 180) {
+        this.winSettleFrame = requestAnimationFrame(tick);
+      }
+    };
+    this.winSettleFrame = requestAnimationFrame(tick);
+  }
+
   private scheduleIOSBootstrapFrames(): void {
     if (!isIOS()) return;
     // Keep a short frame-based bootstrap window so late-created WKChildScrollView

package/dist/input.d.ts

@@ -1,117 +0,0 @@
-export interface LxInputEventDetail {
-    value?: string;
-    cursor?: number;
-    keyCode?: number;
-    height?: number;
-    duration?: number;
-    encryptedValue?: string;
-    encryptError?: string;
-    pass?: boolean;
-    timeout?: boolean;
-}
-export interface LxInputEvent extends CustomEvent<LxInputEventDetail> {
-    detail: LxInputEventDetail;
-}
-export type LxInputAttributes = {
-    id?: string;
-    value?: string;
-    type?: 'text' | 'number' | 'password' | 'digit';
-    password?: boolean | string;
-    placeholder?: string;
-    'placeholder-style'?: string;
-    'placeholder-class'?: string;
-    maxlength?: number | string;
-    'cursor-spacing'?: number | string;
-    'auto-focus'?: boolean | string;
-    disabled?: boolean | string;
-    focus?: boolean | string;
-    'confirm-type'?: 'send' | 'search' | 'next' | 'go' | 'done';
-    'always-embed'?: boolean | string;
-    'confirm-hold'?: boolean | string;
-    cursor?: number | string;
-    'cursor-color'?: string;
-    'selection-start'?: number | string;
-    'selection-end'?: number | string;
-    'adjust-position'?: boolean | string;
-    'hold-keyboard'?: boolean | string;
-    className?: string;
-    style?: any;
-    ref?: any;
-    onInput?: (e: LxInputEvent) => void;
-    onChange?: (e: LxInputEvent) => void;
-    onFocus?: (e: LxInputEvent) => void;
-    onBlur?: (e: LxInputEvent) => void;
-    onConfirm?: (e: LxInputEvent) => void;
-    onKeyboardheightchange?: (e: LxInputEvent) => void;
-    onNicknamereview?: (e: LxInputEvent) => void;
-    pageBindings?: Record<string, string>;
-};
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            "lx-input": LxInputAttributes;
-        }
-    }
-}
-export declare class LxInputElement extends HTMLElement {
-    static get observedAttributes(): string[];
-    private componentId;
-    private mounted;
-    private unregister?;
-    private _handlers;
-    private rawHandlers;
-    private harmonyEmbed?;
-    private lastHarmonyProps?;
-    private pendingHarmonyProps?;
-    private pendingHarmonyRetryTimer;
-    private pendingHarmonyRetryCount;
-    private attrObserver?;
-    private shadow?;
-    private innerInput?;
-    private readonly updateState;
-    private resizeObserver?;
-    private pendingLayoutFrame;
-    private focusLayoutSyncTimer;
-    private readonly layoutEventListener;
-    private _pageBindings;
-    set pageBindings(bindings: Record<string, string>);
-    get pageBindings(): Record<string, string>;
-    private upgradeProperty;
-    private registerNativeHandler;
-    private unmountNativeComponentById;
-    private teardownHarmonyEmbed;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    attributeChangedCallback(name: string): void;
-    private getAttr;
-    private getBoolAttr;
-    private getNumAttr;
-    private getPropOrAttr;
-    private shouldTrackNativeLayout;
-    private startTracking;
-    private stopTracking;
-    private startSizeObserver;
-    private stopSizeObserver;
-    private schedulePositionSync;
-    private collectProps;
-    private getHostTextColor;
-    private resyncHarmonyLayoutAfterFocus;
-    private startFocusLayoutSync;
-    private stopFocusLayoutSync;
-    private shouldRefreshForAttribute;
-    private startAttrObserver;
-    private stopAttrObserver;
-    private collectDataset;
-    private getInputType;
-    private mountDesktopInput;
-    private mountInput;
-    syncNativeProps(): void;
-    private ensureHostLayout;
-    set oninput(cb: EventListener | null);
-    get oninput(): EventListener | null;
-    private ensureHarmonyEmbed;
-    private encodeHarmonyProps;
-    private pushHarmonyPropsUpdate;
-    private scheduleHarmonyPropsRetry;
-}
-export declare function registerInputComponent(): void;