@lobehub/ui 6.0.0-beta.4 → 6.0.0-beta.6

package/es/dashboard/Surface/type.d.mts

@@ -1,7 +1,35 @@
 import { HTMLAttributes, ReactNode } from "react";
 //#region src/dashboard/Surface/type.d.ts
-export interface SurfaceProps extends HTMLAttributes<HTMLDivElement> {
+export interface SurfaceLinkProps {
+  children: ReactNode;
+  className?: string;
+  href: string;
+  rel?: string;
+  target?: string;
+}
+/** Renders a link with the app's router. Defaults to a plain `<a>`. */
+export type SurfaceRenderLink = (props: SurfaceLinkProps) => ReactNode;
+export interface SurfaceProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /** Drop body padding and widen table cells so a table sits on the card edges. */
+  bleed?: boolean;
+  /** Full-width slot under the body, for a chart that meets the card edges. */
+  chart?: ReactNode;
   children?: ReactNode;
+  description?: ReactNode;
+  extra?: ReactNode;
+  /** Makes the heading a link to the page this card summarises. */
+  href?: string;
+  /**
+   * First load: with no children the body is a placeholder block.
+   * A refresh with children keeps them and shows a small spinner in the header.
+   */
+  loading?: boolean;
+  /** Pad the body. Defaults to on for a card with a header and off for a bare card. */
+  padded?: boolean;
+  /** Overrides the link renderer from `SurfaceLinkProvider`. */
+  renderLink?: SurfaceRenderLink;
+  /** Visible heading. */
+  title?: ReactNode;
 }
 //#endregion
 //# sourceMappingURL=type.d.mts.map

package/es/dashboard/TableIconActions/TableIconActions.d.mts

@@ -0,0 +1,17 @@
+import { TableIconActionProps, TableIconActionsProps } from "./type.mjs";
+//#region src/dashboard/TableIconActions/TableIconActions.d.ts
+/** Column width for a row of `count` small filled action icons. */
+export declare const tableActionColumnWidth: (count: number) => number;
+/** Right-aligned row of icon actions for a table's last column. */
+declare const TableIconActions: {
+  ({ children }: TableIconActionsProps): import("react").JSX.Element;
+  displayName: string;
+};
+/** One row action: a small filled icon button whose label is its name and tooltip. */
+export declare const TableIconAction: {
+  ({ danger, disabled, icon, label, loading, onClick }: TableIconActionProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { TableIconActions as default };
+//# sourceMappingURL=TableIconActions.d.mts.map

package/es/dashboard/TableIconActions/TableIconActions.mjs

@@ -0,0 +1,39 @@
+"use client";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/dashboard/TableIconActions/TableIconActions.tsx
+/** `ActionIcon` `size="small"` is 24px. */
+const ACTION_ICON_SIZE = 24;
+const ACTION_ICON_GAP = 4;
+/** Table cell horizontal padding, so the icons are not clipped by the column. */
+const ACTION_CELL_PADDING = 32;
+/** Column width for a row of `count` small filled action icons. */
+const tableActionColumnWidth = (count) => count * ACTION_ICON_SIZE + Math.max(0, count - 1) * ACTION_ICON_GAP + ACTION_CELL_PADDING;
+/** Right-aligned row of icon actions for a table's last column. */
+const TableIconActions = ({ children }) => /* @__PURE__ */ jsx(FlexBasic_default, {
+	horizontal: true,
+	align: "center",
+	gap: ACTION_ICON_GAP,
+	justify: "flex-end",
+	width: "100%",
+	children
+});
+TableIconActions.displayName = "TableIconActions";
+/** One row action: a small filled icon button whose label is its name and tooltip. */
+const TableIconAction = ({ danger, disabled, icon, label, loading, onClick }) => /* @__PURE__ */ jsx(ActionIcon, {
+	"aria-label": label,
+	danger,
+	disabled,
+	icon,
+	loading,
+	size: "small",
+	title: label,
+	variant: "filled",
+	onClick
+});
+TableIconAction.displayName = "TableIconAction";
+//#endregion
+export { TableIconAction, TableIconActions as default, tableActionColumnWidth };
+
+//# sourceMappingURL=TableIconActions.mjs.map

package/es/dashboard/TableIconActions/TableIconActions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableIconActions.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/TableIconActions/TableIconActions.tsx"],"sourcesContent":["'use client';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport type { TableIconActionProps, TableIconActionsProps } from './type';\n\n/** `ActionIcon` `size=\"small\"` is 24px. */\nconst ACTION_ICON_SIZE = 24;\nconst ACTION_ICON_GAP = 4;\n/** Table cell horizontal padding, so the icons are not clipped by the column. */\nconst ACTION_CELL_PADDING = 32;\n\n/** Column width for a row of `count` small filled action icons. */\nexport const tableActionColumnWidth = (count: number) =>\n  count * ACTION_ICON_SIZE + Math.max(0, count - 1) * ACTION_ICON_GAP + ACTION_CELL_PADDING;\n\n/** Right-aligned row of icon actions for a table's last column. */\nconst TableIconActions = ({ children }: TableIconActionsProps) => (\n  <Flexbox horizontal align={'center'} gap={ACTION_ICON_GAP} justify={'flex-end'} width={'100%'}>\n    {children}\n  </Flexbox>\n);\n\nTableIconActions.displayName = 'TableIconActions';\n\n/** One row action: a small filled icon button whose label is its name and tooltip. */\nexport const TableIconAction = ({\n  danger,\n  disabled,\n  icon,\n  label,\n  loading,\n  onClick,\n}: TableIconActionProps) => (\n  <ActionIcon\n    aria-label={label}\n    danger={danger}\n    disabled={disabled}\n    icon={icon}\n    loading={loading}\n    size={'small'}\n    title={label}\n    variant={'filled'}\n    onClick={onClick}\n  />\n);\n\nTableIconAction.displayName = 'TableIconAction';\n\nexport default TableIconActions;\n"],"mappings":";;;;;;AAQA,MAAM,mBAAmB;AACzB,MAAM,kBAAkB;;AAExB,MAAM,sBAAsB;;AAG5B,MAAa,0BAA0B,UACrC,QAAQ,mBAAmB,KAAK,IAAI,GAAG,QAAQ,CAAC,IAAI,kBAAkB;;AAGxE,MAAM,oBAAoB,EAAE,eAC1B,oBAACA,mBAAD;CAAS,YAAA;CAAW,OAAO;CAAU,KAAK;CAAiB,SAAS;CAAY,OAAO;CACpF;AACM,CAAA;AAGX,iBAAiB,cAAc;;AAG/B,MAAa,mBAAmB,EAC9B,QACA,UACA,MACA,OACA,SACA,cAEA,oBAAC,YAAD;CACE,cAAY;CACJ;CACE;CACJ;CACG;CACT,MAAM;CACN,OAAO;CACP,SAAS;CACA;AACV,CAAA;AAGH,gBAAgB,cAAc"}

package/es/dashboard/TableIconActions/index.d.mts

@@ -0,0 +1,3 @@
+import { TableIconActionProps, TableIconActionsProps } from "./type.mjs";
+import TableIconActions, { TableIconAction, tableActionColumnWidth } from "./TableIconActions.mjs";
+export { TableIconAction, type TableIconActionProps, type TableIconActionsProps, TableIconActions as default, tableActionColumnWidth };

package/es/dashboard/TableIconActions/type.d.mts

@@ -0,0 +1,17 @@
+import { MouseEventHandler, ReactNode } from "react";
+import { LucideIcon } from "lucide-react";
+//#region src/dashboard/TableIconActions/type.d.ts
+export interface TableIconActionsProps {
+  children?: ReactNode;
+}
+export interface TableIconActionProps {
+  danger?: boolean;
+  disabled?: boolean;
+  icon: LucideIcon;
+  /** Accessible name and tooltip. Required: the button has no visible text. */
+  label: string;
+  loading?: boolean;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/TitleWithTips/TitleWithTips.d.mts

@@ -0,0 +1,10 @@
+import { TitleWithTipsProps } from "./type.mjs";
+//#region src/dashboard/TitleWithTips/TitleWithTips.d.ts
+/** A column or field title with an info icon that explains it on hover. */
+declare const TitleWithTips: {
+  ({ className, tips, title }: TitleWithTipsProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { TitleWithTips as default };
+//# sourceMappingURL=TitleWithTips.d.mts.map

package/es/dashboard/TitleWithTips/TitleWithTips.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { cssVar } from "../../styles/stylex/cssVar.stylex.mjs";
+import Icon from "../../Icon/Icon.mjs";
+import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import { Tooltip } from "../../Tooltip/Tooltip.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InfoIcon } from "lucide-react";
+//#region src/dashboard/TitleWithTips/TitleWithTips.tsx
+/** A column or field title with an info icon that explains it on hover. */
+const TitleWithTips = ({ className, tips, title }) => /* @__PURE__ */ jsxs(FlexBasic_default, {
+	horizontal: true,
+	align: "center",
+	className,
+	gap: 4,
+	children: [/* @__PURE__ */ jsx("span", { children: title }), /* @__PURE__ */ jsx(Tooltip, {
+		title: tips,
+		children: /* @__PURE__ */ jsx(Icon, {
+			color: cssVar.colorTextTertiary,
+			icon: InfoIcon,
+			style: { cursor: "help" }
+		})
+	})]
+});
+TitleWithTips.displayName = "TitleWithTips";
+//#endregion
+export { TitleWithTips as default };
+
+//# sourceMappingURL=TitleWithTips.mjs.map

package/es/dashboard/TitleWithTips/TitleWithTips.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TitleWithTips.mjs","names":["Flexbox"],"sources":["../../../src/dashboard/TitleWithTips/TitleWithTips.tsx"],"sourcesContent":["'use client';\n\nimport { InfoIcon } from 'lucide-react';\n\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport Tooltip from '@/Tooltip';\n\nimport type { TitleWithTipsProps } from './type';\n\n/** A column or field title with an info icon that explains it on hover. */\nconst TitleWithTips = ({ className, tips, title }: TitleWithTipsProps) => (\n  <Flexbox horizontal align={'center'} className={className} gap={4}>\n    <span>{title}</span>\n    <Tooltip title={tips}>\n      <Icon color={cssVar.colorTextTertiary} icon={InfoIcon} style={{ cursor: 'help' }} />\n    </Tooltip>\n  </Flexbox>\n);\n\nTitleWithTips.displayName = 'TitleWithTips';\n\nexport default TitleWithTips;\n"],"mappings":";;;;;;;;;AAYA,MAAM,iBAAiB,EAAE,WAAW,MAAM,YACxC,qBAACA,mBAAD;CAAS,YAAA;CAAW,OAAO;CAAqB;CAAW,KAAK;CAAhE,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GACnB,oBAAC,SAAD;EAAS,OAAO;EACd,UAAA,oBAAC,MAAD;GAAM,OAAO,OAAO;GAAmB,MAAM;GAAU,OAAO,EAAE,QAAQ,OAAO;EAAI,CAAA;CAC5E,CAAA,CACF;;AAGX,cAAc,cAAc"}

package/es/dashboard/TitleWithTips/index.d.mts

@@ -0,0 +1,3 @@
+import { TitleWithTipsProps } from "./type.mjs";
+import TitleWithTips from "./TitleWithTips.mjs";
+export { type TitleWithTipsProps, TitleWithTips as default };

package/es/dashboard/TitleWithTips/type.d.mts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+//#region src/dashboard/TitleWithTips/type.d.ts
+export interface TitleWithTipsProps {
+  className?: string;
+  /** Tooltip shown on the info icon. */
+  tips: ReactNode;
+  title: ReactNode;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/dashboard/index.d.mts

@@ -1,12 +1,21 @@
-import { AuthLayoutProps } from "./AuthLayout/type.mjs";
+import { AuthLayoutAsideProps, AuthLayoutBackground, AuthLayoutProps, AuthLayoutVariant } from "./AuthLayout/type.mjs";
+import AuthLayoutAside from "./AuthLayout/Aside.mjs";
 import AuthLayout from "./AuthLayout/AuthLayout.mjs";
 import "./AuthLayout/index.mjs";
+import { AuthLocaleOption, AuthLocaleSwitchProps, AuthThemeMode, AuthThemeSwitchProps } from "./AuthTools/type.mjs";
+import AuthLocaleSwitch from "./AuthTools/AuthLocaleSwitch.mjs";
+import AuthThemeSwitch from "./AuthTools/AuthThemeSwitch.mjs";
+import "./AuthTools/index.mjs";
 import { BreadcrumbItem, BreadcrumbProps } from "./Breadcrumb/type.mjs";
 import Breadcrumb from "./Breadcrumb/Breadcrumb.mjs";
 import "./Breadcrumb/index.mjs";
-import { ConsoleNavGroup, ConsoleNavItem, ConsoleNavProps } from "./ConsoleNav/type.mjs";
+import { ChartGridProps } from "./ChartGrid/type.mjs";
+import ChartGrid from "./ChartGrid/ChartGrid.mjs";
+import "./ChartGrid/index.mjs";
+import { ConsoleNavGroup, ConsoleNavItem, ConsoleNavProps, ConsoleNavSkeletonProps } from "./ConsoleNav/type.mjs";
 import { resolveActiveHref } from "./ConsoleNav/active.mjs";
 import ConsoleNav from "./ConsoleNav/ConsoleNav.mjs";
+import ConsoleNavSkeleton, { ConsoleFooterSkeleton } from "./ConsoleNav/Skeleton.mjs";
 import "./ConsoleNav/index.mjs";
 import { ConsoleBrandProps, ConsoleShellProps, ConsoleShellState } from "./ConsoleShell/type.mjs";
 import ConsoleBrand from "./ConsoleShell/ConsoleBrand.mjs";
@@ -17,6 +26,16 @@ import { useInFilterSplit } from "./FilterSidebar/context.mjs";
 import { FilterOptionProps, FilterRowProps, FilterSidebarProps } from "./FilterSidebar/type.mjs";
 import FilterSidebar, { FilterOption, FilterRow } from "./FilterSidebar/FilterSidebar.mjs";
 import "./FilterSidebar/index.mjs";
+import { FilterStripItem, FilterStripProps } from "./FilterStrip/type.mjs";
+import FilterStrip, { formatInteger } from "./FilterStrip/FilterStrip.mjs";
+import "./FilterStrip/index.mjs";
+import { LabelWithKeyProps } from "./LabelWithKey/type.mjs";
+import LabelWithKey from "./LabelWithKey/LabelWithKey.mjs";
+import "./LabelWithKey/index.mjs";
+import { SurfaceLinkProps, SurfaceProps, SurfaceRenderLink } from "./Surface/type.mjs";
+import { MetricItem, MetricStripProps } from "./MetricStrip/type.mjs";
+import MetricStrip from "./MetricStrip/MetricStrip.mjs";
+import "./MetricStrip/index.mjs";
 import { PageHeaderProps } from "./PageHeader/type.mjs";
 import PageHeader from "./PageHeader/PageHeader.mjs";
 import "./PageHeader/index.mjs";
@@ -25,13 +44,28 @@ import PageLoading, { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, Ta
 import { PageTab, PageTabsProps } from "./PageTabs/type.mjs";
 import PageTabs from "./PageTabs/PageTabs.mjs";
 import "./PageTabs/index.mjs";
+import { PageToolbarProps } from "./PageToolbar/type.mjs";
+import PageToolbar from "./PageToolbar/PageToolbar.mjs";
+import "./PageToolbar/index.mjs";
+import { PanelSurfaceProps } from "./PanelSurface/type.mjs";
+import PanelSurface from "./PanelSurface/PanelSurface.mjs";
+import "./PanelSurface/index.mjs";
 import { RouteProgressProps } from "./RouteProgress/type.mjs";
 import RouteProgress from "./RouteProgress/RouteProgress.mjs";
+import { SectionProps } from "./Section/type.mjs";
+import Section from "./Section/Section.mjs";
+import "./Section/index.mjs";
 import { StatCardProps, StatDirection } from "./StatCard/type.mjs";
 import StatCard from "./StatCard/StatCard.mjs";
 import "./StatCard/index.mjs";
+import { SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink } from "./Surface/link.mjs";
 import { surfaceStyles } from "./Surface/style.mjs";
-import { SurfaceProps } from "./Surface/type.mjs";
 import Surface from "./Surface/Surface.mjs";
 import "./Surface/index.mjs";
-export { AuthLayout, type AuthLayoutProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, ConsoleBrand, type ConsoleBrandProps, ConsoleNav, type ConsoleNavGroup, type ConsoleNavItem, type ConsoleNavProps, ConsoleShell, type ConsoleShellProps, type ConsoleShellState, FilterOption, type FilterOptionProps, FilterRow, type FilterRowProps, FilterSidebar, type FilterSidebarProps, LoadingAnnouncer, PageHeader, type PageHeaderProps, PageHeaderSkeleton, PageLoading, type PageLoadingProps, type PageTab, PageTabs, type PageTabsProps, RouteProgress, type RouteProgressProps, StatCard, type StatCardProps, StatCardSkeleton, type StatDirection, Surface, type SurfaceProps, TableSkeleton, resolveActiveHref, surfaceStyles, useConsoleShell, useInFilterSplit };
+import { TableIconActionProps, TableIconActionsProps } from "./TableIconActions/type.mjs";
+import TableIconActions, { TableIconAction, tableActionColumnWidth } from "./TableIconActions/TableIconActions.mjs";
+import "./TableIconActions/index.mjs";
+import { TitleWithTipsProps } from "./TitleWithTips/type.mjs";
+import TitleWithTips from "./TitleWithTips/TitleWithTips.mjs";
+import "./TitleWithTips/index.mjs";
+export { AuthLayout, AuthLayoutAside, type AuthLayoutAsideProps, type AuthLayoutBackground, type AuthLayoutProps, type AuthLayoutVariant, type AuthLocaleOption, AuthLocaleSwitch, type AuthLocaleSwitchProps, type AuthThemeMode, AuthThemeSwitch, type AuthThemeSwitchProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, ChartGrid, type ChartGridProps, ConsoleBrand, type ConsoleBrandProps, ConsoleFooterSkeleton, ConsoleNav, type ConsoleNavGroup, type ConsoleNavItem, type ConsoleNavProps, ConsoleNavSkeleton, type ConsoleNavSkeletonProps, ConsoleShell, type ConsoleShellProps, type ConsoleShellState, FilterOption, type FilterOptionProps, FilterRow, type FilterRowProps, FilterSidebar, type FilterSidebarProps, FilterStrip, type FilterStripItem, type FilterStripProps, LabelWithKey, type LabelWithKeyProps, LoadingAnnouncer, type MetricItem, MetricStrip, type MetricStripProps, PageHeader, type PageHeaderProps, PageHeaderSkeleton, PageLoading, type PageLoadingProps, type PageTab, PageTabs, type PageTabsProps, PageToolbar, type PageToolbarProps, PanelSurface, type PanelSurfaceProps, RouteProgress, type RouteProgressProps, Section, type SectionProps, StatCard, type StatCardProps, StatCardSkeleton, type StatDirection, Surface, type SurfaceLinkProps, SurfaceLinkProvider, type SurfaceProps, type SurfaceRenderLink, TableIconAction, type TableIconActionProps, TableIconActions, type TableIconActionsProps, TableSkeleton, TitleWithTips, type TitleWithTipsProps, formatInteger, resolveActiveHref, surfaceStyles, tableActionColumnWidth, useConsoleShell, useInFilterSplit, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink };

package/es/dashboard/index.mjs

@@ -1,17 +1,31 @@
+import AuthLayoutAside from "./AuthLayout/Aside.mjs";
 import { surfaceStyles } from "./Surface/style.mjs";
+import { SurfaceLinkProvider, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink } from "./Surface/link.mjs";
 import AuthLayout from "./AuthLayout/AuthLayout.mjs";
+import AuthLocaleSwitch from "./AuthTools/AuthLocaleSwitch.mjs";
+import AuthThemeSwitch from "./AuthTools/AuthThemeSwitch.mjs";
 import Breadcrumb from "./Breadcrumb/Breadcrumb.mjs";
+import ChartGrid from "./ChartGrid/ChartGrid.mjs";
 import { resolveActiveHref } from "./ConsoleNav/active.mjs";
 import { useConsoleShell } from "./ConsoleShell/context.mjs";
 import ConsoleNav from "./ConsoleNav/ConsoleNav.mjs";
+import ConsoleNavSkeleton, { ConsoleFooterSkeleton } from "./ConsoleNav/Skeleton.mjs";
 import ConsoleBrand from "./ConsoleShell/ConsoleBrand.mjs";
+import PageLoading, { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton } from "./PageSkeleton/PageSkeleton.mjs";
 import ConsoleShell from "./ConsoleShell/ConsoleShell.mjs";
 import { useInFilterSplit } from "./FilterSidebar/context.mjs";
 import FilterSidebar, { FilterOption, FilterRow } from "./FilterSidebar/FilterSidebar.mjs";
+import Surface from "./Surface/Surface.mjs";
+import FilterStrip, { formatInteger } from "./FilterStrip/FilterStrip.mjs";
+import LabelWithKey from "./LabelWithKey/LabelWithKey.mjs";
+import MetricStrip from "./MetricStrip/MetricStrip.mjs";
 import PageHeader from "./PageHeader/PageHeader.mjs";
-import PageLoading, { LoadingAnnouncer, PageHeaderSkeleton, StatCardSkeleton, TableSkeleton } from "./PageSkeleton/PageSkeleton.mjs";
 import PageTabs from "./PageTabs/PageTabs.mjs";
+import PageToolbar from "./PageToolbar/PageToolbar.mjs";
+import PanelSurface from "./PanelSurface/PanelSurface.mjs";
 import RouteProgress from "./RouteProgress/RouteProgress.mjs";
+import Section from "./Section/Section.mjs";
 import StatCard from "./StatCard/StatCard.mjs";
-import Surface from "./Surface/Surface.mjs";
-export { AuthLayout, Breadcrumb, ConsoleBrand, ConsoleNav, ConsoleShell, FilterOption, FilterRow, FilterSidebar, LoadingAnnouncer, PageHeader, PageHeaderSkeleton, PageLoading, PageTabs, RouteProgress, StatCard, StatCardSkeleton, Surface, TableSkeleton, resolveActiveHref, surfaceStyles, useConsoleShell, useInFilterSplit };
+import TableIconActions, { TableIconAction, tableActionColumnWidth } from "./TableIconActions/TableIconActions.mjs";
+import TitleWithTips from "./TitleWithTips/TitleWithTips.mjs";
+export { AuthLayout, AuthLayoutAside, AuthLocaleSwitch, AuthThemeSwitch, Breadcrumb, ChartGrid, ConsoleBrand, ConsoleFooterSkeleton, ConsoleNav, ConsoleNavSkeleton, ConsoleShell, FilterOption, FilterRow, FilterSidebar, FilterStrip, LabelWithKey, LoadingAnnouncer, MetricStrip, PageHeader, PageHeaderSkeleton, PageLoading, PageTabs, PageToolbar, PanelSurface, RouteProgress, Section, StatCard, StatCardSkeleton, Surface, SurfaceLinkProvider, TableIconAction, TableIconActions, TableSkeleton, TitleWithTips, formatInteger, resolveActiveHref, surfaceStyles, tableActionColumnWidth, useConsoleShell, useInFilterSplit, useSurfaceCardClassName, useSurfaceDepth, useSurfaceLink };

package/es/hooks/useControlledState.mjs

@@ -0,0 +1,20 @@
+import { useEventCallback } from "./useEventCallback.mjs";
+import { useState } from "react";
+//#region src/hooks/useControlledState.ts
+const resolveInitial = (initial) => typeof initial === "function" ? initial() : initial;
+const useControlledState = (defaultStateValue, { defaultValue, onChange, value } = {}) => {
+	const [innerValue, setInnerValue] = useState(() => {
+		if (value !== void 0) return value;
+		if (defaultValue !== void 0) return resolveInitial(defaultValue);
+		return resolveInitial(defaultStateValue);
+	});
+	const mergedValue = value === void 0 ? innerValue : value;
+	return [mergedValue, useEventCallback((next) => {
+		setInnerValue(next);
+		if (mergedValue !== next) onChange?.(next, mergedValue);
+	})];
+};
+//#endregion
+export { useControlledState };
+
+//# sourceMappingURL=useControlledState.mjs.map

package/es/hooks/useControlledState.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlledState.mjs","names":[],"sources":["../../src/hooks/useControlledState.ts"],"sourcesContent":["import { useState } from 'react';\n\nimport { useEventCallback } from './useEventCallback';\n\ntype Initial<T> = T | (() => T);\n\nexport interface ControlledStateOptions<T> {\n  defaultValue?: Initial<T>;\n  onChange?: (value: T, prevValue: T) => void;\n  value?: T;\n}\n\nconst resolveInitial = <T>(initial: Initial<T>): T =>\n  typeof initial === 'function' ? (initial as () => T)() : initial;\n\nexport const useControlledState = <T>(\n  defaultStateValue: Initial<T>,\n  { defaultValue, onChange, value }: ControlledStateOptions<T> = {},\n): [T, (next: T) => void] => {\n  const [innerValue, setInnerValue] = useState<T>(() => {\n    if (value !== undefined) return value;\n    if (defaultValue !== undefined) return resolveInitial(defaultValue);\n    return resolveInitial(defaultStateValue);\n  });\n\n  const mergedValue = value === undefined ? innerValue : value;\n\n  const setValue = useEventCallback((next: T) => {\n    setInnerValue(next);\n    if (mergedValue !== next) onChange?.(next, mergedValue);\n  });\n\n  return [mergedValue, setValue];\n};\n"],"mappings":";;;AAYA,MAAM,kBAAqB,YACzB,OAAO,YAAY,aAAc,QAAoB,IAAI;AAE3D,MAAa,sBACX,mBACA,EAAE,cAAc,UAAU,UAAqC,CAAC,MACrC;CAC3B,MAAM,CAAC,YAAY,iBAAiB,eAAkB;EACpD,IAAI,UAAU,KAAA,GAAW,OAAO;EAChC,IAAI,iBAAiB,KAAA,GAAW,OAAO,eAAe,YAAY;EAClE,OAAO,eAAe,iBAAiB;CACzC,CAAC;CAED,MAAM,cAAc,UAAU,KAAA,IAAY,aAAa;CAOvD,OAAO,CAAC,aALS,kBAAkB,SAAY;EAC7C,cAAc,IAAI;EAClB,IAAI,gBAAgB,MAAM,WAAW,MAAM,WAAW;CACxD,CAE4B,CAAC;AAC/B"}

package/es/hooks/useHighlight.mjs

@@ -1,9 +1,9 @@
 "use client";
 import lobe_theme_default from "../Highlighter/theme/lobe-theme.mjs";
 import { getCodeLanguageByInput } from "../Highlighter/const.mjs";
+import { hashString } from "../utils/hashString.mjs";
 import { useEffect, useMemo, useState } from "react";
 import { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight } from "@shikijs/transformers";
-import { Md5 } from "ts-md5";
 //#region src/hooks/useHighlight.ts
 const MD5_LENGTH_THRESHOLD = 1e4;
 const highlightCache = /* @__PURE__ */ new Map();
@@ -46,7 +46,7 @@ const useHighlight = (text, { language, enableTransformer, theme: builtinTheme,
 	}, [enableTransformer]);
 	const cacheKey = useMemo(() => {
 		if (streaming) return null;
-		const hash = safeText.length < 1e4 ? safeText : Md5.hashStr(safeText);
+		const hash = safeText.length < 1e4 ? safeText : `${safeText.length}:${hashString(safeText)}`;
 		return [
 			matchedLanguage,
 			builtinTheme,

package/es/hooks/useHighlight.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useHighlight.mjs","names":["lobeTheme"],"sources":["../../src/hooks/useHighlight.ts"],"sourcesContent":["'use client';\n\nimport {\n  transformerNotationDiff,\n  transformerNotationErrorLevel,\n  transformerNotationFocus,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n} from '@shikijs/transformers';\nimport { type CSSProperties, useEffect, useMemo, useState } from 'react';\nimport type { BuiltinTheme, CodeToHastOptions, ThemedToken } from 'shiki';\nimport { Md5 } from 'ts-md5';\n\nimport { getCodeLanguageByInput } from '@/Highlighter/const';\nimport lobeTheme from '@/Highlighter/theme/lobe-theme';\n\n// Application-level cache to avoid repeated calculations\nexport const MD5_LENGTH_THRESHOLD = 10_000; // Use async MD5 for text exceeding this length\n\nexport type StreamingHighlightResult = {\n  lines: ThemedToken[][];\n  preStyle?: CSSProperties;\n};\n\n// Application-level cache for highlighted HTML\n// Key: cacheKey string, Value: Promise<string>\nconst highlightCache = new Map<string, Promise<string>>();\n\n// Maximum cache size to prevent memory leaks\nconst MAX_CACHE_SIZE = 1000;\n\n// Clean up old cache entries when limit is reached\nconst cleanupCache = () => {\n  if (highlightCache.size > MAX_CACHE_SIZE) {\n    // Remove oldest 20% of entries\n    const entriesToRemove = Math.floor(MAX_CACHE_SIZE * 0.2);\n    const keysToRemove = Array.from(highlightCache.keys()).slice(0, entriesToRemove);\n    for (const key of keysToRemove) {\n      highlightCache.delete(key);\n    }\n  }\n};\n\nexport type ICodeToHtml = (code: string, options: CodeToHastOptions) => Promise<string>;\nexport type ShikiModule = typeof import('shiki');\n\n// Use codeToHtml shorthand for better performance\n// It automatically manages highlighter instances and loads themes/languages on-demand\nlet codeToHtmlPromise: Promise<ICodeToHtml | null> | null = null;\n\nconst loadCodeToHtml = (): Promise<ICodeToHtml | null> => {\n  if (typeof window === 'undefined') return Promise.resolve(null);\n\n  if (!codeToHtmlPromise) {\n    codeToHtmlPromise = import('shiki').then((mod) => mod.codeToHtml ?? null);\n  }\n\n  return codeToHtmlPromise;\n};\n\n// Export shikiModulePromise for useStreamHighlight compatibility\nconst loadShikiModule = (): Promise<ShikiModule | null> => {\n  if (typeof window === 'undefined') return Promise.resolve(null);\n  return import('shiki');\n};\nexport const shikiModulePromise = loadShikiModule();\n\n// Helper function: Safe HTML escaping\nexport const escapeHtml = (str: string): string => {\n  return str\n    .replaceAll('&', '&amp;')\n    .replaceAll('<', '&lt;')\n    .replaceAll('>', '&gt;')\n    .replaceAll('\"', '&quot;')\n    .replaceAll(\"'\", '&#039;');\n};\n\n// Main highlight component - optimized version without SWR\nconst customThemes = {\n  'lobe-theme': lobeTheme,\n};\n\nexport const useHighlight = (\n  text: string,\n  {\n    language,\n    enableTransformer,\n    theme: builtinTheme,\n    streaming,\n  }: { enableTransformer?: boolean; language: string; streaming?: boolean; theme?: BuiltinTheme },\n): string => {\n  // Safely handle language and text with boundary checks\n  const safeText = text ?? '';\n  const lang = (language ?? 'plaintext').toLowerCase();\n\n  // Match supported languages\n  const matchedLanguage = useMemo(() => getCodeLanguageByInput(lang), [lang]);\n\n  // Optimize transformer creation\n  const transformers = useMemo(() => {\n    if (!enableTransformer) return;\n    return [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerNotationFocus(),\n      transformerNotationErrorLevel(),\n    ];\n  }, [enableTransformer]);\n\n  // Build cache key\n  const cacheKey = useMemo((): string | null => {\n    if (streaming) return null;\n    // Use hash for long text\n    const hash = safeText.length < MD5_LENGTH_THRESHOLD ? safeText : Md5.hashStr(safeText);\n    return [matchedLanguage, builtinTheme, hash].filter(Boolean).join('-');\n  }, [safeText, matchedLanguage, builtinTheme, streaming]);\n\n  const [data, setData] = useState<string | undefined>();\n\n  useEffect(() => {\n    if (!cacheKey) {\n      setData(undefined);\n      return;\n    }\n\n    // Check cache first\n    const cachedPromise = highlightCache.get(cacheKey);\n    if (cachedPromise) {\n      cachedPromise\n        .then((html) => {\n          setData(html);\n        })\n        .catch(() => {\n          // Silently handle errors, fallback will be handled in the promise\n        });\n      return;\n    }\n\n    // Create new promise for highlighting\n    // Using codeToHtml shorthand: automatically loads themes/languages on-demand\n    const highlightPromise = (async (): Promise<string> => {\n      try {\n        // Try full rendering with transformers\n        const shikiModule = await shikiModulePromise;\n        if (!shikiModule) return safeText;\n\n        const effectiveTheme = builtinTheme || 'lobe-theme';\n\n        // Load custom theme if using slack-dark or slack-ochin\n        if (!builtinTheme && effectiveTheme === 'lobe-theme') {\n          const customTheme = customThemes[effectiveTheme];\n          if (customTheme) {\n            // Use getSingletonHighlighter to load custom theme\n            const highlighter = await shikiModule.getSingletonHighlighter({\n              langs: [matchedLanguage],\n              themes: [customTheme as any],\n            });\n\n            const html = await highlighter.codeToHtml(safeText, {\n              lang: matchedLanguage,\n              theme: effectiveTheme,\n              transformers,\n            });\n\n            return html;\n          }\n        }\n\n        // Fallback to codeToHtml for builtin themes\n        const codeToHtml = await loadCodeToHtml();\n        if (!codeToHtml) return safeText;\n\n        const html = await codeToHtml(safeText, {\n          lang: matchedLanguage,\n          theme: effectiveTheme,\n          transformers,\n        });\n\n        return html;\n      } catch (error_) {\n        console.error('Advanced rendering failed:', error_);\n\n        try {\n          // Try simple rendering (without transformers)\n          const codeToHtml = await loadCodeToHtml();\n          if (!codeToHtml) return safeText;\n          const html = await codeToHtml(safeText, {\n            lang: matchedLanguage,\n            theme: 'lobe-theme',\n          });\n          return html;\n        } catch {\n          // Fallback to plain text\n          const fallbackHtml = `<pre class=\"fallback\"><code>${escapeHtml(safeText)}</code></pre>`;\n          return fallbackHtml;\n        }\n      }\n    })();\n\n    // Cache the promise\n    highlightCache.set(cacheKey, highlightPromise);\n    cleanupCache();\n\n    // Handle promise result\n    highlightPromise\n      .then((html) => {\n        // Only update if this is still the current cache key\n        if (highlightCache.get(cacheKey) === highlightPromise) {\n          setData(html);\n        }\n      })\n      .catch(() => {\n        // Remove failed promise from cache\n        if (highlightCache.get(cacheKey) === highlightPromise) {\n          highlightCache.delete(cacheKey);\n        }\n      });\n  }, [cacheKey, safeText, matchedLanguage, builtinTheme, transformers, customThemes]);\n\n  return data || '';\n};\n"],"mappings":"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"}
+{"version":3,"file":"useHighlight.mjs","names":["lobeTheme"],"sources":["../../src/hooks/useHighlight.ts"],"sourcesContent":["'use client';\n\nimport {\n  transformerNotationDiff,\n  transformerNotationErrorLevel,\n  transformerNotationFocus,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n} from '@shikijs/transformers';\nimport { type CSSProperties, useEffect, useMemo, useState } from 'react';\nimport type { BuiltinTheme, CodeToHastOptions, ThemedToken } from 'shiki';\n\nimport { getCodeLanguageByInput } from '@/Highlighter/const';\nimport lobeTheme from '@/Highlighter/theme/lobe-theme';\nimport { hashString } from '@/utils/hashString';\n\n// Application-level cache to avoid repeated calculations\nexport const MD5_LENGTH_THRESHOLD = 10_000;\n\nexport type StreamingHighlightResult = {\n  lines: ThemedToken[][];\n  preStyle?: CSSProperties;\n};\n\n// Application-level cache for highlighted HTML\n// Key: cacheKey string, Value: Promise<string>\nconst highlightCache = new Map<string, Promise<string>>();\n\n// Maximum cache size to prevent memory leaks\nconst MAX_CACHE_SIZE = 1000;\n\n// Clean up old cache entries when limit is reached\nconst cleanupCache = () => {\n  if (highlightCache.size > MAX_CACHE_SIZE) {\n    // Remove oldest 20% of entries\n    const entriesToRemove = Math.floor(MAX_CACHE_SIZE * 0.2);\n    const keysToRemove = Array.from(highlightCache.keys()).slice(0, entriesToRemove);\n    for (const key of keysToRemove) {\n      highlightCache.delete(key);\n    }\n  }\n};\n\nexport type ICodeToHtml = (code: string, options: CodeToHastOptions) => Promise<string>;\nexport type ShikiModule = typeof import('shiki');\n\n// Use codeToHtml shorthand for better performance\n// It automatically manages highlighter instances and loads themes/languages on-demand\nlet codeToHtmlPromise: Promise<ICodeToHtml | null> | null = null;\n\nconst loadCodeToHtml = (): Promise<ICodeToHtml | null> => {\n  if (typeof window === 'undefined') return Promise.resolve(null);\n\n  if (!codeToHtmlPromise) {\n    codeToHtmlPromise = import('shiki').then((mod) => mod.codeToHtml ?? null);\n  }\n\n  return codeToHtmlPromise;\n};\n\n// Export shikiModulePromise for useStreamHighlight compatibility\nconst loadShikiModule = (): Promise<ShikiModule | null> => {\n  if (typeof window === 'undefined') return Promise.resolve(null);\n  return import('shiki');\n};\nexport const shikiModulePromise = loadShikiModule();\n\n// Helper function: Safe HTML escaping\nexport const escapeHtml = (str: string): string => {\n  return str\n    .replaceAll('&', '&amp;')\n    .replaceAll('<', '&lt;')\n    .replaceAll('>', '&gt;')\n    .replaceAll('\"', '&quot;')\n    .replaceAll(\"'\", '&#039;');\n};\n\n// Main highlight component - optimized version without SWR\nconst customThemes = {\n  'lobe-theme': lobeTheme,\n};\n\nexport const useHighlight = (\n  text: string,\n  {\n    language,\n    enableTransformer,\n    theme: builtinTheme,\n    streaming,\n  }: { enableTransformer?: boolean; language: string; streaming?: boolean; theme?: BuiltinTheme },\n): string => {\n  // Safely handle language and text with boundary checks\n  const safeText = text ?? '';\n  const lang = (language ?? 'plaintext').toLowerCase();\n\n  // Match supported languages\n  const matchedLanguage = useMemo(() => getCodeLanguageByInput(lang), [lang]);\n\n  // Optimize transformer creation\n  const transformers = useMemo(() => {\n    if (!enableTransformer) return;\n    return [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerNotationFocus(),\n      transformerNotationErrorLevel(),\n    ];\n  }, [enableTransformer]);\n\n  // Build cache key\n  const cacheKey = useMemo((): string | null => {\n    if (streaming) return null;\n    // Use hash for long text\n    const hash =\n      safeText.length < MD5_LENGTH_THRESHOLD\n        ? safeText\n        : `${safeText.length}:${hashString(safeText)}`;\n    return [matchedLanguage, builtinTheme, hash].filter(Boolean).join('-');\n  }, [safeText, matchedLanguage, builtinTheme, streaming]);\n\n  const [data, setData] = useState<string | undefined>();\n\n  useEffect(() => {\n    if (!cacheKey) {\n      setData(undefined);\n      return;\n    }\n\n    // Check cache first\n    const cachedPromise = highlightCache.get(cacheKey);\n    if (cachedPromise) {\n      cachedPromise\n        .then((html) => {\n          setData(html);\n        })\n        .catch(() => {\n          // Silently handle errors, fallback will be handled in the promise\n        });\n      return;\n    }\n\n    // Create new promise for highlighting\n    // Using codeToHtml shorthand: automatically loads themes/languages on-demand\n    const highlightPromise = (async (): Promise<string> => {\n      try {\n        // Try full rendering with transformers\n        const shikiModule = await shikiModulePromise;\n        if (!shikiModule) return safeText;\n\n        const effectiveTheme = builtinTheme || 'lobe-theme';\n\n        // Load custom theme if using slack-dark or slack-ochin\n        if (!builtinTheme && effectiveTheme === 'lobe-theme') {\n          const customTheme = customThemes[effectiveTheme];\n          if (customTheme) {\n            // Use getSingletonHighlighter to load custom theme\n            const highlighter = await shikiModule.getSingletonHighlighter({\n              langs: [matchedLanguage],\n              themes: [customTheme as any],\n            });\n\n            const html = await highlighter.codeToHtml(safeText, {\n              lang: matchedLanguage,\n              theme: effectiveTheme,\n              transformers,\n            });\n\n            return html;\n          }\n        }\n\n        // Fallback to codeToHtml for builtin themes\n        const codeToHtml = await loadCodeToHtml();\n        if (!codeToHtml) return safeText;\n\n        const html = await codeToHtml(safeText, {\n          lang: matchedLanguage,\n          theme: effectiveTheme,\n          transformers,\n        });\n\n        return html;\n      } catch (error_) {\n        console.error('Advanced rendering failed:', error_);\n\n        try {\n          // Try simple rendering (without transformers)\n          const codeToHtml = await loadCodeToHtml();\n          if (!codeToHtml) return safeText;\n          const html = await codeToHtml(safeText, {\n            lang: matchedLanguage,\n            theme: 'lobe-theme',\n          });\n          return html;\n        } catch {\n          // Fallback to plain text\n          const fallbackHtml = `<pre class=\"fallback\"><code>${escapeHtml(safeText)}</code></pre>`;\n          return fallbackHtml;\n        }\n      }\n    })();\n\n    // Cache the promise\n    highlightCache.set(cacheKey, highlightPromise);\n    cleanupCache();\n\n    // Handle promise result\n    highlightPromise\n      .then((html) => {\n        // Only update if this is still the current cache key\n        if (highlightCache.get(cacheKey) === highlightPromise) {\n          setData(html);\n        }\n      })\n      .catch(() => {\n        // Remove failed promise from cache\n        if (highlightCache.get(cacheKey) === highlightPromise) {\n          highlightCache.delete(cacheKey);\n        }\n      });\n  }, [cacheKey, safeText, matchedLanguage, builtinTheme, transformers, customThemes]);\n\n  return data || '';\n};\n"],"mappings":"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"}

package/es/hooks/useHover.mjs

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+//#region src/hooks/useHover.ts
+const useHover = (ref) => {
+	const [hovering, setHovering] = useState(false);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const enter = () => setHovering(true);
+		const leave = () => setHovering(false);
+		element.addEventListener("mouseenter", enter);
+		element.addEventListener("mouseleave", leave);
+		return () => {
+			element.removeEventListener("mouseenter", enter);
+			element.removeEventListener("mouseleave", leave);
+		};
+	}, [ref]);
+	return hovering;
+};
+//#endregion
+export { useHover };
+
+//# sourceMappingURL=useHover.mjs.map

package/es/hooks/useHover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHover.mjs","names":[],"sources":["../../src/hooks/useHover.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from 'react';\n\nexport const useHover = (ref: RefObject<Element | null>): boolean => {\n  const [hovering, setHovering] = useState(false);\n\n  useEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    const enter = () => setHovering(true);\n    const leave = () => setHovering(false);\n    element.addEventListener('mouseenter', enter);\n    element.addEventListener('mouseleave', leave);\n    return () => {\n      element.removeEventListener('mouseenter', enter);\n      element.removeEventListener('mouseleave', leave);\n    };\n  }, [ref]);\n\n  return hovering;\n};\n"],"mappings":";;AAEA,MAAa,YAAY,QAA4C;CACnE,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,gBAAgB;EACd,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,SAAS;EACd,MAAM,cAAc,YAAY,IAAI;EACpC,MAAM,cAAc,YAAY,KAAK;EACrC,QAAQ,iBAAiB,cAAc,KAAK;EAC5C,QAAQ,iBAAiB,cAAc,KAAK;EAC5C,aAAa;GACX,QAAQ,oBAAoB,cAAc,KAAK;GAC/C,QAAQ,oBAAoB,cAAc,KAAK;EACjD;CACF,GAAG,CAAC,GAAG,CAAC;CAER,OAAO;AACT"}

package/es/hooks/useScroll.d.mts

@@ -0,0 +1,8 @@
+//#region src/hooks/useScroll.d.ts
+type ScrollTargetValue = Element | Document | null | undefined;
+export type ScrollTarget = ScrollTargetValue | (() => ScrollTargetValue) | {
+  current: ScrollTargetValue;
+};
+//#endregion
+export {};
+//# sourceMappingURL=useScroll.d.mts.map

package/es/hooks/useScroll.mjs

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+//#region src/hooks/useScroll.ts
+const resolveTarget = (target) => {
+	if (typeof target === "function") return target();
+	if (target && "current" in target) return target.current;
+	return target;
+};
+const readPosition = (element) => {
+	const scroller = element instanceof Document ? element.scrollingElement ?? element.documentElement : element;
+	return {
+		left: scroller.scrollLeft,
+		top: scroller.scrollTop
+	};
+};
+const useScroll = (target) => {
+	const [position, setPosition] = useState();
+	useEffect(() => {
+		const element = resolveTarget(target);
+		if (!element) return;
+		const update = () => {
+			const next = readPosition(element);
+			setPosition((prev) => prev && prev.left === next.left && prev.top === next.top ? prev : next);
+		};
+		update();
+		element.addEventListener("scroll", update, { passive: true });
+		return () => element.removeEventListener("scroll", update);
+	}, [target]);
+	return position;
+};
+//#endregion
+export { useScroll };
+
+//# sourceMappingURL=useScroll.mjs.map

package/es/hooks/useScroll.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScroll.mjs","names":[],"sources":["../../src/hooks/useScroll.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\ntype ScrollTargetValue = Element | Document | null | undefined;\n\nexport type ScrollTarget =\n  ScrollTargetValue | (() => ScrollTargetValue) | { current: ScrollTargetValue };\n\nexport interface ScrollPosition {\n  left: number;\n  top: number;\n}\n\nconst resolveTarget = (target: ScrollTarget): ScrollTargetValue => {\n  if (typeof target === 'function') return target();\n  if (target && 'current' in target) return target.current;\n  return target;\n};\n\nconst readPosition = (element: Element | Document): ScrollPosition => {\n  const scroller =\n    element instanceof Document ? (element.scrollingElement ?? element.documentElement) : element;\n  return { left: scroller.scrollLeft, top: scroller.scrollTop };\n};\n\nexport const useScroll = (target: ScrollTarget): ScrollPosition | undefined => {\n  const [position, setPosition] = useState<ScrollPosition>();\n\n  useEffect(() => {\n    const element = resolveTarget(target);\n    if (!element) return;\n    const update = () => {\n      const next = readPosition(element);\n      setPosition((prev) =>\n        prev && prev.left === next.left && prev.top === next.top ? prev : next,\n      );\n    };\n    update();\n    element.addEventListener('scroll', update, { passive: true });\n    return () => element.removeEventListener('scroll', update);\n  }, [target]);\n\n  return position;\n};\n"],"mappings":";;AAYA,MAAM,iBAAiB,WAA4C;CACjE,IAAI,OAAO,WAAW,YAAY,OAAO,OAAO;CAChD,IAAI,UAAU,aAAa,QAAQ,OAAO,OAAO;CACjD,OAAO;AACT;AAEA,MAAM,gBAAgB,YAAgD;CACpE,MAAM,WACJ,mBAAmB,WAAY,QAAQ,oBAAoB,QAAQ,kBAAmB;CACxF,OAAO;EAAE,MAAM,SAAS;EAAY,KAAK,SAAS;CAAU;AAC9D;AAEA,MAAa,aAAa,WAAqD;CAC7E,MAAM,CAAC,UAAU,eAAe,SAAyB;CAEzD,gBAAgB;EACd,MAAM,UAAU,cAAc,MAAM;EACpC,IAAI,CAAC,SAAS;EACd,MAAM,eAAe;GACnB,MAAM,OAAO,aAAa,OAAO;GACjC,aAAa,SACX,QAAQ,KAAK,SAAS,KAAK,QAAQ,KAAK,QAAQ,KAAK,MAAM,OAAO,IACpE;EACF;EACA,OAAO;EACP,QAAQ,iBAAiB,UAAU,QAAQ,EAAE,SAAS,KAAK,CAAC;EAC5D,aAAa,QAAQ,oBAAoB,UAAU,MAAM;CAC3D,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO;AACT"}

package/es/hooks/useSize.mjs

@@ -0,0 +1,26 @@
+import { useLayoutEffect, useState } from "react";
+//#region src/hooks/useSize.ts
+const useSize = (ref) => {
+	const [size, setSize] = useState();
+	useLayoutEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		setSize({
+			height: element.clientHeight,
+			width: element.clientWidth
+		});
+		const observer = new ResizeObserver((entries) => {
+			for (const { target } of entries) setSize({
+				height: target.clientHeight,
+				width: target.clientWidth
+			});
+		});
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [ref]);
+	return size;
+};
+//#endregion
+export { useSize };
+
+//# sourceMappingURL=useSize.mjs.map

package/es/hooks/useSize.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSize.mjs","names":[],"sources":["../../src/hooks/useSize.ts"],"sourcesContent":["import { type RefObject, useLayoutEffect, useState } from 'react';\n\nexport interface ElementSize {\n  height: number;\n  width: number;\n}\n\nexport const useSize = (ref: RefObject<Element | null>): ElementSize | undefined => {\n  const [size, setSize] = useState<ElementSize>();\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n    if (!element) return;\n    setSize({ height: element.clientHeight, width: element.clientWidth });\n\n    const observer = new ResizeObserver((entries) => {\n      for (const { target } of entries) {\n        setSize({ height: target.clientHeight, width: target.clientWidth });\n      }\n    });\n    observer.observe(element);\n    return () => observer.disconnect();\n  }, [ref]);\n\n  return size;\n};\n"],"mappings":";;AAOA,MAAa,WAAW,QAA4D;CAClF,MAAM,CAAC,MAAM,WAAW,SAAsB;CAE9C,sBAAsB;EACpB,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,SAAS;EACd,QAAQ;GAAE,QAAQ,QAAQ;GAAc,OAAO,QAAQ;EAAY,CAAC;EAEpE,MAAM,WAAW,IAAI,gBAAgB,YAAY;GAC/C,KAAK,MAAM,EAAE,YAAY,SACvB,QAAQ;IAAE,QAAQ,OAAO;IAAc,OAAO,OAAO;GAAY,CAAC;EAEtE,CAAC;EACD,SAAS,QAAQ,OAAO;EACxB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,GAAG,CAAC;CAER,OAAO;AACT"}

package/es/internal/virtual/VirtualScrollArea.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { styleProps } from "../../styles/stylex/props.mjs";
+import { useMergeRefs } from "../../utils/mergeRefs.mjs";
 import { ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewportImpl } from "../../ScrollArea/atoms.mjs";
 import { Children, cloneElement, useCallback, useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMergeRefs } from "react-merge-refs";
 import { Virtualizer } from "virtua";
 //#region src/internal/virtual/VirtualScrollArea.tsx
 const styles = {

package/es/internal/virtual/VirtualScrollArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualScrollArea.mjs","names":[],"sources":["../../../src/internal/virtual/VirtualScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n  Children,\n  cloneElement,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\nimport { Virtualizer, type VirtualizerHandle } from 'virtua';\n\nimport {\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewportImpl,\n  type ScrollAreaViewportProps,\n} from '@/ScrollArea/atoms';\nimport { styleProps } from '@/styles/stylex/props';\n\n// `--lobe-virtual-scroll-inset` is the inline padding of the box the scroll area sits in: the\n// root bleeds out by it so the scrollbar hugs that box's edge, and the viewport pads the rows back.\nconst styles = stylex.create({\n  root: {\n    marginInline: 'calc(-1 * var(--lobe-virtual-scroll-inset, 0px))',\n    display: 'flex',\n    flexBasis: '0%',\n    flexDirection: 'column',\n    flexGrow: 1,\n    flexShrink: 1,\n    minHeight: 0,\n  },\n  viewport: {\n    paddingInline: 'var(--lobe-virtual-scroll-inset, 0)',\n    flexBasis: '0%',\n    flexGrow: 1,\n    flexShrink: 1,\n    height: 'auto',\n    minHeight: 0,\n  },\n});\n\n// Rows mounted on the very first render, before the viewport is measured, so Base UI's\n// list navigation sees the leading rows (not a pinned footer item) when it focuses on open.\nconst INITIAL_ROW_COUNT = 20;\n\nexport interface VirtualScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {\n  children: ReactNode;\n  itemSize?: number;\n  keepMounted?: readonly number[];\n  /**\n   * Element that owns the scrolling box (e.g. a Base UI `Select.List`); it is rendered\n   * through the ScrollArea viewport so its own props and role win.\n   */\n  viewport?: ReactElement<{ children?: ReactNode; render?: ReactElement }>;\n  viewportProps?: ScrollAreaViewportProps;\n  virtualizerRef?: Ref<VirtualizerHandle>;\n}\n\nexport const VirtualScrollArea = ({\n  children,\n  className,\n  itemSize,\n  keepMounted,\n  viewport,\n  viewportProps,\n  virtualizerRef,\n  ...rest\n}: VirtualScrollAreaProps) => {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const mergedViewportRef = useMergeRefs([viewportRef, viewportProps?.ref]);\n\n  const list = (\n    <Virtualizer\n      itemSize={itemSize}\n      keepMounted={keepMounted}\n      ref={virtualizerRef}\n      scrollRef={viewportRef}\n      ssrCount={Math.min(INITIAL_ROW_COUNT, Children.count(children))}\n    >\n      {children}\n    </Virtualizer>\n  );\n  const viewportElement = (\n    <ScrollAreaViewportImpl\n      tabIndex={-1}\n      {...viewportProps}\n      ref={mergedViewportRef}\n      xstyle={styles.viewport}\n    />\n  );\n\n  return (\n    <ScrollAreaRoot\n      data-virtual=\"\"\n      {...rest}\n      className={styleProps(styles.root, className as string).className}\n    >\n      {cloneElement(viewport ?? viewportElement, {\n        children: list,\n        ...(viewport && { render: viewportElement }),\n      })}\n      <ScrollAreaScrollbar>\n        <ScrollAreaThumb />\n      </ScrollAreaScrollbar>\n    </ScrollAreaRoot>\n  );\n};\n\nVirtualScrollArea.displayName = 'VirtualScrollArea';\n\n// Base UI scrolls the highlighted item into view after focusing it; while the pointer drives\n// the scroll that would yank the list back, so callers consult `pointerScrollRef` first.\nexport function usePointerScrollGuard() {\n  const pointerScrollRef = useRef(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const markPointerScroll = useCallback(() => {\n    pointerScrollRef.current = true;\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(() => {\n      pointerScrollRef.current = false;\n    }, 120);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    };\n  }, []);\n\n  return {\n    markPointerScroll,\n    pointerScrollRef,\n    scrollGuardProps: {\n      onPointerDown: markPointerScroll,\n      onTouchMove: markPointerScroll,\n      onWheel: markPointerScroll,\n    },\n  };\n}\n"],"mappings":";;;;;;;;AAWA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAIA,MAAM,oBAAoB;AAgB1B,MAAa,qBAAqB,EAChC,UACA,WACA,UACA,aACA,UACA,eACA,gBACA,GAAG,WACyB;CAC5B,MAAM,cAAc,OAA8B,IAAI;CACtD,MAAM,oBAAoB,aAAa,CAAC,aAAa,eAAe,GAAG,CAAC;CACxE,MAAM,OAAO,oBAAC,aAAD;EAAuB;EAAuB;EAAa,KAAK;EAAgB,WAAW;EAAa,UAAU,KAAK,IAAI,mBAAmB,SAAS,MAAM,QAAQ,CAAC;EAC9K;CACU,CAAA;CACf,MAAM,kBAAkB,oBAAC,wBAAD;EAAwB,UAAU;EAAI,GAAI;EAAe,KAAK;EAAmB,QAAQ,OAAO;CAAW,CAAA;CACnI,OAAO,qBAAC,gBAAD;EAAgB,gBAAa;EAAG,GAAI;EAAM,WAAW,WAAW,OAAO,MAAM,SAAmB,CAAC,CAAC;EAAlG,UAAA,CACF,aAAa,YAAY,iBAAiB;GAC3C,UAAU;GACV,GAAI,YAAY,EACd,QAAQ,gBACV;EACF,CAAC,GACC,oBAAC,qBAAD,EAAA,UACE,oBAAC,iBAAD,CAAkB,CAAA,EACC,CAAA,CACP;;AACpB;AACA,kBAAkB,cAAc;AAIhC,SAAgB,wBAAwB;CACtC,MAAM,mBAAmB,OAAO,KAAK;CACrC,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,oBAAoB,kBAAkB;EAC1C,iBAAiB,UAAU;EAC3B,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACvD,WAAW,UAAU,iBAAiB;GACpC,iBAAiB,UAAU;EAC7B,GAAG,GAAG;CACR,GAAG,CAAC,CAAC;CACL,gBAAgB;EACd,aAAa;GACX,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACzD;CACF,GAAG,CAAC,CAAC;CACL,OAAO;EACL;EACA;EACA,kBAAkB;GAChB,eAAe;GACf,aAAa;GACb,SAAS;EACX;CACF;AACF"}
+{"version":3,"file":"VirtualScrollArea.mjs","names":[],"sources":["../../../src/internal/virtual/VirtualScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport {\n  Children,\n  cloneElement,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { Virtualizer, type VirtualizerHandle } from 'virtua';\n\nimport {\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaScrollbar,\n  ScrollAreaThumb,\n  ScrollAreaViewportImpl,\n  type ScrollAreaViewportProps,\n} from '@/ScrollArea/atoms';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useMergeRefs } from '@/utils/mergeRefs';\n\n// `--lobe-virtual-scroll-inset` is the inline padding of the box the scroll area sits in: the\n// root bleeds out by it so the scrollbar hugs that box's edge, and the viewport pads the rows back.\nconst styles = stylex.create({\n  root: {\n    marginInline: 'calc(-1 * var(--lobe-virtual-scroll-inset, 0px))',\n    display: 'flex',\n    flexBasis: '0%',\n    flexDirection: 'column',\n    flexGrow: 1,\n    flexShrink: 1,\n    minHeight: 0,\n  },\n  viewport: {\n    paddingInline: 'var(--lobe-virtual-scroll-inset, 0)',\n    flexBasis: '0%',\n    flexGrow: 1,\n    flexShrink: 1,\n    height: 'auto',\n    minHeight: 0,\n  },\n});\n\n// Rows mounted on the very first render, before the viewport is measured, so Base UI's\n// list navigation sees the leading rows (not a pinned footer item) when it focuses on open.\nconst INITIAL_ROW_COUNT = 20;\n\nexport interface VirtualScrollAreaProps extends Omit<ScrollAreaRootProps, 'children'> {\n  children: ReactNode;\n  itemSize?: number;\n  keepMounted?: readonly number[];\n  /**\n   * Element that owns the scrolling box (e.g. a Base UI `Select.List`); it is rendered\n   * through the ScrollArea viewport so its own props and role win.\n   */\n  viewport?: ReactElement<{ children?: ReactNode; render?: ReactElement }>;\n  viewportProps?: ScrollAreaViewportProps;\n  virtualizerRef?: Ref<VirtualizerHandle>;\n}\n\nexport const VirtualScrollArea = ({\n  children,\n  className,\n  itemSize,\n  keepMounted,\n  viewport,\n  viewportProps,\n  virtualizerRef,\n  ...rest\n}: VirtualScrollAreaProps) => {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const mergedViewportRef = useMergeRefs([viewportRef, viewportProps?.ref]);\n\n  const list = (\n    <Virtualizer\n      itemSize={itemSize}\n      keepMounted={keepMounted}\n      ref={virtualizerRef}\n      scrollRef={viewportRef}\n      ssrCount={Math.min(INITIAL_ROW_COUNT, Children.count(children))}\n    >\n      {children}\n    </Virtualizer>\n  );\n  const viewportElement = (\n    <ScrollAreaViewportImpl\n      tabIndex={-1}\n      {...viewportProps}\n      ref={mergedViewportRef}\n      xstyle={styles.viewport}\n    />\n  );\n\n  return (\n    <ScrollAreaRoot\n      data-virtual=\"\"\n      {...rest}\n      className={styleProps(styles.root, className as string).className}\n    >\n      {cloneElement(viewport ?? viewportElement, {\n        children: list,\n        ...(viewport && { render: viewportElement }),\n      })}\n      <ScrollAreaScrollbar>\n        <ScrollAreaThumb />\n      </ScrollAreaScrollbar>\n    </ScrollAreaRoot>\n  );\n};\n\nVirtualScrollArea.displayName = 'VirtualScrollArea';\n\n// Base UI scrolls the highlighted item into view after focusing it; while the pointer drives\n// the scroll that would yank the list back, so callers consult `pointerScrollRef` first.\nexport function usePointerScrollGuard() {\n  const pointerScrollRef = useRef(false);\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const markPointerScroll = useCallback(() => {\n    pointerScrollRef.current = true;\n    if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    timeoutRef.current = setTimeout(() => {\n      pointerScrollRef.current = false;\n    }, 120);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current);\n    };\n  }, []);\n\n  return {\n    markPointerScroll,\n    pointerScrollRef,\n    scrollGuardProps: {\n      onPointerDown: markPointerScroll,\n      onTouchMove: markPointerScroll,\n      onWheel: markPointerScroll,\n    },\n  };\n}\n"],"mappings":";;;;;;;;AAWA,MAAM,SAAS;CACb,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAIA,MAAM,oBAAoB;AAgB1B,MAAa,qBAAqB,EAChC,UACA,WACA,UACA,aACA,UACA,eACA,gBACA,GAAG,WACyB;CAC5B,MAAM,cAAc,OAA8B,IAAI;CACtD,MAAM,oBAAoB,aAAa,CAAC,aAAa,eAAe,GAAG,CAAC;CACxE,MAAM,OAAO,oBAAC,aAAD;EAAuB;EAAuB;EAAa,KAAK;EAAgB,WAAW;EAAa,UAAU,KAAK,IAAI,mBAAmB,SAAS,MAAM,QAAQ,CAAC;EAC9K;CACU,CAAA;CACf,MAAM,kBAAkB,oBAAC,wBAAD;EAAwB,UAAU;EAAI,GAAI;EAAe,KAAK;EAAmB,QAAQ,OAAO;CAAW,CAAA;CACnI,OAAO,qBAAC,gBAAD;EAAgB,gBAAa;EAAG,GAAI;EAAM,WAAW,WAAW,OAAO,MAAM,SAAmB,CAAC,CAAC;EAAlG,UAAA,CACF,aAAa,YAAY,iBAAiB;GAC3C,UAAU;GACV,GAAI,YAAY,EACd,QAAQ,gBACV;EACF,CAAC,GACC,oBAAC,qBAAD,EAAA,UACE,oBAAC,iBAAD,CAAkB,CAAA,EACC,CAAA,CACP;;AACpB;AACA,kBAAkB,cAAc;AAIhC,SAAgB,wBAAwB;CACtC,MAAM,mBAAmB,OAAO,KAAK;CACrC,MAAM,aAAa,OAA6C,IAAI;CACpE,MAAM,oBAAoB,kBAAkB;EAC1C,iBAAiB,UAAU;EAC3B,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACvD,WAAW,UAAU,iBAAiB;GACpC,iBAAiB,UAAU;EAC7B,GAAG,GAAG;CACR,GAAG,CAAC,CAAC;CACL,gBAAgB;EACd,aAAa;GACX,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACzD;CACF,GAAG,CAAC,CAAC;CACL,OAAO;EACL;EACA;EACA,kBAAkB;GAChB,eAAe;GACf,aAAa;GACb,SAAS;EACX;CACF;AACF"}

package/es/mobile/ChatInputArea/ChatInputArea.mjs

@@ -2,13 +2,13 @@
 import { styleProps } from "../../styles/stylex/props.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import ActionIcon from "../../ActionIcon/ActionIcon.mjs";
+import { useSize } from "../../hooks/useSize.mjs";
 import ChatInputAreaInner from "../../chat/ChatInputArea/components/ChatInputAreaInner.mjs";
 import SafeArea from "../SafeArea/SafeArea.mjs";
 import { styles } from "./style.mjs";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronUp } from "lucide-react";
-import { useSize } from "ahooks";
 //#region src/mobile/ChatInputArea/ChatInputArea.tsx
 const ChatInputArea = memo(({ ref, className, style, topAddons, textAreaLeftAddons, textAreaRightAddons, bottomAddons, expand = false, setExpand, onSend, onInput, loading, value, safeArea }) => {
 	const containerRef = useRef(null);

package/es/mobile/ChatInputArea/ChatInputArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInputArea.mjs","names":["Flexbox"],"sources":["../../../src/mobile/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { useSize } from 'ahooks';\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport {\n  type FC,\n  memo,\n  type PropsWithChildren,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport ChatInputAreaInner from '@/chat/ChatInputArea/components/ChatInputAreaInner';\nimport { Flexbox } from '@/Flex';\nimport SafeArea from '@/mobile/SafeArea';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport { type ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    topAddons,\n    textAreaLeftAddons,\n    textAreaRightAddons,\n    bottomAddons,\n    expand = false,\n    setExpand,\n    onSend,\n    onInput,\n    loading,\n    value,\n    safeArea,\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const size = useSize(containerRef);\n    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);\n    const [isFocused, setIsFocused] = useState<boolean>(false);\n\n    useEffect(() => {\n      if (!size?.height) return;\n      setShowFullscreen(size.height > 72);\n    }, [size]);\n\n    const InnerContainer: FC<\n      PropsWithChildren & {\n        bottomAddons?: ReactNode;\n        textAreaLeftAddons?: ReactNode;\n        textAreaRightAddons?: ReactNode;\n        topAddons?: ReactNode;\n      }\n    > = useCallback(\n      ({ children, ...r }) =>\n        expand ? (\n          <Flexbox gap={8} height={'inherit'} paddingInline={8}>\n            <Flexbox horizontal gap={8} justify={'flex-end'}>\n              {r.textAreaLeftAddons}\n              {r.textAreaRightAddons}\n            </Flexbox>\n            {children}\n            {r.topAddons}\n            {r.bottomAddons}\n          </Flexbox>\n        ) : (\n          <Flexbox horizontal align={'flex-end'} gap={8} height={'inherit'} paddingInline={8}>\n            {r.textAreaLeftAddons}\n            {children}\n            {r.textAreaRightAddons}\n          </Flexbox>\n        ),\n      [expand, loading],\n    );\n\n    const showAddons = !expand && !isFocused;\n\n    return (\n      <Flexbox\n        flex={'none'}\n        gap={12}\n        height={expand ? '100%' : undefined}\n        paddingBlock={12}\n        width={expand ? '100%' : undefined}\n        {...styleProps([styles.container, expand && styles.expand], className, style)}\n      >\n        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}\n        <Flexbox\n          height={expand ? '100%' : undefined}\n          ref={containerRef}\n          style={{ position: 'relative' }}\n          width={expand ? '100%' : undefined}\n        >\n          {showFullscreen && (\n            <ActionIcon\n              active\n              icon={expand ? ChevronDown : ChevronUp}\n              id={'sssssss'}\n              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}\n              style={{ insetInlineEnd: 14, position: 'absolute', ...(expand ? { top: 6 } : {}) }}\n              onClick={() => setExpand?.(!expand)}\n            />\n          )}\n          <InnerContainer\n            bottomAddons={bottomAddons}\n            textAreaLeftAddons={textAreaLeftAddons}\n            textAreaRightAddons={textAreaRightAddons}\n            topAddons={topAddons}\n          >\n            <ChatInputAreaInner\n              autoSize={expand ? false : { maxRows: 6, minRows: 1 }}\n              loading={loading}\n              ref={ref}\n              style={{ flex: 1, minHeight: 36, paddingBlock: 6 }}\n              value={value}\n              variant={expand ? 'borderless' : 'filled'}\n              onBlur={() => setIsFocused(false)}\n              onFocus={() => setIsFocused(true)}\n              onInput={onInput}\n              onSend={onSend}\n            />\n          </InnerContainer>\n        </Flexbox>\n        {bottomAddons && (\n          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>\n        )}\n        {safeArea && !isFocused && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nChatInputArea.displayName = 'ChatInputArea';\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,WACA,oBACA,qBACA,cACA,SAAS,OACT,WACA,QACA,SACA,SACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,OAAO,QAAQ,YAAY;CACjC,MAAM,CAAC,gBAAgB,qBAAqB,SAAkB,KAAK;CACnE,MAAM,CAAC,WAAW,gBAAgB,SAAkB,KAAK;CAEzD,gBAAgB;EACd,IAAI,CAAC,MAAM,QAAQ;EACnB,kBAAkB,KAAK,SAAS,EAAE;CACpC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,iBAOF,aACD,EAAE,UAAU,GAAG,QACd,SACE,qBAACA,mBAAD;EAAS,KAAK;EAAG,QAAQ;EAAW,eAAe;EAAnD,UAAA;GACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,KAAK;IAAG,SAAS;IAArC,UAAA,CACG,EAAE,oBACF,EAAE,mBACI;;GACR;GACA,EAAE;GACF,EAAE;EACI;CAET,CAAA,IAAA,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAY,KAAK;EAAG,QAAQ;EAAW,eAAe;EAAjF,UAAA;GACG,EAAE;GACF;GACA,EAAE;EACI;CAEb,CAAA,GAAA,CAAC,QAAQ,OAAO,CAClB;CAEA,MAAM,aAAa,CAAC,UAAU,CAAC;CAE/B,OACE,qBAACA,mBAAD;EACE,MAAM;EACN,KAAK;EACL,QAAQ,SAAS,SAAS,KAAA;EAC1B,cAAc;EACd,OAAO,SAAS,SAAS,KAAA;EACzB,GAAI,WAAW,CAAC,OAAO,WAAW,UAAU,OAAO,MAAM,GAAG,WAAW,KAAK;EAN9E,UAAA;GAQG,aAAa,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;IAAI,UAAA;GAAmB,CAAA;GACzF,qBAACA,mBAAD;IACE,QAAQ,SAAS,SAAS,KAAA;IAC1B,KAAK;IACL,OAAO,EAAE,UAAU,WAAW;IAC9B,OAAO,SAAS,SAAS,KAAA;IAJ3B,UAAA,CAMG,kBACC,oBAAC,YAAD;KACE,QAAA;KACA,MAAM,SAAS,cAAc;KAC7B,IAAI;KACJ,MAAM;MAAE,WAAW;MAAI,cAAc;MAAO,MAAM;KAAG;KACrD,OAAO;MAAE,gBAAgB;MAAI,UAAU;MAAY,GAAI,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC;KAAG;KACjF,eAAe,YAAY,CAAC,MAAM;IACnC,CAAA,GAEH,oBAAC,gBAAD;KACgB;KACM;KACC;KACV;KAEX,UAAA,oBAAC,oBAAD;MACE,UAAU,SAAS,QAAQ;OAAE,SAAS;OAAG,SAAS;MAAE;MAC3C;MACJ;MACL,OAAO;OAAE,MAAM;OAAG,WAAW;OAAI,cAAc;MAAE;MAC1C;MACP,SAAS,SAAS,eAAe;MACjC,cAAc,aAAa,KAAK;MAChC,eAAe,aAAa,IAAI;MACvB;MACD;KACT,CAAA;IACa,CAAA,CACT;;GACR,gBACC,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;IAAI,UAAA;GAAsB,CAAA;GAE/E,YAAY,CAAC,aAAa,oBAAC,UAAD,EAAU,UAAU,SAAW,CAAA;EACnD;;AAEb,CACF;AAEA,cAAc,cAAc"}
+{"version":3,"file":"ChatInputArea.mjs","names":["Flexbox"],"sources":["../../../src/mobile/ChatInputArea/ChatInputArea.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronDown, ChevronUp } from 'lucide-react';\nimport {\n  type FC,\n  memo,\n  type PropsWithChildren,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport ChatInputAreaInner from '@/chat/ChatInputArea/components/ChatInputAreaInner';\nimport { Flexbox } from '@/Flex';\nimport { useSize } from '@/hooks/useSize';\nimport SafeArea from '@/mobile/SafeArea';\nimport { styleProps } from '@/styles/stylex/props';\n\nimport { styles } from './style';\nimport { type ChatInputAreaProps } from './type';\n\nconst ChatInputArea = memo<ChatInputAreaProps>(\n  ({\n    ref,\n    className,\n    style,\n    topAddons,\n    textAreaLeftAddons,\n    textAreaRightAddons,\n    bottomAddons,\n    expand = false,\n    setExpand,\n    onSend,\n    onInput,\n    loading,\n    value,\n    safeArea,\n  }) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const size = useSize(containerRef);\n    const [showFullscreen, setShowFullscreen] = useState<boolean>(false);\n    const [isFocused, setIsFocused] = useState<boolean>(false);\n\n    useEffect(() => {\n      if (!size?.height) return;\n      setShowFullscreen(size.height > 72);\n    }, [size]);\n\n    const InnerContainer: FC<\n      PropsWithChildren & {\n        bottomAddons?: ReactNode;\n        textAreaLeftAddons?: ReactNode;\n        textAreaRightAddons?: ReactNode;\n        topAddons?: ReactNode;\n      }\n    > = useCallback(\n      ({ children, ...r }) =>\n        expand ? (\n          <Flexbox gap={8} height={'inherit'} paddingInline={8}>\n            <Flexbox horizontal gap={8} justify={'flex-end'}>\n              {r.textAreaLeftAddons}\n              {r.textAreaRightAddons}\n            </Flexbox>\n            {children}\n            {r.topAddons}\n            {r.bottomAddons}\n          </Flexbox>\n        ) : (\n          <Flexbox horizontal align={'flex-end'} gap={8} height={'inherit'} paddingInline={8}>\n            {r.textAreaLeftAddons}\n            {children}\n            {r.textAreaRightAddons}\n          </Flexbox>\n        ),\n      [expand, loading],\n    );\n\n    const showAddons = !expand && !isFocused;\n\n    return (\n      <Flexbox\n        flex={'none'}\n        gap={12}\n        height={expand ? '100%' : undefined}\n        paddingBlock={12}\n        width={expand ? '100%' : undefined}\n        {...styleProps([styles.container, expand && styles.expand], className, style)}\n      >\n        {topAddons && <Flexbox style={showAddons ? {} : { display: 'none' }}>{topAddons}</Flexbox>}\n        <Flexbox\n          height={expand ? '100%' : undefined}\n          ref={containerRef}\n          style={{ position: 'relative' }}\n          width={expand ? '100%' : undefined}\n        >\n          {showFullscreen && (\n            <ActionIcon\n              active\n              icon={expand ? ChevronDown : ChevronUp}\n              id={'sssssss'}\n              size={{ blockSize: 24, borderRadius: '50%', size: 14 }}\n              style={{ insetInlineEnd: 14, position: 'absolute', ...(expand ? { top: 6 } : {}) }}\n              onClick={() => setExpand?.(!expand)}\n            />\n          )}\n          <InnerContainer\n            bottomAddons={bottomAddons}\n            textAreaLeftAddons={textAreaLeftAddons}\n            textAreaRightAddons={textAreaRightAddons}\n            topAddons={topAddons}\n          >\n            <ChatInputAreaInner\n              autoSize={expand ? false : { maxRows: 6, minRows: 1 }}\n              loading={loading}\n              ref={ref}\n              style={{ flex: 1, minHeight: 36, paddingBlock: 6 }}\n              value={value}\n              variant={expand ? 'borderless' : 'filled'}\n              onBlur={() => setIsFocused(false)}\n              onFocus={() => setIsFocused(true)}\n              onInput={onInput}\n              onSend={onSend}\n            />\n          </InnerContainer>\n        </Flexbox>\n        {bottomAddons && (\n          <Flexbox style={showAddons ? {} : { display: 'none' }}>{bottomAddons}</Flexbox>\n        )}\n        {safeArea && !isFocused && <SafeArea position={'bottom'} />}\n      </Flexbox>\n    );\n  },\n);\n\nChatInputArea.displayName = 'ChatInputArea';\n\nexport default ChatInputArea;\n"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,gBAAgB,MACnB,EACC,KACA,WACA,OACA,WACA,oBACA,qBACA,cACA,SAAS,OACT,WACA,QACA,SACA,SACA,OACA,eACI;CACJ,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,OAAO,QAAQ,YAAY;CACjC,MAAM,CAAC,gBAAgB,qBAAqB,SAAkB,KAAK;CACnE,MAAM,CAAC,WAAW,gBAAgB,SAAkB,KAAK;CAEzD,gBAAgB;EACd,IAAI,CAAC,MAAM,QAAQ;EACnB,kBAAkB,KAAK,SAAS,EAAE;CACpC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,iBAOF,aACD,EAAE,UAAU,GAAG,QACd,SACE,qBAACA,mBAAD;EAAS,KAAK;EAAG,QAAQ;EAAW,eAAe;EAAnD,UAAA;GACE,qBAACA,mBAAD;IAAS,YAAA;IAAW,KAAK;IAAG,SAAS;IAArC,UAAA,CACG,EAAE,oBACF,EAAE,mBACI;;GACR;GACA,EAAE;GACF,EAAE;EACI;CAET,CAAA,IAAA,qBAACA,mBAAD;EAAS,YAAA;EAAW,OAAO;EAAY,KAAK;EAAG,QAAQ;EAAW,eAAe;EAAjF,UAAA;GACG,EAAE;GACF;GACA,EAAE;EACI;CAEb,CAAA,GAAA,CAAC,QAAQ,OAAO,CAClB;CAEA,MAAM,aAAa,CAAC,UAAU,CAAC;CAE/B,OACE,qBAACA,mBAAD;EACE,MAAM;EACN,KAAK;EACL,QAAQ,SAAS,SAAS,KAAA;EAC1B,cAAc;EACd,OAAO,SAAS,SAAS,KAAA;EACzB,GAAI,WAAW,CAAC,OAAO,WAAW,UAAU,OAAO,MAAM,GAAG,WAAW,KAAK;EAN9E,UAAA;GAQG,aAAa,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;IAAI,UAAA;GAAmB,CAAA;GACzF,qBAACA,mBAAD;IACE,QAAQ,SAAS,SAAS,KAAA;IAC1B,KAAK;IACL,OAAO,EAAE,UAAU,WAAW;IAC9B,OAAO,SAAS,SAAS,KAAA;IAJ3B,UAAA,CAMG,kBACC,oBAAC,YAAD;KACE,QAAA;KACA,MAAM,SAAS,cAAc;KAC7B,IAAI;KACJ,MAAM;MAAE,WAAW;MAAI,cAAc;MAAO,MAAM;KAAG;KACrD,OAAO;MAAE,gBAAgB;MAAI,UAAU;MAAY,GAAI,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC;KAAG;KACjF,eAAe,YAAY,CAAC,MAAM;IACnC,CAAA,GAEH,oBAAC,gBAAD;KACgB;KACM;KACC;KACV;KAEX,UAAA,oBAAC,oBAAD;MACE,UAAU,SAAS,QAAQ;OAAE,SAAS;OAAG,SAAS;MAAE;MAC3C;MACJ;MACL,OAAO;OAAE,MAAM;OAAG,WAAW;OAAI,cAAc;MAAE;MAC1C;MACP,SAAS,SAAS,eAAe;MACjC,cAAc,aAAa,KAAK;MAChC,eAAe,aAAa,IAAI;MACvB;MACD;KACT,CAAA;IACa,CAAA,CACT;;GACR,gBACC,oBAACA,mBAAD;IAAS,OAAO,aAAa,CAAC,IAAI,EAAE,SAAS,OAAO;IAAI,UAAA;GAAsB,CAAA;GAE/E,YAAY,CAAC,aAAa,oBAAC,UAAD,EAAU,UAAU,SAAW,CAAA;EACnD;;AAEb,CACF;AAEA,cAAc,cAAc"}