@lingxia/elements 0.17.0 → 0.19.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-export { registerVideoComponent, LxVideoElement, type LxVideoAttributes, type LxVideoEventPayloads, type LxVideoEventHandlers, } 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 { LxNavigatorElement, type LxNavigatorAttributes, type LxNavigatorEvent, type NavigatorChannel, type NavigatorOpenType, type NavigatorQuery, type NavigatorQueryValue, type NavigatorTarget, } from "./navigator.js";
+export { registerVideoComponent, LxVideoElement, type LxVideoAttributes, type LxVideoEventPayloads, type LxVideoEventHandlers, type LxVideoQuality, } from "./video.js";
+export { registerMediaSwiperComponent, LxMediaSwiperElement, type LxMediaSwiperAttributes, type LxMediaSwiperItem, type LxMediaSwiperEventPayloads, type LxMediaSwiperEventHandlers, type LxMediaSwiperHandle, 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 LxPickerColumns, type LxPickerEvent, type LxPickerEventDetail, } from "./picker.js";
+export { LxNavigatorElement, type LxNavigatorAttributes, type LxNavigatorEvent, type NavigatorChannel, type NavigatorEdge, type NavigatorFloatPosition, type NavigatorInteraction, type NavigatorPagePlacement, type NavigatorPlacement, type NavigatorSize, type NavigatorSizeValue, type NavigatorUrlPlacement, type NavigatorWindowChrome, 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 { isHarmony, isIOS, isAndroid, isMacOS, isDesktop, getOS, } from "./platform.js";
 export { ensureComponentId, rectEquals, NativeComponentUpdateState, type Rect, } from "./component.js";

package/dist/inline-native/structure.js

@@ -569,7 +569,6 @@ export function isFallbackElement(element) {
 }
 function readElementProps(element) {
     const props = {};
-    const dataset = {};
     for (const attr of Array.from(element.attributes)) {
         if (attr.name === "data-lx-native-measuring" || attr.name === "data-lx-native-paint-hidden")
             continue;
@@ -578,11 +577,6 @@ function readElementProps(element) {
             continue;
         }
         props[camelize(name)] = attr.value;
-        if (name.startsWith("data-") && name !== "data-lx-component-id") {
-            const key = camelize(name.slice(5));
-            if (key)
-                dataset[key] = attr.value;
-        }
         if (name.startsWith("aria-")) {
             props[name] = attr.value;
         }
@@ -614,8 +608,6 @@ function readElementProps(element) {
         "muted",
         "volume",
         "progressBar",
-        "pageFuncBindings",
-        "pageFuncBindingsJson",
         "intent",
         "emphasis",
         "size",
@@ -638,10 +630,6 @@ function readElementProps(element) {
             props[key] = anyEl[key];
         }
     }
-    if (Object.keys(dataset).length > 0) {
-        props.dataset = dataset;
-        props.datasetJson = JSON.stringify(dataset);
-    }
     const ariaLabel = element.getAttribute("aria-label");
     if (ariaLabel) {
         props["aria-label"] = ariaLabel;

package/dist/media_swiper.d.ts

@@ -1,4 +1,3 @@
-type LxMediaSwiperEventHandler = (e: Event) => void;
 export type LxMediaSwiperItem = {
     id?: string;
     type: "image";
@@ -40,6 +39,25 @@ export type LxMediaSwiperTransitionEndEvent = CustomEvent<LxMediaSwiperTransitio
 export type LxMediaSwiperItemEvent = CustomEvent<LxMediaSwiperEventDetail>;
 export type LxMediaSwiperEndReachedEvent = CustomEvent<LxMediaSwiperEndReachedEventDetail>;
 export type LxMediaSwiperErrorEvent = CustomEvent<LxMediaSwiperErrorEventDetail>;
+/** What each framework callback receives: the event's `detail`. */
+export interface LxMediaSwiperEventPayloads {
+    onChange: LxMediaSwiperChangeEventDetail;
+    onTransitionEnd: LxMediaSwiperTransitionEndEventDetail;
+    onEndReached: LxMediaSwiperEndReachedEventDetail;
+    onTap: LxMediaSwiperEventDetail;
+    onVideoEnded: LxMediaSwiperEventDetail;
+    onError: LxMediaSwiperErrorEventDetail;
+}
+/** The framework callbacks: each receives its event's payload. */
+export type LxMediaSwiperEventHandlers = {
+    [K in keyof LxMediaSwiperEventPayloads]?: (payload: LxMediaSwiperEventPayloads[K]) => void;
+};
+/** Imperative control of a mounted swiper (React ref, Vue template ref). */
+export interface LxMediaSwiperHandle {
+    next(): void;
+    previous(): void;
+    goToIndex(index: number): void;
+}
 /**
  * Peek leaves part of the previous and next pages visible alongside the current
  * page so users get a hint that more content exists. A single `number` applies
@@ -57,7 +75,7 @@ export type LxMediaSwiperPeek = number | {
 };
 export type LxMediaSwiperAttributes = {
     id?: string;
-    items?: LxMediaSwiperItem[];
+    items?: readonly LxMediaSwiperItem[];
     index?: number;
     initialIndex?: number;
     loop?: boolean;
@@ -79,13 +97,12 @@ export type LxMediaSwiperAttributes = {
     className?: string;
     style?: any;
     ref?: any;
-    onChange?: LxMediaSwiperEventHandler;
-    onTransitionEnd?: LxMediaSwiperEventHandler;
-    onEndReached?: LxMediaSwiperEventHandler;
-    onTap?: LxMediaSwiperEventHandler;
-    onVideoEnded?: LxMediaSwiperEventHandler;
-    onError?: LxMediaSwiperEventHandler;
-    pageBindings?: Record<string, string>;
+    onChange?: (event: LxMediaSwiperChangeEvent) => void;
+    onTransitionEnd?: (event: LxMediaSwiperTransitionEndEvent) => void;
+    onEndReached?: (event: LxMediaSwiperEndReachedEvent) => void;
+    onTap?: (event: LxMediaSwiperItemEvent) => void;
+    onVideoEnded?: (event: LxMediaSwiperItemEvent) => void;
+    onError?: (event: LxMediaSwiperErrorEvent) => void;
 };
 declare global {
     namespace JSX {
@@ -94,7 +111,7 @@ declare global {
         }
     }
 }
-export declare class LxMediaSwiperElement extends HTMLElement {
+export declare class LxMediaSwiperElement extends HTMLElement implements LxMediaSwiperHandle {
     static get observedAttributes(): string[];
     private componentId;
     private mounted;
@@ -107,7 +124,6 @@ export declare class LxMediaSwiperElement extends HTMLElement {
     private iOSHelper?;
     private rawHandlers;
     private handlers;
-    private _pageBindings;
     private harmonyCommandSeq;
     private harmonyPendingCommand;
     private pendingHarmonyProps?;
@@ -115,7 +131,7 @@ export declare class LxMediaSwiperElement extends HTMLElement {
     private pendingHarmonyRetryCount;
     private harmonyEmbed?;
     private lastHarmonyProps?;
-    set items(value: LxMediaSwiperItem[] | string | null | undefined);
+    set items(value: readonly LxMediaSwiperItem[] | string | null | undefined);
     get items(): LxMediaSwiperItem[];
     set index(value: number | null | undefined);
     get index(): number | undefined;
@@ -123,10 +139,6 @@ export declare class LxMediaSwiperElement extends HTMLElement {
     get initialIndex(): number | undefined;
     set contentRotate(value: unknown);
     get contentRotate(): 0 | 90 | 180 | 270 | undefined;
-    set pageBindings(bindings: Record<string, string>);
-    get pageBindings(): Record<string, string>;
-    set pageFuncBindings(bindings: Record<string, string>);
-    setPageBindings(bindings: Record<string, string>): void;
     next(): void;
     previous(): void;
     goToIndex(index: number): void;
@@ -176,7 +188,5 @@ export declare class LxMediaSwiperElement extends HTMLElement {
      * to the zero-peek (full-width page) layout.
      */
     private parsePeek;
-    private collectDataset;
 }
 export declare function registerMediaSwiperComponent(): void;
-export {};

package/dist/media_swiper.js

@@ -19,7 +19,6 @@ export class LxMediaSwiperElement extends HTMLElement {
         this.boundUpdatePosition = this.updatePosition.bind(this);
         this.rawHandlers = {};
         this.handlers = {};
-        this._pageBindings = {};
         // Monotonic command counter used as the Harmony bridge fallback. Harmony's
         // Web.onNativeEmbedDataInfo channel only delivers attribute-derived props,
         // so imperative API calls have to piggyback into a prop the Builder polls.
@@ -99,20 +98,6 @@ export class LxMediaSwiperElement extends HTMLElement {
     get contentRotate() {
         return this.parseRotate(this.getAttribute("content-rotate"));
     }
-    set pageBindings(bindings) {
-        this.setPageBindings(bindings);
-    }
-    get pageBindings() {
-        return this._pageBindings;
-    }
-    set pageFuncBindings(bindings) {
-        this.setPageBindings(bindings);
-    }
-    setPageBindings(bindings) {
-        this._pageBindings = bindings !== null && bindings !== void 0 ? bindings : {};
-        if (this.isConnected)
-            this.mountOrUpdate(true);
-    }
     next() {
         this.sendCommand("next");
     }
@@ -129,8 +114,6 @@ export class LxMediaSwiperElement extends HTMLElement {
         this.upgradeProperty("index");
         this.upgradeProperty("initialIndex");
         this.upgradeProperty("contentRotate");
-        this.upgradeProperty("pageBindings");
-        this.upgradeProperty("pageFuncBindings");
         for (const prop of Object.keys(EVENT_MAP))
             this.upgradeProperty(prop);
         this.componentId = ensureComponentId(this, "lx-media-swiper", this.componentId);
@@ -228,7 +211,6 @@ export class LxMediaSwiperElement extends HTMLElement {
         var _a, _b, _c, _d, _e, _f;
         const objectFit = this.parseObjectFit(this.getAttribute("object-fit"));
         const dots = this.parseDots();
-        const dataset = this.collectDataset();
         // Always emit a normalised peek object so removing the attribute (or setting it
         // to 0) propagates as an explicit reset. JSON.stringify would drop `undefined`,
         // which makes native think peek hasn't changed and keep the old padding.
@@ -250,10 +232,6 @@ export class LxMediaSwiperElement extends HTMLElement {
             dots,
             swipeEnabled: this.getAttribute("swipe-enabled") !== "false",
             peek,
-            pageFuncBindings: this._pageBindings,
-            pageFuncBindingsJson: JSON.stringify(this._pageBindings),
-            dataset,
-            datasetJson: JSON.stringify(dataset),
         };
         return props;
     }
@@ -675,18 +653,6 @@ export class LxMediaSwiperElement extends HTMLElement {
             return undefined;
         }
     }
-    collectDataset() {
-        const dataset = {};
-        for (const attr of this.getAttributeNames()) {
-            if (!attr.startsWith("data-"))
-                continue;
-            const key = attr.slice(5).replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-            const value = this.getAttribute(attr);
-            if (key && value != null)
-                dataset[key] = value;
-        }
-        return dataset;
-    }
 }
 export function registerMediaSwiperComponent() {
     if (!customElements.get("lx-media-swiper")) {

package/dist/native_component_wrapper_shared.d.ts

@@ -1,4 +1,5 @@
-import type { NavigatorChannel, NavigatorOpenType, NavigatorTarget } from "./navigator.js";
+import type { LxPickerCascadingColumns, LxPickerColumns } from "./picker.js";
+import type { NavigatorChannel, NavigatorEdge, NavigatorFloatPosition, NavigatorInteraction, NavigatorOpenType, NavigatorPlacement, NavigatorSize, NavigatorTarget, NavigatorWindowChrome } from "./navigator.js";
 import type { NavigatorQuery } from "./navigator.js";
 import type { LxMediaSwiperItem } from "./media_swiper.js";
 import type { LxVideoQuality } from "./video.js";
@@ -10,6 +11,12 @@ export interface NavigatorNativeAttrOptions {
     openType?: NavigatorOpenType;
     target?: NavigatorTarget;
     delta?: number;
+    as?: NavigatorPlacement;
+    edge?: NavigatorEdge;
+    position?: NavigatorFloatPosition;
+    chrome?: NavigatorWindowChrome;
+    size?: NavigatorSize;
+    interaction?: NavigatorInteraction;
     appId?: string;
     query?: NavigatorQuery;
     channel?: NavigatorChannel;
@@ -21,18 +28,17 @@ export interface NavigatorNativeAttrOptions {
     hoverStayTime?: number;
 }
 export declare function buildNavigatorNativeAttrs(options: NavigatorNativeAttrOptions, extraAttrs?: Record<string, unknown>): Record<string, string>;
-export type PickerColumns = string[][] | [string[], Record<string, string[]>];
-export type PickerValue = string | string[] | undefined;
+export type PickerValue = string | readonly string[] | undefined;
 export type PickerFields = "year" | "month" | "day" | "range";
 export interface PickerNativeAttrOptions {
     id?: string;
-    columns?: PickerColumns;
+    columns?: LxPickerColumns;
     mode?: "date" | "time";
     start?: string;
     end?: string;
     fields?: PickerFields;
-    modelValue?: string | string[];
-    value?: string | string[];
+    modelValue?: string | readonly string[];
+    value?: string | readonly string[];
     cancelText?: string;
     cancelTextColor?: string;
     cancelButtonColor?: string;
@@ -41,10 +47,10 @@ export interface PickerNativeAttrOptions {
     confirmButtonColor?: string;
 }
 export declare function isPickerDateMode(mode?: "date" | "time"): boolean;
-export declare function isPickerCascading(columns?: PickerColumns): columns is [string[], Record<string, string[]>];
-export declare function isPickerSingle(columns?: PickerColumns): boolean;
-export declare function getPickerIndexFromValue(columns: PickerColumns | undefined, value: PickerValue): number | number[];
-export declare function getPickerValueFromIndex(columns: PickerColumns | undefined, index: number | number[]): string | string[];
+export declare function isPickerCascading(columns?: LxPickerColumns): columns is LxPickerCascadingColumns;
+export declare function isPickerSingle(columns?: LxPickerColumns): boolean;
+export declare function getPickerIndexFromValue(columns: LxPickerColumns | undefined, value: PickerValue): number | number[];
+export declare function getPickerValueFromIndex(columns: LxPickerColumns | undefined, index: number | number[]): string | string[];
 export declare function getPickerDisplayText(value: PickerValue, fields?: PickerFields): string;
 export declare function buildPickerNativeAttrs(options: PickerNativeAttrOptions, extraAttrs?: Record<string, unknown>): Record<string, string>;
 export declare const VIDEO_DOM_EVENT_MAP: {
@@ -74,8 +80,8 @@ export interface VideoNativeAttrOptions {
     progressBar?: boolean;
     live?: boolean;
     volume?: string | number;
-    qualities?: LxVideoQuality[];
-    playbackRates?: number[];
+    qualities?: readonly LxVideoQuality[];
+    playbackRates?: readonly number[];
 }
 export declare function buildVideoNativeAttrs(options: VideoNativeAttrOptions, extraAttrs?: Record<string, unknown>): Record<string, string | number>;
 export declare const MEDIA_SWIPER_DOM_EVENT_MAP: {
@@ -88,7 +94,7 @@ export declare const MEDIA_SWIPER_DOM_EVENT_MAP: {
 };
 export interface MediaSwiperNativeAttrOptions {
     id?: string;
-    items?: LxMediaSwiperItem[];
+    items?: readonly LxMediaSwiperItem[];
     index?: number;
     initialIndex?: number;
     loop?: boolean;

package/dist/native_component_wrapper_shared.js

@@ -39,6 +39,18 @@ export function buildNavigatorNativeAttrs(options, extraAttrs = {}) {
         result.page = options.page;
     if (options.target)
         result.target = options.target;
+    if (options.as)
+        result.as = options.as;
+    if (options.edge)
+        result.edge = options.edge;
+    if (options.position)
+        result.position = options.position;
+    if (options.chrome)
+        result.chrome = options.chrome;
+    if (options.size)
+        result.size = JSON.stringify(options.size);
+    if (options.interaction)
+        result.interaction = JSON.stringify(options.interaction);
     if (options.appId)
         result["app-id"] = options.appId;
     if (options.query)

package/dist/navigator.d.ts

@@ -1,5 +1,21 @@
-export type NavigatorOpenType = 'navigate' | 'redirect' | 'navigateBack' | 'reLaunch' | 'switchTab' | 'exit' | 'openUrl' | 'tel';
-export type NavigatorTarget = 'self' | 'lxapp' | 'browser';
+export type NavigatorOpenType = 'navigate' | 'redirect' | 'navigateBack' | 'reLaunch' | 'switchTab' | 'exit' | 'tel';
+export type NavigatorTarget = 'page' | 'lxapp' | 'url';
+export type NavigatorUrlPlacement = 'external' | 'tab' | 'aside';
+export type NavigatorPagePlacement = 'float' | 'window';
+export type NavigatorPlacement = NavigatorUrlPlacement | NavigatorPagePlacement;
+export type NavigatorEdge = 'left' | 'right' | 'top' | 'bottom';
+export type NavigatorFloatPosition = 'center' | 'top' | 'bottom' | 'left' | 'right';
+export type NavigatorWindowChrome = 'system' | 'full';
+export type NavigatorSizeValue = number | `${number}%`;
+export type NavigatorSize = {
+    width?: NavigatorSizeValue;
+    height?: NavigatorSizeValue;
+};
+export type NavigatorInteraction = {
+    closeButton?: boolean;
+    dismiss?: 'tapOutside' | 'manual';
+    modal?: boolean;
+};
 export type NavigatorQueryValue = string | number | boolean | null | undefined;
 export type NavigatorQuery = Record<string, NavigatorQueryValue>;
 export type NavigatorChannel = 'release' | 'draft';
@@ -17,6 +33,12 @@ export type LxNavigatorAttributes = {
     'open-type'?: NavigatorOpenType;
     target?: NavigatorTarget;
     delta?: number;
+    as?: NavigatorPlacement;
+    edge?: NavigatorEdge;
+    position?: NavigatorFloatPosition;
+    chrome?: NavigatorWindowChrome;
+    size?: string;
+    interaction?: string;
     'app-id'?: string;
     channel?: NavigatorChannel;
     'target-version'?: string;
@@ -75,17 +97,15 @@ export declare class LxNavigatorElement extends HTMLElement {
     private removeHoverClass;
     private clearHoverTimer;
     private handleClick;
-    /**
-     * Auto-infer navigation target based on context
-     * Priority: explicit target > appId > HTTPS URL > default (self)
-     */
-    private inferTarget;
     private navigate;
     private dispatchSuccess;
     private resolveErrorMessage;
     private dispatchFail;
+    private bridge;
     private callHost;
+    private callSurface;
     private performNavigation;
+    private readJsonObject;
     private readQuery;
     private buildPageTarget;
     private buildLxAppTarget;

package/dist/navigator.js

@@ -43,6 +43,12 @@ export class LxNavigatorElement extends HTMLElement {
             "open-type",
             "target",
             "delta",
+            "as",
+            "edge",
+            "position",
+            "chrome",
+            "size",
+            "interaction",
             "app-id",
             "channel",
             "target-version",
@@ -158,55 +164,33 @@ export class LxNavigatorElement extends HTMLElement {
         }
     }
     handleClick(e) {
+        var _a;
         e.preventDefault();
-        const url = this.getAttribute('url') || '';
-        const page = this.getAttribute('page');
-        // Read the removed attribute only to provide a forward-only runtime error
-        // for untyped HTML callers instead of silently ignoring it.
-        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 channel = this.getAttribute('channel');
-        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({
+        const attr = (name) => this.getAttribute(name);
+        const url = attr('url') || '';
+        const appId = attr('app-id');
+        const options = {
             url,
-            page,
-            path,
-            query,
-            openType,
-            target,
-            delta,
+            page: attr('page'),
+            // Read the removed attribute only to provide a forward-only runtime error
+            // for untyped HTML callers instead of silently ignoring it.
+            path: attr('path'),
+            query: attr('query'),
+            openType: (attr('open-type') || 'navigate'),
+            target: (_a = attr('target')) !== null && _a !== void 0 ? _a : (appId ? 'lxapp' : url ? 'url' : 'page'),
+            delta: parseInt(attr('delta') || '1', 10),
+            placement: attr('as'),
+            edge: attr('edge'),
+            position: attr('position'),
+            chrome: attr('chrome'),
+            size: attr('size'),
+            interaction: attr('interaction'),
             appId,
-            channel,
-            targetVersion,
-            phoneNumber
-        });
-    }
-    /**
-     * Auto-infer navigation target based on context
-     * Priority: explicit target > appId > HTTPS URL > default (self)
-     */
-    inferTarget(explicitTarget, url, appId) {
-        // 1. Explicit target has highest priority
-        if (explicitTarget) {
-            return explicitTarget;
-        }
-        // 2. If appId is specified, target is another lxapp
-        if (appId) {
-            return 'lxapp';
-        }
-        // 3. If URL starts with http:// or https://, open in browser
-        if (/^https?:\/\//i.test(url)) {
-            return 'browser';
-        }
-        // 4. Default: navigate within current lxapp
-        return 'self';
+            channel: attr('channel'),
+            targetVersion: attr('target-version'),
+            phoneNumber: attr('phone-number'),
+        };
+        void this.navigate(options);
     }
     async navigate(options) {
         try {
@@ -273,17 +257,24 @@ export class LxNavigatorElement extends HTMLElement {
         });
         this.dispatchEvent(completeEvent);
     }
-    callHost(route, params) {
+    bridge() {
         const bridge = window.LingXiaBridge;
         if (!bridge || typeof bridge.invoke !== 'function') {
-            return Promise.reject(new Error('LingXiaBridge is not available'));
+            throw new Error('LingXiaBridge is not available');
         }
-        return bridge.invoke(route, params).then(() => undefined);
+        return bridge;
+    }
+    async callHost(route, params) {
+        await this.bridge().invoke(route, params);
+    }
+    // Placements run through Logic's lx.surface, which owns surface handles.
+    async callSurface(method, params) {
+        await this.bridge().raw.call(`surface.${method}`, params);
     }
     async performNavigation(options) {
-        const url = options.url || '';
+        const { url, placement } = options;
         const delta = Number.isFinite(options.delta) && options.delta > 0 ? options.delta : 1;
-        if (options.path !== null && options.path !== undefined) {
+        if (options.path !== null) {
             throw new Error('path is not supported; pass the configured page name in page');
         }
         if (options.openType === 'tel') {
@@ -300,39 +291,71 @@ export class LxNavigatorElement extends HTMLElement {
         if (options.openType === 'navigateBack') {
             if (options.target === 'lxapp') {
                 await this.callHost('navigator.navigateBackApp');
-                return;
             }
-            if (options.target === 'browser') {
-                throw new Error('navigateBack is not supported for browser target');
+            else {
+                await this.callHost('navigation.navigateBack', { delta });
             }
-            await this.callHost('navigation.navigateBack', { delta });
             return;
         }
-        if (options.target === 'browser') {
-            if (!url) {
-                throw new Error('openUrl requires url');
-            }
-            await this.callHost('device.openUrl', { url, target: 'external' });
-            return;
-        }
-        if (options.target === 'lxapp') {
-            if (!options.appId) {
-                throw new Error('navigateToApp requires app-id');
-            }
-            await this.callHost('navigator.navigateToApp', this.buildLxAppTarget(options));
-            return;
-        }
-        if (options.target === 'self' && /^https?:\/\//i.test(url)) {
-            if (!url) {
-                throw new Error('openUrl requires url');
+        switch (options.target) {
+            case 'url': {
+                if (!url) {
+                    throw new Error('target url requires url');
+                }
+                if (!placement || placement === 'external') {
+                    await this.callHost('device.openUrl', { url, target: 'external' });
+                    return;
+                }
+                if (placement !== 'tab' && placement !== 'aside') {
+                    throw new Error(`a url opens as external, tab, or aside; got ${placement}`);
+                }
+                const surfaceOptions = { as: placement };
+                if (options.edge)
+                    surfaceOptions.edge = options.edge;
+                const size = this.readJsonObject('size', options.size);
+                if (size)
+                    surfaceOptions.size = size;
+                await this.callSurface('openUrl', { url, options: surfaceOptions });
+                return;
             }
-            await this.callHost('device.openUrl', { url, target: 'self' });
-            return;
+            case 'lxapp':
+                if (!options.appId) {
+                    throw new Error('target lxapp requires app-id');
+                }
+                if (placement) {
+                    throw new Error('as is not supported for target lxapp');
+                }
+                await this.callHost('navigator.navigateToApp', this.buildLxAppTarget(options));
+                return;
+            case 'page':
+                break;
+            default:
+                throw new Error(`Unsupported target: ${options.target}`);
         }
         const target = this.buildPageTarget(options);
         if (!target) {
             throw new Error(`${options.openType} requires page`);
         }
+        if (placement) {
+            if (placement !== 'float' && placement !== 'window') {
+                throw new Error(`a page opens as float or window; got ${placement}`);
+            }
+            const surfaceOptions = { as: placement };
+            if (target.query)
+                surfaceOptions.query = target.query;
+            if (options.position)
+                surfaceOptions.position = options.position;
+            if (options.chrome)
+                surfaceOptions.chrome = options.chrome;
+            const size = this.readJsonObject('size', options.size);
+            if (size)
+                surfaceOptions.size = size;
+            const interaction = this.readJsonObject('interaction', options.interaction);
+            if (interaction)
+                surfaceOptions.interaction = interaction;
+            await this.callSurface('openPage', { page: target.page, options: surfaceOptions });
+            return;
+        }
         switch (options.openType) {
             case 'navigate':
                 await this.callHost('navigation.navigateTo', target);
@@ -346,25 +369,22 @@ export class LxNavigatorElement extends HTMLElement {
             case 'reLaunch':
                 await this.callHost('navigation.reLaunch', target);
                 break;
-            case 'openUrl':
-                await this.callHost('device.openUrl', {
-                    url,
-                    target: options.target === 'self' ? 'self' : 'external'
-                });
-                break;
             default:
                 throw new Error(`Unsupported openType: ${options.openType}`);
         }
     }
-    readQuery(raw) {
+    readJsonObject(name, 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');
+            throw new Error(`${name} must be an object`);
         }
         return parsed;
     }
+    readQuery(raw) {
+        return this.readJsonObject('query', raw);
+    }
     buildPageTarget(options) {
         var _a;
         const page = (_a = options.page) === null || _a === void 0 ? void 0 : _a.trim();