@doubao-apps/template 0.0.29 → 0.0.30

package/README.md

@@ -1,6 +1,48 @@
 # @doubao-apps/template
 
-Doubao Apps 模板库，用于提供常见卡片和页面结构。模板会把已有组件组合成完整、符合设计稿的区块，开发者可以直接传入业务数据来快速搭建卡片。
+Doubao Apps Widget 模板库，用于快速开发卡片类 widget。模板会把已有组件组合成完整、符合设计稿的卡片结构，开发者只需要在 `defineWidget` 里选择合适的模板并传入业务数据。
+
+模板适合用在 widget 的 `render` 中。通常一个 widget 对应一张卡片，建议直接返回模板组件，不额外包裹无意义的 `view` / `scroll-view`：
+
+```tsx
+import { defineWidget } from '@doubao-apps/framework';
+import { ListCard } from '@doubao-apps/template';
+
+export default defineWidget({
+  aiMeta: {
+    id: 'product-list',
+    name: '商品列表',
+    description: '展示商品列表卡片',
+    border: true
+  },
+  render() {
+    return (
+      <ListCard
+        items={[
+          {
+            title: '主标题',
+            price: '4199',
+            priceUnit: '元',
+            description: '商品描述商品描述',
+            imageSrc: 'https://example.com/product.png'
+          },
+          {
+            title: '第二个商品',
+            price: '299',
+            priceUnit: '元',
+            description: '商品描述商品描述'
+          }
+        ]}
+        onViewMoreClick={() => {
+          console.log('view more');
+        }}
+      />
+    );
+  }
+});
+```
+
+如果只是验证 UI 效果，也可以在普通页面里直接渲染模板组件；但真实卡片接入建议优先按 widget 方式组织。
 
 ## ListCard
 
@@ -18,7 +60,8 @@ export default function Page() {
           price: '4199',
           priceUnit: '元',
           description: '商品描述商品描述',
-          imageSrc: 'https://example.com/product.png'
+          imageSrc: 'https://example.com/product.png',
+          actionText: '下单'
         },
         {
           title: '第二个商品',
@@ -42,8 +85,9 @@ export default function Page() {
 
 - 当 `items` 超过 4 条时，默认只展示前 4 条，并在底部展示「查看更多」按钮。
 - 可以通过 `viewMoreText` 和 `onViewMoreClick` 自定义「查看更多」按钮文案和点击行为。
-- 如果只需要展示单条内容，也可以直接使用 `title` / `price` / `description` / `imageSrc` 等快捷属性。
+- 每个列表项都可以通过 `actionText` 和 `onActionClick` 自行决定是否展示右侧操作按钮。
 - 如果需要完全自定义内容区域，可以传入 `children`，模板会保留标题栏和卡片外壳。
+- 用在 widget 中时，推荐让 `render` 直接返回 `ListCard`。
 
 ## OrderCard
 
@@ -92,6 +136,7 @@ export default function Page() {
 - `infoItems` 用于配置提单信息列表。
 - `feeItems`、`discountText`、`totalLabel`、`totalPrice` 用于配置费用汇总。
 - `primaryActionText` 和 `secondaryActionText` 可以自定义底部操作按钮文案。
+- 用在 widget 中时，推荐让 `render` 直接返回 `OrderCard`。
 
 ## InvalidCard
 
@@ -111,3 +156,8 @@ export default function Page() {
   );
 }
 ```
+
+说明：
+
+- `title` 用于配置失效状态文案。
+- 用在 widget 中时，推荐让 `render` 直接返回 `InvalidCard`。

package/dist/invalid-card/index.js

@@ -1,9 +1,7 @@
 import { useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
 import { getAppInfo } from "../utils/app-info.js";
 import "./styles.css";
-function joinClassNames(...classNames) {
-    return classNames.filter(Boolean).join(' ');
-}
 function InvalidCardIcon({ appIconSrc }) {
     if (null != appIconSrc && appIconSrc.length > 0) return <image className="doubao-invalid-card__app-icon" src={appIconSrc} mode="aspectFill"/>;
     return <view className="doubao-invalid-card__app-icon"/>;
@@ -11,7 +9,7 @@ function InvalidCardIcon({ appIconSrc }) {
 function InvalidCard(props) {
     const { title = '任务状态已更新', className, style, onClick } = props;
     const appInfo = getAppInfo();
-    return <view className={useThemeClassName(joinClassNames('doubao-invalid-card', className))} style={style} bindtap={onClick} clip-radius="true">
+    return <view className={useThemeClassName(clsx('doubao-invalid-card', className))} style={style} bindtap={onClick} clip-radius="true">
       <view className="doubao-invalid-card__title-bar">
         <view className="doubao-invalid-card__app">
           <InvalidCardIcon appIconSrc={appInfo.appIconSrc}/>

package/dist/list-card/index.d.ts

@@ -10,18 +10,6 @@ export interface ListCardProps {
     items?: ListCardItem[];
     /** 列表超过 4 条时，底部「查看更多」按钮的文案。 */
     viewMoreText?: string;
-    /** 单条默认内容的标题；未传入 items 和 children 时生效。 */
-    title?: string;
-    /** 单条默认内容的价格；未传入 items 和 children 时生效。 */
-    price?: string | number;
-    /** 单条默认内容的价格单位；未传入 items 和 children 时生效。 */
-    priceUnit?: string;
-    /** 单条默认内容的描述；未传入 items 和 children 时生效。 */
-    description?: string;
-    /** 单条默认内容的图片地址；未传入 items 和 children 时生效。 */
-    imageSrc?: string;
-    /** 单条默认内容的自定义图片节点；优先级高于 imageSrc。 */
-    image?: ReactNode;
     /** 自定义卡片内容；传入后不再渲染默认列表内容和「查看更多」按钮。 */
     children?: ReactNode;
     /** 卡片根节点自定义类名。 */
@@ -52,12 +40,16 @@ export interface ListCardItem {
     image?: ReactNode;
     /** 列表项自定义内容；传入后不再渲染默认图文结构。 */
     children?: ReactNode;
+    /** 列表项右侧操作按钮文案；不传或传空字符串时不展示按钮。 */
+    actionText?: string;
     /** 列表项根节点自定义类名。 */
     className?: string;
     /** 列表项根节点自定义样式。 */
     style?: CSSProperties;
     /** 点击列表项时触发。 */
     onClick?: (event: TouchEvent) => void;
+    /** 点击列表项右侧操作按钮时触发。 */
+    onActionClick?: (event?: TouchEvent) => void;
 }
 export declare function ListCard(props: ListCardProps): ReactElement;
 //# sourceMappingURL=index.d.ts.map

package/dist/list-card/index.js

@@ -1,9 +1,7 @@
 import { Button, useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
 import { getAppInfo } from "../utils/app-info.js";
 import "./styles.css";
-function joinClassNames(...classNames) {
-    return classNames.filter(Boolean).join(' ');
-}
 function ListCardIcon({ appIconSrc }) {
     if (null != appIconSrc && appIconSrc.length > 0) return <image className="doubao-list-card__app-icon" src={appIconSrc} mode="aspectFill"/>;
     return <view className="doubao-list-card__app-icon"/>;
@@ -15,47 +13,45 @@ function ListCardImage(props) {
     return <view className="doubao-list-card__image"/>;
 }
 function ListCardProductItem({ item, isLast }) {
-    const { title = '主标题', price = '4199', priceUnit = '元', description = '商品描述商品描述' } = item;
-    const hasSecondaryLine = void 0 !== price || null != description;
-    return <view className={joinClassNames('doubao-list-card__item', isLast && 'doubao-list-card__item--last', item.className)} style={item.style} {...null != item.onClick ? {
+    const { title, price, priceUnit, description } = item;
+    const hasImage = null != item.image || null != item.imageSrc && item.imageSrc.length > 0;
+    const hasPrice = null != price && '' !== price;
+    const hasDescription = null != description && description.length > 0;
+    const hasSecondaryLine = hasPrice || hasDescription;
+    const hasAction = null != item.actionText && item.actionText.length > 0;
+    return <view className={clsx('doubao-list-card__item', isLast && 'doubao-list-card__item--last', item.className)} style={item.style} {...null != item.onClick ? {
         catchtap: item.onClick
     } : {}}>
       {item.children ?? <view className="doubao-list-card__content">
-          <ListCardImage image={item.image} imageSrc={item.imageSrc}/>
-          <view className="doubao-list-card__text">
-            <text className="doubao-list-card__title" text-maxline="1">
-              {title}
-            </text>
-            {hasSecondaryLine ? <view className="doubao-list-card__secondary">
-                {void 0 !== price ? <text className="doubao-list-card__price" text-maxline="1">
-                    {price}
-                    {priceUnit}
-                  </text> : null}
-                {void 0 !== price && null != description ? <view className="doubao-list-card__dot"/> : null}
-                {null != description ? <text className="doubao-list-card__description" text-maxline="1">
-                    {description}
-                  </text> : null}
-              </view> : null}
+          <view className="doubao-list-card__main">
+            {hasImage ? <ListCardImage image={item.image} imageSrc={item.imageSrc}/> : null}
+            <view className={clsx('doubao-list-card__text', hasImage && 'doubao-list-card__text--with-image')}>
+              {null != title && title.length > 0 ? <text className="doubao-list-card__title" text-maxline="1">
+                  {title}
+                </text> : null}
+              {hasSecondaryLine ? <view className="doubao-list-card__secondary">
+                  {hasPrice ? <text className="doubao-list-card__price" text-maxline="1">
+                      {price}
+                      {null != priceUnit && priceUnit.length > 0 ? priceUnit : null}
+                    </text> : null}
+                  {hasPrice && hasDescription ? <view className="doubao-list-card__dot"/> : null}
+                  {hasDescription ? <text className="doubao-list-card__description" text-maxline="1">
+                      {description}
+                    </text> : null}
+                </view> : null}
+            </view>
           </view>
+          {hasAction ? <Button className="doubao-list-card__item-action" type="default" text={item.actionText} onClick={item.onActionClick}/> : null}
         </view>}
     </view>;
 }
 function ListCard(props) {
-    const { moreText = '更多', showMore = true, title = '主标题', price = '4199', priceUnit = '元', description = '商品描述商品描述', items, viewMoreText = '查看更多', children, className, style, onClick, onMoreClick, onViewMoreClick } = props;
+    const { moreText, showMore = true, items, viewMoreText = '查看更多', children, className, style, onClick, onMoreClick, onViewMoreClick } = props;
     const appInfo = getAppInfo();
-    const contentItems = items ?? (null != children ? [] : [
-        {
-            title,
-            price,
-            priceUnit,
-            description,
-            image: props.image,
-            imageSrc: props.imageSrc
-        }
-    ]);
+    const contentItems = items ?? [];
     const shouldShowViewMore = null == children && null != items && contentItems.length > 4;
     const visibleItems = shouldShowViewMore ? contentItems.slice(0, 4) : contentItems;
-    return <view className={useThemeClassName(joinClassNames('doubao-list-card', className))} style={style} bindtap={onClick} clip-radius="true">
+    return <view className={useThemeClassName(clsx('doubao-list-card', className))} style={style} bindtap={onClick} clip-radius="true">
       <view className="doubao-list-card__title-bar">
         <view className="doubao-list-card__app">
           <ListCardIcon appIconSrc={appInfo.appIconSrc}/>
@@ -63,7 +59,7 @@ function ListCard(props) {
             {appInfo.appName}
           </text>
         </view>
-        {showMore ? <view className="doubao-list-card__more" catchtap={onMoreClick}>
+        {showMore && null != moreText && moreText.length > 0 ? <view className="doubao-list-card__more" catchtap={onMoreClick}>
             <text className="doubao-list-card__more-text" text-maxline="1">
               {moreText}
             </text>

package/dist/list-card/styles.css

@@ -113,11 +113,20 @@
 .doubao-list-card__content {
   flex-direction: row;
   align-items: center;
+  gap: 20px;
   width: 100%;
   min-width: 0;
   display: flex;
 }
 
+.doubao-list-card__main {
+  flex-direction: row;
+  flex: 1 1 0;
+  align-items: center;
+  min-width: 0;
+  display: flex;
+}
+
 .doubao-list-card__image {
   background-color: var(--bg-base-1-overlay);
   border-radius: 5px;
@@ -132,10 +141,13 @@
   flex: 1 1 0;
   align-items: flex-start;
   min-width: 0;
-  margin-left: 12px;
   display: flex;
 }
 
+.doubao-list-card__text--with-image {
+  margin-left: 12px;
+}
+
 .doubao-list-card__title {
   width: 100%;
   height: 24px;
@@ -189,6 +201,20 @@
   margin: 0 6px;
 }
 
+.doubao-list-card__item-action {
+  --doubao-btn-border-radius: 8px;
+  --doubao-btn-default-height: 38px;
+  --doubao-btn-default-padding-x: 12px;
+  --doubao-btn-default-padding-y: 0;
+  --doubao-btn-default-font-size: 14px;
+  --doubao-btn-default-line-height: 20px;
+  --doubao-btn-default-bg: var(--bg-base-1-overlay);
+  --doubao-btn-default-text: var(--neutral-100);
+  flex-shrink: 0;
+  width: 80px;
+  height: 38px;
+}
+
 .doubao-list-card__view-more-wrap {
   box-sizing: border-box;
   background-color: var(--bg-base-1);

package/dist/order-card/index.js

@@ -1,9 +1,7 @@
 import { Button, useThemeClassName } from "@byted-doubao-apps/components";
+import { clsx } from "clsx";
 import { getAppInfo } from "../utils/app-info.js";
 import "./styles.css";
-function joinClassNames(...classNames) {
-    return classNames.filter(Boolean).join(' ');
-}
 function OrderCardIcon({ appIconSrc }) {
     if (null != appIconSrc && appIconSrc.length > 0) return <image className="doubao-order-card__app-icon" src={appIconSrc} mode="aspectFill"/>;
     return <view className="doubao-order-card__app-icon"/>;
@@ -15,28 +13,21 @@ function OrderCardProductImage(props) {
     return <view className="doubao-order-card__product-image"/>;
 }
 function OrderCard(props) {
-    const { moreText = '更多', showMore = true, productTitle = '主标题', productSpec = '商品规格商品规格', productPricePrefix = '券后', productPrice = '¥5.8', productQuantity = '1', infoItems = [
-        {
-            label: '提单信息',
-            value: '信息字段最多支持 2 行',
-            valueExtra: '信息字段最多支持 2 行'
-        },
-        {
-            label: '提单信息',
-            value: '信息字段最多支持 2 行'
-        }
-    ], feeItems = [
-        {
-            label: '运费',
-            value: '¥3.0'
-        },
-        {
-            label: '打包费',
-            value: '¥1.0'
-        }
-    ], discountText = '共优惠 ¥6', totalLabel = '合计', totalPrice = '¥9.8', primaryActionText = '立即支付', secondaryActionText = '修改', className, style, onClick, onMoreClick, onProductClick, onPrimaryActionClick, onSecondaryActionClick } = props;
+    const { moreText, showMore = true, productTitle, productSpec, productPricePrefix, productPrice, productQuantity, infoItems = [], feeItems = [], discountText, totalLabel, totalPrice, primaryActionText, secondaryActionText, className, style, onClick, onMoreClick, onProductClick, onPrimaryActionClick, onSecondaryActionClick } = props;
     const appInfo = getAppInfo();
-    return <view className={useThemeClassName(joinClassNames('doubao-order-card', className))} style={style} bindtap={onClick} clip-radius="true">
+    const hasProductImage = null != props.productImage || null != props.productImageSrc && props.productImageSrc.length > 0;
+    const hasProductMainLine = null != productTitle && productTitle.length > 0 || null != productPricePrefix && productPricePrefix.length > 0 || null != productPrice && '' !== productPrice;
+    const hasProductSecondaryLine = null != productSpec && productSpec.length > 0 || null != productQuantity && '' !== productQuantity;
+    const hasProduct = hasProductImage || hasProductMainLine || hasProductSecondaryLine;
+    const hasInfoItems = infoItems.length > 0;
+    const hasDiscount = null != discountText && discountText.length > 0;
+    const hasFeeItems = feeItems.length > 0;
+    const hasTotal = null != totalLabel && totalLabel.length > 0 || null != totalPrice && '' !== totalPrice;
+    const hasSummary = hasDiscount || hasFeeItems || hasTotal;
+    const hasPrimaryAction = null != primaryActionText && primaryActionText.length > 0;
+    const hasSecondaryAction = null != secondaryActionText && secondaryActionText.length > 0;
+    const hasActions = hasPrimaryAction || hasSecondaryAction;
+    return <view className={useThemeClassName(clsx('doubao-order-card', className))} style={style} bindtap={onClick} clip-radius="true">
       <view className="doubao-order-card__title-bar">
         <view className="doubao-order-card__app">
           <OrderCardIcon appIconSrc={appInfo.appIconSrc}/>
@@ -44,7 +35,7 @@ function OrderCard(props) {
             {appInfo.appName}
           </text>
         </view>
-        {showMore ? <view className="doubao-order-card__more" catchtap={onMoreClick}>
+        {showMore && null != moreText && moreText.length > 0 ? <view className="doubao-order-card__more" catchtap={onMoreClick}>
             <text className="doubao-order-card__more-text" text-maxline="1">
               {moreText}
             </text>
@@ -52,75 +43,75 @@ function OrderCard(props) {
           </view> : null}
       </view>
 
-      <view className="doubao-order-card__product" catchtap={onProductClick}>
-        <OrderCardProductImage productImage={props.productImage} productImageSrc={props.productImageSrc}/>
-        <view className="doubao-order-card__product-content">
-          <view className="doubao-order-card__product-line-main">
-            <view className="doubao-order-card__product-title-wrap">
-              <text className="doubao-order-card__product-title" text-maxline="1">
-                {productTitle}
-              </text>
-              <view className="doubao-order-card__product-chevron"/>
-            </view>
-            <view className="doubao-order-card__product-price">
-              <text className="doubao-order-card__product-price-prefix" text-maxline="1">
-                {productPricePrefix}
-              </text>
-              <text className="doubao-order-card__product-price-value" text-maxline="1">
-                {productPrice}
-              </text>
-            </view>
+      {hasProduct ? <view className="doubao-order-card__product" catchtap={onProductClick}>
+          {hasProductImage ? <OrderCardProductImage productImage={props.productImage} productImageSrc={props.productImageSrc}/> : null}
+          <view className={clsx('doubao-order-card__product-content', hasProductImage && 'doubao-order-card__product-content--with-image')}>
+            {hasProductMainLine ? <view className="doubao-order-card__product-line-main">
+                {null != productTitle && productTitle.length > 0 ? <view className="doubao-order-card__product-title-wrap">
+                    <text className="doubao-order-card__product-title" text-maxline="1">
+                      {productTitle}
+                    </text>
+                    <view className="doubao-order-card__product-chevron"/>
+                  </view> : null}
+                {null != productPricePrefix && productPricePrefix.length > 0 || null != productPrice && '' !== productPrice ? <view className="doubao-order-card__product-price">
+                    {null != productPricePrefix && productPricePrefix.length > 0 ? <text className="doubao-order-card__product-price-prefix" text-maxline="1">
+                        {productPricePrefix}
+                      </text> : null}
+                    {null != productPrice && '' !== productPrice ? <text className="doubao-order-card__product-price-value" text-maxline="1">
+                        {productPrice}
+                      </text> : null}
+                  </view> : null}
+              </view> : null}
+            {hasProductSecondaryLine ? <view className="doubao-order-card__product-line-secondary">
+                {null != productSpec && productSpec.length > 0 ? <text className="doubao-order-card__product-spec" text-maxline="1">
+                    {productSpec}
+                  </text> : null}
+                {null != productQuantity && '' !== productQuantity ? <text className="doubao-order-card__product-quantity" text-maxline="1">
+                    ×{productQuantity}
+                  </text> : null}
+              </view> : null}
           </view>
-          <view className="doubao-order-card__product-line-secondary">
-            <text className="doubao-order-card__product-spec" text-maxline="1">
-              {productSpec}
-            </text>
-            <text className="doubao-order-card__product-quantity" text-maxline="1">
-              ×{productQuantity}
-            </text>
-          </view>
-        </view>
-      </view>
+        </view> : null}
 
-      <view className="doubao-order-card__info">
-        {infoItems.map((item, index)=><view className="doubao-order-card__info-row" key={item.key ?? index}>
-            <text className="doubao-order-card__info-label" text-maxline="1">
-              {item.label}
-            </text>
-            <view className="doubao-order-card__info-value-wrap">
-              <text className="doubao-order-card__info-value" text-maxline="1">
-                {item.value}
-              </text>
-              {null != item.valueExtra ? <text className="doubao-order-card__info-value" text-maxline="1">
-                  {item.valueExtra}
-                </text> : null}
-            </view>
-          </view>)}
-        <view className="doubao-order-card__summary">
-          <view className="doubao-order-card__summary-content">
-            {discountText.length > 0 ? <text className="doubao-order-card__fee-text" text-maxline="1">
-                {discountText}
-              </text> : null}
-            {feeItems.map((item, index)=><text className="doubao-order-card__fee-text" text-maxline="1" key={item.key ?? index}>
+      {hasInfoItems || hasSummary ? <view className="doubao-order-card__info">
+          {infoItems.map((item, index)=><view className="doubao-order-card__info-row" key={item.key ?? index}>
+              <text className="doubao-order-card__info-label" text-maxline="1">
                 {item.label}
-                {item.value}
-              </text>)}
-            <view className="doubao-order-card__total">
-              <text className="doubao-order-card__total-label" text-maxline="1">
-                {totalLabel}
-              </text>
-              <text className="doubao-order-card__total-price" text-maxline="1">
-                {totalPrice}
               </text>
-            </view>
-          </view>
-        </view>
-      </view>
+              <view className="doubao-order-card__info-value-wrap">
+                <text className="doubao-order-card__info-value" text-maxline="1">
+                  {item.value}
+                </text>
+                {null != item.valueExtra ? <text className="doubao-order-card__info-value" text-maxline="1">
+                    {item.valueExtra}
+                  </text> : null}
+              </view>
+            </view>)}
+          {hasSummary ? <view className="doubao-order-card__summary">
+              <view className="doubao-order-card__summary-content">
+                {hasDiscount ? <text className="doubao-order-card__fee-text" text-maxline="1">
+                    {discountText}
+                  </text> : null}
+                {feeItems.map((item, index)=><text className="doubao-order-card__fee-text" text-maxline="1" key={item.key ?? index}>
+                    {item.label}
+                    {item.value}
+                  </text>)}
+                {hasTotal ? <view className="doubao-order-card__total">
+                    {null != totalLabel && totalLabel.length > 0 ? <text className="doubao-order-card__total-label" text-maxline="1">
+                        {totalLabel}
+                      </text> : null}
+                    {null != totalPrice && '' !== totalPrice ? <text className="doubao-order-card__total-price" text-maxline="1">
+                        {totalPrice}
+                      </text> : null}
+                  </view> : null}
+              </view>
+            </view> : null}
+        </view> : null}
 
-      <view className="doubao-order-card__actions">
-        <Button className="doubao-order-card__action doubao-order-card__action--secondary" type="default" text={secondaryActionText} onClick={onSecondaryActionClick}/>
-        <Button className="doubao-order-card__action doubao-order-card__action--primary" type="primary" text={primaryActionText} onClick={onPrimaryActionClick}/>
-      </view>
+      {hasActions ? <view className="doubao-order-card__actions">
+          {hasSecondaryAction ? <Button className="doubao-order-card__action doubao-order-card__action--secondary" type="default" text={secondaryActionText} onClick={onSecondaryActionClick}/> : null}
+          {hasPrimaryAction ? <Button className="doubao-order-card__action doubao-order-card__action--primary" type="primary" text={primaryActionText} onClick={onPrimaryActionClick}/> : null}
+        </view> : null}
     </view>;
 }
 export { OrderCard };

package/dist/order-card/styles.css

@@ -105,10 +105,13 @@
   flex-direction: column;
   flex: 1 1 0;
   min-width: 0;
-  margin-left: 12px;
   display: flex;
 }
 
+.doubao-order-card__product-content--with-image {
+  margin-left: 12px;
+}
+
 .doubao-order-card__product-line-main, .doubao-order-card__product-line-secondary {
   flex-direction: row;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doubao-apps/template",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "type": "module",
   "exports": {
     ".": {
@@ -16,6 +16,9 @@
     "README.md",
     "!dist/**/*.map"
   ],
+  "dependencies": {
+    "clsx": "2.1.1"
+  },
   "peerDependencies": {
     "@lynx-js/react": "^0.115.1",
     "@lynx-js/types": "^3.6.0",