@lynx-js/types 3.3.1 → 3.3.2

package/CHANGELOG.md

@@ -1,8 +1,61 @@
 # CHANGELOG
 
+## 3.5.0
+- Add a new `flowIds` subfield to the TraceOption parameter in the Trace API to support one-to-many trace associations.
+- Refactor event definitions for improved IDE compatibility.
+
+## 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
+- Complete the documentation for text related APIs.
+
+## 3.4.3
+- Add `font-variation-settings`,`font-feature-settings` and `font-optical-sizing` CSS properties.
+- Add `experimental-recycle-available-item-before-layout` and `enable-dynamic-span-count` property for list.
+
+## 3.4.2
+- And `lynx.fetchBundle` api defines.
+- And `ResponseHandler` defines.
+
+## 3.4.1
+
+- Add the following properties: `custom-context-menu`, `custom-text-selection`, `text-selection`.
+- Add the following methods: `setTextSelection`, `getTextBoundingRect`, `getSelectedText`.
+- Add `bindselectionchange` event.
+- Add `addFont` method.
+
+## 3.4.0
+
+### Major Changes
+
+- Introduce <input> and <textarea>
+
+## 3.3.2
+- SelectorQuery FieldsParams adds query attribute
+- Revert automatically generated cssTypes
+- Add typing for the runtime interfaces.
+- Codegen longhand and shorthand properties from css_defines
+- Add `experimental-recycle-sticky-item` and `sticky-buffer-count` for list
+- Add `experimental-update-sticky-for-diff` for list
+- Add ReloadBundleEntry to standardize the timing of reload behavior.
+- Add typing for MessageEvent.
+
 ## 3.3.1
 
-- [Infra][Types] Codegen csstype.d.ts from css_defines
+- Codegen csstype.d.ts from css_defines
+- Rename `visibleCellsAfterUpdate` to `visibleItemAfterUpdate` for `list`
+- Rename `visibleCellsBeforeUpdate` to `visibleItemBeforeUpdate` for `list`
 
 ## 3.3.0
 

package/package.json

@@ -1,11 +1,15 @@
 {
   "name": "@lynx-js/types",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "",
   "keywords": [
     "lynx",
     "types"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lynx-family/lynx.git"
+  },
   "license": "Apache-2.0",
   "author": "Lynx Authors",
   "types": "types/index.d.ts",

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

@@ -34,6 +34,7 @@ export interface PipelineEntry extends PerformanceEntry {
     layoutUiOperationExecuteEnd: number;
     paintEnd: number;
     frameworkRenderingTiming: FrameworkRenderingTimings[keyof FrameworkRenderingTimings] & FrameworkRenderingTiming;
+    hostPlatformTiming: HostPlatformTiming;
 }
 
 export interface LoadBundleEntry extends PipelineEntry {
@@ -88,3 +89,55 @@ export interface MetricActualFmpEntry extends PerformanceEntry {
     lynxActualFmp: PerformanceMetric;
     totalActualFmp: PerformanceMetric;
 }
+
+export interface ReloadBundleEntry extends PipelineEntry {
+    reloadBundleStart: number;
+    reloadBundleEnd: number;
+    reloadBackgroundStart: number;
+    reloadBackgroundEnd: number;
+    ffiStart: number;
+    ffiEnd: number;
+}
+
+export interface MemoryUsageEntry extends PerformanceEntry {
+    sizeBytes: any;
+    detail: Record<string, MemoryUsageItem>;
+}
+
+export interface MemoryUsageItem {
+    category: string;
+    sizeBytes: any;
+    detail: Record<string, string>;
+}
+
+export interface LazyBundleEntry extends PerformanceEntry {
+    componentUrl: string;
+    mode: string;
+    size: number;
+    sync: boolean;
+    loadSuccess: boolean;
+    requireStart: number;
+    requireEnd: number;
+    decodeStart: number;
+    decodeEnd: number;
+}
+
+export interface AndroidHostPlatformTiming {
+    hostPlatformType: 'Android';
+    measureStart: number;
+    measureEnd: number;
+    layoutStart: number;
+    layoutEnd: number;
+    drawStart: number;
+    drawEnd: number;
+}
+
+export interface IOSHostPlatformTiming {
+    hostPlatformType: 'iOS';
+}
+
+export interface HarmonyHostPlatformTiming {
+    hostPlatformType: 'Harmony';
+}
+
+export type HostPlatformTiming = AndroidHostPlatformTiming | IOSHostPlatformTiming | HarmonyHostPlatformTiming

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';
 
@@ -70,6 +70,11 @@ export interface ResourcePrefetchResult {
   }[];
 }
 
+export interface FontFace {
+  'font-family': string;
+  'src': string;
+}
+
 export type GetElementByIdFunc = (id: string) => AnimationElement;
 
 /**
@@ -150,4 +155,9 @@ export interface Lynx extends CommonLynx {
    */
   onError?: (error: Error) => void;
 
+  /**
+   * @description Dynamic add font
+   * @since 2.12
+   */
+  addFont(fontFace: FontFace, callback?: () => void): void;
 }

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

@@ -47,6 +47,7 @@ export interface FieldsParams {
   index?: boolean;
   class?: boolean;
   attribute?: boolean;
+  query?:boolean;
 }
 
 export interface FieldsData {
@@ -56,6 +57,7 @@ export interface FieldsData {
   index: number;
   class: Array<string>;
   attribute: Record<string, unknown>;
+  query:SelectorQuery;
 }
 
 export type PathCallback = (data: PathData, status: { data: string; code: number }) => void;

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,242 +2,132 @@
 // 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 type * as CSS from 'csstype';
+import * as CSS from 'csstype';
 
 export type Modify<T, R> = Omit<T, keyof R> & R;
 
 export type CSSProperties = Modify<
   CSS.Properties<string | number>,
   {
-    // 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;
-    textAlign?: 'left' | 'center' | 'right' | 'start' | 'end' | 'justify';
-    lineHeight?: string;
+    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';
-    fontSize?: string;
     fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
-    fontFamily?: string;
+    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';
-    lineSpacing?: string;
-    linearOrientation?: 'horizontal' | 'vertical' | 'horizontal-reverse' | 'vertical-reverse' | 'row' | 'column' | 'row-reverse' | 'column-reverse';
-    linearWeightSum?: number;
+    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';
-    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;
+    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 & {});
-    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;
-
-    // other
-    top?: string;
+    textDecoration?: 'none' | 'underline' | 'line-through' | (string & {});
     visibility?: 'hidden' | 'visible' | 'none' | 'collapse';
-    content?: string;
+    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';
-    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;
+    linearCrossGravity?: 'none' | 'start' | 'end' | 'center' | 'stretch';
     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;
-    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;
+    fontVariationSettings?: string;
+    fontFeatureSettings?: string;
+    fontOpticalSizing?: 'none' | 'auto';
   }
->;
+>;
+
+export type Shorthands = 
+  // layout
+  "flexFlow" | "padding" | "margin" | "flex" | "backgroundPosition" |
+  // typography
+  "outline" | "textDecoration" |
+  // visual
+  "border" | "borderRight" | "borderLeft" | "borderTop" | "borderBottom" | "borderRadius" | "borderWidth" | "background" | "borderColor" | "borderStyle" |
+  // animation
+  "transition" | "animation" |
+  // other
+  "mask" | "gap" | "overflow" | "whiteSpace";
+export type Longhands = 
+  // layout
+  "marginInlineStart" | "marginInlineEnd" | "paddingInlineStart" | "paddingInlineEnd" | "gridTemplateColumns" | "gridTemplateRows" | "gridAutoColumns" | "gridAutoRows" | "gridColumnSpan" | "gridRowSpan" | "gridColumnStart" | "gridColumnEnd" | "gridRowStart" | "gridRowEnd" | "gridColumnGap" | "gridRowGap" | "gridAutoFlow" | "maskPosition" | "display" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" | "marginLeft" | "marginRight" | "marginTop" | "marginBottom" | "position" | "flexGrow" | "flexShrink" | "flexBasis" | "flexDirection" | "flexWrap" |
+  // typography
+  "outlineColor" | "outlineStyle" | "outlineWidth" | "textDecorationColor" | "linearCrossGravity" | "borderInlineStartColor" | "borderInlineEndColor" | "borderInlineStartWidth" | "borderInlineEndWidth" | "borderInlineStartStyle" | "borderInlineEndStyle" | "relativeAlignInlineStart" | "relativeAlignInlineEnd" | "relativeInlineStartOf" | "relativeInlineEndOf" | "insetInlineStart" | "insetInlineEnd" | "linearDirection" | "textIndent" | "textStroke" | "textStrokeWidth" | "textStrokeColor" | "XAutoFontSize" | "XAutoFontSizePresetSizes" | "fontVariationSettings" | "fontFeatureSettings" | "fontOpticalSizing" | "textAlign" | "lineHeight" | "textOverflow" | "fontSize" | "fontWeight" | "fontFamily" | "fontStyle" | "lineSpacing" | "linearOrientation" | "linearWeightSum" | "linearWeight" | "linearGravity" | "linearLayoutGravity" | "adaptFontSize" | "textShadow" |
+  // visual
+  "borderTopColor" | "backgroundOrigin" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderLeftStyle" | "borderRightStyle" | "borderTopStyle" | "borderBottomStyle" | "backgroundClip" | "caretColor" | "borderTopLeftRadius" | "borderBottomLeftRadius" | "borderTopRightRadius" | "borderBottomRightRadius" | "borderStartStartRadius" | "borderEndStartRadius" | "borderStartEndRadius" | "borderEndEndRadius" | "borderLeftWidth" | "borderRightWidth" | "borderTopWidth" | "borderBottomWidth" | "XAnimationColorInterpolation" | "XHandleColor" | "color" | "backgroundColor" | "borderLeftColor" | "borderRightColor" | "backgroundImage" |
+  // animation
+  "transitionProperty" | "transitionDuration" | "transitionDelay" | "transitionTimingFunction" | "implicitAnimation" | "enterTransitionName" | "exitTransitionName" | "pauseTransitionName" | "resumeTransitionName" | "animationName" | "animationDuration" | "animationTimingFunction" | "animationDelay" | "animationIterationCount" | "animationDirection" | "animationFillMode" | "animationPlayState" | "layoutAnimationCreateDuration" | "layoutAnimationCreateTimingFunction" | "layoutAnimationCreateDelay" | "layoutAnimationCreateProperty" | "layoutAnimationDeleteDuration" | "layoutAnimationDeleteTimingFunction" | "layoutAnimationDeleteDelay" | "layoutAnimationDeleteProperty" | "layoutAnimationUpdateDuration" | "layoutAnimationUpdateTimingFunction" | "layoutAnimationUpdateDelay" |
+  // 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";
+
+// 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/element.d.ts

@@ -10,13 +10,19 @@ import { ImageProps, ImageUIMethods } from './image';
 import { ListItemProps, ListProps, ListRowProps, ListUIMethods } from './list';
 import { PageProps } from './page';
 import { ScrollViewProps, ScrollViewUIMethods } from './scroll-view';
-import { TextProps } from './text';
+import { TextProps, TextUIMethods } from './text';
 import { ViewProps } from './view';
+import { InputProps, InputUIMethods } from './input';
+import { TextAreaProps, TextAreaUIMethods } from './textarea';
+
 
 export interface UIMethods {
   'list': ListUIMethods;
   'scroll-view': ScrollViewUIMethods;
   'image': ImageUIMethods;
+  'input': InputUIMethods;
+  'textarea': TextAreaUIMethods;
+  'text': TextUIMethods;
 }
 
 type LynxComponentProps = ComponentProps;
@@ -37,6 +43,8 @@ export interface IntrinsicElements {
   'text': TextProps;
   'view': ViewProps;
   'raw-text': StandardProps & { text: number | string };
+  'input': InputProps;
+  'textarea': TextAreaProps;
 }
 
 declare module 'react' {
@@ -57,6 +65,8 @@ declare module 'react' {
       'text': TextProps;
       'view': ViewProps;
       'raw-text': StandardProps & { text: number | string };
+      'input': InputProps;
+      'textarea': TextAreaProps;
     }
   }
 }