@lobehub/ui 6.0.0-beta.7 → 6.0.0-beta.8

package/es/EmojiPicker/EmojiPicker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.mjs","names":["emojiPickerMessages","Flexbox"],"sources":["../../src/EmojiPicker/EmojiPicker.tsx"],"sourcesContent":["'use client';\n\nimport data from '@emoji-mart/data';\nimport Picker from '@emoji-mart/react';\nimport { getLobeIconCDN } from '@lobehub/icons/es/features/getLobeIconCDN';\nimport { toc } from '@lobehub/icons/es/toc';\nimport * as stylex from '@stylexjs/stylex';\nimport chroma from 'chroma-js';\nimport clsx from 'clsx';\nimport { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Avatar from '@/Avatar';\nimport { Flexbox } from '@/Flex';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Popover from '@/Popover';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useTheme } from '@/styles/theme/scope';\nimport Tabs, { type TabsProps } from '@/Tabs';\nimport Tooltip from '@/Tooltip';\n\nimport AvatarUploader from './AvatarUploader';\nimport { styles } from './style';\nimport { type EmojiPickerProps } from './type';\nimport { useEmojiMartI18n } from './useEmojiMartI18n';\n\nconst DEFAULT_AVATAR = '🤖';\n\nconst EmojiPicker = memo<EmojiPickerProps>(\n  ({\n    value,\n    defaultAvatar = DEFAULT_AVATAR,\n    onChange,\n    locale = 'en-US',\n    allowUpload,\n    allowDelete,\n    allowModelAvatar,\n    texts,\n    onDelete,\n    compressSize = 256,\n    customEmojis,\n    className,\n    loading,\n    onUpload,\n    customTabs = [],\n    popupClassName,\n    popupStyle,\n    customRender,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    popupProps,\n    shape,\n    contentProps,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const { t } = useTranslation(emojiPickerMessages);\n    const [visible, setVisible] = useControlledState(defaultOpen, {\n      defaultValue: defaultOpen,\n      onChange: onOpenChange,\n      value: open,\n    });\n    const [tab, setTab] = useState<'emoji' | 'upload'>('emoji');\n\n    const theme = useTheme();\n    const pickerCssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--emoji-picker-rgb-accent': chroma(theme.colorPrimary).rgb().join(', '),\n        '--emoji-picker-rgb-background': chroma(theme.colorBgElevated).rgb().join(', '),\n      }),\n      [theme.colorPrimary, theme.colorBgElevated],\n    );\n\n    const i18n = useEmojiMartI18n(locale);\n\n    const [ava, setAva] = useControlledState(defaultAvatar, {\n      defaultValue: defaultAvatar,\n      onChange,\n      value,\n    });\n\n    const handleAvatarChange = (emoji: string) => {\n      setAva(emoji);\n      setVisible(false);\n    };\n\n    // Generate model avatars from @lobehub/icons when allowModelAvatar is enabled\n    const mergedCustomEmojis = useMemo(() => {\n      if (!allowModelAvatar) return customEmojis;\n\n      const modelIcons = toc.filter((item) => item.group !== 'application');\n\n      const modelEmojisCategory = {\n        id: 'models',\n        name: 'Models / Providers',\n        emojis: modelIcons.map((item) => ({\n          id: item.id.toLowerCase(),\n          name: item.title,\n          keywords: [item.title, item.id, item.fullTitle],\n          skins: [{ src: getLobeIconCDN(item.id, { format: 'avatar', cdn: 'aliyun' }) }],\n        })),\n      };\n\n      return customEmojis ? [modelEmojisCategory, ...customEmojis] : [modelEmojisCategory];\n    }, [allowModelAvatar, customEmojis]);\n\n    const emojiText = texts?.emoji ?? t('emojiPicker.emoji');\n    const uploadText = texts?.upload ?? t('emojiPicker.upload');\n    const deleteText = texts?.delete ?? t('emojiPicker.delete');\n\n    const hideEmojiTab = typeof allowUpload === 'object' && allowUpload?.enableEmoji === false;\n\n    const items: TabsProps['items'] = [\n      !hideEmojiTab && {\n        key: 'emoji',\n        label: (\n          <Tooltip title={emojiText}>\n            <Icon icon={SmileIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      allowUpload && {\n        key: 'upload',\n        label: (\n          <Tooltip title={uploadText}>\n            <Icon icon={UploadIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      ...customTabs.map((tab) => ({ key: tab.value, label: tab.label })),\n    ].filter(Boolean) as TabsProps['items'];\n\n    const showTabs = allowDelete || (items && items.length > 1);\n\n    const content = (\n      <Flexbox\n        ref={ref}\n        {...styleProps(styles.picker, clsx('lobe-emoji-picker', popupClassName), {\n          minWidth: 310,\n          paddingTop: showTabs ? 4 : 0,\n          ...pickerCssVariables,\n          ...popupStyle,\n        })}\n        {...contentProps}\n      >\n        {showTabs && (\n          <Flexbox\n            horizontal\n            align={'center'}\n            {...stylex.props(styles.tabs)}\n            justify={'space-between'}\n            paddingInline={10}\n          >\n            <Tabs\n              activeKey={tab}\n              items={items}\n              variant={'square'}\n              classNames={{\n                indicator: 'lobe-emoji-picker-tabs-indicator',\n                list: 'lobe-emoji-picker-tabs-list',\n                root: 'lobe-emoji-picker-tabs-root',\n                tab: 'lobe-emoji-picker-tab',\n              }}\n              onChange={(key) => setTab(key as any)}\n            />\n            {allowDelete && (\n              <ActionIcon\n                icon={TrashIcon}\n                title={deleteText}\n                size={{\n                  blockSize: 32,\n                  size: 18,\n                }}\n                onClick={() => {\n                  handleAvatarChange(defaultAvatar);\n                  onDelete?.();\n                }}\n              />\n            )}\n          </Flexbox>\n        )}\n        {tab === 'emoji' && (\n          <Picker\n            custom={mergedCustomEmojis}\n            data={data}\n            i18n={i18n}\n            icons={'outline'}\n            locale={locale.split('-')[0]}\n            navPosition={showTabs ? 'bottom' : 'top'}\n            previewPosition={'none'}\n            skinTonePosition={'none'}\n            theme={theme.isDarkMode ? 'dark' : 'light'}\n            onEmojiSelect={(e: any) => handleAvatarChange(e.src || e.native)}\n          />\n        )}\n        {tab === 'upload' && (\n          <AvatarUploader\n            compressSize={compressSize}\n            shape={shape}\n            texts={texts}\n            onChange={handleAvatarChange}\n            onUpload={onUpload}\n          />\n        )}\n        {customTabs.map(\n          (item) =>\n            tab === item.value && (\n              <Flexbox key={item.value} padding={10}>\n                {item.render(handleAvatarChange)}\n              </Flexbox>\n            ),\n        )}\n      </Flexbox>\n    );\n\n    return (\n      <Popover\n        className=\"lobe-emoji-picker-popover\"\n        content={content}\n        defaultOpen={defaultOpen}\n        open={visible}\n        placement={'bottom'}\n        trigger={'click'}\n        classNames={{\n          content: 'lobe-emoji-picker-popover',\n          root: 'lobe-emoji-picker-positioner',\n        }}\n        onOpenChange={(v) => {\n          if (loading) return;\n          setVisible(v);\n        }}\n        {...popupProps}\n      >\n        {customRender ? (\n          customRender(ava)\n        ) : (\n          <Avatar\n            avatar={ava}\n            className={clsx('lobe-emoji-picker-avatar', className)}\n            loading={loading}\n            shape={shape}\n            {...rest}\n          />\n        )}\n      </Popover>\n    );\n  },\n);\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}
+{"version":3,"file":"EmojiPicker.mjs","names":["emojiPickerMessages","Flexbox","clsx"],"sources":["../../src/EmojiPicker/EmojiPicker.tsx"],"sourcesContent":["'use client';\n\nimport Picker from '@emoji-mart/react';\nimport { getLobeIconCDN } from '@lobehub/icons/es/features/getLobeIconCDN';\nimport { toc } from '@lobehub/icons/es/toc';\nimport * as stylex from '@stylexjs/stylex';\nimport chroma from 'chroma-js';\nimport clsx from 'clsx';\nimport { SmileIcon, TrashIcon, UploadIcon } from 'lucide-react';\nimport { memo, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport Avatar from '@/Avatar';\nimport { Flexbox } from '@/Flex';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport emojiPickerMessages from '@/i18n/resources/en/emojiPicker';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport Icon from '@/Icon';\nimport Popover from '@/Popover';\nimport { styleProps } from '@/styles/stylex/props';\nimport { useTheme } from '@/styles/theme/scope';\nimport Tabs, { type TabsProps } from '@/Tabs';\nimport Tooltip from '@/Tooltip';\n\nimport AvatarUploader from './AvatarUploader';\nimport { loadEmojiData } from './loadEmojiData';\nimport { styles } from './style';\nimport { type EmojiPickerProps } from './type';\nimport { useEmojiMartI18n } from './useEmojiMartI18n';\n\nconst DEFAULT_AVATAR = '🤖';\n\nconst EmojiPicker = memo<EmojiPickerProps>(\n  ({\n    value,\n    defaultAvatar = DEFAULT_AVATAR,\n    onChange,\n    locale = 'en-US',\n    allowUpload,\n    allowDelete,\n    allowModelAvatar,\n    texts,\n    onDelete,\n    compressSize = 256,\n    customEmojis,\n    className,\n    loading,\n    onUpload,\n    customTabs = [],\n    popupClassName,\n    popupStyle,\n    customRender,\n    open,\n    defaultOpen = false,\n    onOpenChange,\n    popupProps,\n    shape,\n    contentProps,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLDivElement>(null);\n    const { t } = useTranslation(emojiPickerMessages);\n    const [visible, setVisible] = useControlledState(defaultOpen, {\n      defaultValue: defaultOpen,\n      onChange: onOpenChange,\n      value: open,\n    });\n    const [tab, setTab] = useState<'emoji' | 'upload'>('emoji');\n\n    const theme = useTheme();\n    const pickerCssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--emoji-picker-rgb-accent': chroma(theme.colorPrimary).rgb().join(', '),\n        '--emoji-picker-rgb-background': chroma(theme.colorBgElevated).rgb().join(', '),\n      }),\n      [theme.colorPrimary, theme.colorBgElevated],\n    );\n\n    const i18n = useEmojiMartI18n(locale);\n\n    const [ava, setAva] = useControlledState(defaultAvatar, {\n      defaultValue: defaultAvatar,\n      onChange,\n      value,\n    });\n\n    const handleAvatarChange = (emoji: string) => {\n      setAva(emoji);\n      setVisible(false);\n    };\n\n    // Generate model avatars from @lobehub/icons when allowModelAvatar is enabled\n    const mergedCustomEmojis = useMemo(() => {\n      if (!allowModelAvatar) return customEmojis;\n\n      const modelIcons = toc.filter((item) => item.group !== 'application');\n\n      const modelEmojisCategory = {\n        id: 'models',\n        name: 'Models / Providers',\n        emojis: modelIcons.map((item) => ({\n          id: item.id.toLowerCase(),\n          name: item.title,\n          keywords: [item.title, item.id, item.fullTitle],\n          skins: [{ src: getLobeIconCDN(item.id, { format: 'avatar', cdn: 'aliyun' }) }],\n        })),\n      };\n\n      return customEmojis ? [modelEmojisCategory, ...customEmojis] : [modelEmojisCategory];\n    }, [allowModelAvatar, customEmojis]);\n\n    const emojiText = texts?.emoji ?? t('emojiPicker.emoji');\n    const uploadText = texts?.upload ?? t('emojiPicker.upload');\n    const deleteText = texts?.delete ?? t('emojiPicker.delete');\n\n    const hideEmojiTab = typeof allowUpload === 'object' && allowUpload?.enableEmoji === false;\n\n    const items: TabsProps['items'] = [\n      !hideEmojiTab && {\n        key: 'emoji',\n        label: (\n          <Tooltip title={emojiText}>\n            <Icon icon={SmileIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      allowUpload && {\n        key: 'upload',\n        label: (\n          <Tooltip title={uploadText}>\n            <Icon icon={UploadIcon} size={{ size: 20, strokeWidth: 2.5 }} />\n          </Tooltip>\n        ),\n      },\n      ...customTabs.map((tab) => ({ key: tab.value, label: tab.label })),\n    ].filter(Boolean) as TabsProps['items'];\n\n    const showTabs = allowDelete || (items && items.length > 1);\n\n    const content = (\n      <Flexbox\n        ref={ref}\n        {...styleProps(styles.picker, clsx('lobe-emoji-picker', popupClassName), {\n          minWidth: 310,\n          paddingTop: showTabs ? 4 : 0,\n          ...pickerCssVariables,\n          ...popupStyle,\n        })}\n        {...contentProps}\n      >\n        {showTabs && (\n          <Flexbox\n            horizontal\n            align={'center'}\n            {...stylex.props(styles.tabs)}\n            justify={'space-between'}\n            paddingInline={10}\n          >\n            <Tabs\n              activeKey={tab}\n              items={items}\n              variant={'square'}\n              classNames={{\n                indicator: 'lobe-emoji-picker-tabs-indicator',\n                list: 'lobe-emoji-picker-tabs-list',\n                root: 'lobe-emoji-picker-tabs-root',\n                tab: 'lobe-emoji-picker-tab',\n              }}\n              onChange={(key) => setTab(key as any)}\n            />\n            {allowDelete && (\n              <ActionIcon\n                icon={TrashIcon}\n                title={deleteText}\n                size={{\n                  blockSize: 32,\n                  size: 18,\n                }}\n                onClick={() => {\n                  handleAvatarChange(defaultAvatar);\n                  onDelete?.();\n                }}\n              />\n            )}\n          </Flexbox>\n        )}\n        {tab === 'emoji' && (\n          <Picker\n            custom={mergedCustomEmojis}\n            data={loadEmojiData}\n            i18n={i18n}\n            icons={'outline'}\n            locale={locale.split('-')[0]}\n            navPosition={showTabs ? 'bottom' : 'top'}\n            previewPosition={'none'}\n            skinTonePosition={'none'}\n            theme={theme.isDarkMode ? 'dark' : 'light'}\n            onEmojiSelect={(e: any) => handleAvatarChange(e.src || e.native)}\n          />\n        )}\n        {tab === 'upload' && (\n          <AvatarUploader\n            compressSize={compressSize}\n            shape={shape}\n            texts={texts}\n            onChange={handleAvatarChange}\n            onUpload={onUpload}\n          />\n        )}\n        {customTabs.map(\n          (item) =>\n            tab === item.value && (\n              <Flexbox key={item.value} padding={10}>\n                {item.render(handleAvatarChange)}\n              </Flexbox>\n            ),\n        )}\n      </Flexbox>\n    );\n\n    return (\n      <Popover\n        className=\"lobe-emoji-picker-popover\"\n        content={content}\n        defaultOpen={defaultOpen}\n        open={visible}\n        placement={'bottom'}\n        trigger={'click'}\n        classNames={{\n          content: 'lobe-emoji-picker-popover',\n          root: 'lobe-emoji-picker-positioner',\n        }}\n        onOpenChange={(v) => {\n          if (loading) return;\n          setVisible(v);\n        }}\n        {...popupProps}\n      >\n        {customRender ? (\n          customRender(ava)\n        ) : (\n          <Avatar\n            avatar={ava}\n            className={clsx('lobe-emoji-picker-avatar', className)}\n            loading={loading}\n            shape={shape}\n            {...rest}\n          />\n        )}\n      </Popover>\n    );\n  },\n);\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}

package/es/EmojiPicker/loadEmojiData.mjs

@@ -0,0 +1,6 @@
+//#region src/EmojiPicker/loadEmojiData.ts
+const loadEmojiData = () => import("@emoji-mart/data").then((module) => module.default);
+//#endregion
+export { loadEmojiData };
+
+//# sourceMappingURL=loadEmojiData.mjs.map

package/es/EmojiPicker/loadEmojiData.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadEmojiData.mjs","names":[],"sources":["../../src/EmojiPicker/loadEmojiData.ts"],"sourcesContent":["// `@emoji-mart/data` resolves to a JSON file, which Node only loads with an import attribute,\n// so it stays out of the static graph and loads when the picker opens.\nexport const loadEmojiData = (): Promise<unknown> =>\n  import('@emoji-mart/data').then((module) => module.default);\n"],"mappings":";AAEA,MAAa,sBACX,OAAO,mBAAmB,CAAC,MAAM,WAAW,OAAO,OAAO"}

package/es/FloatingPanel/FloatingPanel.mjs

@@ -5,7 +5,7 @@ import { styles } from "./style.mjs";
 import { ToastDodge } from "./ToastDodge.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { X } from "lucide-react";
 //#region src/FloatingPanel/FloatingPanel.tsx
@@ -271,7 +271,7 @@ const FloatingPanel = memo(({ afterClose, ariaLabel, children, className, classN
 				"aria-label": ariaLabel,
 				className: classNames?.wrapper,
 				motionProps: resolvedMotionProps,
-				panelClassName: clsx(className, classNames?.panel),
+				panelClassName: clsx$1(className, classNames?.panel),
 				panelXstyle: [s.panel, isTop && s.panelTop],
 				popupStyle,
 				width: activeResizeSize?.width ?? width,

package/es/FloatingPanel/FloatingPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingPanel.mjs","names":[],"sources":["../../src/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport type { MotionProps } from 'motion/react';\nimport type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { ModalRootProps } from '../Modal';\nimport { ModalBackdrop, ModalPortal, ModalRoot } from '../Modal';\nimport {\n  ModalCloseImpl,\n  ModalContentImpl,\n  ModalFooterImpl,\n  ModalHeaderImpl,\n  ModalPopupImpl,\n  ModalTitleImpl,\n} from '../Modal/atoms';\nimport { styles } from './style';\nimport { ToastDodge } from './ToastDodge';\nimport type {\n  FloatingPanelOffset,\n  FloatingPanelPlacement,\n  FloatingPanelProps,\n  FloatingPanelResizeHandle,\n  FloatingPanelSize,\n} from './type';\n\nconst DEFAULT_MIN_HEIGHT = 180;\nconst DEFAULT_MIN_WIDTH = 320;\n\ninterface InternalFloatingPanelSize extends FloatingPanelSize {\n  sourceHeight?: number | string;\n  sourceWidth?: number | string;\n}\n\nconst defaultMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: 12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: 12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst topMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: -12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: -12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst resolveOffset = (offset: FloatingPanelOffset) => {\n  if (typeof offset === 'object') {\n    return {\n      x: offset.x ?? 8,\n      y: offset.y ?? 8,\n    };\n  }\n\n  return { x: offset, y: offset };\n};\n\nconst getPlacementStyle = (\n  placement: FloatingPanelPlacement,\n  offset: FloatingPanelOffset,\n): CSSProperties => {\n  const { x, y } = resolveOffset(offset);\n  const isTop = placement.startsWith('top');\n  const isLeft = placement.endsWith('Left');\n\n  const px = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\n  const blockInset = `calc(${px(y)} + var(--floating-panel-reserve-block-end, 0px))`;\n  const inlineInset = `calc(${px(x)} + var(--floating-panel-reserve-inline-end, 0px))`;\n\n  return {\n    alignItems: isTop ? 'flex-start' : 'flex-end',\n    justifyContent: isLeft ? 'flex-start' : 'flex-end',\n    paddingBlockEnd: isTop ? undefined : blockInset,\n    paddingBlockStart: isTop ? blockInset : undefined,\n    paddingInlineEnd: isLeft ? undefined : inlineInset,\n    paddingInlineStart: isLeft ? inlineInset : undefined,\n  };\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst getViewportMaxSize = () => ({\n  height: Math.max(DEFAULT_MIN_HEIGHT, window.innerHeight - 16),\n  width: Math.max(DEFAULT_MIN_WIDTH, window.innerWidth - 16),\n});\n\nconst getResizeHandles = (placement: FloatingPanelPlacement): FloatingPanelResizeHandle[] => {\n  switch (placement) {\n    case 'bottomLeft': {\n      return ['top', 'right', 'topRight'];\n    }\n    case 'topLeft': {\n      return ['bottom', 'right', 'bottomRight'];\n    }\n    case 'topRight': {\n      return ['bottom', 'left', 'bottomLeft'];\n    }\n    default: {\n      return ['top', 'left', 'topLeft'];\n    }\n  }\n};\n\nconst getResizeHandleClassName = (s: typeof styles, handle: FloatingPanelResizeHandle) => {\n  const handleClassMap = {\n    bottom: s.resizeHandleBottom,\n    bottomLeft: s.resizeHandleBottomLeft,\n    bottomRight: s.resizeHandleBottomRight,\n    left: s.resizeHandleLeft,\n    right: s.resizeHandleRight,\n    top: s.resizeHandleTop,\n    topLeft: s.resizeHandleTopLeft,\n    topRight: s.resizeHandleTopRight,\n  };\n\n  return handleClassMap[handle];\n};\n\nconst resolveResizeSize = ({\n  handle,\n  maxHeight,\n  maxWidth,\n  minHeight,\n  minWidth,\n  startHeight,\n  startWidth,\n  startX,\n  startY,\n  x,\n  y,\n}: {\n  handle: FloatingPanelResizeHandle;\n  maxHeight: number;\n  maxWidth: number;\n  minHeight: number;\n  minWidth: number;\n  startHeight: number;\n  startWidth: number;\n  startX: number;\n  startY: number;\n  x: number;\n  y: number;\n}): FloatingPanelSize => {\n  const deltaX = x - startX;\n  const deltaY = y - startY;\n  const growsLeft = handle.includes('Left') || handle === 'left';\n  const growsRight = handle.includes('Right') || handle === 'right';\n  const growsTop = handle.includes('top') || handle === 'top';\n  const growsBottom = handle.includes('bottom') || handle === 'bottom';\n\n  const nextWidth = growsLeft ? startWidth - deltaX : growsRight ? startWidth + deltaX : startWidth;\n  const nextHeight = growsTop\n    ? startHeight - deltaY\n    : growsBottom\n      ? startHeight + deltaY\n      : startHeight;\n\n  return {\n    height: clamp(nextHeight, minHeight, maxHeight),\n    width: clamp(nextWidth, minWidth, maxWidth),\n  };\n};\n\nconst FloatingPanel = memo<FloatingPanelProps>(\n  ({\n    afterClose,\n    ariaLabel,\n    children,\n    className,\n    classNames,\n    closable = true,\n    closeIcon,\n    closeLabel = 'Close',\n    defaultOpen,\n    actions,\n    footer,\n    getContainer,\n    height,\n    keyboard = true,\n    mask = false,\n    maskClosable = true,\n    maxHeight,\n    maxWidth,\n    minHeight = DEFAULT_MIN_HEIGHT,\n    minWidth = DEFAULT_MIN_WIDTH,\n    modal = false,\n    motionProps,\n    offset = 8,\n    onClose,\n    onOpenChange,\n    onResize,\n    onResizeEnd,\n    open,\n    placement = 'bottomRight',\n    resizable = true,\n    styles: semanticStyles,\n    title,\n    width = 640,\n    zIndex,\n  }) => {\n    const s = styles;\n    const isTop = placement.startsWith('top');\n    const container = getContainer === false ? undefined : getContainer;\n    const [resizeSize, setResizeSize] = useState<InternalFloatingPanelSize>();\n    const latestResizeSizeRef = useRef<FloatingPanelSize | undefined>(undefined);\n    const resizeCleanupRef = useRef<(() => void) | undefined>(undefined);\n    const activeResizeSize =\n      resizeSize?.sourceWidth === width && resizeSize.sourceHeight === height\n        ? resizeSize\n        : undefined;\n\n    useEffect(\n      () => () => {\n        resizeCleanupRef.current?.();\n      },\n      [],\n    );\n\n    const popupStyle = useMemo(\n      () => ({\n        ...getPlacementStyle(placement, offset),\n        ...semanticStyles?.wrapper,\n      }),\n      [offset, placement, semanticStyles?.wrapper],\n    );\n\n    const handleOpenChange = useCallback<NonNullable<ModalRootProps['onOpenChange']>>(\n      (nextOpen, eventDetails) => {\n        if (!nextOpen) {\n          if (keyboard === false && eventDetails.reason === 'escape-key') return;\n          if (maskClosable === false && eventDetails.reason === 'outside-press') return;\n          onClose?.();\n        }\n\n        onOpenChange?.(nextOpen, eventDetails);\n      },\n      [keyboard, maskClosable, onClose, onOpenChange],\n    );\n\n    const showHeader = title !== undefined || actions !== undefined || closable;\n    const resolvedMotionProps = motionProps ?? (isTop ? topMotionProps : defaultMotionProps);\n    const resizeHandles = useMemo(() => getResizeHandles(placement), [placement]);\n\n    const handleResizeStart = useCallback(\n      (handle: FloatingPanelResizeHandle) => (event: ReactPointerEvent<HTMLDivElement>) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const panel = event.currentTarget.parentElement;\n        if (!panel) return;\n\n        const rect = panel.getBoundingClientRect();\n        const viewportMaxSize = getViewportMaxSize();\n        const resolvedMaxWidth = Math.max(minWidth, maxWidth ?? viewportMaxSize.width);\n        const resolvedMaxHeight = Math.max(minHeight, maxHeight ?? viewportMaxSize.height);\n        const startX = event.clientX;\n        const startY = event.clientY;\n\n        const handleResizeMove = (moveEvent: PointerEvent) => {\n          const nextSize = resolveResizeSize({\n            handle,\n            maxHeight: resolvedMaxHeight,\n            maxWidth: resolvedMaxWidth,\n            minHeight,\n            minWidth,\n            startHeight: rect.height,\n            startWidth: rect.width,\n            startX,\n            startY,\n            x: moveEvent.clientX,\n            y: moveEvent.clientY,\n          });\n\n          const nextState = { ...nextSize, sourceHeight: height, sourceWidth: width };\n          latestResizeSizeRef.current = nextSize;\n          setResizeSize(nextState);\n          onResize?.(nextSize);\n        };\n\n        const handleResizeEnd = () => {\n          resizeCleanupRef.current?.();\n          resizeCleanupRef.current = undefined;\n\n          if (latestResizeSizeRef.current) onResizeEnd?.(latestResizeSizeRef.current);\n        };\n\n        resizeCleanupRef.current?.();\n        window.addEventListener('pointermove', handleResizeMove);\n        window.addEventListener('pointerup', handleResizeEnd);\n        resizeCleanupRef.current = () => {\n          window.removeEventListener('pointermove', handleResizeMove);\n          window.removeEventListener('pointerup', handleResizeEnd);\n        };\n      },\n      [height, maxHeight, maxWidth, minHeight, minWidth, onResize, onResizeEnd, width],\n    );\n\n    return (\n      <ModalRoot\n        defaultOpen={defaultOpen}\n        modal={modal}\n        open={open}\n        zIndex={zIndex}\n        onExitComplete={afterClose}\n        onOpenChange={handleOpenChange}\n      >\n        <ModalPortal container={container}>\n          {mask && (\n            <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n          )}\n          <ModalPopupImpl\n            aria-label={ariaLabel}\n            className={classNames?.wrapper}\n            motionProps={resolvedMotionProps}\n            panelClassName={clsx(className, classNames?.panel)}\n            panelXstyle={[s.panel, isTop && s.panelTop]}\n            popupStyle={popupStyle}\n            width={activeResizeSize?.width ?? width}\n            xstyle={s.wrapper}\n            style={{\n              height: activeResizeSize?.height ?? height,\n              minHeight,\n              minWidth,\n              width: activeResizeSize?.width,\n              ...semanticStyles?.panel,\n            }}\n          >\n            {placement === 'bottomRight' && <ToastDodge />}\n            {resizable &&\n              resizeHandles.map((handle) => (\n                <div\n                  aria-hidden\n                  data-floating-panel-resize-handle={handle}\n                  key={handle}\n                  {...styleProps(\n                    [s.resizeHandle, getResizeHandleClassName(s, handle)],\n                    classNames?.resizeHandle,\n                    semanticStyles?.resizeHandle,\n                  )}\n                  onPointerDown={handleResizeStart(handle)}\n                />\n              ))}\n            {showHeader && (\n              <ModalHeaderImpl\n                className={classNames?.header}\n                style={semanticStyles?.header}\n                xstyle={s.header}\n              >\n                {title !== undefined ? (\n                  <ModalTitleImpl\n                    className={classNames?.title}\n                    style={semanticStyles?.title}\n                    xstyle={s.title}\n                  >\n                    {title}\n                  </ModalTitleImpl>\n                ) : (\n                  <span />\n                )}\n                <div {...stylex.props(s.headerActions)}>\n                  {actions && (\n                    <div\n                      {...styleProps(s.actions, classNames?.actions, semanticStyles?.actions)}\n                    >\n                      {actions}\n                    </div>\n                  )}\n                  {closable && (\n                    <ModalCloseImpl\n                      aria-label={closeLabel}\n                      className={classNames?.close}\n                      style={semanticStyles?.close}\n                      xstyle={s.close}\n                    >\n                      {closeIcon ?? <X size={16} />}\n                    </ModalCloseImpl>\n                  )}\n                </div>\n              </ModalHeaderImpl>\n            )}\n            <ModalContentImpl\n              className={classNames?.body}\n              style={semanticStyles?.body}\n              xstyle={s.body}\n            >\n              {children}\n            </ModalContentImpl>\n            {footer && (\n              <ModalFooterImpl\n                className={classNames?.footer}\n                style={semanticStyles?.footer}\n                xstyle={s.footer}\n              >\n                {footer}\n              </ModalFooterImpl>\n            )}\n          </ModalPopupImpl>\n        </ModalPortal>\n      </ModalRoot>\n    );\n  },\n);\n\nFloatingPanel.displayName = 'FloatingPanel';\n\nexport { FloatingPanel };\n"],"mappings":"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"}
+{"version":3,"file":"FloatingPanel.mjs","names":["clsx"],"sources":["../../src/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { X } from 'lucide-react';\nimport type { MotionProps } from 'motion/react';\nimport type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { ModalRootProps } from '../Modal';\nimport { ModalBackdrop, ModalPortal, ModalRoot } from '../Modal';\nimport {\n  ModalCloseImpl,\n  ModalContentImpl,\n  ModalFooterImpl,\n  ModalHeaderImpl,\n  ModalPopupImpl,\n  ModalTitleImpl,\n} from '../Modal/atoms';\nimport { styles } from './style';\nimport { ToastDodge } from './ToastDodge';\nimport type {\n  FloatingPanelOffset,\n  FloatingPanelPlacement,\n  FloatingPanelProps,\n  FloatingPanelResizeHandle,\n  FloatingPanelSize,\n} from './type';\n\nconst DEFAULT_MIN_HEIGHT = 180;\nconst DEFAULT_MIN_WIDTH = 320;\n\ninterface InternalFloatingPanelSize extends FloatingPanelSize {\n  sourceHeight?: number | string;\n  sourceWidth?: number | string;\n}\n\nconst defaultMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: 12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: 12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst topMotionProps: MotionProps = {\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\n  exit: {\n    opacity: 0,\n    scale: 0.98,\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\n    y: -12,\n  },\n  initial: { opacity: 0, scale: 0.98, y: -12 },\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\n};\n\nconst resolveOffset = (offset: FloatingPanelOffset) => {\n  if (typeof offset === 'object') {\n    return {\n      x: offset.x ?? 8,\n      y: offset.y ?? 8,\n    };\n  }\n\n  return { x: offset, y: offset };\n};\n\nconst getPlacementStyle = (\n  placement: FloatingPanelPlacement,\n  offset: FloatingPanelOffset,\n): CSSProperties => {\n  const { x, y } = resolveOffset(offset);\n  const isTop = placement.startsWith('top');\n  const isLeft = placement.endsWith('Left');\n\n  const px = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\n  const blockInset = `calc(${px(y)} + var(--floating-panel-reserve-block-end, 0px))`;\n  const inlineInset = `calc(${px(x)} + var(--floating-panel-reserve-inline-end, 0px))`;\n\n  return {\n    alignItems: isTop ? 'flex-start' : 'flex-end',\n    justifyContent: isLeft ? 'flex-start' : 'flex-end',\n    paddingBlockEnd: isTop ? undefined : blockInset,\n    paddingBlockStart: isTop ? blockInset : undefined,\n    paddingInlineEnd: isLeft ? undefined : inlineInset,\n    paddingInlineStart: isLeft ? inlineInset : undefined,\n  };\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\n\nconst getViewportMaxSize = () => ({\n  height: Math.max(DEFAULT_MIN_HEIGHT, window.innerHeight - 16),\n  width: Math.max(DEFAULT_MIN_WIDTH, window.innerWidth - 16),\n});\n\nconst getResizeHandles = (placement: FloatingPanelPlacement): FloatingPanelResizeHandle[] => {\n  switch (placement) {\n    case 'bottomLeft': {\n      return ['top', 'right', 'topRight'];\n    }\n    case 'topLeft': {\n      return ['bottom', 'right', 'bottomRight'];\n    }\n    case 'topRight': {\n      return ['bottom', 'left', 'bottomLeft'];\n    }\n    default: {\n      return ['top', 'left', 'topLeft'];\n    }\n  }\n};\n\nconst getResizeHandleClassName = (s: typeof styles, handle: FloatingPanelResizeHandle) => {\n  const handleClassMap = {\n    bottom: s.resizeHandleBottom,\n    bottomLeft: s.resizeHandleBottomLeft,\n    bottomRight: s.resizeHandleBottomRight,\n    left: s.resizeHandleLeft,\n    right: s.resizeHandleRight,\n    top: s.resizeHandleTop,\n    topLeft: s.resizeHandleTopLeft,\n    topRight: s.resizeHandleTopRight,\n  };\n\n  return handleClassMap[handle];\n};\n\nconst resolveResizeSize = ({\n  handle,\n  maxHeight,\n  maxWidth,\n  minHeight,\n  minWidth,\n  startHeight,\n  startWidth,\n  startX,\n  startY,\n  x,\n  y,\n}: {\n  handle: FloatingPanelResizeHandle;\n  maxHeight: number;\n  maxWidth: number;\n  minHeight: number;\n  minWidth: number;\n  startHeight: number;\n  startWidth: number;\n  startX: number;\n  startY: number;\n  x: number;\n  y: number;\n}): FloatingPanelSize => {\n  const deltaX = x - startX;\n  const deltaY = y - startY;\n  const growsLeft = handle.includes('Left') || handle === 'left';\n  const growsRight = handle.includes('Right') || handle === 'right';\n  const growsTop = handle.includes('top') || handle === 'top';\n  const growsBottom = handle.includes('bottom') || handle === 'bottom';\n\n  const nextWidth = growsLeft ? startWidth - deltaX : growsRight ? startWidth + deltaX : startWidth;\n  const nextHeight = growsTop\n    ? startHeight - deltaY\n    : growsBottom\n      ? startHeight + deltaY\n      : startHeight;\n\n  return {\n    height: clamp(nextHeight, minHeight, maxHeight),\n    width: clamp(nextWidth, minWidth, maxWidth),\n  };\n};\n\nconst FloatingPanel = memo<FloatingPanelProps>(\n  ({\n    afterClose,\n    ariaLabel,\n    children,\n    className,\n    classNames,\n    closable = true,\n    closeIcon,\n    closeLabel = 'Close',\n    defaultOpen,\n    actions,\n    footer,\n    getContainer,\n    height,\n    keyboard = true,\n    mask = false,\n    maskClosable = true,\n    maxHeight,\n    maxWidth,\n    minHeight = DEFAULT_MIN_HEIGHT,\n    minWidth = DEFAULT_MIN_WIDTH,\n    modal = false,\n    motionProps,\n    offset = 8,\n    onClose,\n    onOpenChange,\n    onResize,\n    onResizeEnd,\n    open,\n    placement = 'bottomRight',\n    resizable = true,\n    styles: semanticStyles,\n    title,\n    width = 640,\n    zIndex,\n  }) => {\n    const s = styles;\n    const isTop = placement.startsWith('top');\n    const container = getContainer === false ? undefined : getContainer;\n    const [resizeSize, setResizeSize] = useState<InternalFloatingPanelSize>();\n    const latestResizeSizeRef = useRef<FloatingPanelSize | undefined>(undefined);\n    const resizeCleanupRef = useRef<(() => void) | undefined>(undefined);\n    const activeResizeSize =\n      resizeSize?.sourceWidth === width && resizeSize.sourceHeight === height\n        ? resizeSize\n        : undefined;\n\n    useEffect(\n      () => () => {\n        resizeCleanupRef.current?.();\n      },\n      [],\n    );\n\n    const popupStyle = useMemo(\n      () => ({\n        ...getPlacementStyle(placement, offset),\n        ...semanticStyles?.wrapper,\n      }),\n      [offset, placement, semanticStyles?.wrapper],\n    );\n\n    const handleOpenChange = useCallback<NonNullable<ModalRootProps['onOpenChange']>>(\n      (nextOpen, eventDetails) => {\n        if (!nextOpen) {\n          if (keyboard === false && eventDetails.reason === 'escape-key') return;\n          if (maskClosable === false && eventDetails.reason === 'outside-press') return;\n          onClose?.();\n        }\n\n        onOpenChange?.(nextOpen, eventDetails);\n      },\n      [keyboard, maskClosable, onClose, onOpenChange],\n    );\n\n    const showHeader = title !== undefined || actions !== undefined || closable;\n    const resolvedMotionProps = motionProps ?? (isTop ? topMotionProps : defaultMotionProps);\n    const resizeHandles = useMemo(() => getResizeHandles(placement), [placement]);\n\n    const handleResizeStart = useCallback(\n      (handle: FloatingPanelResizeHandle) => (event: ReactPointerEvent<HTMLDivElement>) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const panel = event.currentTarget.parentElement;\n        if (!panel) return;\n\n        const rect = panel.getBoundingClientRect();\n        const viewportMaxSize = getViewportMaxSize();\n        const resolvedMaxWidth = Math.max(minWidth, maxWidth ?? viewportMaxSize.width);\n        const resolvedMaxHeight = Math.max(minHeight, maxHeight ?? viewportMaxSize.height);\n        const startX = event.clientX;\n        const startY = event.clientY;\n\n        const handleResizeMove = (moveEvent: PointerEvent) => {\n          const nextSize = resolveResizeSize({\n            handle,\n            maxHeight: resolvedMaxHeight,\n            maxWidth: resolvedMaxWidth,\n            minHeight,\n            minWidth,\n            startHeight: rect.height,\n            startWidth: rect.width,\n            startX,\n            startY,\n            x: moveEvent.clientX,\n            y: moveEvent.clientY,\n          });\n\n          const nextState = { ...nextSize, sourceHeight: height, sourceWidth: width };\n          latestResizeSizeRef.current = nextSize;\n          setResizeSize(nextState);\n          onResize?.(nextSize);\n        };\n\n        const handleResizeEnd = () => {\n          resizeCleanupRef.current?.();\n          resizeCleanupRef.current = undefined;\n\n          if (latestResizeSizeRef.current) onResizeEnd?.(latestResizeSizeRef.current);\n        };\n\n        resizeCleanupRef.current?.();\n        window.addEventListener('pointermove', handleResizeMove);\n        window.addEventListener('pointerup', handleResizeEnd);\n        resizeCleanupRef.current = () => {\n          window.removeEventListener('pointermove', handleResizeMove);\n          window.removeEventListener('pointerup', handleResizeEnd);\n        };\n      },\n      [height, maxHeight, maxWidth, minHeight, minWidth, onResize, onResizeEnd, width],\n    );\n\n    return (\n      <ModalRoot\n        defaultOpen={defaultOpen}\n        modal={modal}\n        open={open}\n        zIndex={zIndex}\n        onExitComplete={afterClose}\n        onOpenChange={handleOpenChange}\n      >\n        <ModalPortal container={container}>\n          {mask && (\n            <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n          )}\n          <ModalPopupImpl\n            aria-label={ariaLabel}\n            className={classNames?.wrapper}\n            motionProps={resolvedMotionProps}\n            panelClassName={clsx(className, classNames?.panel)}\n            panelXstyle={[s.panel, isTop && s.panelTop]}\n            popupStyle={popupStyle}\n            width={activeResizeSize?.width ?? width}\n            xstyle={s.wrapper}\n            style={{\n              height: activeResizeSize?.height ?? height,\n              minHeight,\n              minWidth,\n              width: activeResizeSize?.width,\n              ...semanticStyles?.panel,\n            }}\n          >\n            {placement === 'bottomRight' && <ToastDodge />}\n            {resizable &&\n              resizeHandles.map((handle) => (\n                <div\n                  aria-hidden\n                  data-floating-panel-resize-handle={handle}\n                  key={handle}\n                  {...styleProps(\n                    [s.resizeHandle, getResizeHandleClassName(s, handle)],\n                    classNames?.resizeHandle,\n                    semanticStyles?.resizeHandle,\n                  )}\n                  onPointerDown={handleResizeStart(handle)}\n                />\n              ))}\n            {showHeader && (\n              <ModalHeaderImpl\n                className={classNames?.header}\n                style={semanticStyles?.header}\n                xstyle={s.header}\n              >\n                {title !== undefined ? (\n                  <ModalTitleImpl\n                    className={classNames?.title}\n                    style={semanticStyles?.title}\n                    xstyle={s.title}\n                  >\n                    {title}\n                  </ModalTitleImpl>\n                ) : (\n                  <span />\n                )}\n                <div {...stylex.props(s.headerActions)}>\n                  {actions && (\n                    <div\n                      {...styleProps(s.actions, classNames?.actions, semanticStyles?.actions)}\n                    >\n                      {actions}\n                    </div>\n                  )}\n                  {closable && (\n                    <ModalCloseImpl\n                      aria-label={closeLabel}\n                      className={classNames?.close}\n                      style={semanticStyles?.close}\n                      xstyle={s.close}\n                    >\n                      {closeIcon ?? <X size={16} />}\n                    </ModalCloseImpl>\n                  )}\n                </div>\n              </ModalHeaderImpl>\n            )}\n            <ModalContentImpl\n              className={classNames?.body}\n              style={semanticStyles?.body}\n              xstyle={s.body}\n            >\n              {children}\n            </ModalContentImpl>\n            {footer && (\n              <ModalFooterImpl\n                className={classNames?.footer}\n                style={semanticStyles?.footer}\n                xstyle={s.footer}\n              >\n                {footer}\n              </ModalFooterImpl>\n            )}\n          </ModalPopupImpl>\n        </ModalPortal>\n      </ModalRoot>\n    );\n  },\n);\n\nFloatingPanel.displayName = 'FloatingPanel';\n\nexport { FloatingPanel };\n"],"mappings":";;;;;;;;;;;AAeA,MAAM,qBAAqB;AAC3B,MAAM,oBAAoB;AAK1B,MAAM,qBAAkC;CACtC,SAAS;EACP,SAAS;EACT,OAAO;EACP,GAAG;EACH,GAAG;CACL;CACA,MAAM;EACJ,SAAS;EACT,OAAO;EACP,YAAY;GACV,UAAU;GACV,MAAM;IAAC;IAAK;IAAG;IAAG;GAAC;EACrB;EACA,GAAG;CACL;CACA,SAAS;EACP,SAAS;EACT,OAAO;EACP,GAAG;CACL;CACA,YAAY;EACV,UAAU;EACV,MAAM;GAAC;GAAM;GAAM;GAAG;EAAC;CACzB;AACF;AACA,MAAM,iBAA8B;CAClC,SAAS;EACP,SAAS;EACT,OAAO;EACP,GAAG;EACH,GAAG;CACL;CACA,MAAM;EACJ,SAAS;EACT,OAAO;EACP,YAAY;GACV,UAAU;GACV,MAAM;IAAC;IAAK;IAAG;IAAG;GAAC;EACrB;EACA,GAAG;CACL;CACA,SAAS;EACP,SAAS;EACT,OAAO;EACP,GAAG;CACL;CACA,YAAY;EACV,UAAU;EACV,MAAM;GAAC;GAAM;GAAM;GAAG;EAAC;CACzB;AACF;AACA,MAAM,iBAAiB,WAAgC;CACrD,IAAI,OAAO,WAAW,UACpB,OAAO;EACL,GAAG,OAAO,KAAK;EACf,GAAG,OAAO,KAAK;CACjB;CAEF,OAAO;EACL,GAAG;EACH,GAAG;CACL;AACF;AACA,MAAM,qBAAqB,WAAmC,WAA+C;CAC3G,MAAM,EACJ,GACA,MACE,cAAc,MAAM;CACxB,MAAM,QAAQ,UAAU,WAAW,KAAK;CACxC,MAAM,SAAS,UAAU,SAAS,MAAM;CACxC,MAAM,MAAM,UAA2B,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;CAClF,MAAM,aAAa,QAAQ,GAAG,CAAC,EAAE;CACjC,MAAM,cAAc,QAAQ,GAAG,CAAC,EAAE;CAClC,OAAO;EACL,YAAY,QAAQ,eAAe;EACnC,gBAAgB,SAAS,eAAe;EACxC,iBAAiB,QAAQ,KAAA,IAAY;EACrC,mBAAmB,QAAQ,aAAa,KAAA;EACxC,kBAAkB,SAAS,KAAA,IAAY;EACvC,oBAAoB,SAAS,cAAc,KAAA;CAC7C;AACF;AACA,MAAM,SAAS,OAAe,KAAa,QAAgB,KAAK,IAAI,KAAK,IAAI,OAAO,GAAG,GAAG,GAAG;AAC7F,MAAM,4BAA4B;CAChC,QAAQ,KAAK,IAAI,oBAAoB,OAAO,cAAc,EAAE;CAC5D,OAAO,KAAK,IAAI,mBAAmB,OAAO,aAAa,EAAE;AAC3D;AACA,MAAM,oBAAoB,cAAmE;CAC3F,QAAQ,WAAR;EACE,KAAK,cAED,OAAO;GAAC;GAAO;GAAS;EAAU;EAEtC,KAAK,WAED,OAAO;GAAC;GAAU;GAAS;EAAa;EAE5C,KAAK,YAED,OAAO;GAAC;GAAU;GAAQ;EAAY;EAE1C,SAEI,OAAO;GAAC;GAAO;GAAQ;EAAS;CAEtC;AACF;AACA,MAAM,4BAA4B,GAAkB,WAAsC;CAWxF,OAAO;EATL,QAAQ,EAAE;EACV,YAAY,EAAE;EACd,aAAa,EAAE;EACf,MAAM,EAAE;EACR,OAAO,EAAE;EACT,KAAK,EAAE;EACP,SAAS,EAAE;EACX,UAAU,EAAE;CAEM,EAAE;AACxB;AACA,MAAM,qBAAqB,EACzB,QACA,WACA,UACA,WACA,UACA,aACA,YACA,QACA,QACA,GACA,QAauB;CACvB,MAAM,SAAS,IAAI;CACnB,MAAM,SAAS,IAAI;CACnB,MAAM,YAAY,OAAO,SAAS,MAAM,KAAK,WAAW;CACxD,MAAM,aAAa,OAAO,SAAS,OAAO,KAAK,WAAW;CAC1D,MAAM,WAAW,OAAO,SAAS,KAAK,KAAK,WAAW;CACtD,MAAM,cAAc,OAAO,SAAS,QAAQ,KAAK,WAAW;CAC5D,MAAM,YAAY,YAAY,aAAa,SAAS,aAAa,aAAa,SAAS;CACvF,MAAM,aAAa,WAAW,cAAc,SAAS,cAAc,cAAc,SAAS;CAC1F,OAAO;EACL,QAAQ,MAAM,YAAY,WAAW,SAAS;EAC9C,OAAO,MAAM,WAAW,UAAU,QAAQ;CAC5C;AACF;AACA,MAAM,gBAAgB,MAA0B,EAC9C,YACA,WACA,UACA,WACA,YACA,WAAW,MACX,WACA,aAAa,SACb,aACA,SACA,QACA,cACA,QACA,WAAW,MACX,OAAO,OACP,eAAe,MACf,WACA,UACA,YAAY,oBACZ,WAAW,mBACX,QAAQ,OACR,aACA,SAAS,GACT,SACA,cACA,UACA,aACA,MACA,YAAY,eACZ,YAAY,MACZ,QAAQ,gBACR,OACA,QAAQ,KACR,aACI;CACJ,MAAM,IAAI;CACV,MAAM,QAAQ,UAAU,WAAW,KAAK;CACxC,MAAM,YAAY,iBAAiB,QAAQ,KAAA,IAAY;CACvD,MAAM,CAAC,YAAY,iBAAiB,SAAoC;CACxE,MAAM,sBAAsB,OAAsC,KAAA,CAAS;CAC3E,MAAM,mBAAmB,OAAiC,KAAA,CAAS;CACnE,MAAM,mBAAmB,YAAY,gBAAgB,SAAS,WAAW,iBAAiB,SAAS,aAAa,KAAA;CAChH,sBAAsB;EACpB,iBAAiB,UAAU;CAC7B,GAAG,CAAC,CAAC;CACL,MAAM,aAAa,eAAe;EAChC,GAAG,kBAAkB,WAAW,MAAM;EACtC,GAAG,gBAAgB;CACrB,IAAI;EAAC;EAAQ;EAAW,gBAAgB;CAAO,CAAC;CAChD,MAAM,mBAAmB,aAA0D,UAAU,iBAAiB;EAC5G,IAAI,CAAC,UAAU;GACb,IAAI,aAAa,SAAS,aAAa,WAAW,cAAc;GAChE,IAAI,iBAAiB,SAAS,aAAa,WAAW,iBAAiB;GACvE,UAAU;EACZ;EACA,eAAe,UAAU,YAAY;CACvC,GAAG;EAAC;EAAU;EAAc;EAAS;CAAY,CAAC;CAClD,MAAM,aAAa,UAAU,KAAA,KAAa,YAAY,KAAA,KAAa;CACnE,MAAM,sBAAsB,gBAAgB,QAAQ,iBAAiB;CACrE,MAAM,gBAAgB,cAAc,iBAAiB,SAAS,GAAG,CAAC,SAAS,CAAC;CAC5E,MAAM,oBAAoB,aAAa,YAAuC,UAA6C;EACzH,MAAM,eAAe;EACrB,MAAM,gBAAgB;EACtB,MAAM,QAAQ,MAAM,cAAc;EAClC,IAAI,CAAC,OAAO;EACZ,MAAM,OAAO,MAAM,sBAAsB;EACzC,MAAM,kBAAkB,mBAAmB;EAC3C,MAAM,mBAAmB,KAAK,IAAI,UAAU,YAAY,gBAAgB,KAAK;EAC7E,MAAM,oBAAoB,KAAK,IAAI,WAAW,aAAa,gBAAgB,MAAM;EACjF,MAAM,SAAS,MAAM;EACrB,MAAM,SAAS,MAAM;EACrB,MAAM,oBAAoB,cAA4B;GACpD,MAAM,WAAW,kBAAkB;IACjC;IACA,WAAW;IACX,UAAU;IACV;IACA;IACA,aAAa,KAAK;IAClB,YAAY,KAAK;IACjB;IACA;IACA,GAAG,UAAU;IACb,GAAG,UAAU;GACf,CAAC;GACD,MAAM,YAAY;IAChB,GAAG;IACH,cAAc;IACd,aAAa;GACf;GACA,oBAAoB,UAAU;GAC9B,cAAc,SAAS;GACvB,WAAW,QAAQ;EACrB;EACA,MAAM,wBAAwB;GAC5B,iBAAiB,UAAU;GAC3B,iBAAiB,UAAU,KAAA;GAC3B,IAAI,oBAAoB,SAAS,cAAc,oBAAoB,OAAO;EAC5E;EACA,iBAAiB,UAAU;EAC3B,OAAO,iBAAiB,eAAe,gBAAgB;EACvD,OAAO,iBAAiB,aAAa,eAAe;EACpD,iBAAiB,gBAAgB;GAC/B,OAAO,oBAAoB,eAAe,gBAAgB;GAC1D,OAAO,oBAAoB,aAAa,eAAe;EACzD;CACF,GAAG;EAAC;EAAQ;EAAW;EAAU;EAAW;EAAU;EAAU;EAAa;CAAK,CAAC;CACnF,OAAO,oBAAC,WAAD;EAAwB;EAAoB;EAAa;EAAc;EAAQ,gBAAgB;EAAY,cAAc;EAC1H,UAAA,qBAAC,aAAD;GAAwB;GAAxB,UAAA,CACG,QAAQ,oBAAC,eAAD;IAAe,WAAW,YAAY;IAAU,OAAO,gBAAgB;GAAW,CAAA,GAC3F,qBAAC,gBAAD;IAAgB,cAAY;IAAW,WAAW,YAAY;IAAS,aAAa;IAAqB,gBAAgBA,OAAK,WAAW,YAAY,KAAK;IAAG,aAAa,CAAC,EAAE,OAAO,SAAS,EAAE,QAAQ;IAAe;IAAY,OAAO,kBAAkB,SAAS;IAAO,QAAQ,EAAE;IAAS,OAAO;KACvS,QAAQ,kBAAkB,UAAU;KACpC;KACA;KACA,OAAO,kBAAkB;KACzB,GAAG,gBAAgB;IACrB;IANI,UAAA;KAOG,cAAc,iBAAiB,oBAAC,YAAD,CAAa,CAAA;KAC5C,aAAa,cAAc,KAAI,WAAU,oBAAC,OAAD;MAAK,eAAA;MAAY,qCAAmC;MAAqB,GAAI,WAAW,CAAC,EAAE,cAAc,yBAAyB,GAAG,MAAM,CAAC,GAAG,YAAY,cAAc,gBAAgB,YAAY;MAAG,eAAe,kBAAkB,MAAM;KAAI,GAAlL,MAAkL,CAAC;KAC7R,cAAc,qBAAC,iBAAD;MAAiB,WAAW,YAAY;MAAQ,OAAO,gBAAgB;MAAQ,QAAQ,EAAE;MAAzF,UAAA,CACV,UAAU,KAAA,IAAY,oBAAC,gBAAD;OAAgB,WAAW,YAAY;OAAO,OAAO,gBAAgB;OAAO,QAAQ,EAAE;OACxG,UAAA;MACa,CAAA,IAAI,oBAAC,QAAD,CAAO,CAAA,GAC7B,qBAAC,OAAD;OAAK,GAAI,OAAO,MAAM,EAAE,aAAa;OAArC,UAAA,CACG,WAAW,oBAAC,OAAD;QAAK,GAAI,WAAW,EAAE,SAAS,YAAY,SAAS,gBAAgB,OAAO;QAClF,UAAA;OACE,CAAA,GACN,YAAY,oBAAC,gBAAD;QAAgB,cAAY;QAAY,WAAW,YAAY;QAAO,OAAO,gBAAgB;QAAO,QAAQ,EAAE;QACtH,UAAA,aAAa,oBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;OACd,CAAA,CACf;MACU,CAAA,CAAA;;KACnB,oBAAC,kBAAD;MAAkB,WAAW,YAAY;MAAM,OAAO,gBAAgB;MAAM,QAAQ,EAAE;MACnF;KACe,CAAA;KACjB,UAAU,oBAAC,iBAAD;MAAiB,WAAW,YAAY;MAAQ,OAAO,gBAAgB;MAAQ,QAAQ,EAAE;MAC/F,UAAA;KACc,CAAA;IACL;GACL,CAAA,CAAA;;CACJ,CAAA;AACjB,CAAC;AACD,cAAc,cAAc"}

package/es/FormKit/List.mjs

@@ -9,7 +9,7 @@ import { useStoreSelector } from "./useStoreSelector.mjs";
 import FormField from "./Field.mjs";
 import { cloneElement, createElement, memo, useCallback, useRef } 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";
 import { PlusIcon, XIcon } from "lucide-react";
 //#region src/FormKit/List.tsx
@@ -77,7 +77,7 @@ const FormList = memo(({ addText, children, columns, emptyText, name, newItem })
 			key: field.key,
 			style: { gridTemplateColumns }
 		}, columns.map((column) => /* @__PURE__ */ jsx("div", {
-			className: clsx("lobe-form-list-cell", stylex.props(listStyles.cell).className),
+			className: clsx$1("lobe-form-list-cell", stylex.props(listStyles.cell).className),
 			children: /* @__PURE__ */ jsx(FormField, {
 				bare: true,
 				name: `${field.name}.${column.name}`,

package/es/FormKit/List.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.mjs","names":["formMessages"],"sources":["../../src/FormKit/List.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { PlusIcon, XIcon } from 'lucide-react';\nimport { cloneElement, memo, type ReactElement, type ReactNode, useCallback, useRef } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport formMessages from '@/i18n/resources/en/form';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { useFormKitContext } from './context';\nimport FormField from './Field';\nimport { getInternals } from './instance';\nimport type { FieldValidate } from './schema';\nimport { listStyles } from './style';\nimport { useStoreSelector } from './useStoreSelector';\n\nexport interface FormListField {\n  index: number;\n  key: string;\n  name: string;\n}\n\nexport interface FormListRenderProps {\n  add: (item?: unknown) => void;\n  fields: FormListField[];\n  move: (from: number, to: number) => void;\n  remove: (index: number) => void;\n}\n\nexport interface FormListColumn {\n  children: ReactElement;\n  flex?: number;\n  name: string;\n  required?: boolean | string;\n  title?: ReactNode;\n  validate?: FieldValidate;\n}\n\nexport interface FormListProps {\n  addText?: ReactNode;\n  children?: (props: FormListRenderProps) => ReactNode;\n  columns?: FormListColumn[];\n  emptyText?: ReactNode;\n  name: string;\n  newItem?: unknown;\n}\n\nlet rowSeed = 0;\nconst nextRowKey = () => `row-${(rowSeed += 1)}`;\n\nconst createItem = (newItem: unknown) =>\n  typeof newItem === 'function'\n    ? newItem()\n    : newItem && typeof newItem === 'object'\n      ? structuredClone(newItem)\n      : (newItem ?? {});\n\nconst labelFor = (column: FormListColumn, index: number) =>\n  (column.children as ReactElement<{ 'aria-label'?: string }>).props['aria-label'] ??\n  (typeof column.title === 'string' ? `${column.title} ${index + 1}` : undefined);\n\nconst FormList = memo<FormListProps>(({ addText, children, columns, emptyText, name, newItem }) => {\n  const { form } = useFormKitContext();\n  const { engine } = getInternals(form);\n  const { t } = useTranslation(formMessages);\n  const length = useStoreSelector(engine, (e) => {\n    const value = e.getValue(name);\n    return Array.isArray(value) ? value.length : 0;\n  });\n\n  const keysRef = useRef<string[]>([]);\n  const keys = keysRef.current;\n  if (keys.length > length) keys.length = length;\n  while (keys.length < length) keys.push(nextRowKey());\n\n  const add = useCallback(\n    (item?: unknown) => {\n      keysRef.current.push(nextRowKey());\n      engine.pushItem(name, item);\n    },\n    [engine, name],\n  );\n  const remove = useCallback(\n    (index: number) => {\n      keysRef.current.splice(index, 1);\n      engine.removeItem(name, index);\n    },\n    [engine, name],\n  );\n  const move = useCallback(\n    (from: number, to: number) => {\n      const [moved] = keysRef.current.splice(from, 1);\n      keysRef.current.splice(to, 0, moved);\n      engine.moveItem(name, from, to);\n    },\n    [engine, name],\n  );\n\n  const fields = keys.map((key, index) => ({ index, key, name: `${name}.${index}` }));\n\n  if (children || !columns) return <>{children?.({ add, fields, move, remove })}</>;\n\n  const gridTemplateColumns = `${columns.map((c) => `minmax(0, ${c.flex ?? 1}fr)`).join(' ')} 36px`;\n  const addButton = (\n    <button\n      {...stylex.props(listStyles.add)}\n      type=\"button\"\n      onClick={() => add(createItem(newItem))}\n    >\n      <PlusIcon size={14} />\n      {addText ?? t('form.list.add')}\n    </button>\n  );\n\n  return (\n    <div {...stylex.props(listStyles.table)}>\n      <div {...stylex.props(listStyles.head)} style={{ gridTemplateColumns }}>\n        {columns.map((column) => (\n          <div {...stylex.props(listStyles.title)} key={column.name}>\n            {column.title}\n          </div>\n        ))}\n      </div>\n      {fields.length === 0 ? (\n        <div {...stylex.props(listStyles.empty)}>\n          <span>{emptyText ?? t('form.list.empty')}</span>\n          {addButton}\n        </div>\n      ) : (\n        <>\n          {fields.map((field) => (\n            <div {...stylex.props(listStyles.row)} key={field.key} style={{ gridTemplateColumns }}>\n              {columns.map((column) => (\n                <div\n                  className={clsx('lobe-form-list-cell', stylex.props(listStyles.cell).className)}\n                  key={column.name}\n                >\n                  <FormField\n                    bare\n                    name={`${field.name}.${column.name}`}\n                    required={column.required}\n                    validate={column.validate}\n                  >\n                    {cloneElement(column.children as ReactElement<any>, {\n                      'aria-label': labelFor(column, field.index),\n                    })}\n                  </FormField>\n                </div>\n              ))}\n              <ActionIcon\n                {...stylex.props(listStyles.remove)}\n                aria-label={t('form.list.remove')}\n                icon={XIcon}\n                size={'small'}\n                title={t('form.list.remove')}\n                onClick={() => remove(field.index)}\n              />\n            </div>\n          ))}\n          <div {...stylex.props(listStyles.foot)}>{addButton}</div>\n        </>\n      )}\n    </div>\n  );\n});\n\nFormList.displayName = 'FormList';\n\nexport default FormList;\n"],"mappings":";;;;;;;;;;;;;;;AA2CA,IAAI,UAAU;AACd,MAAM,mBAAmB,OAAO,WAAW;AAC3C,MAAM,cAAc,YAAqB,OAAO,YAAY,aAAa,QAAQ,IAAI,WAAW,OAAO,YAAY,WAAW,gBAAgB,OAAO,IAAI,WAAW,CAAC;AACrK,MAAM,YAAY,QAAwB,UAAmB,OAAO,SAEhE,MAAM,kBAAkB,OAAO,OAAO,UAAU,WAAW,GAAG,OAAO,MAAM,GAAG,QAAQ,MAAM,KAAA;AAChG,MAAM,WAAW,MAAqB,EACpC,SACA,UACA,SACA,WACA,MACA,cACI;CACJ,MAAM,EACJ,SACE,kBAAkB;CACtB,MAAM,EACJ,WACE,aAAa,IAAI;CACrB,MAAM,EACJ,MACE,eAAeA,YAAY;CAC/B,MAAM,SAAS,iBAAiB,SAAQ,MAAK;EAC3C,MAAM,QAAQ,EAAE,SAAS,IAAI;EAC7B,OAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS;CAC/C,CAAC;CACD,MAAM,UAAU,OAAiB,CAAC,CAAC;CACnC,MAAM,OAAO,QAAQ;CACrB,IAAI,KAAK,SAAS,QAAQ,KAAK,SAAS;CACxC,OAAO,KAAK,SAAS,QAAQ,KAAK,KAAK,WAAW,CAAC;CACnD,MAAM,MAAM,aAAa,SAAmB;EAC1C,QAAQ,QAAQ,KAAK,WAAW,CAAC;EACjC,OAAO,SAAS,MAAM,IAAI;CAC5B,GAAG,CAAC,QAAQ,IAAI,CAAC;CACjB,MAAM,SAAS,aAAa,UAAkB;EAC5C,QAAQ,QAAQ,OAAO,OAAO,CAAC;EAC/B,OAAO,WAAW,MAAM,KAAK;CAC/B,GAAG,CAAC,QAAQ,IAAI,CAAC;CACjB,MAAM,OAAO,aAAa,MAAc,OAAe;EACrD,MAAM,CAAC,SAAS,QAAQ,QAAQ,OAAO,MAAM,CAAC;EAC9C,QAAQ,QAAQ,OAAO,IAAI,GAAG,KAAK;EACnC,OAAO,SAAS,MAAM,MAAM,EAAE;CAChC,GAAG,CAAC,QAAQ,IAAI,CAAC;CACjB,MAAM,SAAS,KAAK,KAAK,KAAK,WAAW;EACvC;EACA;EACA,MAAM,GAAG,KAAK,GAAG;CACnB,EAAE;CACF,IAAI,YAAY,CAAC,SAAS,OAAO,oBAAA,YAAA,EAAA,UAAG,WAAW;EAC3C;EACA;EACA;EACA;CACF,CAAC,EAAI,CAAA;CACP,MAAM,sBAAsB,GAAG,QAAQ,KAAI,MAAK,aAAa,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,KAAK,GAAG,EAAE;CACzF,MAAM,YAAY,qBAAC,UAAD;EAAQ,GAAI,OAAO,MAAM,WAAW,GAAG;EAAG,MAAK;EAAS,eAAe,IAAI,WAAW,OAAO,CAAC;EAA9F,UAAA,CACd,oBAAC,UAAD,EAAU,MAAM,GAAK,CAAA,GACpB,WAAW,EAAE,eAAe,CACvB;;CACV,OAAO,qBAAC,OAAD;EAAK,GAAI,OAAO,MAAM,WAAW,KAAK;EAAtC,UAAA,CACH,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,WAAW,IAAI;GAAG,OAAO,EAC/C,oBACF;GACK,UAAA,QAAQ,KAAI,WAAU,8BAAC,OAAD;IAAK,GAAI,OAAO,MAAM,WAAW,KAAK;IAAG,KAAK,OAAO;GAErE,GADF,OAAO,KACL,CAAC;EACL,CAAA,GACJ,OAAO,WAAW,IAAI,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,WAAW,KAAK;GAAtC,UAAA,CACnB,oBAAC,QAAD,EAAA,UAAO,aAAa,EAAE,iBAAiB,EAAQ,CAAA,GAC9C,SACE;EAAI,CAAA,IAAA,qBAAA,YAAA,EAAA,UAAA,CACN,OAAO,KAAI,UAAS,8BAAC,OAAD;GAAK,GAAI,OAAO,MAAM,WAAW,GAAG;GAAG,KAAK,MAAM;GAAK,OAAO,EACrF,oBACF;EASW,GARF,QAAQ,KAAI,WAAU,oBAAC,OAAD;GAAK,WAAW,KAAK,uBAAuB,OAAO,MAAM,WAAW,IAAI,CAAC,CAAC,SAAS;GACtG,UAAA,oBAAC,WAAD;IAAW,MAAA;IAAK,MAAM,GAAG,MAAM,KAAK,GAAG,OAAO;IAAQ,UAAU,OAAO;IAAU,UAAU,OAAO;IAC/F,UAAA,aAAa,OAAO,UAA+B,EAC1D,cAAc,SAAS,QAAQ,MAAM,KAAK,EAC5C,CAAC;GACgB,CAAA;EACR,GAN2G,OAAO,IAMlH,CAAC,GACR,oBAAC,YAAD;GAAY,GAAI,OAAO,MAAM,WAAW,MAAM;GAAG,cAAY,EAAE,kBAAkB;GAAG,MAAM;GAAO,MAAM;GAAS,OAAO,EAAE,kBAAkB;GAAG,eAAe,OAAO,MAAM,KAAK;EAAI,CAAA,CAChL,CAAC,GACR,oBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,WAAW,IAAI;GAAI,UAAA;EAAe,CAAA,CACxD,EAAA,CAAA,CACD;;AACT,CAAC;AACD,SAAS,cAAc"}
+{"version":3,"file":"List.mjs","names":["formMessages","clsx"],"sources":["../../src/FormKit/List.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { PlusIcon, XIcon } from 'lucide-react';\nimport { cloneElement, memo, type ReactElement, type ReactNode, useCallback, useRef } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport formMessages from '@/i18n/resources/en/form';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { useFormKitContext } from './context';\nimport FormField from './Field';\nimport { getInternals } from './instance';\nimport type { FieldValidate } from './schema';\nimport { listStyles } from './style';\nimport { useStoreSelector } from './useStoreSelector';\n\nexport interface FormListField {\n  index: number;\n  key: string;\n  name: string;\n}\n\nexport interface FormListRenderProps {\n  add: (item?: unknown) => void;\n  fields: FormListField[];\n  move: (from: number, to: number) => void;\n  remove: (index: number) => void;\n}\n\nexport interface FormListColumn {\n  children: ReactElement;\n  flex?: number;\n  name: string;\n  required?: boolean | string;\n  title?: ReactNode;\n  validate?: FieldValidate;\n}\n\nexport interface FormListProps {\n  addText?: ReactNode;\n  children?: (props: FormListRenderProps) => ReactNode;\n  columns?: FormListColumn[];\n  emptyText?: ReactNode;\n  name: string;\n  newItem?: unknown;\n}\n\nlet rowSeed = 0;\nconst nextRowKey = () => `row-${(rowSeed += 1)}`;\n\nconst createItem = (newItem: unknown) =>\n  typeof newItem === 'function'\n    ? newItem()\n    : newItem && typeof newItem === 'object'\n      ? structuredClone(newItem)\n      : (newItem ?? {});\n\nconst labelFor = (column: FormListColumn, index: number) =>\n  (column.children as ReactElement<{ 'aria-label'?: string }>).props['aria-label'] ??\n  (typeof column.title === 'string' ? `${column.title} ${index + 1}` : undefined);\n\nconst FormList = memo<FormListProps>(({ addText, children, columns, emptyText, name, newItem }) => {\n  const { form } = useFormKitContext();\n  const { engine } = getInternals(form);\n  const { t } = useTranslation(formMessages);\n  const length = useStoreSelector(engine, (e) => {\n    const value = e.getValue(name);\n    return Array.isArray(value) ? value.length : 0;\n  });\n\n  const keysRef = useRef<string[]>([]);\n  const keys = keysRef.current;\n  if (keys.length > length) keys.length = length;\n  while (keys.length < length) keys.push(nextRowKey());\n\n  const add = useCallback(\n    (item?: unknown) => {\n      keysRef.current.push(nextRowKey());\n      engine.pushItem(name, item);\n    },\n    [engine, name],\n  );\n  const remove = useCallback(\n    (index: number) => {\n      keysRef.current.splice(index, 1);\n      engine.removeItem(name, index);\n    },\n    [engine, name],\n  );\n  const move = useCallback(\n    (from: number, to: number) => {\n      const [moved] = keysRef.current.splice(from, 1);\n      keysRef.current.splice(to, 0, moved);\n      engine.moveItem(name, from, to);\n    },\n    [engine, name],\n  );\n\n  const fields = keys.map((key, index) => ({ index, key, name: `${name}.${index}` }));\n\n  if (children || !columns) return <>{children?.({ add, fields, move, remove })}</>;\n\n  const gridTemplateColumns = `${columns.map((c) => `minmax(0, ${c.flex ?? 1}fr)`).join(' ')} 36px`;\n  const addButton = (\n    <button\n      {...stylex.props(listStyles.add)}\n      type=\"button\"\n      onClick={() => add(createItem(newItem))}\n    >\n      <PlusIcon size={14} />\n      {addText ?? t('form.list.add')}\n    </button>\n  );\n\n  return (\n    <div {...stylex.props(listStyles.table)}>\n      <div {...stylex.props(listStyles.head)} style={{ gridTemplateColumns }}>\n        {columns.map((column) => (\n          <div {...stylex.props(listStyles.title)} key={column.name}>\n            {column.title}\n          </div>\n        ))}\n      </div>\n      {fields.length === 0 ? (\n        <div {...stylex.props(listStyles.empty)}>\n          <span>{emptyText ?? t('form.list.empty')}</span>\n          {addButton}\n        </div>\n      ) : (\n        <>\n          {fields.map((field) => (\n            <div {...stylex.props(listStyles.row)} key={field.key} style={{ gridTemplateColumns }}>\n              {columns.map((column) => (\n                <div\n                  className={clsx('lobe-form-list-cell', stylex.props(listStyles.cell).className)}\n                  key={column.name}\n                >\n                  <FormField\n                    bare\n                    name={`${field.name}.${column.name}`}\n                    required={column.required}\n                    validate={column.validate}\n                  >\n                    {cloneElement(column.children as ReactElement<any>, {\n                      'aria-label': labelFor(column, field.index),\n                    })}\n                  </FormField>\n                </div>\n              ))}\n              <ActionIcon\n                {...stylex.props(listStyles.remove)}\n                aria-label={t('form.list.remove')}\n                icon={XIcon}\n                size={'small'}\n                title={t('form.list.remove')}\n                onClick={() => remove(field.index)}\n              />\n            </div>\n          ))}\n          <div {...stylex.props(listStyles.foot)}>{addButton}</div>\n        </>\n      )}\n    </div>\n  );\n});\n\nFormList.displayName = 'FormList';\n\nexport default FormList;\n"],"mappings":"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"}

package/es/Highlighter/FullFeatured.mjs

@@ -11,7 +11,7 @@ import { LangSelect } from "./LangSelect.mjs";
 import { bodyStyles, headerFlexProps, headerStyles, rootClassName, rootStyles } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { ChevronDown, ChevronRight } from "lucide-react";
 //#region src/Highlighter/FullFeatured.tsx
 const HeaderLanguage = memo(({ allowChangeLanguage, displayName, fileName, filetype, icon, language, setLanguage, showLanguage }) => {
@@ -127,7 +127,7 @@ const HighlighterFullFeatured = memo(({ content, language, setLanguage, showLang
 			})]
 		}), /* @__PURE__ */ jsx(FlexBasic_default, {
 			height: expand ? void 0 : 0,
-			...styleProps(bodyStyles(expand, variant), clsx(expand && "ant-highlighter-highlighter-body-expand", classNames?.body), customStyles?.body),
+			...styleProps(bodyStyles(expand, variant), clsx$1(expand && "ant-highlighter-highlighter-body-expand", classNames?.body), customStyles?.body),
 			children
 		})]
 	});

package/es/Highlighter/FullFeatured.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FullFeatured.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName, getCodeLanguageFilename } from '@/Highlighter/const';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport LangSelect from './LangSelect';\nimport {\n  bodyStyles,\n  expandCls,\n  headerFlexProps,\n  headerStyles,\n  rootClassName,\n  rootStyles,\n} from './style';\nimport { type HighlighterProps } from './type';\n\ninterface HeaderLanguageProps {\n  allowChangeLanguage: boolean;\n  displayName: string;\n  fileName?: string;\n  filetype: string;\n  icon?: ReactNode;\n  language: string;\n  setLanguage?: (language: string) => void;\n  showLanguage?: boolean;\n}\n\nconst HeaderLanguage = memo<HeaderLanguageProps>(\n  ({\n    allowChangeLanguage,\n    displayName,\n    fileName,\n    filetype,\n    icon,\n    language,\n    setLanguage,\n    showLanguage,\n  }) => {\n    if (!showLanguage) return null;\n\n    if (allowChangeLanguage && !fileName)\n      return <LangSelect value={language.toLowerCase()} onSelect={setLanguage} />;\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={'language-title'}\n        flex={1}\n        gap={4}\n        justify={'flex-start'}\n        paddingInline={8}\n      >\n        {icon || (\n          <MaterialFileTypeIcon\n            fallbackUnknownType={false}\n            filename={filetype}\n            size={18}\n            type={'file'}\n            variant={'raw'}\n          />\n        )}\n        <Text ellipsis fontSize={13}>\n          {displayName}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.allowChangeLanguage === next.allowChangeLanguage &&\n    prev.displayName === next.displayName &&\n    prev.fileName === next.fileName &&\n    prev.filetype === next.filetype &&\n    prev.icon === next.icon &&\n    prev.language === next.language &&\n    prev.setLanguage === next.setLanguage &&\n    prev.showLanguage === next.showLanguage,\n);\n\ninterface HighlighterFullFeaturedProps extends Omit<\n  HighlighterProps,\n  'children' | 'bodyRender' | 'enableTransformer'\n> {\n  content: string;\n  setLanguage?: (language: string) => void;\n}\n\nexport const HighlighterFullFeatured = memo<HighlighterFullFeaturedProps & { children: ReactNode }>(\n  ({\n    content,\n    language,\n    setLanguage,\n    showLanguage,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    allowChangeLanguage = false,\n    fileName,\n    icon,\n    actionsRender,\n    copyable,\n    variant,\n    shadow,\n    wrap,\n    defaultExpand = true,\n    children,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const contentRef = useRef(content);\n\n    useEffect(() => {\n      contentRef.current = content;\n    }, [content]);\n\n    const getContent = useCallback(() => contentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return <CopyButton content={getContent} size={'small'} />;\n    }, [copyable, getContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize: 'small',\n        content,\n        getContent,\n        language,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, language, originalActions]);\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageDisplayName(language);\n    }, [fileName, language]);\n\n    const filetype = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageFilename(language);\n    }, [fileName, language]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        data-code-type=\"highlighter\"\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(wrap, className), style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          justify={'space-between'}\n          onClick={handleToggleExpand}\n          {...headerFlexProps(variant)}\n          {...styleProps(headerStyles(variant), classNames?.header, customStyles?.header)}\n        >\n          <HeaderLanguage\n            allowChangeLanguage={allowChangeLanguage}\n            displayName={displayName}\n            fileName={fileName}\n            filetype={filetype}\n            icon={icon}\n            language={language}\n            setLanguage={setLanguage}\n            showLanguage={showLanguage}\n          />\n          <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\n            <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\n              {actions}\n            </Flexbox>\n            <ActionIcon\n              icon={expand ? ChevronDown : ChevronRight}\n              size={'small'}\n              onClick={handleToggleExpand}\n            />\n          </Flexbox>\n        </Flexbox>\n        <Flexbox\n          height={expand ? undefined : 0}\n          {...styleProps(\n            bodyStyles(expand, variant),\n            clsx(expand && expandCls, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default HighlighterFullFeatured;\n"],"mappings":"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"}
+{"version":3,"file":"FullFeatured.mjs","names":["Flexbox","clsx"],"sources":["../../src/Highlighter/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName, getCodeLanguageFilename } from '@/Highlighter/const';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport LangSelect from './LangSelect';\nimport {\n  bodyStyles,\n  expandCls,\n  headerFlexProps,\n  headerStyles,\n  rootClassName,\n  rootStyles,\n} from './style';\nimport { type HighlighterProps } from './type';\n\ninterface HeaderLanguageProps {\n  allowChangeLanguage: boolean;\n  displayName: string;\n  fileName?: string;\n  filetype: string;\n  icon?: ReactNode;\n  language: string;\n  setLanguage?: (language: string) => void;\n  showLanguage?: boolean;\n}\n\nconst HeaderLanguage = memo<HeaderLanguageProps>(\n  ({\n    allowChangeLanguage,\n    displayName,\n    fileName,\n    filetype,\n    icon,\n    language,\n    setLanguage,\n    showLanguage,\n  }) => {\n    if (!showLanguage) return null;\n\n    if (allowChangeLanguage && !fileName)\n      return <LangSelect value={language.toLowerCase()} onSelect={setLanguage} />;\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={'language-title'}\n        flex={1}\n        gap={4}\n        justify={'flex-start'}\n        paddingInline={8}\n      >\n        {icon || (\n          <MaterialFileTypeIcon\n            fallbackUnknownType={false}\n            filename={filetype}\n            size={18}\n            type={'file'}\n            variant={'raw'}\n          />\n        )}\n        <Text ellipsis fontSize={13}>\n          {displayName}\n        </Text>\n      </Flexbox>\n    );\n  },\n  (prev, next) =>\n    prev.allowChangeLanguage === next.allowChangeLanguage &&\n    prev.displayName === next.displayName &&\n    prev.fileName === next.fileName &&\n    prev.filetype === next.filetype &&\n    prev.icon === next.icon &&\n    prev.language === next.language &&\n    prev.setLanguage === next.setLanguage &&\n    prev.showLanguage === next.showLanguage,\n);\n\ninterface HighlighterFullFeaturedProps extends Omit<\n  HighlighterProps,\n  'children' | 'bodyRender' | 'enableTransformer'\n> {\n  content: string;\n  setLanguage?: (language: string) => void;\n}\n\nexport const HighlighterFullFeatured = memo<HighlighterFullFeaturedProps & { children: ReactNode }>(\n  ({\n    content,\n    language,\n    setLanguage,\n    showLanguage,\n    className,\n    classNames,\n    styles: customStyles,\n    style,\n    allowChangeLanguage = false,\n    fileName,\n    icon,\n    actionsRender,\n    copyable,\n    variant,\n    shadow,\n    wrap,\n    defaultExpand = true,\n    children,\n    ...rest\n  }) => {\n    const [expand, setExpand] = useState(defaultExpand);\n    const contentRef = useRef(content);\n\n    useEffect(() => {\n      contentRef.current = content;\n    }, [content]);\n\n    const getContent = useCallback(() => contentRef.current, []);\n\n    const originalActions = useMemo(() => {\n      if (!copyable) return null;\n      return <CopyButton content={getContent} size={'small'} />;\n    }, [copyable, getContent]);\n\n    const actions = useMemo(() => {\n      if (!actionsRender) return originalActions;\n      return actionsRender({\n        actionIconSize: 'small',\n        content,\n        getContent,\n        language,\n        originalNode: originalActions,\n      });\n    }, [actionsRender, content, getContent, language, originalActions]);\n\n    const displayName = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageDisplayName(language);\n    }, [fileName, language]);\n\n    const filetype = useMemo(() => {\n      if (fileName) return fileName;\n      return getCodeLanguageFilename(language);\n    }, [fileName, language]);\n\n    const handleToggleExpand = useCallback(() => {\n      setExpand((prev) => !prev);\n    }, []);\n\n    return (\n      <Flexbox\n        data-code-type=\"highlighter\"\n        width={'100%'}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(wrap, className), style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          justify={'space-between'}\n          onClick={handleToggleExpand}\n          {...headerFlexProps(variant)}\n          {...styleProps(headerStyles(variant), classNames?.header, customStyles?.header)}\n        >\n          <HeaderLanguage\n            allowChangeLanguage={allowChangeLanguage}\n            displayName={displayName}\n            fileName={fileName}\n            filetype={filetype}\n            icon={icon}\n            language={language}\n            setLanguage={setLanguage}\n            showLanguage={showLanguage}\n          />\n          <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\n            <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\n              {actions}\n            </Flexbox>\n            <ActionIcon\n              icon={expand ? ChevronDown : ChevronRight}\n              size={'small'}\n              onClick={handleToggleExpand}\n            />\n          </Flexbox>\n        </Flexbox>\n        <Flexbox\n          height={expand ? undefined : 0}\n          {...styleProps(\n            bodyStyles(expand, variant),\n            clsx(expand && expandCls, classNames?.body),\n            customStyles?.body,\n          )}\n        >\n          {children}\n        </Flexbox>\n      </Flexbox>\n    );\n  },\n);\n\nexport default HighlighterFullFeatured;\n"],"mappings":"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"}

package/es/Highlighter/SyntaxHighlighter/StreamRenderer.mjs

@@ -3,7 +3,7 @@ import { useStreamHighlight } from "../../hooks/useStreamHighlight.mjs";
 import { createTokenFadeStore, markTokenBirths, resolveTokenFadeStyle } from "./tokenFade.mjs";
 import { memo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { getTokenStyleObject } from "@shikijs/core";
 //#region src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx
 const normalizeStyleKeys = (style) => {
@@ -80,7 +80,7 @@ const StreamRenderer = memo(({ children, className, enableTransformer, fallbackC
 		dir: "ltr",
 		style,
 		children: /* @__PURE__ */ jsx("pre", {
-			className: clsx("shiki", theme),
+			className: clsx$1("shiki", theme),
 			style: preStyle,
 			tabIndex: 0,
 			children: /* @__PURE__ */ jsx("code", {

package/es/Highlighter/SyntaxHighlighter/StreamRenderer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"StreamRenderer.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { getTokenStyleObject } from '@shikijs/core';\nimport clsx from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { memo, useRef } from 'react';\nimport type { BuiltinTheme, ThemedToken } from 'shiki';\n\nimport { useStreamHighlight } from '@/hooks/useStreamHighlight';\n\nimport {\n  createTokenFadeStore,\n  markTokenBirths,\n  resolveTokenFadeStyle,\n  type TokenFadeStore,\n} from './tokenFade';\n\ninterface StreamRendererProps {\n  children: string;\n  className?: string;\n  enableTransformer?: boolean;\n  fallbackClassName?: string;\n  language: string;\n  style?: CSSProperties;\n  theme?: BuiltinTheme;\n}\n\nconst normalizeStyleKeys = (style: Record<string, string | number>): CSSProperties => {\n  const normalized: CSSProperties = {};\n  Object.entries(style).forEach(([key, value]) => {\n    const normalizedKey = key.replaceAll(/-([a-z])/g, (_, char) => char.toUpperCase());\n    (normalized as Record<string, string | number>)[normalizedKey] = value;\n  });\n  return normalized;\n};\n\nconst getTokenInlineStyle = (token: ThemedToken): CSSProperties => {\n  const rawStyle = token.htmlStyle || getTokenStyleObject(token);\n  const baseStyle = normalizeStyleKeys(rawStyle);\n  return { ...baseStyle, whiteSpace: 'pre' };\n};\n\nconst TokenSpan = memo(\n  ({ fadeStyle, token }: { fadeStyle?: CSSProperties | null; token: ThemedToken }) => {\n    const style = fadeStyle\n      ? { ...getTokenInlineStyle(token), ...fadeStyle }\n      : getTokenInlineStyle(token);\n    return (\n      <span className={fadeStyle ? 'stream-char' : undefined} style={style}>\n        {token.content}\n      </span>\n    );\n  },\n  (prev, next) => prev.token === next.token && prev.fadeStyle === next.fadeStyle,\n);\n\nconst TokenLine = memo(\n  ({\n    fade,\n    line,\n    now,\n    start,\n  }: {\n    fade: TokenFadeStore;\n    line: ThemedToken[];\n    now: number;\n    start: number;\n  }) => {\n    if (!line.length) {\n      return (\n        <span className=\"line\">\n          <span style={{ whiteSpace: 'pre' }}>{'\\u00A0'}</span>\n        </span>\n      );\n    }\n\n    let offset = start;\n    return (\n      <span className=\"line\">\n        {line.map((token) => {\n          const tokenOffset = offset;\n          offset += token.content.length;\n          return (\n            <TokenSpan\n              fadeStyle={resolveTokenFadeStyle(fade, tokenOffset, now)}\n              key={tokenOffset}\n              token={token}\n            />\n          );\n        })}\n      </span>\n    );\n  },\n  (prev, next) => prev.line === next.line && prev.start === next.start,\n);\n\nconst StreamRenderer = memo<StreamRendererProps>(\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\n    // Safely handle empty or invalid children\n    const safeChildren = children ?? '';\n\n    const streaming = useStreamHighlight(safeChildren, {\n      enableTransformer,\n      language,\n      streaming: true,\n      theme,\n    });\n\n    const lines = streaming?.lines;\n    const preStyle = streaming?.preStyle;\n\n    const fadeRef = useRef<TokenFadeStore>(createTokenFadeStore());\n    const previousTextRef = useRef('');\n    if (!safeChildren.startsWith(previousTextRef.current)) {\n      fadeRef.current = createTokenFadeStore();\n    }\n    previousTextRef.current = safeChildren;\n    const now = performance.now();\n    const lineStarts = lines ? markTokenBirths(fadeRef.current, lines, now) : [];\n\n    if (!lines || lines.length === 0) {\n      return (\n        <div className={fallbackClassName} dir=\"ltr\" style={style}>\n          <pre>\n            <code>{safeChildren}</code>\n          </pre>\n        </div>\n      );\n    }\n\n    return (\n      <div className={className} dir=\"ltr\" style={style}>\n        <pre className={clsx('shiki', theme)} style={preStyle} tabIndex={0}>\n          <code style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'pre' }}>\n            {lines.map((line, index) => (\n              <TokenLine\n                fade={fadeRef.current}\n                key={`line-${index}`}\n                line={line}\n                now={now}\n                start={lineStarts[index]}\n              />\n            ))}\n          </code>\n        </pre>\n      </div>\n    );\n  },\n);\n\nStreamRenderer.displayName = 'StreamRenderer';\n\nexport default StreamRenderer;\n"],"mappings":";;;;;;;;AA2BA,MAAM,sBAAsB,UAA0D;CACpF,MAAM,aAA4B,CAAC;CACnC,OAAO,QAAQ,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,WAAW;EAC9C,MAAM,gBAAgB,IAAI,WAAW,cAAc,GAAG,SAAS,KAAK,YAAY,CAAC;EACjF,WAAgD,iBAAiB;CACnE,CAAC;CACD,OAAO;AACT;AAEA,MAAM,uBAAuB,UAAsC;CACjE,MAAM,WAAW,MAAM,aAAa,oBAAoB,KAAK;CAE7D,OAAO;EAAE,GADS,mBAAmB,QACjB;EAAG,YAAY;CAAM;AAC3C;AAEA,MAAM,YAAY,MACf,EAAE,WAAW,YAAsE;CAClF,MAAM,QAAQ,YACV;EAAE,GAAG,oBAAoB,KAAK;EAAG,GAAG;CAAU,IAC9C,oBAAoB,KAAK;CAC7B,OACE,oBAAC,QAAD;EAAM,WAAW,YAAY,gBAAgB,KAAA;EAAkB;EAC5D,UAAA,MAAM;CACH,CAAA;AAEV,IACC,MAAM,SAAS,KAAK,UAAU,KAAK,SAAS,KAAK,cAAc,KAAK,SACvE;AAEA,MAAM,YAAY,MACf,EACC,MACA,MACA,KACA,YAMI;CACJ,IAAI,CAAC,KAAK,QACR,OACE,oBAAC,QAAD;EAAM,WAAU;EACd,UAAA,oBAAC,QAAD;GAAM,OAAO,EAAE,YAAY,MAAM;GAAI,UAAA;EAAe,CAAA;CAChD,CAAA;CAIV,IAAI,SAAS;CACb,OACE,oBAAC,QAAD;EAAM,WAAU;EACb,UAAA,KAAK,KAAK,UAAU;GACnB,MAAM,cAAc;GACpB,UAAU,MAAM,QAAQ;GACxB,OACE,oBAAC,WAAD;IACE,WAAW,sBAAsB,MAAM,aAAa,GAAG;IAEhD;GACR,GAFM,WAEN;EAEL,CAAC;CACG,CAAA;AAEV,IACC,MAAM,SAAS,KAAK,SAAS,KAAK,QAAQ,KAAK,UAAU,KAAK,KACjE;AAEA,MAAM,iBAAiB,MACpB,EAAE,UAAU,WAAW,mBAAmB,mBAAmB,UAAU,OAAO,YAAY;CAEzF,MAAM,eAAe,YAAY;CAEjC,MAAM,YAAY,mBAAmB,cAAc;EACjD;EACA;EACA,WAAW;EACX;CACF,CAAC;CAED,MAAM,QAAQ,WAAW;CACzB,MAAM,WAAW,WAAW;CAE5B,MAAM,UAAU,OAAuB,qBAAqB,CAAC;CAC7D,MAAM,kBAAkB,OAAO,EAAE;CACjC,IAAI,CAAC,aAAa,WAAW,gBAAgB,OAAO,GAClD,QAAQ,UAAU,qBAAqB;CAEzC,gBAAgB,UAAU;CAC1B,MAAM,MAAM,YAAY,IAAI;CAC5B,MAAM,aAAa,QAAQ,gBAAgB,QAAQ,SAAS,OAAO,GAAG,IAAI,CAAC;CAE3E,IAAI,CAAC,SAAS,MAAM,WAAW,GAC7B,OACE,oBAAC,OAAD;EAAK,WAAW;EAAmB,KAAI;EAAa;EAClD,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UAAO,aAAmB,CAAA,EACvB,CAAA;CACF,CAAA;CAIT,OACE,oBAAC,OAAD;EAAgB;EAAW,KAAI;EAAa;EAC1C,UAAA,oBAAC,OAAD;GAAK,WAAW,KAAK,SAAS,KAAK;GAAG,OAAO;GAAU,UAAU;GAC/D,UAAA,oBAAC,QAAD;IAAM,OAAO;KAAE,SAAS;KAAQ,eAAe;KAAU,YAAY;IAAM;IACxE,UAAA,MAAM,KAAK,MAAM,UAChB,oBAAC,WAAD;KACE,MAAM,QAAQ;KAER;KACD;KACL,OAAO,WAAW;IACnB,GAJM,QAAQ,OAId,CACF;GACG,CAAA;EACH,CAAA;CACF,CAAA;AAET,CACF;AAEA,eAAe,cAAc"}
+{"version":3,"file":"StreamRenderer.mjs","names":["clsx"],"sources":["../../../src/Highlighter/SyntaxHighlighter/StreamRenderer.tsx"],"sourcesContent":["'use client';\n\nimport { getTokenStyleObject } from '@shikijs/core';\nimport clsx from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { memo, useRef } from 'react';\nimport type { BuiltinTheme, ThemedToken } from 'shiki';\n\nimport { useStreamHighlight } from '@/hooks/useStreamHighlight';\n\nimport {\n  createTokenFadeStore,\n  markTokenBirths,\n  resolveTokenFadeStyle,\n  type TokenFadeStore,\n} from './tokenFade';\n\ninterface StreamRendererProps {\n  children: string;\n  className?: string;\n  enableTransformer?: boolean;\n  fallbackClassName?: string;\n  language: string;\n  style?: CSSProperties;\n  theme?: BuiltinTheme;\n}\n\nconst normalizeStyleKeys = (style: Record<string, string | number>): CSSProperties => {\n  const normalized: CSSProperties = {};\n  Object.entries(style).forEach(([key, value]) => {\n    const normalizedKey = key.replaceAll(/-([a-z])/g, (_, char) => char.toUpperCase());\n    (normalized as Record<string, string | number>)[normalizedKey] = value;\n  });\n  return normalized;\n};\n\nconst getTokenInlineStyle = (token: ThemedToken): CSSProperties => {\n  const rawStyle = token.htmlStyle || getTokenStyleObject(token);\n  const baseStyle = normalizeStyleKeys(rawStyle);\n  return { ...baseStyle, whiteSpace: 'pre' };\n};\n\nconst TokenSpan = memo(\n  ({ fadeStyle, token }: { fadeStyle?: CSSProperties | null; token: ThemedToken }) => {\n    const style = fadeStyle\n      ? { ...getTokenInlineStyle(token), ...fadeStyle }\n      : getTokenInlineStyle(token);\n    return (\n      <span className={fadeStyle ? 'stream-char' : undefined} style={style}>\n        {token.content}\n      </span>\n    );\n  },\n  (prev, next) => prev.token === next.token && prev.fadeStyle === next.fadeStyle,\n);\n\nconst TokenLine = memo(\n  ({\n    fade,\n    line,\n    now,\n    start,\n  }: {\n    fade: TokenFadeStore;\n    line: ThemedToken[];\n    now: number;\n    start: number;\n  }) => {\n    if (!line.length) {\n      return (\n        <span className=\"line\">\n          <span style={{ whiteSpace: 'pre' }}>{'\\u00A0'}</span>\n        </span>\n      );\n    }\n\n    let offset = start;\n    return (\n      <span className=\"line\">\n        {line.map((token) => {\n          const tokenOffset = offset;\n          offset += token.content.length;\n          return (\n            <TokenSpan\n              fadeStyle={resolveTokenFadeStyle(fade, tokenOffset, now)}\n              key={tokenOffset}\n              token={token}\n            />\n          );\n        })}\n      </span>\n    );\n  },\n  (prev, next) => prev.line === next.line && prev.start === next.start,\n);\n\nconst StreamRenderer = memo<StreamRendererProps>(\n  ({ children, className, enableTransformer, fallbackClassName, language, style, theme }) => {\n    // Safely handle empty or invalid children\n    const safeChildren = children ?? '';\n\n    const streaming = useStreamHighlight(safeChildren, {\n      enableTransformer,\n      language,\n      streaming: true,\n      theme,\n    });\n\n    const lines = streaming?.lines;\n    const preStyle = streaming?.preStyle;\n\n    const fadeRef = useRef<TokenFadeStore>(createTokenFadeStore());\n    const previousTextRef = useRef('');\n    if (!safeChildren.startsWith(previousTextRef.current)) {\n      fadeRef.current = createTokenFadeStore();\n    }\n    previousTextRef.current = safeChildren;\n    const now = performance.now();\n    const lineStarts = lines ? markTokenBirths(fadeRef.current, lines, now) : [];\n\n    if (!lines || lines.length === 0) {\n      return (\n        <div className={fallbackClassName} dir=\"ltr\" style={style}>\n          <pre>\n            <code>{safeChildren}</code>\n          </pre>\n        </div>\n      );\n    }\n\n    return (\n      <div className={className} dir=\"ltr\" style={style}>\n        <pre className={clsx('shiki', theme)} style={preStyle} tabIndex={0}>\n          <code style={{ display: 'flex', flexDirection: 'column', whiteSpace: 'pre' }}>\n            {lines.map((line, index) => (\n              <TokenLine\n                fade={fadeRef.current}\n                key={`line-${index}`}\n                line={line}\n                now={now}\n                start={lineStarts[index]}\n              />\n            ))}\n          </code>\n        </pre>\n      </div>\n    );\n  },\n);\n\nStreamRenderer.displayName = 'StreamRenderer';\n\nexport default StreamRenderer;\n"],"mappings":";;;;;;;;AA2BA,MAAM,sBAAsB,UAA0D;CACpF,MAAM,aAA4B,CAAC;CACnC,OAAO,QAAQ,KAAK,CAAC,CAAC,SAAS,CAAC,KAAK,WAAW;EAC9C,MAAM,gBAAgB,IAAI,WAAW,cAAc,GAAG,SAAS,KAAK,YAAY,CAAC;EACjF,WAAgD,iBAAiB;CACnE,CAAC;CACD,OAAO;AACT;AAEA,MAAM,uBAAuB,UAAsC;CACjE,MAAM,WAAW,MAAM,aAAa,oBAAoB,KAAK;CAE7D,OAAO;EAAE,GADS,mBAAmB,QACjB;EAAG,YAAY;CAAM;AAC3C;AAEA,MAAM,YAAY,MACf,EAAE,WAAW,YAAsE;CAClF,MAAM,QAAQ,YACV;EAAE,GAAG,oBAAoB,KAAK;EAAG,GAAG;CAAU,IAC9C,oBAAoB,KAAK;CAC7B,OACE,oBAAC,QAAD;EAAM,WAAW,YAAY,gBAAgB,KAAA;EAAkB;EAC5D,UAAA,MAAM;CACH,CAAA;AAEV,IACC,MAAM,SAAS,KAAK,UAAU,KAAK,SAAS,KAAK,cAAc,KAAK,SACvE;AAEA,MAAM,YAAY,MACf,EACC,MACA,MACA,KACA,YAMI;CACJ,IAAI,CAAC,KAAK,QACR,OACE,oBAAC,QAAD;EAAM,WAAU;EACd,UAAA,oBAAC,QAAD;GAAM,OAAO,EAAE,YAAY,MAAM;GAAI,UAAA;EAAe,CAAA;CAChD,CAAA;CAIV,IAAI,SAAS;CACb,OACE,oBAAC,QAAD;EAAM,WAAU;EACb,UAAA,KAAK,KAAK,UAAU;GACnB,MAAM,cAAc;GACpB,UAAU,MAAM,QAAQ;GACxB,OACE,oBAAC,WAAD;IACE,WAAW,sBAAsB,MAAM,aAAa,GAAG;IAEhD;GACR,GAFM,WAEN;EAEL,CAAC;CACG,CAAA;AAEV,IACC,MAAM,SAAS,KAAK,SAAS,KAAK,QAAQ,KAAK,UAAU,KAAK,KACjE;AAEA,MAAM,iBAAiB,MACpB,EAAE,UAAU,WAAW,mBAAmB,mBAAmB,UAAU,OAAO,YAAY;CAEzF,MAAM,eAAe,YAAY;CAEjC,MAAM,YAAY,mBAAmB,cAAc;EACjD;EACA;EACA,WAAW;EACX;CACF,CAAC;CAED,MAAM,QAAQ,WAAW;CACzB,MAAM,WAAW,WAAW;CAE5B,MAAM,UAAU,OAAuB,qBAAqB,CAAC;CAC7D,MAAM,kBAAkB,OAAO,EAAE;CACjC,IAAI,CAAC,aAAa,WAAW,gBAAgB,OAAO,GAClD,QAAQ,UAAU,qBAAqB;CAEzC,gBAAgB,UAAU;CAC1B,MAAM,MAAM,YAAY,IAAI;CAC5B,MAAM,aAAa,QAAQ,gBAAgB,QAAQ,SAAS,OAAO,GAAG,IAAI,CAAC;CAE3E,IAAI,CAAC,SAAS,MAAM,WAAW,GAC7B,OACE,oBAAC,OAAD;EAAK,WAAW;EAAmB,KAAI;EAAa;EAClD,UAAA,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD,EAAA,UAAO,aAAmB,CAAA,EACvB,CAAA;CACF,CAAA;CAIT,OACE,oBAAC,OAAD;EAAgB;EAAW,KAAI;EAAa;EAC1C,UAAA,oBAAC,OAAD;GAAK,WAAWA,OAAK,SAAS,KAAK;GAAG,OAAO;GAAU,UAAU;GAC/D,UAAA,oBAAC,QAAD;IAAM,OAAO;KAAE,SAAS;KAAQ,eAAe;KAAU,YAAY;IAAM;IACxE,UAAA,MAAM,KAAK,MAAM,UAChB,oBAAC,WAAD;KACE,MAAM,QAAQ;KAER;KACD;KACL,OAAO,WAAW;IACnB,GAJM,QAAQ,OAId,CACF;GACG,CAAA;EACH,CAAA;CACF,CAAA;AAET,CACF;AAEA,eAAe,cAAc"}

package/es/Highlighter/SyntaxHighlighter/index.mjs

@@ -5,24 +5,24 @@ import StreamRenderer from "./StreamRenderer.mjs";
 import { styles } from "./style.mjs";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import { STREAM_FADE_DURATION } from "@lobehub/streamdown";
 //#region src/Highlighter/SyntaxHighlighter/index.tsx
 const SyntaxHighlighterImpl = memo(({ animated, children, className, enableTransformer, language, style, theme, variant = "borderless", xstyle }) => {
 	const isDefaultTheme = theme === "lobe-theme" || !theme;
 	const showBackground = !isDefaultTheme && variant === "filled";
 	const resolvedTheme = isDefaultTheme ? void 0 : theme;
-	const classes = clsx("lobe-syntax-highlighter", !showBackground && "lobe-syntax-highlighter-transparent", animated && "lobe-syntax-highlighter-animated", variant === "borderless" ? "lobe-syntax-highlighter-unpadded" : "lobe-syntax-highlighter-padded");
+	const classes = clsx$1("lobe-syntax-highlighter", !showBackground && "lobe-syntax-highlighter-transparent", animated && "lobe-syntax-highlighter-animated", variant === "borderless" ? "lobe-syntax-highlighter-unpadded" : "lobe-syntax-highlighter-padded");
 	const mergedStyle = animated ? {
 		"--lobe-syntax-highlighter-stream-fade": `${STREAM_FADE_DURATION}ms`,
 		...style
 	} : style;
-	const shiki = styleProps([styles.root, xstyle], clsx(classes, "ant-highlighter-highlighter-shiki lobe-syntax-highlighter-shiki", className), mergedStyle);
+	const shiki = styleProps([styles.root, xstyle], clsx$1(classes, "ant-highlighter-highlighter-shiki lobe-syntax-highlighter-shiki", className), mergedStyle);
 	const fallback = styleProps([
 		styles.root,
 		styles.unshiki,
 		xstyle
-	], clsx(classes, className), mergedStyle);
+	], clsx$1(classes, className), mergedStyle);
 	return /* @__PURE__ */ jsx(animated ? StreamRenderer : StaticRenderer, {
 		className: shiki.className,
 		enableTransformer,

package/es/Highlighter/SyntaxHighlighter/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/Highlighter/SyntaxHighlighter/index.tsx"],"sourcesContent":["'use client';\n\nimport { STREAM_FADE_DURATION } from '@lobehub/streamdown';\nimport clsx from 'clsx';\nimport { type CSSProperties, memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { SyntaxHighlighterProps } from '../type';\nimport StaticRenderer from './StaticRenderer';\nimport StreamRenderer from './StreamRenderer';\nimport { styles } from './style';\n\ntype SyntaxHighlighterImplProps = SyntaxHighlighterProps & {\n  xstyle?: Parameters<typeof styleProps>[0];\n};\n\nexport const SyntaxHighlighterImpl = memo<SyntaxHighlighterImplProps>(\n  ({\n    animated,\n    children,\n    className,\n    enableTransformer,\n    language,\n    style,\n    theme,\n    variant = 'borderless',\n    xstyle,\n  }) => {\n    const isDefaultTheme = theme === 'lobe-theme' || !theme;\n    const showBackground = !isDefaultTheme && variant === 'filled';\n    const resolvedTheme = isDefaultTheme ? undefined : theme;\n\n    const classes = clsx(\n      'lobe-syntax-highlighter',\n      !showBackground && 'lobe-syntax-highlighter-transparent',\n      animated && 'lobe-syntax-highlighter-animated',\n      variant === 'borderless'\n        ? 'lobe-syntax-highlighter-unpadded'\n        : 'lobe-syntax-highlighter-padded',\n    );\n    const mergedStyle = animated\n      ? ({\n          '--lobe-syntax-highlighter-stream-fade': `${STREAM_FADE_DURATION}ms`,\n          ...style,\n        } as CSSProperties)\n      : style;\n\n    const shiki = styleProps(\n      [styles.root, xstyle],\n      clsx(classes, 'ant-highlighter-highlighter-shiki lobe-syntax-highlighter-shiki', className),\n      mergedStyle,\n    );\n    const fallback = styleProps(\n      [styles.root, styles.unshiki, xstyle],\n      clsx(classes, className),\n      mergedStyle,\n    );\n\n    const Renderer = animated ? StreamRenderer : StaticRenderer;\n\n    return (\n      <Renderer\n        className={shiki.className}\n        enableTransformer={enableTransformer}\n        fallbackClassName={fallback.className}\n        language={language}\n        style={shiki.style}\n        theme={resolvedTheme}\n      >\n        {children}\n      </Renderer>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children && prevProps.language === nextProps.language,\n);\n\nconst SyntaxHighlighter = memo<SyntaxHighlighterProps>((props) => (\n  <SyntaxHighlighterImpl {...props} />\n));\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n\nexport default SyntaxHighlighter;\n"],"mappings":";;;;;;;;;;AAiBA,MAAa,wBAAwB,MAClC,EACC,UACA,UACA,WACA,mBACA,UACA,OACA,OACA,UAAU,cACV,aACI;CACJ,MAAM,iBAAiB,UAAU,gBAAgB,CAAC;CAClD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,KAAA,IAAY;CAEnD,MAAM,UAAU,KACd,2BACA,CAAC,kBAAkB,uCACnB,YAAY,oCACZ,YAAY,eACR,qCACA,gCACN;CACA,MAAM,cAAc,WACf;EACC,yCAAyC,GAAG,qBAAqB;EACjE,GAAG;CACL,IACA;CAEJ,MAAM,QAAQ,WACZ,CAAC,OAAO,MAAM,MAAM,GACpB,KAAK,SAAS,mEAAmE,SAAS,GAC1F,WACF;CACA,MAAM,WAAW,WACf;EAAC,OAAO;EAAM,OAAO;EAAS;CAAM,GACpC,KAAK,SAAS,SAAS,GACvB,WACF;CAIA,OACE,oBAHe,WAAW,iBAAiB,gBAG3C;EACE,WAAW,MAAM;EACE;EACnB,mBAAmB,SAAS;EAClB;EACV,OAAO,MAAM;EACb,OAAO;EAEN;CACO,CAAA;AAEd,IACC,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,aAAa,UAAU,QAClF;AAEA,MAAM,oBAAoB,MAA8B,UACtD,oBAAC,uBAAD,EAAuB,GAAI,MAAQ,CAAA,CACpC;AAED,kBAAkB,cAAc"}
+{"version":3,"file":"index.mjs","names":["clsx"],"sources":["../../../src/Highlighter/SyntaxHighlighter/index.tsx"],"sourcesContent":["'use client';\n\nimport { STREAM_FADE_DURATION } from '@lobehub/streamdown';\nimport clsx from 'clsx';\nimport { type CSSProperties, memo } from 'react';\n\nimport { styleProps } from '@/styles/stylex/props';\n\nimport type { SyntaxHighlighterProps } from '../type';\nimport StaticRenderer from './StaticRenderer';\nimport StreamRenderer from './StreamRenderer';\nimport { styles } from './style';\n\ntype SyntaxHighlighterImplProps = SyntaxHighlighterProps & {\n  xstyle?: Parameters<typeof styleProps>[0];\n};\n\nexport const SyntaxHighlighterImpl = memo<SyntaxHighlighterImplProps>(\n  ({\n    animated,\n    children,\n    className,\n    enableTransformer,\n    language,\n    style,\n    theme,\n    variant = 'borderless',\n    xstyle,\n  }) => {\n    const isDefaultTheme = theme === 'lobe-theme' || !theme;\n    const showBackground = !isDefaultTheme && variant === 'filled';\n    const resolvedTheme = isDefaultTheme ? undefined : theme;\n\n    const classes = clsx(\n      'lobe-syntax-highlighter',\n      !showBackground && 'lobe-syntax-highlighter-transparent',\n      animated && 'lobe-syntax-highlighter-animated',\n      variant === 'borderless'\n        ? 'lobe-syntax-highlighter-unpadded'\n        : 'lobe-syntax-highlighter-padded',\n    );\n    const mergedStyle = animated\n      ? ({\n          '--lobe-syntax-highlighter-stream-fade': `${STREAM_FADE_DURATION}ms`,\n          ...style,\n        } as CSSProperties)\n      : style;\n\n    const shiki = styleProps(\n      [styles.root, xstyle],\n      clsx(classes, 'ant-highlighter-highlighter-shiki lobe-syntax-highlighter-shiki', className),\n      mergedStyle,\n    );\n    const fallback = styleProps(\n      [styles.root, styles.unshiki, xstyle],\n      clsx(classes, className),\n      mergedStyle,\n    );\n\n    const Renderer = animated ? StreamRenderer : StaticRenderer;\n\n    return (\n      <Renderer\n        className={shiki.className}\n        enableTransformer={enableTransformer}\n        fallbackClassName={fallback.className}\n        language={language}\n        style={shiki.style}\n        theme={resolvedTheme}\n      >\n        {children}\n      </Renderer>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children && prevProps.language === nextProps.language,\n);\n\nconst SyntaxHighlighter = memo<SyntaxHighlighterProps>((props) => (\n  <SyntaxHighlighterImpl {...props} />\n));\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n\nexport default SyntaxHighlighter;\n"],"mappings":";;;;;;;;;;AAiBA,MAAa,wBAAwB,MAClC,EACC,UACA,UACA,WACA,mBACA,UACA,OACA,OACA,UAAU,cACV,aACI;CACJ,MAAM,iBAAiB,UAAU,gBAAgB,CAAC;CAClD,MAAM,iBAAiB,CAAC,kBAAkB,YAAY;CACtD,MAAM,gBAAgB,iBAAiB,KAAA,IAAY;CAEnD,MAAM,UAAUA,OACd,2BACA,CAAC,kBAAkB,uCACnB,YAAY,oCACZ,YAAY,eACR,qCACA,gCACN;CACA,MAAM,cAAc,WACf;EACC,yCAAyC,GAAG,qBAAqB;EACjE,GAAG;CACL,IACA;CAEJ,MAAM,QAAQ,WACZ,CAAC,OAAO,MAAM,MAAM,GACpBA,OAAK,SAAS,mEAAmE,SAAS,GAC1F,WACF;CACA,MAAM,WAAW,WACf;EAAC,OAAO;EAAM,OAAO;EAAS;CAAM,GACpCA,OAAK,SAAS,SAAS,GACvB,WACF;CAIA,OACE,oBAHe,WAAW,iBAAiB,gBAG3C;EACE,WAAW,MAAM;EACE;EACnB,mBAAmB,SAAS;EAClB;EACV,OAAO,MAAM;EACb,OAAO;EAEN;CACO,CAAA;AAEd,IACC,WAAW,cACV,UAAU,aAAa,UAAU,YAAY,UAAU,aAAa,UAAU,QAClF;AAEA,MAAM,oBAAoB,MAA8B,UACtD,oBAAC,uBAAD,EAAuB,GAAI,MAAQ,CAAA,CACpC;AAED,kBAAkB,cAAc"}

package/es/Highlighter/style.mjs

@@ -1,5 +1,5 @@
 import { stylish } from "../styles/stylex/stylish.mjs";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 //#region src/Highlighter/style.ts
 const actionsHoverCls = "ant-highlighter-highlighter-hover-actions lobe-highlighter-actions";
 const langHoverCls = "ant-highlighter-highlighter-hover-lang lobe-highlighter-lang";
@@ -65,7 +65,7 @@ const rootStyles = ({ shadow, variant = "filled" }) => [
 	variantStyles[variant],
 	shadow && styles.shadow
 ];
-const rootClassName = (wrap, className) => clsx(prefix, "lobe-highlighter", wrap ? "lobe-highlighter-wrap" : "lobe-highlighter-nowrap", className);
+const rootClassName = (wrap, className) => clsx$1(prefix, "lobe-highlighter", wrap ? "lobe-highlighter-wrap" : "lobe-highlighter-nowrap", className);
 const headerStyles = (variant = "filled") => [styles.header, variant === "filled" && styles.headerFilled];
 const headerFlexProps = (variant = "filled") => ({
 	padding: 4,

package/es/Highlighter/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Highlighter/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { stylish } from '@/styles/stylex/stylish';\n\nimport type { HighlighterProps } from './type';\n\nexport const actionsHoverCls = 'ant-highlighter-highlighter-hover-actions lobe-highlighter-actions';\nexport const langHoverCls = 'ant-highlighter-highlighter-hover-lang lobe-highlighter-lang';\nexport const expandCls = 'ant-highlighter-highlighter-body-expand';\nexport const prefix = 'ant-highlighter';\n\nexport const styles = stylex.create({\n  actions: {\n    insetBlockStart: 8,\n    insetInlineEnd: 8,\n    opacity: 0,\n    position: 'absolute',\n    zIndex: 2,\n  },\n  body: {\n    overflow: 'hidden',\n    transition: `opacity 0.25s ${cssVar.motionEaseOut}`,\n  },\n  bodyCollapsed: {\n    opacity: 0,\n  },\n  bodyDivider: {\n    borderBlockStartColor: cssVar.colorFillQuaternary,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n  },\n  filled: {\n    backgroundColor: cssVar.colorFillQuaternary,\n  },\n  header: {\n    cursor: 'pointer',\n    position: 'relative',\n  },\n  headerFilled: {\n    backgroundColor: 'transparent',\n  },\n  root: {\n    borderRadius: cssVar.borderRadius,\n    overflow: 'hidden',\n    transition: `background-color 100ms ${cssVar.motionEaseOut}`,\n    position: 'relative',\n    width: '100%',\n  },\n  shadow: {\n    boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n  },\n});\n\ntype Variant = NonNullable<HighlighterProps['variant']>;\n\nconst variantStyles = {\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: [stylish.variantFilledWithoutHover, styles.filled],\n  outlined: stylish.variantOutlinedWithoutHover,\n};\n\nexport const rootStyles = ({\n  shadow,\n  variant = 'filled',\n}: {\n  shadow?: boolean;\n  variant?: Variant;\n}) => [styles.root, variantStyles[variant], shadow && styles.shadow];\n\nexport const rootClassName = (wrap?: boolean, className?: string) =>\n  clsx(\n    prefix,\n    'lobe-highlighter',\n    wrap ? 'lobe-highlighter-wrap' : 'lobe-highlighter-nowrap',\n    className,\n  );\n\nexport const headerStyles = (variant: Variant = 'filled') => [\n  styles.header,\n  variant === 'filled' && styles.headerFilled,\n];\n\nexport const headerFlexProps = (variant: Variant = 'filled') => ({\n  padding: 4,\n  paddingInline: variant === 'borderless' ? 0 : undefined,\n});\n\nexport const bodyStyles = (expand: boolean, variant: Variant = 'filled') => [\n  styles.body,\n  expand ? variant !== 'borderless' && styles.bodyDivider : styles.bodyCollapsed,\n];\n"],"mappings":";;;AAOA,MAAa,kBAAkB;AAC/B,MAAa,eAAe;AAC5B,MAAa,YAAY;AACzB,MAAa,SAAS;AACtB,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;AACF;AAEA,MAAM,gBAAgB;CACpB,YAAY,QAAQ;CACpB,QAAQ,CAAC,QAAQ,2BAA2B,OAAO,MAAM;CACzD,UAAU,QAAQ;AACpB;AACA,MAAa,cAAc,EACzB,QACA,UAAU,eAIN;CAAC,OAAO;CAAM,cAAc;CAAU,UAAU,OAAO;AAAM;AACnE,MAAa,iBAAiB,MAAgB,cAAuB,KAAK,QAAQ,oBAAoB,OAAO,0BAA0B,2BAA2B,SAAS;AAC3K,MAAa,gBAAgB,UAAmB,aAAa,CAAC,OAAO,QAAQ,YAAY,YAAY,OAAO,YAAY;AACxH,MAAa,mBAAmB,UAAmB,cAAc;CAC/D,SAAS;CACT,eAAe,YAAY,eAAe,IAAI,KAAA;AAChD;AACA,MAAa,cAAc,QAAiB,UAAmB,aAAa,CAAC,OAAO,MAAM,SAAS,YAAY,gBAAgB,OAAO,cAAc,OAAO,aAAa"}
+{"version":3,"file":"style.mjs","names":["clsx"],"sources":["../../src/Highlighter/style.ts"],"sourcesContent":["import './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { stylish } from '@/styles/stylex/stylish';\n\nimport type { HighlighterProps } from './type';\n\nexport const actionsHoverCls = 'ant-highlighter-highlighter-hover-actions lobe-highlighter-actions';\nexport const langHoverCls = 'ant-highlighter-highlighter-hover-lang lobe-highlighter-lang';\nexport const expandCls = 'ant-highlighter-highlighter-body-expand';\nexport const prefix = 'ant-highlighter';\n\nexport const styles = stylex.create({\n  actions: {\n    insetBlockStart: 8,\n    insetInlineEnd: 8,\n    opacity: 0,\n    position: 'absolute',\n    zIndex: 2,\n  },\n  body: {\n    overflow: 'hidden',\n    transition: `opacity 0.25s ${cssVar.motionEaseOut}`,\n  },\n  bodyCollapsed: {\n    opacity: 0,\n  },\n  bodyDivider: {\n    borderBlockStartColor: cssVar.colorFillQuaternary,\n    borderBlockStartStyle: 'solid',\n    borderBlockStartWidth: 1,\n  },\n  filled: {\n    backgroundColor: cssVar.colorFillQuaternary,\n  },\n  header: {\n    cursor: 'pointer',\n    position: 'relative',\n  },\n  headerFilled: {\n    backgroundColor: 'transparent',\n  },\n  root: {\n    borderRadius: cssVar.borderRadius,\n    overflow: 'hidden',\n    transition: `background-color 100ms ${cssVar.motionEaseOut}`,\n    position: 'relative',\n    width: '100%',\n  },\n  shadow: {\n    boxShadow: `0 1px 0 -1px ${cssVar.colorBorder}, 0 1px 2px -0.5px ${cssVar.colorBorder}, 0 2px 2px -1px ${cssVar.colorBorderSecondary}, 0 3px 6px -4px ${cssVar.colorBorderSecondary}`,\n  },\n});\n\ntype Variant = NonNullable<HighlighterProps['variant']>;\n\nconst variantStyles = {\n  borderless: stylish.variantBorderlessWithoutHover,\n  filled: [stylish.variantFilledWithoutHover, styles.filled],\n  outlined: stylish.variantOutlinedWithoutHover,\n};\n\nexport const rootStyles = ({\n  shadow,\n  variant = 'filled',\n}: {\n  shadow?: boolean;\n  variant?: Variant;\n}) => [styles.root, variantStyles[variant], shadow && styles.shadow];\n\nexport const rootClassName = (wrap?: boolean, className?: string) =>\n  clsx(\n    prefix,\n    'lobe-highlighter',\n    wrap ? 'lobe-highlighter-wrap' : 'lobe-highlighter-nowrap',\n    className,\n  );\n\nexport const headerStyles = (variant: Variant = 'filled') => [\n  styles.header,\n  variant === 'filled' && styles.headerFilled,\n];\n\nexport const headerFlexProps = (variant: Variant = 'filled') => ({\n  padding: 4,\n  paddingInline: variant === 'borderless' ? 0 : undefined,\n});\n\nexport const bodyStyles = (expand: boolean, variant: Variant = 'filled') => [\n  styles.body,\n  expand ? variant !== 'borderless' && styles.bodyDivider : styles.bodyCollapsed,\n];\n"],"mappings":";;;AAOA,MAAa,kBAAkB;AAC/B,MAAa,eAAe;AAC5B,MAAa,YAAY;AACzB,MAAa,SAAS;AACtB,MAAa,SAAS;CACpB,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,eAAe;EACb,QAAQ;EACR,OAAO;CACT;CACA,aAAa;EACX,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,cAAc;EACZ,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;AACF;AAEA,MAAM,gBAAgB;CACpB,YAAY,QAAQ;CACpB,QAAQ,CAAC,QAAQ,2BAA2B,OAAO,MAAM;CACzD,UAAU,QAAQ;AACpB;AACA,MAAa,cAAc,EACzB,QACA,UAAU,eAIN;CAAC,OAAO;CAAM,cAAc;CAAU,UAAU,OAAO;AAAM;AACnE,MAAa,iBAAiB,MAAgB,cAAuBA,OAAK,QAAQ,oBAAoB,OAAO,0BAA0B,2BAA2B,SAAS;AAC3K,MAAa,gBAAgB,UAAmB,aAAa,CAAC,OAAO,QAAQ,YAAY,YAAY,OAAO,YAAY;AACxH,MAAa,mBAAmB,UAAmB,cAAc;CAC/D,SAAS;CACT,eAAe,YAAY,eAAe,IAAI,KAAA;AAChD;AACA,MAAa,cAAc,QAAiB,UAAmB,aAAa,CAAC,OAAO,MAAM,SAAS,YAAY,gBAAgB,OAAO,cAAc,OAAO,aAAa"}

package/es/HtmlPreview/HtmlPreview.mjs

@@ -15,7 +15,7 @@ import { styles } from "./style.mjs";
 import { HtmlPreviewIframe } from "./Iframe.mjs";
 import { 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";
 import { Download, Expand } from "lucide-react";
 //#region src/HtmlPreview/HtmlPreview.tsx
@@ -290,7 +290,7 @@ const HtmlPreview = memo(({ actionIconSize, actionsRender, animated, bodyRender,
 			gap: 4,
 			padding: 4,
 			onClick: stopPropagation,
-			...styleProps(styles.toolbar, clsx(actionsHoverCls, classNames?.header), customStyles?.header),
+			...styleProps(styles.toolbar, clsx$1(actionsHoverCls, classNames?.header), customStyles?.header),
 			children: actions
 		}), body]
 	});

package/es/HtmlPreview/HtmlPreview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HtmlPreview.mjs","names":["Flexbox"],"sources":["../../src/HtmlPreview/HtmlPreview.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Download, Expand } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { actionsHoverCls, rootClassName, rootStyles } from '@/Highlighter/style';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\nimport Segmented, { type SegmentedStyles } from '@/Segmented';\nimport Spin from '@/Spin';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stopPropagation } from '@/utils/dom';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { containsScript, DEFAULT_HEIGHT, isFullHtmlDocument, isHtmlContentClosed } from './const';\nimport HtmlPreviewIframe from './Iframe';\nimport { styles } from './style';\nimport type { HtmlPreviewMode, HtmlPreviewProps } from './type';\n\nconst segmentedStyles: SegmentedStyles = {\n  indicator: { borderRadius: cssVar.borderRadiusXS },\n  item: {\n    borderRadius: cssVar.borderRadiusXS,\n    fontSize: 14,\n    fontWeight: 400,\n    height: 23,\n    paddingInline: 7,\n  },\n  root: { borderRadius: cssVar.borderRadiusSM, gap: 0, padding: 2 },\n};\n\nconst themeBackground = (theme?: 'light' | 'dark') => {\n  if (theme === 'dark') return '#1f1f1f';\n  if (theme === 'light') return '#ffffff';\n  return undefined;\n};\n\nconst downloadHtml = async (content: string, fileName: string) => {\n  const blob = new Blob([content], { type: 'text/html;charset=utf-8' });\n  const url = URL.createObjectURL(blob);\n  try {\n    await downloadBlob(url, fileName);\n  } finally {\n    URL.revokeObjectURL(url);\n  }\n};\n\nconst HtmlPreview = memo<HtmlPreviewProps>(\n  ({\n    actionIconSize,\n    actionsRender,\n    animated,\n    bodyRender,\n    children,\n    className,\n    classNames,\n    copyable = true,\n    defaultHeight,\n    defaultMode = 'preview',\n    downloadable = true,\n    fileName,\n    language = 'html',\n    onExpand,\n    sandbox,\n    shadow,\n    streamingMode = 'auto',\n    style,\n    styles: customStyles,\n    theme,\n    variant = 'filled',\n    // `fullFeatured` / `showLanguage` / `defaultExpand` are accepted for API\n    // compatibility with the rest of the Pre family but no longer drive a\n    // separate header — the inline toolbar is always rendered.\n    fullFeatured: _fullFeatured,\n    showLanguage: _showLanguage,\n    defaultExpand: _defaultExpand,\n    ...rest\n  }) => {\n    const trimmedChildren = useMemo(() => (children || '').trim(), [children]);\n    const isFragment = useMemo(() => !isFullHtmlDocument(trimmedChildren), [trimmedChildren]);\n\n    // Per-session tracking. Reset on `animated` edge false → true.\n    const [scriptLocked, setScriptLocked] = useState(false);\n    const [headClosed, setHeadClosed] = useState(false);\n    const [liveCommitted, setLiveCommitted] = useState(false);\n    const prevAnimatedRef = useRef(animated);\n    const lastCommitRef = useRef(0);\n    const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const latestContentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      latestContentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n    useEffect(() => {\n      if (animated && !prevAnimatedRef.current) {\n        setScriptLocked(false);\n        setHeadClosed(false);\n        setLiveCommitted(false);\n        lastCommitRef.current = 0;\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n      }\n      prevAnimatedRef.current = animated;\n    }, [animated]);\n\n    // Sticky script detection: once a `<script>` appears in this session,\n    // auto mode locks into defer.\n    useEffect(() => {\n      if (animated && !scriptLocked && containsScript(trimmedChildren)) {\n        setScriptLocked(true);\n      }\n    }, [trimmedChildren, animated, scriptLocked]);\n\n    // Track whether the head section has closed. Until it does, the iframe\n    // would render either nothing or invalid HTML (style tag mid-stream).\n    // After `</head>` (or `</style>` as a fallback for documents that skip\n    // an explicit head close) we know the visual baseline is locked in.\n    useEffect(() => {\n      if (animated && !headClosed) {\n        const lowered = trimmedChildren.toLowerCase();\n        if (lowered.includes('</head>') || lowered.includes('</style>')) {\n          setHeadClosed(true);\n        }\n      }\n    }, [trimmedChildren, animated, headClosed]);\n\n    // Two-phase streaming commit:\n    //   Phase 1 (head still streaming) — don't mount iframe at all. There's\n    //     nothing meaningful to render and styles aren't applied yet.\n    //   Phase 2 (head closed, body streaming) — commit at most once every\n    //     ~250ms. Important: this is a TRUE throttle, not a debounce. The\n    //     pending timer is held in a ref so it survives effect re-runs;\n    //     when it fires it commits the latest content (via another ref)\n    //     and clears itself, allowing a fresh schedule. If chunks come in\n    //     faster than the throttle window (which they do at ~50/sec) we\n    //     still get a commit every 250ms instead of waiting for streaming\n    //     to pause.\n    //   On streaming end → flush immediately, cancel any pending timer.\n    const [throttledContent, setThrottledContent] = useState(trimmedChildren);\n    useEffect(() => {\n      if (!animated) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = Date.now();\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n      if (!headClosed) return;\n\n      const throttleMs = 250;\n      const now = Date.now();\n      const elapsed = now - lastCommitRef.current;\n\n      if (elapsed >= throttleMs) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = now;\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n\n      // Schedule a future commit, but only if one isn't already pending —\n      // every chunk arrival re-runs this effect; we don't want to reset\n      // the timer each time (that's debounce, and during continuous\n      // streaming it would never fire).\n      if (pendingTimerRef.current === null) {\n        pendingTimerRef.current = setTimeout(() => {\n          lastCommitRef.current = Date.now();\n          pendingTimerRef.current = null;\n          setThrottledContent(latestContentRef.current);\n        }, throttleMs - elapsed);\n      }\n    }, [trimmedChildren, animated, headClosed]);\n    useEffect(\n      () => () => {\n        if (pendingTimerRef.current) clearTimeout(pendingTimerRef.current);\n      },\n      [],\n    );\n\n    // Live-streaming commitment is sticky for the rest of the session. The\n    // decision is made the moment the head seals:\n    //   • `live` → commit unconditionally\n    //   • `auto` → commit only if no `<script>` has appeared yet (script-\n    //     bearing docs go down the defer path to avoid running setup() on\n    //     partial source)\n    //   • `defer` → never commit; wait for `</html>`\n    // Sticky-ness matters for `auto`: if a `<script>` arrives *after* the\n    // head has already closed and we've started live-streaming, we keep\n    // streaming rather than yanking the rendered content back into a\n    // loading state mid-flight. The shell→static swap at end of streaming\n    // re-runs the document cleanly anyway.\n    useEffect(() => {\n      if (!animated || liveCommitted || !headClosed) return;\n      if (streamingMode === 'live' || (streamingMode === 'auto' && !scriptLocked)) {\n        setLiveCommitted(true);\n      }\n    }, [animated, headClosed, liveCommitted, scriptLocked, streamingMode]);\n\n    // Streaming gate. The iframe can mount in three situations:\n    //   1. content is no longer animating\n    //   2. `</html>` has arrived\n    //   3. live streaming has been committed this session\n    const isStable = !animated || isHtmlContentClosed(trimmedChildren) || liveCommitted;\n\n    const [mode, setMode] = useState<HtmlPreviewMode>(defaultMode);\n\n    // Fragments cannot meaningfully render in preview — force source view.\n    // For streaming content that's not yet stable we keep the user's mode\n    // choice and substitute a loading placeholder in the body instead, so\n    // the toggle UI doesn't flip back and forth as content arrives.\n    const effectiveMode: HtmlPreviewMode = isFragment ? 'source' : mode;\n\n    const contentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      contentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n\n    // Tail-follow the streaming source visible during Phase 1 — anchor\n    // the scroll position to the latest tokens so a slow model's output\n    // doesn't sit pinned to the document head while the user waits.\n    const loadingSourceRef = useRef<HTMLDivElement | null>(null);\n    useEffect(() => {\n      if (isStable) return;\n      const node = loadingSourceRef.current;\n      if (!node) return;\n      node.scrollTop = node.scrollHeight;\n    }, [trimmedChildren, isStable]);\n\n    const getCopyContent = useCallback(() => contentRef.current, []);\n\n    const handleDownload = useCallback(() => {\n      void downloadHtml(contentRef.current, fileName || 'preview.html');\n    }, [fileName]);\n\n    const handleExpand = useCallback(() => {\n      onExpand?.(contentRef.current);\n    }, [onExpand]);\n\n    const background = themeBackground(theme);\n\n    const sourceBody = useMemo(\n      () => (\n        <SyntaxHighlighter\n          animated={animated}\n          className={classNames?.content}\n          language={'html'}\n          style={{ height: '100%', ...customStyles?.content }}\n          variant={variant}\n        >\n          {trimmedChildren}\n        </SyntaxHighlighter>\n      ),\n      [animated, classNames?.content, customStyles?.content, trimmedChildren, variant],\n    );\n\n    const iframeBody = useMemo(\n      () => (\n        <HtmlPreviewIframe\n          animated={animated}\n          background={background}\n          className={classNames?.iframe}\n          content={throttledContent}\n          defaultHeight={defaultHeight}\n          sandbox={sandbox}\n          style={customStyles?.iframe}\n        />\n      ),\n      [\n        background,\n        classNames?.iframe,\n        customStyles?.iframe,\n        defaultHeight,\n        sandbox,\n        throttledContent,\n      ],\n    );\n\n    // Shown when the user is on preview mode but the iframe isn't ready\n    // yet (Phase 1 of streaming: head still arriving). Holds the eventual\n    // iframe height to avoid layout shift on mount.\n    //\n    // Stream the raw source through `SyntaxHighlighter` at low opacity so\n    // the user sees real progress on slow models (a 30-tps DeepSeek\n    // pumping a ~5 KB head can otherwise sit on a static spinner for\n    // 20+ seconds). A small \"Preparing preview…\" badge keeps the loading\n    // state unambiguous. Tail-follow keeps the visible region anchored\n    // to the latest tokens — see the `useEffect` below.\n    const loadingBody = useMemo(\n      () => (\n        <div\n          {...stylex.props(styles.loadingRoot)}\n          style={{ height: defaultHeight ?? DEFAULT_HEIGHT }}\n        >\n          <div\n            ref={loadingSourceRef}\n            {...styleProps(styles.loadingSource, 'lobe-html-preview-loading-source')}\n          >\n            <SyntaxHighlighter animated={animated} language={'html'} variant={'borderless'}>\n              {trimmedChildren}\n            </SyntaxHighlighter>\n          </div>\n          <div {...stylex.props(styles.loadingBackdrop)} />\n          <div {...stylex.props(styles.loadingBadge)}>\n            <Spin size={16} variant=\"network\" />\n            <span>Preparing preview…</span>\n          </div>\n        </div>\n      ),\n      [animated, defaultHeight, trimmedChildren],\n    );\n\n    const previewBody = isStable ? iframeBody : loadingBody;\n\n    const defaultBody = effectiveMode === 'preview' ? previewBody : sourceBody;\n\n    const body = useMemo(() => {\n      if (!bodyRender) return defaultBody;\n      return bodyRender({\n        content: trimmedChildren,\n        mode: effectiveMode,\n        originalNode: defaultBody,\n      });\n    }, [bodyRender, defaultBody, effectiveMode, trimmedChildren]);\n\n    const segmentOptions = useMemo(\n      () => [\n        { label: 'Preview', value: 'preview' as const },\n        { label: 'Source', value: 'source' as const },\n      ],\n      [],\n    );\n\n    const iconSize = actionIconSize || 'small';\n\n    const originalActions: ReactNode = (\n      <>\n        {!isFragment && (\n          <Segmented\n            options={segmentOptions}\n            size={'small'}\n            styles={segmentedStyles}\n            value={effectiveMode}\n            onChange={(v) => setMode(v as HtmlPreviewMode)}\n          />\n        )}\n        {copyable && <CopyButton content={getCopyContent} size={iconSize} />}\n        {downloadable && (\n          <ActionIcon\n            icon={Download}\n            size={iconSize}\n            title={'Download HTML'}\n            onClick={handleDownload}\n          />\n        )}\n        {onExpand && (\n          <ActionIcon\n            icon={Expand}\n            size={iconSize}\n            title={'Open full preview'}\n            onClick={handleExpand}\n          />\n        )}\n      </>\n    );\n\n    const actions = actionsRender\n      ? actionsRender({\n          actionIconSize: iconSize,\n          content: trimmedChildren,\n          getContent: getCopyContent,\n          mode: effectiveMode,\n          originalNode: originalActions,\n          setMode,\n        })\n      : originalActions;\n\n    return (\n      <div\n        data-code-type=\"html-preview\"\n        data-html-preview-language={language}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(false, className), style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          flex={'none'}\n          gap={4}\n          padding={4}\n          onClick={stopPropagation}\n          {...styleProps(\n            styles.toolbar,\n            clsx(actionsHoverCls, classNames?.header),\n            customStyles?.header,\n          )}\n        >\n          {actions}\n        </Flexbox>\n        {body}\n      </div>\n    );\n  },\n);\n\nHtmlPreview.displayName = 'HtmlPreview';\n\nexport default HtmlPreview;\n"],"mappings":"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"}
+{"version":3,"file":"HtmlPreview.mjs","names":["Flexbox","clsx"],"sources":["../../src/HtmlPreview/HtmlPreview.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { Download, Expand } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { actionsHoverCls, rootClassName, rootStyles } from '@/Highlighter/style';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\nimport Segmented, { type SegmentedStyles } from '@/Segmented';\nimport Spin from '@/Spin';\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { stopPropagation } from '@/utils/dom';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { containsScript, DEFAULT_HEIGHT, isFullHtmlDocument, isHtmlContentClosed } from './const';\nimport HtmlPreviewIframe from './Iframe';\nimport { styles } from './style';\nimport type { HtmlPreviewMode, HtmlPreviewProps } from './type';\n\nconst segmentedStyles: SegmentedStyles = {\n  indicator: { borderRadius: cssVar.borderRadiusXS },\n  item: {\n    borderRadius: cssVar.borderRadiusXS,\n    fontSize: 14,\n    fontWeight: 400,\n    height: 23,\n    paddingInline: 7,\n  },\n  root: { borderRadius: cssVar.borderRadiusSM, gap: 0, padding: 2 },\n};\n\nconst themeBackground = (theme?: 'light' | 'dark') => {\n  if (theme === 'dark') return '#1f1f1f';\n  if (theme === 'light') return '#ffffff';\n  return undefined;\n};\n\nconst downloadHtml = async (content: string, fileName: string) => {\n  const blob = new Blob([content], { type: 'text/html;charset=utf-8' });\n  const url = URL.createObjectURL(blob);\n  try {\n    await downloadBlob(url, fileName);\n  } finally {\n    URL.revokeObjectURL(url);\n  }\n};\n\nconst HtmlPreview = memo<HtmlPreviewProps>(\n  ({\n    actionIconSize,\n    actionsRender,\n    animated,\n    bodyRender,\n    children,\n    className,\n    classNames,\n    copyable = true,\n    defaultHeight,\n    defaultMode = 'preview',\n    downloadable = true,\n    fileName,\n    language = 'html',\n    onExpand,\n    sandbox,\n    shadow,\n    streamingMode = 'auto',\n    style,\n    styles: customStyles,\n    theme,\n    variant = 'filled',\n    // `fullFeatured` / `showLanguage` / `defaultExpand` are accepted for API\n    // compatibility with the rest of the Pre family but no longer drive a\n    // separate header — the inline toolbar is always rendered.\n    fullFeatured: _fullFeatured,\n    showLanguage: _showLanguage,\n    defaultExpand: _defaultExpand,\n    ...rest\n  }) => {\n    const trimmedChildren = useMemo(() => (children || '').trim(), [children]);\n    const isFragment = useMemo(() => !isFullHtmlDocument(trimmedChildren), [trimmedChildren]);\n\n    // Per-session tracking. Reset on `animated` edge false → true.\n    const [scriptLocked, setScriptLocked] = useState(false);\n    const [headClosed, setHeadClosed] = useState(false);\n    const [liveCommitted, setLiveCommitted] = useState(false);\n    const prevAnimatedRef = useRef(animated);\n    const lastCommitRef = useRef(0);\n    const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const latestContentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      latestContentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n    useEffect(() => {\n      if (animated && !prevAnimatedRef.current) {\n        setScriptLocked(false);\n        setHeadClosed(false);\n        setLiveCommitted(false);\n        lastCommitRef.current = 0;\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n      }\n      prevAnimatedRef.current = animated;\n    }, [animated]);\n\n    // Sticky script detection: once a `<script>` appears in this session,\n    // auto mode locks into defer.\n    useEffect(() => {\n      if (animated && !scriptLocked && containsScript(trimmedChildren)) {\n        setScriptLocked(true);\n      }\n    }, [trimmedChildren, animated, scriptLocked]);\n\n    // Track whether the head section has closed. Until it does, the iframe\n    // would render either nothing or invalid HTML (style tag mid-stream).\n    // After `</head>` (or `</style>` as a fallback for documents that skip\n    // an explicit head close) we know the visual baseline is locked in.\n    useEffect(() => {\n      if (animated && !headClosed) {\n        const lowered = trimmedChildren.toLowerCase();\n        if (lowered.includes('</head>') || lowered.includes('</style>')) {\n          setHeadClosed(true);\n        }\n      }\n    }, [trimmedChildren, animated, headClosed]);\n\n    // Two-phase streaming commit:\n    //   Phase 1 (head still streaming) — don't mount iframe at all. There's\n    //     nothing meaningful to render and styles aren't applied yet.\n    //   Phase 2 (head closed, body streaming) — commit at most once every\n    //     ~250ms. Important: this is a TRUE throttle, not a debounce. The\n    //     pending timer is held in a ref so it survives effect re-runs;\n    //     when it fires it commits the latest content (via another ref)\n    //     and clears itself, allowing a fresh schedule. If chunks come in\n    //     faster than the throttle window (which they do at ~50/sec) we\n    //     still get a commit every 250ms instead of waiting for streaming\n    //     to pause.\n    //   On streaming end → flush immediately, cancel any pending timer.\n    const [throttledContent, setThrottledContent] = useState(trimmedChildren);\n    useEffect(() => {\n      if (!animated) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = Date.now();\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n      if (!headClosed) return;\n\n      const throttleMs = 250;\n      const now = Date.now();\n      const elapsed = now - lastCommitRef.current;\n\n      if (elapsed >= throttleMs) {\n        if (pendingTimerRef.current) {\n          clearTimeout(pendingTimerRef.current);\n          pendingTimerRef.current = null;\n        }\n        lastCommitRef.current = now;\n        setThrottledContent(trimmedChildren);\n        return;\n      }\n\n      // Schedule a future commit, but only if one isn't already pending —\n      // every chunk arrival re-runs this effect; we don't want to reset\n      // the timer each time (that's debounce, and during continuous\n      // streaming it would never fire).\n      if (pendingTimerRef.current === null) {\n        pendingTimerRef.current = setTimeout(() => {\n          lastCommitRef.current = Date.now();\n          pendingTimerRef.current = null;\n          setThrottledContent(latestContentRef.current);\n        }, throttleMs - elapsed);\n      }\n    }, [trimmedChildren, animated, headClosed]);\n    useEffect(\n      () => () => {\n        if (pendingTimerRef.current) clearTimeout(pendingTimerRef.current);\n      },\n      [],\n    );\n\n    // Live-streaming commitment is sticky for the rest of the session. The\n    // decision is made the moment the head seals:\n    //   • `live` → commit unconditionally\n    //   • `auto` → commit only if no `<script>` has appeared yet (script-\n    //     bearing docs go down the defer path to avoid running setup() on\n    //     partial source)\n    //   • `defer` → never commit; wait for `</html>`\n    // Sticky-ness matters for `auto`: if a `<script>` arrives *after* the\n    // head has already closed and we've started live-streaming, we keep\n    // streaming rather than yanking the rendered content back into a\n    // loading state mid-flight. The shell→static swap at end of streaming\n    // re-runs the document cleanly anyway.\n    useEffect(() => {\n      if (!animated || liveCommitted || !headClosed) return;\n      if (streamingMode === 'live' || (streamingMode === 'auto' && !scriptLocked)) {\n        setLiveCommitted(true);\n      }\n    }, [animated, headClosed, liveCommitted, scriptLocked, streamingMode]);\n\n    // Streaming gate. The iframe can mount in three situations:\n    //   1. content is no longer animating\n    //   2. `</html>` has arrived\n    //   3. live streaming has been committed this session\n    const isStable = !animated || isHtmlContentClosed(trimmedChildren) || liveCommitted;\n\n    const [mode, setMode] = useState<HtmlPreviewMode>(defaultMode);\n\n    // Fragments cannot meaningfully render in preview — force source view.\n    // For streaming content that's not yet stable we keep the user's mode\n    // choice and substitute a loading placeholder in the body instead, so\n    // the toggle UI doesn't flip back and forth as content arrives.\n    const effectiveMode: HtmlPreviewMode = isFragment ? 'source' : mode;\n\n    const contentRef = useRef(trimmedChildren);\n    useEffect(() => {\n      contentRef.current = trimmedChildren;\n    }, [trimmedChildren]);\n\n    // Tail-follow the streaming source visible during Phase 1 — anchor\n    // the scroll position to the latest tokens so a slow model's output\n    // doesn't sit pinned to the document head while the user waits.\n    const loadingSourceRef = useRef<HTMLDivElement | null>(null);\n    useEffect(() => {\n      if (isStable) return;\n      const node = loadingSourceRef.current;\n      if (!node) return;\n      node.scrollTop = node.scrollHeight;\n    }, [trimmedChildren, isStable]);\n\n    const getCopyContent = useCallback(() => contentRef.current, []);\n\n    const handleDownload = useCallback(() => {\n      void downloadHtml(contentRef.current, fileName || 'preview.html');\n    }, [fileName]);\n\n    const handleExpand = useCallback(() => {\n      onExpand?.(contentRef.current);\n    }, [onExpand]);\n\n    const background = themeBackground(theme);\n\n    const sourceBody = useMemo(\n      () => (\n        <SyntaxHighlighter\n          animated={animated}\n          className={classNames?.content}\n          language={'html'}\n          style={{ height: '100%', ...customStyles?.content }}\n          variant={variant}\n        >\n          {trimmedChildren}\n        </SyntaxHighlighter>\n      ),\n      [animated, classNames?.content, customStyles?.content, trimmedChildren, variant],\n    );\n\n    const iframeBody = useMemo(\n      () => (\n        <HtmlPreviewIframe\n          animated={animated}\n          background={background}\n          className={classNames?.iframe}\n          content={throttledContent}\n          defaultHeight={defaultHeight}\n          sandbox={sandbox}\n          style={customStyles?.iframe}\n        />\n      ),\n      [\n        background,\n        classNames?.iframe,\n        customStyles?.iframe,\n        defaultHeight,\n        sandbox,\n        throttledContent,\n      ],\n    );\n\n    // Shown when the user is on preview mode but the iframe isn't ready\n    // yet (Phase 1 of streaming: head still arriving). Holds the eventual\n    // iframe height to avoid layout shift on mount.\n    //\n    // Stream the raw source through `SyntaxHighlighter` at low opacity so\n    // the user sees real progress on slow models (a 30-tps DeepSeek\n    // pumping a ~5 KB head can otherwise sit on a static spinner for\n    // 20+ seconds). A small \"Preparing preview…\" badge keeps the loading\n    // state unambiguous. Tail-follow keeps the visible region anchored\n    // to the latest tokens — see the `useEffect` below.\n    const loadingBody = useMemo(\n      () => (\n        <div\n          {...stylex.props(styles.loadingRoot)}\n          style={{ height: defaultHeight ?? DEFAULT_HEIGHT }}\n        >\n          <div\n            ref={loadingSourceRef}\n            {...styleProps(styles.loadingSource, 'lobe-html-preview-loading-source')}\n          >\n            <SyntaxHighlighter animated={animated} language={'html'} variant={'borderless'}>\n              {trimmedChildren}\n            </SyntaxHighlighter>\n          </div>\n          <div {...stylex.props(styles.loadingBackdrop)} />\n          <div {...stylex.props(styles.loadingBadge)}>\n            <Spin size={16} variant=\"network\" />\n            <span>Preparing preview…</span>\n          </div>\n        </div>\n      ),\n      [animated, defaultHeight, trimmedChildren],\n    );\n\n    const previewBody = isStable ? iframeBody : loadingBody;\n\n    const defaultBody = effectiveMode === 'preview' ? previewBody : sourceBody;\n\n    const body = useMemo(() => {\n      if (!bodyRender) return defaultBody;\n      return bodyRender({\n        content: trimmedChildren,\n        mode: effectiveMode,\n        originalNode: defaultBody,\n      });\n    }, [bodyRender, defaultBody, effectiveMode, trimmedChildren]);\n\n    const segmentOptions = useMemo(\n      () => [\n        { label: 'Preview', value: 'preview' as const },\n        { label: 'Source', value: 'source' as const },\n      ],\n      [],\n    );\n\n    const iconSize = actionIconSize || 'small';\n\n    const originalActions: ReactNode = (\n      <>\n        {!isFragment && (\n          <Segmented\n            options={segmentOptions}\n            size={'small'}\n            styles={segmentedStyles}\n            value={effectiveMode}\n            onChange={(v) => setMode(v as HtmlPreviewMode)}\n          />\n        )}\n        {copyable && <CopyButton content={getCopyContent} size={iconSize} />}\n        {downloadable && (\n          <ActionIcon\n            icon={Download}\n            size={iconSize}\n            title={'Download HTML'}\n            onClick={handleDownload}\n          />\n        )}\n        {onExpand && (\n          <ActionIcon\n            icon={Expand}\n            size={iconSize}\n            title={'Open full preview'}\n            onClick={handleExpand}\n          />\n        )}\n      </>\n    );\n\n    const actions = actionsRender\n      ? actionsRender({\n          actionIconSize: iconSize,\n          content: trimmedChildren,\n          getContent: getCopyContent,\n          mode: effectiveMode,\n          originalNode: originalActions,\n          setMode,\n        })\n      : originalActions;\n\n    return (\n      <div\n        data-code-type=\"html-preview\"\n        data-html-preview-language={language}\n        {...rest}\n        {...styleProps(rootStyles({ shadow, variant }), rootClassName(false, className), style)}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          flex={'none'}\n          gap={4}\n          padding={4}\n          onClick={stopPropagation}\n          {...styleProps(\n            styles.toolbar,\n            clsx(actionsHoverCls, classNames?.header),\n            customStyles?.header,\n          )}\n        >\n          {actions}\n        </Flexbox>\n        {body}\n      </div>\n    );\n  },\n);\n\nHtmlPreview.displayName = 'HtmlPreview';\n\nexport default HtmlPreview;\n"],"mappings":"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"}