@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.11

package/es/awesome/InstallBanner/InstallBanner.mjs

@@ -4,7 +4,7 @@ import Snippet from "../../Snippet/Snippet.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/InstallBanner/InstallBanner.tsx
 const InstallBanner = memo(({ className, command, footnote, prefix = "$", style, title, ...rest }) => /* @__PURE__ */ jsx("section", {
@@ -24,7 +24,7 @@ const InstallBanner = memo(({ className, command, footnote, prefix = "$", style,
 				children: command
 			}),
 			footnote && /* @__PURE__ */ jsx("p", {
-				className: clsx(stylex.props(styles.footnote).className, "lobe-install-banner-footnote"),
+				className: clsx$1(stylex.props(styles.footnote).className, "lobe-install-banner-footnote"),
 				children: footnote
 			})
 		]

package/es/awesome/InstallBanner/InstallBanner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"InstallBanner.mjs","names":[],"sources":["../../../src/awesome/InstallBanner/InstallBanner.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport Snippet from '@/Snippet';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { InstallBannerProps } from './type';\n\nconst InstallBanner = memo<InstallBannerProps>(\n  ({ className, command, footnote, prefix = '$', style, title, ...rest }) => (\n    <section {...styleProps(styles.root, className, style)} {...rest}>\n      <div {...stylex.props(styles.content)}>\n        {title && <h2 {...stylex.props(styles.title)}>{title}</h2>}\n        <Snippet language={'bash'} prefix={prefix} style={{ borderRadius: 999 }}>\n          {command}\n        </Snippet>\n        {footnote && (\n          <p\n            className={clsx(\n              stylex.props(styles.footnote).className,\n              'lobe-install-banner-footnote',\n            )}\n          >\n            {footnote}\n          </p>\n        )}\n      </div>\n    </section>\n  ),\n);\n\nInstallBanner.displayName = 'InstallBanner';\n\nexport default InstallBanner;\n"],"mappings":";;;;;;;;;AAUA,MAAM,gBAAgB,MAA0B,EAC9C,WACA,SACA,UACA,SAAS,KACT,OACA,OACA,GAAG,WACC,oBAAC,WAAD;CAAS,GAAI,WAAW,OAAO,MAAM,WAAW,KAAK;CAAG,GAAI;CAC5D,UAAA,qBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,OAAO;EAApC,UAAA;GACG,SAAS,oBAAC,MAAD;IAAI,GAAI,OAAO,MAAM,OAAO,KAAK;IAAI,UAAA;GAAU,CAAA;GACzD,oBAAC,SAAD;IAAS,UAAU;IAAgB;IAAQ,OAAO,EACpD,cAAc,IAChB;IACO,UAAA;GACM,CAAA;GACR,YAAY,oBAAC,KAAD;IAAG,WAAW,KAAK,OAAO,MAAM,OAAO,QAAQ,CAAC,CAAC,WAAW,8BAA8B;IAClG,UAAA;GACA,CAAA;EACF;;AACE,CAAA,CAAC;AACd,cAAc,cAAc"}
+{"version":3,"file":"InstallBanner.mjs","names":["clsx"],"sources":["../../../src/awesome/InstallBanner/InstallBanner.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport Snippet from '@/Snippet';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { InstallBannerProps } from './type';\n\nconst InstallBanner = memo<InstallBannerProps>(\n  ({ className, command, footnote, prefix = '$', style, title, ...rest }) => (\n    <section {...styleProps(styles.root, className, style)} {...rest}>\n      <div {...stylex.props(styles.content)}>\n        {title && <h2 {...stylex.props(styles.title)}>{title}</h2>}\n        <Snippet language={'bash'} prefix={prefix} style={{ borderRadius: 999 }}>\n          {command}\n        </Snippet>\n        {footnote && (\n          <p\n            className={clsx(\n              stylex.props(styles.footnote).className,\n              'lobe-install-banner-footnote',\n            )}\n          >\n            {footnote}\n          </p>\n        )}\n      </div>\n    </section>\n  ),\n);\n\nInstallBanner.displayName = 'InstallBanner';\n\nexport default InstallBanner;\n"],"mappings":";;;;;;;;;AAUA,MAAM,gBAAgB,MAA0B,EAC9C,WACA,SACA,UACA,SAAS,KACT,OACA,OACA,GAAG,WACC,oBAAC,WAAD;CAAS,GAAI,WAAW,OAAO,MAAM,WAAW,KAAK;CAAG,GAAI;CAC5D,UAAA,qBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,OAAO,OAAO;EAApC,UAAA;GACG,SAAS,oBAAC,MAAD;IAAI,GAAI,OAAO,MAAM,OAAO,KAAK;IAAI,UAAA;GAAU,CAAA;GACzD,oBAAC,SAAD;IAAS,UAAU;IAAgB;IAAQ,OAAO,EACpD,cAAc,IAChB;IACO,UAAA;GACM,CAAA;GACR,YAAY,oBAAC,KAAD;IAAG,WAAWA,OAAK,OAAO,MAAM,OAAO,QAAQ,CAAC,CAAC,WAAW,8BAA8B;IAClG,UAAA;GACA,CAAA;EACF;;AACE,CAAA,CAAC;AACd,cAAc,cAAc"}

package/es/awesome/LandingHero/LandingHero.mjs

@@ -4,7 +4,7 @@ import { LandingActions } from "../landingActions.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/LandingHero/LandingHero.tsx
 const LandingHero = memo(({ accent, actions, aside, badge, children, className, description, onNavigate, renderLink, style, title, ...rest }) => {
@@ -21,7 +21,7 @@ const LandingHero = memo(({ accent, actions, aside, badge, children, className,
 					...stylex.props(styles.intro, split && styles.introSplit),
 					children: [
 						badge && /* @__PURE__ */ jsx("div", {
-							className: clsx(stylex.props(styles.badge).className, "lobe-landing-hero-badge"),
+							className: clsx$1(stylex.props(styles.badge).className, "lobe-landing-hero-badge"),
 							children: badge
 						}),
 						/* @__PURE__ */ jsxs("h1", {
@@ -43,7 +43,7 @@ const LandingHero = memo(({ accent, actions, aside, badge, children, className,
 						})
 					]
 				}), aside && /* @__PURE__ */ jsx("div", {
-					className: clsx(stylex.props(styles.aside).className, "lobe-landing-hero-aside"),
+					className: clsx$1(stylex.props(styles.aside).className, "lobe-landing-hero-aside"),
 					children: aside
 				})]
 			}), children && /* @__PURE__ */ jsx("div", {

package/es/awesome/LandingHero/LandingHero.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LandingHero.mjs","names":[],"sources":["../../../src/awesome/LandingHero/LandingHero.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { LandingActions } from '@/awesome/landingActions';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { LandingHeroProps } from './type';\n\nconst LandingHero = memo<LandingHeroProps>(\n  ({\n    accent,\n    actions,\n    aside,\n    badge,\n    children,\n    className,\n    description,\n    onNavigate,\n    renderLink,\n    style,\n    title,\n    ...rest\n  }) => {\n    const split = !!aside;\n\n    return (\n      <section\n        {...styleProps([styles.root, split && styles.rootSplit], className, style)}\n        data-layout={split ? 'split' : 'center'}\n        {...rest}\n      >\n        <div {...stylex.props(styles.content)}>\n          <div {...stylex.props(styles.main, split && styles.mainSplit)}>\n            <div {...stylex.props(styles.intro, split && styles.introSplit)}>\n              {badge && (\n                <div\n                  className={clsx(stylex.props(styles.badge).className, 'lobe-landing-hero-badge')}\n                >\n                  {badge}\n                </div>\n              )}\n              <h1 {...stylex.props(styles.title, split && styles.titleSplit)}>\n                {title}\n                {accent && (\n                  <>\n                    {' '}\n                    <span {...stylex.props(styles.accent)}>{accent}</span>\n                  </>\n                )}\n              </h1>\n              {description && <p {...stylex.props(styles.description)}>{description}</p>}\n              {actions && actions.length > 0 && (\n                <LandingActions\n                  actions={actions}\n                  renderLink={renderLink}\n                  xstyle={[styles.actions, split && styles.actionsSplit]}\n                  onNavigate={onNavigate}\n                />\n              )}\n            </div>\n            {aside && (\n              <div\n                className={clsx(stylex.props(styles.aside).className, 'lobe-landing-hero-aside')}\n              >\n                {aside}\n              </div>\n            )}\n          </div>\n          {children && <div {...stylex.props(styles.extra)}>{children}</div>}\n        </div>\n      </section>\n    );\n  },\n);\n\nLandingHero.displayName = 'LandingHero';\n\nexport default LandingHero;\n"],"mappings":";;;;;;;;;AAUA,MAAM,cAAc,MAAwB,EAC1C,QACA,SACA,OACA,OACA,UACA,WACA,aACA,YACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,QAAQ,CAAC,CAAC;CAChB,OAAO,oBAAC,WAAD;EAAS,GAAI,WAAW,CAAC,OAAO,MAAM,SAAS,OAAO,SAAS,GAAG,WAAW,KAAK;EAAG,eAAa,QAAQ,UAAU;EAAU,GAAI;EACnI,UAAA,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,OAAO;GAApC,UAAA,CACE,qBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,MAAM,SAAS,OAAO,SAAS;IAA5D,UAAA,CACE,qBAAC,OAAD;KAAK,GAAI,OAAO,MAAM,OAAO,OAAO,SAAS,OAAO,UAAU;KAA9D,UAAA;MACG,SAAS,oBAAC,OAAD;OAAK,WAAW,KAAK,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC,WAAW,yBAAyB;OACzF,UAAA;MACE,CAAA;MACP,qBAAC,MAAD;OAAI,GAAI,OAAO,MAAM,OAAO,OAAO,SAAS,OAAO,UAAU;OAA7D,UAAA,CACG,OACA,UAAU,qBAAA,YAAA,EAAA,UAAA,CACN,KACD,oBAAC,QAAD;QAAM,GAAI,OAAO,MAAM,OAAO,MAAM;QAAI,UAAA;OAAa,CAAA,CACrD,EAAA,CAAA,CACF;;MACH,eAAe,oBAAC,KAAD;OAAG,GAAI,OAAO,MAAM,OAAO,WAAW;OAAI,UAAA;MAAe,CAAA;MACxE,WAAW,QAAQ,SAAS,KAAK,oBAAC,gBAAD;OAAyB;OAAqB;OAAY,QAAQ,CAAC,OAAO,SAAS,SAAS,OAAO,YAAY;OAAe;MAAa,CAAA;KAC1K;IACJ,CAAA,GAAA,SAAS,oBAAC,OAAD;KAAK,WAAW,KAAK,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC,WAAW,yBAAyB;KACzF,UAAA;IACE,CAAA,CACJ;GACJ,CAAA,GAAA,YAAY,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,KAAK;IAAI;GAAc,CAAA,CAC9D;;CACE,CAAA;AACf,CAAC;AACD,YAAY,cAAc"}
+{"version":3,"file":"LandingHero.mjs","names":["clsx"],"sources":["../../../src/awesome/LandingHero/LandingHero.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport { LandingActions } from '@/awesome/landingActions';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport type { LandingHeroProps } from './type';\n\nconst LandingHero = memo<LandingHeroProps>(\n  ({\n    accent,\n    actions,\n    aside,\n    badge,\n    children,\n    className,\n    description,\n    onNavigate,\n    renderLink,\n    style,\n    title,\n    ...rest\n  }) => {\n    const split = !!aside;\n\n    return (\n      <section\n        {...styleProps([styles.root, split && styles.rootSplit], className, style)}\n        data-layout={split ? 'split' : 'center'}\n        {...rest}\n      >\n        <div {...stylex.props(styles.content)}>\n          <div {...stylex.props(styles.main, split && styles.mainSplit)}>\n            <div {...stylex.props(styles.intro, split && styles.introSplit)}>\n              {badge && (\n                <div\n                  className={clsx(stylex.props(styles.badge).className, 'lobe-landing-hero-badge')}\n                >\n                  {badge}\n                </div>\n              )}\n              <h1 {...stylex.props(styles.title, split && styles.titleSplit)}>\n                {title}\n                {accent && (\n                  <>\n                    {' '}\n                    <span {...stylex.props(styles.accent)}>{accent}</span>\n                  </>\n                )}\n              </h1>\n              {description && <p {...stylex.props(styles.description)}>{description}</p>}\n              {actions && actions.length > 0 && (\n                <LandingActions\n                  actions={actions}\n                  renderLink={renderLink}\n                  xstyle={[styles.actions, split && styles.actionsSplit]}\n                  onNavigate={onNavigate}\n                />\n              )}\n            </div>\n            {aside && (\n              <div\n                className={clsx(stylex.props(styles.aside).className, 'lobe-landing-hero-aside')}\n              >\n                {aside}\n              </div>\n            )}\n          </div>\n          {children && <div {...stylex.props(styles.extra)}>{children}</div>}\n        </div>\n      </section>\n    );\n  },\n);\n\nLandingHero.displayName = 'LandingHero';\n\nexport default LandingHero;\n"],"mappings":";;;;;;;;;AAUA,MAAM,cAAc,MAAwB,EAC1C,QACA,SACA,OACA,OACA,UACA,WACA,aACA,YACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,QAAQ,CAAC,CAAC;CAChB,OAAO,oBAAC,WAAD;EAAS,GAAI,WAAW,CAAC,OAAO,MAAM,SAAS,OAAO,SAAS,GAAG,WAAW,KAAK;EAAG,eAAa,QAAQ,UAAU;EAAU,GAAI;EACnI,UAAA,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,OAAO;GAApC,UAAA,CACE,qBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,MAAM,SAAS,OAAO,SAAS;IAA5D,UAAA,CACE,qBAAC,OAAD;KAAK,GAAI,OAAO,MAAM,OAAO,OAAO,SAAS,OAAO,UAAU;KAA9D,UAAA;MACG,SAAS,oBAAC,OAAD;OAAK,WAAWA,OAAK,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC,WAAW,yBAAyB;OACzF,UAAA;MACE,CAAA;MACP,qBAAC,MAAD;OAAI,GAAI,OAAO,MAAM,OAAO,OAAO,SAAS,OAAO,UAAU;OAA7D,UAAA,CACG,OACA,UAAU,qBAAA,YAAA,EAAA,UAAA,CACN,KACD,oBAAC,QAAD;QAAM,GAAI,OAAO,MAAM,OAAO,MAAM;QAAI,UAAA;OAAa,CAAA,CACrD,EAAA,CAAA,CACF;;MACH,eAAe,oBAAC,KAAD;OAAG,GAAI,OAAO,MAAM,OAAO,WAAW;OAAI,UAAA;MAAe,CAAA;MACxE,WAAW,QAAQ,SAAS,KAAK,oBAAC,gBAAD;OAAyB;OAAqB;OAAY,QAAQ,CAAC,OAAO,SAAS,SAAS,OAAO,YAAY;OAAe;MAAa,CAAA;KAC1K;IACJ,CAAA,GAAA,SAAS,oBAAC,OAAD;KAAK,WAAWA,OAAK,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC,WAAW,yBAAyB;KACzF,UAAA;IACE,CAAA,CACJ;GACJ,CAAA,GAAA,YAAY,oBAAC,OAAD;IAAK,GAAI,OAAO,MAAM,OAAO,KAAK;IAAI;GAAc,CAAA,CAC9D;;CACE,CAAA;AACf,CAAC;AACD,YAAY,cAAc"}

package/es/awesome/LogoMarquee/LogoMarquee.mjs

@@ -5,7 +5,7 @@ import { logoMarqueeMarker } from "./marker.stylex.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/LogoMarquee/LogoMarquee.tsx
 const Track = ({ hidden, iconOnly, iconSize, items }) => /* @__PURE__ */ jsx("div", {
@@ -42,7 +42,7 @@ const LogoMarquee = memo(({ caption, className, duration = 28, gap = 36, iconOnl
 				items
 			})]
 		}), caption && /* @__PURE__ */ jsx("p", {
-			className: clsx("lobe-logo-marquee-caption", stylex.props(styles.caption).className),
+			className: clsx$1("lobe-logo-marquee-caption", stylex.props(styles.caption).className),
 			children: caption
 		})]
 	});

package/es/awesome/LogoMarquee/LogoMarquee.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LogoMarquee.mjs","names":[],"sources":["../../../src/awesome/LogoMarquee/LogoMarquee.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { type CSSProperties, memo } from 'react';\n\nimport { renderLandingIcon } from '@/awesome/landingIcon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { logoMarqueeMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { LogoMarqueeProps } from './type';\n\nconst Track = ({\n  hidden,\n  iconOnly,\n  iconSize,\n  items,\n}: Pick<LogoMarqueeProps, 'iconOnly' | 'items'> & { hidden?: boolean; iconSize: number }) => (\n  <div aria-hidden={hidden || undefined} {...stylex.props(styles.track)}>\n    {items.map(({ icon, label }) => (\n      <span key={label} title={iconOnly ? label : undefined} {...stylex.props(styles.item)}>\n        {renderLandingIcon(icon, iconSize)}\n        {!iconOnly && label}\n      </span>\n    ))}\n  </div>\n);\n\nconst LogoMarquee = memo<LogoMarqueeProps>(\n  ({\n    caption,\n    className,\n    duration = 28,\n    gap = 36,\n    iconOnly = false,\n    iconSize = 18,\n    items,\n    maxWidth = 640,\n    style,\n    ...rest\n  }) => {\n    const variables = {\n      '--logo-marquee-duration': `${duration}s`,\n      '--logo-marquee-gap': `${gap}px`,\n      '--logo-marquee-max-width': typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\n    } as CSSProperties;\n\n    return (\n      <div {...styleProps(styles.root, className, { ...variables, ...style })} {...rest}>\n        <div {...stylex.props(logoMarqueeMarker, styles.viewport)}>\n          <Track iconOnly={iconOnly} iconSize={iconSize} items={items} />\n          <Track hidden iconOnly={iconOnly} iconSize={iconSize} items={items} />\n        </div>\n        {caption && (\n          <p className={clsx('lobe-logo-marquee-caption', stylex.props(styles.caption).className)}>\n            {caption}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nLogoMarquee.displayName = 'LogoMarquee';\n\nexport default LogoMarquee;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAS,EACb,QACA,UACA,UACA,YAII,oBAAC,OAAD;CAAK,eAAa,UAAU,KAAA;CAAW,GAAI,OAAO,MAAM,OAAO,KAAK;CACrE,UAAA,MAAM,KAAK,EACZ,MACA,YACI,qBAAC,QAAD;EAAkB,OAAO,WAAW,QAAQ,KAAA;EAAW,GAAI,OAAO,MAAM,OAAO,IAAI;EAAnF,UAAA,CACC,kBAAkB,MAAM,QAAQ,GAChC,CAAC,YAAY,KACV;CAHO,GAAA,KAGP,CAAC;AACN,CAAA;AACP,MAAM,cAAc,MAAwB,EAC1C,SACA,WACA,WAAW,IACX,MAAM,IACN,WAAW,OACX,WAAW,IACX,OACA,WAAW,KACX,OACA,GAAG,WACC;CACJ,MAAM,YAAY;EAChB,2BAA2B,GAAG,SAAS;EACvC,sBAAsB,GAAG,IAAI;EAC7B,4BAA4B,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;CAC/E;CACA,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,MAAM,WAAW;GACjD,GAAG;GACH,GAAG;EACL,CAAC;EAAG,GAAI;EAHD,UAAA,CAID,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,mBAAmB,OAAO,QAAQ;GAAxD,UAAA,CACE,oBAAC,OAAD;IAAiB;IAAoB;IAAiB;GAAQ,CAAA,GAC9D,oBAAC,OAAD;IAAO,QAAA;IAAiB;IAAoB;IAAiB;GAAQ,CAAA,CAClE;EACJ,CAAA,GAAA,WAAW,oBAAC,KAAD;GAAG,WAAW,KAAK,6BAA6B,OAAO,MAAM,OAAO,OAAO,CAAC,CAAC,SAAS;GAC7F,UAAA;EACA,CAAA,CACF;;AACX,CAAC;AACD,YAAY,cAAc"}
+{"version":3,"file":"LogoMarquee.mjs","names":["clsx"],"sources":["../../../src/awesome/LogoMarquee/LogoMarquee.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { type CSSProperties, memo } from 'react';\n\nimport { renderLandingIcon } from '@/awesome/landingIcon';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { logoMarqueeMarker } from './marker.stylex';\nimport { styles } from './style';\nimport type { LogoMarqueeProps } from './type';\n\nconst Track = ({\n  hidden,\n  iconOnly,\n  iconSize,\n  items,\n}: Pick<LogoMarqueeProps, 'iconOnly' | 'items'> & { hidden?: boolean; iconSize: number }) => (\n  <div aria-hidden={hidden || undefined} {...stylex.props(styles.track)}>\n    {items.map(({ icon, label }) => (\n      <span key={label} title={iconOnly ? label : undefined} {...stylex.props(styles.item)}>\n        {renderLandingIcon(icon, iconSize)}\n        {!iconOnly && label}\n      </span>\n    ))}\n  </div>\n);\n\nconst LogoMarquee = memo<LogoMarqueeProps>(\n  ({\n    caption,\n    className,\n    duration = 28,\n    gap = 36,\n    iconOnly = false,\n    iconSize = 18,\n    items,\n    maxWidth = 640,\n    style,\n    ...rest\n  }) => {\n    const variables = {\n      '--logo-marquee-duration': `${duration}s`,\n      '--logo-marquee-gap': `${gap}px`,\n      '--logo-marquee-max-width': typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,\n    } as CSSProperties;\n\n    return (\n      <div {...styleProps(styles.root, className, { ...variables, ...style })} {...rest}>\n        <div {...stylex.props(logoMarqueeMarker, styles.viewport)}>\n          <Track iconOnly={iconOnly} iconSize={iconSize} items={items} />\n          <Track hidden iconOnly={iconOnly} iconSize={iconSize} items={items} />\n        </div>\n        {caption && (\n          <p className={clsx('lobe-logo-marquee-caption', stylex.props(styles.caption).className)}>\n            {caption}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nLogoMarquee.displayName = 'LogoMarquee';\n\nexport default LogoMarquee;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAS,EACb,QACA,UACA,UACA,YAII,oBAAC,OAAD;CAAK,eAAa,UAAU,KAAA;CAAW,GAAI,OAAO,MAAM,OAAO,KAAK;CACrE,UAAA,MAAM,KAAK,EACZ,MACA,YACI,qBAAC,QAAD;EAAkB,OAAO,WAAW,QAAQ,KAAA;EAAW,GAAI,OAAO,MAAM,OAAO,IAAI;EAAnF,UAAA,CACC,kBAAkB,MAAM,QAAQ,GAChC,CAAC,YAAY,KACV;CAHO,GAAA,KAGP,CAAC;AACN,CAAA;AACP,MAAM,cAAc,MAAwB,EAC1C,SACA,WACA,WAAW,IACX,MAAM,IACN,WAAW,OACX,WAAW,IACX,OACA,WAAW,KACX,OACA,GAAG,WACC;CACJ,MAAM,YAAY;EAChB,2BAA2B,GAAG,SAAS;EACvC,sBAAsB,GAAG,IAAI;EAC7B,4BAA4B,OAAO,aAAa,WAAW,GAAG,SAAS,MAAM;CAC/E;CACA,OAAO,qBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,MAAM,WAAW;GACjD,GAAG;GACH,GAAG;EACL,CAAC;EAAG,GAAI;EAHD,UAAA,CAID,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,mBAAmB,OAAO,QAAQ;GAAxD,UAAA,CACE,oBAAC,OAAD;IAAiB;IAAoB;IAAiB;GAAQ,CAAA,GAC9D,oBAAC,OAAD;IAAO,QAAA;IAAiB;IAAoB;IAAiB;GAAQ,CAAA,CAClE;EACJ,CAAA,GAAA,WAAW,oBAAC,KAAD;GAAG,WAAWA,OAAK,6BAA6B,OAAO,MAAM,OAAO,OAAO,CAAC,CAAC,SAAS;GAC7F,UAAA;EACA,CAAA,CACF;;AACX,CAAC;AACD,YAAY,cAAc"}

package/es/awesome/Spline/ParentSize.mjs

@@ -1,7 +1,7 @@
+import { mergeRefs } from "../../utils/mergeRefs.mjs";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { debounce } from "es-toolkit/compat";
-import { mergeRefs } from "react-merge-refs";
 //#region src/awesome/Spline/ParentSize.tsx
 const defaultIgnoreDimensions = [];
 const defaultParentSizeStyles = {

package/es/awesome/Spline/ParentSize.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ParentSize.mjs","names":[],"sources":["../../../src/awesome/Spline/ParentSize.tsx"],"sourcesContent":["import { debounce } from 'es-toolkit/compat';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\ninterface ResizeObserverCallback {\n  (entries: ResizeObserverEntry[], observer: ResizeObserver): void;\n}\n\ninterface ResizeObserverPolyfill {\n  new (callback: ResizeObserverCallback): ResizeObserver;\n}\n\n// @TODO remove when upgraded to TS 4 which has its own declaration\ninterface PrivateWindow {\n  ResizeObserver: ResizeObserverPolyfill;\n}\n\nexport interface ParentSizeProps {\n  /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */\n  children: (\n    args: {\n      ref: HTMLDivElement | null;\n      resize: (state: ParentSizeState) => void;\n    } & ParentSizeState,\n  ) => ReactNode;\n  /** Optional `className` to add to the parent `div` wrapper used for size measurement. */\n  className?: string;\n  /** Child render updates upon resize are delayed until `debounceTime` milliseconds _after_ the last resize event is observed. */\n  debounceTime?: number;\n  /** Optional flag to toggle leading debounce calls. When set to true this will ensure that the component always renders immediately. (defaults to true) */\n  enableDebounceLeadingCall?: boolean;\n  /** Optional dimensions provided won't trigger a state change when changed. */\n  ignoreDimensions?: keyof ParentSizeState | (keyof ParentSizeState)[];\n  /** Optional `style` object to apply to the parent `div` wrapper used for size measurement. */\n  parentSizeStyles?: CSSProperties;\n  ref?: Ref<HTMLDivElement>;\n  /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */\n  resizeObserverPolyfill?: ResizeObserverPolyfill;\n}\n\ntype ParentSizeState = {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport type ParentSizeProvidedProps = ParentSizeState;\n\nconst defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = [];\nconst defaultParentSizeStyles = { height: '100%', width: '100%' };\n\nconst ParentSize = memo<ParentSizeProps>(\n  ({\n    ref,\n    className,\n    children,\n    debounceTime = 300,\n    ignoreDimensions = defaultIgnoreDimensions,\n    parentSizeStyles,\n    enableDebounceLeadingCall = true,\n    resizeObserverPolyfill,\n    ...restProps\n  }) => {\n    const target = useRef<HTMLDivElement | null>(null);\n    const animationFrameID = useRef(0);\n\n    const [state, setState] = useState<ParentSizeState>({\n      height: 0,\n      left: 0,\n      top: 0,\n      width: 0,\n    });\n\n    const resize = useMemo(() => {\n      const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];\n\n      return debounce(\n        (incoming: ParentSizeState) => {\n          setState((existing) => {\n            const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[];\n            const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]);\n            const shouldBail = keysWithChanges.every((key) => normalized.includes(key));\n\n            return shouldBail ? existing : incoming;\n          });\n        },\n        debounceTime,\n        { leading: enableDebounceLeadingCall },\n      );\n    }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);\n\n    useEffect(() => {\n      const LocalResizeObserver =\n        resizeObserverPolyfill || (window as unknown as PrivateWindow).ResizeObserver;\n\n      const observer = new LocalResizeObserver((entries) => {\n        for (const entry of entries) {\n          const { left, top, width, height } = entry?.contentRect ?? {};\n          animationFrameID.current = window.requestAnimationFrame(() => {\n            resize({ height, left, top, width });\n          });\n        }\n      });\n      if (target.current) observer.observe(target.current);\n\n      return () => {\n        window.cancelAnimationFrame(animationFrameID.current);\n        observer.disconnect();\n        resize.cancel();\n      };\n    }, [resize, resizeObserverPolyfill]);\n\n    return (\n      <div\n        className={className}\n        ref={mergeRefs<HTMLDivElement>([ref, target])}\n        style={{ ...defaultParentSizeStyles, ...parentSizeStyles }}\n        {...restProps}\n      >\n        {children({\n          ...state,\n          ref: target.current,\n          resize,\n        })}\n      </div>\n    );\n  },\n);\n\nexport default ParentSize;\n"],"mappings":";;;;;AA0DA,MAAM,0BAA+D,CAAC;AACtE,MAAM,0BAA0B;CAAE,QAAQ;CAAQ,OAAO;AAAO;AAEhE,MAAM,aAAa,MAChB,EACC,KACA,WACA,UACA,eAAe,KACf,mBAAmB,yBACnB,kBACA,4BAA4B,MAC5B,wBACA,GAAG,gBACC;CACJ,MAAM,SAAS,OAA8B,IAAI;CACjD,MAAM,mBAAmB,OAAO,CAAC;CAEjC,MAAM,CAAC,OAAO,YAAY,SAA0B;EAClD,QAAQ;EACR,MAAM;EACN,KAAK;EACL,OAAO;CACT,CAAC;CAED,MAAM,SAAS,cAAc;EAC3B,MAAM,aAAa,MAAM,QAAQ,gBAAgB,IAAI,mBAAmB,CAAC,gBAAgB;EAEzF,OAAO,UACJ,aAA8B;GAC7B,UAAU,aAAa;IAKrB,OAJkB,OAAO,KAAK,QACE,CAAC,CAAC,QAAQ,QAAQ,SAAS,SAAS,SAAS,IAC5C,CAAC,CAAC,OAAO,QAAQ,WAAW,SAAS,GAAG,CAEzD,IAAI,WAAW;GACjC,CAAC;EACH,GACA,cACA,EAAE,SAAS,0BAA0B,CACvC;CACF,GAAG;EAAC;EAAc;EAA2B;CAAgB,CAAC;CAE9D,gBAAgB;EAId,MAAM,WAAW,KAFf,0BAA2B,OAAoC,iBAEvB,YAAY;GACpD,KAAK,MAAM,SAAS,SAAS;IAC3B,MAAM,EAAE,MAAM,KAAK,OAAO,WAAW,OAAO,eAAe,CAAC;IAC5D,iBAAiB,UAAU,OAAO,4BAA4B;KAC5D,OAAO;MAAE;MAAQ;MAAM;MAAK;KAAM,CAAC;IACrC,CAAC;GACH;EACF,CAAC;EACD,IAAI,OAAO,SAAS,SAAS,QAAQ,OAAO,OAAO;EAEnD,aAAa;GACX,OAAO,qBAAqB,iBAAiB,OAAO;GACpD,SAAS,WAAW;GACpB,OAAO,OAAO;EAChB;CACF,GAAG,CAAC,QAAQ,sBAAsB,CAAC;CAEnC,OACE,oBAAC,OAAD;EACa;EACX,KAAK,UAA0B,CAAC,KAAK,MAAM,CAAC;EAC5C,OAAO;GAAE,GAAG;GAAyB,GAAG;EAAiB;EACzD,GAAI;EAEH,UAAA,SAAS;GACR,GAAG;GACH,KAAK,OAAO;GACZ;EACF,CAAC;CACE,CAAA;AAET,CACF"}
+{"version":3,"file":"ParentSize.mjs","names":[],"sources":["../../../src/awesome/Spline/ParentSize.tsx"],"sourcesContent":["import { debounce } from 'es-toolkit/compat';\nimport {\n  type CSSProperties,\n  memo,\n  type ReactNode,\n  type Ref,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { mergeRefs } from '@/utils/mergeRefs';\n\ninterface ResizeObserverCallback {\n  (entries: ResizeObserverEntry[], observer: ResizeObserver): void;\n}\n\ninterface ResizeObserverPolyfill {\n  new (callback: ResizeObserverCallback): ResizeObserver;\n}\n\n// @TODO remove when upgraded to TS 4 which has its own declaration\ninterface PrivateWindow {\n  ResizeObserver: ResizeObserverPolyfill;\n}\n\nexport interface ParentSizeProps {\n  /** Child render function `({ width, height, top, left, ref, resize }) => ReactNode`. */\n  children: (\n    args: {\n      ref: HTMLDivElement | null;\n      resize: (state: ParentSizeState) => void;\n    } & ParentSizeState,\n  ) => ReactNode;\n  /** Optional `className` to add to the parent `div` wrapper used for size measurement. */\n  className?: string;\n  /** Child render updates upon resize are delayed until `debounceTime` milliseconds _after_ the last resize event is observed. */\n  debounceTime?: number;\n  /** Optional flag to toggle leading debounce calls. When set to true this will ensure that the component always renders immediately. (defaults to true) */\n  enableDebounceLeadingCall?: boolean;\n  /** Optional dimensions provided won't trigger a state change when changed. */\n  ignoreDimensions?: keyof ParentSizeState | (keyof ParentSizeState)[];\n  /** Optional `style` object to apply to the parent `div` wrapper used for size measurement. */\n  parentSizeStyles?: CSSProperties;\n  ref?: Ref<HTMLDivElement>;\n  /** Optionally inject a ResizeObserver polyfill, else this *must* be globally available. */\n  resizeObserverPolyfill?: ResizeObserverPolyfill;\n}\n\ntype ParentSizeState = {\n  height: number;\n  left: number;\n  top: number;\n  width: number;\n};\n\nexport type ParentSizeProvidedProps = ParentSizeState;\n\nconst defaultIgnoreDimensions: ParentSizeProps['ignoreDimensions'] = [];\nconst defaultParentSizeStyles = { height: '100%', width: '100%' };\n\nconst ParentSize = memo<ParentSizeProps>(\n  ({\n    ref,\n    className,\n    children,\n    debounceTime = 300,\n    ignoreDimensions = defaultIgnoreDimensions,\n    parentSizeStyles,\n    enableDebounceLeadingCall = true,\n    resizeObserverPolyfill,\n    ...restProps\n  }) => {\n    const target = useRef<HTMLDivElement | null>(null);\n    const animationFrameID = useRef(0);\n\n    const [state, setState] = useState<ParentSizeState>({\n      height: 0,\n      left: 0,\n      top: 0,\n      width: 0,\n    });\n\n    const resize = useMemo(() => {\n      const normalized = Array.isArray(ignoreDimensions) ? ignoreDimensions : [ignoreDimensions];\n\n      return debounce(\n        (incoming: ParentSizeState) => {\n          setState((existing) => {\n            const stateKeys = Object.keys(existing) as (keyof ParentSizeState)[];\n            const keysWithChanges = stateKeys.filter((key) => existing[key] !== incoming[key]);\n            const shouldBail = keysWithChanges.every((key) => normalized.includes(key));\n\n            return shouldBail ? existing : incoming;\n          });\n        },\n        debounceTime,\n        { leading: enableDebounceLeadingCall },\n      );\n    }, [debounceTime, enableDebounceLeadingCall, ignoreDimensions]);\n\n    useEffect(() => {\n      const LocalResizeObserver =\n        resizeObserverPolyfill || (window as unknown as PrivateWindow).ResizeObserver;\n\n      const observer = new LocalResizeObserver((entries) => {\n        for (const entry of entries) {\n          const { left, top, width, height } = entry?.contentRect ?? {};\n          animationFrameID.current = window.requestAnimationFrame(() => {\n            resize({ height, left, top, width });\n          });\n        }\n      });\n      if (target.current) observer.observe(target.current);\n\n      return () => {\n        window.cancelAnimationFrame(animationFrameID.current);\n        observer.disconnect();\n        resize.cancel();\n      };\n    }, [resize, resizeObserverPolyfill]);\n\n    return (\n      <div\n        className={className}\n        ref={mergeRefs<HTMLDivElement>([ref, target])}\n        style={{ ...defaultParentSizeStyles, ...parentSizeStyles }}\n        {...restProps}\n      >\n        {children({\n          ...state,\n          ref: target.current,\n          resize,\n        })}\n      </div>\n    );\n  },\n);\n\nexport default ParentSize;\n"],"mappings":";;;;;AA2DA,MAAM,0BAA+D,CAAC;AACtE,MAAM,0BAA0B;CAAE,QAAQ;CAAQ,OAAO;AAAO;AAEhE,MAAM,aAAa,MAChB,EACC,KACA,WACA,UACA,eAAe,KACf,mBAAmB,yBACnB,kBACA,4BAA4B,MAC5B,wBACA,GAAG,gBACC;CACJ,MAAM,SAAS,OAA8B,IAAI;CACjD,MAAM,mBAAmB,OAAO,CAAC;CAEjC,MAAM,CAAC,OAAO,YAAY,SAA0B;EAClD,QAAQ;EACR,MAAM;EACN,KAAK;EACL,OAAO;CACT,CAAC;CAED,MAAM,SAAS,cAAc;EAC3B,MAAM,aAAa,MAAM,QAAQ,gBAAgB,IAAI,mBAAmB,CAAC,gBAAgB;EAEzF,OAAO,UACJ,aAA8B;GAC7B,UAAU,aAAa;IAKrB,OAJkB,OAAO,KAAK,QACE,CAAC,CAAC,QAAQ,QAAQ,SAAS,SAAS,SAAS,IAC5C,CAAC,CAAC,OAAO,QAAQ,WAAW,SAAS,GAAG,CAEzD,IAAI,WAAW;GACjC,CAAC;EACH,GACA,cACA,EAAE,SAAS,0BAA0B,CACvC;CACF,GAAG;EAAC;EAAc;EAA2B;CAAgB,CAAC;CAE9D,gBAAgB;EAId,MAAM,WAAW,KAFf,0BAA2B,OAAoC,iBAEvB,YAAY;GACpD,KAAK,MAAM,SAAS,SAAS;IAC3B,MAAM,EAAE,MAAM,KAAK,OAAO,WAAW,OAAO,eAAe,CAAC;IAC5D,iBAAiB,UAAU,OAAO,4BAA4B;KAC5D,OAAO;MAAE;MAAQ;MAAM;MAAK;KAAM,CAAC;IACrC,CAAC;GACH;EACF,CAAC;EACD,IAAI,OAAO,SAAS,SAAS,QAAQ,OAAO,OAAO;EAEnD,aAAa;GACX,OAAO,qBAAqB,iBAAiB,OAAO;GACpD,SAAS,WAAW;GACpB,OAAO,OAAO;EAChB;CACF,GAAG,CAAC,QAAQ,sBAAsB,CAAC;CAEnC,OACE,oBAAC,OAAD;EACa;EACX,KAAK,UAA0B,CAAC,KAAK,MAAM,CAAC;EAC5C,OAAO;GAAE,GAAG;GAAyB,GAAG;EAAiB;EACzD,GAAI;EAEH,UAAA,SAAS;GACR,GAAG;GACH,KAAK,OAAO;GACZ;EACF,CAAC;CACE,CAAA;AAET,CACF"}

package/es/awesome/TypewriterEffect/TypewriterEffect.mjs

@@ -3,7 +3,7 @@ import { useMotionComponent } from "../../MotionProvider/index.mjs";
 import { styles } from "./style.mjs";
 import { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/TypewriterEffect/TypewriterEffect.tsx
 const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed = 100, initialDelay = 0, pauseDuration = 2e3, deletingSpeed = 50, deletePauseDuration = 0, loop = true, className = "", color, showCursor = true, hideCursorWhileTyping = false, cursorCharacter, cursorClassName = "", cursorColor, cursorBlinkDuration = .8, cursorFade = true, cursorStyle = "pipe", textColors = [], variableSpeed, onSentenceComplete, startOnVisible = false, reverseMode = false, segmentMode = "grapheme", ...props }) => {
@@ -134,7 +134,7 @@ const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed =
 	const finalCursorColor = getCurrentCursorColor();
 	const characters = splitText(displayedText);
 	return createElement(Component, {
-		className: clsx(stylex.props(styles.container).className, className),
+		className: clsx$1(stylex.props(styles.container).className, className),
 		ref: containerRef,
 		...props
 	}, /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
@@ -152,7 +152,7 @@ const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed =
 		}, `${currentTextIndex}-${index}`))
 	}), showCursor && (cursorFade ? /* @__PURE__ */ jsx(Motion.span, {
 		animate: { opacity: shouldHideCursor ? 0 : 1 },
-		className: clsx(stylex.props(getCursorStyle()).className, cursorClassName),
+		className: clsx$1(stylex.props(getCursorStyle()).className, cursorClassName),
 		initial: { opacity: 0 },
 		style: finalCursorColor ? { backgroundColor: finalCursorColor } : void 0,
 		transition: {
@@ -163,7 +163,7 @@ const TypewriterEffect = memo(({ sentences, as: Component = "div", typingSpeed =
 		},
 		children: cursorCharacter
 	}) : /* @__PURE__ */ jsx("span", {
-		className: clsx(stylex.props(getCursorStyle()).className, cursorClassName),
+		className: clsx$1(stylex.props(getCursorStyle()).className, cursorClassName),
 		style: {
 			backgroundColor: finalCursorColor,
 			opacity: shouldHideCursor ? 0 : 1

package/es/awesome/TypewriterEffect/TypewriterEffect.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TypewriterEffect.mjs","names":[],"sources":["../../../src/awesome/TypewriterEffect/TypewriterEffect.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { styles } from './style';\nimport type { TypewriterEffectProps } from './type';\n\nconst TypewriterEffect = memo<TypewriterEffectProps>(\n  ({\n    sentences,\n    as: Component = 'div',\n    typingSpeed = 100,\n    initialDelay = 0,\n    pauseDuration = 2000,\n    deletingSpeed = 50,\n    deletePauseDuration = 0,\n    loop = true,\n    className = '',\n    color,\n    showCursor = true,\n    hideCursorWhileTyping = false,\n    cursorCharacter,\n    cursorClassName = '',\n    cursorColor,\n    cursorBlinkDuration = 0.8,\n    cursorFade = true,\n    cursorStyle = 'pipe',\n    textColors = [],\n    variableSpeed,\n    onSentenceComplete,\n    startOnVisible = false,\n    reverseMode = false,\n    segmentMode = 'grapheme',\n    ...props\n  }: TypewriterEffectProps) => {\n    const Motion = useMotionComponent();\n    const [displayedText, setDisplayedText] = useState('');\n    const [currentCharIndex, setCurrentCharIndex] = useState(0);\n    const [isDeleting, setIsDeleting] = useState(false);\n    const [currentTextIndex, setCurrentTextIndex] = useState(0);\n    const [isVisible, setIsVisible] = useState(!startOnVisible);\n    const [isDeletePausing, setIsDeletePausing] = useState(false);\n    const containerRef = useRef<HTMLElement>(null);\n\n    const textArray = useMemo(\n      () => (Array.isArray(sentences) ? sentences : [sentences]),\n      [sentences],\n    );\n\n    // Helper function to split text based on segment mode\n    const splitText = useCallback(\n      (text: string): string[] => {\n        // Use Intl.Segmenter if available\n        if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n          const segmenter = new Intl.Segmenter(undefined, { granularity: segmentMode });\n          return Array.from(segmenter.segment(text), (segment) => segment.segment);\n        }\n\n        // Fallback when Intl.Segmenter is not available\n        if (segmentMode === 'word') {\n          // Simple word splitting fallback\n          return text.split(/(\\s+)/).filter(Boolean);\n        }\n\n        // Grapheme fallback\n        return Array.from(text);\n      },\n      [segmentMode],\n    );\n\n    const getRandomSpeed = useCallback(() => {\n      if (!variableSpeed) return typingSpeed;\n      const { min, max } = variableSpeed;\n      return Math.random() * (max - min) + min;\n    }, [variableSpeed, typingSpeed]);\n\n    const getCurrentTextColor = () => {\n      if (textColors.length > 0) {\n        return textColors[currentTextIndex % textColors.length];\n      }\n      return color;\n    };\n\n    const getCurrentCursorColor = () => {\n      return cursorColor || color;\n    };\n\n    useEffect(() => {\n      if (!startOnVisible || !containerRef.current) return;\n\n      const observer = new IntersectionObserver(\n        (entries) => {\n          entries.forEach((entry) => {\n            if (entry.isIntersecting) {\n              setIsVisible(true);\n            }\n          });\n        },\n        { threshold: 0.1 },\n      );\n\n      observer.observe(containerRef.current);\n\n      return () => observer.disconnect();\n    }, [startOnVisible]);\n\n    useEffect(() => {\n      if (!isVisible) return;\n\n      let timeout: ReturnType<typeof setTimeout>;\n\n      const currentText = textArray[currentTextIndex];\n      // Split text based on segment mode\n      const textSegments = splitText(currentText);\n      const processedText = reverseMode ? textSegments.reverse().join('') : currentText;\n\n      // Handle delete pause state\n      if (isDeletePausing) {\n        timeout = setTimeout(() => {\n          setIsDeletePausing(false);\n        }, deletePauseDuration);\n        return () => clearTimeout(timeout);\n      }\n\n      const executeTypingAnimation = () => {\n        if (isDeleting) {\n          if (displayedText === '') {\n            setIsDeleting(false);\n            if (currentTextIndex === textArray.length - 1 && !loop) {\n              return;\n            }\n            if (onSentenceComplete) {\n              onSentenceComplete(textArray[currentTextIndex], currentTextIndex);\n            }\n            setCurrentTextIndex((prev) => (prev + 1) % textArray.length);\n            setCurrentCharIndex(0);\n\n            if (deletePauseDuration > 0) {\n              setIsDeletePausing(true);\n              return;\n            }\n          } else {\n            timeout = setTimeout(() => {\n              setDisplayedText((prev) => {\n                const segments = splitText(prev);\n                return segments.slice(0, -1).join('');\n              });\n            }, deletingSpeed);\n          }\n        } else {\n          const processedSegments = splitText(processedText);\n          if (currentCharIndex < processedSegments.length) {\n            timeout = setTimeout(\n              () => {\n                setDisplayedText((prev) => prev + processedSegments[currentCharIndex]);\n                setCurrentCharIndex((prev) => prev + 1);\n              },\n              variableSpeed ? getRandomSpeed() : typingSpeed,\n            );\n          } else if (textArray.length >= 1) {\n            if (!loop && currentTextIndex === textArray.length - 1) return;\n\n            timeout = setTimeout(() => {\n              setIsDeleting(true);\n            }, pauseDuration);\n          }\n        }\n      };\n\n      if (currentCharIndex === 0 && !isDeleting && displayedText === '') {\n        timeout = setTimeout(executeTypingAnimation, initialDelay);\n      } else {\n        executeTypingAnimation();\n      }\n\n      return () => clearTimeout(timeout);\n    }, [\n      currentCharIndex,\n      displayedText,\n      isDeleting,\n      isDeletePausing,\n      typingSpeed,\n      deletingSpeed,\n      deletePauseDuration,\n      pauseDuration,\n      textArray,\n      currentTextIndex,\n      loop,\n      initialDelay,\n      isVisible,\n      reverseMode,\n      variableSpeed,\n      onSentenceComplete,\n      getRandomSpeed,\n      splitText,\n    ]);\n\n    const getCursorStyle = () => {\n      if (cursorCharacter) return styles.cursorCustom;\n\n      switch (cursorStyle) {\n        case 'block': {\n          return styles.cursorBlock;\n        }\n        case 'dot': {\n          return styles.cursorDot;\n        }\n        case 'underscore': {\n          return styles.cursorUnderscore;\n        }\n        case 'pipe': {\n          return styles.cursor;\n        }\n      }\n    };\n\n    const currentTextLength = splitText(textArray[currentTextIndex]).length;\n    const isTyping = currentCharIndex < currentTextLength && !isDeleting;\n    const isAfterTyping = currentCharIndex === currentTextLength && !isDeleting;\n\n    const shouldHideCursor = (() => {\n      if (hideCursorWhileTyping === true) return true; // 完全隐藏\n      if (hideCursorWhileTyping === 'typing') return isTyping || isDeleting; // 打字和删除时隐藏\n      if (hideCursorWhileTyping === 'afterTyping') return isAfterTyping; // 打字完成后隐藏\n      return false;\n    })();\n\n    const textColor = getCurrentTextColor();\n    const finalCursorColor = getCurrentCursorColor();\n\n    // Split displayed text for animation\n    const characters = splitText(displayedText);\n\n    return createElement(\n      Component,\n      {\n        className: clsx(stylex.props(styles.container).className, className),\n        ref: containerRef,\n        ...props,\n      },\n      <>\n        <span {...stylex.props(styles.text)} style={textColor ? { color: textColor } : undefined}>\n          {characters.map((char, index) => (\n            <Motion.span\n              animate={{ opacity: 1 }}\n              initial={{ opacity: 0 }}\n              key={`${currentTextIndex}-${index}`}\n              style={{ display: 'inline-block' }}\n              transition={{\n                duration: typingSpeed / 500,\n                ease: 'easeInOut',\n              }}\n            >\n              {char === ' ' ? '\\u00A0' : char}\n            </Motion.span>\n          ))}\n        </span>\n        {showCursor &&\n          (cursorFade ? (\n            <Motion.span\n              animate={{ opacity: shouldHideCursor ? 0 : 1 }}\n              className={clsx(stylex.props(getCursorStyle()).className, cursorClassName)}\n              initial={{ opacity: 0 }}\n              style={finalCursorColor ? { backgroundColor: finalCursorColor } : undefined}\n              transition={{\n                duration: shouldHideCursor ? 0.2 : cursorBlinkDuration,\n                ease: 'easeInOut',\n                repeat: shouldHideCursor ? 0 : Number.POSITIVE_INFINITY,\n                repeatType: 'reverse',\n              }}\n            >\n              {cursorCharacter}\n            </Motion.span>\n          ) : (\n            <span\n              className={clsx(stylex.props(getCursorStyle()).className, cursorClassName)}\n              style={{\n                backgroundColor: finalCursorColor,\n                opacity: shouldHideCursor ? 0 : 1,\n              }}\n            >\n              {cursorCharacter}\n            </span>\n          ))}\n      </>,\n    );\n  },\n);\n\nTypewriterEffect.displayName = 'TypewriterEffect';\n\nexport default TypewriterEffect;\n"],"mappings":"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"}
+{"version":3,"file":"TypewriterEffect.mjs","names":["clsx"],"sources":["../../../src/awesome/TypewriterEffect/TypewriterEffect.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { styles } from './style';\nimport type { TypewriterEffectProps } from './type';\n\nconst TypewriterEffect = memo<TypewriterEffectProps>(\n  ({\n    sentences,\n    as: Component = 'div',\n    typingSpeed = 100,\n    initialDelay = 0,\n    pauseDuration = 2000,\n    deletingSpeed = 50,\n    deletePauseDuration = 0,\n    loop = true,\n    className = '',\n    color,\n    showCursor = true,\n    hideCursorWhileTyping = false,\n    cursorCharacter,\n    cursorClassName = '',\n    cursorColor,\n    cursorBlinkDuration = 0.8,\n    cursorFade = true,\n    cursorStyle = 'pipe',\n    textColors = [],\n    variableSpeed,\n    onSentenceComplete,\n    startOnVisible = false,\n    reverseMode = false,\n    segmentMode = 'grapheme',\n    ...props\n  }: TypewriterEffectProps) => {\n    const Motion = useMotionComponent();\n    const [displayedText, setDisplayedText] = useState('');\n    const [currentCharIndex, setCurrentCharIndex] = useState(0);\n    const [isDeleting, setIsDeleting] = useState(false);\n    const [currentTextIndex, setCurrentTextIndex] = useState(0);\n    const [isVisible, setIsVisible] = useState(!startOnVisible);\n    const [isDeletePausing, setIsDeletePausing] = useState(false);\n    const containerRef = useRef<HTMLElement>(null);\n\n    const textArray = useMemo(\n      () => (Array.isArray(sentences) ? sentences : [sentences]),\n      [sentences],\n    );\n\n    // Helper function to split text based on segment mode\n    const splitText = useCallback(\n      (text: string): string[] => {\n        // Use Intl.Segmenter if available\n        if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {\n          const segmenter = new Intl.Segmenter(undefined, { granularity: segmentMode });\n          return Array.from(segmenter.segment(text), (segment) => segment.segment);\n        }\n\n        // Fallback when Intl.Segmenter is not available\n        if (segmentMode === 'word') {\n          // Simple word splitting fallback\n          return text.split(/(\\s+)/).filter(Boolean);\n        }\n\n        // Grapheme fallback\n        return Array.from(text);\n      },\n      [segmentMode],\n    );\n\n    const getRandomSpeed = useCallback(() => {\n      if (!variableSpeed) return typingSpeed;\n      const { min, max } = variableSpeed;\n      return Math.random() * (max - min) + min;\n    }, [variableSpeed, typingSpeed]);\n\n    const getCurrentTextColor = () => {\n      if (textColors.length > 0) {\n        return textColors[currentTextIndex % textColors.length];\n      }\n      return color;\n    };\n\n    const getCurrentCursorColor = () => {\n      return cursorColor || color;\n    };\n\n    useEffect(() => {\n      if (!startOnVisible || !containerRef.current) return;\n\n      const observer = new IntersectionObserver(\n        (entries) => {\n          entries.forEach((entry) => {\n            if (entry.isIntersecting) {\n              setIsVisible(true);\n            }\n          });\n        },\n        { threshold: 0.1 },\n      );\n\n      observer.observe(containerRef.current);\n\n      return () => observer.disconnect();\n    }, [startOnVisible]);\n\n    useEffect(() => {\n      if (!isVisible) return;\n\n      let timeout: ReturnType<typeof setTimeout>;\n\n      const currentText = textArray[currentTextIndex];\n      // Split text based on segment mode\n      const textSegments = splitText(currentText);\n      const processedText = reverseMode ? textSegments.reverse().join('') : currentText;\n\n      // Handle delete pause state\n      if (isDeletePausing) {\n        timeout = setTimeout(() => {\n          setIsDeletePausing(false);\n        }, deletePauseDuration);\n        return () => clearTimeout(timeout);\n      }\n\n      const executeTypingAnimation = () => {\n        if (isDeleting) {\n          if (displayedText === '') {\n            setIsDeleting(false);\n            if (currentTextIndex === textArray.length - 1 && !loop) {\n              return;\n            }\n            if (onSentenceComplete) {\n              onSentenceComplete(textArray[currentTextIndex], currentTextIndex);\n            }\n            setCurrentTextIndex((prev) => (prev + 1) % textArray.length);\n            setCurrentCharIndex(0);\n\n            if (deletePauseDuration > 0) {\n              setIsDeletePausing(true);\n              return;\n            }\n          } else {\n            timeout = setTimeout(() => {\n              setDisplayedText((prev) => {\n                const segments = splitText(prev);\n                return segments.slice(0, -1).join('');\n              });\n            }, deletingSpeed);\n          }\n        } else {\n          const processedSegments = splitText(processedText);\n          if (currentCharIndex < processedSegments.length) {\n            timeout = setTimeout(\n              () => {\n                setDisplayedText((prev) => prev + processedSegments[currentCharIndex]);\n                setCurrentCharIndex((prev) => prev + 1);\n              },\n              variableSpeed ? getRandomSpeed() : typingSpeed,\n            );\n          } else if (textArray.length >= 1) {\n            if (!loop && currentTextIndex === textArray.length - 1) return;\n\n            timeout = setTimeout(() => {\n              setIsDeleting(true);\n            }, pauseDuration);\n          }\n        }\n      };\n\n      if (currentCharIndex === 0 && !isDeleting && displayedText === '') {\n        timeout = setTimeout(executeTypingAnimation, initialDelay);\n      } else {\n        executeTypingAnimation();\n      }\n\n      return () => clearTimeout(timeout);\n    }, [\n      currentCharIndex,\n      displayedText,\n      isDeleting,\n      isDeletePausing,\n      typingSpeed,\n      deletingSpeed,\n      deletePauseDuration,\n      pauseDuration,\n      textArray,\n      currentTextIndex,\n      loop,\n      initialDelay,\n      isVisible,\n      reverseMode,\n      variableSpeed,\n      onSentenceComplete,\n      getRandomSpeed,\n      splitText,\n    ]);\n\n    const getCursorStyle = () => {\n      if (cursorCharacter) return styles.cursorCustom;\n\n      switch (cursorStyle) {\n        case 'block': {\n          return styles.cursorBlock;\n        }\n        case 'dot': {\n          return styles.cursorDot;\n        }\n        case 'underscore': {\n          return styles.cursorUnderscore;\n        }\n        case 'pipe': {\n          return styles.cursor;\n        }\n      }\n    };\n\n    const currentTextLength = splitText(textArray[currentTextIndex]).length;\n    const isTyping = currentCharIndex < currentTextLength && !isDeleting;\n    const isAfterTyping = currentCharIndex === currentTextLength && !isDeleting;\n\n    const shouldHideCursor = (() => {\n      if (hideCursorWhileTyping === true) return true; // 完全隐藏\n      if (hideCursorWhileTyping === 'typing') return isTyping || isDeleting; // 打字和删除时隐藏\n      if (hideCursorWhileTyping === 'afterTyping') return isAfterTyping; // 打字完成后隐藏\n      return false;\n    })();\n\n    const textColor = getCurrentTextColor();\n    const finalCursorColor = getCurrentCursorColor();\n\n    // Split displayed text for animation\n    const characters = splitText(displayedText);\n\n    return createElement(\n      Component,\n      {\n        className: clsx(stylex.props(styles.container).className, className),\n        ref: containerRef,\n        ...props,\n      },\n      <>\n        <span {...stylex.props(styles.text)} style={textColor ? { color: textColor } : undefined}>\n          {characters.map((char, index) => (\n            <Motion.span\n              animate={{ opacity: 1 }}\n              initial={{ opacity: 0 }}\n              key={`${currentTextIndex}-${index}`}\n              style={{ display: 'inline-block' }}\n              transition={{\n                duration: typingSpeed / 500,\n                ease: 'easeInOut',\n              }}\n            >\n              {char === ' ' ? '\\u00A0' : char}\n            </Motion.span>\n          ))}\n        </span>\n        {showCursor &&\n          (cursorFade ? (\n            <Motion.span\n              animate={{ opacity: shouldHideCursor ? 0 : 1 }}\n              className={clsx(stylex.props(getCursorStyle()).className, cursorClassName)}\n              initial={{ opacity: 0 }}\n              style={finalCursorColor ? { backgroundColor: finalCursorColor } : undefined}\n              transition={{\n                duration: shouldHideCursor ? 0.2 : cursorBlinkDuration,\n                ease: 'easeInOut',\n                repeat: shouldHideCursor ? 0 : Number.POSITIVE_INFINITY,\n                repeatType: 'reverse',\n              }}\n            >\n              {cursorCharacter}\n            </Motion.span>\n          ) : (\n            <span\n              className={clsx(stylex.props(getCursorStyle()).className, cursorClassName)}\n              style={{\n                backgroundColor: finalCursorColor,\n                opacity: shouldHideCursor ? 0 : 1,\n              }}\n            >\n              {cursorCharacter}\n            </span>\n          ))}\n      </>,\n    );\n  },\n);\n\nTypewriterEffect.displayName = 'TypewriterEffect';\n\nexport default TypewriterEffect;\n"],"mappings":"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"}

package/es/awesome/index.d.mts

@@ -35,6 +35,9 @@ import "./Giscus/index.mjs";
 import { GradientButtonProps } from "./GradientButton/type.mjs";
 import GradientButton from "./GradientButton/GradientButton.mjs";
 import "./GradientButton/index.mjs";
+import { GrainientProps } from "./Grainient/type.mjs";
+import Grainient from "./Grainient/Grainient.mjs";
+import "./Grainient/index.mjs";
 import { GridBackgroundProps, GridShowcaseProps } from "./GridBackground/type.mjs";
 import GridBackground from "./GridBackground/GridBackground.mjs";
 import GridShowcase from "./GridBackground/GridShowcase.mjs";
@@ -64,4 +67,4 @@ import "./Spotlight/index.mjs";
 import { CursorStyle, SegmentMode, TypewriterEffectProps } from "./TypewriterEffect/type.mjs";
 import TypewriterEffect from "./TypewriterEffect/TypewriterEffect.mjs";
 import "./TypewriterEffect/index.mjs";
-export { AgentSkillCard, type AgentSkillCardAgent, type AgentSkillCardMode, type AgentSkillCardPanel, type AgentSkillCardProps, AuroraBackground, type AuroraBackgroundProps, BentoCard, type BentoCardProps, BentoGrid, type BentoGridProps, BottomGradientButton, type BottomGradientButtonProps, CodeShowcase, type CodeShowcaseItem, type CodeShowcaseProps, type CursorStyle, DEFAULT_SKILL_AGENTS, FeatureGrid, type FeatureGridItem, type FeatureGridProps, type FeatureItemType, Features, type FeaturesProps, FluidGradient, type FluidGradientProps, Giscus, type GiscusProps, GradientButton, type GradientButtonProps, GridBackground, type GridBackgroundProps, GridShowcase, type GridShowcaseProps, Hero, type HeroAction, type HeroProps, InstallBanner, type InstallBannerProps, LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, type LandingAction, LandingHero, type LandingHeroAction, type LandingHeroProps, type LandingLinkProps, type LandingLinkRender, type LandingNavigate, type LandingPalette, LandingSection, type LandingSectionProps, LogoMarquee, type LogoMarqueeItem, type LogoMarqueeProps, type SegmentMode, Spline, type SplineProps, Spotlight, SpotlightCard, type SpotlightCardProps, type SpotlightProps, TypewriterEffect, type TypewriterEffectProps, accentGradient as landingAccentGradient };
+export { AgentSkillCard, type AgentSkillCardAgent, type AgentSkillCardMode, type AgentSkillCardPanel, type AgentSkillCardProps, AuroraBackground, type AuroraBackgroundProps, BentoCard, type BentoCardProps, BentoGrid, type BentoGridProps, BottomGradientButton, type BottomGradientButtonProps, CodeShowcase, type CodeShowcaseItem, type CodeShowcaseProps, type CursorStyle, DEFAULT_SKILL_AGENTS, FeatureGrid, type FeatureGridItem, type FeatureGridProps, type FeatureItemType, Features, type FeaturesProps, FluidGradient, type FluidGradientProps, Giscus, type GiscusProps, GradientButton, type GradientButtonProps, Grainient, type GrainientProps, GridBackground, type GridBackgroundProps, GridShowcase, type GridShowcaseProps, Hero, type HeroAction, type HeroProps, InstallBanner, type InstallBannerProps, LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, type LandingAction, LandingHero, type LandingHeroAction, type LandingHeroProps, type LandingLinkProps, type LandingLinkRender, type LandingNavigate, type LandingPalette, LandingSection, type LandingSectionProps, LogoMarquee, type LogoMarqueeItem, type LogoMarqueeProps, type SegmentMode, Spline, type SplineProps, Spotlight, SpotlightCard, type SpotlightCardProps, type SpotlightProps, TypewriterEffect, type TypewriterEffectProps, accentGradient as landingAccentGradient };

package/es/awesome/index.mjs

@@ -13,6 +13,7 @@ import { LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, acce
 import FluidGradient from "./FluidGradient/FluidGradient.mjs";
 import Giscus from "./Giscus/Giscus.mjs";
 import GradientButton from "./GradientButton/GradientButton.mjs";
+import Grainient from "./Grainient/Grainient.mjs";
 import GridBackground from "./GridBackground/GridBackground.mjs";
 import GridShowcase from "./GridBackground/GridShowcase.mjs";
 import Hero from "./Hero/Hero.mjs";
@@ -22,4 +23,4 @@ import LandingSection from "./LandingSection/LandingSection.mjs";
 import LogoMarquee from "./LogoMarquee/LogoMarquee.mjs";
 import Spline from "./Spline/Spine.mjs";
 import TypewriterEffect from "./TypewriterEffect/TypewriterEffect.mjs";
-export { AgentSkillCard, AuroraBackground, BentoCard, BentoGrid, BottomGradientButton, CodeShowcase, DEFAULT_SKILL_AGENTS, FeatureGrid, Features, FluidGradient, Giscus, GradientButton, GridBackground, GridShowcase, Hero, InstallBanner, LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, LandingHero, LandingSection, LogoMarquee, Spline, Spotlight, SpotlightCard, TypewriterEffect, accentGradient as landingAccentGradient };
+export { AgentSkillCard, AuroraBackground, BentoCard, BentoGrid, BottomGradientButton, CodeShowcase, DEFAULT_SKILL_AGENTS, FeatureGrid, Features, FluidGradient, Giscus, GradientButton, Grainient, GridBackground, GridShowcase, Hero, InstallBanner, LANDING_GRADIENT_VAR, LANDING_PALETTE_DARK, LANDING_PALETTE_LIGHT, LandingHero, LandingSection, LogoMarquee, Spline, Spotlight, SpotlightCard, TypewriterEffect, accentGradient as landingAccentGradient };

package/es/awesome/landingActions.mjs

@@ -4,7 +4,7 @@ import { isExternalHref, renderLandingLink } from "./landingLink.mjs";
 import BottomGradientButton from "./BottomGradientButton/BottomGradientButton.mjs";
 import { Fragment } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/awesome/landingActions.tsx
 const styles = {
 	group: {
@@ -27,7 +27,7 @@ const LandingActions = ({ actions, className, onNavigate, renderLink, size = "la
 		styles.group,
 		size === "small" ? styles.groupSmall : styles.groupLarge,
 		xstyle
-	], clsx("lobe-landing-actions", className)),
+	], clsx$1("lobe-landing-actions", className)),
 	"data-size": size,
 	children: actions.map(({ external, href, icon, iconPlacement = "start", label, primary }) => {
 		const iconNode = icon && /* @__PURE__ */ jsx(Icon, {

package/es/awesome/landingActions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"landingActions.mjs","names":[],"sources":["../../src/awesome/landingActions.tsx"],"sourcesContent":["import './landingActions.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Fragment, type ReactNode } from 'react';\n\nimport BottomGradientButton from '@/awesome/BottomGradientButton';\nimport { isExternalHref, type LandingLinkRender, renderLandingLink } from '@/awesome/landingLink';\nimport Icon, { type IconProps } from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nexport interface LandingAction {\n  /** Opens in a new tab. Inferred from absolute URLs when omitted. */\n  external?: boolean;\n  href: string;\n  icon?: IconProps['icon'];\n  /** Places the icon after the label, e.g. for an arrow. */\n  iconPlacement?: 'start' | 'end';\n  label: ReactNode;\n  /** The primary action is a filled pill; others render as BottomGradientButton. */\n  primary?: boolean;\n}\n\nconst styles = stylex.create({\n  action: {\n    gap: 8,\n    borderColor: 'transparent',\n    borderRadius: 999,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    paddingBlock: 0,\n    paddingInline: 22,\n    transition: 'filter 140ms ease, transform 90ms ease',\n    alignItems: 'center',\n    backgroundColor: cssVar.colorText,\n    color: cssVar.colorBgContainer,\n    display: 'inline-flex',\n    filter: { 'default': null, ':hover': 'brightness(1.06)' },\n    fontSize: cssVar.fontSize,\n    fontWeight: 600,\n    justifyContent: 'center',\n    minBlockSize: 44,\n    textDecoration: 'none',\n    transform: { 'default': null, ':active': 'scale(0.97)' },\n    whiteSpace: 'nowrap',\n  },\n  actionSmall: {\n    gap: 6,\n    paddingInline: 14,\n    fontSize: cssVar.fontSizeSM,\n    minBlockSize: 34,\n  },\n  group: {\n    gap: 12,\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  groupLarge: {\n    alignSelf: { default: null, [media.mobile]: 'stretch' },\n  },\n  groupSmall: {\n    gap: 8,\n  },\n});\n\nexport type LandingNavigate = (href: string) => void;\n\nexport interface LandingActionsProps {\n  actions: LandingAction[];\n  className?: string;\n  /** Client-side navigation for internal non-primary actions, which render as buttons with an href. */\n  onNavigate?: LandingNavigate;\n  renderLink?: LandingLinkRender;\n  size?: 'large' | 'small';\n  xstyle?: Parameters<typeof styleProps>[0];\n}\n\nexport const LandingActions = ({\n  actions,\n  className,\n  onNavigate,\n  renderLink,\n  size = 'large',\n  xstyle,\n}: LandingActionsProps) => (\n  <div\n    {...styleProps(\n      [styles.group, size === 'small' ? styles.groupSmall : styles.groupLarge, xstyle],\n      clsx('lobe-landing-actions', className),\n    )}\n    data-size={size}\n  >\n    {actions.map(({ external, href, icon, iconPlacement = 'start', label, primary }) => {\n      const iconNode = icon && <Icon icon={icon} size={size === 'small' ? 14 : 16} />;\n      if (!primary) {\n        const isExternal = external ?? isExternalHref(href);\n        return (\n          <BottomGradientButton\n            href={href}\n            icon={iconNode}\n            iconPosition={iconPlacement}\n            key={href}\n            rel={isExternal ? 'noreferrer' : undefined}\n            size={size === 'small' ? 'middle' : 'large'}\n            target={isExternal ? '_blank' : undefined}\n            onClick={\n              !isExternal && onNavigate\n                ? (event) => {\n                    event.preventDefault();\n                    onNavigate(href);\n                  }\n                : undefined\n            }\n          >\n            {label}\n          </BottomGradientButton>\n        );\n      }\n      return (\n        <Fragment key={href}>\n          {renderLandingLink(renderLink, {\n            children: (\n              <>\n                {iconPlacement === 'start' && iconNode}\n                {label}\n                {iconPlacement === 'end' && iconNode}\n              </>\n            ),\n            className: stylex.props(styles.action, size === 'small' && styles.actionSmall)\n              .className,\n            external,\n            href,\n          })}\n        </Fragment>\n      );\n    })}\n  </div>\n);\n"],"mappings":";;;;;;;;AAuBA,MAAM,SAAS;CACb,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;AACF;AAWA,MAAa,kBAAkB,EAC7B,SACA,WACA,YACA,YACA,OAAO,SACP,aACyB,oBAAC,OAAD;CAAK,GAAI,WAAW;EAAC,OAAO;EAAO,SAAS,UAAU,OAAO,aAAa,OAAO;EAAY;CAAM,GAAG,KAAK,wBAAwB,SAAS,CAAC;CAAG,aAAW;CACjL,UAAA,QAAQ,KAAK,EACd,UACA,MACA,MACA,gBAAgB,SAChB,OACA,cACI;EACJ,MAAM,WAAW,QAAQ,oBAAC,MAAD;GAAY;GAAM,MAAM,SAAS,UAAU,KAAK;EAAK,CAAA;EAC9E,IAAI,CAAC,SAAS;GACZ,MAAM,aAAa,YAAY,eAAe,IAAI;GAClD,OAAO,oBAAC,sBAAD;IAA4B;IAAM,MAAM;IAAU,cAAc;IAA0B,KAAK,aAAa,eAAe,KAAA;IAAW,MAAM,SAAS,UAAU,WAAW;IAAS,QAAQ,aAAa,WAAW,KAAA;IAAW,SAAS,CAAC,cAAc,cAAa,UAAS;KACjR,MAAM,eAAe;KACrB,WAAW,IAAI;IACjB,IAAI,KAAA;IACG,UAAA;GACmB,GALiE,IAKjE;EAC5B;EACA,OAAO,oBAAC,UAAD,EAAA,UACA,kBAAkB,YAAY;GACjC,UAAU,qBAAA,YAAA,EAAA,UAAA;IACD,kBAAkB,WAAW;IAC7B;IACA,kBAAkB,SAAS;GAC5B,EAAA,CAAA;GACR,WAAW;IACT,GAAG,EACD,WAAW,8LACb;IACA,GAAG,EACD,WAAW,6LACb;GACF,EAAE,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;GAC7B;GACA;EACF,CAAC,EACW,GAlBQ,IAkBR;CAChB,CAAC;AACI,CAAA"}
+{"version":3,"file":"landingActions.mjs","names":["clsx"],"sources":["../../src/awesome/landingActions.tsx"],"sourcesContent":["import './landingActions.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Fragment, type ReactNode } from 'react';\n\nimport BottomGradientButton from '@/awesome/BottomGradientButton';\nimport { isExternalHref, type LandingLinkRender, renderLandingLink } from '@/awesome/landingLink';\nimport Icon, { type IconProps } from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { media } from '@/styles/stylex/media.stylex';\nimport { styleProps } from '@/styles/stylex/props';\n\nexport interface LandingAction {\n  /** Opens in a new tab. Inferred from absolute URLs when omitted. */\n  external?: boolean;\n  href: string;\n  icon?: IconProps['icon'];\n  /** Places the icon after the label, e.g. for an arrow. */\n  iconPlacement?: 'start' | 'end';\n  label: ReactNode;\n  /** The primary action is a filled pill; others render as BottomGradientButton. */\n  primary?: boolean;\n}\n\nconst styles = stylex.create({\n  action: {\n    gap: 8,\n    borderColor: 'transparent',\n    borderRadius: 999,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    paddingBlock: 0,\n    paddingInline: 22,\n    transition: 'filter 140ms ease, transform 90ms ease',\n    alignItems: 'center',\n    backgroundColor: cssVar.colorText,\n    color: cssVar.colorBgContainer,\n    display: 'inline-flex',\n    filter: { 'default': null, ':hover': 'brightness(1.06)' },\n    fontSize: cssVar.fontSize,\n    fontWeight: 600,\n    justifyContent: 'center',\n    minBlockSize: 44,\n    textDecoration: 'none',\n    transform: { 'default': null, ':active': 'scale(0.97)' },\n    whiteSpace: 'nowrap',\n  },\n  actionSmall: {\n    gap: 6,\n    paddingInline: 14,\n    fontSize: cssVar.fontSizeSM,\n    minBlockSize: 34,\n  },\n  group: {\n    gap: 12,\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  groupLarge: {\n    alignSelf: { default: null, [media.mobile]: 'stretch' },\n  },\n  groupSmall: {\n    gap: 8,\n  },\n});\n\nexport type LandingNavigate = (href: string) => void;\n\nexport interface LandingActionsProps {\n  actions: LandingAction[];\n  className?: string;\n  /** Client-side navigation for internal non-primary actions, which render as buttons with an href. */\n  onNavigate?: LandingNavigate;\n  renderLink?: LandingLinkRender;\n  size?: 'large' | 'small';\n  xstyle?: Parameters<typeof styleProps>[0];\n}\n\nexport const LandingActions = ({\n  actions,\n  className,\n  onNavigate,\n  renderLink,\n  size = 'large',\n  xstyle,\n}: LandingActionsProps) => (\n  <div\n    {...styleProps(\n      [styles.group, size === 'small' ? styles.groupSmall : styles.groupLarge, xstyle],\n      clsx('lobe-landing-actions', className),\n    )}\n    data-size={size}\n  >\n    {actions.map(({ external, href, icon, iconPlacement = 'start', label, primary }) => {\n      const iconNode = icon && <Icon icon={icon} size={size === 'small' ? 14 : 16} />;\n      if (!primary) {\n        const isExternal = external ?? isExternalHref(href);\n        return (\n          <BottomGradientButton\n            href={href}\n            icon={iconNode}\n            iconPosition={iconPlacement}\n            key={href}\n            rel={isExternal ? 'noreferrer' : undefined}\n            size={size === 'small' ? 'middle' : 'large'}\n            target={isExternal ? '_blank' : undefined}\n            onClick={\n              !isExternal && onNavigate\n                ? (event) => {\n                    event.preventDefault();\n                    onNavigate(href);\n                  }\n                : undefined\n            }\n          >\n            {label}\n          </BottomGradientButton>\n        );\n      }\n      return (\n        <Fragment key={href}>\n          {renderLandingLink(renderLink, {\n            children: (\n              <>\n                {iconPlacement === 'start' && iconNode}\n                {label}\n                {iconPlacement === 'end' && iconNode}\n              </>\n            ),\n            className: stylex.props(styles.action, size === 'small' && styles.actionSmall)\n              .className,\n            external,\n            href,\n          })}\n        </Fragment>\n      );\n    })}\n  </div>\n);\n"],"mappings":";;;;;;;;AAuBA,MAAM,SAAS;CACb,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;CACA,YAAY;EACV,QAAQ;EACR,OAAO;CACT;AACF;AAWA,MAAa,kBAAkB,EAC7B,SACA,WACA,YACA,YACA,OAAO,SACP,aACyB,oBAAC,OAAD;CAAK,GAAI,WAAW;EAAC,OAAO;EAAO,SAAS,UAAU,OAAO,aAAa,OAAO;EAAY;CAAM,GAAGA,OAAK,wBAAwB,SAAS,CAAC;CAAG,aAAW;CACjL,UAAA,QAAQ,KAAK,EACd,UACA,MACA,MACA,gBAAgB,SAChB,OACA,cACI;EACJ,MAAM,WAAW,QAAQ,oBAAC,MAAD;GAAY;GAAM,MAAM,SAAS,UAAU,KAAK;EAAK,CAAA;EAC9E,IAAI,CAAC,SAAS;GACZ,MAAM,aAAa,YAAY,eAAe,IAAI;GAClD,OAAO,oBAAC,sBAAD;IAA4B;IAAM,MAAM;IAAU,cAAc;IAA0B,KAAK,aAAa,eAAe,KAAA;IAAW,MAAM,SAAS,UAAU,WAAW;IAAS,QAAQ,aAAa,WAAW,KAAA;IAAW,SAAS,CAAC,cAAc,cAAa,UAAS;KACjR,MAAM,eAAe;KACrB,WAAW,IAAI;IACjB,IAAI,KAAA;IACG,UAAA;GACmB,GALiE,IAKjE;EAC5B;EACA,OAAO,oBAAC,UAAD,EAAA,UACA,kBAAkB,YAAY;GACjC,UAAU,qBAAA,YAAA,EAAA,UAAA;IACD,kBAAkB,WAAW;IAC7B;IACA,kBAAkB,SAAS;GAC5B,EAAA,CAAA;GACR,WAAW;IACT,GAAG,EACD,WAAW,8LACb;IACA,GAAG,EACD,WAAW,6LACb;GACF,EAAE,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;GAC7B;GACA;EACF,CAAC,EACW,GAlBQ,IAkBR;CAChB,CAAC;AACI,CAAA"}

package/es/chat/BackBottom/BackBottom.mjs

@@ -1,10 +1,10 @@
 "use client";
 import { ButtonImpl } from "../../Button/Button.mjs";
+import { useScroll } from "../../hooks/useScroll.mjs";
 import { styles } from "./style.mjs";
 import { memo, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { ListEnd } from "lucide-react";
-import { useScroll } from "ahooks";
 //#region src/chat/BackBottom/BackBottom.tsx
 const BackBottom = memo(({ visibilityHeight = 240, target, onClick, style, className, text }) => {
 	const [visible, setVisible] = useState(false);

package/es/chat/BackBottom/BackBottom.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BackBottom.mjs","names":[],"sources":["../../../src/chat/BackBottom/BackBottom.tsx"],"sourcesContent":["'use client';\n\nimport { useScroll } from 'ahooks';\nimport { ListEnd } from 'lucide-react';\nimport { memo, type MouseEventHandler, useEffect, useRef, useState } from 'react';\n\nimport { ButtonImpl } from '@/Button/Button';\n\nimport { styles } from './style';\nimport { type BackBottomProps } from './type';\n\nconst BackBottom = memo<BackBottomProps>(\n  ({ visibilityHeight = 240, target, onClick, style, className, text }) => {\n    const [visible, setVisible] = useState<boolean>(false);\n    const ref = useRef<HTMLButtonElement>(null);\n    const current = (target as any)?.current;\n    const scrollHeight = current?.scrollHeight || 0;\n    const clientHeight = current?.clientHeight || 0;\n    const scroll = useScroll(target);\n\n    useEffect(() => {\n      if (scroll?.top) {\n        setVisible(scroll?.top + clientHeight + visibilityHeight < scrollHeight);\n      }\n    }, [scrollHeight, scroll, visibilityHeight]);\n\n    const scrollToBottom: MouseEventHandler<HTMLElement> = (e) => {\n      (target as any)?.current?.scrollTo({ behavior: 'smooth', left: 0, top: scrollHeight });\n      onClick?.(e);\n    };\n\n    return (\n      <ButtonImpl\n        className={className}\n        icon={ListEnd}\n        ref={ref}\n        shape={'round'}\n        size={'small'}\n        style={style}\n        type={'fill'}\n        xstyle={[styles.root, visible ? styles.visible : styles.hidden]}\n        onClick={scrollToBottom}\n      >\n        {text || 'Back to bottom'}\n      </ButtonImpl>\n    );\n  },\n);\n\nBackBottom.displayName = 'BackBottom';\n\nexport default BackBottom;\n"],"mappings":";;;;;;;;AAWA,MAAM,aAAa,MAChB,EAAE,mBAAmB,KAAK,QAAQ,SAAS,OAAO,WAAW,WAAW;CACvE,MAAM,CAAC,SAAS,cAAc,SAAkB,KAAK;CACrD,MAAM,MAAM,OAA0B,IAAI;CAC1C,MAAM,UAAW,QAAgB;CACjC,MAAM,eAAe,SAAS,gBAAgB;CAC9C,MAAM,eAAe,SAAS,gBAAgB;CAC9C,MAAM,SAAS,UAAU,MAAM;CAE/B,gBAAgB;EACd,IAAI,QAAQ,KACV,WAAW,QAAQ,MAAM,eAAe,mBAAmB,YAAY;CAE3E,GAAG;EAAC;EAAc;EAAQ;CAAgB,CAAC;CAE3C,MAAM,kBAAkD,MAAM;EAC5D,QAAiB,SAAS,SAAS;GAAE,UAAU;GAAU,MAAM;GAAG,KAAK;EAAa,CAAC;EACrF,UAAU,CAAC;CACb;CAEA,OACE,oBAAC,YAAD;EACa;EACX,MAAM;EACD;EACL,OAAO;EACP,MAAM;EACC;EACP,MAAM;EACN,QAAQ,CAAC,OAAO,MAAM,UAAU,OAAO,UAAU,OAAO,MAAM;EAC9D,SAAS;EAER,UAAA,QAAQ;CACC,CAAA;AAEhB,CACF;AAEA,WAAW,cAAc"}
+{"version":3,"file":"BackBottom.mjs","names":[],"sources":["../../../src/chat/BackBottom/BackBottom.tsx"],"sourcesContent":["'use client';\n\nimport { ListEnd } from 'lucide-react';\nimport { memo, type MouseEventHandler, useEffect, useRef, useState } from 'react';\n\nimport { ButtonImpl } from '@/Button/Button';\nimport { useScroll } from '@/hooks/useScroll';\n\nimport { styles } from './style';\nimport { type BackBottomProps } from './type';\n\nconst BackBottom = memo<BackBottomProps>(\n  ({ visibilityHeight = 240, target, onClick, style, className, text }) => {\n    const [visible, setVisible] = useState<boolean>(false);\n    const ref = useRef<HTMLButtonElement>(null);\n    const current = (target as any)?.current;\n    const scrollHeight = current?.scrollHeight || 0;\n    const clientHeight = current?.clientHeight || 0;\n    const scroll = useScroll(target);\n\n    useEffect(() => {\n      if (scroll?.top) {\n        setVisible(scroll?.top + clientHeight + visibilityHeight < scrollHeight);\n      }\n    }, [scrollHeight, scroll, visibilityHeight]);\n\n    const scrollToBottom: MouseEventHandler<HTMLElement> = (e) => {\n      (target as any)?.current?.scrollTo({ behavior: 'smooth', left: 0, top: scrollHeight });\n      onClick?.(e);\n    };\n\n    return (\n      <ButtonImpl\n        className={className}\n        icon={ListEnd}\n        ref={ref}\n        shape={'round'}\n        size={'small'}\n        style={style}\n        type={'fill'}\n        xstyle={[styles.root, visible ? styles.visible : styles.hidden]}\n        onClick={scrollToBottom}\n      >\n        {text || 'Back to bottom'}\n      </ButtonImpl>\n    );\n  },\n);\n\nBackBottom.displayName = 'BackBottom';\n\nexport default BackBottom;\n"],"mappings":";;;;;;;;AAWA,MAAM,aAAa,MAChB,EAAE,mBAAmB,KAAK,QAAQ,SAAS,OAAO,WAAW,WAAW;CACvE,MAAM,CAAC,SAAS,cAAc,SAAkB,KAAK;CACrD,MAAM,MAAM,OAA0B,IAAI;CAC1C,MAAM,UAAW,QAAgB;CACjC,MAAM,eAAe,SAAS,gBAAgB;CAC9C,MAAM,eAAe,SAAS,gBAAgB;CAC9C,MAAM,SAAS,UAAU,MAAM;CAE/B,gBAAgB;EACd,IAAI,QAAQ,KACV,WAAW,QAAQ,MAAM,eAAe,mBAAmB,YAAY;CAE3E,GAAG;EAAC;EAAc;EAAQ;CAAgB,CAAC;CAE3C,MAAM,kBAAkD,MAAM;EAC5D,QAAiB,SAAS,SAAS;GAAE,UAAU;GAAU,MAAM;GAAG,KAAK;EAAa,CAAC;EACrF,UAAU,CAAC;CACb;CAEA,OACE,oBAAC,YAAD;EACa;EACX,MAAM;EACD;EACL,OAAO;EACP,MAAM;EACC;EACP,MAAM;EACN,QAAQ,CAAC,OAAO,MAAM,UAAU,OAAO,UAAU,OAAO,MAAM;EAC9D,SAAS;EAER,UAAA,QAAQ;CACC,CAAA;AAEhB,CACF;AAEA,WAAW,cAAc"}

package/es/chat/BackBottom/type.d.mts

@@ -1,11 +1,11 @@
+import { ScrollTarget } from "../../hooks/useScroll.mjs";
 import { CSSProperties, MouseEventHandler } from "react";
-import { Target } from "ahooks/lib/useScroll/index.js";
 //#region src/chat/BackBottom/type.d.ts
 export interface BackBottomProps {
   className?: string;
   onClick?: MouseEventHandler<HTMLElement>;
   style?: CSSProperties;
-  target: Target;
+  target: ScrollTarget;
   text?: string;
   visibilityHeight?: number;
 }

package/es/chat/ChatItem/ChatItem.mjs

@@ -13,7 +13,7 @@ import MessageContent from "./components/MessageContent.mjs";
 import Title from "./components/Title.mjs";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/chat/ChatItem/ChatItem.tsx
 const MOBILE_AVATAR_SIZE = 32;
@@ -45,7 +45,7 @@ const ChatItem = memo(({ avatarAddon, onAvatarClick, avatarProps, actions, class
 		return () => observer.disconnect();
 	}, [variant, actionsWrapWidth]);
 	const isDocs = variant === "docs";
-	const containerClassName = styleProps([styles.container, isDocs && styles.containerDocs], clsx("lobe-chat-item", isDocs ? "lobe-chat-item-docs" : "lobe-chat-item-bubble", className)).className;
+	const containerClassName = styleProps([styles.container, isDocs && styles.containerDocs], clsx$1("lobe-chat-item", isDocs ? "lobe-chat-item-docs" : "lobe-chat-item-bubble", className)).className;
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		className: containerClassName,
 		direction: placement === "left" ? "horizontal" : "horizontal-reverse",

package/es/chat/ChatItem/ChatItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatItem.mjs","names":["chatMessages","Flexbox"],"sources":["../../../src/chat/ChatItem/ChatItem.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport chatMessages from '@/i18n/resources/en/chat';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport Actions from './components/Actions';\nimport Avatar from './components/Avatar';\nimport BorderSpacing from './components/BorderSpacing';\nimport ErrorContent from './components/ErrorContent';\nimport MessageContent from './components/MessageContent';\nimport Title from './components/Title';\nimport { styles } from './style';\nimport type { ChatItemProps } from './type';\n\nconst MOBILE_AVATAR_SIZE = 32;\n\nconst ChatItem = memo<ChatItemProps>(\n  ({\n    avatarAddon,\n    onAvatarClick,\n    avatarProps,\n    actions,\n    className,\n    primary,\n    loading,\n    message,\n    placeholderMessage,\n    placement = 'left',\n    variant = 'bubble',\n    avatar,\n    error,\n    showTitle,\n    time,\n    editing,\n    onChange,\n    onEditingChange,\n    messageExtra,\n    renderMessage,\n    text,\n    errorMessage,\n    onDoubleClick,\n    fontSize,\n    aboveMessage,\n    belowMessage,\n    markdownProps,\n    actionsWrapWidth = 54,\n    showAvatar = true,\n    titleAddon,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const { t } = useTranslation(chatMessages);\n\n    const avatarSize = mobile ? MOBILE_AVATAR_SIZE : avatarProps?.size || 40;\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--chat-item-avatar-size': `${avatarSize}px`,\n      }),\n      [avatarSize],\n    );\n\n    const hasTime = Boolean(time);\n    const placeholderText = placeholderMessage ?? t('chat.placeholder');\n    const avatarAlt = avatarProps?.alt || avatar.title || t('chat.avatar');\n\n    // 在 ChatItem 组件中添加\n    const contentRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [layoutMode, setLayoutMode] = useState<'horizontal' | 'vertical'>(\n      variant === 'bubble' ? 'horizontal' : 'vertical',\n    );\n\n    // 使用 ResizeObserver 监控内容和容器尺寸\n    useEffect(() => {\n      if (variant === 'docs') {\n        setLayoutMode('vertical');\n        return;\n      }\n\n      if (!contentRef.current || !containerRef.current) return;\n\n      const observer = new ResizeObserver(() => {\n        if (!contentRef.current || !containerRef.current) return;\n\n        const containerWidth = containerRef.current.clientWidth;\n        const contentWidth = contentRef.current.scrollWidth; // 使用scrollWidth获取实际内容宽度\n\n        // 预留给Actions的最小空间 (根据实际Actions大小调整)\n\n        // 只有当内容宽度 + Actions最小宽度 > 容器宽度时才切换布局\n        setLayoutMode(contentWidth + actionsWrapWidth > containerWidth ? 'vertical' : 'horizontal');\n      });\n\n      observer.observe(contentRef.current);\n      observer.observe(containerRef.current);\n\n      return () => observer.disconnect();\n    }, [variant, actionsWrapWidth]);\n\n    const isDocs = variant === 'docs';\n    const containerClassName = styleProps(\n      [styles.container, isDocs && styles.containerDocs],\n      clsx('lobe-chat-item', isDocs ? 'lobe-chat-item-docs' : 'lobe-chat-item-bubble', className),\n    ).className;\n\n    return (\n      <Flexbox\n        className={containerClassName}\n        direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}\n        gap={mobile ? 6 : 12}\n        style={cssVariables}\n        width={'100%'}\n        {...rest}\n      >\n        {showAvatar && (\n          <Avatar\n            {...avatarProps}\n            addon={avatarAddon}\n            alt={avatarAlt}\n            avatar={avatar}\n            loading={loading}\n            placement={placement}\n            size={avatarSize}\n            style={{\n              marginTop: showTitle ? -12 : 6,\n              ...avatarProps?.style,\n            }}\n            onClick={onAvatarClick}\n          />\n        )}\n        <Flexbox\n          align={placement === 'left' ? 'flex-start' : 'flex-end'}\n          ref={containerRef}\n          width={editing ? '100%' : undefined}\n          {...stylex.props(styles.messageBox, styles.messageContainer, hasTime && styles.withTime)}\n        >\n          <Title\n            avatar={avatar}\n            placement={placement}\n            showTitle={showTitle}\n            time={time}\n            titleAddon={titleAddon}\n          />\n          {aboveMessage}\n          <Flexbox\n            align={placement === 'left' ? 'flex-start' : 'flex-end'}\n            data-layout={layoutMode}\n            gap={8}\n            width={editing ? '100%' : undefined}\n            {...stylex.props(styles.messageBox, styles.messageContent)}\n            direction={\n              layoutMode === 'horizontal'\n                ? placement === 'left'\n                  ? 'horizontal'\n                  : 'horizontal-reverse'\n                : 'vertical'\n            }\n          >\n            <Flexbox ref={contentRef} width={'100%'}>\n              {error && (message === placeholderText || !message) ? (\n                <ErrorContent error={error} message={errorMessage} placement={placement} />\n              ) : (\n                <MessageContent\n                  editing={editing}\n                  fontSize={fontSize}\n                  markdownProps={markdownProps}\n                  message={message}\n                  placement={placement}\n                  primary={primary}\n                  renderMessage={renderMessage}\n                  text={text}\n                  variant={variant}\n                  messageExtra={\n                    <>\n                      {error && (\n                        <ErrorContent error={error} message={errorMessage} placement={placement} />\n                      )}\n                      {messageExtra}\n                    </>\n                  }\n                  onChange={onChange}\n                  onDoubleClick={onDoubleClick}\n                  onEditingChange={onEditingChange}\n                />\n              )}\n            </Flexbox>\n            {actions && (\n              <Actions\n                actions={actions}\n                editing={editing}\n                placement={placement}\n                variant={variant}\n              />\n            )}\n          </Flexbox>\n          {belowMessage}\n        </Flexbox>\n        {mobile && variant === 'bubble' && showAvatar && (\n          <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nexport default ChatItem;\n\nexport type { ChatItemProps } from './type';\n"],"mappings":"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"}
+{"version":3,"file":"ChatItem.mjs","names":["chatMessages","clsx","Flexbox"],"sources":["../../../src/chat/ChatItem/ChatItem.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { memo, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport chatMessages from '@/i18n/resources/en/chat';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useResponsive } from '@/styles/theme/scope';\n\nimport Actions from './components/Actions';\nimport Avatar from './components/Avatar';\nimport BorderSpacing from './components/BorderSpacing';\nimport ErrorContent from './components/ErrorContent';\nimport MessageContent from './components/MessageContent';\nimport Title from './components/Title';\nimport { styles } from './style';\nimport type { ChatItemProps } from './type';\n\nconst MOBILE_AVATAR_SIZE = 32;\n\nconst ChatItem = memo<ChatItemProps>(\n  ({\n    avatarAddon,\n    onAvatarClick,\n    avatarProps,\n    actions,\n    className,\n    primary,\n    loading,\n    message,\n    placeholderMessage,\n    placement = 'left',\n    variant = 'bubble',\n    avatar,\n    error,\n    showTitle,\n    time,\n    editing,\n    onChange,\n    onEditingChange,\n    messageExtra,\n    renderMessage,\n    text,\n    errorMessage,\n    onDoubleClick,\n    fontSize,\n    aboveMessage,\n    belowMessage,\n    markdownProps,\n    actionsWrapWidth = 54,\n    showAvatar = true,\n    titleAddon,\n    ...rest\n  }) => {\n    const { mobile } = useResponsive();\n    const { t } = useTranslation(chatMessages);\n\n    const avatarSize = mobile ? MOBILE_AVATAR_SIZE : avatarProps?.size || 40;\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--chat-item-avatar-size': `${avatarSize}px`,\n      }),\n      [avatarSize],\n    );\n\n    const hasTime = Boolean(time);\n    const placeholderText = placeholderMessage ?? t('chat.placeholder');\n    const avatarAlt = avatarProps?.alt || avatar.title || t('chat.avatar');\n\n    // 在 ChatItem 组件中添加\n    const contentRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [layoutMode, setLayoutMode] = useState<'horizontal' | 'vertical'>(\n      variant === 'bubble' ? 'horizontal' : 'vertical',\n    );\n\n    // 使用 ResizeObserver 监控内容和容器尺寸\n    useEffect(() => {\n      if (variant === 'docs') {\n        setLayoutMode('vertical');\n        return;\n      }\n\n      if (!contentRef.current || !containerRef.current) return;\n\n      const observer = new ResizeObserver(() => {\n        if (!contentRef.current || !containerRef.current) return;\n\n        const containerWidth = containerRef.current.clientWidth;\n        const contentWidth = contentRef.current.scrollWidth; // 使用scrollWidth获取实际内容宽度\n\n        // 预留给Actions的最小空间 (根据实际Actions大小调整)\n\n        // 只有当内容宽度 + Actions最小宽度 > 容器宽度时才切换布局\n        setLayoutMode(contentWidth + actionsWrapWidth > containerWidth ? 'vertical' : 'horizontal');\n      });\n\n      observer.observe(contentRef.current);\n      observer.observe(containerRef.current);\n\n      return () => observer.disconnect();\n    }, [variant, actionsWrapWidth]);\n\n    const isDocs = variant === 'docs';\n    const containerClassName = styleProps(\n      [styles.container, isDocs && styles.containerDocs],\n      clsx('lobe-chat-item', isDocs ? 'lobe-chat-item-docs' : 'lobe-chat-item-bubble', className),\n    ).className;\n\n    return (\n      <Flexbox\n        className={containerClassName}\n        direction={placement === 'left' ? 'horizontal' : 'horizontal-reverse'}\n        gap={mobile ? 6 : 12}\n        style={cssVariables}\n        width={'100%'}\n        {...rest}\n      >\n        {showAvatar && (\n          <Avatar\n            {...avatarProps}\n            addon={avatarAddon}\n            alt={avatarAlt}\n            avatar={avatar}\n            loading={loading}\n            placement={placement}\n            size={avatarSize}\n            style={{\n              marginTop: showTitle ? -12 : 6,\n              ...avatarProps?.style,\n            }}\n            onClick={onAvatarClick}\n          />\n        )}\n        <Flexbox\n          align={placement === 'left' ? 'flex-start' : 'flex-end'}\n          ref={containerRef}\n          width={editing ? '100%' : undefined}\n          {...stylex.props(styles.messageBox, styles.messageContainer, hasTime && styles.withTime)}\n        >\n          <Title\n            avatar={avatar}\n            placement={placement}\n            showTitle={showTitle}\n            time={time}\n            titleAddon={titleAddon}\n          />\n          {aboveMessage}\n          <Flexbox\n            align={placement === 'left' ? 'flex-start' : 'flex-end'}\n            data-layout={layoutMode}\n            gap={8}\n            width={editing ? '100%' : undefined}\n            {...stylex.props(styles.messageBox, styles.messageContent)}\n            direction={\n              layoutMode === 'horizontal'\n                ? placement === 'left'\n                  ? 'horizontal'\n                  : 'horizontal-reverse'\n                : 'vertical'\n            }\n          >\n            <Flexbox ref={contentRef} width={'100%'}>\n              {error && (message === placeholderText || !message) ? (\n                <ErrorContent error={error} message={errorMessage} placement={placement} />\n              ) : (\n                <MessageContent\n                  editing={editing}\n                  fontSize={fontSize}\n                  markdownProps={markdownProps}\n                  message={message}\n                  placement={placement}\n                  primary={primary}\n                  renderMessage={renderMessage}\n                  text={text}\n                  variant={variant}\n                  messageExtra={\n                    <>\n                      {error && (\n                        <ErrorContent error={error} message={errorMessage} placement={placement} />\n                      )}\n                      {messageExtra}\n                    </>\n                  }\n                  onChange={onChange}\n                  onDoubleClick={onDoubleClick}\n                  onEditingChange={onEditingChange}\n                />\n              )}\n            </Flexbox>\n            {actions && (\n              <Actions\n                actions={actions}\n                editing={editing}\n                placement={placement}\n                variant={variant}\n              />\n            )}\n          </Flexbox>\n          {belowMessage}\n        </Flexbox>\n        {mobile && variant === 'bubble' && showAvatar && (\n          <BorderSpacing borderSpacing={MOBILE_AVATAR_SIZE} />\n        )}\n      </Flexbox>\n    );\n  },\n);\n\nexport default ChatItem;\n\nexport type { ChatItemProps } from './type';\n"],"mappings":"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"}

package/es/chat/EditableMessage/EditableMessage.mjs

@@ -1,11 +1,11 @@
 "use client";
+import { useControlledState } from "../../hooks/useControlledState.mjs";
 import Markdown from "../../Markdown/Markdown.mjs";
 import MessageInput from "../MessageInput/MessageInput.mjs";
 import MessageModal from "../MessageModal/MessageModal.mjs";
 import { memo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import useControlledState from "use-merge-value";
+import clsx$1 from "clsx";
 //#region src/chat/EditableMessage/EditableMessage.tsx
 const EditableMessage = memo(({ value, onChange, classNames = {}, onEditingChange, editing, openModal, onOpenChange, placeholder, showEditWhenEmpty = false, styles: customStyles, className, style, height, variant, editButtonSize, text, fullFeaturedCodeBlock, model, fontSize, language = "markdown", markdownProps }) => {
 	const [isEdit, setTyping] = useControlledState(false, {
@@ -19,7 +19,7 @@ const EditableMessage = memo(({ value, onChange, classNames = {}, onEditingChang
 	const isAutoSize = height === "auto";
 	const input = /* @__PURE__ */ jsx(MessageInput, {
 		shortcut: true,
-		className: clsx(className, classNames?.input),
+		className: clsx$1(className, classNames?.input),
 		classNames,
 		defaultValue: value,
 		editButtonSize,
@@ -41,7 +41,7 @@ const EditableMessage = memo(({ value, onChange, classNames = {}, onEditingChang
 	});
 	if (!value && showEditWhenEmpty) return input;
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [!expand && isEdit ? input : /* @__PURE__ */ jsx(Markdown, {
-		className: clsx(className, classNames?.markdown),
+		className: clsx$1(className, classNames?.markdown),
 		fontSize,
 		fullFeaturedCodeBlock,
 		variant: "chat",

package/es/chat/EditableMessage/EditableMessage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableMessage.mjs","names":[],"sources":["../../../src/chat/EditableMessage/EditableMessage.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport MessageInput from '@/chat/MessageInput';\nimport MessageModal from '@/chat/MessageModal';\nimport Markdown from '@/Markdown';\n\nimport { type EditableMessageProps } from './type';\n\nconst EditableMessage = memo<EditableMessageProps>(\n  ({\n    value,\n    onChange,\n    classNames = {},\n    onEditingChange,\n    editing,\n    openModal,\n    onOpenChange,\n    placeholder,\n    showEditWhenEmpty = false,\n    styles: customStyles,\n    className,\n    style,\n    height,\n    variant,\n    editButtonSize,\n    text,\n    fullFeaturedCodeBlock,\n    model,\n    fontSize,\n    language = 'markdown',\n    markdownProps,\n  }) => {\n    const [isEdit, setTyping] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    const [expand, setExpand] = useControlledState<boolean>(false, {\n      onChange: onOpenChange,\n      value: openModal,\n    });\n\n    const isAutoSize = height === 'auto';\n\n    const input = (\n      <MessageInput\n        shortcut\n        className={clsx(className, classNames?.input)}\n        classNames={classNames}\n        defaultValue={value}\n        editButtonSize={editButtonSize}\n        height={height}\n        language={language}\n        placeholder={placeholder}\n        styles={customStyles}\n        text={text}\n        variant={variant}\n        style={{\n          ...style,\n          ...customStyles?.input,\n        }}\n        onCancel={() => setTyping(false)}\n        onConfirm={(text) => {\n          onChange?.(text);\n          setTyping(false);\n        }}\n      />\n    );\n\n    if (!value && showEditWhenEmpty) return input;\n\n    return (\n      <>\n        {!expand && isEdit ? (\n          input\n        ) : (\n          <Markdown\n            className={clsx(className, classNames?.markdown)}\n            fontSize={fontSize}\n            fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n            variant={'chat'}\n            style={{\n              height: isAutoSize ? 'unset' : height,\n              ...style,\n              ...customStyles?.markdown,\n            }}\n            {...markdownProps}\n          >\n            {value || placeholder || ''}\n          </Markdown>\n        )}\n        {expand && (\n          <MessageModal\n            editing={isEdit}\n            extra={model?.extra}\n            footer={model?.footer}\n            height={height}\n            language={language}\n            open={expand}\n            placeholder={placeholder}\n            text={text}\n            value={value}\n            onChange={onChange}\n            onEditingChange={setTyping}\n            onOpenChange={(e) => {\n              setExpand(e);\n              setTyping(false);\n            }}\n          />\n        )}\n      </>\n    );\n  },\n);\n\nEditableMessage.displayName = 'EditableMessage';\n\nexport default EditableMessage;\n"],"mappings":";;;;;;;;;AAYA,MAAM,kBAAkB,MACrB,EACC,OACA,UACA,aAAa,CAAC,GACd,iBACA,SACA,WACA,cACA,aACA,oBAAoB,OACpB,QAAQ,cACR,WACA,OACA,QACA,SACA,gBACA,MACA,uBACA,OACA,UACA,WAAW,YACX,oBACI;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;CACT,CAAC;CAED,MAAM,CAAC,QAAQ,aAAa,mBAA4B,OAAO;EAC7D,UAAU;EACV,OAAO;CACT,CAAC;CAED,MAAM,aAAa,WAAW;CAE9B,MAAM,QACJ,oBAAC,cAAD;EACE,UAAA;EACA,WAAW,KAAK,WAAW,YAAY,KAAK;EAChC;EACZ,cAAc;EACE;EACR;EACE;EACG;EACb,QAAQ;EACF;EACG;EACT,OAAO;GACL,GAAG;GACH,GAAG,cAAc;EACnB;EACA,gBAAgB,UAAU,KAAK;EAC/B,YAAY,SAAS;GACnB,WAAW,IAAI;GACf,UAAU,KAAK;EACjB;CACD,CAAA;CAGH,IAAI,CAAC,SAAS,mBAAmB,OAAO;CAExC,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,CAAC,UAAU,SACV,QAEA,oBAAC,UAAD;EACE,WAAW,KAAK,WAAW,YAAY,QAAQ;EACrC;EACa;EACvB,SAAS;EACT,OAAO;GACL,QAAQ,aAAa,UAAU;GAC/B,GAAG;GACH,GAAG,cAAc;EACnB;EACA,GAAI;EAEH,UAAA,SAAS,eAAe;CACjB,CAAA,GAEX,UACC,oBAAC,cAAD;EACE,SAAS;EACT,OAAO,OAAO;EACd,QAAQ,OAAO;EACP;EACE;EACV,MAAM;EACO;EACP;EACC;EACG;EACV,iBAAiB;EACjB,eAAe,MAAM;GACnB,UAAU,CAAC;GACX,UAAU,KAAK;EACjB;CACD,CAAA,CAEH,EAAA,CAAA;AAEN,CACF;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"EditableMessage.mjs","names":["clsx"],"sources":["../../../src/chat/EditableMessage/EditableMessage.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { memo } from 'react';\n\nimport MessageInput from '@/chat/MessageInput';\nimport MessageModal from '@/chat/MessageModal';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport Markdown from '@/Markdown';\n\nimport { type EditableMessageProps } from './type';\n\nconst EditableMessage = memo<EditableMessageProps>(\n  ({\n    value,\n    onChange,\n    classNames = {},\n    onEditingChange,\n    editing,\n    openModal,\n    onOpenChange,\n    placeholder,\n    showEditWhenEmpty = false,\n    styles: customStyles,\n    className,\n    style,\n    height,\n    variant,\n    editButtonSize,\n    text,\n    fullFeaturedCodeBlock,\n    model,\n    fontSize,\n    language = 'markdown',\n    markdownProps,\n  }) => {\n    const [isEdit, setTyping] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    const [expand, setExpand] = useControlledState<boolean>(false, {\n      onChange: onOpenChange,\n      value: openModal,\n    });\n\n    const isAutoSize = height === 'auto';\n\n    const input = (\n      <MessageInput\n        shortcut\n        className={clsx(className, classNames?.input)}\n        classNames={classNames}\n        defaultValue={value}\n        editButtonSize={editButtonSize}\n        height={height}\n        language={language}\n        placeholder={placeholder}\n        styles={customStyles}\n        text={text}\n        variant={variant}\n        style={{\n          ...style,\n          ...customStyles?.input,\n        }}\n        onCancel={() => setTyping(false)}\n        onConfirm={(text) => {\n          onChange?.(text);\n          setTyping(false);\n        }}\n      />\n    );\n\n    if (!value && showEditWhenEmpty) return input;\n\n    return (\n      <>\n        {!expand && isEdit ? (\n          input\n        ) : (\n          <Markdown\n            className={clsx(className, classNames?.markdown)}\n            fontSize={fontSize}\n            fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n            variant={'chat'}\n            style={{\n              height: isAutoSize ? 'unset' : height,\n              ...style,\n              ...customStyles?.markdown,\n            }}\n            {...markdownProps}\n          >\n            {value || placeholder || ''}\n          </Markdown>\n        )}\n        {expand && (\n          <MessageModal\n            editing={isEdit}\n            extra={model?.extra}\n            footer={model?.footer}\n            height={height}\n            language={language}\n            open={expand}\n            placeholder={placeholder}\n            text={text}\n            value={value}\n            onChange={onChange}\n            onEditingChange={setTyping}\n            onOpenChange={(e) => {\n              setExpand(e);\n              setTyping(false);\n            }}\n          />\n        )}\n      </>\n    );\n  },\n);\n\nEditableMessage.displayName = 'EditableMessage';\n\nexport default EditableMessage;\n"],"mappings":";;;;;;;;;AAYA,MAAM,kBAAkB,MACrB,EACC,OACA,UACA,aAAa,CAAC,GACd,iBACA,SACA,WACA,cACA,aACA,oBAAoB,OACpB,QAAQ,cACR,WACA,OACA,QACA,SACA,gBACA,MACA,uBACA,OACA,UACA,WAAW,YACX,oBACI;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;CACT,CAAC;CAED,MAAM,CAAC,QAAQ,aAAa,mBAA4B,OAAO;EAC7D,UAAU;EACV,OAAO;CACT,CAAC;CAED,MAAM,aAAa,WAAW;CAE9B,MAAM,QACJ,oBAAC,cAAD;EACE,UAAA;EACA,WAAWA,OAAK,WAAW,YAAY,KAAK;EAChC;EACZ,cAAc;EACE;EACR;EACE;EACG;EACb,QAAQ;EACF;EACG;EACT,OAAO;GACL,GAAG;GACH,GAAG,cAAc;EACnB;EACA,gBAAgB,UAAU,KAAK;EAC/B,YAAY,SAAS;GACnB,WAAW,IAAI;GACf,UAAU,KAAK;EACjB;CACD,CAAA;CAGH,IAAI,CAAC,SAAS,mBAAmB,OAAO;CAExC,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,CAAC,UAAU,SACV,QAEA,oBAAC,UAAD;EACE,WAAWA,OAAK,WAAW,YAAY,QAAQ;EACrC;EACa;EACvB,SAAS;EACT,OAAO;GACL,QAAQ,aAAa,UAAU;GAC/B,GAAG;GACH,GAAG,cAAc;EACnB;EACA,GAAI;EAEH,UAAA,SAAS,eAAe;CACjB,CAAA,GAEX,UACC,oBAAC,cAAD;EACE,SAAS;EACT,OAAO,OAAO;EACd,QAAQ,OAAO;EACP;EACE;EACV,MAAM;EACO;EACP;EACC;EACG;EACV,iBAAiB;EACjB,eAAe,MAAM;GACnB,UAAU,CAAC;GACX,UAAU,KAAK;EACjB;CACD,CAAA,CAEH,EAAA,CAAA;AAEN,CACF;AAEA,gBAAgB,cAAc"}

package/es/chat/EditableMessageList/EditableMessageList.mjs

@@ -3,14 +3,14 @@ import Button from "../../Button/Button.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
 import { useTranslation } from "../../i18n/useTranslation.mjs";
-import ControlInput from "../../EditableText/ControlInput.mjs";
 import Select from "../../Select/Select.mjs";
+import ControlInput from "../../EditableText/ControlInput.mjs";
 import editableMessage_default from "../../i18n/resources/en/editableMessage.mjs";
 import { messagesReducer } from "./messageReducer.mjs";
 import { memo, useEffect, useReducer } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Plus, Trash } from "lucide-react";
-import isEqual from "fast-deep-equal";
+import { isEqual } from "es-toolkit/compat";
 //#region src/chat/EditableMessageList/EditableMessageList.tsx
 const EditableMessageList = memo(({ disabled, dataSources, onChange, texts }) => {
 	const [chatMessages, dispatch] = useReducer(messagesReducer, dataSources);

package/es/chat/EditableMessageList/EditableMessageList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableMessageList.mjs","names":["editableMessageMessages","Flexbox"],"sources":["../../../src/chat/EditableMessageList/EditableMessageList.tsx"],"sourcesContent":["'use client';\n\nimport isEqual from 'fast-deep-equal';\nimport { Plus, Trash } from 'lucide-react';\nimport { memo, useEffect, useReducer } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Button from '@/Button';\nimport ControlInput from '@/EditableText/ControlInput';\nimport { Flexbox } from '@/Flex';\nimport editableMessageMessages from '@/i18n/resources/en/editableMessage';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Select from '@/Select';\n\nimport { messagesReducer } from './messageReducer';\nimport { type EditableMessageListProps } from './type';\n\nconst EditableMessageList = memo<EditableMessageListProps>(\n  ({ disabled, dataSources, onChange, texts }) => {\n    const [chatMessages, dispatch] = useReducer(messagesReducer, dataSources);\n    const { t } = useTranslation(editableMessageMessages);\n\n    const addPropsText = texts?.addProps ?? t('editableMessage.addProps');\n    const deleteText = texts?.delete ?? t('editableMessage.delete');\n    const inputPlaceholderText = texts?.inputPlaceholder ?? t('editableMessage.inputPlaceholder');\n    const outputPlaceholderText =\n      texts?.outputPlaceholder ?? t('editableMessage.outputPlaceholder');\n    const systemText = texts?.system ?? t('editableMessage.system');\n    const inputText = texts?.input ?? t('editableMessage.input');\n    const outputText = texts?.output ?? t('editableMessage.output');\n\n    useEffect(() => {\n      if (!isEqual(dataSources, chatMessages)) {\n        onChange?.(chatMessages);\n      }\n    }, [chatMessages]);\n\n    return dataSources ? (\n      <Flexbox gap={12}>\n        {chatMessages.map((item, index) => (\n          <Flexbox\n            horizontal\n            align={'center'}\n            gap={8}\n            key={`${index}-${item.content}`}\n            width={'100%'}\n          >\n            <Select\n              disabled={disabled}\n              style={{ width: 120 }}\n              value={item.role}\n              options={[\n                { label: systemText, value: 'system' },\n                { label: inputText, value: 'user' },\n                { label: outputText, value: 'assistant' },\n              ]}\n              onChange={(value) => {\n                dispatch({ index, role: value, type: 'updateMessageRole' });\n              }}\n            />\n            <ControlInput\n              disabled={disabled}\n              placeholder={item.role === 'user' ? inputPlaceholderText : outputPlaceholderText}\n              value={item.content}\n              onChange={(e) => {\n                dispatch({ index, message: e, type: 'updateMessage' });\n              }}\n            />\n            <ActionIcon\n              icon={Trash}\n              title={deleteText}\n              variant={'filled'}\n              onClick={() => {\n                dispatch({ index, type: 'deleteMessage' });\n              }}\n            />\n          </Flexbox>\n        ))}\n\n        <Button\n          block\n          disabled={disabled}\n          icon={Plus}\n          onClick={() => {\n            const lastMeg = chatMessages.at(-1);\n\n            dispatch({\n              message: { content: '', role: lastMeg?.role === 'user' ? 'assistant' : 'user' },\n              type: 'addMessage',\n            });\n          }}\n        >\n          {addPropsText}\n        </Button>\n      </Flexbox>\n    ) : undefined;\n  },\n  isEqual,\n);\n\nEditableMessageList.displayName = 'EditableMessageList';\n\nexport default EditableMessageList;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,sBAAsB,MACzB,EAAE,UAAU,aAAa,UAAU,YAAY;CAC9C,MAAM,CAAC,cAAc,YAAY,WAAW,iBAAiB,WAAW;CACxE,MAAM,EAAE,MAAM,eAAeA,uBAAuB;CAEpD,MAAM,eAAe,OAAO,YAAY,EAAE,0BAA0B;CACpE,MAAM,aAAa,OAAO,UAAU,EAAE,wBAAwB;CAC9D,MAAM,uBAAuB,OAAO,oBAAoB,EAAE,kCAAkC;CAC5F,MAAM,wBACJ,OAAO,qBAAqB,EAAE,mCAAmC;CACnE,MAAM,aAAa,OAAO,UAAU,EAAE,wBAAwB;CAC9D,MAAM,YAAY,OAAO,SAAS,EAAE,uBAAuB;CAC3D,MAAM,aAAa,OAAO,UAAU,EAAE,wBAAwB;CAE9D,gBAAgB;EACd,IAAI,CAAC,QAAQ,aAAa,YAAY,GACpC,WAAW,YAAY;CAE3B,GAAG,CAAC,YAAY,CAAC;CAEjB,OAAO,cACL,qBAACC,mBAAD;EAAS,KAAK;EAAd,UAAA,CACG,aAAa,KAAK,MAAM,UACvB,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,KAAK;GAEL,OAAO;GALT,UAAA;IAOE,oBAAC,QAAD;KACY;KACV,OAAO,EAAE,OAAO,IAAI;KACpB,OAAO,KAAK;KACZ,SAAS;MACP;OAAE,OAAO;OAAY,OAAO;MAAS;MACrC;OAAE,OAAO;OAAW,OAAO;MAAO;MAClC;OAAE,OAAO;OAAY,OAAO;MAAY;KAC1C;KACA,WAAW,UAAU;MACnB,SAAS;OAAE;OAAO,MAAM;OAAO,MAAM;MAAoB,CAAC;KAC5D;IACD,CAAA;IACD,oBAAC,cAAD;KACY;KACV,aAAa,KAAK,SAAS,SAAS,uBAAuB;KAC3D,OAAO,KAAK;KACZ,WAAW,MAAM;MACf,SAAS;OAAE;OAAO,SAAS;OAAG,MAAM;MAAgB,CAAC;KACvD;IACD,CAAA;IACD,oBAAC,YAAD;KACE,MAAM;KACN,OAAO;KACP,SAAS;KACT,eAAe;MACb,SAAS;OAAE;OAAO,MAAM;MAAgB,CAAC;KAC3C;IACD,CAAA;GACM;EAhCF,GAAA,GAAG,MAAM,GAAG,KAAK,SAgCf,CACV,GAED,oBAAC,QAAD;GACE,OAAA;GACU;GACV,MAAM;GACN,eAAe;IACb,MAAM,UAAU,aAAa,GAAG,EAAE;IAElC,SAAS;KACP,SAAS;MAAE,SAAS;MAAI,MAAM,SAAS,SAAS,SAAS,cAAc;KAAO;KAC9E,MAAM;IACR,CAAC;GACH;GAEC,UAAA;EACK,CAAA,CACD;CACP,CAAA,IAAA,KAAA;AACN,GACA,OACF;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"EditableMessageList.mjs","names":["editableMessageMessages","Flexbox"],"sources":["../../../src/chat/EditableMessageList/EditableMessageList.tsx"],"sourcesContent":["'use client';\n\nimport { isEqual } from 'es-toolkit/compat';\nimport { Plus, Trash } from 'lucide-react';\nimport { memo, useEffect, useReducer } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Button from '@/Button';\nimport ControlInput from '@/EditableText/ControlInput';\nimport { Flexbox } from '@/Flex';\nimport editableMessageMessages from '@/i18n/resources/en/editableMessage';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Select from '@/Select';\n\nimport { messagesReducer } from './messageReducer';\nimport { type EditableMessageListProps } from './type';\n\nconst EditableMessageList = memo<EditableMessageListProps>(\n  ({ disabled, dataSources, onChange, texts }) => {\n    const [chatMessages, dispatch] = useReducer(messagesReducer, dataSources);\n    const { t } = useTranslation(editableMessageMessages);\n\n    const addPropsText = texts?.addProps ?? t('editableMessage.addProps');\n    const deleteText = texts?.delete ?? t('editableMessage.delete');\n    const inputPlaceholderText = texts?.inputPlaceholder ?? t('editableMessage.inputPlaceholder');\n    const outputPlaceholderText =\n      texts?.outputPlaceholder ?? t('editableMessage.outputPlaceholder');\n    const systemText = texts?.system ?? t('editableMessage.system');\n    const inputText = texts?.input ?? t('editableMessage.input');\n    const outputText = texts?.output ?? t('editableMessage.output');\n\n    useEffect(() => {\n      if (!isEqual(dataSources, chatMessages)) {\n        onChange?.(chatMessages);\n      }\n    }, [chatMessages]);\n\n    return dataSources ? (\n      <Flexbox gap={12}>\n        {chatMessages.map((item, index) => (\n          <Flexbox\n            horizontal\n            align={'center'}\n            gap={8}\n            key={`${index}-${item.content}`}\n            width={'100%'}\n          >\n            <Select\n              disabled={disabled}\n              style={{ width: 120 }}\n              value={item.role}\n              options={[\n                { label: systemText, value: 'system' },\n                { label: inputText, value: 'user' },\n                { label: outputText, value: 'assistant' },\n              ]}\n              onChange={(value) => {\n                dispatch({ index, role: value, type: 'updateMessageRole' });\n              }}\n            />\n            <ControlInput\n              disabled={disabled}\n              placeholder={item.role === 'user' ? inputPlaceholderText : outputPlaceholderText}\n              value={item.content}\n              onChange={(e) => {\n                dispatch({ index, message: e, type: 'updateMessage' });\n              }}\n            />\n            <ActionIcon\n              icon={Trash}\n              title={deleteText}\n              variant={'filled'}\n              onClick={() => {\n                dispatch({ index, type: 'deleteMessage' });\n              }}\n            />\n          </Flexbox>\n        ))}\n\n        <Button\n          block\n          disabled={disabled}\n          icon={Plus}\n          onClick={() => {\n            const lastMeg = chatMessages.at(-1);\n\n            dispatch({\n              message: { content: '', role: lastMeg?.role === 'user' ? 'assistant' : 'user' },\n              type: 'addMessage',\n            });\n          }}\n        >\n          {addPropsText}\n        </Button>\n      </Flexbox>\n    ) : undefined;\n  },\n  isEqual,\n);\n\nEditableMessageList.displayName = 'EditableMessageList';\n\nexport default EditableMessageList;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,sBAAsB,MACzB,EAAE,UAAU,aAAa,UAAU,YAAY;CAC9C,MAAM,CAAC,cAAc,YAAY,WAAW,iBAAiB,WAAW;CACxE,MAAM,EAAE,MAAM,eAAeA,uBAAuB;CAEpD,MAAM,eAAe,OAAO,YAAY,EAAE,0BAA0B;CACpE,MAAM,aAAa,OAAO,UAAU,EAAE,wBAAwB;CAC9D,MAAM,uBAAuB,OAAO,oBAAoB,EAAE,kCAAkC;CAC5F,MAAM,wBACJ,OAAO,qBAAqB,EAAE,mCAAmC;CACnE,MAAM,aAAa,OAAO,UAAU,EAAE,wBAAwB;CAC9D,MAAM,YAAY,OAAO,SAAS,EAAE,uBAAuB;CAC3D,MAAM,aAAa,OAAO,UAAU,EAAE,wBAAwB;CAE9D,gBAAgB;EACd,IAAI,CAAC,QAAQ,aAAa,YAAY,GACpC,WAAW,YAAY;CAE3B,GAAG,CAAC,YAAY,CAAC;CAEjB,OAAO,cACL,qBAACC,mBAAD;EAAS,KAAK;EAAd,UAAA,CACG,aAAa,KAAK,MAAM,UACvB,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,KAAK;GAEL,OAAO;GALT,UAAA;IAOE,oBAAC,QAAD;KACY;KACV,OAAO,EAAE,OAAO,IAAI;KACpB,OAAO,KAAK;KACZ,SAAS;MACP;OAAE,OAAO;OAAY,OAAO;MAAS;MACrC;OAAE,OAAO;OAAW,OAAO;MAAO;MAClC;OAAE,OAAO;OAAY,OAAO;MAAY;KAC1C;KACA,WAAW,UAAU;MACnB,SAAS;OAAE;OAAO,MAAM;OAAO,MAAM;MAAoB,CAAC;KAC5D;IACD,CAAA;IACD,oBAAC,cAAD;KACY;KACV,aAAa,KAAK,SAAS,SAAS,uBAAuB;KAC3D,OAAO,KAAK;KACZ,WAAW,MAAM;MACf,SAAS;OAAE;OAAO,SAAS;OAAG,MAAM;MAAgB,CAAC;KACvD;IACD,CAAA;IACD,oBAAC,YAAD;KACE,MAAM;KACN,OAAO;KACP,SAAS;KACT,eAAe;MACb,SAAS;OAAE;OAAO,MAAM;MAAgB,CAAC;KAC3C;IACD,CAAA;GACM;EAhCF,GAAA,GAAG,MAAM,GAAG,KAAK,SAgCf,CACV,GAED,oBAAC,QAAD;GACE,OAAA;GACU;GACV,MAAM;GACN,eAAe;IACb,MAAM,UAAU,aAAa,GAAG,EAAE;IAElC,SAAS;KACP,SAAS;MAAE,SAAS;MAAI,MAAM,SAAS,SAAS,SAAS,cAAc;KAAO;KAC9E,MAAM;IACR,CAAC;GACH;GAEC,UAAA;EACK,CAAA,CACD;CACP,CAAA,IAAA,KAAA;AACN,GACA,OACF;AAEA,oBAAoB,cAAc"}