@lobehub/ui 5.20.2 → 5.21.0

package/es/HotkeyInput/HotkeyInput.mjs

@@ -9,7 +9,7 @@ import { styles, variants } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx, useThemeMode } from "antd-style";
-import useControlledState from "use-merge-value";
+import useMergeState from "use-merge-value";
 import { isEqual } from "es-toolkit/compat";
 import { Undo2Icon, XIcon } from "lucide-react";
 import { useHotkeys, useRecordHotkeys } from "react-hotkeys-hook";
@@ -22,7 +22,7 @@ const HotkeyInput = memo(({ value = "", defaultValue = "", resetValue = "", onCh
 	const { isDarkMode } = useThemeMode();
 	const { t } = useTranslation(hotkey_default);
 	const isAppleDevice = useMemo(() => checkIsAppleDevice(isApple), [isApple]);
-	const [hotkeyValue, setHotkeyValue] = useControlledState(defaultValue, {
+	const [hotkeyValue, setHotkeyValue] = useMergeState(defaultValue, {
 		defaultValue,
 		onChange,
 		value

package/es/HotkeyInput/HotkeyInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HotkeyInput.mjs","names":["hotkeyMessages","Flexbox"],"sources":["../../src/HotkeyInput/HotkeyInput.tsx"],"sourcesContent":["'use client';\n\nimport { type InputRef } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { isEqual } from 'es-toolkit/compat';\nimport { Undo2Icon, XIcon } from 'lucide-react';\nimport {\n  type FocusEvent,\n  memo,\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useHotkeys, useRecordHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Hotkey from '@/Hotkey';\nimport { checkIsAppleDevice, NORMATIVE_MODIFIER, splitKeysByPlus } from '@/Hotkey/utils';\nimport hotkeyMessages from '@/i18n/resources/en/hotkey';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { styles, variants } from './style';\nimport { type HotkeyInputProps } from './type';\n\nconst HotkeyInput = memo<HotkeyInputProps>(\n  ({\n    value = '',\n    defaultValue = '',\n    resetValue = '',\n    onChange,\n    onClear,\n    onConflict,\n    placeholder,\n    disabled,\n    shadow,\n    allowClear,\n    allowReset = true,\n    style,\n    className,\n    hotkeyConflicts = [],\n    variant,\n    texts,\n    isApple,\n    onBlur,\n    onReset,\n    onFocus,\n  }) => {\n    const [isFocused, setIsFocused] = useState(false);\n    const [hasConflict, setHasConflict] = useState(false);\n    const [hasInvalidCombination, setHasInvalidCombination] = useState(false);\n    const inputRef = useRef<InputRef>(null);\n    const { isDarkMode } = useThemeMode();\n    const { t } = useTranslation(hotkeyMessages);\n    const isAppleDevice = useMemo(() => checkIsAppleDevice(isApple), [isApple]);\n    const [hotkeyValue, setHotkeyValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    // 使用 useRecordHotkeys 处理快捷键录入\n    const [recordedKeys, { start, stop, isRecording, resetKeys }] = useRecordHotkeys();\n\n    useHotkeys(\n      '*',\n      () => {\n        inputRef.current?.blur();\n      },\n      {\n        enableOnContentEditable: true,\n        enableOnFormTags: true,\n        enabled: isRecording && !disabled,\n        keydown: false,\n        keyup: true,\n        preventDefault: true,\n      },\n    );\n\n    // 处理按键，保证格式正确：修饰键在前，最多一个非修饰键在后\n    const formatKeys = useCallback((keysSet: Set<string>) => {\n      const modifiers: string[] = [];\n      const normalKeys: string[] = [];\n\n      for (const key of keysSet) {\n        // 处理不同表示的修饰键\n        const normalizedKey: any = key.toLowerCase();\n        if (NORMATIVE_MODIFIER.includes(normalizedKey)) {\n          // 统一修饰键表示\n          if (\n            (!isAppleDevice && normalizedKey === 'ctrl') ||\n            (isAppleDevice && normalizedKey === 'meta')\n          ) {\n            if (!modifiers.includes('mod')) modifiers.push('mod');\n          } else if (!modifiers.includes(normalizedKey)) {\n            modifiers.push(normalizedKey);\n          }\n        } else {\n          normalKeys.push(key);\n        }\n      }\n\n      // 至少需要一个修饰键\n      if (modifiers.length === 0 && normalKeys.length > 0) {\n        return { isValid: false, keys: [] };\n      }\n\n      // 只允许一个非修饰键，如果有多个，只保留最后一个\n      const finalKey = normalKeys.length > 0 ? [normalKeys.at(-1)] : [];\n      const shortcuts = [modifiers, finalKey];\n\n      return {\n        // 组合必须包含至少一个按键\n        isValid: shortcuts.every((k) => k.length > 0),\n        keys: shortcuts.flat(),\n      };\n    }, []);\n\n    // 获取格式化后的按键字符串\n    const { isValid, keys } = formatKeys(recordedKeys);\n    const keysString = keys.join('+');\n\n    // 检查快捷键冲突\n    const checkHotkeyConflict = useCallback(\n      (newHotkey: string): boolean => {\n        return hotkeyConflicts\n          .filter((conflictKey) => conflictKey !== resetValue)\n          .some((conflictKey) => {\n            const newKeys = splitKeysByPlus(newHotkey);\n            const conflictKeys = splitKeysByPlus(conflictKey);\n            return isEqual(newKeys, conflictKeys);\n          });\n      },\n      [hotkeyConflicts],\n    );\n\n    // 当按键组合完成时处理结果\n    useEffect(() => {\n      if (recordedKeys.size > 0 && !isRecording) {\n        if (!isValid) {\n          setHasInvalidCombination(true);\n          setHasConflict(false);\n          return;\n        }\n\n        setHasInvalidCombination(false);\n        const newKeysString = keysString;\n\n        // 检查冲突\n        const conflict = checkHotkeyConflict(newKeysString);\n        if (conflict) {\n          setHasConflict(true);\n          onConflict?.(newKeysString);\n        } else {\n          setHasConflict(false);\n          setHotkeyValue?.(newKeysString);\n        }\n      }\n    }, [\n      recordedKeys,\n      isRecording,\n      isValid,\n      keysString,\n      checkHotkeyConflict,\n      setHotkeyValue,\n      onConflict,\n    ]);\n\n    // 处理输入框焦点\n    const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      setIsFocused(true);\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      start(); // 开始记录\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {\n      setIsFocused(false);\n      stop(); // 停止记录\n      onBlur?.(e);\n    };\n\n    const handleClear = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setHotkeyValue?.('');\n      resetKeys();\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      setIsFocused(false);\n      stop();\n      onClear?.(hotkeyValue);\n    };\n\n    // 重置功能\n    const handleReset = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setHotkeyValue?.(resetValue);\n      resetKeys();\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      setIsFocused(false);\n      stop(); // 停止记录\n      onReset?.(hotkeyValue, resetValue);\n    };\n\n    const handleClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      if (disabled || isFocused) return;\n      inputRef.current?.focus();\n    };\n\n    const placeholderText = placeholder ?? t('hotkey.placeholder');\n    const resetTitle = texts?.reset ?? t('hotkey.reset');\n    const clearTitle = texts?.clear ?? t('hotkey.clear');\n    const conflictText = texts?.conflicts ?? t('hotkey.conflict');\n    const invalidText = texts?.invalidCombination ?? t('hotkey.invalidCombination');\n\n    return (\n      <Flexbox\n        className={className}\n        gap={8}\n        style={{\n          position: 'relative',\n          ...style,\n        }}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          justify={'space-between'}\n          className={cx(\n            variants({\n              disabled,\n              error: hasConflict || hasInvalidCombination,\n              focused: isFocused,\n              shadow,\n              variant: variant || (isDarkMode ? 'filled' : 'outlined'),\n            }),\n          )}\n          onClick={handleClick}\n        >\n          <div style={{ pointerEvents: 'none' }}>\n            {isRecording ? (\n              <span className={styles.placeholder}>\n                {keys.length > 0 ? <Hotkey keys={keysString} /> : placeholderText}\n              </span>\n            ) : hotkeyValue ? (\n              <Hotkey keys={hotkeyValue} />\n            ) : (\n              <span className={styles.placeholder}>{placeholderText}</span>\n            )}\n          </div>\n\n          {/* 隐藏的输入框，用于接收焦点 */}\n          <input\n            readOnly\n            className={styles.hiddenInput}\n            disabled={disabled}\n            ref={inputRef as any}\n            style={{ pointerEvents: 'none' }}\n            onBlur={handleBlur}\n            onFocus={handleFocus}\n          />\n\n          {!isFocused && hotkeyValue && !disabled && (allowReset || allowClear) && (\n            <Flexbox horizontal gap={4}>\n              {allowReset && hotkeyValue !== resetValue && (\n                <ActionIcon\n                  icon={Undo2Icon}\n                  size={'small'}\n                  title={resetTitle}\n                  variant={'filled'}\n                  onClick={handleReset}\n                />\n              )}\n              {allowClear && (\n                <ActionIcon\n                  icon={XIcon}\n                  size={'small'}\n                  title={clearTitle}\n                  variant={'filled'}\n                  onClick={handleClear}\n                />\n              )}\n            </Flexbox>\n          )}\n        </Flexbox>\n        {hasConflict && <div className={styles.errorText}>{conflictText}</div>}\n        {hasInvalidCombination && <div className={styles.errorText}>{invalidText}</div>}\n      </Flexbox>\n    );\n  },\n);\n\nHotkeyInput.displayName = 'HotkeyInput';\n\nexport default HotkeyInput;\n"],"mappings":";;;;;;;;;;;;;;;;AA6BA,MAAM,cAAc,MACjB,EACC,QAAQ,IACR,eAAe,IACf,aAAa,IACb,UACA,SACA,YACA,aACA,UACA,QACA,YACA,aAAa,MACb,OACA,WACA,kBAAkB,EAAE,EACpB,SACA,OACA,SACA,QACA,SACA,cACI;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,CAAC,uBAAuB,4BAA4B,SAAS,MAAM;CACzE,MAAM,WAAW,OAAiB,KAAK;CACvC,MAAM,EAAE,eAAe,cAAc;CACrC,MAAM,EAAE,MAAM,eAAeA,eAAe;CAC5C,MAAM,gBAAgB,cAAc,mBAAmB,QAAQ,EAAE,CAAC,QAAQ,CAAC;CAC3E,MAAM,CAAC,aAAa,kBAAkB,mBAAmB,cAAc;EACrE;EACA;EACA;EACD,CAAC;CAGF,MAAM,CAAC,cAAc,EAAE,OAAO,MAAM,aAAa,eAAe,kBAAkB;AAElF,YACE,WACM;AACJ,WAAS,SAAS,MAAM;IAE1B;EACE,yBAAyB;EACzB,kBAAkB;EAClB,SAAS,eAAe,CAAC;EACzB,SAAS;EACT,OAAO;EACP,gBAAgB;EACjB,CACF;CA0CD,MAAM,EAAE,SAAS,SAvCE,aAAa,YAAyB;EACvD,MAAM,YAAsB,EAAE;EAC9B,MAAM,aAAuB,EAAE;AAE/B,OAAK,MAAM,OAAO,SAAS;GAEzB,MAAM,gBAAqB,IAAI,aAAa;AAC5C,OAAI,mBAAmB,SAAS,cAAc;QAGzC,CAAC,iBAAiB,kBAAkB,UACpC,iBAAiB,kBAAkB;SAEhC,CAAC,UAAU,SAAS,MAAM,CAAE,WAAU,KAAK,MAAM;eAC5C,CAAC,UAAU,SAAS,cAAc,CAC3C,WAAU,KAAK,cAAc;SAG/B,YAAW,KAAK,IAAI;;AAKxB,MAAI,UAAU,WAAW,KAAK,WAAW,SAAS,EAChD,QAAO;GAAE,SAAS;GAAO,MAAM,EAAE;GAAE;EAKrC,MAAM,YAAY,CAAC,WADF,WAAW,SAAS,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC,GAAG,EAAE,CAC1B;AAEvC,SAAO;GAEL,SAAS,UAAU,OAAO,MAAM,EAAE,SAAS,EAAE;GAC7C,MAAM,UAAU,MAAM;GACvB;IACA,EAAE,CAG+B,CAAC,aAAa;CAClD,MAAM,aAAa,KAAK,KAAK,IAAI;CAGjC,MAAM,sBAAsB,aACzB,cAA+B;AAC9B,SAAO,gBACJ,QAAQ,gBAAgB,gBAAgB,WAAW,CACnD,MAAM,gBAAgB;AAGrB,UAAO,QAFS,gBAAgB,UAEV,EADD,gBAAgB,YACD,CAAC;IACrC;IAEN,CAAC,gBAAgB,CAClB;AAGD,iBAAgB;AACd,MAAI,aAAa,OAAO,KAAK,CAAC,aAAa;AACzC,OAAI,CAAC,SAAS;AACZ,6BAAyB,KAAK;AAC9B,mBAAe,MAAM;AACrB;;AAGF,4BAAyB,MAAM;GAC/B,MAAM,gBAAgB;AAItB,OADiB,oBAAoB,cACzB,EAAE;AACZ,mBAAe,KAAK;AACpB,iBAAa,cAAc;UACtB;AACL,mBAAe,MAAM;AACrB,qBAAiB,cAAc;;;IAGlC;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAGF,MAAM,eAAe,MAAoC;AACvD,MAAI,SAAU;AACd,eAAa,KAAK;AAClB,iBAAe,MAAM;AACrB,2BAAyB,MAAM;AAC/B,SAAO;AACP,YAAU,EAAE;;CAGd,MAAM,cAAc,MAAoC;AACtD,eAAa,MAAM;AACnB,QAAM;AACN,WAAS,EAAE;;CAGb,MAAM,eAAe,MAAkB;AACrC,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,mBAAiB,GAAG;AACpB,aAAW;AACX,iBAAe,MAAM;AACrB,2BAAyB,MAAM;AAC/B,eAAa,MAAM;AACnB,QAAM;AACN,YAAU,YAAY;;CAIxB,MAAM,eAAe,MAAkB;AACrC,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,mBAAiB,WAAW;AAC5B,aAAW;AACX,iBAAe,MAAM;AACrB,2BAAyB,MAAM;AAC/B,eAAa,MAAM;AACnB,QAAM;AACN,YAAU,aAAa,WAAW;;CAGpC,MAAM,eAAe,MAAkB;AACrC,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,MAAI,YAAY,UAAW;AAC3B,WAAS,SAAS,OAAO;;CAG3B,MAAM,kBAAkB,eAAe,EAAE,qBAAqB;CAC9D,MAAM,aAAa,OAAO,SAAS,EAAE,eAAe;CACpD,MAAM,aAAa,OAAO,SAAS,EAAE,eAAe;CACpD,MAAM,eAAe,OAAO,aAAa,EAAE,kBAAkB;CAC7D,MAAM,cAAc,OAAO,sBAAsB,EAAE,4BAA4B;AAE/E,QACE,qBAACC,mBAAD;EACa;EACX,KAAK;EACL,OAAO;GACL,UAAU;GACV,GAAG;GACJ;YANH;GAQE,qBAACA,mBAAD;IACE,YAAA;IACA,OAAO;IACP,SAAS;IACT,WAAW,GACT,SAAS;KACP;KACA,OAAO,eAAe;KACtB,SAAS;KACT;KACA,SAAS,YAAY,aAAa,WAAW;KAC9C,CAAC,CACH;IACD,SAAS;cAbX;KAeE,oBAAC,OAAD;MAAK,OAAO,EAAE,eAAe,QAAQ;gBAClC,cACC,oBAAC,QAAD;OAAM,WAAW,OAAO;iBACrB,KAAK,SAAS,IAAI,oBAAC,QAAD,EAAQ,MAAM,YAAc,CAAA,GAAG;OAC7C,CAAA,GACL,cACF,oBAAC,QAAD,EAAQ,MAAM,aAAe,CAAA,GAE7B,oBAAC,QAAD;OAAM,WAAW,OAAO;iBAAc;OAAuB,CAAA;MAE3D,CAAA;KAGN,oBAAC,SAAD;MACE,UAAA;MACA,WAAW,OAAO;MACR;MACV,KAAK;MACL,OAAO,EAAE,eAAe,QAAQ;MAChC,QAAQ;MACR,SAAS;MACT,CAAA;KAED,CAAC,aAAa,eAAe,CAAC,aAAa,cAAc,eACxD,qBAACA,mBAAD;MAAS,YAAA;MAAW,KAAK;gBAAzB,CACG,cAAc,gBAAgB,cAC7B,oBAAC,YAAD;OACE,MAAM;OACN,MAAM;OACN,OAAO;OACP,SAAS;OACT,SAAS;OACT,CAAA,EAEH,cACC,oBAAC,YAAD;OACE,MAAM;OACN,MAAM;OACN,OAAO;OACP,SAAS;OACT,SAAS;OACT,CAAA,CAEI;;KAEJ;;GACT,eAAe,oBAAC,OAAD;IAAK,WAAW,OAAO;cAAY;IAAmB,CAAA;GACrE,yBAAyB,oBAAC,OAAD;IAAK,WAAW,OAAO;cAAY;IAAkB,CAAA;GACvE;;EAGf;AAED,YAAY,cAAc"}
+{"version":3,"file":"HotkeyInput.mjs","names":["hotkeyMessages","useControlledState","Flexbox"],"sources":["../../src/HotkeyInput/HotkeyInput.tsx"],"sourcesContent":["'use client';\n\nimport { type InputRef } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { isEqual } from 'es-toolkit/compat';\nimport { Undo2Icon, XIcon } from 'lucide-react';\nimport {\n  type FocusEvent,\n  memo,\n  type MouseEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useHotkeys, useRecordHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Hotkey from '@/Hotkey';\nimport { checkIsAppleDevice, NORMATIVE_MODIFIER, splitKeysByPlus } from '@/Hotkey/utils';\nimport hotkeyMessages from '@/i18n/resources/en/hotkey';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { styles, variants } from './style';\nimport { type HotkeyInputProps } from './type';\n\nconst HotkeyInput = memo<HotkeyInputProps>(\n  ({\n    value = '',\n    defaultValue = '',\n    resetValue = '',\n    onChange,\n    onClear,\n    onConflict,\n    placeholder,\n    disabled,\n    shadow,\n    allowClear,\n    allowReset = true,\n    style,\n    className,\n    hotkeyConflicts = [],\n    variant,\n    texts,\n    isApple,\n    onBlur,\n    onReset,\n    onFocus,\n  }) => {\n    const [isFocused, setIsFocused] = useState(false);\n    const [hasConflict, setHasConflict] = useState(false);\n    const [hasInvalidCombination, setHasInvalidCombination] = useState(false);\n    const inputRef = useRef<InputRef>(null);\n    const { isDarkMode } = useThemeMode();\n    const { t } = useTranslation(hotkeyMessages);\n    const isAppleDevice = useMemo(() => checkIsAppleDevice(isApple), [isApple]);\n    const [hotkeyValue, setHotkeyValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    // 使用 useRecordHotkeys 处理快捷键录入\n    const [recordedKeys, { start, stop, isRecording, resetKeys }] = useRecordHotkeys();\n\n    useHotkeys(\n      '*',\n      () => {\n        inputRef.current?.blur();\n      },\n      {\n        enableOnContentEditable: true,\n        enableOnFormTags: true,\n        enabled: isRecording && !disabled,\n        keydown: false,\n        keyup: true,\n        preventDefault: true,\n      },\n    );\n\n    // 处理按键，保证格式正确：修饰键在前，最多一个非修饰键在后\n    const formatKeys = useCallback((keysSet: Set<string>) => {\n      const modifiers: string[] = [];\n      const normalKeys: string[] = [];\n\n      for (const key of keysSet) {\n        // 处理不同表示的修饰键\n        const normalizedKey: any = key.toLowerCase();\n        if (NORMATIVE_MODIFIER.includes(normalizedKey)) {\n          // 统一修饰键表示\n          if (\n            (!isAppleDevice && normalizedKey === 'ctrl') ||\n            (isAppleDevice && normalizedKey === 'meta')\n          ) {\n            if (!modifiers.includes('mod')) modifiers.push('mod');\n          } else if (!modifiers.includes(normalizedKey)) {\n            modifiers.push(normalizedKey);\n          }\n        } else {\n          normalKeys.push(key);\n        }\n      }\n\n      // 至少需要一个修饰键\n      if (modifiers.length === 0 && normalKeys.length > 0) {\n        return { isValid: false, keys: [] };\n      }\n\n      // 只允许一个非修饰键，如果有多个，只保留最后一个\n      const finalKey = normalKeys.length > 0 ? [normalKeys.at(-1)] : [];\n      const shortcuts = [modifiers, finalKey];\n\n      return {\n        // 组合必须包含至少一个按键\n        isValid: shortcuts.every((k) => k.length > 0),\n        keys: shortcuts.flat(),\n      };\n    }, []);\n\n    // 获取格式化后的按键字符串\n    const { isValid, keys } = formatKeys(recordedKeys);\n    const keysString = keys.join('+');\n\n    // 检查快捷键冲突\n    const checkHotkeyConflict = useCallback(\n      (newHotkey: string): boolean => {\n        return hotkeyConflicts\n          .filter((conflictKey) => conflictKey !== resetValue)\n          .some((conflictKey) => {\n            const newKeys = splitKeysByPlus(newHotkey);\n            const conflictKeys = splitKeysByPlus(conflictKey);\n            return isEqual(newKeys, conflictKeys);\n          });\n      },\n      [hotkeyConflicts],\n    );\n\n    // 当按键组合完成时处理结果\n    useEffect(() => {\n      if (recordedKeys.size > 0 && !isRecording) {\n        if (!isValid) {\n          setHasInvalidCombination(true);\n          setHasConflict(false);\n          return;\n        }\n\n        setHasInvalidCombination(false);\n        const newKeysString = keysString;\n\n        // 检查冲突\n        const conflict = checkHotkeyConflict(newKeysString);\n        if (conflict) {\n          setHasConflict(true);\n          onConflict?.(newKeysString);\n        } else {\n          setHasConflict(false);\n          setHotkeyValue?.(newKeysString);\n        }\n      }\n    }, [\n      recordedKeys,\n      isRecording,\n      isValid,\n      keysString,\n      checkHotkeyConflict,\n      setHotkeyValue,\n      onConflict,\n    ]);\n\n    // 处理输入框焦点\n    const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      setIsFocused(true);\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      start(); // 开始记录\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {\n      setIsFocused(false);\n      stop(); // 停止记录\n      onBlur?.(e);\n    };\n\n    const handleClear = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setHotkeyValue?.('');\n      resetKeys();\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      setIsFocused(false);\n      stop();\n      onClear?.(hotkeyValue);\n    };\n\n    // 重置功能\n    const handleReset = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setHotkeyValue?.(resetValue);\n      resetKeys();\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      setIsFocused(false);\n      stop(); // 停止记录\n      onReset?.(hotkeyValue, resetValue);\n    };\n\n    const handleClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      if (disabled || isFocused) return;\n      inputRef.current?.focus();\n    };\n\n    const placeholderText = placeholder ?? t('hotkey.placeholder');\n    const resetTitle = texts?.reset ?? t('hotkey.reset');\n    const clearTitle = texts?.clear ?? t('hotkey.clear');\n    const conflictText = texts?.conflicts ?? t('hotkey.conflict');\n    const invalidText = texts?.invalidCombination ?? t('hotkey.invalidCombination');\n\n    return (\n      <Flexbox\n        className={className}\n        gap={8}\n        style={{\n          position: 'relative',\n          ...style,\n        }}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          justify={'space-between'}\n          className={cx(\n            variants({\n              disabled,\n              error: hasConflict || hasInvalidCombination,\n              focused: isFocused,\n              shadow,\n              variant: variant || (isDarkMode ? 'filled' : 'outlined'),\n            }),\n          )}\n          onClick={handleClick}\n        >\n          <div style={{ pointerEvents: 'none' }}>\n            {isRecording ? (\n              <span className={styles.placeholder}>\n                {keys.length > 0 ? <Hotkey keys={keysString} /> : placeholderText}\n              </span>\n            ) : hotkeyValue ? (\n              <Hotkey keys={hotkeyValue} />\n            ) : (\n              <span className={styles.placeholder}>{placeholderText}</span>\n            )}\n          </div>\n\n          {/* 隐藏的输入框，用于接收焦点 */}\n          <input\n            readOnly\n            className={styles.hiddenInput}\n            disabled={disabled}\n            ref={inputRef as any}\n            style={{ pointerEvents: 'none' }}\n            onBlur={handleBlur}\n            onFocus={handleFocus}\n          />\n\n          {!isFocused && hotkeyValue && !disabled && (allowReset || allowClear) && (\n            <Flexbox horizontal gap={4}>\n              {allowReset && hotkeyValue !== resetValue && (\n                <ActionIcon\n                  icon={Undo2Icon}\n                  size={'small'}\n                  title={resetTitle}\n                  variant={'filled'}\n                  onClick={handleReset}\n                />\n              )}\n              {allowClear && (\n                <ActionIcon\n                  icon={XIcon}\n                  size={'small'}\n                  title={clearTitle}\n                  variant={'filled'}\n                  onClick={handleClear}\n                />\n              )}\n            </Flexbox>\n          )}\n        </Flexbox>\n        {hasConflict && <div className={styles.errorText}>{conflictText}</div>}\n        {hasInvalidCombination && <div className={styles.errorText}>{invalidText}</div>}\n      </Flexbox>\n    );\n  },\n);\n\nHotkeyInput.displayName = 'HotkeyInput';\n\nexport default HotkeyInput;\n"],"mappings":"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"}

package/es/HotkeyInput/index.d.mts

@@ -1,3 +1,3 @@
 import { HotkeyInputProps } from "./type.mjs";
-import { HotkeyInput } from "./HotkeyInput.mjs";
+import HotkeyInput from "./HotkeyInput.mjs";
 export { HotkeyInputProps, HotkeyInput as default };

package/es/HotkeyInput/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/HotkeyInput/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: lobeStaticStylish.variantBorderless,\n    disabled: lobeStaticStylish.disabled,\n    error: css`\n      border: 1px solid ${cssVar.colorError};\n    `,\n    errorText: css`\n      font-size: 12px;\n      color: ${cssVar.colorError};\n    `,\n    filled: lobeStaticStylish.variantFilled,\n    focused: css`\n      background: ${cssVar.colorFillSecondary} !important;\n    `,\n    hiddenInput: css`\n      cursor: text;\n\n      position: absolute;\n      z-index: -1;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n\n      width: 100%;\n      height: 100%;\n\n      opacity: 0;\n    `,\n    outlined: lobeStaticStylish.variantOutlined,\n    placeholder: css`\n      color: ${cssVar.colorTextDescription};\n    `,\n    root: css`\n      cursor: pointer;\n\n      position: relative;\n\n      max-width: 100%;\n      height: 36px;\n      padding-block: 0;\n      padding-inline: 12px;\n      border-radius: ${cssVar.borderRadius};\n    `,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    disabled: false,\n    error: false,\n    shadow: false,\n    variant: 'outlined',\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    focused: {\n      false: null,\n      true: styles.focused,\n    },\n    error: {\n      fales: null,\n      true: styles.error,\n    },\n    disabled: {\n      false: null,\n      true: styles.disabled,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;AAC5D,QAAO;EACL,YAAYA,cAAkB;EAC9B,UAAUA,cAAkB;EAC5B,OAAO,GAAG;0BACY,OAAO,WAAW;;EAExC,WAAW,GAAG;;eAEH,OAAO,WAAW;;EAE7B,QAAQA,cAAkB;EAC1B,SAAS,GAAG;oBACI,OAAO,mBAAmB;;EAE1C,aAAa,GAAG;;;;;;;;;;;;;EAahB,UAAUA,cAAkB;EAC5B,aAAa,GAAG;eACL,OAAO,qBAAqB;;EAEvC,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;EAEvC,QAAQA,cAAkB;EAC3B;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,UAAU;EACV,OAAO;EACP,QAAQ;EACR,SAAS;EACV;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,SAAS;GACP,OAAO;GACP,MAAM,OAAO;GACd;EACD,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,UAAU;GACR,OAAO;GACP,MAAM,OAAO;GACd;EACF;CACF,CAAC"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/HotkeyInput/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: lobeStaticStylish.variantBorderless,\n    disabled: lobeStaticStylish.disabled,\n    error: css`\n      border: 1px solid ${cssVar.colorError};\n    `,\n    errorText: css`\n      font-size: 12px;\n      color: ${cssVar.colorError};\n    `,\n    filled: lobeStaticStylish.variantFilled,\n    focused: css`\n      background: ${cssVar.colorFillSecondary} !important;\n    `,\n    hiddenInput: css`\n      cursor: text;\n\n      position: absolute;\n      z-index: -1;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n\n      width: 100%;\n      height: 100%;\n\n      opacity: 0;\n    `,\n    outlined: lobeStaticStylish.variantOutlined,\n    placeholder: css`\n      color: ${cssVar.colorTextDescription};\n    `,\n    root: css`\n      cursor: pointer;\n\n      position: relative;\n\n      max-width: 100%;\n      height: 36px;\n      padding-block: 0;\n      padding-inline: 12px;\n      border-radius: ${cssVar.borderRadius};\n    `,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    disabled: false,\n    error: false,\n    shadow: false,\n    variant: 'outlined',\n  },\n\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    focused: {\n      false: null,\n      true: styles.focused,\n    },\n    error: {\n      fales: null,\n      true: styles.error,\n    },\n    disabled: {\n      false: null,\n      true: styles.disabled,\n    },\n  },\n});\n"],"mappings":";;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,YAAYA,cAAkB;EAC9B,UAAUA,cAAkB;EAC5B,OAAO,GAAG;0BACY,OAAO,WAAW;;EAExC,WAAW,GAAG;;eAEH,OAAO,WAAW;;EAE7B,QAAQA,cAAkB;EAC1B,SAAS,GAAG;oBACI,OAAO,mBAAmB;;EAE1C,aAAa,GAAG;;;;;;;;;;;;;EAahB,UAAUA,cAAkB;EAC5B,aAAa,GAAG;eACL,OAAO,qBAAqB;;EAEvC,MAAM,GAAG;;;;;;;;;uBASU,OAAO,aAAa;;EAEvC,QAAQA,cAAkB;CAC5B;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,UAAU;EACV,OAAO;EACP,QAAQ;EACR,SAAS;CACX;CAEA,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;EACrB;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,OAAO;GACP,MAAM,OAAO;EACf;EACA,OAAO;GACL,OAAO;GACP,MAAM,OAAO;EACf;EACA,UAAU;GACR,OAAO;GACP,MAAM,OAAO;EACf;CACF;AACF,CAAC"}

package/es/HotkeyInput/type.d.mts

@@ -1,6 +1,5 @@
 import { CSSProperties } from "react";
 import { InputProps } from "antd";
-
 //#region src/HotkeyInput/type.d.ts
 interface HotkeyInputProps {
   allowClear?: boolean;

package/es/HtmlPreview/HtmlPreview.d.mts

@@ -1,8 +1,6 @@
 import { HtmlPreviewProps } from "./type.mjs";
-import * as _$react from "react";
-
 //#region src/HtmlPreview/HtmlPreview.d.ts
-declare const HtmlPreview: _$react.NamedExoticComponent<HtmlPreviewProps>;
+declare const HtmlPreview: import("react").NamedExoticComponent<HtmlPreviewProps>;
 //#endregion
-export { HtmlPreview };
+export { HtmlPreview as default };
 //# sourceMappingURL=HtmlPreview.d.mts.map

package/es/HtmlPreview/HtmlPreview.mjs

@@ -9,7 +9,7 @@ import { actionsHoverCls, variants } from "../Highlighter/style.mjs";
 import { containsScript, isFullHtmlDocument, isHtmlContentClosed } from "./const.mjs";
 import NeuralNetworkLoading from "../NeuralNetworkLoading/NeuralNetworkLoading.mjs";
 import Segmented from "../Segmented/Segmented.mjs";
-import HtmlPreviewIframe from "./Iframe.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 { createStyles, cx, keyframes } from "antd-style";

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 { createStyles, cx, keyframes } from 'antd-style';\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, variants } from '@/Highlighter/style';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\nimport NeuralNetworkLoading from '@/NeuralNetworkLoading';\nimport Segmented from '@/Segmented';\nimport { stopPropagation } from '@/utils/dom';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { containsScript, DEFAULT_HEIGHT, isFullHtmlDocument, isHtmlContentClosed } from './const';\nimport HtmlPreviewIframe from './Iframe';\nimport type { HtmlPreviewMode, HtmlPreviewProps } from './type';\n\n// Sheen sweep direction: left → right.\n// `background-position` works inversely from \"where the image is drawn\":\n// at `200%` the over-sized gradient starts off to the left of the\n// container, at `-200%` it ends off to the right — so animating\n// 200% → -200% moves the visible bright spot from left to right.\nconst shimmer = keyframes`\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n`;\n\nconst useStyles = createStyles(({ css, cssVar, isDarkMode }) => ({\n  loadingBackdrop: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 1;\n    inset: 0;\n\n    /* Subtle moving sheen so it doesn't look frozen. */\n    background: linear-gradient(\n      90deg,\n      transparent 0%,\n      ${isDarkMode ? 'rgba(255, 255, 255, 0.04)' : 'rgba(0, 0, 0, 0.04)'} 50%,\n      transparent 100%\n    );\n    background-repeat: no-repeat;\n    background-size: 200% 100%;\n\n    animation: ${shimmer} 1.6s ${cssVar.motionEaseInOut} infinite;\n  `,\n  loadingBadge: css`\n    position: absolute;\n    z-index: 2;\n    inset-block-start: 12px;\n    inset-inline-start: 12px;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    padding-block: 4px;\n    padding-inline: 6px 10px;\n    border-radius: 999px;\n\n    font-size: 12px;\n    color: ${cssVar.colorTextDescription};\n\n    background: ${cssVar.colorBgContainer};\n    backdrop-filter: blur(8px);\n    box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n  `,\n  // The streaming source visible during Phase 1 — heavily faded so it\n  // reads as \"this is preview-pending content\" rather than the finished\n  // article. Auto-follows the tail so the user can see new tokens land\n  // even on slow models.\n  loadingSource: css`\n    pointer-events: none;\n    overflow: hidden;\n    height: 100%;\n\n    /* Faded out so the iframe transition feels like content lighting up,\n       not like one document jump-cutting to another. */\n    opacity: 0.45;\n\n    /* SyntaxHighlighter sets its own background; flatten so the shimmer\n       overlay reads cleanly on top. */\n    & [data-code-type='highlighter'] {\n      background: transparent;\n      box-shadow: none;\n    }\n\n    /* Tail-follow is layout-only — we anchor the scrollable element to\n       its scrollHeight via the ref + effect; CSS just keeps the\n       overflow hidden. */\n    & pre,\n    & code {\n      background: transparent !important;\n    }\n  `,\n  loadingRoot: css`\n    position: relative;\n    overflow: hidden;\n    background: ${isDarkMode ? '#1f1f1f' : '#fafafa'};\n  `,\n  // Inline top-right toolbar. Tagged with `actionsHoverCls` so the Highlighter\n  // container's `&:hover .${actionsHoverCls} { opacity: 1 }` rule flips it\n  // in/out as the user moves over the preview — same UX as the regular code\n  // block actions.\n  toolbar: cx(\n    actionsHoverCls,\n    css`\n      position: absolute;\n      z-index: 2;\n      inset-block-start: 8px;\n      inset-inline-end: 8px;\n\n      padding: 4px;\n      border-radius: ${cssVar.borderRadiusLG};\n\n      opacity: 0;\n      background: ${cssVar.colorBgContainer};\n      backdrop-filter: blur(8px);\n      box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n\n      transition: opacity 0.2s ${cssVar.motionEaseOut};\n\n      &:focus-within {\n        opacity: 1;\n      }\n    `,\n  ),\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 { styles } = useStyles();\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 className={styles.loadingRoot} style={{ height: defaultHeight ?? DEFAULT_HEIGHT }}>\n          <div className={styles.loadingSource} ref={loadingSourceRef}>\n            <SyntaxHighlighter animated={animated} language={'html'} variant={'borderless'}>\n              {trimmedChildren}\n            </SyntaxHighlighter>\n          </div>\n          <div className={styles.loadingBackdrop} />\n          <div className={styles.loadingBadge}>\n            <NeuralNetworkLoading size={16} />\n            <span>Preparing preview…</span>\n          </div>\n        </div>\n      ),\n      [animated, defaultHeight, styles, 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            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        className={cx(variants({ shadow, variant }), className)}\n        data-code-type=\"html-preview\"\n        data-html-preview-language={language}\n        style={style}\n        {...rest}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(styles.toolbar, classNames?.header)}\n          flex={'none'}\n          gap={4}\n          style={customStyles?.header}\n          onClick={stopPropagation}\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"],"sources":["../../src/HtmlPreview/HtmlPreview.tsx"],"sourcesContent":["'use client';\n\nimport { createStyles, cx, keyframes } from 'antd-style';\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, variants } from '@/Highlighter/style';\nimport SyntaxHighlighter from '@/Highlighter/SyntaxHighlighter';\nimport NeuralNetworkLoading from '@/NeuralNetworkLoading';\nimport Segmented from '@/Segmented';\nimport { stopPropagation } from '@/utils/dom';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { containsScript, DEFAULT_HEIGHT, isFullHtmlDocument, isHtmlContentClosed } from './const';\nimport HtmlPreviewIframe from './Iframe';\nimport type { HtmlPreviewMode, HtmlPreviewProps } from './type';\n\n// Sheen sweep direction: left → right.\n// `background-position` works inversely from \"where the image is drawn\":\n// at `200%` the over-sized gradient starts off to the left of the\n// container, at `-200%` it ends off to the right — so animating\n// 200% → -200% moves the visible bright spot from left to right.\nconst shimmer = keyframes`\n  0%   { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n`;\n\nconst useStyles = createStyles(({ css, cssVar, isDarkMode }) => ({\n  loadingBackdrop: css`\n    pointer-events: none;\n\n    position: absolute;\n    z-index: 1;\n    inset: 0;\n\n    /* Subtle moving sheen so it doesn't look frozen. */\n    background: linear-gradient(\n      90deg,\n      transparent 0%,\n      ${isDarkMode ? 'rgba(255, 255, 255, 0.04)' : 'rgba(0, 0, 0, 0.04)'} 50%,\n      transparent 100%\n    );\n    background-repeat: no-repeat;\n    background-size: 200% 100%;\n\n    animation: ${shimmer} 1.6s ${cssVar.motionEaseInOut} infinite;\n  `,\n  loadingBadge: css`\n    position: absolute;\n    z-index: 2;\n    inset-block-start: 12px;\n    inset-inline-start: 12px;\n\n    display: inline-flex;\n    gap: 8px;\n    align-items: center;\n\n    padding-block: 4px;\n    padding-inline: 6px 10px;\n    border-radius: 999px;\n\n    font-size: 12px;\n    color: ${cssVar.colorTextDescription};\n\n    background: ${cssVar.colorBgContainer};\n    backdrop-filter: blur(8px);\n    box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n  `,\n  // The streaming source visible during Phase 1 — heavily faded so it\n  // reads as \"this is preview-pending content\" rather than the finished\n  // article. Auto-follows the tail so the user can see new tokens land\n  // even on slow models.\n  loadingSource: css`\n    pointer-events: none;\n    overflow: hidden;\n    height: 100%;\n\n    /* Faded out so the iframe transition feels like content lighting up,\n       not like one document jump-cutting to another. */\n    opacity: 0.45;\n\n    /* SyntaxHighlighter sets its own background; flatten so the shimmer\n       overlay reads cleanly on top. */\n    & [data-code-type='highlighter'] {\n      background: transparent;\n      box-shadow: none;\n    }\n\n    /* Tail-follow is layout-only — we anchor the scrollable element to\n       its scrollHeight via the ref + effect; CSS just keeps the\n       overflow hidden. */\n    & pre,\n    & code {\n      background: transparent !important;\n    }\n  `,\n  loadingRoot: css`\n    position: relative;\n    overflow: hidden;\n    background: ${isDarkMode ? '#1f1f1f' : '#fafafa'};\n  `,\n  // Inline top-right toolbar. Tagged with `actionsHoverCls` so the Highlighter\n  // container's `&:hover .${actionsHoverCls} { opacity: 1 }` rule flips it\n  // in/out as the user moves over the preview — same UX as the regular code\n  // block actions.\n  toolbar: cx(\n    actionsHoverCls,\n    css`\n      position: absolute;\n      z-index: 2;\n      inset-block-start: 8px;\n      inset-inline-end: 8px;\n\n      padding: 4px;\n      border-radius: ${cssVar.borderRadiusLG};\n\n      opacity: 0;\n      background: ${cssVar.colorBgContainer};\n      backdrop-filter: blur(8px);\n      box-shadow: 0 0 0 1px ${cssVar.colorBorderSecondary};\n\n      transition: opacity 0.2s ${cssVar.motionEaseOut};\n\n      &:focus-within {\n        opacity: 1;\n      }\n    `,\n  ),\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 { styles } = useStyles();\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 className={styles.loadingRoot} style={{ height: defaultHeight ?? DEFAULT_HEIGHT }}>\n          <div className={styles.loadingSource} ref={loadingSourceRef}>\n            <SyntaxHighlighter animated={animated} language={'html'} variant={'borderless'}>\n              {trimmedChildren}\n            </SyntaxHighlighter>\n          </div>\n          <div className={styles.loadingBackdrop} />\n          <div className={styles.loadingBadge}>\n            <NeuralNetworkLoading size={16} />\n            <span>Preparing preview…</span>\n          </div>\n        </div>\n      ),\n      [animated, defaultHeight, styles, 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            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        className={cx(variants({ shadow, variant }), className)}\n        data-code-type=\"html-preview\"\n        data-html-preview-language={language}\n        style={style}\n        {...rest}\n      >\n        <Flexbox\n          horizontal\n          align={'center'}\n          className={cx(styles.toolbar, classNames?.header)}\n          flex={'none'}\n          gap={4}\n          style={customStyles?.header}\n          onClick={stopPropagation}\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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"}

package/es/HtmlPreview/Iframe.d.mts

@@ -1,8 +1,6 @@
 import { HtmlPreviewIframeProps } from "./type.mjs";
-import * as _$react from "react";
-
 //#region src/HtmlPreview/Iframe.d.ts
-declare const HtmlPreviewIframe: _$react.NamedExoticComponent<HtmlPreviewIframeProps>;
+declare const HtmlPreviewIframe: import("react").NamedExoticComponent<HtmlPreviewIframeProps>;
 //#endregion
-export { HtmlPreviewIframe };
+export { HtmlPreviewIframe, HtmlPreviewIframe as default };
 //# sourceMappingURL=Iframe.d.mts.map

package/es/HtmlPreview/Iframe.mjs

@@ -154,6 +154,6 @@ const HtmlPreviewIframe = memo(({ animated, background, content, className, defa
 });
 HtmlPreviewIframe.displayName = "HtmlPreviewIframe";
 //#endregion
-export { HtmlPreviewIframe as default };
+export { HtmlPreviewIframe, HtmlPreviewIframe as default };
 
 //# sourceMappingURL=Iframe.mjs.map

package/es/HtmlPreview/Iframe.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Iframe.mjs","names":[],"sources":["../../src/HtmlPreview/Iframe.tsx"],"sourcesContent":["'use client';\n\nimport { createStyles, cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { buildShellSrcDoc, SHELL_UPDATE_MESSAGE_TYPE } from './buildShellSrcDoc';\nimport { buildStaticSrcDoc } from './buildStaticSrcDoc';\nimport { DEFAULT_HEIGHT, DEFAULT_SANDBOX, SRCDOC_MAX_LENGTH } from './const';\nimport { AUTO_HEIGHT_MESSAGE_TYPE } from './injectAutoHeightScript';\nimport type { HtmlPreviewIframeProps } from './type';\n\nconst useStyles = createStyles(({ css, cssVar }) => ({\n  fallback: css`\n    padding: 16px;\n    font-size: 13px;\n    color: ${cssVar.colorTextDescription};\n  `,\n  iframe: css`\n    display: block;\n    width: 100%;\n    border: none;\n    background: transparent;\n  `,\n}));\n\ninterface Payload {\n  bodyHtml: string;\n  /**\n   * Non-inline-style children of `<head>` serialised in document order:\n   * `<script src=…>`, `<script>…</script>`, `<link>`, `<meta>`, `<base>`,\n   * `<title>` etc. The shell appends/dedupes these into its own head so\n   * head-loaded resources (Tailwind CDN, p5.js, fonts, …) work for full\n   * documents. Inline `<style>` is intentionally excluded — those flow\n   * through `styleContent` so streaming partial CSS grows in place rather\n   * than stacking duplicate `<style>` blocks.\n   *\n   * Empty until the user's `<head>` is *sealed* (a `</head>` close tag has\n   * arrived, or `<body>` has opened — browsers auto-close head at that\n   * point). Holding off prevents partial `src=\"https://cd\"` URLs from\n   * being mounted and 404-ing while the model is still streaming.\n   */\n  headExtrasHtml: string;\n  styleContent: string;\n}\n\n// Head is \"sealed\" as soon as we see a close tag or the body has begun;\n// after that point, additional chunks land in body and head extras won't\n// change.\nconst headSealedPattern = /<\\/head\\s*>|<body[\\s>]/i;\nconst isHeadSealed = (raw: string): boolean => headSealedPattern.test(raw);\n\nconst parseContent = (() => {\n  // Lazy-init: only need one parser instance, and only in the browser.\n  let parser: DOMParser | null = null;\n  return (content: string): Payload | null => {\n    if (typeof window === 'undefined') return null;\n    if (!content) return { bodyHtml: '', headExtrasHtml: '', styleContent: '' };\n    if (!parser) parser = new DOMParser();\n    const doc = parser.parseFromString(content, 'text/html');\n\n    const styleParts: string[] = [];\n    const headExtras: string[] = [];\n\n    if (doc.head) {\n      for (const child of Array.from(doc.head.children)) {\n        if (child.tagName === 'STYLE') {\n          styleParts.push(child.textContent || '');\n        } else {\n          headExtras.push(child.outerHTML);\n        }\n      }\n    }\n\n    return {\n      bodyHtml: doc.body ? doc.body.innerHTML : '',\n      headExtrasHtml: isHeadSealed(content) ? headExtras.join('') : '',\n      styleContent: styleParts.join('\\n'),\n    };\n  };\n})();\n\nexport const HtmlPreviewIframe = memo<HtmlPreviewIframeProps>(\n  ({\n    animated,\n    background,\n    content,\n    className,\n    defaultHeight = DEFAULT_HEIGHT,\n    ref,\n    sandbox = DEFAULT_SANDBOX,\n    style,\n    title = 'HTML preview',\n  }) => {\n    const { styles } = useStyles();\n    const innerRef = useRef<HTMLIFrameElement | null>(null);\n    const frameId = useId();\n    const [height, setHeight] = useState<number>(defaultHeight);\n    // Track caller-supplied `defaultHeight` in a ref so the (frameId-keyed)\n    // message handler can floor auto-height updates without re-subscribing\n    // every render.\n    const defaultHeightRef = useRef(defaultHeight);\n    useEffect(() => {\n      defaultHeightRef.current = defaultHeight;\n    }, [defaultHeight]);\n\n    const tooLarge = content.length > SRCDOC_MAX_LENGTH;\n\n    // ── Static mode ─────────────────────────────────────────────────────\n    // When the content isn't being streamed we can hand the iframe the\n    // user's HTML directly. The browser's normal HTML parser runs:\n    //   <script src=…> tags fetch and execute as if on a regular page,\n    //   inline <script> blocks run in DOM order, MutationObservers (like\n    //   Tailwind Play CDN's) get the document at its expected lifecycle\n    //   stage. Anything that a model can produce as a standalone web\n    //   page works without special handling on our side.\n    const staticSrcDoc = useMemo(() => {\n      if (animated || tooLarge) return null;\n      return buildStaticSrcDoc({ background, content, frameId });\n    }, [animated, background, content, frameId, tooLarge]);\n\n    // ── Shell mode ─────────────────────────────────────────────────────\n    // For streaming we keep one shell iframe loaded for the lifetime of\n    // the session and pump content updates through postMessage. The\n    // shell's morph script handles in-place DOM diffing + fade-in for\n    // new nodes (see buildShellSrcDoc.ts). Tradeoff: external <script\n    // src> tags appended this way don't always integrate cleanly with\n    // class-engine CDNs, so static content is preferred when possible.\n    const shellSrcDoc = useMemo(() => {\n      if (!animated || tooLarge) return null;\n      return buildShellSrcDoc({ background, frameId });\n    }, [animated, background, frameId, tooLarge]);\n\n    const [shellReady, setShellReady] = useState(false);\n    useEffect(() => {\n      // Each time we swap between shell and static modes (or rebuild the\n      // shell because the theme changed) we need to wait for a fresh\n      // ready ping before posting content.\n      setShellReady(false);\n    }, [shellSrcDoc]);\n\n    const payload = useMemo<Payload | null>(() => {\n      if (!animated || tooLarge) return null;\n      return parseContent(content);\n    }, [animated, content, tooLarge]);\n\n    // Push content into the shell iframe whenever it changes — but only\n    // after the shell has signalled ready, so its listener exists.\n    useEffect(() => {\n      if (!animated) return;\n      if (!shellReady || !payload) return;\n      const win = innerRef.current?.contentWindow;\n      if (!win) return;\n      win.postMessage(\n        {\n          frameId,\n          payload,\n          type: SHELL_UPDATE_MESSAGE_TYPE,\n        },\n        '*',\n      );\n    }, [animated, payload, shellReady, frameId]);\n\n    useEffect(() => {\n      const handler = (event: MessageEvent) => {\n        const data = event.data;\n        if (!data || typeof data !== 'object') return;\n        if (data.frameId !== frameId) return;\n        if (event.source !== innerRef.current?.contentWindow) return;\n\n        if (data.type === `${SHELL_UPDATE_MESSAGE_TYPE}:ready`) {\n          setShellReady(true);\n          return;\n        }\n\n        if (data.type === AUTO_HEIGHT_MESSAGE_TYPE) {\n          const next = Number(data.height);\n          if (!Number.isFinite(next) || next <= 0) return;\n          // Floor at `defaultHeight`. During streaming the shell body\n          // briefly reports a small height between morph commits (empty\n          // body just after head closes, then partial body, etc.) and on\n          // every iframe remount the auto-height starts at body padding\n          // before climbing back to content height. Letting the iframe\n          // shrink to that interim height causes a visible up/down jitter\n          // that reads as flicker — especially under a Markdown wrapper\n          // that re-renders every chunk. Anchoring to the caller's stated\n          // minimum height eliminates that without affecting the final\n          // size: real content taller than `defaultHeight` grows the\n          // iframe; content shorter than it stays at the floor.\n          const floored = Math.max(next, defaultHeightRef.current);\n          setHeight((prev) => (Math.abs(prev - floored) < 1 ? prev : floored));\n        }\n      };\n\n      window.addEventListener('message', handler);\n      return () => window.removeEventListener('message', handler);\n    }, [frameId]);\n\n    const setRef = useCallback(\n      (node: HTMLIFrameElement | null) => {\n        innerRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as { current: HTMLIFrameElement | null }).current = node;\n      },\n      [ref],\n    );\n\n    if (tooLarge) {\n      return (\n        <div className={cx(styles.fallback, className)} style={style}>\n          Content too large to preview inline.\n        </div>\n      );\n    }\n\n    const srcDoc = staticSrcDoc ?? shellSrcDoc ?? '';\n\n    // Key the iframe by mode so React fully unmounts the previous DOM\n    // element when we switch from shell (streaming) to static (finalised).\n    // Setting iframe.srcdoc on an already-loaded element doesn't reliably\n    // re-navigate in Chromium when the previous document was also srcdoc-\n    // based — the new srcdoc attribute lands, but the document doesn't\n    // reload, so the user sees stale (often empty) shell content. A fresh\n    // element forces the browser to parse and load the new srcdoc.\n    const iframeKey = animated ? 'shell' : 'static';\n\n    return (\n      <iframe\n        className={cx(styles.iframe, className)}\n        key={iframeKey}\n        ref={setRef}\n        sandbox={sandbox}\n        srcDoc={srcDoc}\n        style={{ height, ...style }}\n        title={title}\n      />\n    );\n  },\n);\n\nHtmlPreviewIframe.displayName = 'HtmlPreviewIframe';\n\nexport default HtmlPreviewIframe;\n"],"mappings":"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"}
+{"version":3,"file":"Iframe.mjs","names":[],"sources":["../../src/HtmlPreview/Iframe.tsx"],"sourcesContent":["'use client';\n\nimport { createStyles, cx } from 'antd-style';\nimport { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';\n\nimport { buildShellSrcDoc, SHELL_UPDATE_MESSAGE_TYPE } from './buildShellSrcDoc';\nimport { buildStaticSrcDoc } from './buildStaticSrcDoc';\nimport { DEFAULT_HEIGHT, DEFAULT_SANDBOX, SRCDOC_MAX_LENGTH } from './const';\nimport { AUTO_HEIGHT_MESSAGE_TYPE } from './injectAutoHeightScript';\nimport type { HtmlPreviewIframeProps } from './type';\n\nconst useStyles = createStyles(({ css, cssVar }) => ({\n  fallback: css`\n    padding: 16px;\n    font-size: 13px;\n    color: ${cssVar.colorTextDescription};\n  `,\n  iframe: css`\n    display: block;\n    width: 100%;\n    border: none;\n    background: transparent;\n  `,\n}));\n\ninterface Payload {\n  bodyHtml: string;\n  /**\n   * Non-inline-style children of `<head>` serialised in document order:\n   * `<script src=…>`, `<script>…</script>`, `<link>`, `<meta>`, `<base>`,\n   * `<title>` etc. The shell appends/dedupes these into its own head so\n   * head-loaded resources (Tailwind CDN, p5.js, fonts, …) work for full\n   * documents. Inline `<style>` is intentionally excluded — those flow\n   * through `styleContent` so streaming partial CSS grows in place rather\n   * than stacking duplicate `<style>` blocks.\n   *\n   * Empty until the user's `<head>` is *sealed* (a `</head>` close tag has\n   * arrived, or `<body>` has opened — browsers auto-close head at that\n   * point). Holding off prevents partial `src=\"https://cd\"` URLs from\n   * being mounted and 404-ing while the model is still streaming.\n   */\n  headExtrasHtml: string;\n  styleContent: string;\n}\n\n// Head is \"sealed\" as soon as we see a close tag or the body has begun;\n// after that point, additional chunks land in body and head extras won't\n// change.\nconst headSealedPattern = /<\\/head\\s*>|<body[\\s>]/i;\nconst isHeadSealed = (raw: string): boolean => headSealedPattern.test(raw);\n\nconst parseContent = (() => {\n  // Lazy-init: only need one parser instance, and only in the browser.\n  let parser: DOMParser | null = null;\n  return (content: string): Payload | null => {\n    if (typeof window === 'undefined') return null;\n    if (!content) return { bodyHtml: '', headExtrasHtml: '', styleContent: '' };\n    if (!parser) parser = new DOMParser();\n    const doc = parser.parseFromString(content, 'text/html');\n\n    const styleParts: string[] = [];\n    const headExtras: string[] = [];\n\n    if (doc.head) {\n      for (const child of Array.from(doc.head.children)) {\n        if (child.tagName === 'STYLE') {\n          styleParts.push(child.textContent || '');\n        } else {\n          headExtras.push(child.outerHTML);\n        }\n      }\n    }\n\n    return {\n      bodyHtml: doc.body ? doc.body.innerHTML : '',\n      headExtrasHtml: isHeadSealed(content) ? headExtras.join('') : '',\n      styleContent: styleParts.join('\\n'),\n    };\n  };\n})();\n\nexport const HtmlPreviewIframe = memo<HtmlPreviewIframeProps>(\n  ({\n    animated,\n    background,\n    content,\n    className,\n    defaultHeight = DEFAULT_HEIGHT,\n    ref,\n    sandbox = DEFAULT_SANDBOX,\n    style,\n    title = 'HTML preview',\n  }) => {\n    const { styles } = useStyles();\n    const innerRef = useRef<HTMLIFrameElement | null>(null);\n    const frameId = useId();\n    const [height, setHeight] = useState<number>(defaultHeight);\n    // Track caller-supplied `defaultHeight` in a ref so the (frameId-keyed)\n    // message handler can floor auto-height updates without re-subscribing\n    // every render.\n    const defaultHeightRef = useRef(defaultHeight);\n    useEffect(() => {\n      defaultHeightRef.current = defaultHeight;\n    }, [defaultHeight]);\n\n    const tooLarge = content.length > SRCDOC_MAX_LENGTH;\n\n    // ── Static mode ─────────────────────────────────────────────────────\n    // When the content isn't being streamed we can hand the iframe the\n    // user's HTML directly. The browser's normal HTML parser runs:\n    //   <script src=…> tags fetch and execute as if on a regular page,\n    //   inline <script> blocks run in DOM order, MutationObservers (like\n    //   Tailwind Play CDN's) get the document at its expected lifecycle\n    //   stage. Anything that a model can produce as a standalone web\n    //   page works without special handling on our side.\n    const staticSrcDoc = useMemo(() => {\n      if (animated || tooLarge) return null;\n      return buildStaticSrcDoc({ background, content, frameId });\n    }, [animated, background, content, frameId, tooLarge]);\n\n    // ── Shell mode ─────────────────────────────────────────────────────\n    // For streaming we keep one shell iframe loaded for the lifetime of\n    // the session and pump content updates through postMessage. The\n    // shell's morph script handles in-place DOM diffing + fade-in for\n    // new nodes (see buildShellSrcDoc.ts). Tradeoff: external <script\n    // src> tags appended this way don't always integrate cleanly with\n    // class-engine CDNs, so static content is preferred when possible.\n    const shellSrcDoc = useMemo(() => {\n      if (!animated || tooLarge) return null;\n      return buildShellSrcDoc({ background, frameId });\n    }, [animated, background, frameId, tooLarge]);\n\n    const [shellReady, setShellReady] = useState(false);\n    useEffect(() => {\n      // Each time we swap between shell and static modes (or rebuild the\n      // shell because the theme changed) we need to wait for a fresh\n      // ready ping before posting content.\n      setShellReady(false);\n    }, [shellSrcDoc]);\n\n    const payload = useMemo<Payload | null>(() => {\n      if (!animated || tooLarge) return null;\n      return parseContent(content);\n    }, [animated, content, tooLarge]);\n\n    // Push content into the shell iframe whenever it changes — but only\n    // after the shell has signalled ready, so its listener exists.\n    useEffect(() => {\n      if (!animated) return;\n      if (!shellReady || !payload) return;\n      const win = innerRef.current?.contentWindow;\n      if (!win) return;\n      win.postMessage(\n        {\n          frameId,\n          payload,\n          type: SHELL_UPDATE_MESSAGE_TYPE,\n        },\n        '*',\n      );\n    }, [animated, payload, shellReady, frameId]);\n\n    useEffect(() => {\n      const handler = (event: MessageEvent) => {\n        const data = event.data;\n        if (!data || typeof data !== 'object') return;\n        if (data.frameId !== frameId) return;\n        if (event.source !== innerRef.current?.contentWindow) return;\n\n        if (data.type === `${SHELL_UPDATE_MESSAGE_TYPE}:ready`) {\n          setShellReady(true);\n          return;\n        }\n\n        if (data.type === AUTO_HEIGHT_MESSAGE_TYPE) {\n          const next = Number(data.height);\n          if (!Number.isFinite(next) || next <= 0) return;\n          // Floor at `defaultHeight`. During streaming the shell body\n          // briefly reports a small height between morph commits (empty\n          // body just after head closes, then partial body, etc.) and on\n          // every iframe remount the auto-height starts at body padding\n          // before climbing back to content height. Letting the iframe\n          // shrink to that interim height causes a visible up/down jitter\n          // that reads as flicker — especially under a Markdown wrapper\n          // that re-renders every chunk. Anchoring to the caller's stated\n          // minimum height eliminates that without affecting the final\n          // size: real content taller than `defaultHeight` grows the\n          // iframe; content shorter than it stays at the floor.\n          const floored = Math.max(next, defaultHeightRef.current);\n          setHeight((prev) => (Math.abs(prev - floored) < 1 ? prev : floored));\n        }\n      };\n\n      window.addEventListener('message', handler);\n      return () => window.removeEventListener('message', handler);\n    }, [frameId]);\n\n    const setRef = useCallback(\n      (node: HTMLIFrameElement | null) => {\n        innerRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as { current: HTMLIFrameElement | null }).current = node;\n      },\n      [ref],\n    );\n\n    if (tooLarge) {\n      return (\n        <div className={cx(styles.fallback, className)} style={style}>\n          Content too large to preview inline.\n        </div>\n      );\n    }\n\n    const srcDoc = staticSrcDoc ?? shellSrcDoc ?? '';\n\n    // Key the iframe by mode so React fully unmounts the previous DOM\n    // element when we switch from shell (streaming) to static (finalised).\n    // Setting iframe.srcdoc on an already-loaded element doesn't reliably\n    // re-navigate in Chromium when the previous document was also srcdoc-\n    // based — the new srcdoc attribute lands, but the document doesn't\n    // reload, so the user sees stale (often empty) shell content. A fresh\n    // element forces the browser to parse and load the new srcdoc.\n    const iframeKey = animated ? 'shell' : 'static';\n\n    return (\n      <iframe\n        className={cx(styles.iframe, className)}\n        key={iframeKey}\n        ref={setRef}\n        sandbox={sandbox}\n        srcDoc={srcDoc}\n        style={{ height, ...style }}\n        title={title}\n      />\n    );\n  },\n);\n\nHtmlPreviewIframe.displayName = 'HtmlPreviewIframe';\n\nexport default HtmlPreviewIframe;\n"],"mappings":"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"}

package/es/HtmlPreview/buildShellSrcDoc.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"buildShellSrcDoc.mjs","names":[],"sources":["../../src/HtmlPreview/buildShellSrcDoc.ts"],"sourcesContent":["import { buildAutoHeightScript } from './injectAutoHeightScript';\nimport { STORAGE_SHIM_SCRIPT } from './injectStorageShim';\n\nexport const SHELL_UPDATE_MESSAGE_TYPE = 'lobe-html-shell-update';\n\ninterface BuildShellSrcDocOptions {\n  background?: string;\n  frameId: string;\n}\n\n/**\n * Build the iframe's one-and-only document.\n *\n * Why a \"shell\" doc:\n * The iframe is loaded *once* and never reloads during a streaming session.\n * All subsequent body updates arrive via `postMessage` from the parent\n * (see `SHELL_UPDATE_MESSAGE_TYPE`). The script in this document morphs the\n * live DOM in place, so already-painted nodes stay untouched — only nodes\n * that are *new* to this commit get a `.lobe-html-new` class and a CSS\n * fade-in. No iframe reload means no white flash, no script reboots, and\n * no jitter from height resets.\n */\nexport const buildShellSrcDoc = ({ background, frameId }: BuildShellSrcDocOptions): string => {\n  const baseRules = `html,body{margin:0;padding:0;${background ? `background:${background};` : ''}color-scheme:light dark;}`;\n  const fadeRules = `@keyframes lobe-html-fade{from{opacity:0}to{opacity:1}}.lobe-html-new{animation:lobe-html-fade 240ms ease-out both;}`;\n\n  const morphScript = `\n(function () {\n  var FRAME_ID = ${JSON.stringify(frameId)};\n  var UPDATE_TYPE = ${JSON.stringify(SHELL_UPDATE_MESSAGE_TYPE)};\n\n  function cloneScript(src) {\n    // <script> elements parsed via DOMParser are inert. Rebuild them as\n    // proper DOM scripts so the browser executes them.\n    //\n    // Important: only set .text for inline scripts. Setting it on a\n    // src-bearing script (even to an empty string) causes some browser /\n    // extension combinations to treat the element as an inline script\n    // with empty body and skip the external fetch — so the CDN never\n    // loads. We just copy attributes; the browser will fetch the src on\n    // append.\n    var s = document.createElement('script');\n    for (var i = 0; i < src.attributes.length; i++) {\n      var a = src.attributes[i];\n      s.setAttribute(a.name, a.value);\n    }\n    if (!src.hasAttribute('src')) {\n      var text = src.textContent;\n      if (text) s.text = text;\n    }\n    return s;\n  }\n\n  function importNode(node) {\n    if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'SCRIPT') {\n      return cloneScript(node);\n    }\n    return document.importNode(node, true);\n  }\n\n  function markFadeIn(node) {\n    if (node.nodeType === Node.ELEMENT_NODE && node.classList) {\n      node.classList.add('lobe-html-new');\n    }\n  }\n\n  // Recursive prefix-match morph. For each parent we match leading children\n  // that already exist (by outerHTML or recursive morph), then we remove\n  // trailing children that no longer exist, and finally append the new\n  // tail with a fade-in class.\n  function morph(oldEl, newEl) {\n    if (oldEl.nodeType !== newEl.nodeType) return false;\n    if (oldEl.nodeType !== Node.ELEMENT_NODE) return false;\n    if (oldEl.tagName !== newEl.tagName) return false;\n\n    // Sync attributes\n    var oldAttrs = oldEl.attributes;\n    for (var i = oldAttrs.length - 1; i >= 0; i--) {\n      var an = oldAttrs[i].name;\n      if (!newEl.hasAttribute(an)) oldEl.removeAttribute(an);\n    }\n    var newAttrs = newEl.attributes;\n    for (var j = 0; j < newAttrs.length; j++) {\n      var na = newAttrs[j];\n      if (oldEl.getAttribute(na.name) !== na.value) {\n        oldEl.setAttribute(na.name, na.value);\n      }\n    }\n\n    var oldKids = oldEl.childNodes;\n    var newKids = newEl.childNodes;\n    var commonLen = 0;\n\n    while (commonLen < oldKids.length && commonLen < newKids.length) {\n      var o = oldKids[commonLen];\n      var n = newKids[commonLen];\n      if (o.nodeType !== n.nodeType) break;\n      if (o.nodeType === Node.TEXT_NODE) {\n        if (o.textContent !== n.textContent) {\n          // Update text content in place — no fade for text.\n          o.textContent = n.textContent;\n        }\n        commonLen++;\n      } else if (o.nodeType === Node.ELEMENT_NODE) {\n        // Cheap identity check before recursing.\n        if (o.outerHTML === n.outerHTML) {\n          commonLen++;\n        } else if (morph(o, n)) {\n          commonLen++;\n        } else {\n          break;\n        }\n      } else {\n        commonLen++;\n      }\n    }\n\n    // Trim old trailing children that no longer exist.\n    while (oldEl.childNodes.length > commonLen) {\n      oldEl.removeChild(oldEl.lastChild);\n    }\n\n    // Append the new tail with fade-in markers, batched through a\n    // DocumentFragment. A flat sequence of appendChild calls fires one\n    // mutation per element — MutationObserver libraries (Tailwind Play\n    // CDN, Stimulus, etc.) that batch their work can drop intermediate\n    // notifications if they arrive too quickly. Going through a fragment\n    // delivers exactly one childList mutation that lists all new nodes\n    // at once, which observers handle reliably.\n    if (commonLen < newKids.length) {\n      var frag = document.createDocumentFragment();\n      for (var k = commonLen; k < newKids.length; k++) {\n        var imported = importNode(newKids[k]);\n        markFadeIn(imported);\n        frag.appendChild(imported);\n      }\n      oldEl.appendChild(frag);\n    }\n\n    return true;\n  }\n\n  // Track which head extras (scripts/links/meta/title/base) we've already\n  // mounted so re-arriving chunks don't re-execute scripts or duplicate\n  // resources. Keyed by outerHTML — for streaming partial URLs each\n  // partial-and-then-complete tag is a distinct key, which means a partial\n  // CDN URL may briefly 404 before the complete one succeeds. That's\n  // acceptable; the alternative (waiting for the closing tag heuristic) is\n  // fragile and would defeat the live-CDN use case entirely.\n  var headSeen = Object.create(null);\n\n  function syncHeadExtras(headExtrasHtml) {\n    if (typeof headExtrasHtml !== 'string') return;\n    var parser = new DOMParser();\n    var doc = parser.parseFromString(\n      '<!doctype html><html><head>' + headExtrasHtml + '</head></html>',\n      'text/html',\n    );\n    var children = doc.head ? doc.head.children : [];\n    for (var i = 0; i < children.length; i++) {\n      var src = children[i];\n      var key = src.outerHTML;\n      if (headSeen[key]) continue;\n      headSeen[key] = true;\n      var clone = importNode(src);\n      // Tag for debugging — also keeps these distinguishable from the\n      // shell's own head children if anything ever needs to inspect them.\n      if (clone.setAttribute) clone.setAttribute('data-lobe-user', '');\n      document.head.appendChild(clone);\n    }\n  }\n\n  function applyUpdate(payload) {\n    if (!payload) return;\n\n    // 1) Inline user styles: merged into a single growing <style> element.\n    //    Streaming partial CSS just keeps overwriting this text until the\n    //    rules become complete, so we don't stack half-parsed <style>\n    //    blocks in the head.\n    var styleEl = document.getElementById('lobe-user-style');\n    if (styleEl && styleEl.textContent !== payload.styleContent) {\n      styleEl.textContent = payload.styleContent || '';\n    }\n\n    // 2) Everything else in the user's <head> (scripts, links, meta, …):\n    //    append-with-dedupe so head-loaded resources actually run.\n    syncHeadExtras(payload.headExtrasHtml);\n\n    // 3) Body: in-place morph with fade-in on new nodes.\n    var bodyParser = new DOMParser();\n    var newDoc = bodyParser.parseFromString(\n      '<!doctype html><html><body>' + (payload.bodyHtml || '') + '</body></html>',\n      'text/html',\n    );\n\n    // morph() returns false only for type mismatch on the root — body to\n    // body always matches, so this is safe.\n    morph(document.body, newDoc.body);\n\n    // Nudge class-engine CDNs (Tailwind Play CDN, Stimulus, etc.) into\n    // re-scanning the document. They watch via MutationObserver but some\n    // implementations only consider the directly-mutated nodes from each\n    // record and skip recursing into nested descendants, so deeply-styled\n    // subtrees can end up with un-generated utility classes. Toggling a\n    // throwaway class on body produces an attribute mutation that prompts\n    // a fresh full-document scan.\n    try {\n      document.body.classList.add('_lobe-rescan');\n      document.body.classList.remove('_lobe-rescan');\n    } catch (_) {}\n  }\n\n  window.addEventListener('message', function (event) {\n    var data = event.data;\n    if (!data || data.type !== UPDATE_TYPE || data.frameId !== FRAME_ID) return;\n    applyUpdate(data.payload);\n  });\n\n  // Signal the parent that the listener is wired up so it can flush any\n  // pending content that was queued before this script ran.\n  try {\n    parent.postMessage({ type: UPDATE_TYPE + ':ready', frameId: FRAME_ID }, '*');\n  } catch (_) {}\n})();\n`;\n\n  return `<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<style>${baseRules}${fadeRules}</style>\n<style id=\"lobe-user-style\"></style>\n<script>${STORAGE_SHIM_SCRIPT}</script>\n<script>${buildAutoHeightScript(frameId)}</script>\n<script>${morphScript}</script>\n</head>\n<body></body>\n</html>`;\n};\n"],"mappings":";;;AAGA,MAAa,4BAA4B;;;;;;;;;;;;;AAmBzC,MAAa,oBAAoB,EAAE,YAAY,cAA+C;CAC5F,MAAM,YAAY,gCAAgC,aAAa,cAAc,WAAW,KAAK,GAAG;CAChG,MAAM,YAAY;CAElB,MAAM,cAAc;;mBAEH,KAAK,UAAU,QAAQ,CAAC;sBACrB,KAAK,UAAU,0BAA0B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqM9D,QAAO;;;;SAIA,YAAY,UAAU;;UAErB,oBAAoB;UACpB,sBAAsB,QAAQ,CAAC;UAC/B,YAAY"}
+{"version":3,"file":"buildShellSrcDoc.mjs","names":[],"sources":["../../src/HtmlPreview/buildShellSrcDoc.ts"],"sourcesContent":["import { buildAutoHeightScript } from './injectAutoHeightScript';\nimport { STORAGE_SHIM_SCRIPT } from './injectStorageShim';\n\nexport const SHELL_UPDATE_MESSAGE_TYPE = 'lobe-html-shell-update';\n\ninterface BuildShellSrcDocOptions {\n  background?: string;\n  frameId: string;\n}\n\n/**\n * Build the iframe's one-and-only document.\n *\n * Why a \"shell\" doc:\n * The iframe is loaded *once* and never reloads during a streaming session.\n * All subsequent body updates arrive via `postMessage` from the parent\n * (see `SHELL_UPDATE_MESSAGE_TYPE`). The script in this document morphs the\n * live DOM in place, so already-painted nodes stay untouched — only nodes\n * that are *new* to this commit get a `.lobe-html-new` class and a CSS\n * fade-in. No iframe reload means no white flash, no script reboots, and\n * no jitter from height resets.\n */\nexport const buildShellSrcDoc = ({ background, frameId }: BuildShellSrcDocOptions): string => {\n  const baseRules = `html,body{margin:0;padding:0;${background ? `background:${background};` : ''}color-scheme:light dark;}`;\n  const fadeRules = `@keyframes lobe-html-fade{from{opacity:0}to{opacity:1}}.lobe-html-new{animation:lobe-html-fade 240ms ease-out both;}`;\n\n  const morphScript = `\n(function () {\n  var FRAME_ID = ${JSON.stringify(frameId)};\n  var UPDATE_TYPE = ${JSON.stringify(SHELL_UPDATE_MESSAGE_TYPE)};\n\n  function cloneScript(src) {\n    // <script> elements parsed via DOMParser are inert. Rebuild them as\n    // proper DOM scripts so the browser executes them.\n    //\n    // Important: only set .text for inline scripts. Setting it on a\n    // src-bearing script (even to an empty string) causes some browser /\n    // extension combinations to treat the element as an inline script\n    // with empty body and skip the external fetch — so the CDN never\n    // loads. We just copy attributes; the browser will fetch the src on\n    // append.\n    var s = document.createElement('script');\n    for (var i = 0; i < src.attributes.length; i++) {\n      var a = src.attributes[i];\n      s.setAttribute(a.name, a.value);\n    }\n    if (!src.hasAttribute('src')) {\n      var text = src.textContent;\n      if (text) s.text = text;\n    }\n    return s;\n  }\n\n  function importNode(node) {\n    if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'SCRIPT') {\n      return cloneScript(node);\n    }\n    return document.importNode(node, true);\n  }\n\n  function markFadeIn(node) {\n    if (node.nodeType === Node.ELEMENT_NODE && node.classList) {\n      node.classList.add('lobe-html-new');\n    }\n  }\n\n  // Recursive prefix-match morph. For each parent we match leading children\n  // that already exist (by outerHTML or recursive morph), then we remove\n  // trailing children that no longer exist, and finally append the new\n  // tail with a fade-in class.\n  function morph(oldEl, newEl) {\n    if (oldEl.nodeType !== newEl.nodeType) return false;\n    if (oldEl.nodeType !== Node.ELEMENT_NODE) return false;\n    if (oldEl.tagName !== newEl.tagName) return false;\n\n    // Sync attributes\n    var oldAttrs = oldEl.attributes;\n    for (var i = oldAttrs.length - 1; i >= 0; i--) {\n      var an = oldAttrs[i].name;\n      if (!newEl.hasAttribute(an)) oldEl.removeAttribute(an);\n    }\n    var newAttrs = newEl.attributes;\n    for (var j = 0; j < newAttrs.length; j++) {\n      var na = newAttrs[j];\n      if (oldEl.getAttribute(na.name) !== na.value) {\n        oldEl.setAttribute(na.name, na.value);\n      }\n    }\n\n    var oldKids = oldEl.childNodes;\n    var newKids = newEl.childNodes;\n    var commonLen = 0;\n\n    while (commonLen < oldKids.length && commonLen < newKids.length) {\n      var o = oldKids[commonLen];\n      var n = newKids[commonLen];\n      if (o.nodeType !== n.nodeType) break;\n      if (o.nodeType === Node.TEXT_NODE) {\n        if (o.textContent !== n.textContent) {\n          // Update text content in place — no fade for text.\n          o.textContent = n.textContent;\n        }\n        commonLen++;\n      } else if (o.nodeType === Node.ELEMENT_NODE) {\n        // Cheap identity check before recursing.\n        if (o.outerHTML === n.outerHTML) {\n          commonLen++;\n        } else if (morph(o, n)) {\n          commonLen++;\n        } else {\n          break;\n        }\n      } else {\n        commonLen++;\n      }\n    }\n\n    // Trim old trailing children that no longer exist.\n    while (oldEl.childNodes.length > commonLen) {\n      oldEl.removeChild(oldEl.lastChild);\n    }\n\n    // Append the new tail with fade-in markers, batched through a\n    // DocumentFragment. A flat sequence of appendChild calls fires one\n    // mutation per element — MutationObserver libraries (Tailwind Play\n    // CDN, Stimulus, etc.) that batch their work can drop intermediate\n    // notifications if they arrive too quickly. Going through a fragment\n    // delivers exactly one childList mutation that lists all new nodes\n    // at once, which observers handle reliably.\n    if (commonLen < newKids.length) {\n      var frag = document.createDocumentFragment();\n      for (var k = commonLen; k < newKids.length; k++) {\n        var imported = importNode(newKids[k]);\n        markFadeIn(imported);\n        frag.appendChild(imported);\n      }\n      oldEl.appendChild(frag);\n    }\n\n    return true;\n  }\n\n  // Track which head extras (scripts/links/meta/title/base) we've already\n  // mounted so re-arriving chunks don't re-execute scripts or duplicate\n  // resources. Keyed by outerHTML — for streaming partial URLs each\n  // partial-and-then-complete tag is a distinct key, which means a partial\n  // CDN URL may briefly 404 before the complete one succeeds. That's\n  // acceptable; the alternative (waiting for the closing tag heuristic) is\n  // fragile and would defeat the live-CDN use case entirely.\n  var headSeen = Object.create(null);\n\n  function syncHeadExtras(headExtrasHtml) {\n    if (typeof headExtrasHtml !== 'string') return;\n    var parser = new DOMParser();\n    var doc = parser.parseFromString(\n      '<!doctype html><html><head>' + headExtrasHtml + '</head></html>',\n      'text/html',\n    );\n    var children = doc.head ? doc.head.children : [];\n    for (var i = 0; i < children.length; i++) {\n      var src = children[i];\n      var key = src.outerHTML;\n      if (headSeen[key]) continue;\n      headSeen[key] = true;\n      var clone = importNode(src);\n      // Tag for debugging — also keeps these distinguishable from the\n      // shell's own head children if anything ever needs to inspect them.\n      if (clone.setAttribute) clone.setAttribute('data-lobe-user', '');\n      document.head.appendChild(clone);\n    }\n  }\n\n  function applyUpdate(payload) {\n    if (!payload) return;\n\n    // 1) Inline user styles: merged into a single growing <style> element.\n    //    Streaming partial CSS just keeps overwriting this text until the\n    //    rules become complete, so we don't stack half-parsed <style>\n    //    blocks in the head.\n    var styleEl = document.getElementById('lobe-user-style');\n    if (styleEl && styleEl.textContent !== payload.styleContent) {\n      styleEl.textContent = payload.styleContent || '';\n    }\n\n    // 2) Everything else in the user's <head> (scripts, links, meta, …):\n    //    append-with-dedupe so head-loaded resources actually run.\n    syncHeadExtras(payload.headExtrasHtml);\n\n    // 3) Body: in-place morph with fade-in on new nodes.\n    var bodyParser = new DOMParser();\n    var newDoc = bodyParser.parseFromString(\n      '<!doctype html><html><body>' + (payload.bodyHtml || '') + '</body></html>',\n      'text/html',\n    );\n\n    // morph() returns false only for type mismatch on the root — body to\n    // body always matches, so this is safe.\n    morph(document.body, newDoc.body);\n\n    // Nudge class-engine CDNs (Tailwind Play CDN, Stimulus, etc.) into\n    // re-scanning the document. They watch via MutationObserver but some\n    // implementations only consider the directly-mutated nodes from each\n    // record and skip recursing into nested descendants, so deeply-styled\n    // subtrees can end up with un-generated utility classes. Toggling a\n    // throwaway class on body produces an attribute mutation that prompts\n    // a fresh full-document scan.\n    try {\n      document.body.classList.add('_lobe-rescan');\n      document.body.classList.remove('_lobe-rescan');\n    } catch (_) {}\n  }\n\n  window.addEventListener('message', function (event) {\n    var data = event.data;\n    if (!data || data.type !== UPDATE_TYPE || data.frameId !== FRAME_ID) return;\n    applyUpdate(data.payload);\n  });\n\n  // Signal the parent that the listener is wired up so it can flush any\n  // pending content that was queued before this script ran.\n  try {\n    parent.postMessage({ type: UPDATE_TYPE + ':ready', frameId: FRAME_ID }, '*');\n  } catch (_) {}\n})();\n`;\n\n  return `<!DOCTYPE html>\n<html>\n<head>\n<meta charset=\"utf-8\">\n<style>${baseRules}${fadeRules}</style>\n<style id=\"lobe-user-style\"></style>\n<script>${STORAGE_SHIM_SCRIPT}</script>\n<script>${buildAutoHeightScript(frameId)}</script>\n<script>${morphScript}</script>\n</head>\n<body></body>\n</html>`;\n};\n"],"mappings":";;;AAGA,MAAa,4BAA4B;;;;;;;;;;;;;AAmBzC,MAAa,oBAAoB,EAAE,YAAY,cAA+C;CAC5F,MAAM,YAAY,gCAAgC,aAAa,cAAc,WAAW,KAAK,GAAG;CAChG,MAAM,YAAY;CAElB,MAAM,cAAc;;mBAEH,KAAK,UAAU,OAAO,EAAE;sBACrB,KAAK,UAAU,yBAAyB,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqM9D,OAAO;;;;SAIA,YAAY,UAAU;;UAErB,oBAAoB;UACpB,sBAAsB,OAAO,EAAE;UAC/B,YAAY;;;;AAItB"}

package/es/HtmlPreview/buildStaticSrcDoc.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"buildStaticSrcDoc.mjs","names":[],"sources":["../../src/HtmlPreview/buildStaticSrcDoc.ts"],"sourcesContent":["import { buildAutoHeightScript } from './injectAutoHeightScript';\nimport { STORAGE_SHIM_SCRIPT } from './injectStorageShim';\n\ninterface BuildStaticSrcDocOptions {\n  background?: string;\n  content: string;\n  frameId: string;\n}\n\nconst shimsBlock = (frameId: string) =>\n  `<script>${STORAGE_SHIM_SCRIPT}</script><script>${buildAutoHeightScript(frameId)}</script>`;\n\nconst baseStyle = (background?: string) =>\n  `<style>html,body{margin:0;padding:0;${background ? `background:${background};` : ''}color-scheme:light dark;}</style>`;\n\n/**\n * Wrap a user's HTML document with our shims so the iframe can load it as\n * a single self-contained srcDoc. This path is used when the content is\n * *static* (not streaming) — the browser parses it via the normal HTML\n * pipeline, so external `<script src=…>` tags load and execute exactly\n * like they would on a regular page. Tailwind CDN, Chart.js, p5.js — all\n * the things a Play CDN expects to see at parse time — work naturally.\n *\n * For *streaming* content we instead use `buildShellSrcDoc` + postMessage\n * morph, which trades reliable script execution for the ability to fade\n * in new nodes without reloading the iframe.\n *\n * Strategy: inject our shims (storage shim, auto-height) as early in the\n * resulting `<head>` as possible so they run before any user script. If\n * the user supplied a `<head>` open tag we slot the shims in right after\n * it; otherwise we wrap a minimal document around fragments.\n */\nexport const buildStaticSrcDoc = ({\n  background,\n  content,\n  frameId,\n}: BuildStaticSrcDocOptions): string => {\n  const head = `${baseStyle(background)}${shimsBlock(frameId)}`;\n  const lower = content.toLowerCase();\n  const hasHtmlTag = lower.includes('<html');\n\n  if (!hasHtmlTag) {\n    return `<!DOCTYPE html><html><head><meta charset=\"utf-8\">${head}</head><body>${content}</body></html>`;\n  }\n\n  const headOpenMatch = content.match(/<head\\b[^>]*>/i);\n  if (headOpenMatch) {\n    const idx = headOpenMatch.index! + headOpenMatch[0].length;\n    return content.slice(0, idx) + head + content.slice(idx);\n  }\n\n  const headCloseIdx = lower.indexOf('</head>');\n  if (headCloseIdx !== -1) {\n    return content.slice(0, headCloseIdx) + head + content.slice(headCloseIdx);\n  }\n\n  const htmlOpenMatch = content.match(/<html\\b[^>]*>/i);\n  if (htmlOpenMatch) {\n    const idx = htmlOpenMatch.index! + htmlOpenMatch[0].length;\n    return content.slice(0, idx) + `<head>${head}</head>` + content.slice(idx);\n  }\n\n  return `<!DOCTYPE html><html><head>${head}</head><body>${content}</body></html>`;\n};\n"],"mappings":";;;AASA,MAAM,cAAc,YAClB,WAAW,oBAAoB,oBAAmB,sBAAsB,QAAQ,CAAC;AAEnF,MAAM,aAAa,eACjB,uCAAuC,aAAa,cAAc,WAAW,KAAK,GAAG;;;;;;;;;;;;;;;;;;AAmBvF,MAAa,qBAAqB,EAChC,YACA,SACA,cACsC;CACtC,MAAM,OAAO,GAAG,UAAU,WAAW,GAAG,WAAW,QAAQ;CAC3D,MAAM,QAAQ,QAAQ,aAAa;AAGnC,KAAI,CAFe,MAAM,SAAS,QAEnB,CACb,QAAO,oDAAoD,KAAK,eAAe,QAAQ;CAGzF,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB;AACrD,KAAI,eAAe;EACjB,MAAM,MAAM,cAAc,QAAS,cAAc,GAAG;AACpD,SAAO,QAAQ,MAAM,GAAG,IAAI,GAAG,OAAO,QAAQ,MAAM,IAAI;;CAG1D,MAAM,eAAe,MAAM,QAAQ,UAAU;AAC7C,KAAI,iBAAiB,GACnB,QAAO,QAAQ,MAAM,GAAG,aAAa,GAAG,OAAO,QAAQ,MAAM,aAAa;CAG5E,MAAM,gBAAgB,QAAQ,MAAM,iBAAiB;AACrD,KAAI,eAAe;EACjB,MAAM,MAAM,cAAc,QAAS,cAAc,GAAG;AACpD,SAAO,QAAQ,MAAM,GAAG,IAAI,GAAG,SAAS,KAAK,WAAW,QAAQ,MAAM,IAAI;;AAG5E,QAAO,8BAA8B,KAAK,eAAe,QAAQ"}
+{"version":3,"file":"buildStaticSrcDoc.mjs","names":[],"sources":["../../src/HtmlPreview/buildStaticSrcDoc.ts"],"sourcesContent":["import { buildAutoHeightScript } from './injectAutoHeightScript';\nimport { STORAGE_SHIM_SCRIPT } from './injectStorageShim';\n\ninterface BuildStaticSrcDocOptions {\n  background?: string;\n  content: string;\n  frameId: string;\n}\n\nconst shimsBlock = (frameId: string) =>\n  `<script>${STORAGE_SHIM_SCRIPT}</script><script>${buildAutoHeightScript(frameId)}</script>`;\n\nconst baseStyle = (background?: string) =>\n  `<style>html,body{margin:0;padding:0;${background ? `background:${background};` : ''}color-scheme:light dark;}</style>`;\n\n/**\n * Wrap a user's HTML document with our shims so the iframe can load it as\n * a single self-contained srcDoc. This path is used when the content is\n * *static* (not streaming) — the browser parses it via the normal HTML\n * pipeline, so external `<script src=…>` tags load and execute exactly\n * like they would on a regular page. Tailwind CDN, Chart.js, p5.js — all\n * the things a Play CDN expects to see at parse time — work naturally.\n *\n * For *streaming* content we instead use `buildShellSrcDoc` + postMessage\n * morph, which trades reliable script execution for the ability to fade\n * in new nodes without reloading the iframe.\n *\n * Strategy: inject our shims (storage shim, auto-height) as early in the\n * resulting `<head>` as possible so they run before any user script. If\n * the user supplied a `<head>` open tag we slot the shims in right after\n * it; otherwise we wrap a minimal document around fragments.\n */\nexport const buildStaticSrcDoc = ({\n  background,\n  content,\n  frameId,\n}: BuildStaticSrcDocOptions): string => {\n  const head = `${baseStyle(background)}${shimsBlock(frameId)}`;\n  const lower = content.toLowerCase();\n  const hasHtmlTag = lower.includes('<html');\n\n  if (!hasHtmlTag) {\n    return `<!DOCTYPE html><html><head><meta charset=\"utf-8\">${head}</head><body>${content}</body></html>`;\n  }\n\n  const headOpenMatch = content.match(/<head\\b[^>]*>/i);\n  if (headOpenMatch) {\n    const idx = headOpenMatch.index! + headOpenMatch[0].length;\n    return content.slice(0, idx) + head + content.slice(idx);\n  }\n\n  const headCloseIdx = lower.indexOf('</head>');\n  if (headCloseIdx !== -1) {\n    return content.slice(0, headCloseIdx) + head + content.slice(headCloseIdx);\n  }\n\n  const htmlOpenMatch = content.match(/<html\\b[^>]*>/i);\n  if (htmlOpenMatch) {\n    const idx = htmlOpenMatch.index! + htmlOpenMatch[0].length;\n    return content.slice(0, idx) + `<head>${head}</head>` + content.slice(idx);\n  }\n\n  return `<!DOCTYPE html><html><head>${head}</head><body>${content}</body></html>`;\n};\n"],"mappings":";;;AASA,MAAM,cAAc,YAClB,WAAW,oBAAoB,oBAAmB,sBAAsB,OAAO,EAAE;AAEnF,MAAM,aAAa,eACjB,uCAAuC,aAAa,cAAc,WAAW,KAAK,GAAG;;;;;;;;;;;;;;;;;;AAmBvF,MAAa,qBAAqB,EAChC,YACA,SACA,cACsC;CACtC,MAAM,OAAO,GAAG,UAAU,UAAU,IAAI,WAAW,OAAO;CAC1D,MAAM,QAAQ,QAAQ,YAAY;CAGlC,IAAI,CAFe,MAAM,SAAS,OAEpB,GACZ,OAAO,oDAAoD,KAAK,eAAe,QAAQ;CAGzF,MAAM,gBAAgB,QAAQ,MAAM,gBAAgB;CACpD,IAAI,eAAe;EACjB,MAAM,MAAM,cAAc,QAAS,cAAc,EAAE,CAAC;EACpD,OAAO,QAAQ,MAAM,GAAG,GAAG,IAAI,OAAO,QAAQ,MAAM,GAAG;CACzD;CAEA,MAAM,eAAe,MAAM,QAAQ,SAAS;CAC5C,IAAI,iBAAiB,IACnB,OAAO,QAAQ,MAAM,GAAG,YAAY,IAAI,OAAO,QAAQ,MAAM,YAAY;CAG3E,MAAM,gBAAgB,QAAQ,MAAM,gBAAgB;CACpD,IAAI,eAAe;EACjB,MAAM,MAAM,cAAc,QAAS,cAAc,EAAE,CAAC;EACpD,OAAO,QAAQ,MAAM,GAAG,GAAG,IAAI,SAAS,KAAK,WAAW,QAAQ,MAAM,GAAG;CAC3E;CAEA,OAAO,8BAA8B,KAAK,eAAe,QAAQ;AACnE"}

package/es/HtmlPreview/const.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"const.mjs","names":[],"sources":["../../src/HtmlPreview/const.ts"],"sourcesContent":["/**\n * Default sandbox attribute for HTML preview iframes.\n *\n * Why this exact set:\n * - `allow-scripts`  — required by the use case (three.js / p5.js / Tailwind\n *   CDN style demos). Without it inline preview degrades to source view.\n * - `allow-forms`    — lets demos handle `<form>` submissions in-frame.\n * - `allow-modals`   — `alert`/`confirm`/`prompt` are common in toy demos.\n *\n * Deliberately omitted:\n * - `allow-same-origin` — would let scripts read parent cookies / localStorage\n *   under cloud deployments, and bridge the IPC boundary on desktop builds.\n * - `allow-popups`, `allow-top-navigation` — phishing surface.\n *\n * Override at your own risk via `sandbox` prop.\n */\nexport const DEFAULT_SANDBOX = 'allow-scripts allow-forms allow-modals';\n\nexport const DEFAULT_HEIGHT = 400;\n\n/**\n * Cap for srcDoc length. Beyond a few MB browsers start misbehaving;\n * we fall back to source-only above this threshold.\n */\nexport const SRCDOC_MAX_LENGTH = 5 * 1024 * 1024;\n\nconst FULL_HTML_MARKERS = ['<!doctype html', '<html', '<HTML'];\n\n/**\n * Is the content a \"full\" HTML document (has `<html>` or `<!DOCTYPE html>`)?\n * Fragments without these markers render poorly inline and should not auto-mount.\n */\nexport const isFullHtmlDocument = (content: string): boolean => {\n  if (!content) return false;\n  const head = content.slice(0, 1024).toLowerCase();\n  return FULL_HTML_MARKERS.some((marker) => head.includes(marker.toLowerCase()));\n};\n\n/**\n * Heuristic for whether streaming HTML is \"stable enough to mount the iframe\".\n * Re-mounting srcDoc on every token reboots scripts (p5.js setup runs each\n * time), so we wait for a clear closing signal.\n */\nexport const isHtmlContentClosed = (content: string): boolean => {\n  if (!content) return false;\n  const tail = content.slice(-1024).toLowerCase();\n  return tail.includes('</html>');\n};\n\n/**\n * Does the content contain a `<script>` tag?\n *\n * Used by `streamingMode: 'auto'` to decide whether live-streaming the\n * iframe is safe. Script-bearing content gets deferred until stable so we\n * don't re-run `setup()` on every token; script-less content (pure\n * markup + styles) streams live for a more responsive feel.\n */\nexport const containsScript = (content: string): boolean => {\n  if (!content) return false;\n  return /<script\\b/i.test(content);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAa,kBAAkB;AAE/B,MAAa,iBAAiB;;;;;AAM9B,MAAa,oBAAoB,IAAI,OAAO;AAE5C,MAAM,oBAAoB;CAAC;CAAkB;CAAS;CAAQ;;;;;AAM9D,MAAa,sBAAsB,YAA6B;AAC9D,KAAI,CAAC,QAAS,QAAO;CACrB,MAAM,OAAO,QAAQ,MAAM,GAAG,KAAK,CAAC,aAAa;AACjD,QAAO,kBAAkB,MAAM,WAAW,KAAK,SAAS,OAAO,aAAa,CAAC,CAAC;;;;;;;AAQhF,MAAa,uBAAuB,YAA6B;AAC/D,KAAI,CAAC,QAAS,QAAO;AAErB,QADa,QAAQ,MAAM,MAAM,CAAC,aACvB,CAAC,SAAS,UAAU;;;;;;;;;;AAWjC,MAAa,kBAAkB,YAA6B;AAC1D,KAAI,CAAC,QAAS,QAAO;AACrB,QAAO,aAAa,KAAK,QAAQ"}
+{"version":3,"file":"const.mjs","names":[],"sources":["../../src/HtmlPreview/const.ts"],"sourcesContent":["/**\n * Default sandbox attribute for HTML preview iframes.\n *\n * Why this exact set:\n * - `allow-scripts`  — required by the use case (three.js / p5.js / Tailwind\n *   CDN style demos). Without it inline preview degrades to source view.\n * - `allow-forms`    — lets demos handle `<form>` submissions in-frame.\n * - `allow-modals`   — `alert`/`confirm`/`prompt` are common in toy demos.\n *\n * Deliberately omitted:\n * - `allow-same-origin` — would let scripts read parent cookies / localStorage\n *   under cloud deployments, and bridge the IPC boundary on desktop builds.\n * - `allow-popups`, `allow-top-navigation` — phishing surface.\n *\n * Override at your own risk via `sandbox` prop.\n */\nexport const DEFAULT_SANDBOX = 'allow-scripts allow-forms allow-modals';\n\nexport const DEFAULT_HEIGHT = 400;\n\n/**\n * Cap for srcDoc length. Beyond a few MB browsers start misbehaving;\n * we fall back to source-only above this threshold.\n */\nexport const SRCDOC_MAX_LENGTH = 5 * 1024 * 1024;\n\nconst FULL_HTML_MARKERS = ['<!doctype html', '<html', '<HTML'];\n\n/**\n * Is the content a \"full\" HTML document (has `<html>` or `<!DOCTYPE html>`)?\n * Fragments without these markers render poorly inline and should not auto-mount.\n */\nexport const isFullHtmlDocument = (content: string): boolean => {\n  if (!content) return false;\n  const head = content.slice(0, 1024).toLowerCase();\n  return FULL_HTML_MARKERS.some((marker) => head.includes(marker.toLowerCase()));\n};\n\n/**\n * Heuristic for whether streaming HTML is \"stable enough to mount the iframe\".\n * Re-mounting srcDoc on every token reboots scripts (p5.js setup runs each\n * time), so we wait for a clear closing signal.\n */\nexport const isHtmlContentClosed = (content: string): boolean => {\n  if (!content) return false;\n  const tail = content.slice(-1024).toLowerCase();\n  return tail.includes('</html>');\n};\n\n/**\n * Does the content contain a `<script>` tag?\n *\n * Used by `streamingMode: 'auto'` to decide whether live-streaming the\n * iframe is safe. Script-bearing content gets deferred until stable so we\n * don't re-run `setup()` on every token; script-less content (pure\n * markup + styles) streams live for a more responsive feel.\n */\nexport const containsScript = (content: string): boolean => {\n  if (!content) return false;\n  return /<script\\b/i.test(content);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAgBA,MAAa,kBAAkB;AAE/B,MAAa,iBAAiB;;;;;AAM9B,MAAa,oBAAoB,IAAI,OAAO;AAE5C,MAAM,oBAAoB;CAAC;CAAkB;CAAS;AAAO;;;;;AAM7D,MAAa,sBAAsB,YAA6B;CAC9D,IAAI,CAAC,SAAS,OAAO;CACrB,MAAM,OAAO,QAAQ,MAAM,GAAG,IAAI,CAAC,CAAC,YAAY;CAChD,OAAO,kBAAkB,MAAM,WAAW,KAAK,SAAS,OAAO,YAAY,CAAC,CAAC;AAC/E;;;;;;AAOA,MAAa,uBAAuB,YAA6B;CAC/D,IAAI,CAAC,SAAS,OAAO;CAErB,OADa,QAAQ,MAAM,KAAK,CAAC,CAAC,YACxB,CAAC,CAAC,SAAS,SAAS;AAChC;;;;;;;;;AAUA,MAAa,kBAAkB,YAA6B;CAC1D,IAAI,CAAC,SAAS,OAAO;CACrB,OAAO,aAAa,KAAK,OAAO;AAClC"}

package/es/HtmlPreview/index.d.mts

@@ -1,6 +1,6 @@
 import { DEFAULT_HEIGHT, DEFAULT_SANDBOX, containsScript, isFullHtmlDocument, isHtmlContentClosed } from "./const.mjs";
 import { HtmlPreviewIframeProps, HtmlPreviewMode, HtmlPreviewProps, HtmlPreviewStreamingMode } from "./type.mjs";
-import { HtmlPreview } from "./HtmlPreview.mjs";
+import HtmlPreview from "./HtmlPreview.mjs";
 import { HtmlPreviewIframe } from "./Iframe.mjs";
 import { AUTO_HEIGHT_MESSAGE_TYPE } from "./injectAutoHeightScript.mjs";
-export { DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, HtmlPreviewIframe, HtmlPreviewIframeProps, HtmlPreviewMode, HtmlPreviewProps, HtmlPreviewStreamingMode, HtmlPreview as default, containsScript as htmlPreviewContainsScript, isFullHtmlDocument, isHtmlContentClosed };
+export { DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, HtmlPreviewIframe, type HtmlPreviewIframeProps, type HtmlPreviewMode, type HtmlPreviewProps, type HtmlPreviewStreamingMode, HtmlPreview as default, containsScript as htmlPreviewContainsScript, isFullHtmlDocument, isHtmlContentClosed };

package/es/HtmlPreview/index.mjs

@@ -1,5 +1,5 @@
 import { DEFAULT_HEIGHT, DEFAULT_SANDBOX, containsScript, isFullHtmlDocument, isHtmlContentClosed } from "./const.mjs";
 import { AUTO_HEIGHT_MESSAGE_TYPE } from "./injectAutoHeightScript.mjs";
-import HtmlPreviewIframe from "./Iframe.mjs";
+import { HtmlPreviewIframe } from "./Iframe.mjs";
 import HtmlPreview from "./HtmlPreview.mjs";
 export { DEFAULT_HEIGHT as HTML_PREVIEW_DEFAULT_HEIGHT, DEFAULT_SANDBOX as HTML_PREVIEW_DEFAULT_SANDBOX, AUTO_HEIGHT_MESSAGE_TYPE as HTML_PREVIEW_RESIZE_MESSAGE, HtmlPreviewIframe, HtmlPreview as default, containsScript as htmlPreviewContainsScript, isFullHtmlDocument, isHtmlContentClosed };

package/es/HtmlPreview/injectAutoHeightScript.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"injectAutoHeightScript.mjs","names":[],"sources":["../../src/HtmlPreview/injectAutoHeightScript.ts"],"sourcesContent":["export const AUTO_HEIGHT_MESSAGE_TYPE = 'lobe-html-resize';\n\nexport const buildAutoHeightScript = (frameId: string) => `\n(function () {\n  var frameId = ${JSON.stringify(frameId)};\n  function post() {\n    try {\n      var h = Math.max(\n        document.documentElement.scrollHeight,\n        document.body ? document.body.scrollHeight : 0,\n      );\n      parent.postMessage({ type: ${JSON.stringify(AUTO_HEIGHT_MESSAGE_TYPE)}, frameId: frameId, height: h }, '*');\n    } catch (_) {}\n  }\n\n  function attach() {\n    post();\n    try {\n      var ro = new ResizeObserver(post);\n      if (document.body) ro.observe(document.body);\n      if (document.documentElement) ro.observe(document.documentElement);\n    } catch (_) {}\n    window.addEventListener('load', post);\n    window.addEventListener('resize', post);\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', attach);\n  } else {\n    attach();\n  }\n})();\n`;\n"],"mappings":";AAAA,MAAa,2BAA2B;AAExC,MAAa,yBAAyB,YAAoB;;kBAExC,KAAK,UAAU,QAAQ,CAAC;;;;;;;mCAOP,KAAK,UAAU,yBAAyB,CAAC"}
+{"version":3,"file":"injectAutoHeightScript.mjs","names":[],"sources":["../../src/HtmlPreview/injectAutoHeightScript.ts"],"sourcesContent":["export const AUTO_HEIGHT_MESSAGE_TYPE = 'lobe-html-resize';\n\nexport const buildAutoHeightScript = (frameId: string) => `\n(function () {\n  var frameId = ${JSON.stringify(frameId)};\n  function post() {\n    try {\n      var h = Math.max(\n        document.documentElement.scrollHeight,\n        document.body ? document.body.scrollHeight : 0,\n      );\n      parent.postMessage({ type: ${JSON.stringify(AUTO_HEIGHT_MESSAGE_TYPE)}, frameId: frameId, height: h }, '*');\n    } catch (_) {}\n  }\n\n  function attach() {\n    post();\n    try {\n      var ro = new ResizeObserver(post);\n      if (document.body) ro.observe(document.body);\n      if (document.documentElement) ro.observe(document.documentElement);\n    } catch (_) {}\n    window.addEventListener('load', post);\n    window.addEventListener('resize', post);\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', attach);\n  } else {\n    attach();\n  }\n})();\n`;\n"],"mappings":";AAAA,MAAa,2BAA2B;AAExC,MAAa,yBAAyB,YAAoB;;kBAExC,KAAK,UAAU,OAAO,EAAE;;;;;;;mCAOP,KAAK,UAAU,wBAAwB,EAAE"}

package/es/HtmlPreview/type.d.mts

@@ -1,7 +1,7 @@
 import { DivProps } from "../types/index.mjs";
 import { ActionIconProps } from "../ActionIcon/type.mjs";
+import "../ActionIcon/index.mjs";
 import { CSSProperties, ReactNode, Ref } from "react";
-
 //#region src/HtmlPreview/type.d.ts
 type HtmlPreviewMode = 'preview' | 'source';
 /**

package/es/Icon/Icon.d.mts

@@ -1,8 +1,6 @@
 import { IconProps } from "./type.mjs";
-import * as _$react from "react";
-
 //#region src/Icon/Icon.d.ts
-declare const Icon: _$react.NamedExoticComponent<IconProps>;
+declare const Icon: import("react").NamedExoticComponent<IconProps>;
 //#endregion
-export { Icon };
+export { Icon as default };
 //# sourceMappingURL=Icon.d.mts.map

package/es/Icon/Icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.mjs","names":[],"sources":["../../src/Icon/Icon.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { LucideIcon } from 'lucide-react';\nimport { isValidElement, memo, useMemo } from 'react';\n\nimport { useIconContext } from './components/IconProvider';\nimport { calcSize } from './components/utils';\nimport { variants } from './style';\nimport type { IconProps } from './type';\n\nconst Icon = memo<IconProps>(\n  ({\n    icon,\n    size: iconSize,\n    color,\n    fill = 'transparent',\n    className,\n    focusable,\n    spin,\n    fillRule,\n    fillOpacity,\n    ref,\n    ...rest\n  }) => {\n    const {\n      color: colorConfig,\n      fill: fillConfig,\n      fillOpacity: fillOpacityConfig,\n      fillRule: fillRuleConfig,\n      focusable: focusableConfig,\n      className: classNameConfig,\n      size: sizeConfig,\n      ...restConfig\n    } = useIconContext();\n\n    const { size, strokeWidth } = useMemo(\n      () => calcSize(iconSize || sizeConfig),\n      [iconSize, sizeConfig],\n    );\n\n    const SvgIcon = icon as LucideIcon;\n\n    return (\n      <span\n        className={cx(variants({ spin }), classNameConfig, className)}\n        role=\"img\"\n        {...restConfig}\n        {...rest}\n      >\n        {icon &&\n          (isValidElement(icon) ? (\n            icon\n          ) : (\n            <SvgIcon\n              color={color || colorConfig}\n              fill={fill || fillConfig}\n              fillOpacity={fillOpacity || fillOpacityConfig}\n              fillRule={fillRule || fillRuleConfig}\n              focusable={focusable || focusableConfig}\n              height={size}\n              ref={ref}\n              size={size}\n              strokeWidth={strokeWidth}\n              width={size}\n            />\n          ))}\n      </span>\n    );\n  },\n);\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":";;;;;;;;AAWA,MAAM,OAAO,MACV,EACC,MACA,MAAM,UACN,OACA,OAAO,eACP,WACA,WACA,MACA,UACA,aACA,KACA,GAAG,WACC;CACJ,MAAM,EACJ,OAAO,aACP,MAAM,YACN,aAAa,mBACb,UAAU,gBACV,WAAW,iBACX,WAAW,iBACX,MAAM,YACN,GAAG,eACD,gBAAgB;CAEpB,MAAM,EAAE,MAAM,gBAAgB,cACtB,SAAS,YAAY,WAAW,EACtC,CAAC,UAAU,WAAW,CACvB;CAED,MAAM,UAAU;AAEhB,QACE,oBAAC,QAAD;EACE,WAAW,GAAG,SAAS,EAAE,MAAM,CAAC,EAAE,iBAAiB,UAAU;EAC7D,MAAK;EACL,GAAI;EACJ,GAAI;YAEH,SACE,eAAe,KAAK,GACnB,OAEA,oBAAC,SAAD;GACE,OAAO,SAAS;GAChB,MAAM,QAAQ;GACd,aAAa,eAAe;GAC5B,UAAU,YAAY;GACtB,WAAW,aAAa;GACxB,QAAQ;GACH;GACC;GACO;GACb,OAAO;GACP,CAAA;EAED,CAAA;EAGZ;AAED,KAAK,cAAc"}
+{"version":3,"file":"Icon.mjs","names":[],"sources":["../../src/Icon/Icon.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { LucideIcon } from 'lucide-react';\nimport { isValidElement, memo, useMemo } from 'react';\n\nimport { useIconContext } from './components/IconProvider';\nimport { calcSize } from './components/utils';\nimport { variants } from './style';\nimport type { IconProps } from './type';\n\nconst Icon = memo<IconProps>(\n  ({\n    icon,\n    size: iconSize,\n    color,\n    fill = 'transparent',\n    className,\n    focusable,\n    spin,\n    fillRule,\n    fillOpacity,\n    ref,\n    ...rest\n  }) => {\n    const {\n      color: colorConfig,\n      fill: fillConfig,\n      fillOpacity: fillOpacityConfig,\n      fillRule: fillRuleConfig,\n      focusable: focusableConfig,\n      className: classNameConfig,\n      size: sizeConfig,\n      ...restConfig\n    } = useIconContext();\n\n    const { size, strokeWidth } = useMemo(\n      () => calcSize(iconSize || sizeConfig),\n      [iconSize, sizeConfig],\n    );\n\n    const SvgIcon = icon as LucideIcon;\n\n    return (\n      <span\n        className={cx(variants({ spin }), classNameConfig, className)}\n        role=\"img\"\n        {...restConfig}\n        {...rest}\n      >\n        {icon &&\n          (isValidElement(icon) ? (\n            icon\n          ) : (\n            <SvgIcon\n              color={color || colorConfig}\n              fill={fill || fillConfig}\n              fillOpacity={fillOpacity || fillOpacityConfig}\n              fillRule={fillRule || fillRuleConfig}\n              focusable={focusable || focusableConfig}\n              height={size}\n              ref={ref}\n              size={size}\n              strokeWidth={strokeWidth}\n              width={size}\n            />\n          ))}\n      </span>\n    );\n  },\n);\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":";;;;;;;;AAWA,MAAM,OAAO,MACV,EACC,MACA,MAAM,UACN,OACA,OAAO,eACP,WACA,WACA,MACA,UACA,aACA,KACA,GAAG,WACC;CACJ,MAAM,EACJ,OAAO,aACP,MAAM,YACN,aAAa,mBACb,UAAU,gBACV,WAAW,iBACX,WAAW,iBACX,MAAM,YACN,GAAG,eACD,eAAe;CAEnB,MAAM,EAAE,MAAM,gBAAgB,cACtB,SAAS,YAAY,UAAU,GACrC,CAAC,UAAU,UAAU,CACvB;CAEA,MAAM,UAAU;CAEhB,OACE,oBAAC,QAAD;EACE,WAAW,GAAG,SAAS,EAAE,KAAK,CAAC,GAAG,iBAAiB,SAAS;EAC5D,MAAK;EACL,GAAI;EACJ,GAAI;YAEH,SACE,eAAe,IAAI,IAClB,OAEA,oBAAC,SAAD;GACE,OAAO,SAAS;GAChB,MAAM,QAAQ;GACd,aAAa,eAAe;GAC5B,UAAU,YAAY;GACtB,WAAW,aAAa;GACxB,QAAQ;GACH;GACC;GACO;GACb,OAAO;EACR,CAAA;CAED,CAAA;AAEV,CACF;AAEA,KAAK,cAAc"}

package/es/Icon/components/IconProvider.d.mts

@@ -1,11 +1,9 @@
 import { IconProps } from "../type.mjs";
-import * as _$react from "react";
 import { ReactNode } from "react";
-
 //#region src/Icon/components/IconProvider.d.ts
 type IconContentConfig = Omit<IconProps, 'icon' | 'ref'>;
-declare const IconContext: _$react.Context<IconContentConfig>;
-declare const IconProvider: _$react.NamedExoticComponent<{
+declare const IconContext: import("react").Context<IconContentConfig>;
+declare const IconProvider: import("react").NamedExoticComponent<{
   children: ReactNode;
   config?: IconContentConfig;
 }>;

package/es/Icon/components/IconProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconProvider.mjs","names":[],"sources":["../../../src/Icon/components/IconProvider.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, memo, type ReactNode, use } from 'react';\n\nimport { type IconProps } from '../type';\n\nexport type IconContentConfig = Omit<IconProps, 'icon' | 'ref'>;\n\nexport const IconContext = createContext<IconContentConfig>({});\n\nexport const IconProvider = memo<{ children: ReactNode; config?: IconContentConfig }>(\n  ({ children, config = {} }) => {\n    return <IconContext value={config}>{children}</IconContext>;\n  },\n);\n\nexport const useIconContext = () => {\n  return use(IconContext);\n};\n"],"mappings":";;;;AAQA,MAAa,cAAc,cAAiC,EAAE,CAAC;AAE/D,MAAa,eAAe,MACzB,EAAE,UAAU,SAAS,EAAE,OAAO;AAC7B,QAAO,oBAAC,aAAD;EAAa,OAAO;EAAS;EAAuB,CAAA;EAE9D;AAED,MAAa,uBAAuB;AAClC,QAAO,IAAI,YAAY"}
+{"version":3,"file":"IconProvider.mjs","names":[],"sources":["../../../src/Icon/components/IconProvider.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, memo, type ReactNode, use } from 'react';\n\nimport { type IconProps } from '../type';\n\nexport type IconContentConfig = Omit<IconProps, 'icon' | 'ref'>;\n\nexport const IconContext = createContext<IconContentConfig>({});\n\nexport const IconProvider = memo<{ children: ReactNode; config?: IconContentConfig }>(\n  ({ children, config = {} }) => {\n    return <IconContext value={config}>{children}</IconContext>;\n  },\n);\n\nexport const useIconContext = () => {\n  return use(IconContext);\n};\n"],"mappings":";;;;AAQA,MAAa,cAAc,cAAiC,CAAC,CAAC;AAE9D,MAAa,eAAe,MACzB,EAAE,UAAU,SAAS,CAAC,QAAQ;CAC7B,OAAO,oBAAC,aAAD;EAAa,OAAO;EAAS;CAAsB,CAAA;AAC5D,CACF;AAEA,MAAa,uBAAuB;CAClC,OAAO,IAAI,WAAW;AACxB"}

package/es/Icon/components/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/Icon/components/utils.ts"],"sourcesContent":["import { isNumber } from 'es-toolkit/compat';\n\nimport type { IconSize } from '../type';\n\nexport const calcSize = (iconSize?: IconSize) => {\n  if (isNumber(iconSize)) {\n    return { size: iconSize };\n  }\n\n  let size: number | string;\n  let strokeWidth: number | string;\n\n  switch (iconSize) {\n    case 'large': {\n      size = 24;\n      strokeWidth = 2;\n      break;\n    }\n    case 'middle': {\n      size = 20;\n      strokeWidth = 2;\n      break;\n    }\n    case 'small': {\n      size = 14;\n      strokeWidth = 2;\n      break;\n    }\n    default: {\n      if (iconSize) {\n        size = iconSize?.size || 24;\n        strokeWidth = iconSize?.strokeWidth || 2;\n      } else {\n        size = '1em';\n        strokeWidth = 2;\n      }\n      break;\n    }\n  }\n  return { size, strokeWidth };\n};\n"],"mappings":";;AAIA,MAAa,YAAY,aAAwB;AAC/C,KAAI,SAAS,SAAS,CACpB,QAAO,EAAE,MAAM,UAAU;CAG3B,IAAI;CACJ,IAAI;AAEJ,SAAQ,UAAR;EACE,KAAK;AACH,UAAO;AACP,iBAAc;AACd;EAEF,KAAK;AACH,UAAO;AACP,iBAAc;AACd;EAEF,KAAK;AACH,UAAO;AACP,iBAAc;AACd;EAEF;AACE,OAAI,UAAU;AACZ,WAAO,UAAU,QAAQ;AACzB,kBAAc,UAAU,eAAe;UAClC;AACL,WAAO;AACP,kBAAc;;AAEhB;;AAGJ,QAAO;EAAE;EAAM;EAAa"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../../src/Icon/components/utils.ts"],"sourcesContent":["import { isNumber } from 'es-toolkit/compat';\n\nimport type { IconSize } from '../type';\n\nexport const calcSize = (iconSize?: IconSize) => {\n  if (isNumber(iconSize)) {\n    return { size: iconSize };\n  }\n\n  let size: number | string;\n  let strokeWidth: number | string;\n\n  switch (iconSize) {\n    case 'large': {\n      size = 24;\n      strokeWidth = 2;\n      break;\n    }\n    case 'middle': {\n      size = 20;\n      strokeWidth = 2;\n      break;\n    }\n    case 'small': {\n      size = 14;\n      strokeWidth = 2;\n      break;\n    }\n    default: {\n      if (iconSize) {\n        size = iconSize?.size || 24;\n        strokeWidth = iconSize?.strokeWidth || 2;\n      } else {\n        size = '1em';\n        strokeWidth = 2;\n      }\n      break;\n    }\n  }\n  return { size, strokeWidth };\n};\n"],"mappings":";;AAIA,MAAa,YAAY,aAAwB;CAC/C,IAAI,SAAS,QAAQ,GACnB,OAAO,EAAE,MAAM,SAAS;CAG1B,IAAI;CACJ,IAAI;CAEJ,QAAQ,UAAR;EACE,KAAK;GACH,OAAO;GACP,cAAc;GACd;EAEF,KAAK;GACH,OAAO;GACP,cAAc;GACd;EAEF,KAAK;GACH,OAAO;GACP,cAAc;GACd;EAEF;GACE,IAAI,UAAU;IACZ,OAAO,UAAU,QAAQ;IACzB,cAAc,UAAU,eAAe;GACzC,OAAO;IACL,OAAO;IACP,cAAc;GAChB;GACA;CAEJ;CACA,OAAO;EAAE;EAAM;CAAY;AAC7B"}

package/es/Icon/index.d.mts

@@ -1,4 +1,4 @@
 import { IconProps, IconSize, IconSizeConfig, IconSizeType, LucideIconProps } from "./type.mjs";
 import { IconContentConfig, IconContext, IconProvider, useIconContext } from "./components/IconProvider.mjs";
-import { Icon } from "./Icon.mjs";
-export { IconContentConfig, IconContext, IconProps, IconProvider, IconSize, IconSizeConfig, IconSizeType, LucideIconProps, Icon as default, useIconContext };
+import Icon from "./Icon.mjs";
+export { IconContentConfig, IconContext, type IconProps, IconProvider, type IconSize, type IconSizeConfig, type IconSizeType, type LucideIconProps, Icon as default, useIconContext };

package/es/Icon/style.mjs

@@ -9,18 +9,19 @@ const spin = keyframes`
     rotate: 360deg;
   }
 `;
+const styles = createStaticStyles(({ css }) => {
+	return { spin: css`
+      animation: ${spin} 1s linear infinite;
+    ` };
+});
 const variants = cva("anticon", {
 	defaultVariants: { spin: false },
 	variants: { spin: {
 		false: null,
-		true: createStaticStyles(({ css }) => {
-			return { spin: css`
-      animation: ${spin} 1s linear infinite;
-    ` };
-		}).spin
+		true: styles.spin
 	} }
 });
 //#endregion
-export { variants };
+export { styles, variants };
 
 //# sourceMappingURL=style.mjs.map