@lingxia/elements 0.5.0

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@lingxia/elements",
+  "version": "0.5.0",
+  "private": false,
+  "description": "LingXia custom elements — native-backed web components for LxApp pages",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@lingxia/bridge": "file:../lingxia-bridge",
+    "typescript": "^5.7.2"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LingXia-Dev/LingXia.git",
+    "directory": "packages/lingxia-elements"
+  },
+  "license": "MIT"
+}

package/src/component.ts

@@ -0,0 +1,164 @@
+import { isIOS } from "./platform.js";
+
+export type Rect = { x: number; y: number; width: number; height: number };
+
+let autoId = 0;
+
+export function ensureComponentId(el: HTMLElement, prefix: string, currentId?: string | null): string {
+  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 {
+  private scrollContainer: HTMLDivElement | null = null;
+  private host: HTMLElement;
+  private componentId: string;
+
+  constructor(host: HTMLElement, componentId: string) {
+    this.host = host;
+    this.componentId = componentId;
+  }
+
+  /**
+   * Setup scroll container for iOS. No-op on other platforms.
+   */
+  setup(): void {
+    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: EventListenerObject = {
+      handleEvent: (event: Event): void => {
+        (event as TouchEvent).preventDefault();
+      },
+    };
+    const scrollLockListener: EventListenerObject = {
+      handleEvent: (): void => {
+        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(): void {
+    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(): Rect | null {
+    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: Record<string, unknown>): void {
+    const rect = this.getScrollContainerRect();
+    if (rect) {
+      payload.scrollContainerRect = rect;
+    }
+  }
+}
+
+export function rectEquals(a: Rect | null, b: Rect, epsilon = 0): boolean {
+  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 {
+  private lastPropsJson: string | null = null;
+  private lastRect: Rect | null = null;
+  private lastZIndex: number | null = null;
+
+  reset() {
+    this.lastPropsJson = null;
+    this.lastRect = null;
+    this.lastZIndex = null;
+  }
+
+  decide(
+    rect: Rect,
+    props: Record<string, unknown> | null,
+    zIndex: number,
+    force = false
+  ): { shouldSend: boolean; propsChanged: boolean; rectChanged: boolean; zChanged: boolean } {
+    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: Rect, props: Record<string, unknown> | null, zIndex: number, force = false): boolean {
+    return this.decide(rect, props, zIndex, force).shouldSend;
+  }
+}

package/src/dom.ts

@@ -0,0 +1,83 @@
+export type MeasuredElement = {
+  rect: { x: number; y: number; width: number; height: number };
+  cornerRadius?: number;
+};
+
+export function measureElement(el: HTMLElement): MeasuredElement {
+  const rect = el.getBoundingClientRect();
+
+  const parseRadius = (radiusStr: string): number | undefined => {
+    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: CSSStyleDeclaration): boolean =>
+    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: DOMRect, b: DOMRect, 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: number, b: number, 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/src/index.ts

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