@lingxia/page-runtime 0.5.0 → 0.5.1

package/dist/index.d.ts

@@ -1 +1 @@
-export { ensurePageBridgeSubscription, getPageActions, getPageSnapshot, getPageStateInfo, subscribePageData, subscribePageSnapshot, toBridgeError, resolveParams, stableParamKey, invokeMethod, getMethodKey, type ActionMap, type Snapshot, type ParamsSource, type MethodParams, type StreamData, type StreamResult, type ChannelIn, type ChannelOut, } from "./shared/runtime.js";
+export { ensurePageBridgeSubscription, getPageActions, getPageSnapshot, getPageStateInfo, subscribePageData, subscribePageSnapshot, type ActionMap, type Snapshot, } from "./shared/runtime.js";

package/dist/index.js

@@ -1 +1 @@
-export { ensurePageBridgeSubscription, getPageActions, getPageSnapshot, getPageStateInfo, subscribePageData, subscribePageSnapshot, toBridgeError, resolveParams, stableParamKey, invokeMethod, getMethodKey, } from "./shared/runtime.js";
+export { ensurePageBridgeSubscription, getPageActions, getPageSnapshot, getPageStateInfo, subscribePageData, subscribePageSnapshot, } from "./shared/runtime.js";

package/dist/shared/runtime.d.ts

@@ -1,18 +1,7 @@
-import type { DataSubscriber, LxBridgeError, LxChannel, LxStream, StateInfo } from "@lingxia/bridge";
+import { type DataSubscriber, type StateInfo } from "@lingxia/bridge";
 export type ActionMap = Record<string, (...args: unknown[]) => unknown>;
 export type Snapshot = Record<string, unknown>;
 export type Listener = () => void;
-export type ParamsSource<T> = T | (() => T);
-export type MethodParams<TMethod> = TMethod extends () => any ? undefined : TMethod extends (params: infer P) => any ? P : never;
-export type StreamData<TMethod> = TMethod extends (...args: any[]) => LxStream<infer TData, any> ? TData : never;
-export type StreamResult<TMethod> = TMethod extends (...args: any[]) => LxStream<any, infer TResult> ? TResult : never;
-export type ChannelIn<TMethod> = TMethod extends (...args: any[]) => Promise<LxChannel<infer TIn, any>> ? TIn : never;
-export type ChannelOut<TMethod> = TMethod extends (...args: any[]) => Promise<LxChannel<any, infer TOut>> ? TOut : never;
-export declare function toBridgeError(err: unknown): LxBridgeError;
-export declare function resolveParams<T>(source?: ParamsSource<T>): T | undefined;
-export declare function stableParamKey(value: unknown): string;
-export declare function invokeMethod<TMethod extends (...args: any[]) => any>(method: TMethod, params: unknown): ReturnType<TMethod>;
-export declare function getMethodKey(method: unknown): string | undefined;
 export declare function ensurePageBridgeSubscription(): void;
 export declare function subscribePageSnapshot(listener: Listener): () => void;
 export declare function subscribePageData(callback: DataSubscriber): () => void;

package/dist/shared/runtime.js

@@ -5,43 +5,6 @@ let subscribeRetryTimer = null;
 let initialSnapshotResolved = false;
 let snapshotRequestInFlight = false;
 const listeners = new Set();
-export function toBridgeError(err) {
-    return err && typeof err === "object" && "code" in err
-        ? err
-        : {
-            code: "BRIDGE_INTERNAL_ERROR",
-            message: err instanceof Error ? err.message : String(err),
-        };
-}
-export function resolveParams(source) {
-    if (typeof source === "function") {
-        return source();
-    }
-    return source;
-}
-export function stableParamKey(value) {
-    var _a;
-    if (value === undefined)
-        return "undefined";
-    try {
-        return (_a = JSON.stringify(value)) !== null && _a !== void 0 ? _a : "undefined";
-    }
-    catch {
-        return String(value);
-    }
-}
-export function invokeMethod(method, params) {
-    if (params === undefined) {
-        return method();
-    }
-    return method(params);
-}
-export function getMethodKey(method) {
-    if (typeof method !== "function")
-        return undefined;
-    const candidate = method.__funcName;
-    return typeof candidate === "string" && candidate !== "" ? candidate : undefined;
-}
 function notifyListeners() {
     listeners.forEach((listener) => {
         try {
@@ -68,7 +31,7 @@ function scheduleSubscribeRetry() {
 function requestInitialSnapshot(bridge) {
     if (initialSnapshotResolved || snapshotRequestInFlight)
         return;
-    if (!(bridge === null || bridge === void 0 ? void 0 : bridge.call))
+    if (!bridge?.call)
         return;
     snapshotRequestInFlight = true;
     bridge
@@ -84,11 +47,10 @@ function requestInitialSnapshot(bridge) {
     });
 }
 export function ensurePageBridgeSubscription() {
-    var _a;
     if (subscribed)
         return;
     const bridge = window.LingXiaBridge;
-    const subscribeState = (_a = bridge === null || bridge === void 0 ? void 0 : bridge.state) === null || _a === void 0 ? void 0 : _a.subscribe;
+    const subscribeState = bridge?.state?.subscribe;
     if (!subscribeState) {
         scheduleSubscribeRetry();
         return;
@@ -124,13 +86,13 @@ export function getPageSnapshot() {
 export function getPageActions() {
     const actions = {};
     const bridge = window.__pageBridge;
-    if (!(bridge === null || bridge === void 0 ? void 0 : bridge.__names)) {
+    if (!bridge?.__names) {
         return actions;
     }
     for (const name of bridge.__names) {
         if (typeof name !== "string")
             continue;
-        const fn = bridge[name];
+        const fn = getOrCreatePageAction(bridge, name);
         if (typeof fn === "function") {
             actions[name] = fn;
         }
@@ -140,3 +102,70 @@ export function getPageActions() {
 export function getPageStateInfo() {
     return stateInfo;
 }
+function getOrCreatePageAction(bridge, name) {
+    const existing = bridge[name];
+    if (typeof existing === "function") {
+        return existing;
+    }
+    const mode = resolvePageActionMode(bridge, name);
+    const created = definePageBridgeAction(name, mode);
+    bridge[name] = created;
+    return created;
+}
+function resolvePageActionMode(bridge, name) {
+    const mode = bridge.__modes?.[name];
+    return mode === "call" || mode === "stream" ? mode : "notify";
+}
+function definePageBridgeAction(name, mode) {
+    function action(...args) {
+        const payload = filterPayload(name, args);
+        const bridge = window.LingXiaBridge;
+        if (!bridge) {
+            throw new Error(`LingXiaBridge is not ready for page action '${name}'`);
+        }
+        if (mode === "stream") {
+            const handle = bridge.stream(name, payload);
+            if (handle && handle.result && typeof handle.result.catch === "function") {
+                handle.result.catch((err) => {
+                    console.warn(`[PageFunc] ${name} failed:`, err instanceof Error ? err.message : err);
+                });
+            }
+            return handle;
+        }
+        if (mode === "call") {
+            const promise = bridge.call(name, payload);
+            if (promise && typeof promise.catch === "function") {
+                promise.catch((err) => {
+                    console.warn(`[PageFunc] ${name} failed:`, err instanceof Error ? err.message : err);
+                });
+            }
+            return promise;
+        }
+        bridge.notify(name, payload);
+        return undefined;
+    }
+    Object.assign(action, {
+        __logicFunc: true,
+        __funcName: name,
+        __bridgeMode: mode,
+    });
+    return action;
+}
+function filterPayload(name, args) {
+    const clean = [];
+    for (const value of args) {
+        if (value instanceof Event)
+            continue;
+        if (value &&
+            typeof value === "object" &&
+            "stopPropagation" in value &&
+            typeof value.stopPropagation === "function") {
+            continue;
+        }
+        clean.push(value);
+    }
+    if (clean.length > 1) {
+        throw new Error(`Page action '${name}' accepts at most one payload argument`);
+    }
+    return clean[0];
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@lingxia/page-runtime",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "private": false,
-  "description": "LingXia page runtime for HTML, React, and Vue lxapp views",
+  "description": "Shared page runtime core for LingXia lxapp frameworks",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,48 +11,22 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./react": {
-      "types": "./dist/react/index.d.ts",
-      "default": "./dist/react/index.js"
-    },
-    "./vue": {
-      "types": "./dist/vue/index.d.ts",
-      "default": "./dist/vue/index.js"
-    },
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "npm run clean && tsc -p tsconfig.json && mkdir -p dist/vue && cp src/vue/*.vue dist/vue/",
+    "build": "npm run clean && npm --prefix ../lingxia-bridge run build:types && tsc -p tsconfig.json",
     "clean": "rm -rf dist",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@lingxia/bridge": ">=0.5.0",
-    "@lingxia/elements": ">=0.5.0"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "vue": ">=3.5.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    }
+    "@lingxia/bridge": "0.5.1"
   },
   "devDependencies": {
     "@lingxia/bridge": "file:../lingxia-bridge",
-    "@lingxia/elements": "file:../lingxia-elements",
-    "@types/react": "^19.2.7",
-    "react": "^19.0.0",
-    "typescript": "^5.7.2",
-    "vue": "^3.5.0"
+    "typescript": "^5.7.2"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

package/dist/react/LxInput.d.ts

@@ -1,47 +0,0 @@
-import React from "react";
-export interface LxInputEventDetail {
-    value?: string;
-    cursor?: number;
-    keyCode?: number;
-    height?: number;
-    duration?: number;
-    encryptedValue?: string;
-    encryptError?: string;
-    pass?: boolean;
-    timeout?: boolean;
-}
-export interface LxInputProps {
-    id?: string;
-    value?: string;
-    defaultValue?: string;
-    type?: "text" | "number" | "password" | "digit";
-    password?: boolean;
-    placeholder?: string;
-    placeholderStyle?: string;
-    placeholderClass?: string;
-    maxlength?: number;
-    cursorSpacing?: number;
-    autoFocus?: boolean;
-    disabled?: boolean;
-    focus?: boolean;
-    confirmType?: "send" | "search" | "next" | "go" | "done";
-    alwaysEmbed?: boolean;
-    confirmHold?: boolean;
-    cursor?: number;
-    cursorColor?: string;
-    selectionStart?: number;
-    selectionEnd?: number;
-    adjustPosition?: boolean;
-    holdKeyboard?: boolean;
-    onInput?: (detail: LxInputEventDetail) => void;
-    onChange?: (detail: LxInputEventDetail) => void;
-    onFocus?: (detail: LxInputEventDetail) => void;
-    onBlur?: (detail: LxInputEventDetail) => void;
-    onConfirm?: (detail: LxInputEventDetail) => void;
-    onKeyboardHeightChange?: (detail: LxInputEventDetail) => void;
-    onNicknameReview?: (detail: LxInputEventDetail) => void;
-    pageBindings?: Record<string, string>;
-    className?: string;
-    style?: React.CSSProperties;
-}
-export declare const LxInput: React.ForwardRefExoticComponent<LxInputProps & React.RefAttributes<HTMLElement>>;

package/dist/react/LxInput.js

@@ -1,128 +0,0 @@
-import React, { forwardRef, useCallback, useEffect, useRef } from "react";
-import { registerInputComponent } from "@lingxia/elements";
-import { buildInputNativeAttrs } from "@lingxia/elements";
-import { assignForwardedRef, bindElementEvents, getCustomEventDetail, unbindElementEvents, } from "./text_component_shared.js";
-if (typeof window !== "undefined") {
-    registerInputComponent();
-}
-export const LxInput = forwardRef(({ value, defaultValue, type, password, placeholder, placeholderStyle, placeholderClass, maxlength, cursorSpacing, autoFocus, disabled, focus, confirmType, alwaysEmbed, confirmHold, cursor, cursorColor, selectionStart, selectionEnd, adjustPosition, holdKeyboard, onInput, onChange, onFocus, onBlur, onConfirm, onKeyboardHeightChange, onNicknameReview, pageBindings, className, style, id, ...rest }, ref) => {
-    const elementRef = useRef(null);
-    const boundElementRef = useRef(null);
-    const handlerRef = useRef({
-        onInput,
-        onChange,
-        onFocus,
-        onBlur,
-        onConfirm,
-        onKeyboardHeightChange,
-        onNicknameReview,
-    });
-    handlerRef.current = {
-        onInput,
-        onChange,
-        onFocus,
-        onBlur,
-        onConfirm,
-        onKeyboardHeightChange,
-        onNicknameReview,
-    };
-    const listenerMapRef = useRef({
-        input: {
-            handleEvent: (event) => { var _a, _b; return (_b = (_a = handlerRef.current).onInput) === null || _b === void 0 ? void 0 : _b.call(_a, getCustomEventDetail(event)); },
-        },
-        change: {
-            handleEvent: (event) => { var _a, _b; return (_b = (_a = handlerRef.current).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, getCustomEventDetail(event)); },
-        },
-        focus: {
-            handleEvent: (event) => { var _a, _b; return (_b = (_a = handlerRef.current).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a, getCustomEventDetail(event)); },
-        },
-        blur: {
-            handleEvent: (event) => { var _a, _b; return (_b = (_a = handlerRef.current).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, getCustomEventDetail(event)); },
-        },
-        confirm: {
-            handleEvent: (event) => { var _a, _b; return (_b = (_a = handlerRef.current).onConfirm) === null || _b === void 0 ? void 0 : _b.call(_a, getCustomEventDetail(event)); },
-        },
-        keyboardheightchange: {
-            handleEvent: (event) => { var _a, _b; return (_b = (_a = handlerRef.current).onKeyboardHeightChange) === null || _b === void 0 ? void 0 : _b.call(_a, getCustomEventDetail(event)); },
-        },
-        nicknamereview: {
-            handleEvent: (event) => { var _a, _b; return (_b = (_a = handlerRef.current).onNicknameReview) === null || _b === void 0 ? void 0 : _b.call(_a, getCustomEventDetail(event)); },
-        },
-    });
-    const elementRefCallback = useCallback((element) => {
-        boundElementRef.current = bindElementEvents(boundElementRef.current, element, listenerMapRef.current);
-        elementRef.current = element;
-        assignForwardedRef(ref, element);
-    }, [ref]);
-    useEffect(() => () => {
-        unbindElementEvents(boundElementRef.current, listenerMapRef.current);
-        boundElementRef.current = null;
-        elementRef.current = null;
-    }, []);
-    useEffect(() => {
-        const el = elementRef.current;
-        if (!el)
-            return;
-        const setAttr = (name, next) => {
-            if (next === null) {
-                el.removeAttribute(name);
-                return;
-            }
-            el.setAttribute(name, next);
-        };
-        if (type && String(type).trim().length > 0) {
-            el.setAttribute("type", String(type).trim().toLowerCase());
-        }
-        else {
-            el.removeAttribute("type");
-        }
-        if (password) {
-            el.setAttribute("password", "true");
-        }
-        else {
-            el.removeAttribute("password");
-        }
-        setAttr("value", value !== undefined ? String(value) : null);
-        setAttr("focus", focus !== undefined ? (focus ? "true" : "false") : null);
-        setAttr("maxlength", maxlength !== undefined ? String(maxlength) : null);
-        setAttr("placeholder-style", placeholderStyle ? String(placeholderStyle) : null);
-    }, [type, password, value, focus, maxlength, placeholderStyle]);
-    // Set pageBindings property on custom element
-    useEffect(() => {
-        const el = elementRef.current;
-        if (el && pageBindings) {
-            el.pageBindings = pageBindings;
-        }
-    }, [pageBindings]);
-    const inputProps = buildInputNativeAttrs({
-        id,
-        value,
-        defaultValue,
-        type,
-        password,
-        placeholder,
-        placeholderStyle,
-        placeholderClass,
-        maxlength,
-        cursorSpacing,
-        autoFocus,
-        disabled,
-        focus,
-        confirmType,
-        alwaysEmbed,
-        confirmHold,
-        cursor,
-        cursorColor,
-        selectionStart,
-        selectionEnd,
-        adjustPosition,
-        holdKeyboard,
-    }, rest, boundElementRef.current !== null);
-    return React.createElement("lx-input", {
-        ref: elementRefCallback,
-        className,
-        style,
-        ...inputProps,
-    });
-});
-LxInput.displayName = "LxInput";

package/dist/react/LxNavigator.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import type { LxNavigatorAttributes, LxNavigatorEvent, NavigatorOpenType, NavigatorTarget } from '@lingxia/elements';
-import '@lingxia/elements';
-export interface LxNavigatorProps extends Omit<LxNavigatorAttributes, 'onSuccess' | 'onFail' | 'onComplete'> {
-    url?: string;
-    openType?: NavigatorOpenType;
-    target?: NavigatorTarget;
-    delta?: number;
-    appId?: string;
-    path?: string;
-    phoneNumber?: string;
-    hoverClass?: string;
-    hoverStopPropagation?: boolean;
-    hoverStartTime?: number;
-    hoverStayTime?: number;
-    className?: string;
-    style?: React.CSSProperties;
-    onSuccess?: (e: LxNavigatorEvent) => void;
-    onFail?: (e: LxNavigatorEvent) => void;
-    onComplete?: (e: LxNavigatorEvent) => void;
-    children?: React.ReactNode;
-}
-export declare const LxNavigator: React.ForwardRefExoticComponent<Omit<LxNavigatorProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/react/LxNavigator.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import { buildNavigatorNativeAttrs } from '@lingxia/elements';
-// Import to ensure custom element is registered
-import '@lingxia/elements';
-export const LxNavigator = React.forwardRef((props, ref) => {
-    const { url, openType = 'navigate', target, // Auto-inferred, no default
-    delta = 1, appId, path, phoneNumber, hoverClass = 'navigator-hover', hoverStopPropagation = false, hoverStartTime = 20, hoverStayTime = 70, className, style, onSuccess, onFail, onComplete, children, ...rest } = props;
-    const elementRef = React.useRef(null);
-    React.useImperativeHandle(ref, () => elementRef.current);
-    React.useEffect(() => {
-        const element = elementRef.current;
-        if (!element)
-            return;
-        const handleSuccess = (e) => {
-            if (onSuccess) {
-                onSuccess(e);
-            }
-        };
-        const handleFail = (e) => {
-            if (onFail) {
-                onFail(e);
-            }
-        };
-        const handleComplete = (e) => {
-            if (onComplete) {
-                onComplete(e);
-            }
-        };
-        const successListener = { handleEvent: handleSuccess };
-        const failListener = { handleEvent: handleFail };
-        const completeListener = { handleEvent: handleComplete };
-        element.addEventListener('success', successListener);
-        element.addEventListener('fail', failListener);
-        element.addEventListener('complete', completeListener);
-        return () => {
-            element.removeEventListener('success', successListener);
-            element.removeEventListener('fail', failListener);
-            element.removeEventListener('complete', completeListener);
-        };
-    }, [onSuccess, onFail, onComplete]);
-    const navigatorProps = buildNavigatorNativeAttrs({
-        url,
-        openType,
-        target,
-        delta,
-        appId,
-        path,
-        phoneNumber,
-        hoverClass,
-        hoverStopPropagation,
-        hoverStartTime,
-        hoverStayTime,
-    }, rest);
-    return React.createElement('lx-navigator', {
-        ref: elementRef,
-        className,
-        style,
-        ...navigatorProps
-    }, children);
-});
-LxNavigator.displayName = 'LxNavigator';

package/dist/react/LxPicker.d.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-export interface LxPickerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onScroll'> {
-    columns?: string[][] | [string[], Record<string, string[]>];
-    mode?: 'date' | 'time';
-    start?: string;
-    end?: string;
-    fields?: 'year' | 'month' | 'day' | 'range';
-    value?: string | string[];
-    onConfirm?: (value: string | string[]) => void;
-    onCancel?: () => void;
-    onScroll?: (value: string | string[]) => void;
-    onChange?: (event: CustomEvent) => void;
-    onNativeScroll?: (event: CustomEvent) => void;
-    pageBindings?: Record<string, string>;
-    placeholder?: string;
-    className?: string;
-    style?: React.CSSProperties;
-    disabled?: boolean;
-    cancelText?: string;
-    cancelTextColor?: string;
-    cancelButtonColor?: string;
-    confirmText?: string;
-    confirmTextColor?: string;
-    confirmButtonColor?: string;
-    children?: React.ReactNode;
-}
-export declare const LxPicker: React.ForwardRefExoticComponent<LxPickerProps & React.RefAttributes<HTMLElement>>;

package/dist/react/LxPicker.js

@@ -1,113 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { forwardRef, useCallback, useId, useRef, useState } from 'react';
-import { registerPickerComponent } from '@lingxia/elements';
-import { buildPickerNativeAttrs, getPickerDisplayText, getPickerValueFromIndex, } from '@lingxia/elements';
-import { assignForwardedRef, bindElementEvents, getCustomEventDetail, unbindElementEvents, } from './text_component_shared.js';
-if (typeof window !== "undefined") {
-    registerPickerComponent();
-}
-export const LxPicker = forwardRef(({ id, columns, mode, start, end, fields, value, onConfirm, onCancel, onScroll, placeholder = 'Please select', onChange, onNativeScroll, pageBindings, className, style, disabled, cancelText, cancelTextColor, cancelButtonColor, confirmText, confirmTextColor, confirmButtonColor, children, ...rest }, ref) => {
-    const [visible, setVisible] = useState(false);
-    const reactId = useId();
-    const pickerId = id !== null && id !== void 0 ? id : `lx-picker-${reactId.replace(/[:]/g, "")}`;
-    const elementRef = useRef(null);
-    const boundElementRef = useRef(null);
-    const handlerRef = useRef({
-        columns,
-        mode,
-        onConfirm,
-        onCancel,
-        onScroll,
-        onChange,
-        onNativeScroll,
-    });
-    handlerRef.current = {
-        columns,
-        mode,
-        onConfirm,
-        onCancel,
-        onScroll,
-        onChange,
-        onNativeScroll,
-    };
-    const listenerMapRef = useRef({
-        change: {
-            handleEvent: (event) => {
-                var _a, _b, _c, _d, _e, _f, _g;
-                const detail = getCustomEventDetail(event);
-                (_b = (_a = handlerRef.current).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-                if (detail.confirmed) {
-                    const nextValue = handlerRef.current.mode === 'date' || handlerRef.current.mode === 'time'
-                        ? ((_c = detail.value) !== null && _c !== void 0 ? _c : '')
-                        : detail.index !== undefined
-                            ? getPickerValueFromIndex(handlerRef.current.columns, detail.index)
-                            : '';
-                    (_e = (_d = handlerRef.current).onConfirm) === null || _e === void 0 ? void 0 : _e.call(_d, nextValue);
-                    setVisible(false);
-                    return;
-                }
-                if (detail.cancelled) {
-                    (_g = (_f = handlerRef.current).onCancel) === null || _g === void 0 ? void 0 : _g.call(_f);
-                    setVisible(false);
-                }
-            },
-        },
-        scroll: {
-            handleEvent: (event) => {
-                var _a, _b, _c, _d, _e, _f;
-                const detail = getCustomEventDetail(event);
-                (_b = (_a = handlerRef.current).onNativeScroll) === null || _b === void 0 ? void 0 : _b.call(_a, event);
-                if (detail.value !== undefined) {
-                    (_d = (_c = handlerRef.current).onScroll) === null || _d === void 0 ? void 0 : _d.call(_c, detail.value);
-                    return;
-                }
-                if (detail.index !== undefined) {
-                    (_f = (_e = handlerRef.current).onScroll) === null || _f === void 0 ? void 0 : _f.call(_e, getPickerValueFromIndex(handlerRef.current.columns, detail.index));
-                }
-            },
-        },
-    });
-    const elementRefCallback = useCallback((element) => {
-        boundElementRef.current = bindElementEvents(boundElementRef.current, element, listenerMapRef.current);
-        elementRef.current = element;
-        assignForwardedRef(ref, element);
-        // Set pageBindings on custom element
-        if (element && pageBindings) {
-            element.pageBindings = pageBindings;
-        }
-    }, [ref, pageBindings]);
-    React.useEffect(() => () => {
-        unbindElementEvents(boundElementRef.current, listenerMapRef.current);
-        boundElementRef.current = null;
-        elementRef.current = null;
-    }, []);
-    const handleClick = () => !disabled && setVisible(true);
-    const pickerProps = buildPickerNativeAttrs({
-        id: pickerId,
-        columns,
-        mode,
-        start,
-        end,
-        fields,
-        value,
-        cancelText,
-        cancelTextColor,
-        cancelButtonColor,
-        confirmText,
-        confirmTextColor,
-        confirmButtonColor,
-    }, rest);
-    const displayText = getPickerDisplayText(value, fields);
-    return (_jsxs(_Fragment, { children: [children ? (_jsx("div", { onClick: handleClick, className: className, style: {
-                    cursor: disabled ? 'not-allowed' : 'pointer',
-                    opacity: disabled ? 0.5 : 1,
-                    ...style,
-                }, children: children })) : (_jsxs("div", { onClick: handleClick, className: className, style: {
-                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                    padding: '12px 14px', backgroundColor: '#fff', border: '1px solid #e5e7eb',
-                    borderRadius: '8px', cursor: disabled ? 'not-allowed' : 'pointer',
-                    opacity: disabled ? 0.5 : 1, width: '100%', boxSizing: 'border-box',
-                    ...style,
-                }, children: [_jsx("span", { style: { color: value ? '#111' : '#9ca3af' }, children: displayText || placeholder }), _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#9ca3af", strokeWidth: "2", children: _jsx("path", { d: "M6 9l6 6 6-6" }) })] })), visible && React.createElement('lx-picker', { ref: elementRefCallback, ...pickerProps })] }));
-});
-LxPicker.displayName = 'LxPicker';