@lynx-js/types 3.4.3 → 3.4.11

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # CHANGELOG
 
+## 3.4.11
+- Fix types of `selectAll()` of `SelectorQuery`.
+
+## 3.4.10
+- Add `animate` for `MainThread.Element`
+
+## 3.4.9
+- Add more interface for `scroll-view`.
+
+## 3.4.8
+- Introduce `disabled` for input and textarea.
+
+## 3.4.6
+- fix `TextCodecHelper` defines.
+- Update `fetch` defines for chunk streaming.
+
+## 3.4.5
+- Complete the documentation for image related APIs.
+
+## 3.4.4
+- Revert automatically generated cssTypes
+
 ## 3.4.3
 - Add `font-variation-settings`,`font-feature-settings` and `font-optical-sizing` CSS properties.
 - Add `experimental-recycle-available-item-before-layout` property for list.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/types",
-  "version": "3.4.3",
+  "version": "3.4.11",
   "description": "",
   "keywords": [
     "lynx",

package/types/background-thread/fetch.d.ts

@@ -74,6 +74,10 @@ export declare var Request: {
   new (input: RequestInfo | URL, init?: RequestInit): Request;
 };
 
+export interface LynxExtension {
+  useStreaming?: boolean;
+}
+
 /**
  * @description This Fetch API interface represents the response to a request.
  * @see https://developer.mozilla.org/docs/Web/API/Response
@@ -95,6 +99,11 @@ export interface RequestInit {
    * @since 2.18
    */
   method?: string;
+  /**
+   * @description Lynx extension, currently used for requesting chunk streaming
+   * @since 3.4
+   */
+  lynxExtension?: LynxExtension;
 }
 
 /**
@@ -133,6 +142,12 @@ export interface Response extends Body {
    * @since 2.18
    */
   readonly url: string;
+  /**
+   * @description body of ReadableStream
+   * @see https://developer.mozilla.org/docs/Web/API/Response/body
+   * @since 3.4
+   */
+  readonly body: ReadableStream;
   /**
    * @description clone()
    * @see https://developer.mozilla.org/docs/Web/API/Response/clone

package/types/background-thread/index.d.ts

@@ -9,3 +9,4 @@ export * from './nodes-ref';
 export * from './performance';
 export * from './native-modules';
 export * from './lynx-performance-entry';
+export * from './text-encoder-decoder';

package/types/background-thread/lynx-performance-entry.d.ts

@@ -90,6 +90,17 @@ export interface MetricActualFmpEntry extends PerformanceEntry {
     totalActualFmp: PerformanceMetric;
 }
 
+/**
+ * @deprecated Due to the influence of long tasks on this metric, the statistical results are 
+ * inaccurate, so this type has been deprecated. 
+ * Since version 3.3, you will no longer receive this event.
+ **/
+export interface MetricTtiEntry extends PerformanceEntry {
+    tti: PerformanceMetric;
+    lynxTti: PerformanceMetric;
+    totalTti: PerformanceMetric;
+}
+
 export interface ReloadBundleEntry extends PipelineEntry {
     reloadBundleStart: number;
     reloadBundleEnd: number;

package/types/background-thread/lynx.d.ts

@@ -7,7 +7,7 @@ import { AnimationElement } from './animation';
 import { BeforePublishEvent, GlobalEventEmitter, IntersectionObserver } from './event';
 import { SelectorQuery } from './nodes-ref';
 import { Performance } from './performance';
-import { Response } from './fetch';
+import { Response, RequestInit } from './fetch';
 
 export * from './fetch';
 

package/types/background-thread/nodes-ref.d.ts

@@ -58,9 +58,21 @@ export interface FieldsData {
   attribute: Record<string, unknown>;
 }
 
-export type PathCallback = (data: PathData, status: { data: string; code: number }) => void;
+export type PathCallback = (data: PathData | null, status: { data: string; code: number }) => void;
 
-export interface NodesRef {
+interface BaseNodesRef {
+  animate(animations: AnimationV2[] | AnimationV2): SelectorQuery;
+
+  playAnimation(ids: string[] | string): SelectorQuery;
+
+  pauseAnimation(ids: string[] | string): SelectorQuery;
+
+  cancelAnimation(ids: string[] | string): SelectorQuery;
+
+  setNativeProps(nativeProps: Record<string, any>): SelectorQuery;
+}
+
+export interface NodesRef extends BaseNodesRef {
   invoke(options: uiMethodOptions): SelectorQuery;
 
   path(callback: PathCallback): SelectorQuery;
@@ -70,20 +82,24 @@ export interface NodesRef {
     callback: (
       data: {
         [K in keyof Required<FieldsParams> as T[K] extends true ? K : never]: FieldsData[K];
-      },
+      } | null,
       status: { data: string; code: number }
     ) => void
   ): SelectorQuery;
+}
 
-  animate(animations: AnimationV2[] | AnimationV2): SelectorQuery;
-
-  playAnimation(ids: string[] | string): SelectorQuery;
-
-  pauseAnimation(ids: string[] | string): SelectorQuery;
+export interface MultiNodesRef extends BaseNodesRef {
+  path(callback: (data: PathData[], status: { data: string; code: number }) => void): SelectorQuery;
 
-  cancelAnimation(ids: string[] | string): SelectorQuery;
-
-  setNativeProps(nativeProps: Record<string, any>): SelectorQuery;
+  fields<T extends FieldsParams>(
+    fields: Required<FieldsParams> extends Record<keyof T, boolean> ? T : FieldsParams,
+    callback: (
+      data: {
+        [K in keyof Required<FieldsParams> as T[K] extends true ? K : never]: FieldsData[K];
+      }[],
+      status: { data: string; code: number }
+    ) => void
+  ): SelectorQuery;
 }
 
 export interface SelectorQuery {
@@ -97,7 +113,7 @@ export interface SelectorQuery {
    * Selects all nodes satisfying CSS selector.
    * @param selector CSS selector
    */
-  selectAll(selector: string): NodesRef;
+  selectAll(selector: string): MultiNodesRef;
 
   /**
    * Select root node of the component.

package/types/background-thread/text-encoder-decoder.d.ts

@@ -1,22 +1,16 @@
-export interface TextEncoder {
-    encode(str: string): ArrayBuffer;
-    encoding: 'utf-8';
-}
-
-type TypedArray =
-  | Int8Array
-  | Uint8Array
-  | Uint8ClampedArray
-  | Int16Array
-  | Uint16Array
-  | Int32Array
-  | Uint32Array
-  | Float32Array
-  | Float64Array;
+// Copyright 2025 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
 
-export interface TextDecoder {
-    decode(buffer: ArrayBuffer | TypedArray | DataView): string;
-    encoding: 'utf-8';
-    fatal: false;
-    ignoreBOM: true;
-}
+export interface ITextCodecHelper {
+  /**
+   * @description decode array buffer to string
+   * @since 3.4
+   */
+  decode(input: ArrayBuffer): string;
+  /**
+   * @description encode string to array buffer
+   * @since 3.4
+   */
+  encode(input: string): ArrayBuffer;
+}

package/types/common/csstype.d.ts

@@ -2,244 +2,106 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 
-/**
- * This file is auto-generated from CSS define files in the css_defines directory.
- * Each property's type is determined by:
- * 1. For enum types: Uses the values array from the CSS define file
- * 2. For properties with keywords: Uses the keywords array as enum values, with (string & {}) for open-ended types
- * 3. For other types: Uses string type
- */
+import * as CSS from 'csstype';
 
-export type CSSProperties = {
-  // layout
-  flexFlow?: string;
-  marginInlineStart?: string;
-  marginInlineEnd?: string;
-  paddingInlineStart?: string;
-  paddingInlineEnd?: string;
-  gridTemplateColumns?: string;
-  gridTemplateRows?: string;
-  gridAutoColumns?: string;
-  gridAutoRows?: string;
-  gridColumnSpan?: number;
-  gridRowSpan?: number;
-  gridColumnStart?: string;
-  gridColumnEnd?: string;
-  gridRowStart?: string;
-  gridRowEnd?: string;
-  gridColumnGap?: string;
-  gridRowGap?: string;
-  gridAutoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
-  maskPosition?: string;
-  display?: 'none' | 'flex' | 'grid' | 'linear' | 'relative' | 'block' | 'auto';
-  padding?: string;
-  paddingLeft?: string;
-  paddingRight?: string;
-  paddingTop?: string;
-  paddingBottom?: string;
-  margin?: string;
-  marginLeft?: string;
-  marginRight?: string;
-  marginTop?: string;
-  marginBottom?: string;
-  flex?: string;
-  position?: 'absolute' | 'relative' | 'fixed' | 'sticky';
-  flexGrow?: number;
-  flexShrink?: number;
-  flexBasis?: string;
-  flexDirection?: 'column' | 'row' | 'row-reverse' | 'column-reverse';
-  flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
-  backgroundPosition?: string;
-
-  // typography
-  outline?: string;
-  outlineColor?: string;
-  outlineStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-  outlineWidth?: string;
-  textDecorationColor?: string;
-  linearCrossGravity?: 'none' | 'start' | 'end' | 'center' | 'stretch';
-  borderInlineStartColor?: string;
-  borderInlineEndColor?: string;
-  borderInlineStartWidth?: string;
-  borderInlineEndWidth?: string;
-  borderInlineStartStyle?: string;
-  borderInlineEndStyle?: string;
-  relativeAlignInlineStart?: string;
-  relativeAlignInlineEnd?: string;
-  relativeInlineStartOf?: number;
-  relativeInlineEndOf?: number;
-  insetInlineStart?: string;
-  insetInlineEnd?: string;
-  linearDirection?: string;
-  textIndent?: string;
-  textStroke?: string;
-  textStrokeWidth?: string;
-  textStrokeColor?: string;
-  XAutoFontSize?: string;
-  XAutoFontSizePresetSizes?: string;
-  fontVariationSettings?: string;
-  fontFeatureSettings?: string;
-  fontOpticalSizing?: 'none' | 'auto';
-  textAlign?: 'left' | 'center' | 'right' | 'start' | 'end' | 'justify';
-  lineHeight?: string;
-  textOverflow?: 'clip' | 'ellipsis';
-  fontSize?: string;
-  fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
-  fontFamily?: string;
-  fontStyle?: 'normal' | 'italic' | 'oblique';
-  lineSpacing?: string;
-  linearOrientation?: 'horizontal' | 'vertical' | 'horizontal-reverse' | 'vertical-reverse' | 'row' | 'column' | 'row-reverse' | 'column-reverse';
-  linearWeightSum?: number;
-  linearWeight?: number;
-  linearGravity?: 'none' | 'top' | 'bottom' | 'left' | 'right' | 'center-vertical' | 'center-horizontal' | 'space-between' | 'start' | 'end' | 'center';
-  linearLayoutGravity?: 'none' | 'top' | 'bottom' | 'left' | 'right' | 'center-vertical' | 'center-horizontal' | 'fill-vertical' | 'fill-horizontal' | 'center' | 'stretch' | 'start' | 'end';
-  adaptFontSize?: string;
-  textDecoration?: 'none' | 'underline' | 'line-through' | (string & {});
-  textShadow?: string;
-
-  // visual
-  borderTopColor?: string;
-  backgroundOrigin?: 'border-box' | 'content-box' | 'padding-box';
-  backgroundRepeat?: 'no-repeat' | 'repeat-x' | 'repeat-y' | 'repeat' | 'round' | 'space';
-  backgroundSize?: string;
-  border?: string;
-  borderRight?: string;
-  borderLeft?: string;
-  borderTop?: string;
-  borderBottom?: string;
-  borderBottomColor?: string;
-  borderLeftStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-  borderRightStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-  borderTopStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-  borderBottomStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-  borderRadius?: string;
-  backgroundClip?: 'border-box' | 'content-box' | 'padding-box' | 'text';
-  caretColor?: string;
-  borderTopLeftRadius?: string;
-  borderBottomLeftRadius?: string;
-  borderTopRightRadius?: string;
-  borderBottomRightRadius?: string;
-  borderStartStartRadius?: string;
-  borderEndStartRadius?: string;
-  borderStartEndRadius?: string;
-  borderEndEndRadius?: string;
-  borderWidth?: string;
-  borderLeftWidth?: string;
-  borderRightWidth?: string;
-  borderTopWidth?: string;
-  borderBottomWidth?: string;
-  XAnimationColorInterpolation?: 'auto' | 'sRGB' | 'linearRGB';
-  XHandleColor?: string;
-  color?: string;
-  background?: string;
-  borderColor?: string;
-  backgroundColor?: string;
-  borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
-  borderLeftColor?: string;
-  borderRightColor?: string;
-  backgroundImage?: string;
-
-  // animation
-  transition?: string;
-  transitionProperty?: 'none' | 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | 'width' | 'height' | 'background-color' | 'visibility' | 'left' | 'top' | 'right' | 'bottom' | 'transform' | 'all' | (string & {});
-  transitionDuration?: string;
-  transitionDelay?: string;
-  transitionTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
-  implicitAnimation?: string;
-  enterTransitionName?: string;
-  exitTransitionName?: string;
-  pauseTransitionName?: string;
-  resumeTransitionName?: string;
-  animation?: string;
-  animationName?: string;
-  animationDuration?: string;
-  animationTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
-  animationDelay?: string;
-  animationIterationCount?: string;
-  animationDirection?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
-  animationFillMode?: 'none' | 'forwards' | 'backwards' | 'both';
-  animationPlayState?: 'paused' | 'running';
-  layoutAnimationCreateDuration?: string;
-  layoutAnimationCreateTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
-  layoutAnimationCreateDelay?: string;
-  layoutAnimationCreateProperty?: 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | (string & {});
-  layoutAnimationDeleteDuration?: string;
-  layoutAnimationDeleteTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
-  layoutAnimationDeleteDelay?: string;
-  layoutAnimationDeleteProperty?: 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | (string & {});
-  layoutAnimationUpdateDuration?: string;
-  layoutAnimationUpdateTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
-  layoutAnimationUpdateDelay?: string;
+export type Modify<T, R> = Omit<T, keyof R> & R;
 
-  // other
-  top?: string;
-  visibility?: 'hidden' | 'visible' | 'none' | 'collapse';
-  content?: string;
-  overflowX?: 'hidden' | 'visible' | (string & {});
-  overflowY?: 'hidden' | 'visible' | (string & {});
-  wordBreak?: 'normal' | 'break-all' | 'keep-all';
-  verticalAlign?: 'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom' | (string & {});
-  direction?: 'normal' | 'lynx-rtl' | 'rtl' | 'ltr';
-  relativeId?: number;
-  relativeAlignTop?: string;
-  relativeAlignRight?: string;
-  relativeAlignBottom?: string;
-  relativeAlignLeft?: string;
-  relativeTopOf?: number;
-  relativeRightOf?: number;
-  relativeBottomOf?: number;
-  relativeLeftOf?: number;
-  relativeLayoutOnce?: string;
-  relativeCenter?: 'none' | 'vertical' | 'horizontal' | 'both';
-  zIndex?: number;
-  maskImage?: string;
-  justifyItems?: 'start' | 'end' | 'center' | 'stretch' | 'auto';
-  justifySelf?: 'start' | 'end' | 'center' | 'stretch' | 'auto';
-  filter?: string;
-  listMainAxisGap?: 'grayscale' | (string & {});
-  listCrossAxisGap?: string;
-  perspective?: 'number' | 'vw' | 'vh' | 'default' | 'px';
-  cursor?: string;
-  clipPath?: string;
-  mask?: string;
-  left?: string;
-  maskRepeat?: string;
-  maskClip?: string;
-  maskOrigin?: string;
-  maskSize?: string;
-  gap?: string;
-  columnGap?: string;
-  rowGap?: string;
-  imageRendering?: 'auto' | 'crisp-edges' | 'pixelated';
-  hyphens?: 'none' | 'manual' | 'auto';
-  XAppRegion?: 'none' | 'drag' | 'no-drag';
-  XHandleSize?: string;
-  offsetDistance?: number;
-  offsetPath?: string;
-  offsetRotate?: string;
-  opacity?: number;
-  overflow?: 'hidden' | 'visible' | (string & {});
-  height?: string;
-  width?: string;
-  maxWidth?: string;
-  minWidth?: string;
-  right?: string;
-  maxHeight?: string;
-  minHeight?: string;
-  bottom?: string;
-  whiteSpace?: 'normal' | 'nowrap';
-  letterSpacing?: string;
-  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'auto' | 'start' | 'end' | 'baseline';
-  alignSelf?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'auto' | 'start' | 'end' | 'baseline';
-  alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'start' | 'end';
-  justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end';
-  boxSizing?: 'border-box' | 'content-box' | 'auto';
-  transform?: 'translate' | 'translateX' | 'translateY' | 'translateZ' | 'translate' | 'translate3d' | 'translate3D' | 'rotate' | 'rotateX' | 'rotateY' | 'rotateZ' | 'scale' | 'scaleX' | 'scaleY' | (string & {});
-  order?: number;
-  boxShadow?: string;
-  transformOrigin?: 'left' | 'right' | 'top' | 'bottom' | 'center' | (string & {});
-  aspectRatio?: string;
-};
+export type CSSProperties = Modify<
+  CSS.Properties<string | number>,
+  {
+    position?: 'absolute' | 'relative' | 'fixed' | 'sticky';
+    boxSizing?: 'border-box' | 'content-box' | 'auto';
+    display?: 'none' | 'flex' | 'grid' | 'linear' | 'relative' | 'block' | 'auto';
+    overflow?: 'hidden' | 'visible' | (string & {});
+    whiteSpace?: 'normal' | 'nowrap';
+    textAlign?: 'left' | 'center' | 'right' | 'start' | 'end';
+    textOverflow?: 'clip' | 'ellipsis';
+    fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    flexDirection?: 'column' | 'row' | 'row-reverse' | 'column-reverse';
+    flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'start' | 'end';
+    justifyContent?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end';
+    fontStyle?: 'normal' | 'italic' | 'oblique';
+    transform?:
+      | 'translate'
+      | 'translateX'
+      | 'translateY'
+      | 'translateZ'
+      | 'translate'
+      | 'translate3d'
+      | 'translate3D'
+      | 'rotate'
+      | 'rotateX'
+      | 'rotateY'
+      | 'rotateZ'
+      | 'scale'
+      | 'scaleX'
+      | 'scaleY'
+      | (string & {});
+    animationTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+    borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    transformOrigin?: 'left' | 'right' | 'top' | 'bottom' | 'center' | (string & {});
+    linearDirection?: 'column' | 'row' | 'column-reverse' | 'row-reverse';
+    linearOrientation?: 'horizontal' | 'vertical' | 'horizontal-reverse' | 'vertical-reverse';
+    linearWeight?: number;
+    linearGravity?: 'none' | 'top' | 'bottom' | 'left' | 'right' | 'center-vertical' | 'center-horizontal' | 'space-between' | 'start' | 'end' | 'center';
+    linearLayoutGravity?:
+      | 'none'
+      | 'top'
+      | 'bottom'
+      | 'left'
+      | 'right'
+      | 'center-vertical'
+      | 'center-horizontal'
+      | 'fill-vertical'
+      | 'fill-horizontal'
+      | 'center'
+      | 'stretch'
+      | 'start'
+      | 'end';
+    layoutAnimationCreateTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+    layoutAnimationCreateProperty?: 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | (string & {});
+    layoutAnimationDeleteTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+    layoutAnimationDeleteProperty?: 'opacity' | 'scaleX' | 'scaleY' | 'scaleXY' | (string & {});
+    layoutAnimationUpdateTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+    textDecoration?: 'none' | 'underline' | 'line-through' | (string & {});
+    visibility?: 'hidden' | 'visible' | 'none' | 'collapse';
+    transitionProperty?:
+      | 'none'
+      | 'opacity'
+      | 'scaleX'
+      | 'scaleY'
+      | 'scaleXY'
+      | 'width'
+      | 'height'
+      | 'background-color'
+      | 'visibility'
+      | 'left'
+      | 'top'
+      | 'right'
+      | 'bottom'
+      | 'transform'
+      | 'all'
+      | (string & {});
+    transitionTimingFunction?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-ease-out' | 'ease' | 'ease-in-out' | 'square-bezier' | 'cubic-bezier' | (string & {});
+    borderLeftStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    borderRightStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    borderTopStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    borderBottomStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    overflowX?: 'hidden' | 'visible' | (string & {});
+    overflowY?: 'hidden' | 'visible' | (string & {});
+    wordBreak?: 'normal' | 'break-all' | 'keep-all';
+    outlineStyle?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | 'hidden' | 'none' | (string & {});
+    verticalAlign?: 'baseline' | 'sub' | 'super' | 'top' | 'text-top' | 'middle' | 'bottom' | 'text-bottom' | (string & {});
+    direction?: 'normal' | 'lynx-rtl' | 'rtl' | 'ltr';
+    relativeCenter?: 'none' | 'vertical' | 'horizontal' | 'both';
+    linearCrossGravity?: 'none' | 'start' | 'end' | 'center' | 'stretch';
+    listMainAxisGap?: 'grayscale' | (string & {});
+    fontVariationSettings?: string;
+    fontFeatureSettings?: string;
+    fontOpticalSizing?: 'none' | 'auto';
+  }
+>;
 
 export type Shorthands = 
   // layout
@@ -264,5 +126,8 @@ export type Longhands =
   // other
   "top" | "visibility" | "content" | "overflowX" | "overflowY" | "wordBreak" | "verticalAlign" | "direction" | "relativeId" | "relativeAlignTop" | "relativeAlignRight" | "relativeAlignBottom" | "relativeAlignLeft" | "relativeTopOf" | "relativeRightOf" | "relativeBottomOf" | "relativeLeftOf" | "relativeLayoutOnce" | "relativeCenter" | "zIndex" | "maskImage" | "justifyItems" | "justifySelf" | "filter" | "listMainAxisGap" | "listCrossAxisGap" | "perspective" | "cursor" | "clipPath" | "left" | "maskRepeat" | "maskClip" | "maskOrigin" | "maskSize" | "columnGap" | "rowGap" | "imageRendering" | "hyphens" | "XAppRegion" | "XHandleSize" | "offsetDistance" | "offsetPath" | "offsetRotate" | "opacity" | "height" | "width" | "maxWidth" | "minWidth" | "right" | "maxHeight" | "minHeight" | "bottom" | "letterSpacing" | "alignItems" | "alignSelf" | "alignContent" | "justifyContent" | "boxSizing" | "transform" | "order" | "boxShadow" | "transformOrigin" | "aspectRatio";
 
-export type CSSPropertiesWithShorthands = Pick<CSSProperties, Shorthands>;
-export type CSSPropertiesWithLonghands = Pick<CSSProperties, Longhands>;
+// Since `Shorthands` and `Longhands` are auto generated, there may be properties
+// such as `gridColumnSpan` is not manually defined in `CSSProperties` yet.
+// Use `& keyof CSSProperties` to ensure only the defined keys are included to avoid type error.
+export type CSSPropertiesWithShorthands = Pick<CSSProperties, Shorthands & keyof CSSProperties>;
+export type CSSPropertiesWithLonghands = Pick<CSSProperties, Longhands & keyof CSSProperties>;

package/types/common/element/list.d.ts

@@ -1095,6 +1095,16 @@ export interface ListItemProps extends StandardProps {
    */
   'item-key': string;
 
+  /**
+   * Control whether the list-item can be recycled. If set to false, the list-item will not be recycled after being scrolled off the screen, and do not need to be re-rendered when they come back on the screen. The default value is true.
+   * @since 3.4
+   * @defaultValue true
+   * @Android
+   * @iOS
+   * @Harmony
+   */
+  recyclable?: boolean | undefined;
+
   bindnodeappear?: EventHandler<AppearanceEvent>;
   bindnodedisappear?: EventHandler<AppearanceEvent>;
 }

package/types/common/global.d.ts

@@ -3,7 +3,7 @@
 // LICENSE file in the root directory of this source tree.
 
 import { SystemInfo } from './system-info';
-import { Lynx as BackgroundLynx, NativeModules as INativeModules, GetElementByIdFunc } from '../background-thread';
+import { Lynx as BackgroundLynx, NativeModules as INativeModules, GetElementByIdFunc, ITextCodecHelper } from '../background-thread';
 import { Lynx as MainThreadLynx } from '../main-thread';
 import { CommonLynx } from './lynx';
 
@@ -25,6 +25,7 @@ declare global {
   var getElementById: GetElementByIdFunc;
 
   var NativeModules: INativeModules;
+  var TextCodecHelper: ITextCodecHelper;
 
   /**
    * @description requestAnimationFrame

package/types/main-thread/animation.d.ts

@@ -0,0 +1,114 @@
+// Copyright 2025 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { Element } from './element'
+
+/**
+ * Animation timing options configuration
+ */
+export interface AnimationOptions {
+  /**
+   * The length of time for the animation to run.
+   * @default 0
+   */
+  duration?: number;
+
+  /**
+   * The length of time to wait before starting the animation.
+   * @default 0
+   */
+  delay?: number;
+
+  /**
+   * The number of times the animation should repeat. You can set this to `Infinity`
+   * to make the animation loop indefinitely.
+   * @default 1
+   */
+  iterations?: number | typeof Infinity;
+
+  /**
+   * Whether the animation runs forwards (`normal`), backwards (`reverse`),
+   * switches direction after each iteration (`alternate`), or runs backwards
+   * and switches direction after each iteration (`alternate-reverse`).
+   * @default "normal"
+   */
+  direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
+
+  /**
+   * The rate of the animation's change over time. Accepts a timing-function,
+   * such as `"linear"`, `"ease-in"`, or `"cubic-bezier(0.42, 0, 0.58, 1)"`.
+   * @default "linear"
+   */
+  easing?: string;
+
+  /**
+   * Dictates whether the animation's effects should be reflected by the
+   * element(s) prior to playing (`"backwards"`), retained after the animation
+   * has completed playing (`"forwards"`), or both.
+   * @default "none"
+   */
+  fill?: 'none' | 'forwards' | 'backwards' | 'both';
+
+  /**
+   * The name of the animation, which can be used to uniquely identify it.
+   * This name appears in the animation events parameters and is typically used
+   * to determine if a particular animation event is the one you're interested in.
+   * @since 2.12
+   * @default "An internal unique ID"
+   */
+  name?: string;
+
+  /**
+   * Animation motion state, which defines whether an animation is running or paused.
+   * Accepts an `animation-play-state`.
+   * @default "running"
+   */
+  'play-state'?: 'running' | 'paused';
+}
+
+/**
+ * Represents a keyframe effect for animations.
+ */
+export interface KeyframeEffect {
+  /**
+   * The target element of the animation.
+   */
+  readonly target: Element;
+  /**
+   * The keyframes for the animation.
+   */
+  readonly keyframes: Record<string, string | number>[];
+  /**
+   * The options for the animation.
+   */
+  readonly options: AnimationOptions;
+}
+
+/**
+ * Represents a CSS animation.
+ */
+export interface Animation {
+  /**
+   * The keyframe effect associated with the animation.
+   */
+  readonly effect: KeyframeEffect;
+  /**
+   * The unique identifier for the animation.
+   */
+  readonly id: string;
+
+  /**
+   * Cancel the animation.
+   */
+  cancel(): void;
+
+  /**
+   * Pause the animation.
+   */
+  pause(): void;
+
+  /**
+   * Play the animation.
+   */
+  play(): void;
+}

package/types/main-thread/element.d.ts

@@ -3,6 +3,7 @@
 // LICENSE file in the root directory of this source tree.
 
 import { CSSProperties } from '../common';
+import { Animation, AnimationOptions } from './animation'
 
 export interface Element {
   styles: CSSProperties;
@@ -82,4 +83,15 @@ export interface Element {
    * @since Lynx 2.14
    */
   invoke(methodName: string, params?: Record<string, any>): Promise<any>;
+
+  /**
+   * Animate the element.
+   * @param keyframes The keyframes for the animation.
+   * @param options The options for the animation.
+   * @since Lynx 3.4
+   */
+  animate(
+    keyframes: Record<string, number | string>[],
+    options?: number | AnimationOptions,
+  ): Animation;
 }

package/types/main-thread/index.d.ts

@@ -5,3 +5,4 @@
 export * from './lynx';
 export * from './element';
 export * from './events';
+export * from './animation'