@lingxia/elements 0.5.1 → 0.6.3

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { registerVideoComponent, LxVideoElement, type LxVideoAttributes, } from
 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 { LxNavigatorElement, type LxNavigatorAttributes, type LxNavigatorEvent, type NavigatorEnvVersion, type NavigatorOpenType, type NavigatorQuery, type NavigatorQueryValue, 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";

package/dist/native_component_wrapper_shared.d.ts

@@ -1,14 +1,19 @@
-import type { NavigatorOpenType, NavigatorTarget } from "./navigator.js";
+import type { NavigatorEnvVersion, NavigatorOpenType, NavigatorTarget } from "./navigator.js";
+import type { NavigatorQuery } from "./navigator.js";
 import type { LxVideoQuality } from "./video.js";
 export declare function appendDataAttrs(attrs: Record<string, unknown>, target: Record<string, string>): void;
 export declare function appendPassthroughAttrs(attrs: Record<string, unknown>, target: Record<string, string>): void;
 export interface NavigatorNativeAttrOptions {
     url?: string;
+    page?: string;
     openType?: NavigatorOpenType;
     target?: NavigatorTarget;
     delta?: number;
     appId?: string;
     path?: string;
+    query?: NavigatorQuery;
+    envVersion?: NavigatorEnvVersion;
+    targetVersion?: string;
     phoneNumber?: string;
     hoverClass?: string;
     hoverStopPropagation?: boolean;

package/dist/native_component_wrapper_shared.js

@@ -35,12 +35,20 @@ export function buildNavigatorNativeAttrs(options, extraAttrs = {}) {
     };
     if (options.url)
         result.url = options.url;
+    if (options.page)
+        result.page = options.page;
     if (options.target)
         result.target = options.target;
     if (options.appId)
         result["app-id"] = options.appId;
     if (options.path)
         result.path = options.path;
+    if (options.query)
+        result.query = JSON.stringify(options.query);
+    if (options.envVersion)
+        result["env-version"] = options.envVersion;
+    if (options.targetVersion)
+        result["target-version"] = options.targetVersion;
     if (options.phoneNumber)
         result["phone-number"] = options.phoneNumber;
     appendPassthroughAttrs(extraAttrs, result);

package/dist/navigator.d.ts

@@ -1,5 +1,8 @@
 export type NavigatorOpenType = 'navigate' | 'redirect' | 'navigateBack' | 'reLaunch' | 'switchTab' | 'exit' | 'openUrl' | 'tel';
 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' | 'develop';
 export interface LxNavigatorEventDetail {
     success?: boolean;
     errMsg?: string;
@@ -9,11 +12,15 @@ export interface LxNavigatorEvent extends CustomEvent<LxNavigatorEventDetail> {
 }
 export type LxNavigatorAttributes = {
     url?: string;
+    page?: string;
+    path?: string;
+    query?: string;
     'open-type'?: NavigatorOpenType;
     target?: NavigatorTarget;
     delta?: number;
     'app-id'?: string;
-    path?: string;
+    'env-version'?: NavigatorEnvVersion;
+    'target-version'?: string;
     'phone-number'?: string;
     'hover-class'?: string;
     'hover-stop-propagation'?: boolean;
@@ -78,6 +85,9 @@ export declare class LxNavigatorElement extends HTMLElement {
     private dispatchSuccess;
     private resolveErrorMessage;
     private dispatchFail;
-    private getHostApi;
+    private callHost;
     private performNavigation;
+    private readQuery;
+    private buildPageTarget;
+    private buildLxAppTarget;
 }

package/dist/navigator.js

@@ -38,11 +38,15 @@ export class LxNavigatorElement extends HTMLElement {
     static get observedAttributes() {
         return [
             "url",
+            "page",
+            "path",
+            "query",
             "open-type",
             "target",
             "delta",
             "app-id",
-            "path",
+            "env-version",
+            "target-version",
             "phone-number",
             "hover-class",
             "hover-stop-propagation",
@@ -157,21 +161,29 @@ export class LxNavigatorElement extends HTMLElement {
     handleClick(e) {
         e.preventDefault();
         const url = this.getAttribute('url') || '';
+        const page = this.getAttribute('page');
+        const path = this.getAttribute('path');
+        const query = this.getAttribute('query');
         const openType = (this.getAttribute('open-type') || 'navigate');
         const explicitTarget = this.getAttribute('target');
         const delta = parseInt(this.getAttribute('delta') || '1', 10);
         const appId = this.getAttribute('app-id');
-        const path = this.getAttribute('path');
+        const envVersion = this.getAttribute('env-version');
+        const targetVersion = this.getAttribute('target-version');
         const phoneNumber = this.getAttribute('phone-number');
         // Auto-infer target if not explicitly specified
         const target = this.inferTarget(explicitTarget, url, appId);
         void this.navigate({
             url,
+            page,
+            path,
+            query,
             openType,
             target,
             delta,
             appId,
-            path,
+            envVersion,
+            targetVersion,
             phoneNumber
         });
     }
@@ -260,119 +272,78 @@ export class LxNavigatorElement extends HTMLElement {
         });
         this.dispatchEvent(completeEvent);
     }
-    getHostApi() {
-        const host = window.host;
-        if (!host || typeof host !== 'object') {
-            return null;
+    callHost(route, params) {
+        const bridge = window.LingXiaBridge;
+        if (!bridge || typeof bridge.invoke !== 'function') {
+            return Promise.reject(new Error('LingXiaBridge is not available'));
         }
-        return host;
+        return bridge.invoke(route, params).then(() => undefined);
     }
     async performNavigation(options) {
-        var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o;
-        const host = this.getHostApi();
-        if (!host) {
-            throw new Error('LingXia bridge not available');
-        }
         const url = options.url || '';
         const delta = Number.isFinite(options.delta) && options.delta > 0 ? options.delta : 1;
         if (options.openType === 'tel') {
             if (!options.phoneNumber) {
                 throw new Error('tel requires phone-number attribute');
             }
-            if (typeof ((_a = host.device) === null || _a === void 0 ? void 0 : _a.makePhoneCall) !== 'function') {
-                throw new Error('host.device.makePhoneCall is not available');
-            }
-            await host.device.makePhoneCall({ phoneNumber: options.phoneNumber });
+            await this.callHost('device.makePhoneCall', { phoneNumber: options.phoneNumber });
             return;
         }
         if (options.openType === 'exit') {
-            if (typeof ((_b = host.navigator) === null || _b === void 0 ? void 0 : _b.navigateBackLxApp) !== 'function') {
-                throw new Error('host.navigator.navigateBackLxApp is not available');
-            }
-            await host.navigator.navigateBackLxApp();
+            await this.callHost('navigator.navigateBackLxApp');
             return;
         }
         if (options.openType === 'navigateBack') {
             if (options.target === 'lxapp') {
-                if (typeof ((_c = host.navigator) === null || _c === void 0 ? void 0 : _c.navigateBackLxApp) !== 'function') {
-                    throw new Error('host.navigator.navigateBackLxApp is not available');
-                }
-                await host.navigator.navigateBackLxApp();
+                await this.callHost('navigator.navigateBackLxApp');
                 return;
             }
             if (options.target === 'browser') {
                 throw new Error('navigateBack is not supported for browser target');
             }
-            if (typeof ((_d = host.navigation) === null || _d === void 0 ? void 0 : _d.navigateBack) !== 'function') {
-                throw new Error('host.navigation.navigateBack is not available');
-            }
-            await host.navigation.navigateBack({ delta });
+            await this.callHost('navigation.navigateBack', { delta });
             return;
         }
         if (options.target === 'browser') {
             if (!url) {
                 throw new Error('openUrl requires url');
             }
-            if (typeof ((_f = host.device) === null || _f === void 0 ? void 0 : _f.openUrl) !== 'function') {
-                throw new Error('host.device.openUrl is not available');
-            }
-            await host.device.openUrl({ url, target: 'external' });
+            await this.callHost('device.openUrl', { url, target: 'external' });
             return;
         }
         if (options.target === 'lxapp') {
             if (!options.appId) {
                 throw new Error('navigateToLxApp requires app-id');
             }
-            const lxappPath = options.path || '';
-            if (typeof ((_g = host.navigator) === null || _g === void 0 ? void 0 : _g.navigateToLxApp) !== 'function') {
-                throw new Error('host.navigator.navigateToLxApp is not available');
-            }
-            await host.navigator.navigateToLxApp({ appId: options.appId, path: lxappPath });
+            await this.callHost('navigator.navigateToLxApp', this.buildLxAppTarget(options));
             return;
         }
         if (options.target === 'self' && /^https?:\/\//i.test(url)) {
             if (!url) {
                 throw new Error('openUrl requires url');
             }
-            if (typeof ((_h = host.device) === null || _h === void 0 ? void 0 : _h.openUrl) !== 'function') {
-                throw new Error('host.device.openUrl is not available');
-            }
-            await host.device.openUrl({ url, target: 'self' });
+            await this.callHost('device.openUrl', { url, target: 'self' });
             return;
         }
-        if (!url) {
-            throw new Error(`${options.openType} requires url`);
+        const target = this.buildPageTarget(options);
+        if (!target) {
+            throw new Error(`${options.openType} requires page or path`);
         }
         switch (options.openType) {
             case 'navigate':
-                if (typeof ((_j = host.navigation) === null || _j === void 0 ? void 0 : _j.navigateTo) !== 'function') {
-                    throw new Error('host.navigation.navigateTo is not available');
-                }
-                await host.navigation.navigateTo({ url });
+                await this.callHost('navigation.navigateTo', target);
                 break;
             case 'redirect':
-                if (typeof ((_k = host.navigation) === null || _k === void 0 ? void 0 : _k.redirectTo) !== 'function') {
-                    throw new Error('host.navigation.redirectTo is not available');
-                }
-                await host.navigation.redirectTo({ url });
+                await this.callHost('navigation.redirectTo', target);
                 break;
             case 'switchTab':
-                if (typeof ((_l = host.navigation) === null || _l === void 0 ? void 0 : _l.switchTab) !== 'function') {
-                    throw new Error('host.navigation.switchTab is not available');
-                }
-                await host.navigation.switchTab({ url });
+                await this.callHost('navigation.switchTab', target);
                 break;
             case 'reLaunch':
-                if (typeof ((_m = host.navigation) === null || _m === void 0 ? void 0 : _m.reLaunch) !== 'function') {
-                    throw new Error('host.navigation.reLaunch is not available');
-                }
-                await host.navigation.reLaunch({ url });
+                await this.callHost('navigation.reLaunch', target);
                 break;
             case 'openUrl':
-                if (typeof ((_o = host.device) === null || _o === void 0 ? void 0 : _o.openUrl) !== 'function') {
-                    throw new Error('host.device.openUrl is not available');
-                }
-                await host.device.openUrl({
+                await this.callHost('device.openUrl', {
                     url,
                     target: options.target === 'self' ? 'self' : 'external'
                 });
@@ -381,6 +352,41 @@ export class LxNavigatorElement extends HTMLElement {
                 throw new Error(`Unsupported openType: ${options.openType}`);
         }
     }
+    readQuery(raw) {
+        if (!raw)
+            return undefined;
+        const parsed = JSON.parse(raw);
+        if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+            throw new Error('query must be an object');
+        }
+        return parsed;
+    }
+    buildPageTarget(options) {
+        var _a, _b;
+        const page = (_a = options.page) === null || _a === void 0 ? void 0 : _a.trim();
+        const path = (_b = options.path) === null || _b === void 0 ? void 0 : _b.trim();
+        if (page && path) {
+            throw new Error('pass either page or path, not both');
+        }
+        if (!page && !path)
+            return null;
+        const query = this.readQuery(options.query);
+        return {
+            ...(page ? { page } : { path: path }),
+            ...(query ? { query } : {}),
+        };
+    }
+    buildLxAppTarget(options) {
+        const target = { appId: options.appId };
+        const pageTarget = this.buildPageTarget(options);
+        if (pageTarget)
+            Object.assign(target, pageTarget);
+        if (options.envVersion)
+            target.envVersion = options.envVersion;
+        if (options.targetVersion)
+            target.targetVersion = options.targetVersion;
+        return target;
+    }
 }
 // Register custom element
 if (typeof customElements !== 'undefined' && !customElements.get('lx-navigator')) {

package/package.json

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

package/src/index.ts

@@ -34,7 +34,10 @@ export {
   LxNavigatorElement,
   type LxNavigatorAttributes,
   type LxNavigatorEvent,
+  type NavigatorEnvVersion,
   type NavigatorOpenType,
+  type NavigatorQuery,
+  type NavigatorQueryValue,
   type NavigatorTarget,
 } from "./navigator.js";
 

package/src/native_component_wrapper_shared.ts

@@ -1,4 +1,5 @@
-import type { NavigatorOpenType, NavigatorTarget } from "./navigator.js";
+import type { NavigatorEnvVersion, NavigatorOpenType, NavigatorTarget } from "./navigator.js";
+import type { NavigatorQuery } from "./navigator.js";
 import type { LxVideoQuality } from "./video.js";
 
 export function appendDataAttrs(
@@ -31,11 +32,15 @@ export function appendPassthroughAttrs(
 
 export interface NavigatorNativeAttrOptions {
   url?: string;
+  page?: string;
   openType?: NavigatorOpenType;
   target?: NavigatorTarget;
   delta?: number;
   appId?: string;
   path?: string;
+  query?: NavigatorQuery;
+  envVersion?: NavigatorEnvVersion;
+  targetVersion?: string;
   phoneNumber?: string;
   hoverClass?: string;
   hoverStopPropagation?: boolean;
@@ -57,9 +62,13 @@ export function buildNavigatorNativeAttrs(
   };
 
   if (options.url) result.url = options.url;
+  if (options.page) result.page = options.page;
   if (options.target) result.target = options.target;
   if (options.appId) result["app-id"] = options.appId;
   if (options.path) result.path = options.path;
+  if (options.query) result.query = JSON.stringify(options.query);
+  if (options.envVersion) result["env-version"] = options.envVersion;
+  if (options.targetVersion) result["target-version"] = options.targetVersion;
   if (options.phoneNumber) result["phone-number"] = options.phoneNumber;
 
   appendPassthroughAttrs(extraAttrs, result);

package/src/navigator.ts

@@ -16,6 +16,10 @@ export type NavigatorTarget =
   | 'lxapp'         // Open another lxapp
   | 'browser';      // Open in external browser
 
+export type NavigatorQueryValue = string | number | boolean | null | undefined;
+export type NavigatorQuery = Record<string, NavigatorQueryValue>;
+export type NavigatorEnvVersion = 'release' | 'preview' | 'develop';
+
 export interface LxNavigatorEventDetail {
   success?: boolean;
   errMsg?: string;
@@ -25,16 +29,24 @@ export interface LxNavigatorEvent extends CustomEvent<LxNavigatorEventDetail> {
   detail: LxNavigatorEventDetail;
 }
 
+type LingXiaBridgeCall = {
+  invoke(route: string, params?: unknown): Promise<unknown>;
+};
+
 export type LxNavigatorAttributes = {
   // Navigation
-  url?: string;                    // Target URL or path
+  url?: string;                    // Browser URL for openUrl/browser target
+  page?: string;                   // Named page in lxapp.json
+  path?: string;                   // Raw page path, supports query string
+  query?: string;                  // JSON-encoded page query params
   'open-type'?: NavigatorOpenType; // Navigation type
   target?: NavigatorTarget;        // Navigation target (auto-inferred if not specified)
   delta?: number;                  // Pages to go back (for navigateBack)
 
   // Open external lxapp
   'app-id'?: string;              // Target lxapp ID
-  path?: string;                  // Path in target lxapp (supports query string)
+  'env-version'?: NavigatorEnvVersion; // Target lxapp envVersion
+  'target-version'?: string;      // Exact target lxapp version
 
   // Phone call
   'phone-number'?: string;        // Phone number for tel open-type
@@ -72,11 +84,15 @@ export class LxNavigatorElement extends HTMLElement {
   static get observedAttributes() {
     return [
       "url",
+      "page",
+      "path",
+      "query",
       "open-type",
       "target",
       "delta",
       "app-id",
-      "path",
+      "env-version",
+      "target-version",
       "phone-number",
       "hover-class",
       "hover-stop-propagation",
@@ -240,11 +256,15 @@ export class LxNavigatorElement extends HTMLElement {
     e.preventDefault();
 
     const url = this.getAttribute('url') || '';
+    const page = this.getAttribute('page');
+    const path = this.getAttribute('path');
+    const query = this.getAttribute('query');
     const openType = (this.getAttribute('open-type') || 'navigate') as NavigatorOpenType;
     const explicitTarget = this.getAttribute('target') as NavigatorTarget | null;
     const delta = parseInt(this.getAttribute('delta') || '1', 10);
     const appId = this.getAttribute('app-id');
-    const path = this.getAttribute('path');
+    const envVersion = this.getAttribute('env-version') as NavigatorEnvVersion | null;
+    const targetVersion = this.getAttribute('target-version');
     const phoneNumber = this.getAttribute('phone-number');
 
     // Auto-infer target if not explicitly specified
@@ -252,11 +272,15 @@ export class LxNavigatorElement extends HTMLElement {
 
     void this.navigate({
       url,
+      page,
+      path,
+      query,
       openType,
       target,
       delta,
       appId,
-      path,
+      envVersion,
+      targetVersion,
       phoneNumber
     });
   }
@@ -291,11 +315,15 @@ export class LxNavigatorElement extends HTMLElement {
 
   private async navigate(options: {
     url: string;
+    page?: string | null;
+    path?: string | null;
+    query?: string | null;
     openType: NavigatorOpenType;
     target: NavigatorTarget;
     delta: number;
     appId?: string | null;
-    path?: string | null;
+    envVersion?: NavigatorEnvVersion | null;
+    targetVersion?: string | null;
     phoneNumber?: string | null;
   }) {
     try {
@@ -370,44 +398,27 @@ export class LxNavigatorElement extends HTMLElement {
     this.dispatchEvent(completeEvent);
   }
 
-  private getHostApi() {
-    const host = (window as any).host;
-    if (!host || typeof host !== 'object') {
-      return null;
+  private callHost(route: string, params?: unknown): Promise<void> {
+    const bridge = (window as unknown as { LingXiaBridge?: LingXiaBridgeCall }).LingXiaBridge;
+    if (!bridge || typeof bridge.invoke !== 'function') {
+      return Promise.reject(new Error('LingXiaBridge is not available'));
     }
-    return host as {
-      navigation?: {
-        navigateTo?: (params: { url: string }) => Promise<void>;
-        navigateBack?: (params: { delta: number }) => Promise<void>;
-        redirectTo?: (params: { url: string }) => Promise<void>;
-        switchTab?: (params: { url: string }) => Promise<void>;
-        reLaunch?: (params: { url: string }) => Promise<void>;
-      };
-      navigator?: {
-        navigateToLxApp?: (params: { appId: string; path?: string }) => Promise<void>;
-        navigateBackLxApp?: () => Promise<void>;
-      };
-      device?: {
-        makePhoneCall?: (params: { phoneNumber: string }) => Promise<void>;
-        openUrl?: (params: { url: string; target?: 'external' | 'self' | 'new_browser_tab' }) => Promise<void>;
-      };
-    };
+    return bridge.invoke(route, params).then(() => undefined);
   }
 
   private async performNavigation(options: {
     url: string;
+    page?: string | null;
+    path?: string | null;
+    query?: string | null;
     openType: NavigatorOpenType;
     target: NavigatorTarget;
     delta: number;
     appId?: string | null;
-    path?: string | null;
+    envVersion?: NavigatorEnvVersion | null;
+    targetVersion?: string | null;
     phoneNumber?: string | null;
   }) {
-    const host = this.getHostApi();
-    if (!host) {
-      throw new Error('LingXia bridge not available');
-    }
-
     const url = options.url || '';
     const delta = Number.isFinite(options.delta) && options.delta > 0 ? options.delta : 1;
 
@@ -415,36 +426,24 @@ export class LxNavigatorElement extends HTMLElement {
       if (!options.phoneNumber) {
         throw new Error('tel requires phone-number attribute');
       }
-      if (typeof host.device?.makePhoneCall !== 'function') {
-        throw new Error('host.device.makePhoneCall is not available');
-      }
-      await host.device.makePhoneCall({ phoneNumber: options.phoneNumber });
+      await this.callHost('device.makePhoneCall', { phoneNumber: options.phoneNumber });
       return;
     }
 
     if (options.openType === 'exit') {
-      if (typeof host.navigator?.navigateBackLxApp !== 'function') {
-        throw new Error('host.navigator.navigateBackLxApp is not available');
-      }
-      await host.navigator.navigateBackLxApp();
+      await this.callHost('navigator.navigateBackLxApp');
       return;
     }
 
     if (options.openType === 'navigateBack') {
       if (options.target === 'lxapp') {
-        if (typeof host.navigator?.navigateBackLxApp !== 'function') {
-          throw new Error('host.navigator.navigateBackLxApp is not available');
-        }
-        await host.navigator.navigateBackLxApp();
+        await this.callHost('navigator.navigateBackLxApp');
         return;
       }
       if (options.target === 'browser') {
         throw new Error('navigateBack is not supported for browser target');
       }
-      if (typeof host.navigation?.navigateBack !== 'function') {
-        throw new Error('host.navigation.navigateBack is not available');
-      }
-      await host.navigation.navigateBack({ delta });
+      await this.callHost('navigation.navigateBack', { delta });
       return;
     }
 
@@ -452,10 +451,7 @@ export class LxNavigatorElement extends HTMLElement {
       if (!url) {
         throw new Error('openUrl requires url');
       }
-      if (typeof host.device?.openUrl !== 'function') {
-        throw new Error('host.device.openUrl is not available');
-      }
-      await host.device.openUrl({ url, target: 'external' });
+      await this.callHost('device.openUrl', { url, target: 'external' });
       return;
     }
 
@@ -463,11 +459,7 @@ export class LxNavigatorElement extends HTMLElement {
       if (!options.appId) {
         throw new Error('navigateToLxApp requires app-id');
       }
-      const lxappPath = options.path || '';
-      if (typeof host.navigator?.navigateToLxApp !== 'function') {
-        throw new Error('host.navigator.navigateToLxApp is not available');
-      }
-      await host.navigator.navigateToLxApp({ appId: options.appId, path: lxappPath });
+      await this.callHost('navigator.navigateToLxApp', this.buildLxAppTarget(options));
       return;
     }
 
@@ -475,47 +467,30 @@ export class LxNavigatorElement extends HTMLElement {
       if (!url) {
         throw new Error('openUrl requires url');
       }
-      if (typeof host.device?.openUrl !== 'function') {
-        throw new Error('host.device.openUrl is not available');
-      }
-      await host.device.openUrl({ url, target: 'self' });
+      await this.callHost('device.openUrl', { url, target: 'self' });
       return;
     }
 
-    if (!url) {
-      throw new Error(`${options.openType} requires url`);
+    const target = this.buildPageTarget(options);
+    if (!target) {
+      throw new Error(`${options.openType} requires page or path`);
     }
 
     switch (options.openType) {
       case 'navigate':
-        if (typeof host.navigation?.navigateTo !== 'function') {
-          throw new Error('host.navigation.navigateTo is not available');
-        }
-        await host.navigation.navigateTo({ url });
+        await this.callHost('navigation.navigateTo', target);
         break;
       case 'redirect':
-        if (typeof host.navigation?.redirectTo !== 'function') {
-          throw new Error('host.navigation.redirectTo is not available');
-        }
-        await host.navigation.redirectTo({ url });
+        await this.callHost('navigation.redirectTo', target);
         break;
       case 'switchTab':
-        if (typeof host.navigation?.switchTab !== 'function') {
-          throw new Error('host.navigation.switchTab is not available');
-        }
-        await host.navigation.switchTab({ url });
+        await this.callHost('navigation.switchTab', target);
         break;
       case 'reLaunch':
-        if (typeof host.navigation?.reLaunch !== 'function') {
-          throw new Error('host.navigation.reLaunch is not available');
-        }
-        await host.navigation.reLaunch({ url });
+        await this.callHost('navigation.reLaunch', target);
         break;
       case 'openUrl':
-        if (typeof host.device?.openUrl !== 'function') {
-          throw new Error('host.device.openUrl is not available');
-        }
-        await host.device.openUrl({
+        await this.callHost('device.openUrl', {
           url,
           target: options.target === 'self' ? 'self' : 'external'
         });
@@ -525,6 +500,49 @@ export class LxNavigatorElement extends HTMLElement {
     }
   }
 
+  private readQuery(raw?: string | null): NavigatorQuery | undefined {
+    if (!raw) return undefined;
+    const parsed = JSON.parse(raw) as unknown;
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+      throw new Error('query must be an object');
+    }
+    return parsed as NavigatorQuery;
+  }
+
+  private buildPageTarget(options: {
+    page?: string | null;
+    path?: string | null;
+    query?: string | null;
+  }): { page?: string; path?: string; query?: NavigatorQuery } | null {
+    const page = options.page?.trim();
+    const path = options.path?.trim();
+    if (page && path) {
+      throw new Error('pass either page or path, not both');
+    }
+    if (!page && !path) return null;
+    const query = this.readQuery(options.query);
+    return {
+      ...(page ? { page } : { path: path! }),
+      ...(query ? { query } : {}),
+    };
+  }
+
+  private buildLxAppTarget(options: {
+    appId?: string | null;
+    page?: string | null;
+    path?: string | null;
+    query?: string | null;
+    envVersion?: NavigatorEnvVersion | null;
+    targetVersion?: string | null;
+  }): Record<string, unknown> {
+    const target: Record<string, unknown> = { appId: options.appId };
+    const pageTarget = this.buildPageTarget(options);
+    if (pageTarget) Object.assign(target, pageTarget);
+    if (options.envVersion) target.envVersion = options.envVersion;
+    if (options.targetVersion) target.targetVersion = options.targetVersion;
+    return target;
+  }
+
 }
 
 // Register custom element