@lingxia/elements 0.18.0 → 0.20.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-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 { 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";

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,3 +1,4 @@
+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";
@@ -27,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;
@@ -47,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: {
@@ -80,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: {
@@ -94,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/picker.d.ts

@@ -1,5 +1,10 @@
-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 {
     index?: number | number[];
@@ -13,7 +18,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;
@@ -30,7 +35,6 @@ export type LxPickerAttributes = {
     ref?: any;
     onChange?: LxPickerViewEventHandler;
     onScroll?: LxPickerViewEventHandler;
-    pageBindings?: Record<string, string>;
 };
 declare global {
     namespace JSX {
@@ -46,7 +50,6 @@ export declare class LxPickerElement extends HTMLElement {
     private unregister?;
     private _handlers;
     private rawHandlers;
-    private _pageBindings;
     private harmonyEmbed?;
     private lastHarmonyProps?;
     private webCleanup?;
@@ -54,8 +57,6 @@ export declare class LxPickerElement extends HTMLElement {
     private removeLayoutInvalidationListener?;
     private readonly layoutInvalidationListener;
     private upgradeProperty;
-    set pageBindings(bindings: Record<string, string>);
-    get pageBindings(): Record<string, string>;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;
@@ -65,8 +66,6 @@ export declare class LxPickerElement extends HTMLElement {
     private shouldRefreshForAttribute;
     private startAttrObserver;
     private stopAttrObserver;
-    private dataAttrToDatasetKey;
-    private collectDataset;
     private mountPicker;
     set onchange(cb: EventListener | null);
     get onchange(): EventListener | null;

package/dist/picker.js

@@ -19,7 +19,6 @@ export class LxPickerElement extends HTMLElement {
         this.mounted = false;
         this._handlers = {};
         this.rawHandlers = {};
-        this._pageBindings = {};
         this.layoutInvalidationListener = {
             handleEvent: () => {
                 if (!this.isConnected || isHarmony() || !hasNativePicker())
@@ -54,17 +53,7 @@ export class LxPickerElement extends HTMLElement {
         delete self[propName];
         self[propName] = value;
     }
-    set pageBindings(bindings) {
-        this._pageBindings = bindings !== null && bindings !== void 0 ? bindings : {};
-        if (this.isConnected) {
-            this.mountPicker();
-        }
-    }
-    get pageBindings() {
-        return this._pageBindings;
-    }
     connectedCallback() {
-        this.upgradeProperty("pageBindings");
         this.upgradeProperty("onchange");
         this.componentId = ensureComponentId(this, "lx-picker", this.componentId);
         if (!this.componentId)
@@ -203,46 +192,10 @@ export class LxPickerElement extends HTMLElement {
         this.attrObserver.disconnect();
         this.attrObserver = undefined;
     }
-    dataAttrToDatasetKey(attr) {
-        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("");
-    }
-    collectDataset() {
-        const dataset = {};
-        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;
-    }
     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()) {
             this.ensureHarmonyEmbed(rect, props, cornerRadius);

package/dist/video.d.ts

@@ -69,8 +69,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;
@@ -88,7 +88,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>;
 };
 declare global {
     namespace JSX {
@@ -110,11 +109,6 @@ export declare class LxVideoElement extends HTMLElement {
     private unregister?;
     private handlers;
     private rawHandlers;
-    private bindings;
-    set pageBindings(bindings: Record<string, string>);
-    get pageBindings(): Record<string, string>;
-    get pageFuncBindings(): Record<string, string>;
-    get pageFuncBindingsJson(): string;
     set src(value: string | null | undefined);
     get src(): string | null;
     set contentRotate(value: unknown);

package/dist/video.js

@@ -15,7 +15,6 @@ export class LxVideoElement extends HTMLElement {
         this.islandPlaybackIdle = false;
         this.handlers = {};
         this.rawHandlers = {};
-        this.bindings = {};
     }
     static get observedAttributes() {
         return [
@@ -35,20 +34,6 @@ export class LxVideoElement extends HTMLElement {
             "playback-rates",
         ];
     }
-    set pageBindings(bindings) {
-        this.bindings = bindings !== null && bindings !== void 0 ? bindings : {};
-        if (this.isConnected)
-            this.requestRootCompile();
-    }
-    get pageBindings() {
-        return this.bindings;
-    }
-    get pageFuncBindings() {
-        return this.bindings;
-    }
-    get pageFuncBindingsJson() {
-        return JSON.stringify(this.bindings);
-    }
     set src(value) {
         if (value == null) {
             this.removeAttribute("src");
@@ -74,7 +59,6 @@ export class LxVideoElement extends HTMLElement {
     }
     connectedCallback() {
         for (const property of [
-            "pageBindings",
             "contentRotate",
             "src",
             "onplayrequest",

package/package.json

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

package/src/index.ts

@@ -4,6 +4,7 @@ export {
   type LxVideoAttributes,
   type LxVideoEventPayloads,
   type LxVideoEventHandlers,
+  type LxVideoQuality,
 } from "./video.js";
 
 export {
@@ -11,6 +12,9 @@ export {
   LxMediaSwiperElement,
   type LxMediaSwiperAttributes,
   type LxMediaSwiperItem,
+  type LxMediaSwiperEventPayloads,
+  type LxMediaSwiperEventHandlers,
+  type LxMediaSwiperHandle,
   type LxMediaSwiperChangeEvent,
   type LxMediaSwiperChangeEventDetail,
   type LxMediaSwiperTransitionEndEvent,
@@ -31,6 +35,7 @@ export {
   type LxPickerAttributes,
   type LxPickerColumn,
   type LxPickerCascadingColumns,
+  type LxPickerColumns,
   type LxPickerEvent,
   type LxPickerEventDetail,
 } from "./picker.js";

package/src/inline-native/structure.ts

@@ -687,7 +687,6 @@ export function isFallbackElement(element: Element): boolean {
 
 function readElementProps(element: Element): Record<string, unknown> {
   const props: Record<string, unknown> = {};
-  const dataset: Record<string, string> = {};
   for (const attr of Array.from(element.attributes)) {
     if (attr.name === "data-lx-native-measuring" || attr.name === "data-lx-native-paint-hidden") continue;
     const name = attr.name;
@@ -695,10 +694,6 @@ function readElementProps(element: Element): Record<string, unknown> {
       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;
     }
@@ -730,8 +725,6 @@ function readElementProps(element: Element): Record<string, unknown> {
     "muted",
     "volume",
     "progressBar",
-    "pageFuncBindings",
-    "pageFuncBindingsJson",
     "intent",
     "emphasis",
     "size",
@@ -754,10 +747,6 @@ function readElementProps(element: Element): Record<string, unknown> {
       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/src/media_swiper.ts

@@ -7,8 +7,6 @@ import { ensureComponentId, NativeComponentUpdateState, iOSNativeComponentHelper
 import { measureElement } from "./dom.js";
 import { isAndroid, isHarmony, isIOS } from "./platform.js";
 
-type LxMediaSwiperEventHandler = (e: Event) => void;
-
 export type LxMediaSwiperItem =
   | {
       id?: string;
@@ -66,6 +64,28 @@ 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
@@ -81,7 +101,7 @@ export type LxMediaSwiperPeek = number | { previous?: number; next?: number };
 
 export type LxMediaSwiperAttributes = {
   id?: string;
-  items?: LxMediaSwiperItem[];
+  items?: readonly LxMediaSwiperItem[];
   index?: number;
   initialIndex?: number;
   loop?: boolean;
@@ -100,13 +120,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;
 };
 
 type ObjectFit = "cover" | "contain" | "fill" | "fit";
@@ -129,7 +148,7 @@ declare global {
   }
 }
 
-export class LxMediaSwiperElement extends HTMLElement {
+export class LxMediaSwiperElement extends HTMLElement implements LxMediaSwiperHandle {
   static get observedAttributes() {
     return [
       "id",
@@ -163,7 +182,6 @@ export class LxMediaSwiperElement extends HTMLElement {
   private iOSHelper?: iOSNativeComponentHelper;
   private rawHandlers: Record<string, EventListenerOrEventListenerObject> = {};
   private handlers: Record<string, EventListenerOrEventListenerObject> = {};
-  private _pageBindings: Record<string, string> = {};
   // 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.
@@ -179,7 +197,7 @@ export class LxMediaSwiperElement extends HTMLElement {
   private harmonyEmbed?: HTMLEmbedElement;
   private lastHarmonyProps?: string;
 
-  set items(value: LxMediaSwiperItem[] | string | null | undefined) {
+  set items(value: readonly LxMediaSwiperItem[] | string | null | undefined) {
     if (typeof value === "string") {
       const trimmed = value.trim();
       if (trimmed.length === 0) {
@@ -237,23 +255,6 @@ export class LxMediaSwiperElement extends HTMLElement {
     return this.parseRotate(this.getAttribute("content-rotate"));
   }
 
-  set pageBindings(bindings: Record<string, string>) {
-    this.setPageBindings(bindings);
-  }
-
-  get pageBindings(): Record<string, string> {
-    return this._pageBindings;
-  }
-
-  set pageFuncBindings(bindings: Record<string, string>) {
-    this.setPageBindings(bindings);
-  }
-
-  setPageBindings(bindings: Record<string, string>) {
-    this._pageBindings = bindings ?? {};
-    if (this.isConnected) this.mountOrUpdate(true);
-  }
-
   next(): void {
     this.sendCommand("next");
   }
@@ -272,8 +273,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);
@@ -377,7 +376,6 @@ export class LxMediaSwiperElement extends HTMLElement {
   private collectProps(): Record<string, unknown> {
     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.
@@ -399,10 +397,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;
   }
@@ -809,16 +803,6 @@ export class LxMediaSwiperElement extends HTMLElement {
     }
   }
 
-  private collectDataset(): Record<string, string> {
-    const dataset: Record<string, string> = {};
-    for (const attr of this.getAttributeNames()) {
-      if (!attr.startsWith("data-")) continue;
-      const key = attr.slice(5).replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
-      const value = this.getAttribute(attr);
-      if (key && value != null) dataset[key] = value;
-    }
-    return dataset;
-  }
 }
 
 export function registerMediaSwiperComponent() {

package/src/native_component_wrapper_shared.ts

@@ -1,3 +1,4 @@
+import type { LxPickerCascadingColumns, LxPickerColumns } from "./picker.js";
 import type {
   NavigatorChannel,
   NavigatorEdge,
@@ -96,19 +97,18 @@ export function buildNavigatorNativeAttrs(
   return result;
 }
 
-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;
@@ -121,16 +121,16 @@ export function isPickerDateMode(mode?: "date" | "time"): boolean {
   return mode === "date" || mode === "time";
 }
 
-export function isPickerCascading(columns?: PickerColumns): columns is [string[], Record<string, string[]>] {
+export function isPickerCascading(columns?: LxPickerColumns): columns is LxPickerCascadingColumns {
   return !!columns && columns.length === 2 && typeof columns[1] === "object" && !Array.isArray(columns[1]);
 }
 
-export function isPickerSingle(columns?: PickerColumns): boolean {
+export function isPickerSingle(columns?: LxPickerColumns): boolean {
   return !!columns && columns.length === 1;
 }
 
 export function getPickerIndexFromValue(
-  columns: PickerColumns | undefined,
+  columns: LxPickerColumns | undefined,
   value: PickerValue
 ): number | number[] {
   if (!columns) return 0;
@@ -154,7 +154,7 @@ export function getPickerIndexFromValue(
 }
 
 export function getPickerValueFromIndex(
-  columns: PickerColumns | undefined,
+  columns: LxPickerColumns | undefined,
   index: number | number[]
 ): string | string[] {
   if (!columns) return "";
@@ -244,8 +244,8 @@ export interface VideoNativeAttrOptions {
   progressBar?: boolean;
   live?: boolean;
   volume?: string | number;
-  qualities?: LxVideoQuality[];
-  playbackRates?: number[];
+  qualities?: readonly LxVideoQuality[];
+  playbackRates?: readonly number[];
 }
 
 export function buildVideoNativeAttrs(
@@ -285,7 +285,7 @@ export const MEDIA_SWIPER_DOM_EVENT_MAP = {
 
 export interface MediaSwiperNativeAttrOptions {
   id?: string;
-  items?: LxMediaSwiperItem[];
+  items?: readonly LxMediaSwiperItem[];
   index?: number;
   initialIndex?: number;
   loop?: boolean;

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",