@ray-js/ray-ipc-half-horizontal-drag 0.0.6 → 0.0.7-beta.1

package/README.md

@@ -16,6 +16,16 @@ $ yarn add @ray-js/ray-ipc-half-horizontal-drag
 
 ## Develop
 
+### Lynx Android background images
+
+With `renderMode="lynx"`, Android URL backgrounds use a real `Image` layer (`aspectFill`) to match the CSS cover layout. iOS and the default WebView implementation keep their existing CSS path. Card/tag/close behavior and the public props are unchanged. The local background fix was verified on Android on 2026-11-02 and is pending publication.
+
+### Lynx Android edge feedback (local integration)
+
+The local Lynx Android branch adds bounded edge drag feedback around the existing native ScrollView. Normal scrolling stays native; out-of-range horizontal drags offset the track with resistance and return it on release/cancel. Vertical gestures remain native, dragged cards cannot fire click/close handlers, and page hide clears the offset. Bounds are measured in logical px for phone/tablet layouts. iOS and WebView keep the existing path and public props.
+
+This is a local source integration, not a published beta update. It does not implement a replacement momentum scroller or promise identical iOS fling-at-edge physics. The Android local integration was accepted on 2026-11-02: the user confirmed edge return and vertical scrolling are normal.
+
 ```sh
 # install deps
 yarn

package/lib/index.js

@@ -1,128 +1,15 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import "core-js/modules/esnext.iterator.map.js";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["renderMode"];
 import React from 'react';
-import { View } from '@ray-js/ray';
-import clsx from 'clsx';
-import styles from './index.module.less';
-const NILL = () => null;
-const HalfHorizontalDrag = props => {
-  const {
-    className,
-    style,
-    data,
-    showCloseBtn,
-    onCloseClick = NILL,
-    closeBtnTitle = 'Close',
-    closeBtnIcon
-  } = props;
-  const renderCloseBtn = () => {
-    if (!showCloseBtn) return null;
-    return /*#__PURE__*/React.createElement(View, {
-      className: styles.closeBtn,
-      onClick: onCloseClick
-    }, closeBtnIcon, closeBtnTitle);
-  };
-  if (!data || !data.length) return null;
-  if (data.length === 1) {
-    const item = data[0];
-    const {
-      tag,
-      tagStyle,
-      tagClassName,
-      title,
-      onClick = NILL
-    } = item || {};
-    return /*#__PURE__*/React.createElement(View, {
-      className: clsx(styles.content, className, {
-        [styles.moreContent]: showCloseBtn
-      }),
-      style: _objectSpread({}, style)
-    }, /*#__PURE__*/React.createElement(View, {
-      style: _objectSpread(_objectSpread({}, item.style), {}, {
-        backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
-        background: item.background || undefined
-      }),
-      className: clsx(styles.one_data_item, styles.item, item.className, {
-        [styles.one_data_item_width]: showCloseBtn
-      }),
-      onClick: onClick
-    }, /*#__PURE__*/React.createElement(View, {
-      className: styles.icon
-    }, item.icon), /*#__PURE__*/React.createElement(View, {
-      className: styles.title
-    }, title), !!tag && /*#__PURE__*/React.createElement(View, {
-      style: _objectSpread({}, tagStyle),
-      className: clsx(styles.tag, tagClassName)
-    }, tag)), renderCloseBtn());
-  }
-  if (data.length === 2) {
-    return /*#__PURE__*/React.createElement(View, {
-      className: clsx(styles.content, styles.towContent, className, {
-        [styles.moreContent]: showCloseBtn
-      }),
-      style: _objectSpread({}, style)
-    }, data.map((item, idx) => {
-      const {
-        title,
-        tag,
-        tagStyle,
-        tagClassName,
-        onClick = NILL
-      } = item;
-      return /*#__PURE__*/React.createElement(View, {
-        key: idx // eslint-disable-line
-        ,
-        style: _objectSpread(_objectSpread({}, item.style), {}, {
-          backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
-          background: item.background || undefined
-        }),
-        onClick: onClick,
-        className: clsx(styles.two_data_item, styles.item, item.className, {
-          [styles.two_data_item_width]: showCloseBtn
-        })
-      }, /*#__PURE__*/React.createElement(View, {
-        className: styles.icon
-      }, item.icon), /*#__PURE__*/React.createElement(View, {
-        className: styles.title
-      }, title), !!tag && /*#__PURE__*/React.createElement(View, {
-        style: _objectSpread({}, tagStyle),
-        className: clsx(styles.tag, tagClassName)
-      }, tag));
-    }), renderCloseBtn());
-  }
-  if (data.length >= 3) {
-    return /*#__PURE__*/React.createElement(View, {
-      className: clsx(styles.content, styles.moreContent, className),
-      style: _objectSpread({}, style)
-    }, data.map((item, idx) => {
-      const {
-        title,
-        tag,
-        tagStyle,
-        tagClassName,
-        onClick = NILL
-      } = item;
-      return /*#__PURE__*/React.createElement(View
-      // eslint-disable-next-line react/no-array-index-key
-      , {
-        key: idx,
-        style: _objectSpread(_objectSpread({}, item.style), {}, {
-          backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
-          background: item.background || undefined
-        }),
-        className: clsx(styles.item, styles.more_data_item, item.className),
-        onClick: onClick
-      }, /*#__PURE__*/React.createElement(View, {
-        className: styles.icon
-      }, item.icon), /*#__PURE__*/React.createElement(View, {
-        className: styles.title
-      }, title), !!tag && /*#__PURE__*/React.createElement(View, {
-        style: _objectSpread({}, tagStyle),
-        className: clsx(styles.tag, tagClassName)
-      }, tag));
-    }), renderCloseBtn());
-  }
-  return null;
+import WebViewHalfHorizontalDrag from './webview';
+import LynxHalfHorizontalDrag from './lynx';
+const HalfHorizontalDrag = _ref => {
+  let {
+      renderMode = 'webview'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (renderMode === 'lynx') return /*#__PURE__*/React.createElement(LynxHalfHorizontalDrag, props);
+  return /*#__PURE__*/React.createElement(WebViewHalfHorizontalDrag, props);
 };
 HalfHorizontalDrag.displayName = 'HalfHorizontalDrag';
 export {};

package/lib/lynx/android-bounce.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ScrollView } from '@ray-js/ray';
+type ScrollProps = React.ComponentProps<typeof ScrollView> & {
+    hideScrollbar?: boolean;
+};
+type Touch = {
+    identifier?: number | string;
+    clientX?: number;
+    clientY?: number;
+    pageX?: number;
+    pageY?: number;
+};
+type TouchEvent = {
+    touches?: Touch[];
+    origin?: {
+        touches?: Touch[];
+    };
+};
+export type ClickGuard = (callback: ((event?: any) => void) | undefined, event: any) => void;
+type Props = Omit<ScrollProps, 'children'> & {
+    children: (track: {
+        id: string;
+        style: React.CSSProperties;
+    }, guard: ClickGuard) => React.ReactElement;
+};
+export declare function rubberBand(distance: number, width: number): number;
+/** Android-only visual compensation; native scrolling and vertical gesture arbitration stay native. */
+export declare class AndroidBounceScrollImpl extends React.Component<Props, {
+    offset: number;
+    returning: boolean;
+}> {
+    constructor(props: Props);
+    componentDidMount(): void;
+    componentDidUpdate(previous: Props): void;
+    componentWillUnmount(): void;
+    onHide: () => void;
+    private id;
+    private alive;
+    private measureId;
+    private width;
+    private range;
+    private scrollLeft;
+    private moved;
+    private press?;
+    private measure;
+    start: (event: TouchEvent) => void;
+    move: (event: TouchEvent) => void;
+    end: () => void;
+    cancel: () => void;
+    private guard;
+    private scroll;
+    render(): React.JSX.Element;
+}
+export declare const AndroidBounceScroll: React.ComponentType<Props>;
+export {};

package/lib/lynx/android-bounce.js

@@ -0,0 +1,171 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+const _excluded = ["children"];
+import React from 'react';
+import { createSelectorQuery, ScrollView, withPageLifecycle } from '@ray-js/ray';
+let sequence = 0;
+
+// Limit the displacement in logical px, independent of rpx conversion and screen size.
+export function rubberBand(distance, width) {
+  if (!(width > 0) || !Number.isFinite(distance)) return 0;
+  const limit = Math.min(56, width * 0.16);
+  return Math.sign(distance) * Math.min(limit, Math.abs(distance) * 0.36 / (1 + Math.abs(distance) / width));
+}
+function point(event) {
+  var _event$origin, _event$touches;
+  const touches = (event === null || event === void 0 || (_event$origin = event.origin) === null || _event$origin === void 0 ? void 0 : _event$origin.touches) || (event === null || event === void 0 ? void 0 : event.touches);
+  if ((touches === null || touches === void 0 ? void 0 : touches.length) !== 1) return undefined;
+  return _objectSpread(_objectSpread({}, event === null || event === void 0 || (_event$touches = event.touches) === null || _event$touches === void 0 ? void 0 : _event$touches[0]), touches[0]);
+}
+
+/** Android-only visual compensation; native scrolling and vertical gesture arbitration stay native. */
+export class AndroidBounceScrollImpl extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      offset: 0,
+      returning: false
+    };
+  }
+  componentDidMount() {
+    this.alive = true;
+    this.measure();
+  }
+  componentDidUpdate(previous) {
+    if (previous.children !== this.props.children) {
+      this.cancel();
+      this.measure();
+    }
+  }
+  componentWillUnmount() {
+    this.alive = false;
+    this.measureId++;
+    this.press = undefined;
+  }
+  onHide = () => this.cancel();
+  id = (() => `half-drag-bounce-${++sequence}`)();
+  alive = false;
+  measureId = 0;
+  width = 0;
+  range = 0;
+  scrollLeft = 0;
+  moved = false;
+  measure = () => {
+    const request = ++this.measureId;
+    const query = createSelectorQuery();
+    let viewport = 0;
+    let content = 0;
+    query.select(`#${this.id}`).boundingClientRect(rect => {
+      viewport = (rect === null || rect === void 0 ? void 0 : rect.width) || 0;
+    });
+    query.select(`#${this.id}-track`).boundingClientRect(rect => {
+      content = (rect === null || rect === void 0 ? void 0 : rect.width) || 0;
+    });
+    query.exec(() => {
+      if (!this.alive || request !== this.measureId || viewport <= 0 || content <= 0) return;
+      this.width = viewport;
+      this.range = Math.max(0, content - viewport);
+    });
+  };
+  start = event => {
+    var _touch$clientX, _touch$clientY, _touch$identifier;
+    const touch = point(event);
+    if (!touch) {
+      this.cancel();
+      return;
+    }
+    const x = (_touch$clientX = touch.clientX) !== null && _touch$clientX !== void 0 ? _touch$clientX : touch.pageX;
+    const y = (_touch$clientY = touch.clientY) !== null && _touch$clientY !== void 0 ? _touch$clientY : touch.pageY;
+    if (!Number.isFinite(x) || !Number.isFinite(y)) return;
+    this.moved = false;
+    this.press = {
+      identifier: (_touch$identifier = touch.identifier) !== null && _touch$identifier !== void 0 ? _touch$identifier : 0,
+      x,
+      y,
+      scrollLeft: this.scrollLeft
+    };
+    this.setState({
+      offset: 0,
+      returning: false
+    });
+    this.measure();
+  };
+  move = event => {
+    var _touch$identifier2, _touch$clientX2, _touch$clientY2;
+    const touch = point(event);
+    const {
+      press
+    } = this;
+    if (!touch || !press || ((_touch$identifier2 = touch.identifier) !== null && _touch$identifier2 !== void 0 ? _touch$identifier2 : 0) !== press.identifier) {
+      this.cancel();
+      return;
+    }
+    const x = (_touch$clientX2 = touch.clientX) !== null && _touch$clientX2 !== void 0 ? _touch$clientX2 : touch.pageX;
+    const y = (_touch$clientY2 = touch.clientY) !== null && _touch$clientY2 !== void 0 ? _touch$clientY2 : touch.pageY;
+    if (!Number.isFinite(x) || !Number.isFinite(y)) return;
+    const dx = x - press.x;
+    const dy = y - press.y;
+    if (!press.axis) {
+      if (Math.max(Math.abs(dx), Math.abs(dy)) < 6) return;
+      this.moved = true;
+      press.axis = Math.abs(dx) > Math.abs(dy) * 1.2 ? 'x' : 'y';
+    }
+    if (press.axis !== 'x' || this.range <= 0) return;
+    const requested = press.scrollLeft - dx;
+    const overflow = requested < 0 ? -requested : requested > this.range ? this.range - requested : 0;
+    const offset = rubberBand(overflow, this.width);
+    if (offset !== this.state.offset || this.state.returning) {
+      this.setState({
+        offset,
+        returning: false
+      });
+    }
+  };
+  end = () => {
+    this.press = undefined;
+    if (this.alive) this.setState({
+      offset: 0,
+      returning: true
+    });
+  };
+  cancel = () => {
+    this.moved = true;
+    this.end();
+  };
+  guard = (callback, event) => {
+    // Reset on the next touchstart, rather than a timer that might reject a later intentional tap.
+    if (this.alive && !this.moved) callback === null || callback === void 0 || callback(event);
+  };
+  scroll = event => {
+    var _this$props$onScroll, _this$props;
+    this.scrollLeft = Math.max(0, event.detail.scrollLeft || 0);
+    (_this$props$onScroll = (_this$props = this.props).onScroll) === null || _this$props$onScroll === void 0 || _this$props$onScroll.call(_this$props, event);
+  };
+  render() {
+    const _this$props2 = this.props,
+      {
+        children
+      } = _this$props2,
+      props = _objectWithoutProperties(_this$props2, _excluded);
+    return /*#__PURE__*/React.createElement(ScrollView, _extends({}, props, {
+      id: this.id,
+      onScroll: this.scroll,
+      onTouchStart: this.start,
+      onTouchMove: this.move,
+      onTouchEnd: this.end,
+      onTouchCancel: this.cancel
+    }), children({
+      id: `${this.id}-track`,
+      style: {
+        transform: `translateX(${this.state.offset}px)`,
+        transitionProperty: 'transform',
+        transitionDuration: this.state.returning ? '260ms' : '0ms',
+        transitionTimingFunction: 'cubic-bezier(0.2, 0.75, 0.3, 1)'
+      }
+    }, this.guard));
+  }
+}
+
+// Ray's older HOC declaration drops the wrapped component's props; runtime forwards them unchanged.
+export const AndroidBounceScroll = withPageLifecycle(AndroidBounceScrollImpl);

package/lib/lynx/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IProps } from '../props';
+declare const LynxHalfHorizontalDrag: React.FC<IProps>;
+export default LynxHalfHorizontalDrag;

package/lib/lynx/index.js

@@ -0,0 +1,102 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["background"];
+import "core-js/modules/esnext.iterator.map.js";
+import React from 'react';
+import { getSystemInfoSync, Image, ScrollView, Text, View } from '@ray-js/ray';
+import clsx from 'clsx';
+import styles from './index.module.less';
+import { AndroidBounceScroll } from './android-bounce';
+
+// Ray's newer host supports hideScrollbar; older supported Ray declarations omit it.
+// Keep this native-only prop local rather than changing installed dependency types.
+
+const LynxScrollView = ScrollView;
+const isText = value => typeof value === 'string' || typeof value === 'number';
+
+// Keep gradients on the explicit property: this build chain drops background shorthand gradients.
+const getBackgroundStyle = function () {
+  let style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+      background
+    } = style,
+    rest = _objectWithoutProperties(style, _excluded);
+  if (typeof background === 'string' && background.includes('gradient(')) {
+    return _objectSpread(_objectSpread({}, rest), {}, {
+      backgroundImage: background.trim().replace(/;$/, '')
+    });
+  }
+  return style;
+};
+const LynxHalfHorizontalDrag = _ref => {
+  let {
+    data,
+    className,
+    style,
+    showCloseBtn = false,
+    closeBtnTitle = 'Close',
+    closeBtnIcon,
+    onCloseClick,
+    onScroll
+  } = _ref;
+  if (!data || data.length === 0) return null;
+  // Keep iOS on its existing CSS path; Android hosts may not draw CSS URL backgrounds.
+  const useImageBackground = getSystemInfoSync().platform === 'android';
+  const scrollable = data.length >= 3 || showCloseBtn;
+  const renderTrack = (trackProps, guard) => /*#__PURE__*/React.createElement(View, _extends({}, trackProps, {
+    className: clsx(styles.track, !scrollable && styles.staticTrack)
+  }), data.map((item, index) => {
+    var _item$style;
+    const hasImageBackground = useImageBackground && !!item.backgroundImage;
+    return /*#__PURE__*/React.createElement(View, {
+      key: index // eslint-disable-line react/no-array-index-key
+      ,
+      className: clsx(styles.item, scrollable ? styles.scrollingItem : styles.staticItem, data.length === 1 && scrollable && styles.singleScrollingItem, index === 0 && styles.firstItem, index === data.length - 1 && !showCloseBtn && styles.lastItem, item.className),
+      style: getBackgroundStyle(_objectSpread(_objectSpread({}, item.style), {}, {
+        backgroundImage: item.backgroundImage && !hasImageBackground ? `url(${item.backgroundImage})` : undefined,
+        background: item.background || undefined
+      }, hasImageBackground ? {
+        zIndex: 0
+      } : {})),
+      onClick: guard ? event => guard(item.onClick, event) : item.onClick
+    }, hasImageBackground && /*#__PURE__*/React.createElement(Image, {
+      src: item.backgroundImage,
+      mode: "aspectFill",
+      className: styles.backgroundImage,
+      style: ((_item$style = item.style) === null || _item$style === void 0 ? void 0 : _item$style.borderRadius) !== undefined ? {
+        borderRadius: item.style.borderRadius
+      } : undefined
+    }), /*#__PURE__*/React.createElement(View, {
+      className: styles.icon
+    }, item.icon), /*#__PURE__*/React.createElement(View, {
+      className: styles.title
+    }, isText(item.title) ? /*#__PURE__*/React.createElement(Text, {
+      className: styles.titleText,
+      "text-maxline": 2
+    }, item.title) : item.title), !!item.tag && /*#__PURE__*/React.createElement(View, {
+      className: clsx(styles.tag, item.tagClassName),
+      style: getBackgroundStyle(item.tagStyle)
+    }, isText(item.tag) ? /*#__PURE__*/React.createElement(Text, {
+      className: styles.tagText,
+      "text-maxline": 1
+    }, item.tag) : item.tag));
+  }), showCloseBtn && /*#__PURE__*/React.createElement(View, {
+    className: styles.closeBtn,
+    onClick: guard ? event => guard(onCloseClick, event) : onCloseClick
+  }, closeBtnIcon, isText(closeBtnTitle) ? /*#__PURE__*/React.createElement(Text, {
+    className: styles.closeText
+  }, closeBtnTitle) : closeBtnTitle));
+  const scrollProps = {
+    className: styles.viewport,
+    scrollX: scrollable,
+    scrollY: false,
+    hideScrollbar: true,
+    onScroll
+  };
+  return /*#__PURE__*/React.createElement(View, {
+    className: clsx(styles.root, className),
+    style: style
+  }, useImageBackground && scrollable ? /*#__PURE__*/React.createElement(AndroidBounceScroll, scrollProps, renderTrack) : /*#__PURE__*/React.createElement(LynxScrollView, scrollProps, renderTrack()));
+};
+export default LynxHalfHorizontalDrag;

package/lib/lynx/index.module.less

@@ -0,0 +1,207 @@
+// Only used by the explicit Lynx renderer. Legacy CSS is kept byte-for-byte.
+.root {
+  --half-drag-height: 110rpx;
+  --half-drag-tag-inset: 20rpx;
+  --half-drag-item-width: 336rpx;
+  --half-drag-single-width: 686rpx;
+  --half-drag-side: 32rpx;
+  --half-drag-gap: 12rpx;
+  --half-drag-close-gap: 14rpx;
+  --half-drag-radius: 32rpx;
+  --half-drag-icon-size: 48rpx;
+  --half-drag-title-gap: 24rpx;
+  --half-drag-font-size: 28rpx;
+  --half-drag-line-height: 40rpx;
+  width: 100%;
+  min-width: 0;
+  height: var(--half-drag-height);
+  box-sizing: content-box;
+  display: flex;
+  flex-direction: column;
+  padding-top: 48rpx;
+}
+.viewport {
+  width: 100%;
+  height: calc(var(--half-drag-height) + var(--half-drag-tag-inset));
+  margin-top: calc(0px - var(--half-drag-tag-inset));
+  flex-shrink: 0;
+}
+.track {
+  overflow: visible;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: flex-start;
+  flex-shrink: 0;
+  height: calc(var(--half-drag-height) + var(--half-drag-tag-inset));
+  padding-top: var(--half-drag-tag-inset);
+  box-sizing: border-box;
+}
+.staticTrack {
+  width: 100%;
+}
+.item {
+  overflow: visible;
+  position: relative;
+  flex-shrink: 0;
+  height: var(--half-drag-height);
+  border-radius: var(--half-drag-radius);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 40rpx;
+  box-sizing: border-box;
+  color: #000;
+  background-color: #fff;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.scrollingItem {
+  width: var(--half-drag-item-width);
+  margin-left: var(--half-drag-gap);
+}
+.backgroundImage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--half-drag-radius);
+  z-index: -1;
+  pointer-events: none;
+}
+.singleScrollingItem {
+  width: var(--half-drag-single-width);
+}
+.staticItem {
+  flex: 1;
+  min-width: 0;
+  margin-left: var(--half-drag-side);
+}
+.firstItem {
+  margin-left: var(--half-drag-side);
+}
+.lastItem {
+  margin-right: var(--half-drag-side);
+}
+.icon {
+  width: var(--half-drag-icon-size);
+  height: var(--half-drag-icon-size);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.title {
+  flex: 1;
+  min-width: 0;
+  margin-left: var(--half-drag-title-gap);
+  overflow: hidden;
+  font-size: var(--half-drag-font-size);
+  line-height: var(--half-drag-line-height);
+}
+.titleText {
+  width: 100%;
+  max-height: calc(var(--half-drag-line-height) + var(--half-drag-line-height));
+  font-size: var(--half-drag-font-size);
+  line-height: var(--half-drag-line-height);
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tag {
+  position: absolute;
+  right: -6rpx;
+  top: calc(0px - var(--half-drag-tag-inset));
+  height: 40rpx;
+  line-height: 40rpx;
+  border-radius: 40rpx;
+  border-bottom-right-radius: 0;
+  padding: 0 20rpx;
+  font-size: 24rpx;
+  font-weight: 600;
+  background-color: #ebebeb;
+  background-image: linear-gradient(345deg, #b2b0b0 1%, #ebebeb 100%);
+  color: rgba(0, 0, 0, 0.4);
+  max-width: 128rpx;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.tagText {
+  max-width: 128rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+  font-size: 24rpx;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.closeText {
+  font-size: var(--half-drag-font-size);
+  white-space: nowrap;
+}
+.closeBtn {
+  height: var(--half-drag-height);
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--half-drag-close-gap);
+  margin-right: var(--half-drag-side);
+  border-radius: var(--half-drag-radius);
+  color: #f04c4c;
+  background-color: rgba(240, 76, 76, 0.2);
+  padding: 0 32rpx;
+  font-size: var(--half-drag-font-size);
+  font-weight: 500;
+}
+@media (min-width: 600px) {
+  .root {
+    --half-drag-height: 55px;
+    --half-drag-tag-inset: 10px;
+    --half-drag-item-width: 168px;
+    --half-drag-single-width: 343px;
+    --half-drag-side: 16px;
+    --half-drag-gap: 6px;
+    --half-drag-close-gap: 7px;
+    --half-drag-radius: 16px;
+    --half-drag-icon-size: 24px;
+    --half-drag-title-gap: 12px;
+    --half-drag-font-size: 16px;
+    --half-drag-line-height: 20px;
+    padding-top: 24px;
+  }
+  .item {
+    padding: 0 20px;
+  }
+  .tag {
+    right: -3px;
+    height: 20px;
+    line-height: 20px;
+    padding: 0 10px;
+    font-size: 14px;
+    max-width: 64px;
+  }
+  .tagText {
+    max-width: 64px;
+    height: 20px;
+    line-height: 20px;
+    font-size: 14px;
+  }
+  .closeBtn {
+    padding: 0 16px;
+  }
+}
+@media (min-width: 920px) {
+  .root {
+    --half-drag-font-size: 18px;
+  }
+  .tag {
+    font-size: 16px;
+  }
+  .tagText {
+    font-size: 16px;
+  }
+}

package/lib/props.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { ScrollView } from '@ray-js/ray';
 export type Data = {
-    title: string;
+    title: React.ReactNode;
     backgroundImage?: string;
     background?: string;
     icon?: React.ReactNode;
@@ -12,6 +13,10 @@ export type Data = {
     onClick?: () => void;
 };
 export interface IProps {
+    /** Explicit page renderer; defaults to the unchanged WebView implementation. */
+    renderMode?: 'webview' | 'lynx';
+    /** Lynx horizontal ScrollView event, used for integration diagnostics. */
+    onScroll?: React.ComponentProps<typeof ScrollView>['onScroll'];
     /**
      * @description.zh 数据
      * @description.en datas

package/lib/webview.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { IProps, Data } from './props';
+declare const HalfHorizontalDrag: React.FC<IProps>;
+export { type IProps, type Data };
+export default HalfHorizontalDrag;

package/lib/webview.js

@@ -0,0 +1,129 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import "core-js/modules/esnext.iterator.map.js";
+import React from 'react';
+import { View } from '@ray-js/ray';
+import clsx from 'clsx';
+import styles from './index.module.less';
+const NILL = () => null;
+const HalfHorizontalDrag = props => {
+  const {
+    className,
+    style,
+    data,
+    showCloseBtn,
+    onCloseClick = NILL,
+    closeBtnTitle = 'Close',
+    closeBtnIcon
+  } = props;
+  const renderCloseBtn = () => {
+    if (!showCloseBtn) return null;
+    return /*#__PURE__*/React.createElement(View, {
+      className: styles.closeBtn,
+      onClick: onCloseClick
+    }, closeBtnIcon, closeBtnTitle);
+  };
+  if (!data || !data.length) return null;
+  if (data.length === 1) {
+    const item = data[0];
+    const {
+      tag,
+      tagStyle,
+      tagClassName,
+      title,
+      onClick = NILL
+    } = item || {};
+    return /*#__PURE__*/React.createElement(View, {
+      className: clsx(styles.content, className, {
+        [styles.moreContent]: showCloseBtn
+      }),
+      style: _objectSpread({}, style)
+    }, /*#__PURE__*/React.createElement(View, {
+      style: _objectSpread(_objectSpread({}, item.style), {}, {
+        backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
+        background: item.background || undefined
+      }),
+      className: clsx(styles.one_data_item, styles.item, item.className, {
+        [styles.one_data_item_width]: showCloseBtn
+      }),
+      onClick: onClick
+    }, /*#__PURE__*/React.createElement(View, {
+      className: styles.icon
+    }, item.icon), /*#__PURE__*/React.createElement(View, {
+      className: styles.title
+    }, title), !!tag && /*#__PURE__*/React.createElement(View, {
+      style: _objectSpread({}, tagStyle),
+      className: clsx(styles.tag, tagClassName)
+    }, tag)), renderCloseBtn());
+  }
+  if (data.length === 2) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: clsx(styles.content, styles.towContent, className, {
+        [styles.moreContent]: showCloseBtn
+      }),
+      style: _objectSpread({}, style)
+    }, data.map((item, idx) => {
+      const {
+        title,
+        tag,
+        tagStyle,
+        tagClassName,
+        onClick = NILL
+      } = item;
+      return /*#__PURE__*/React.createElement(View, {
+        key: idx // eslint-disable-line
+        ,
+        style: _objectSpread(_objectSpread({}, item.style), {}, {
+          backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
+          background: item.background || undefined
+        }),
+        onClick: onClick,
+        className: clsx(styles.two_data_item, styles.item, item.className, {
+          [styles.two_data_item_width]: showCloseBtn
+        })
+      }, /*#__PURE__*/React.createElement(View, {
+        className: styles.icon
+      }, item.icon), /*#__PURE__*/React.createElement(View, {
+        className: styles.title
+      }, title), !!tag && /*#__PURE__*/React.createElement(View, {
+        style: _objectSpread({}, tagStyle),
+        className: clsx(styles.tag, tagClassName)
+      }, tag));
+    }), renderCloseBtn());
+  }
+  if (data.length >= 3) {
+    return /*#__PURE__*/React.createElement(View, {
+      className: clsx(styles.content, styles.moreContent, className),
+      style: _objectSpread({}, style)
+    }, data.map((item, idx) => {
+      const {
+        title,
+        tag,
+        tagStyle,
+        tagClassName,
+        onClick = NILL
+      } = item;
+      return /*#__PURE__*/React.createElement(View
+      // eslint-disable-next-line react/no-array-index-key
+      , {
+        key: idx,
+        style: _objectSpread(_objectSpread({}, item.style), {}, {
+          backgroundImage: item.backgroundImage ? `url(${item.backgroundImage})` : undefined,
+          background: item.background || undefined
+        }),
+        className: clsx(styles.item, styles.more_data_item, item.className),
+        onClick: onClick
+      }, /*#__PURE__*/React.createElement(View, {
+        className: styles.icon
+      }, item.icon), /*#__PURE__*/React.createElement(View, {
+        className: styles.title
+      }, title), !!tag && /*#__PURE__*/React.createElement(View, {
+        style: _objectSpread({}, tagStyle),
+        className: clsx(styles.tag, tagClassName)
+      }, tag));
+    }), renderCloseBtn());
+  }
+  return null;
+};
+HalfHorizontalDrag.displayName = 'HalfHorizontalDrag';
+export {};
+export default HalfHorizontalDrag;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/ray-ipc-half-horizontal-drag",
-  "version": "0.0.6",
+  "version": "0.0.7-beta.1",
   "description": "水平方向可拖动，显示出下一个组件的小部分内容",
   "main": "lib/index",
   "files": [
@@ -28,7 +28,9 @@
     "start:wechat": "ray start ./example -t wechat --verbose",
     "start:web": "ray start ./example -t web",
     "prepublishOnly": "yarn build",
-    "release-it": "standard-version"
+    "release-it": "standard-version",
+    "test": "node --test tests/render-mode.test.cjs",
+    "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
     "@ray-js/ray": "^1.4.9"
@@ -41,7 +43,7 @@
     "@commitlint/cli": "^7.2.1",
     "@commitlint/config-conventional": "^9.0.1",
     "@ray-js/cli": "^1.4.9",
-    "@ray-js/panel-sdk": "^1.13.0-storage.7",
+    "@ray-js/panel-sdk": "^1.16.1",
     "@ray-js/ray": "^1.4.9",
     "core-js": "^3.19.1",
     "eslint-config-tuya-panel": "^0.4.2",