@lingxia/elements 0.17.0 → 0.19.0

package/src/navigator.ts

@@ -8,13 +8,26 @@ export type NavigatorOpenType =
   | 'reLaunch'      // Restart app with new page
   | 'switchTab'     // Switch to tab page
   | 'exit'          // Exit current lxapp
-  | 'openUrl'       // Open external URL or lxapp
   | 'tel';          // Make a phone call
 
-export type NavigatorTarget =
-  | 'self'          // Navigate within current lxapp (default)
-  | 'lxapp'         // Open another lxapp
-  | 'browser';      // Open in external browser
+// What to open. Inferred when omitted: app-id → lxapp, url → url, else page.
+export type NavigatorTarget = 'page' | 'lxapp' | 'url';
+
+// Where to open it; mirrors `as` of lx.surface.openUrl / openPage.
+// A url defaults to `external`; a page without `as` follows open-type.
+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>;
@@ -31,17 +44,46 @@ export interface LxNavigatorEvent extends CustomEvent<LxNavigatorEventDetail> {
 
 type LingXiaBridgeCall = {
   invoke(route: string, params?: unknown): Promise<unknown>;
+  raw: { call(method: string, params?: unknown): Promise<unknown> };
+};
+
+type NavigateOptions = {
+  url: string;
+  page: string | null;
+  path: string | null;
+  query: string | null;
+  openType: NavigatorOpenType;
+  target: NavigatorTarget;
+  delta: number;
+  placement: NavigatorPlacement | null;
+  edge: string | null;
+  position: string | null;
+  chrome: string | null;
+  size: string | null;
+  interaction: string | null;
+  appId: string | null;
+  channel: NavigatorChannel | null;
+  targetVersion: string | null;
+  phoneNumber: string | null;
 };
 
 export type LxNavigatorAttributes = {
   // Navigation
-  url?: string;                    // Browser URL for openUrl/browser target
+  url?: string;                    // http(s) URL
   page?: string;                   // Configured page name from lxapp.json; routes are unsupported
   query?: string;                  // JSON-encoded page query params
   'open-type'?: NavigatorOpenType; // Navigation type
-  target?: NavigatorTarget;        // Navigation target (auto-inferred if not specified)
+  target?: NavigatorTarget;        // What to open (inferred if not specified)
   delta?: number;                  // Pages to go back (for navigateBack)
 
+  // Placement
+  as?: NavigatorPlacement;
+  edge?: NavigatorEdge;                // as="aside"
+  position?: NavigatorFloatPosition;   // as="float"
+  chrome?: NavigatorWindowChrome;      // as="window"
+  size?: string;                       // JSON-encoded NavigatorSize
+  interaction?: string;                // JSON-encoded NavigatorInteraction (float/window)
+
   // Open external lxapp
   'app-id'?: string;              // Target lxapp ID
   channel?: NavigatorChannel; // Target lxapp channel
@@ -88,6 +130,12 @@ export class LxNavigatorElement extends HTMLElement {
       "open-type",
       "target",
       "delta",
+      "as",
+      "edge",
+      "position",
+      "chrome",
+      "size",
+      "interaction",
       "app-id",
       "channel",
       "target-version",
@@ -252,80 +300,34 @@ export class LxNavigatorElement extends HTMLElement {
 
   private handleClick(e: MouseEvent) {
     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') 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 channel = this.getAttribute('channel') as NavigatorChannel | null;
-    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: string) => this.getAttribute(name);
+    const url = attr('url') || '';
+    const appId = attr('app-id');
+    const options: NavigateOptions = {
       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') as NavigatorOpenType,
+      target: (attr('target') as NavigatorTarget | null) ?? (appId ? 'lxapp' : url ? 'url' : 'page'),
+      delta: parseInt(attr('delta') || '1', 10),
+      placement: attr('as') as NavigatorPlacement | null,
+      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)
-   */
-  private inferTarget(
-    explicitTarget: NavigatorTarget | null,
-    url: string,
-    appId: string | null
-  ): NavigatorTarget {
-    // 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') as NavigatorChannel | null,
+      targetVersion: attr('target-version'),
+      phoneNumber: attr('phone-number'),
+    };
+    void this.navigate(options);
   }
 
-  private async navigate(options: {
-    url: string;
-    page?: string | null;
-    path?: string | null;
-    query?: string | null;
-    openType: NavigatorOpenType;
-    target: NavigatorTarget;
-    delta: number;
-    appId?: string | null;
-    channel?: NavigatorChannel | null;
-    targetVersion?: string | null;
-    phoneNumber?: string | null;
-  }) {
+  private async navigate(options: NavigateOptions) {
     try {
       await this.performNavigation(options);
       this.dispatchSuccess();
@@ -398,31 +400,28 @@ export class LxNavigatorElement extends HTMLElement {
     this.dispatchEvent(completeEvent);
   }
 
-  private callHost(route: string, params?: unknown): Promise<void> {
+  private bridge(): LingXiaBridgeCall {
     const bridge = (window as unknown as { LingXiaBridge?: LingXiaBridgeCall }).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;
   }
 
-  private async performNavigation(options: {
-    url: string;
-    page?: string | null;
-    path?: string | null;
-    query?: string | null;
-    openType: NavigatorOpenType;
-    target: NavigatorTarget;
-    delta: number;
-    appId?: string | null;
-    channel?: NavigatorChannel | null;
-    targetVersion?: string | null;
-    phoneNumber?: string | null;
-  }) {
-    const url = options.url || '';
+  private async callHost(route: string, params?: unknown): Promise<void> {
+    await this.bridge().invoke(route, params);
+  }
+
+  // Placements run through Logic's lx.surface, which owns surface handles.
+  private async callSurface(method: 'openPage' | 'openUrl', params: unknown): Promise<void> {
+    await this.bridge().raw.call(`surface.${method}`, params);
+  }
+
+  private async performNavigation(options: NavigateOptions) {
+    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');
     }
 
@@ -442,44 +441,67 @@ 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');
+    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: Record<string, unknown> = { 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: 'external' });
-      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}`);
     }
 
-    if (options.target === 'lxapp') {
-      if (!options.appId) {
-        throw new Error('navigateToApp requires app-id');
-      }
-      await this.callHost('navigator.navigateToApp', this.buildLxAppTarget(options));
-      return;
+    const target = this.buildPageTarget(options);
+    if (!target) {
+      throw new Error(`${options.openType} requires page`);
     }
 
-    if (options.target === 'self' && /^https?:\/\//i.test(url)) {
-      if (!url) {
-        throw new Error('openUrl requires url');
+    if (placement) {
+      if (placement !== 'float' && placement !== 'window') {
+        throw new Error(`a page opens as float or window; got ${placement}`);
       }
-      await this.callHost('device.openUrl', { url, target: 'self' });
+      const surfaceOptions: Record<string, unknown> = { 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;
     }
 
-    const target = this.buildPageTarget(options);
-    if (!target) {
-      throw new Error(`${options.openType} requires page`);
-    }
-
     switch (options.openType) {
       case 'navigate':
         await this.callHost('navigation.navigateTo', target);
@@ -493,24 +515,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}`);
     }
   }
 
-  private readQuery(raw?: string | null): NavigatorQuery | undefined {
+  private readJsonObject(name: string, raw?: string | null): Record<string, unknown> | 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');
+      throw new Error(`${name} must be an object`);
     }
-    return parsed as NavigatorQuery;
+    return parsed as Record<string, unknown>;
+  }
+
+  private readQuery(raw?: string | null): NavigatorQuery | undefined {
+    return this.readJsonObject('query', raw) as NavigatorQuery | undefined;
   }
 
   private buildPageTarget(options: {

package/src/picker.ts

@@ -19,8 +19,13 @@ function hasNativePicker(): boolean {
 const HARMONY_PROPS_PREFIX = "data:application/json,";
 
 // Type definitions
-export type LxPickerColumn = string[];
-export type LxPickerCascadingColumns = [string[], Record<string, string[]>];
+export type LxPickerColumn = readonly string[];
+export type LxPickerCascadingColumns = readonly [
+  readonly string[],
+  Readonly<Record<string, readonly string[]>>,
+];
+/** Selector or multi-column columns, or cascading keys and their options. */
+export type LxPickerColumns = readonly LxPickerColumn[] | LxPickerCascadingColumns;
 type LxPickerViewEventHandler = (e: LxPickerEvent) => void;
 
 export interface LxPickerEventDetail {
@@ -37,7 +42,7 @@ export interface LxPickerEvent extends CustomEvent<LxPickerEventDetail> {
 export type LxPickerAttributes = {
   id?: string;
   mode?: 'selector' | 'multiSelector' | 'cascading' | 'date' | 'time';
-  columns?: LxPickerColumn[] | LxPickerCascadingColumns;
+  columns?: LxPickerColumns;
   defaultIndex?: number | number[];
   value?: string;
   start?: string;
@@ -54,7 +59,6 @@ export type LxPickerAttributes = {
   ref?: any;
   onChange?: LxPickerViewEventHandler;
   onScroll?: LxPickerViewEventHandler;
-  pageBindings?: Record<string, string>;
 };
 
 declare global {
@@ -91,7 +95,6 @@ export class LxPickerElement extends HTMLElement {
   private unregister?: () => void;
   private _handlers: Record<string, EventListenerOrEventListenerObject> = {};
   private rawHandlers: Record<string, EventListenerOrEventListenerObject> = {};
-  private _pageBindings: Record<string, string> = {};
   private harmonyEmbed?: HTMLEmbedElement;
   private lastHarmonyProps?: string;
   private webCleanup?: () => void;
@@ -112,19 +115,7 @@ export class LxPickerElement extends HTMLElement {
     self[propName] = value;
   }
 
-  set pageBindings(bindings: Record<string, string>) {
-    this._pageBindings = bindings ?? {};
-    if (this.isConnected) {
-      this.mountPicker();
-    }
-  }
-
-  get pageBindings(): Record<string, string> {
-    return this._pageBindings;
-  }
-
   connectedCallback() {
-    this.upgradeProperty("pageBindings");
     this.upgradeProperty("onchange");
 
     this.componentId = ensureComponentId(this, "lx-picker", this.componentId);
@@ -266,42 +257,10 @@ export class LxPickerElement extends HTMLElement {
     this.attrObserver = undefined;
   }
 
-  private dataAttrToDatasetKey(attr: string): string {
-    const raw = attr.slice(5).trim();
-    if (!raw) return "";
-    const parts = raw.split("-").filter(Boolean);
-    if (parts.length === 0) return "";
-    return parts
-      .map((segment, index) => {
-        if (index === 0) return segment.toLowerCase();
-        return segment.charAt(0).toUpperCase() + segment.slice(1);
-      })
-      .join("");
-  }
-
-  private collectDataset(): Record<string, string> {
-    const dataset: Record<string, string> = {};
-    const attrs = this.getAttributeNames();
-    for (const attr of attrs) {
-      if (!attr.startsWith("data-")) continue;
-      const key = this.dataAttrToDatasetKey(attr);
-      if (!key) continue;
-      const value = this.getAttribute(attr);
-      if (value == null) continue;
-      dataset[key] = value;
-    }
-    return dataset;
-  }
-
   private async mountPicker() {
     if (!this.componentId) return;
 
     const props = this.collectProps();
-    const dataset = this.collectDataset();
-    props.dataset = dataset;
-    props.datasetJson = JSON.stringify(dataset);
-    props.pageFuncBindings = this._pageBindings;
-    props.pageFuncBindingsJson = JSON.stringify(this._pageBindings);
     const { rect, cornerRadius } = measureElement(this);
 
     if (isHarmony()) {

package/src/video.ts

@@ -51,8 +51,8 @@ export type LxVideoAttributes = {
   progressBar?: boolean;
   live?: boolean;
   volume?: string | number;
-  qualities?: LxVideoQuality[];
-  playbackRates?: number[];
+  qualities?: readonly LxVideoQuality[];
+  playbackRates?: readonly number[];
   className?: string;
   style?: unknown;
   ref?: unknown;
@@ -70,7 +70,6 @@ export type LxVideoAttributes = {
   onQualityChange?: (event: CustomEvent<LxVideoEventPayloads["onQualityChange"]>) => void;
   onRateChange?: (event: CustomEvent<LxVideoEventPayloads["onRateChange"]>) => void;
   onVolumeChange?: (event: CustomEvent<LxVideoEventPayloads["onVolumeChange"]>) => void;
-  pageBindings?: Record<string, string>;
 };
 
 type LxObjectFit = "cover" | "contain" | "fill" | "fit";
@@ -114,24 +113,6 @@ export class LxVideoElement extends HTMLElement {
   private unregister?: () => void;
   private handlers: Record<string, EventListenerOrEventListenerObject> = {};
   private rawHandlers: Record<string, EventListenerOrEventListenerObject> = {};
-  private bindings: Record<string, string> = {};
-
-  set pageBindings(bindings: Record<string, string>) {
-    this.bindings = bindings ?? {};
-    if (this.isConnected) this.requestRootCompile();
-  }
-
-  get pageBindings(): Record<string, string> {
-    return this.bindings;
-  }
-
-  get pageFuncBindings(): Record<string, string> {
-    return this.bindings;
-  }
-
-  get pageFuncBindingsJson(): string {
-    return JSON.stringify(this.bindings);
-  }
 
   set src(value: string | null | undefined) {
     if (value == null) {
@@ -160,7 +141,6 @@ export class LxVideoElement extends HTMLElement {
 
   connectedCallback(): void {
     for (const property of [
-      "pageBindings",
       "contentRotate",
       "src",
       "onplayrequest",