@lingxia/vue 0.18.0 → 0.19.0

package/dist/LxMediaSwiper.vue

@@ -4,6 +4,9 @@ import {
   buildMediaSwiperNativeAttrs,
   MEDIA_SWIPER_DOM_EVENT_MAP,
   registerMediaSwiperComponent,
+  unwrapNativeEventPayload,
+  type LxMediaSwiperEventPayloads as Payloads,
+  type LxMediaSwiperHandle,
 } from '@lingxia/elements';
 import { bindElementEvents, unbindElementEvents } from './text_component_shared.js';
 import type { LxMediaSwiperProps } from './types.js';
@@ -23,31 +26,31 @@ const props = withDefaults(defineProps<LxMediaSwiperProps>(), {
 const attrs = useAttrs();
 
 const emit = defineEmits<{
-  change: [e: Event];
-  transitionEnd: [e: Event];
-  endReached: [e: Event];
-  tap: [e: Event];
-  videoEnded: [e: Event];
-  error: [e: Event];
+  change: [payload: Payloads['onChange']];
+  transitionEnd: [payload: Payloads['onTransitionEnd']];
+  endReached: [payload: Payloads['onEndReached']];
+  tap: [payload: Payloads['onTap']];
+  videoEnded: [payload: Payloads['onVideoEnded']];
+  error: [payload: Payloads['onError']];
 }>();
 
 if (typeof window !== 'undefined') {
   registerMediaSwiperComponent();
 }
 
-const elementRef = ref<HTMLElement | null>(null);
+const elementRef = ref<(HTMLElement & LxMediaSwiperHandle) | null>(null);
 const vueId = useId();
 let boundElement: HTMLElement | null = null;
 
 const resolvedId = computed(() => props.id || `lx-media-swiper-${vueId.replace(/[:]/g, '')}`);
 
 const eventListeners: Record<string, EventListenerObject> = {
-  [MEDIA_SWIPER_DOM_EVENT_MAP.onChange]: { handleEvent: (event: Event) => emit('change', event) },
-  [MEDIA_SWIPER_DOM_EVENT_MAP.onTransitionEnd]: { handleEvent: (event: Event) => emit('transitionEnd', event) },
-  [MEDIA_SWIPER_DOM_EVENT_MAP.onEndReached]: { handleEvent: (event: Event) => emit('endReached', event) },
-  [MEDIA_SWIPER_DOM_EVENT_MAP.onTap]: { handleEvent: (event: Event) => emit('tap', event) },
-  [MEDIA_SWIPER_DOM_EVENT_MAP.onVideoEnded]: { handleEvent: (event: Event) => emit('videoEnded', event) },
-  [MEDIA_SWIPER_DOM_EVENT_MAP.onError]: { handleEvent: (event: Event) => emit('error', event) },
+  [MEDIA_SWIPER_DOM_EVENT_MAP.onChange]: { handleEvent: (event: Event) => emit('change', unwrapNativeEventPayload(event)) },
+  [MEDIA_SWIPER_DOM_EVENT_MAP.onTransitionEnd]: { handleEvent: (event: Event) => emit('transitionEnd', unwrapNativeEventPayload(event)) },
+  [MEDIA_SWIPER_DOM_EVENT_MAP.onEndReached]: { handleEvent: (event: Event) => emit('endReached', unwrapNativeEventPayload(event)) },
+  [MEDIA_SWIPER_DOM_EVENT_MAP.onTap]: { handleEvent: (event: Event) => emit('tap', unwrapNativeEventPayload(event)) },
+  [MEDIA_SWIPER_DOM_EVENT_MAP.onVideoEnded]: { handleEvent: (event: Event) => emit('videoEnded', unwrapNativeEventPayload(event)) },
+  [MEDIA_SWIPER_DOM_EVENT_MAP.onError]: { handleEvent: (event: Event) => emit('error', unwrapNativeEventPayload(event)) },
 };
 
 watch(elementRef, (element) => {
@@ -58,16 +61,6 @@ onBeforeUnmount(() => {
   unbindElementEvents(boundElement, eventListeners);
 });
 
-watch(
-  [elementRef, () => props.pageBindings],
-  () => {
-    const el = elementRef.value as any;
-    if (el) {
-      el.pageBindings = props.pageBindings ?? {};
-    }
-  },
-  { immediate: true }
-);
 
 const domProps = computed(() => {
   const result = buildMediaSwiperNativeAttrs({
@@ -81,12 +74,13 @@ const domProps = computed(() => {
   };
 });
 
-defineExpose({
+const handle: LxMediaSwiperHandle & { el: typeof elementRef } = {
   el: elementRef,
-  next: () => (elementRef.value as any)?.next?.(),
-  previous: () => (elementRef.value as any)?.previous?.(),
-  goToIndex: (index: number) => (elementRef.value as any)?.goToIndex?.(index),
-});
+  next: () => elementRef.value?.next(),
+  previous: () => elementRef.value?.previous(),
+  goToIndex: (index: number) => elementRef.value?.goToIndex(index),
+};
+defineExpose(handle);
 
 const render = () => h('lx-media-swiper', { ref: elementRef, ...domProps.value });
 </script>

package/dist/LxPicker.vue

@@ -131,7 +131,16 @@ const renderPicker = () => visible.value ? h('lx-picker', { ref: pickerRef, ...p
 
 <template>
   <slot :open="handleClick" :disabled="props.disabled">
-    <div :class="props.class ?? attrs.class" :style="[triggerStyle, props.style ?? attrs.style]" @click="handleClick">
+    <div
+      :class="props.class ?? attrs.class"
+      :style="[triggerStyle, props.style ?? attrs.style]"
+      role="button"
+      :tabindex="props.disabled ? -1 : 0"
+      :aria-disabled="props.disabled || undefined"
+      @click="handleClick"
+      @keydown.enter.prevent="handleClick"
+      @keydown.space.prevent="handleClick"
+    >
       <span :style="{ color: modelValue ? '#111' : '#9ca3af' }">{{ displayText || placeholder }}</span>
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2">
         <path d="M6 9l6 6 6-6" />

package/dist/entry.d.ts

@@ -0,0 +1,13 @@
+import { type Component } from "vue";
+/**
+ * Mount a page's View. The CLI's generated entry calls this; pages never do.
+ *
+ * With `waitForState` — the page has Logic — the View mounts only once the
+ * page's first state has arrived, so `useLxPage().data` is whole from the first
+ * render. If that takes longer than 10 seconds, a panel names the page
+ * instead of a blank screen — and if the state arrives after all (a slow cold
+ * start, a paused debugger), the panel goes and the page mounts.
+ */
+export declare function mountPage(App: Component, options: {
+    waitForState: boolean;
+}): Promise<void>;

package/dist/entry.js

@@ -0,0 +1,16 @@
+import { createApp } from "vue";
+import { waitForPageState } from "@lingxia/page-runtime";
+/**
+ * Mount a page's View. The CLI's generated entry calls this; pages never do.
+ *
+ * With `waitForState` — the page has Logic — the View mounts only once the
+ * page's first state has arrived, so `useLxPage().data` is whole from the first
+ * render. If that takes longer than 10 seconds, a panel names the page
+ * instead of a blank screen — and if the state arrives after all (a slow cold
+ * start, a paused debugger), the panel goes and the page mounts.
+ */
+export async function mountPage(App, options) {
+    if (options.waitForState)
+        await waitForPageState();
+    createApp(App).mount("#app");
+}

package/dist/hook.d.ts

@@ -1,20 +1,39 @@
 import { type Ref } from "vue";
 import type { LxChannel, LxBridgeError, LxStream } from "@lingxia/bridge";
-import { type ChannelIn, type ChannelOut, type MethodParams, type ParamsSource, type StreamData, type StreamResult } from "@lingxia/bridge/invocation";
-import { type ActionMap, type PageChromeLayoutSnapshot, type Snapshot } from "@lingxia/page-runtime";
+import { type LxHost } from "@lingxia/bridge";
+import { type ChannelIn, type ChannelOut, type MethodParams, type OptionsArg, type ParamsOption, type ParamsSource, type StreamData, type StreamResult } from "@lingxia/bridge/invocation";
+import { type ActionMap, type PageActions, type DeepReadonly, type Snapshot } from "@lingxia/page-runtime";
 type MethodSource<T> = T | Ref<T>;
+/**
+ * This page's Logic state and actions — `this.data` and the page's methods.
+ * The page mounts once its first state has arrived, so `data` is whole from
+ * the first render. `data` is deep-reactive, readonly and updated in place, so
+ * it may be destructured; keep editable state in a `ref` and send it with an
+ * action. Call during component setup; pass actions into shared helpers
+ * instead of reading at module load.
+ */
 export declare function useLxPage<TData = Snapshot, TActions extends ActionMap = ActionMap>(): {
-    data: TData;
-    actions: TActions;
+    data: DeepReadonly<TData>;
+    actions: PageActions<TActions>;
 };
-/** Reactive native page-chrome geometry for View layout. */
-export declare function useLxPageChrome(): Readonly<Ref<PageChromeLayoutSnapshot>>;
-export interface LxStreamOptions<TData, TReduced> {
-    params?: unknown | (() => unknown);
+/**
+ * What the host decided for this page: `sizeClass`, `aside`,
+ * `displayLanguage`, `formFactor`, `os`, `runner` — a readonly reactive object
+ * that changes only when one of them does, never while a window is dragged.
+ * Read `host.sizeClass`; destructuring takes a snapshot. Geometry is CSS:
+ * `--lx-page-chrome-*` and container queries. Callable anywhere.
+ */
+export declare function useLxHost(): Readonly<LxHost>;
+type StreamMethod = (...args: any[]) => LxStream<any, any>;
+type ChannelMethod = (...args: any[]) => Promise<LxChannel<any, any>>;
+export type LxStreamOptions<TMethod> = ParamsOption<TMethod, ParamsSource<MethodParams<TMethod>>> & {
     manual?: boolean;
-    reduce?: (accumulated: TReduced, chunk: TData) => TReduced;
-    initial?: TReduced;
-}
+};
+/** A reducer folds chunks into `data`, starting from `initial`. */
+export type LxReducedStreamOptions<TMethod, TReduced> = LxStreamOptions<TMethod> & {
+    reduce: (accumulated: TReduced, chunk: StreamData<TMethod>) => TReduced;
+    initial: TReduced;
+};
 export interface LxStreamState<TData, TResult = unknown> {
     data: Ref<TData | undefined>;
     result: Ref<TResult | undefined>;
@@ -23,43 +42,20 @@ export interface LxStreamState<TData, TResult = unknown> {
     cancel: () => void;
     start: () => void;
 }
-export declare function useLxStream<TMethod extends (...args: any[]) => LxStream<any, any>, TReduced = StreamData<TMethod>>(method: MethodSource<TMethod>, options?: LxStreamOptions<StreamData<TMethod>, TReduced> & {
-    params?: ParamsSource<MethodParams<TMethod>>;
-}): LxStreamState<TReduced extends StreamData<TMethod> ? StreamData<TMethod> : TReduced, StreamResult<TMethod>>;
-export interface LxChannelOptions {
-    params?: unknown | (() => unknown);
+export declare function useLxStream<TMethod extends StreamMethod, TReduced>(method: MethodSource<TMethod>, options: LxReducedStreamOptions<TMethod, TReduced>): LxStreamState<TReduced, StreamResult<TMethod>>;
+export declare function useLxStream<TMethod extends StreamMethod>(method: MethodSource<TMethod>, ...options: OptionsArg<TMethod, LxStreamOptions<TMethod>>): LxStreamState<StreamData<TMethod>, StreamResult<TMethod>>;
+export type LxChannelOptions<TMethod> = ParamsOption<TMethod, ParamsSource<MethodParams<TMethod>>> & {
     manual?: boolean;
-}
+};
 export interface LxChannelState<TData, TOut = TData> {
     last: Ref<TData | undefined>;
     error: Ref<LxBridgeError | undefined>;
     connecting: Ref<boolean>;
     connected: Ref<boolean>;
-    send: (payload: TOut) => void;
+    /** Sends when connected; `false` when there is no open channel to send on. */
+    send: (payload: TOut) => boolean;
     close: (code?: string, reason?: string) => void;
     reopen: () => void;
 }
-export declare function useLxChannel<TMethod extends (...args: any[]) => Promise<LxChannel<any, any>>>(method: MethodSource<TMethod>, options?: LxChannelOptions & {
-    params?: ParamsSource<MethodParams<TMethod>>;
-}): LxChannelState<ChannelIn<TMethod>, ChannelOut<TMethod>>;
-export interface LxPlatform {
-    os: string;
-    isIOS: boolean;
-    isMacOS: boolean;
-    isApple: boolean;
-    isAndroid: boolean;
-    isHarmony: boolean;
-    isWindows: boolean;
-    /**
-     * Form factor, not OS. This, not `isMacOS`/`isWindows`, is what a layout
-     * decision is usually about: the Runner reports macOS while simulating a
-     * phone, and a narrowed desktop window is still a desktop.
-     */
-    isDesktop: boolean;
-    isMobile: boolean;
-    isRunner: boolean;
-}
-export declare function usePlatform(): LxPlatform;
-/** Effective product language selected by the host; follows a change. */
-export declare function useDisplayLanguage(): Readonly<Ref<string>>;
+export declare function useLxChannel<TMethod extends ChannelMethod>(method: MethodSource<TMethod>, ...args: OptionsArg<TMethod, LxChannelOptions<TMethod>>): LxChannelState<ChannelIn<TMethod>, ChannelOut<TMethod>>;
 export {};

package/dist/hook.js

@@ -1,43 +1,62 @@
-import { onUnmounted, getCurrentInstance, reactive, ref, shallowRef, unref, watch, } from "vue";
-import { getDisplayLanguage, subscribeDisplayLanguage } from "@lingxia/bridge";
+import { onUnmounted, reactive, readonly, ref, unref, watch, } from "vue";
+import { getHost, subscribeHost } from "@lingxia/bridge";
 import { getMethodKey, invokeMethod, resolveParams, stableParamKey, toBridgeError, } from "@lingxia/bridge/invocation";
-import { ensurePageBridgeSubscription, getPageActions, getPageChromeLayout, subscribePageChromeLayout, subscribePageData, } from "@lingxia/page-runtime";
+import { getPageActions, getPageSnapshot, subscribePageSnapshot, } from "@lingxia/page-runtime";
 function resolveMethod(source) {
     return unref(source);
 }
+// One reactive copy of the page's data for the document, updated in place so
+// a destructured `data` stays live.
 const reactiveSnapshot = reactive({});
 let snapshotSubscribed = false;
-function ensureReactiveSnapshot() {
-    if (snapshotSubscribed)
-        return;
-    snapshotSubscribed = true;
-    subscribePageData((next) => {
-        const normalized = next && typeof next === "object" ? next : {};
-        for (const key of Object.keys(reactiveSnapshot)) {
-            if (!Object.prototype.hasOwnProperty.call(normalized, key)) {
-                delete reactiveSnapshot[key];
-            }
+function syncSnapshot() {
+    const next = getPageSnapshot();
+    const normalized = next && typeof next === "object" ? next : {};
+    for (const key of Object.keys(reactiveSnapshot)) {
+        if (!Object.prototype.hasOwnProperty.call(normalized, key)) {
+            delete reactiveSnapshot[key];
         }
-        Object.assign(reactiveSnapshot, normalized);
-    });
+    }
+    Object.assign(reactiveSnapshot, normalized);
 }
+// What pages get: Logic owns the data, so a View write is refused (Vue warns
+// in development) while the sync above keeps updating the same object.
+const readonlySnapshot = readonly(reactiveSnapshot);
+/**
+ * This page's Logic state and actions — `this.data` and the page's methods.
+ * The page mounts once its first state has arrived, so `data` is whole from
+ * the first render. `data` is deep-reactive, readonly and updated in place, so
+ * it may be destructured; keep editable state in a `ref` and send it with an
+ * action. Call during component setup; pass actions into shared helpers
+ * instead of reading at module load.
+ */
 export function useLxPage() {
-    ensurePageBridgeSubscription();
-    ensureReactiveSnapshot();
-    return { data: reactiveSnapshot, actions: getPageActions() };
+    if (!snapshotSubscribed) {
+        snapshotSubscribed = true;
+        syncSnapshot();
+        subscribePageSnapshot(syncSnapshot);
+    }
+    return {
+        data: readonlySnapshot,
+        actions: getPageActions(),
+    };
 }
-/** Reactive native page-chrome geometry for View layout. */
-export function useLxPageChrome() {
-    const layout = shallowRef(getPageChromeLayout());
-    if (!getCurrentInstance()) {
-        console.warn("useLxPageChrome() must be called during component setup");
-        return layout;
+const hostState = reactive({ ...getHost() });
+let hostSubscribed = false;
+/**
+ * What the host decided for this page: `sizeClass`, `aside`,
+ * `displayLanguage`, `formFactor`, `os`, `runner` — a readonly reactive object
+ * that changes only when one of them does, never while a window is dragged.
+ * Read `host.sizeClass`; destructuring takes a snapshot. Geometry is CSS:
+ * `--lx-page-chrome-*` and container queries. Callable anywhere.
+ */
+export function useLxHost() {
+    if (!hostSubscribed) {
+        hostSubscribed = true;
+        Object.assign(hostState, getHost());
+        subscribeHost(() => Object.assign(hostState, getHost()));
     }
-    const unsubscribe = subscribePageChromeLayout((next) => {
-        layout.value = next;
-    });
-    onUnmounted(unsubscribe);
-    return layout;
+    return readonly(hostState);
 }
 export function useLxStream(method, options) {
     const data = ref((options?.reduce ? options.initial : undefined));
@@ -122,7 +141,8 @@ export function useLxStream(method, options) {
     });
     return { data, result, error, streaming, cancel, start };
 }
-export function useLxChannel(method, options) {
+export function useLxChannel(method, ...args) {
+    const options = args[0];
     const last = ref(undefined);
     const error = ref(undefined);
     const connecting = ref(false);
@@ -130,7 +150,10 @@ export function useLxChannel(method, options) {
     let ch = null;
     let runId = 0;
     function send(payload) {
-        ch?.send(payload);
+        if (!ch)
+            return false;
+        ch.send(payload);
+        return true;
     }
     function close(code, reason) {
         runId += 1;
@@ -147,7 +170,11 @@ export function useLxChannel(method, options) {
         error.value = undefined;
         connecting.value = true;
         connected.value = false;
-        Promise.resolve(invokeMethod(resolveMethod(method), resolveParams(options?.params)))
+        // In the executor: a method or params getter that throws synchronously
+        // lands in `.catch`.
+        new Promise((resolve) => {
+            resolve(invokeMethod(resolveMethod(method), resolveParams(options?.params)));
+        })
             .then((nextChannel) => {
             if (runId !== thisRunId) {
                 nextChannel.close();
@@ -205,40 +232,3 @@ export function useLxChannel(method, options) {
     });
     return { last, error, connecting, connected, send, close, reopen };
 }
-function readPlatform() {
-    const p = window.LingXiaBridge?.platform;
-    const desktop = p?.isDesktop() ?? false;
-    return {
-        os: p?.getOS() ?? "unknown",
-        isIOS: p?.isIOS() ?? false,
-        isMacOS: p?.isMacOS() ?? false,
-        isApple: p?.isApple() ?? false,
-        isAndroid: p?.isAndroid() ?? false,
-        isHarmony: p?.isHarmony() ?? false,
-        isWindows: p?.isWindows() ?? false,
-        isDesktop: desktop,
-        // Derived, not read, so that a host too old to answer `isMobile` reports
-        // one of the two rather than neither.
-        isMobile: p?.isMobile?.() ?? !desktop,
-        isRunner: p?.isRunner() ?? false,
-    };
-}
-// Typed platform detection for pages, so they never reach for the window global
-// or hand-roll an OS check. Fixed for the session, so it resolves once — the
-// Runner re-serves the page when its simulated device changes form factor.
-export function usePlatform() {
-    return readPlatform();
-}
-/** Effective product language selected by the host; follows a change. */
-export function useDisplayLanguage() {
-    const language = shallowRef(getDisplayLanguage());
-    if (!getCurrentInstance()) {
-        console.warn("useDisplayLanguage() must be called during component setup");
-        return language;
-    }
-    const unsubscribe = subscribeDisplayLanguage(() => {
-        language.value = getDisplayLanguage();
-    });
-    onUnmounted(unsubscribe);
-    return language;
-}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-export { useLxPage, useLxPageChrome, useLxStream, useLxChannel, usePlatform, useDisplayLanguage, type LxStreamOptions, type LxStreamState, type LxChannelOptions, type LxChannelState, type LxPlatform, } from "./hook.js";
+export { useLxPage, useLxHost, useLxStream, useLxChannel, type LxStreamOptions, type LxReducedStreamOptions, type LxStreamState, type LxChannelOptions, type LxChannelState, } from "./hook.js";
+export type { LxHost } from "@lingxia/bridge";
+export type { DeepReadonly } from "@lingxia/page-runtime";
 export { default as LxVideo } from "./LxVideo.vue";
 export { default as LxNativeRoot } from "./LxNativeRoot.vue";
 export { default as LxNativeView } from "./LxNativeView.vue";
@@ -9,6 +11,5 @@ export { default as LxMediaSwiper } from "./LxMediaSwiper.vue";
 export { default as LxPicker } from "./LxPicker.vue";
 export { default as LxNavigator } from "./LxNavigator.vue";
 export type { LxVideoProps, LxNativeRootProps, LxNativeViewProps, LxNativeCoverProps, LxNativeTextProps, LxNativeButtonProps, LxMediaSwiperProps, LxPickerProps, LxNavigatorProps, LxNavigatorEvent, } from "./types.js";
-export type { LxPageChrome, PageChromeLayoutListener, PageChromeLayoutSnapshot, PageChromeRect, } from "@lingxia/page-runtime";
-export type { LxVideoEventPayloads, LxVideoEventHandlers, NativeActionIcon } from "@lingxia/elements";
+export type { LxVideoEventPayloads, LxVideoEventHandlers, LxMediaSwiperEventPayloads, LxMediaSwiperEventHandlers, LxMediaSwiperHandle, LxMediaSwiperItem, NativeActionIcon, } from "@lingxia/elements";
 export type { NativeStyle } from "./types.js";

package/dist/index.js

@@ -1,4 +1,4 @@
-export { useLxPage, useLxPageChrome, useLxStream, useLxChannel, usePlatform, useDisplayLanguage, } from "./hook.js";
+export { useLxPage, useLxHost, useLxStream, useLxChannel, } from "./hook.js";
 export { default as LxVideo } from "./LxVideo.vue";
 export { default as LxNativeRoot } from "./LxNativeRoot.vue";
 export { default as LxNativeView } from "./LxNativeView.vue";

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'vue';
-import type { LxNavigatorEvent, LxVideoEventPayloads, NativeActionIcon, NativeStyleProperty, NavigatorChannel, NavigatorOpenType, NavigatorQuery, NavigatorTarget, NavigatorEdge, NavigatorFloatPosition, NavigatorInteraction, NavigatorPlacement, NavigatorSize, NavigatorWindowChrome } from '@lingxia/elements';
+import type { LxMediaSwiperEventPayloads, LxMediaSwiperItem, LxPickerColumns, LxVideoQuality, LxNavigatorEvent, LxVideoEventPayloads, NativeActionIcon, NativeStyleProperty, NavigatorChannel, NavigatorOpenType, NavigatorQuery, NavigatorTarget, NavigatorEdge, NavigatorFloatPosition, NavigatorInteraction, NavigatorPlacement, NavigatorSize, NavigatorWindowChrome } from '@lingxia/elements';
 export type NativeStyle = Omit<Pick<CSSProperties, NativeStyleProperty>, "borderStyle"> & {
     borderStyle?: "solid" | "none";
 };
@@ -16,11 +16,8 @@ export interface LxVideoProps {
     progressBar?: boolean;
     live?: boolean;
     volume?: string | number;
-    qualities?: Array<{
-        label: string;
-        url?: string;
-    }>;
-    playbackRates?: number[];
+    qualities?: readonly LxVideoQuality[];
+    playbackRates?: readonly number[];
     class?: string;
     style?: NativeStyle;
     onPlayRequest?: (payload: LxVideoEventPayloads["onPlayRequest"]) => void;
@@ -37,7 +34,6 @@ export interface LxVideoProps {
     onQualityChange?: (payload: LxVideoEventPayloads["onQualityChange"]) => void;
     onRateChange?: (payload: LxVideoEventPayloads["onRateChange"]) => void;
     onVolumeChange?: (payload: LxVideoEventPayloads["onVolumeChange"]) => void;
-    pageBindings?: Record<string, string>;
 }
 export interface LxNativeNodeProps {
     id?: string;
@@ -82,21 +78,9 @@ export interface LxNativeButtonProps extends LxNativeNodeProps {
     loading?: boolean;
     tabIndex?: 0 | -1;
 }
-type LxMediaSwiperItem = {
-    id?: string;
-    type: 'image';
-    src: string;
-} | {
-    id?: string;
-    type: 'video';
-    src: string;
-    poster?: string;
-    controls?: boolean;
-    muted?: boolean;
-};
 export interface LxMediaSwiperProps {
     id?: string;
-    items?: LxMediaSwiperItem[];
+    items?: readonly LxMediaSwiperItem[];
     index?: number;
     initialIndex?: number;
     loop?: boolean;
@@ -120,21 +104,20 @@ export interface LxMediaSwiperProps {
     };
     class?: string;
     style?: CSSProperties;
-    onChange?: (event: Event) => void;
-    onTransitionEnd?: (event: Event) => void;
-    onEndReached?: (event: Event) => void;
-    onTap?: (event: Event) => void;
-    onVideoEnded?: (event: Event) => void;
-    onError?: (event: Event) => void;
-    pageBindings?: Record<string, string>;
+    onChange?: (payload: LxMediaSwiperEventPayloads["onChange"]) => void;
+    onTransitionEnd?: (payload: LxMediaSwiperEventPayloads["onTransitionEnd"]) => void;
+    onEndReached?: (payload: LxMediaSwiperEventPayloads["onEndReached"]) => void;
+    onTap?: (payload: LxMediaSwiperEventPayloads["onTap"]) => void;
+    onVideoEnded?: (payload: LxMediaSwiperEventPayloads["onVideoEnded"]) => void;
+    onError?: (payload: LxMediaSwiperEventPayloads["onError"]) => void;
 }
 export interface LxPickerProps {
-    columns?: string[][] | [string[], Record<string, string[]>];
+    columns?: LxPickerColumns;
     mode?: 'date' | 'time';
     start?: string;
     end?: string;
     fields?: 'year' | 'month' | 'day' | 'range';
-    modelValue?: string | string[];
+    modelValue?: string | readonly string[];
     placeholder?: string;
     class?: string;
     style?: CSSProperties;
@@ -145,7 +128,6 @@ export interface LxPickerProps {
     confirmText?: string;
     confirmTextColor?: string;
     confirmButtonColor?: string;
-    pageBindings?: Record<string, string>;
 }
 export interface LxNavigatorProps {
     url?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lingxia/vue",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "private": false,
   "description": "LingXia Vue runtime and components for lxapp pages",
   "type": "module",
@@ -11,18 +11,23 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./entry": {
+      "types": "./dist/entry.d.ts",
+      "default": "./dist/entry.js"
+    },
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "npm run clean && npm --prefix ../lingxia-elements run build && npm --prefix ../lingxia-page-runtime run build && tsc -p tsconfig.json && node scripts/copy-sfc-assets.mjs",
     "clean": "rm -rf dist",
     "prepublishOnly": "npm run build",
-    "test:components": "npm run build && node tests/native-components.mjs && node tests/native-aria-attributes.mjs"
+    "test:components": "npm run build && node tests/native-components.mjs && node tests/native-aria-attributes.mjs",
+    "test:hooks": "rolldown -c tests/rolldown.hooks.config.mjs && node tests/page-hooks.mjs"
   },
   "dependencies": {
-    "@lingxia/bridge": "~0.18.0",
-    "@lingxia/elements": "~0.18.0",
-    "@lingxia/page-runtime": "~0.18.0"
+    "@lingxia/bridge": "~0.19.0",
+    "@lingxia/elements": "~0.19.0",
+    "@lingxia/page-runtime": "~0.19.0"
   },
   "peerDependencies": {
     "vue": ">=3.5.0"