@lingxia/elements 0.14.0 → 0.16.0

package/dist/inline-native/style.d.ts

@@ -0,0 +1,7 @@
+import type { AuthorNode } from "./types.js";
+export declare const OBSERVED_STYLE_FIELDS: string[];
+/** Native nodes are flat siblings, so each receives its cumulative alpha. */
+export declare function effectiveOpacity(element: Element): number;
+/** Canvas resolves browser-supported CSS colors into the hosts' sRGB wire format. */
+export declare function normalizeNativeColor(document: Document, value: string): string | undefined;
+export declare function collectNativeStyleIssues(element: Element): NonNullable<AuthorNode["styleIssues"]>;

package/dist/inline-native/style.js

@@ -0,0 +1,119 @@
+// Computed values catch unsupported styles from classes as well as inline CSS.
+const unsupportedDefaults = {
+    transform: ["none"], translate: ["none"], rotate: ["none"], scale: ["none"],
+    perspective: ["none"], clipPath: ["none"], maskImage: ["none"],
+    boxShadow: ["none"], filter: ["none"], backdropFilter: ["none"],
+    mixBlendMode: ["normal"], backgroundImage: ["none"],
+    animationName: ["none"], transitionDuration: ["0s"],
+    textDecorationLine: ["none"], fontStyle: ["normal"],
+    letterSpacing: ["normal", "0px"], textShadow: ["none"],
+};
+const layoutProperties = new Set([
+    "transform", "translate", "rotate", "scale", "perspective", "clipPath", "maskImage",
+]);
+export const OBSERVED_STYLE_FIELDS = [
+    ...Object.keys(unsupportedDefaults), "display", "visibility", "opacity", "overflowX", "overflowY",
+    "color", "backgroundColor", "accentColor", "fontSize", "fontWeight", "lineHeight", "textAlign", "direction",
+    ...["Top", "Right", "Bottom", "Left"].flatMap(side => ["Width", "Style", "Color"].map(suffix => `border${side}${suffix}`)),
+    "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius",
+];
+/** Native nodes are flat siblings, so each receives its cumulative alpha. */
+export function effectiveOpacity(element) {
+    var _a, _b;
+    let opacity = 1;
+    for (let node = element; node; node = node.parentElement) {
+        opacity *= Number((_b = (_a = node.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.getComputedStyle(node).opacity) !== null && _b !== void 0 ? _b : 1);
+    }
+    return opacity;
+}
+const colorContexts = new WeakMap();
+const colors = new Map();
+/** Canvas resolves browser-supported CSS colors into the hosts' sRGB wire format. */
+export function normalizeNativeColor(document, value) {
+    var _a;
+    if (/^rgba?\([\d.,\s]+\)$/.test(value) || /^#[\da-f]{6}([\da-f]{2})?$/i.test(value))
+        return value;
+    const cached = colors.get(value);
+    if (cached)
+        return cached;
+    let context = colorContexts.get(document);
+    if (!context) {
+        const canvas = document.createElement("canvas");
+        canvas.width = canvas.height = 1;
+        context = (_a = canvas.getContext("2d", { willReadFrequently: true, colorSpace: "srgb" })) !== null && _a !== void 0 ? _a : undefined;
+        if (!context)
+            return undefined;
+        colorContexts.set(document, context);
+    }
+    context.fillStyle = "#010203";
+    context.fillStyle = value;
+    const first = context.fillStyle;
+    context.fillStyle = "#040506";
+    context.fillStyle = value;
+    if (context.fillStyle !== first)
+        return undefined;
+    context.clearRect(0, 0, 1, 1);
+    context.fillRect(0, 0, 1, 1);
+    const [r, g, b, a] = context.getImageData(0, 0, 1, 1).data;
+    const result = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
+    if (colors.size >= 256)
+        colors.clear();
+    colors.set(value, result);
+    return result;
+}
+export function collectNativeStyleIssues(element) {
+    var _a, _b;
+    const view = (_a = element.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+    if (!(view === null || view === void 0 ? void 0 : view.getComputedStyle))
+        return [];
+    const style = view.getComputedStyle(element);
+    const issues = [];
+    for (const property of ["color", "backgroundColor", "borderTopColor", "accentColor"]) {
+        const value = style[property];
+        if (value && value !== "auto" && !normalizeNativeColor(element.ownerDocument, value)) {
+            issues.push({ property, value, layout: false });
+        }
+    }
+    for (const [property, defaults] of Object.entries(unsupportedDefaults)) {
+        const value = String((_b = style[property]) !== null && _b !== void 0 ? _b : "").trim();
+        if (!value || defaults.includes(value))
+            continue;
+        if (property === "backgroundImage" && isVideoPoster(element, value))
+            continue;
+        if (property === "transitionDuration" && value.split(",").every((duration) => parseFloat(duration) === 0))
+            continue;
+        issues.push({ property, value, layout: layoutProperties.has(property) });
+    }
+    const corners = [style.borderTopLeftRadius, style.borderTopRightRadius,
+        style.borderBottomRightRadius, style.borderBottomLeftRadius];
+    if (corners.some((value) => value && (value !== corners[0] || !/^\d+(\.\d+)?px$/.test(value)))) {
+        issues.push({ property: "borderRadius", value: corners.join(" / "), layout: false });
+    }
+    for (const suffix of ["Width", "Color", "Style"]) {
+        const values = [style[`borderTop${suffix}`], style[`borderRight${suffix}`],
+            style[`borderBottom${suffix}`], style[`borderLeft${suffix}`]];
+        const hasBorder = [style.borderTopWidth, style.borderRightWidth,
+            style.borderBottomWidth, style.borderLeftWidth].some((width) => parseFloat(width) > 0);
+        if (hasBorder && (values.some((value) => value !== values[0]) ||
+            (suffix === "Style" && values.some((value) => value !== "solid" && value !== "none")))) {
+            issues.push({ property: `border${suffix}`, value: values.join(" / "), layout: false });
+        }
+    }
+    return issues;
+}
+function isVideoPoster(element, background) {
+    var _a;
+    if (element.tagName.toLowerCase() !== "lx-video")
+        return false;
+    const poster = element.getAttribute("poster");
+    const url = (_a = /^url\("(.*)"\)$/.exec(background)) === null || _a === void 0 ? void 0 : _a[1];
+    if (!poster || !url)
+        return false;
+    // LxVideo owns this DOM placeholder; the native backend paints its poster prop.
+    try {
+        return new URL(url.replace(/\\(["\\])/g, "$1"), element.baseURI).href === new URL(poster, element.baseURI).href;
+    }
+    catch {
+        return false;
+    }
+}

package/dist/inline-native/types.d.ts

@@ -0,0 +1,82 @@
+import type { CoreKind, HostFactoryKind, NativeErrorCode, PublicComponentName } from "./schema.js";
+export interface RootRef {
+    surfaceInstanceId: string;
+    pageInstanceId: string;
+    documentInstanceId: string;
+    rootKey: string;
+    rootEpoch: number;
+}
+export interface NodeRef extends RootRef {
+    nodeKey: string;
+    nodeEpoch: number;
+}
+export interface NativeError {
+    code: NativeErrorCode;
+    scope: "node" | "root";
+    recoverable: boolean;
+    root: RootRef;
+    node?: NodeRef;
+    message: string;
+}
+export interface PressPayload {
+    source: "pointer" | "keyboard" | "accessibility";
+}
+export interface ValuePayload {
+    value: number;
+}
+export interface FocusPayload {
+    source: "pointer" | "keyboard" | "accessibility";
+}
+export interface PointerPayload {
+    source: "pointer";
+}
+export type NativeHandler<TPayload> = (payload: TPayload) => void;
+export type AuthorChild = AuthorNode | string | number | false | null | undefined | readonly AuthorChild[];
+export interface AuthorNode {
+    type: string;
+    authorId?: string;
+    automationId?: string;
+    props?: Record<string, unknown>;
+    children?: AuthorChild;
+    textContent?: string | number;
+    styleIssues?: Array<{
+        property: string;
+        value: string;
+        layout: boolean;
+    }>;
+}
+export interface CoreNode {
+    kind: HostFactoryKind;
+    authorType: PublicComponentName;
+    authorId?: string;
+    automationId?: string;
+    props: Record<string, unknown>;
+    children: CoreNode[];
+    text?: string;
+}
+export interface CompiledNativeRoot {
+    authorType: "LxNativeRoot";
+    authorId?: string;
+    automationId?: string;
+    props: Record<string, unknown>;
+    children: CoreNode[];
+    kind: Extract<CoreKind, "root">;
+}
+export type CompileInlineNativeResult = {
+    ok: true;
+    root: CompiledNativeRoot;
+    diagnostics: NativeError[];
+} | {
+    ok: false;
+    error: NativeError;
+    diagnostics: NativeError[];
+};
+export interface CompileInlineNativeOptions {
+    rootRef?: RootRef;
+    /**
+     * When true, `controls` defaults to `true` (author contract). Tests and
+     * wrappers should leave this on; only a host fixture may override it.
+     */
+    defaultVideoControls?: boolean;
+}
+export declare const EMPTY_ROOT_REF: RootRef;

package/dist/inline-native/types.js

@@ -0,0 +1,7 @@
+export const EMPTY_ROOT_REF = {
+    surfaceInstanceId: "",
+    pageInstanceId: "",
+    documentInstanceId: "",
+    rootKey: "",
+    rootEpoch: 0,
+};

package/dist/inline-native/unwrap.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Payload-first unwrap used by React/Vue wrappers. HTML keeps CustomEvent.
+ *
+ * A real DOM Event (or an event-like `{ type, detail }` used by unit tests)
+ * yields `detail`. A bare payload object is returned as-is so wrappers can
+ * also be called with already-unwrapped values.
+ */
+export declare function unwrapNativeEventPayload<TPayload>(event: unknown): TPayload;
+export declare function isDomEvent(value: unknown): value is Event;
+export declare function bindPayloadHandler<TPayload>(handler: ((payload: TPayload) => void) | undefined): EventListener;

package/dist/inline-native/unwrap.js

@@ -0,0 +1,32 @@
+/**
+ * Payload-first unwrap used by React/Vue wrappers. HTML keeps CustomEvent.
+ *
+ * A real DOM Event (or an event-like `{ type, detail }` used by unit tests)
+ * yields `detail`. A bare payload object is returned as-is so wrappers can
+ * also be called with already-unwrapped values.
+ */
+export function unwrapNativeEventPayload(event) {
+    if (isDomEvent(event) || isEventLike(event)) {
+        const detail = event.detail;
+        return (detail === undefined ? {} : detail);
+    }
+    return event;
+}
+export function isDomEvent(value) {
+    return typeof Event !== "undefined" && value instanceof Event;
+}
+function isEventLike(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    const record = value;
+    if (!("detail" in record))
+        return false;
+    return "type" in record || "target" in record || "currentTarget" in record;
+}
+export function bindPayloadHandler(handler) {
+    return (event) => {
+        if (typeof handler !== "function")
+            return;
+        handler(unwrapNativeEventPayload(event));
+    };
+}

package/dist/inline-native/video.d.ts

@@ -0,0 +1,65 @@
+import type { NodeRef } from "./types.js";
+export declare const VIDEO_COMMANDS: readonly ["play", "pause", "stop", "seek", "enterFullscreen", "exitFullscreen", "setStreamSource"];
+export type VideoCommandName = (typeof VIDEO_COMMANDS)[number];
+export type VideoCommand = {
+    name: "play";
+} | {
+    name: "pause";
+} | {
+    name: "stop";
+} | {
+    name: "seek";
+    seconds: number;
+} | {
+    name: "enterFullscreen";
+} | {
+    name: "exitFullscreen";
+} | {
+    name: "setStreamSource";
+    options: Record<string, unknown>;
+};
+export interface VideoCommandRequest {
+    action: "video.command";
+    owner: NodeRef;
+    requestId: string;
+    command: VideoCommand;
+}
+export interface VideoControlDescriptorBase {
+    controlId: string;
+    label: string;
+    frame: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    visible: boolean;
+    disabled?: boolean;
+}
+export type VideoControlDescriptor = (VideoControlDescriptorBase & {
+    role: "button";
+    pressed?: boolean;
+    expanded?: boolean;
+    actions: ReadonlyArray<"focus" | "blur" | "activate">;
+}) | (VideoControlDescriptorBase & {
+    role: "slider";
+    value: number;
+    min: number;
+    max: number;
+    actions: ReadonlyArray<"focus" | "blur" | "increment" | "decrement" | "setValue">;
+});
+export interface VideoControlsSemanticSnapshot {
+    action: "video.controlsSemanticSnapshot";
+    owner: NodeRef;
+    revision: number;
+    controls: readonly VideoControlDescriptor[];
+}
+export declare function buildVideoCommandRequest(owner: NodeRef, command: VideoCommand, requestId: string): VideoCommandRequest;
+export declare function videoCommandUrls(command: VideoCommand): string[];
+export declare function collectVideoResourceUrls(props: Record<string, unknown>): string[];
+export declare function validateControlsSnapshot(snapshot: VideoControlsSemanticSnapshot, lastRevision: number): {
+    ok: true;
+} | {
+    ok: false;
+    message: string;
+};

package/dist/inline-native/video.js

@@ -0,0 +1,69 @@
+export const VIDEO_COMMANDS = [
+    "play",
+    "pause",
+    "stop",
+    "seek",
+    "enterFullscreen",
+    "exitFullscreen",
+    "setStreamSource",
+];
+export function buildVideoCommandRequest(owner, command, requestId) {
+    return { action: "video.command", owner, requestId, command };
+}
+export function videoCommandUrls(command) {
+    var _a;
+    if (command.name !== "setStreamSource")
+        return [];
+    const options = (_a = command.options) !== null && _a !== void 0 ? _a : {};
+    const urls = [];
+    for (const key of ["url", "src", "uri"]) {
+        const value = options[key];
+        if (typeof value === "string" && value)
+            urls.push(value);
+    }
+    return urls;
+}
+export function collectVideoResourceUrls(props) {
+    const urls = [];
+    for (const key of ["src", "poster"]) {
+        const value = props[key];
+        if (typeof value === "string" && value)
+            urls.push(value);
+    }
+    const watermark = props.watermark;
+    if ((watermark === null || watermark === void 0 ? void 0 : watermark.resource) && typeof watermark.resource === "object") {
+        const url = watermark.resource.url;
+        if (typeof url === "string" && url)
+            urls.push(url);
+    }
+    const qualities = props.qualities;
+    if (Array.isArray(qualities)) {
+        for (const item of qualities) {
+            if (item && typeof item === "object" && typeof item.url === "string") {
+                urls.push(item.url);
+            }
+        }
+    }
+    return urls;
+}
+export function validateControlsSnapshot(snapshot, lastRevision) {
+    if (snapshot.revision <= lastRevision) {
+        return { ok: false, message: "controls snapshot revision must increase" };
+    }
+    const seen = new Set();
+    for (const control of snapshot.controls) {
+        if (!control.controlId || seen.has(control.controlId)) {
+            return { ok: false, message: "controlId must be unique and non-empty" };
+        }
+        seen.add(control.controlId);
+        if (control.role === "slider") {
+            if (![control.min, control.max, control.value].every(Number.isFinite)) {
+                return { ok: false, message: "slider descriptor values must be finite" };
+            }
+            if (control.min > control.value || control.value > control.max) {
+                return { ok: false, message: "slider descriptor value is out of range" };
+            }
+        }
+    }
+    return { ok: true };
+}

package/dist/native_component_wrapper_shared.d.ts

@@ -1,4 +1,4 @@
-import type { NavigatorEnvVersion, NavigatorOpenType, NavigatorTarget } from "./navigator.js";
+import type { NavigatorChannel, NavigatorOpenType, NavigatorTarget } from "./navigator.js";
 import type { NavigatorQuery } from "./navigator.js";
 import type { LxMediaSwiperItem } from "./media_swiper.js";
 import type { LxVideoQuality } from "./video.js";
@@ -12,7 +12,7 @@ export interface NavigatorNativeAttrOptions {
     delta?: number;
     appId?: string;
     query?: NavigatorQuery;
-    envVersion?: NavigatorEnvVersion;
+    channel?: NavigatorChannel;
     targetVersion?: string;
     phoneNumber?: string;
     hoverClass?: string;
@@ -61,6 +61,7 @@ export declare const VIDEO_DOM_EVENT_MAP: {
     readonly onWaiting: "waiting";
     readonly onQualityChange: "qualitychange";
     readonly onRateChange: "ratechange";
+    readonly onVolumeChange: "volumechange";
 };
 export interface VideoNativeAttrOptions {
     id?: string;

package/dist/native_component_wrapper_shared.js

@@ -43,8 +43,8 @@ export function buildNavigatorNativeAttrs(options, extraAttrs = {}) {
         result["app-id"] = options.appId;
     if (options.query)
         result.query = JSON.stringify(options.query);
-    if (options.envVersion)
-        result["env-version"] = options.envVersion;
+    if (options.channel)
+        result.channel = options.channel;
     if (options.targetVersion)
         result["target-version"] = options.targetVersion;
     if (options.phoneNumber)
@@ -164,6 +164,7 @@ export const VIDEO_DOM_EVENT_MAP = {
     onWaiting: "waiting",
     onQualityChange: "qualitychange",
     onRateChange: "ratechange",
+    onVolumeChange: "volumechange",
 };
 export function buildVideoNativeAttrs(options, extraAttrs = {}) {
     var _a, _b;
@@ -181,7 +182,9 @@ export function buildVideoNativeAttrs(options, extraAttrs = {}) {
         result.loop = "";
     if (options.muted)
         result.muted = "";
-    if (options.controls)
+    if (options.controls === false)
+        result.controls = "false";
+    else if (options.controls)
         result.controls = "";
     if (options.progressBar === false)
         result["progress-bar"] = "false";

package/dist/nativecomponent.d.ts

@@ -1,6 +1,6 @@
 import type { NativeComponentMessage } from './types.js';
 export type { NativeComponentMessage } from './types.js';
-export declare function sendNativeComponentMessage(message: NativeComponentMessage): void;
+export declare function sendNativeComponentMessage(message: NativeComponentMessage): boolean;
 export declare function registerNativeComponentHandler(id: string, handler: (msg: NativeComponentMessage) => void): () => void;
 export declare function invalidateNativeComponentLayout(delays?: number[]): void;
 export declare function addNativeComponentLayoutInvalidationListener(listener: EventListenerOrEventListenerObject): () => void;

package/dist/nativecomponent.js

@@ -2,6 +2,8 @@ let warnedNoHandler = false;
 const NATIVE_COMPONENT_LAYOUT_INVALIDATED_EVENT = "lingxia:native-component-layout-invalidated";
 let pendingLayoutInvalidationFrame = null;
 const pendingLayoutInvalidationTimers = new Map();
+/// Returns false when the native channel is not up yet and the message was
+/// dropped, so callers that carry state (an island's first commit) can retry.
 export function sendNativeComponentMessage(message) {
     var _a, _b;
     const sender = typeof window !== "undefined"
@@ -12,29 +14,24 @@ export function sendNativeComponentMessage(message) {
             warnedNoHandler = true;
             console.warn("[LingXia NativeComponent] message handler not available");
         }
-        return;
+        return false;
     }
     sender(message);
+    return true;
 }
 export function registerNativeComponentHandler(id, handler) {
-    var _a, _b, _c, _d, _e;
+    var _a;
     const nativeComponents = typeof window !== "undefined"
         ? (_a = window.LingXiaBridge) === null || _a === void 0 ? void 0 : _a.nativeComponents
         : undefined;
     const registerFn = nativeComponents === null || nativeComponents === void 0 ? void 0 : nativeComponents.register;
     if (typeof registerFn === "function") {
         const unregister = registerFn(id, handler);
-        const platform = (_b = window.LingXiaBridge) === null || _b === void 0 ? void 0 : _b.platform;
-        const requiresReadyHandshake = !!(((_c = platform === null || platform === void 0 ? void 0 : platform.isIOS) === null || _c === void 0 ? void 0 : _c.call(platform)) ||
-            ((_d = platform === null || platform === void 0 ? void 0 : platform.isAndroid) === null || _d === void 0 ? void 0 : _d.call(platform)) ||
-            ((_e = platform === null || platform === void 0 ? void 0 : platform.isMacOS) === null || _e === void 0 ? void 0 : _e.call(platform)));
-        const hasHandler = nativeComponents === null || nativeComponents === void 0 ? void 0 : nativeComponents.hasHandler;
         const send = nativeComponents === null || nativeComponents === void 0 ? void 0 : nativeComponents.send;
+        // Always announce ready after the leaf handler is registered, including
+        // Windows: island video queues play/playing until this id's handshake.
         if (typeof send === "function") {
-            const nativeReady = typeof hasHandler === "function" ? hasHandler() : true;
-            if (requiresReadyHandshake || nativeReady) {
-                send({ action: "component.ready", id });
-            }
+            send({ action: "component.ready", id });
         }
         return unregister;
     }

package/dist/navigator.d.ts

@@ -2,7 +2,7 @@ export type NavigatorOpenType = 'navigate' | 'redirect' | 'navigateBack' | 'reLa
 export type NavigatorTarget = 'self' | 'lxapp' | 'browser';
 export type NavigatorQueryValue = string | number | boolean | null | undefined;
 export type NavigatorQuery = Record<string, NavigatorQueryValue>;
-export type NavigatorEnvVersion = 'release' | 'preview' | 'developer';
+export type NavigatorChannel = 'release' | 'preview' | 'draft';
 export interface LxNavigatorEventDetail {
     success?: boolean;
     errMsg?: string;
@@ -18,7 +18,7 @@ export type LxNavigatorAttributes = {
     target?: NavigatorTarget;
     delta?: number;
     'app-id'?: string;
-    'env-version'?: NavigatorEnvVersion;
+    channel?: NavigatorChannel;
     'target-version'?: string;
     'phone-number'?: string;
     'hover-class'?: string;

package/dist/navigator.js

@@ -44,7 +44,7 @@ export class LxNavigatorElement extends HTMLElement {
             "target",
             "delta",
             "app-id",
-            "env-version",
+            "channel",
             "target-version",
             "phone-number",
             "hover-class",
@@ -169,7 +169,7 @@ export class LxNavigatorElement extends HTMLElement {
         const explicitTarget = this.getAttribute('target');
         const delta = parseInt(this.getAttribute('delta') || '1', 10);
         const appId = this.getAttribute('app-id');
-        const envVersion = this.getAttribute('env-version');
+        const channel = this.getAttribute('channel');
         const targetVersion = this.getAttribute('target-version');
         const phoneNumber = this.getAttribute('phone-number');
         // Auto-infer target if not explicitly specified
@@ -183,7 +183,7 @@ export class LxNavigatorElement extends HTMLElement {
             target,
             delta,
             appId,
-            envVersion,
+            channel,
             targetVersion,
             phoneNumber
         });
@@ -381,8 +381,8 @@ export class LxNavigatorElement extends HTMLElement {
         const pageTarget = this.buildPageTarget(options);
         if (pageTarget)
             Object.assign(target, pageTarget);
-        if (options.envVersion)
-            target.envVersion = options.envVersion;
+        if (options.channel)
+            target.channel = options.channel;
         if (options.targetVersion)
             target.targetVersion = options.targetVersion;
         return target;

package/dist/picker.js

@@ -1,7 +1,15 @@
 import { sendNativeComponentMessage, registerNativeComponentHandler, addNativeComponentLayoutInvalidationListener } from "./nativecomponent.js";
 import { ensureComponentId } from "./component.js";
 import { measureElement } from "./dom.js";
-import { isAndroid, isHarmony, isDesktop } from "./platform.js";
+import { isAndroid, isHarmony, isIOS } from "./platform.js";
+// Which hosts register a `picker.native` component. A capability question, not
+// a form-factor one: macOS and Windows have no picker factory, so they draw the
+// web picker even in the Runner's phone frame, where the host class is mobile
+// but the machine underneath is still a Mac or a PC. Harmony has its own embed
+// path and never reaches either branch.
+function hasNativePicker() {
+    return isIOS() || isAndroid();
+}
 const HARMONY_PROPS_PREFIX = "data:application/json,";
 // Component implementation
 export class LxPickerElement extends HTMLElement {
@@ -14,7 +22,7 @@ export class LxPickerElement extends HTMLElement {
         this._pageBindings = {};
         this.layoutInvalidationListener = {
             handleEvent: () => {
-                if (!this.isConnected || isHarmony() || isDesktop())
+                if (!this.isConnected || isHarmony() || !hasNativePicker())
                     return;
                 void this.mountPicker();
             }
@@ -86,7 +94,7 @@ export class LxPickerElement extends HTMLElement {
         }
         (_a = this.removeLayoutInvalidationListener) === null || _a === void 0 ? void 0 : _a.call(this);
         this.removeLayoutInvalidationListener = undefined;
-        if (this.componentId && !isHarmony() && !isDesktop()) {
+        if (this.componentId && !isHarmony() && hasNativePicker()) {
             sendNativeComponentMessage({
                 action: "component.unmount",
                 id: this.componentId
@@ -241,7 +249,7 @@ export class LxPickerElement extends HTMLElement {
             this.mounted = true;
             return;
         }
-        if (isDesktop()) {
+        if (!hasNativePicker()) {
             if (this.webCleanup)
                 return;
             const { renderWebPicker } = await import('./picker-web.js');

package/dist/video-events.d.ts

@@ -0,0 +1,2 @@
+/** Keep platform spelling differences out of the public DOM/payload contract. */
+export declare function normalizeVideoEventDetail(event: string, payload: unknown): Record<string, unknown>;

package/dist/video-events.js

@@ -0,0 +1,18 @@
+/** Keep platform spelling differences out of the public DOM/payload contract. */
+export function normalizeVideoEventDetail(event, payload) {
+    var _a, _b, _c, _d, _e;
+    const detail = payload && typeof payload === "object" ? payload : {};
+    if (["playrequest", "play", "playing", "pause", "stop", "ended", "waiting"].includes(event))
+        return {};
+    if (event === "fullscreenchange") {
+        return { ...detail, fullscreen: (_b = (_a = detail.fullscreen) !== null && _a !== void 0 ? _a : detail.fullScreen) !== null && _b !== void 0 ? _b : false };
+    }
+    if (event === "error") {
+        return {
+            ...detail,
+            code: String((_c = detail.code) !== null && _c !== void 0 ? _c : "NATIVE_COMPONENT_COMMAND_FAILED"),
+            message: String((_e = (_d = detail.message) !== null && _d !== void 0 ? _d : detail.errMsg) !== null && _e !== void 0 ? _e : "Native video failed"),
+        };
+    }
+    return detail;
+}