@lingxia/elements 0.5.0

package/dist/component.d.ts

@@ -0,0 +1,50 @@
+export type Rect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare function ensureComponentId(el: HTMLElement, prefix: string, currentId?: string | null): string;
+/**
+ * iOS Native Component Rendering Helper.
+ * Creates a scroll container that triggers WKChildScrollView creation.
+ * Reusable by all native components (video, map, camera, etc.)
+ */
+export declare class iOSNativeComponentHelper {
+    private scrollContainer;
+    private host;
+    private componentId;
+    constructor(host: HTMLElement, componentId: string);
+    /**
+     * Setup scroll container for iOS. No-op on other platforms.
+     */
+    setup(): void;
+    /**
+     * Cleanup scroll container.
+     */
+    cleanup(): void;
+    /**
+     * Get the rect to send to native for WKChildScrollView lookup.
+     * Returns null on non-iOS platforms.
+     */
+    getScrollContainerRect(): Rect | null;
+    /**
+     * Enhance payload with iOS-specific data.
+     * Call this before sending mount/update messages.
+     */
+    enhancePayload(payload: Record<string, unknown>): void;
+}
+export declare function rectEquals(a: Rect | null, b: Rect, epsilon?: number): boolean;
+export declare class NativeComponentUpdateState {
+    private lastPropsJson;
+    private lastRect;
+    private lastZIndex;
+    reset(): void;
+    decide(rect: Rect, props: Record<string, unknown> | null, zIndex: number, force?: boolean): {
+        shouldSend: boolean;
+        propsChanged: boolean;
+        rectChanged: boolean;
+        zChanged: boolean;
+    };
+    shouldSend(rect: Rect, props: Record<string, unknown> | null, zIndex: number, force?: boolean): boolean;
+}

package/dist/component.js

@@ -0,0 +1,139 @@
+import { isIOS } from "./platform.js";
+let autoId = 0;
+export function ensureComponentId(el, prefix, currentId) {
+    const attrId = el.getAttribute("id");
+    if (attrId && attrId.length > 0) {
+        return attrId;
+    }
+    if (currentId && currentId.length > 0) {
+        return currentId;
+    }
+    autoId += 1;
+    const id = `${prefix}-${Date.now().toString(36)}-${autoId.toString(36)}`;
+    el.setAttribute("id", id);
+    return id;
+}
+/**
+ * iOS Native Component Rendering Helper.
+ * Creates a scroll container that triggers WKChildScrollView creation.
+ * Reusable by all native components (video, map, camera, etc.)
+ */
+export class iOSNativeComponentHelper {
+    constructor(host, componentId) {
+        this.scrollContainer = null;
+        this.host = host;
+        this.componentId = componentId;
+    }
+    /**
+     * Setup scroll container for iOS. No-op on other platforms.
+     */
+    setup() {
+        if (!isIOS() || this.scrollContainer)
+            return;
+        const container = document.createElement("div");
+        container.id = `${this.componentId}-scroll-container`;
+        container.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      overflow: scroll;
+      -webkit-overflow-scrolling: touch;
+      pointer-events: none;
+    `;
+        // Add inner content larger than container to trigger WKChildScrollView creation
+        const inner = document.createElement("div");
+        inner.style.cssText = "width: 200%; height: 200%;";
+        container.appendChild(inner);
+        // Disable scrolling but keep overflow:scroll to trigger WKChildScrollView
+        const touchMoveListener = {
+            handleEvent: (event) => {
+                event.preventDefault();
+            },
+        };
+        const scrollLockListener = {
+            handleEvent: () => {
+                container.scrollTop = 0;
+                container.scrollLeft = 0;
+            },
+        };
+        container.addEventListener('touchmove', touchMoveListener, { passive: false });
+        container.addEventListener('scroll', scrollLockListener);
+        this.scrollContainer = container;
+        this.host.appendChild(container);
+    }
+    /**
+     * Cleanup scroll container.
+     */
+    cleanup() {
+        if (this.scrollContainer && this.host.contains(this.scrollContainer)) {
+            this.host.removeChild(this.scrollContainer);
+        }
+        this.scrollContainer = null;
+    }
+    /**
+     * Get the rect to send to native for WKChildScrollView lookup.
+     * Returns null on non-iOS platforms.
+     */
+    getScrollContainerRect() {
+        if (!this.scrollContainer)
+            return null;
+        const rect = this.scrollContainer.getBoundingClientRect();
+        return {
+            x: rect.left,
+            y: rect.top,
+            width: rect.width,
+            height: rect.height
+        };
+    }
+    /**
+     * Enhance payload with iOS-specific data.
+     * Call this before sending mount/update messages.
+     */
+    enhancePayload(payload) {
+        const rect = this.getScrollContainerRect();
+        if (rect) {
+            payload.scrollContainerRect = rect;
+        }
+    }
+}
+export function rectEquals(a, b, epsilon = 0) {
+    if (!a)
+        return false;
+    return (Math.abs(a.x - b.x) <= epsilon &&
+        Math.abs(a.y - b.y) <= epsilon &&
+        Math.abs(a.width - b.width) <= epsilon &&
+        Math.abs(a.height - b.height) <= epsilon);
+}
+export class NativeComponentUpdateState {
+    constructor() {
+        this.lastPropsJson = null;
+        this.lastRect = null;
+        this.lastZIndex = null;
+    }
+    reset() {
+        this.lastPropsJson = null;
+        this.lastRect = null;
+        this.lastZIndex = null;
+    }
+    decide(rect, props, zIndex, force = false) {
+        const propsJson = props === null ? this.lastPropsJson : JSON.stringify(props);
+        const rectChanged = !rectEquals(this.lastRect, rect);
+        const propsChanged = props === null ? false : propsJson !== this.lastPropsJson || force;
+        const zChanged = this.lastZIndex !== zIndex;
+        const shouldSend = force || rectChanged || propsChanged || zChanged;
+        if (!shouldSend) {
+            return { shouldSend: false, propsChanged: false, rectChanged: false, zChanged: false };
+        }
+        if (props !== null) {
+            this.lastPropsJson = propsJson;
+        }
+        this.lastRect = rect;
+        this.lastZIndex = zIndex;
+        return { shouldSend: true, propsChanged, rectChanged, zChanged };
+    }
+    shouldSend(rect, props, zIndex, force = false) {
+        return this.decide(rect, props, zIndex, force).shouldSend;
+    }
+}

package/dist/dom.d.ts

@@ -0,0 +1,10 @@
+export type MeasuredElement = {
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    cornerRadius?: number;
+};
+export declare function measureElement(el: HTMLElement): MeasuredElement;

package/dist/dom.js

@@ -0,0 +1,70 @@
+export function measureElement(el) {
+    const rect = el.getBoundingClientRect();
+    const parseRadius = (radiusStr) => {
+        const match = radiusStr && radiusStr.match(/^([0-9.]+)px/);
+        if (!match)
+            return undefined;
+        const parsed = parseFloat(match[1]);
+        return Number.isNaN(parsed) ? undefined : parsed;
+    };
+    const isOverflowClipping = (style) => style.overflow === "hidden" ||
+        style.overflow === "clip" ||
+        style.overflowX === "hidden" ||
+        style.overflowX === "clip" ||
+        style.overflowY === "hidden" ||
+        style.overflowY === "clip";
+    let cornerRadius = parseRadius(getComputedStyle(el).borderRadius);
+    if (cornerRadius === undefined) {
+        const rectMatches = (a, b, epsilon = 0.5) => Math.abs(a.left - b.left) <= epsilon &&
+            Math.abs(a.top - b.top) <= epsilon &&
+            Math.abs(a.width - b.width) <= epsilon &&
+            Math.abs(a.height - b.height) <= epsilon;
+        let parent = el.parentElement;
+        while (parent) {
+            const style = getComputedStyle(parent);
+            if (isOverflowClipping(style) && rectMatches(parent.getBoundingClientRect(), rect)) {
+                const parentRadius = parseRadius(style.borderRadius);
+                if (parentRadius !== undefined) {
+                    cornerRadius = parentRadius;
+                    break;
+                }
+            }
+            parent = parent.parentElement;
+        }
+    }
+    if (cornerRadius === undefined) {
+        // Common card layout: native video is clipped by an overflow-hidden rounded ancestor
+        // that doesn't have exactly the same rect (e.g. header + media block).
+        const near = (a, b, epsilon = 0.75) => Math.abs(a - b) <= epsilon;
+        let parent = el.parentElement;
+        while (parent) {
+            const style = getComputedStyle(parent);
+            const parentRadius = parseRadius(style.borderRadius);
+            if (isOverflowClipping(style) && parentRadius !== undefined) {
+                const p = parent.getBoundingClientRect();
+                const contains = rect.left >= p.left - 0.75 &&
+                    rect.right <= p.right + 0.75 &&
+                    rect.top >= p.top - 0.75 &&
+                    rect.bottom <= p.bottom + 0.75;
+                const alignedLeftRight = near(rect.left, p.left) && near(rect.right, p.right);
+                const touchesTopOrBottom = near(rect.top, p.top) || near(rect.bottom, p.bottom);
+                if (contains && alignedLeftRight && touchesTopOrBottom) {
+                    cornerRadius = parentRadius;
+                    break;
+                }
+            }
+            parent = parent.parentElement;
+        }
+    }
+    // Return document coordinates (CSS pixels)
+    // Native layer converts to physical pixels and handles scroll offset
+    return {
+        rect: {
+            x: rect.left + window.scrollX,
+            y: rect.top + window.scrollY,
+            width: rect.width,
+            height: rect.height
+        },
+        cornerRadius
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { registerVideoComponent, LxVideoElement, type LxVideoAttributes, } from "./video.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 NavigatorOpenType, type NavigatorTarget, } from "./navigator.js";
+export { buildVideoNativeAttrs, buildNavigatorNativeAttrs, buildPickerNativeAttrs, getPickerDisplayText, getPickerValueFromIndex, VIDEO_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

@@ -0,0 +1,9 @@
+export { registerVideoComponent, LxVideoElement, } from "./video.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, buildNavigatorNativeAttrs, buildPickerNativeAttrs, getPickerDisplayText, getPickerValueFromIndex, VIDEO_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/input.d.ts

@@ -0,0 +1,117 @@
+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;