@lobehub/ui 6.0.0-beta.3 → 6.0.0-beta.5

package/es/EditableText/ControlInput.mjs

@@ -1,8 +1,9 @@
 "use client";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import { useEventCallback } from "../hooks/useEventCallback.mjs";
 import Input_default from "../Input/Input.mjs";
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { RotateCcw, Save } from "lucide-react";
 //#region src/EditableText/ControlInput.tsx
@@ -13,45 +14,57 @@ const ControlInput = memo(({ value, onChange, onValueChanging, onChangeEnd, onCo
 	useEffect(() => {
 		if (value !== void 0) setInput(value);
 	}, [value]);
-	const handleUpload = () => {
+	const handleUpload = useEventCallback(() => {
 		onChange?.(input);
 		ref?.current?.blur();
 		onChangeEnd?.(input);
-	};
+	});
+	const handleReset = useEventCallback(() => setInput(value || ""));
+	const dirty = value !== input;
+	const resetText = texts?.reset || "Reset";
+	const submitText = texts?.submit || "Submit";
+	const suffix = useMemo(() => dirty ? /* @__PURE__ */ jsxs(FlexBasic_default, {
+		horizontal: true,
+		gap: 2,
+		style: {
+			marginRight: -4,
+			zIndex: 1
+		},
+		children: [/* @__PURE__ */ jsx(ActionIcon, {
+			icon: RotateCcw,
+			size: "small",
+			title: resetText,
+			onClick: (e) => {
+				e.preventDefault();
+				handleReset();
+			}
+		}), /* @__PURE__ */ jsx(ActionIcon, {
+			icon: submitIcon || Save,
+			size: "small",
+			title: submitText,
+			variant: "filled",
+			onClick: (e) => {
+				e.preventDefault();
+				handleUpload();
+			}
+		})]
+	}) : /* @__PURE__ */ jsx("span", {}), [
+		dirty,
+		handleReset,
+		handleUpload,
+		resetText,
+		submitIcon,
+		submitText
+	]);
 	return /* @__PURE__ */ jsx(Input_default, {
 		autoFocus: true,
 		ref,
+		suffix,
 		value: input,
 		style: {
 			width: "100%",
 			...style
 		},
-		suffix: value === input ? /* @__PURE__ */ jsx("span", {}) : /* @__PURE__ */ jsxs(FlexBasic_default, {
-			horizontal: true,
-			gap: 2,
-			style: {
-				marginRight: -4,
-				zIndex: 1
-			},
-			children: [/* @__PURE__ */ jsx(ActionIcon, {
-				icon: RotateCcw,
-				size: "small",
-				title: texts?.reset || "Reset",
-				onClick: (e) => {
-					e.preventDefault();
-					setInput(value || "");
-				}
-			}), /* @__PURE__ */ jsx(ActionIcon, {
-				icon: submitIcon || Save,
-				size: "small",
-				title: texts?.submit || "Submit",
-				variant: "filled",
-				onClick: (e) => {
-					e.preventDefault();
-					handleUpload();
-				}
-			})]
-		}),
 		onFocus,
 		onChange: (e) => {
 			setInput(e.target.value);

package/es/EditableText/ControlInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ControlInput.mjs","names":["Input","Flexbox"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { Input, type InputProps } from '@/Input';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n  onChange?: (value: string) => void;\n  onChangeEnd?: (value: string) => void;\n  onValueChanging?: (value: string) => void;\n  submitIcon?: ActionIconProps['icon'];\n  texts?: {\n    reset?: string;\n    submit?: string;\n  };\n  value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n  ({\n    value,\n    onChange,\n    onValueChanging,\n    onChangeEnd,\n    onCompositionEnd,\n    onCompositionStart,\n    onPressEnter,\n    onFocus,\n    submitIcon,\n    style,\n    texts,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLInputElement>(null);\n    const [input, setInput] = useState<string>(value || '');\n\n    const isChineseInput = useRef(false);\n\n    useEffect(() => {\n      if (value !== undefined) setInput(value);\n    }, [value]);\n\n    const handleUpload = () => {\n      onChange?.(input);\n      ref?.current?.blur();\n      onChangeEnd?.(input);\n    };\n\n    return (\n      <Input\n        autoFocus\n        ref={ref}\n        value={input}\n        style={{\n          width: '100%',\n          ...style,\n        }}\n        suffix={\n          value === input ? (\n            <span />\n          ) : (\n            <Flexbox\n              horizontal\n              gap={2}\n              style={{\n                marginRight: -4,\n                zIndex: 1,\n              }}\n            >\n              <ActionIcon\n                icon={RotateCcw}\n                size=\"small\"\n                title={texts?.reset || 'Reset'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  setInput(value || '');\n                }}\n              />\n              <ActionIcon\n                icon={submitIcon || Save}\n                size=\"small\"\n                title={texts?.submit || 'Submit'}\n                variant={'filled'}\n                onClick={(e) => {\n                  e.preventDefault();\n                  handleUpload();\n                }}\n              />\n            </Flexbox>\n          )\n        }\n        onFocus={onFocus}\n        onChange={(e) => {\n          setInput(e.target.value);\n          onValueChanging?.(e.target.value);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          if (!e.shiftKey && !isChineseInput.current) {\n            e.preventDefault();\n            handleUpload();\n            onPressEnter?.(e);\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;AAqBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAyB,IAAI;CACzC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,EAAE;CAEtD,MAAM,iBAAiB,OAAO,KAAK;CAEnC,gBAAgB;EACd,IAAI,UAAU,KAAA,GAAW,SAAS,KAAK;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,qBAAqB;EACzB,WAAW,KAAK;EAChB,KAAK,SAAS,KAAK;EACnB,cAAc,KAAK;CACrB;CAEA,OACE,oBAACA,eAAD;EACE,WAAA;EACK;EACL,OAAO;EACP,OAAO;GACL,OAAO;GACP,GAAG;EACL;EACA,QACE,UAAU,QACR,oBAAC,QAAD,CAAO,CAAA,IAEP,qBAACC,mBAAD;GACE,YAAA;GACA,KAAK;GACL,OAAO;IACL,aAAa;IACb,QAAQ;GACV;GANF,UAAA,CAQE,oBAAC,YAAD;IACE,MAAM;IACN,MAAK;IACL,OAAO,OAAO,SAAS;IACvB,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,SAAS,SAAS,EAAE;IACtB;GACD,CAAA,GACD,oBAAC,YAAD;IACE,MAAM,cAAc;IACpB,MAAK;IACL,OAAO,OAAO,UAAU;IACxB,SAAS;IACT,UAAU,MAAM;KACd,EAAE,eAAe;KACjB,aAAa;IACf;GACD,CAAA,CACM;;EAGJ;EACT,WAAW,MAAM;GACf,SAAS,EAAE,OAAO,KAAK;GACvB,kBAAkB,EAAE,OAAO,KAAK;EAClC;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,IAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;IAC1C,EAAE,eAAe;IACjB,aAAa;IACb,eAAe,CAAC;GAClB;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"ControlInput.mjs","names":["Flexbox","Input"],"sources":["../../src/EditableText/ControlInput.tsx"],"sourcesContent":["'use client';\n\nimport { RotateCcw, Save } from 'lucide-react';\nimport { memo, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon, { type ActionIconProps } from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { useEventCallback } from '@/hooks/useEventCallback';\nimport { Input, type InputProps } from '@/Input';\n\nexport interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {\n  onChange?: (value: string) => void;\n  onChangeEnd?: (value: string) => void;\n  onValueChanging?: (value: string) => void;\n  submitIcon?: ActionIconProps['icon'];\n  texts?: {\n    reset?: string;\n    submit?: string;\n  };\n  value?: string;\n}\n\nconst ControlInput = memo<ControlInputProps>(\n  ({\n    value,\n    onChange,\n    onValueChanging,\n    onChangeEnd,\n    onCompositionEnd,\n    onCompositionStart,\n    onPressEnter,\n    onFocus,\n    submitIcon,\n    style,\n    texts,\n    ...rest\n  }) => {\n    const ref = useRef<HTMLInputElement>(null);\n    const [input, setInput] = useState<string>(value || '');\n\n    const isChineseInput = useRef(false);\n\n    useEffect(() => {\n      if (value !== undefined) setInput(value);\n    }, [value]);\n\n    const handleUpload = useEventCallback(() => {\n      onChange?.(input);\n      ref?.current?.blur();\n      onChangeEnd?.(input);\n    });\n\n    const handleReset = useEventCallback(() => setInput(value || ''));\n\n    const dirty = value !== input;\n    const resetText = texts?.reset || 'Reset';\n    const submitText = texts?.submit || 'Submit';\n\n    const suffix = useMemo(\n      () =>\n        dirty ? (\n          <Flexbox\n            horizontal\n            gap={2}\n            style={{\n              marginRight: -4,\n              zIndex: 1,\n            }}\n          >\n            <ActionIcon\n              icon={RotateCcw}\n              size=\"small\"\n              title={resetText}\n              onClick={(e) => {\n                e.preventDefault();\n                handleReset();\n              }}\n            />\n            <ActionIcon\n              icon={submitIcon || Save}\n              size=\"small\"\n              title={submitText}\n              variant={'filled'}\n              onClick={(e) => {\n                e.preventDefault();\n                handleUpload();\n              }}\n            />\n          </Flexbox>\n        ) : (\n          <span />\n        ),\n      [dirty, handleReset, handleUpload, resetText, submitIcon, submitText],\n    );\n\n    return (\n      <Input\n        autoFocus\n        ref={ref}\n        suffix={suffix}\n        value={input}\n        style={{\n          width: '100%',\n          ...style,\n        }}\n        onFocus={onFocus}\n        onChange={(e) => {\n          setInput(e.target.value);\n          onValueChanging?.(e.target.value);\n        }}\n        onCompositionEnd={(e) => {\n          isChineseInput.current = false;\n          onCompositionEnd?.(e);\n        }}\n        onCompositionStart={(e) => {\n          isChineseInput.current = true;\n          onCompositionStart?.(e);\n        }}\n        onPressEnter={(e) => {\n          if (!e.shiftKey && !isChineseInput.current) {\n            e.preventDefault();\n            handleUpload();\n            onPressEnter?.(e);\n          }\n        }}\n        {...rest}\n      />\n    );\n  },\n);\n\nControlInput.displayName = 'ControlInput';\n\nexport default ControlInput;\n"],"mappings":";;;;;;;;;AAsBA,MAAM,eAAe,MAClB,EACC,OACA,UACA,iBACA,aACA,kBACA,oBACA,cACA,SACA,YACA,OACA,OACA,GAAG,WACC;CACJ,MAAM,MAAM,OAAyB,IAAI;CACzC,MAAM,CAAC,OAAO,YAAY,SAAiB,SAAS,EAAE;CAEtD,MAAM,iBAAiB,OAAO,KAAK;CAEnC,gBAAgB;EACd,IAAI,UAAU,KAAA,GAAW,SAAS,KAAK;CACzC,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,uBAAuB;EAC1C,WAAW,KAAK;EAChB,KAAK,SAAS,KAAK;EACnB,cAAc,KAAK;CACrB,CAAC;CAED,MAAM,cAAc,uBAAuB,SAAS,SAAS,EAAE,CAAC;CAEhE,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,OAAO,SAAS;CAClC,MAAM,aAAa,OAAO,UAAU;CAEpC,MAAM,SAAS,cAEX,QACE,qBAACA,mBAAD;EACE,YAAA;EACA,KAAK;EACL,OAAO;GACL,aAAa;GACb,QAAQ;EACV;EANF,UAAA,CAQE,oBAAC,YAAD;GACE,MAAM;GACN,MAAK;GACL,OAAO;GACP,UAAU,MAAM;IACd,EAAE,eAAe;IACjB,YAAY;GACd;EACD,CAAA,GACD,oBAAC,YAAD;GACE,MAAM,cAAc;GACpB,MAAK;GACL,OAAO;GACP,SAAS;GACT,UAAU,MAAM;IACd,EAAE,eAAe;IACjB,aAAa;GACf;EACD,CAAA,CACM;CAET,CAAA,IAAA,oBAAC,QAAD,CAAO,CAAA,GAEX;EAAC;EAAO;EAAa;EAAc;EAAW;EAAY;CAAU,CACtE;CAEA,OACE,oBAACC,eAAD;EACE,WAAA;EACK;EACG;EACR,OAAO;EACP,OAAO;GACL,OAAO;GACP,GAAG;EACL;EACS;EACT,WAAW,MAAM;GACf,SAAS,EAAE,OAAO,KAAK;GACvB,kBAAkB,EAAE,OAAO,KAAK;EAClC;EACA,mBAAmB,MAAM;GACvB,eAAe,UAAU;GACzB,mBAAmB,CAAC;EACtB;EACA,qBAAqB,MAAM;GACzB,eAAe,UAAU;GACzB,qBAAqB,CAAC;EACxB;EACA,eAAe,MAAM;GACnB,IAAI,CAAC,EAAE,YAAY,CAAC,eAAe,SAAS;IAC1C,EAAE,eAAe;IACjB,aAAa;IACb,eAAe,CAAC;GAClB;EACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,aAAa,cAAc"}

package/es/EditableText/EditableText.mjs

@@ -1,12 +1,12 @@
 "use client";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { cx } from "../styles/css.mjs";
 import ControlInput from "./ControlInput.mjs";
 import { memo, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Edit3 } from "lucide-react";
-import useControlledState from "use-merge-value";
 import { useHotkeys } from "react-hotkeys-hook";
 //#region src/EditableText/EditableText.tsx
 const EditableText = memo(({ value, showEditIcon = true, onChange, editing, onEditingChange, onChangeEnd, onFocus, onBlur, className, inputProps, onValueChanging, gap = 8, style, size = "small", styles, classNames, variant = "borderless", ...rest }) => {

package/es/EditableText/EditableText.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.mjs","names":["Flexbox"],"sources":["../../src/EditableText/EditableText.tsx"],"sourcesContent":["'use client';\n\nimport { Edit3 } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { cx } from '@/styles';\n\nimport ControlInput from './ControlInput';\nimport type { EditableTextProps } from './type';\n\nconst EditableText = memo<EditableTextProps>(\n  ({\n    value,\n    showEditIcon = true,\n    onChange,\n    editing,\n    onEditingChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    className,\n    inputProps,\n    onValueChanging,\n    gap = 8,\n    style,\n    size = 'small',\n    styles,\n    classNames,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const [edited, setEdited] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    useHotkeys(\n      'esc',\n      () => {\n        setEdited(false);\n      },\n      {\n        enableOnFormTags: true,\n        enabled: edited,\n        preventDefault: true,\n      },\n    );\n\n    const height = useMemo(() => {\n      if (!size) return 32;\n      switch (size) {\n        case 'large': {\n          return 40;\n        }\n        case 'middle': {\n          return 32;\n        }\n        case 'small': {\n          return 24;\n        }\n      }\n    }, [size]);\n\n    const input = (\n      <ControlInput\n        className={cx(className, classNames?.input)}\n        size={size}\n        value={value as string}\n        variant={variant}\n        style={{\n          height,\n          ...(size === 'small' && { fontSize: 14 }),\n          ...style,\n          ...styles?.input,\n        }}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        onValueChanging={onValueChanging}\n        onChangeEnd={(v) => {\n          onChangeEnd?.(v);\n          setEdited(false);\n        }}\n        {...inputProps}\n      />\n    );\n\n    const content = (\n      <>\n        <span>{value}</span>\n        {showEditIcon && (\n          <ActionIcon\n            icon={Edit3}\n            size=\"small\"\n            title={'Edit'}\n            onClick={() => {\n              setEdited(!edited);\n            }}\n          />\n        )}\n      </>\n    );\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={cx(className, classNames?.container)}\n        gap={gap}\n        style={{\n          height,\n          width: '100%',\n          ...style,\n          ...styles?.container,\n        }}\n        {...rest}\n      >\n        {edited ? input : content}\n      </Flexbox>\n    );\n  },\n);\n\nEditableText.displayName = 'EditableText';\n\nexport default EditableText;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,OACA,eAAe,MACf,UACA,SACA,iBACA,aACA,SACA,QACA,WACA,YACA,iBACA,MAAM,GACN,OACA,OAAO,SACP,QACA,YACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;CACT,CAAC;CAED,WACE,aACM;EACJ,UAAU,KAAK;CACjB,GACA;EACE,kBAAkB;EAClB,SAAS;EACT,gBAAgB;CAClB,CACF;CAEA,MAAM,SAAS,cAAc;EAC3B,IAAI,CAAC,MAAM,OAAO;EAClB,QAAQ,MAAR;GACE,KAAK,SACH,OAAO;GAET,KAAK,UACH,OAAO;GAET,KAAK,SACH,OAAO;EAEX;CACF,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,QACJ,oBAAC,cAAD;EACE,WAAW,GAAG,WAAW,YAAY,KAAK;EACpC;EACC;EACE;EACT,OAAO;GACL;GACA,GAAI,SAAS,WAAW,EAAE,UAAU,GAAG;GACvC,GAAG;GACH,GAAG,QAAQ;EACb;EACQ;EACE;EACD;EACQ;EACjB,cAAc,MAAM;GAClB,cAAc,CAAC;GACf,UAAU,KAAK;EACjB;EACA,GAAI;CACL,CAAA;CAGH,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,gBACC,oBAAC,YAAD;EACE,MAAM;EACN,MAAK;EACL,OAAO;EACP,eAAe;GACb,UAAU,CAAC,MAAM;EACnB;CACD,CAAA,CAEH,EAAA,CAAA;CAGJ,OACE,oBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,WAAW,YAAY,SAAS;EACzC;EACL,OAAO;GACL;GACA,OAAO;GACP,GAAG;GACH,GAAG,QAAQ;EACb;EACA,GAAI;EAEH,UAAA,SAAS,QAAQ;CACX,CAAA;AAEb,CACF;AAEA,aAAa,cAAc"}
+{"version":3,"file":"EditableText.mjs","names":["Flexbox"],"sources":["../../src/EditableText/EditableText.tsx"],"sourcesContent":["'use client';\n\nimport { Edit3 } from 'lucide-react';\nimport { memo, useMemo } from 'react';\nimport { useHotkeys } from 'react-hotkeys-hook';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport { cx } from '@/styles';\n\nimport ControlInput from './ControlInput';\nimport type { EditableTextProps } from './type';\n\nconst EditableText = memo<EditableTextProps>(\n  ({\n    value,\n    showEditIcon = true,\n    onChange,\n    editing,\n    onEditingChange,\n    onChangeEnd,\n    onFocus,\n    onBlur,\n    className,\n    inputProps,\n    onValueChanging,\n    gap = 8,\n    style,\n    size = 'small',\n    styles,\n    classNames,\n    variant = 'borderless',\n    ...rest\n  }) => {\n    const [edited, setEdited] = useControlledState(false, {\n      onChange: onEditingChange,\n      value: editing,\n    });\n\n    useHotkeys(\n      'esc',\n      () => {\n        setEdited(false);\n      },\n      {\n        enableOnFormTags: true,\n        enabled: edited,\n        preventDefault: true,\n      },\n    );\n\n    const height = useMemo(() => {\n      if (!size) return 32;\n      switch (size) {\n        case 'large': {\n          return 40;\n        }\n        case 'middle': {\n          return 32;\n        }\n        case 'small': {\n          return 24;\n        }\n      }\n    }, [size]);\n\n    const input = (\n      <ControlInput\n        className={cx(className, classNames?.input)}\n        size={size}\n        value={value as string}\n        variant={variant}\n        style={{\n          height,\n          ...(size === 'small' && { fontSize: 14 }),\n          ...style,\n          ...styles?.input,\n        }}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        onValueChanging={onValueChanging}\n        onChangeEnd={(v) => {\n          onChangeEnd?.(v);\n          setEdited(false);\n        }}\n        {...inputProps}\n      />\n    );\n\n    const content = (\n      <>\n        <span>{value}</span>\n        {showEditIcon && (\n          <ActionIcon\n            icon={Edit3}\n            size=\"small\"\n            title={'Edit'}\n            onClick={() => {\n              setEdited(!edited);\n            }}\n          />\n        )}\n      </>\n    );\n\n    return (\n      <Flexbox\n        horizontal\n        align={'center'}\n        className={cx(className, classNames?.container)}\n        gap={gap}\n        style={{\n          height,\n          width: '100%',\n          ...style,\n          ...styles?.container,\n        }}\n        {...rest}\n      >\n        {edited ? input : content}\n      </Flexbox>\n    );\n  },\n);\n\nEditableText.displayName = 'EditableText';\n\nexport default EditableText;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,eAAe,MAClB,EACC,OACA,eAAe,MACf,UACA,SACA,iBACA,aACA,SACA,QACA,WACA,YACA,iBACA,MAAM,GACN,OACA,OAAO,SACP,QACA,YACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,mBAAmB,OAAO;EACpD,UAAU;EACV,OAAO;CACT,CAAC;CAED,WACE,aACM;EACJ,UAAU,KAAK;CACjB,GACA;EACE,kBAAkB;EAClB,SAAS;EACT,gBAAgB;CAClB,CACF;CAEA,MAAM,SAAS,cAAc;EAC3B,IAAI,CAAC,MAAM,OAAO;EAClB,QAAQ,MAAR;GACE,KAAK,SACH,OAAO;GAET,KAAK,UACH,OAAO;GAET,KAAK,SACH,OAAO;EAEX;CACF,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,QACJ,oBAAC,cAAD;EACE,WAAW,GAAG,WAAW,YAAY,KAAK;EACpC;EACC;EACE;EACT,OAAO;GACL;GACA,GAAI,SAAS,WAAW,EAAE,UAAU,GAAG;GACvC,GAAG;GACH,GAAG,QAAQ;EACb;EACQ;EACE;EACD;EACQ;EACjB,cAAc,MAAM;GAClB,cAAc,CAAC;GACf,UAAU,KAAK;EACjB;EACA,GAAI;CACL,CAAA;CAGH,MAAM,UACJ,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,GAClB,gBACC,oBAAC,YAAD;EACE,MAAM;EACN,MAAK;EACL,OAAO;EACP,eAAe;GACb,UAAU,CAAC,MAAM;EACnB;CACD,CAAA,CAEH,EAAA,CAAA;CAGJ,OACE,oBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW,GAAG,WAAW,YAAY,SAAS;EACzC;EACL,OAAO;GACL;GACA,OAAO;GACP,GAAG;GACH,GAAG,QAAQ;EACb;EACA,GAAI;EAEH,UAAA,SAAS,QAAQ;CACX,CAAA;AAEb,CACF;AAEA,aAAa,cAAc"}

package/es/EmojiPicker/EmojiPicker.mjs

@@ -5,6 +5,7 @@ import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import { useTheme } from "../styles/theme/scope.mjs";
 import { Tooltip } from "../Tooltip/Tooltip.mjs";
 import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
 import Avatar from "../Avatar/index.mjs";
 import Popover from "../Popover/Popover.mjs";
@@ -12,18 +13,17 @@ import emojiPicker_default from "../i18n/resources/en/emojiPicker.mjs";
 import Tabs from "../Tabs/Tabs.mjs";
 import AvatarUploader from "./AvatarUploader.mjs";
 import { styles } from "./style.mjs";
+import { useEmojiMartI18n } from "./useEmojiMartI18n.mjs";
 import { memo, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import * as stylex from "@stylexjs/stylex";
 import { SmileIcon, TrashIcon, UploadIcon } from "lucide-react";
-import useControlledState from "use-merge-value";
 import chroma from "chroma-js";
 import data from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
 import { getLobeIconCDN } from "@lobehub/icons/es/features/getLobeIconCDN/index.js";
 import { toc } from "@lobehub/icons/es/toc.js";
-import useSWR from "swr";
 //#region src/EmojiPicker/EmojiPicker.tsx
 const DEFAULT_AVATAR = "🤖";
 const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, locale = "en-US", allowUpload, allowDelete, allowModelAvatar, texts, onDelete, compressSize = 256, customEmojis, className, loading, onUpload, customTabs = [], popupClassName, popupStyle, customRender, open, defaultOpen = false, onOpenChange, popupProps, shape, contentProps, ...rest }) => {
@@ -40,13 +40,7 @@ const EmojiPicker = memo(({ value, defaultAvatar = DEFAULT_AVATAR, onChange, loc
 		"--emoji-picker-rgb-accent": chroma(theme.colorPrimary).rgb().join(", "),
 		"--emoji-picker-rgb-background": chroma(theme.colorBgElevated).rgb().join(", ")
 	}), [theme.colorPrimary, theme.colorBgElevated]);
-	const { data: i18n } = useSWR(locale, async () => await import(
-		/* @vite-ignore */
-		`@emoji-mart/data/i18n/${locale.split("-")[0]}.json`
-), {
-		revalidateOnFocus: false,
-		revalidateOnMount: false
-	});
+	const i18n = useEmojiMartI18n(locale);
 	const [ava, setAva] = useControlledState(defaultAvatar, {
 		defaultValue: defaultAvatar,
 		onChange,

package/es/EmojiPicker/EmojiPicker.mjs.map

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

package/es/EmojiPicker/useEmojiMartI18n.mjs

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+//#region src/EmojiPicker/useEmojiMartI18n.ts
+const unwrapDefault = (value) => value && typeof value === "object" && "default" in value ? value.default : value;
+const createEmojiMartI18nLoader = (load) => {
+	const cache = /* @__PURE__ */ new Map();
+	const useEmojiMartI18n = (locale) => {
+		const language = locale.split("-")[0];
+		const [loaded, setLoaded] = useState();
+		useEffect(() => {
+			let active = true;
+			let pending = cache.get(language);
+			if (!pending) {
+				pending = load(language);
+				cache.set(language, pending);
+			}
+			pending.then((value) => {
+				if (active) setLoaded({
+					language,
+					value: unwrapDefault(value)
+				});
+			}, () => {});
+			return () => {
+				active = false;
+			};
+		}, [language]);
+		return loaded?.language === language ? loaded.value : void 0;
+	};
+	return useEmojiMartI18n;
+};
+const useEmojiMartI18n = createEmojiMartI18nLoader((language) => import(
+	/* @vite-ignore */
+	`@emoji-mart/data/i18n/${language}.json`
+));
+//#endregion
+export { createEmojiMartI18nLoader, useEmojiMartI18n };
+
+//# sourceMappingURL=useEmojiMartI18n.mjs.map

package/es/EmojiPicker/useEmojiMartI18n.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEmojiMartI18n.mjs","names":[],"sources":["../../src/EmojiPicker/useEmojiMartI18n.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\ntype LoadI18n = (language: string) => Promise<unknown>;\n\nconst unwrapDefault = (value: unknown): unknown =>\n  value && typeof value === 'object' && 'default' in value ? value.default : value;\n\nexport const createEmojiMartI18nLoader = (load: LoadI18n) => {\n  const cache = new Map<string, Promise<unknown>>();\n\n  const useEmojiMartI18n = (locale: string): unknown => {\n    const language = locale.split('-')[0];\n    const [loaded, setLoaded] = useState<{ language: string; value: unknown }>();\n\n    useEffect(() => {\n      let active = true;\n      let pending = cache.get(language);\n      if (!pending) {\n        pending = load(language);\n        cache.set(language, pending);\n      }\n      pending.then(\n        (value) => {\n          if (active) setLoaded({ language, value: unwrapDefault(value) });\n        },\n        () => {},\n      );\n      return () => {\n        active = false;\n      };\n    }, [language]);\n\n    return loaded?.language === language ? loaded.value : undefined;\n  };\n\n  return useEmojiMartI18n;\n};\n\nexport const useEmojiMartI18n = createEmojiMartI18nLoader(\n  (language) => import(/* @vite-ignore */ `@emoji-mart/data/i18n/${language}.json`),\n);\n"],"mappings":";;AAIA,MAAM,iBAAiB,UACrB,SAAS,OAAO,UAAU,YAAY,aAAa,QAAQ,MAAM,UAAU;AAE7E,MAAa,6BAA6B,SAAmB;CAC3D,MAAM,wBAAQ,IAAI,IAA8B;CAEhD,MAAM,oBAAoB,WAA4B;EACpD,MAAM,WAAW,OAAO,MAAM,GAAG,CAAC,CAAC;EACnC,MAAM,CAAC,QAAQ,aAAa,SAA+C;EAE3E,gBAAgB;GACd,IAAI,SAAS;GACb,IAAI,UAAU,MAAM,IAAI,QAAQ;GAChC,IAAI,CAAC,SAAS;IACZ,UAAU,KAAK,QAAQ;IACvB,MAAM,IAAI,UAAU,OAAO;GAC7B;GACA,QAAQ,MACL,UAAU;IACT,IAAI,QAAQ,UAAU;KAAE;KAAU,OAAO,cAAc,KAAK;IAAE,CAAC;GACjE,SACM,CAAC,CACT;GACA,aAAa;IACX,SAAS;GACX;EACF,GAAG,CAAC,QAAQ,CAAC;EAEb,OAAO,QAAQ,aAAa,WAAW,OAAO,QAAQ,KAAA;CACxD;CAEA,OAAO;AACT;AAEA,MAAa,mBAAmB,2BAC7B,aAAa;;CAA0B,yBAAyB,SAAS;CAC5E"}

package/es/FormKit/engine/tanstack.mjs

@@ -1,5 +1,5 @@
+import { isEqual } from "es-toolkit/compat";
 import { FormApi, getBy, setBy } from "@tanstack/form-core";
-import isEqual from "fast-deep-equal";
 //#region src/FormKit/engine/tanstack.ts
 const toEnginePath = (path) => path.replaceAll(/\.(\d+)(?=\.|$)/g, "[$1]");
 const isSameOrNested = (a, b) => a === b || a.startsWith(`${b}.`) || b.startsWith(`${a}.`);

package/es/FormKit/engine/tanstack.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tanstack.mjs","names":[],"sources":["../../../src/FormKit/engine/tanstack.ts"],"sourcesContent":["import { FormApi, getBy, setBy } from '@tanstack/form-core';\nimport isEqual from 'fast-deep-equal';\n\nimport type {\n  ChangeSource,\n  CreateEngine,\n  FieldRegistration,\n  FieldSnapshot,\n  FormEngine,\n  FormStatus,\n  FormValidator,\n  ValidateResult,\n  ValidateTrigger,\n  ValueChange,\n} from './types';\n\nconst toEnginePath = (path: string) => path.replaceAll(/\\.(\\d+)(?=\\.|$)/g, '[$1]');\n\nconst isSameOrNested = (a: string, b: string) =>\n  a === b || a.startsWith(`${b}.`) || b.startsWith(`${a}.`);\n\nconst isUnder = (path: string, root: string) => path === root || path.startsWith(`${root}.`);\n\ninterface FieldRuntime {\n  registration: FieldRegistration;\n  timer?: ReturnType<typeof setTimeout>;\n  token: number;\n}\n\nexport const createTanstackEngine: CreateEngine = (initialValues) => {\n  const form = new FormApi({ defaultValues: initialValues });\n\n  const fields = new Map<string, FieldRuntime>();\n  const fieldErrors = new Map<string, string>();\n  const formErrors = new Map<string, string>();\n  const serverErrors = new Map<string, string>();\n  const validating = new Set<string>();\n  const touched = new Set<string>();\n  const listeners = new Set<() => void>();\n  const valueListeners = new Set<(change: ValueChange) => void>();\n  const snapshots = new Map<string, FieldSnapshot>();\n\n  let formValidator: FormValidator | undefined;\n  let baseline = initialValues;\n  let dirtyCache: { baseline: unknown; dirty: boolean; values: unknown } | undefined;\n  let inflightSubmit: Promise<ValidateResult> | undefined;\n  let submitting = false;\n  let submitCount = 0;\n  let status: FormStatus = { dirty: false, submitCount: 0, submitting: false };\n\n  const notify = () => {\n    for (const listener of listeners) listener();\n  };\n  const storeSubscription = form.store.subscribe(notify);\n\n  const getValue = (path: string) => form.getFieldValue(toEnginePath(path) as never) as unknown;\n  const getValues = () => form.state.values as Record<string, unknown>;\n  const isTouched = (path: string) => {\n    for (const entry of touched) if (isSameOrNested(entry, path)) return true;\n    return false;\n  };\n  const errorOf = (path: string) =>\n    serverErrors.get(path) ?? fieldErrors.get(path) ?? formErrors.get(path);\n\n  const getField = (path: string): FieldSnapshot => {\n    const next: FieldSnapshot = {\n      error: errorOf(path),\n      touched: isTouched(path),\n      validating: validating.has(path),\n      value: getValue(path),\n    };\n    const prev = snapshots.get(path);\n    if (\n      prev &&\n      prev.error === next.error &&\n      prev.touched === next.touched &&\n      prev.validating === next.validating &&\n      Object.is(prev.value, next.value)\n    )\n      return prev;\n    snapshots.set(path, next);\n    return next;\n  };\n\n  const getStatus = (): FormStatus => {\n    const values = getValues();\n    if (dirtyCache?.values !== values || dirtyCache.baseline !== baseline)\n      dirtyCache = { baseline, dirty: !isEqual(values, baseline), values };\n    const { dirty } = dirtyCache;\n    if (\n      status.dirty !== dirty ||\n      status.submitting !== submitting ||\n      status.submitCount !== submitCount\n    )\n      status = { dirty, submitCount, submitting };\n    return status;\n  };\n\n  const shouldValidate = (path: string, trigger: ValidateTrigger) => {\n    const mode = fields.get(path)?.registration.validateOn ?? 'auto';\n    if (trigger === 'submit') return true;\n    if (mode === 'change') return true;\n    if (mode === 'blur') return trigger === 'blur';\n    if (mode === 'submit') return false;\n    return trigger === 'blur' || errorOf(path) !== undefined;\n  };\n\n  const setOrDelete = (map: Map<string, string>, path: string, error: string | undefined) => {\n    if (error === undefined) map.delete(path);\n    else map.set(path, error);\n  };\n\n  const runField = (path: string, withFormValidator: boolean): Promise<void> => {\n    const runtime = fields.get(path);\n    if (!runtime) return Promise.resolve();\n    runtime.token += 1;\n    const token = runtime.token;\n    const { validate } = runtime.registration;\n    if (!validate && !(withFormValidator && formValidator)) return Promise.resolve();\n\n    validating.add(path);\n    notify();\n    return (async () => {\n      const values = getValues();\n      const [fieldError, formResult] = await Promise.all([\n        validate?.(getValue(path), values),\n        withFormValidator ? formValidator?.(values) : undefined,\n      ]);\n      if (runtime.token !== token || fields.get(path) !== runtime) return;\n      setOrDelete(fieldErrors, path, fieldError);\n      if (withFormValidator) setOrDelete(formErrors, path, formResult?.[path]);\n      validating.delete(path);\n      notify();\n    })();\n  };\n\n  const schedule = (path: string, trigger: ValidateTrigger) => {\n    const runtime = fields.get(path);\n    if (!runtime || !shouldValidate(path, trigger)) return;\n    clearTimeout(runtime.timer);\n    const debounceMs = runtime.registration.debounceMs ?? 0;\n    if (trigger === 'change' && debounceMs > 0) {\n      runtime.token += 1;\n      runtime.timer = setTimeout(() => void runField(path, true), debounceMs);\n      return;\n    }\n    void runField(path, true);\n  };\n\n  const clearErrorsUnder = (path: string, inclusive = false) => {\n    for (const map of [fieldErrors, formErrors, serverErrors])\n      for (const key of map.keys())\n        if (inclusive ? isUnder(key, path) : key.startsWith(`${path}.`)) map.delete(key);\n  };\n\n  const resetTo = (values: Record<string, unknown>) => {\n    clearRuntimeState();\n    baseline = values;\n    form.reset(values);\n    notify();\n  };\n\n  const emitValueChange = (path: string, source: ChangeSource) => {\n    for (const listener of valueListeners) listener({ path, source });\n  };\n\n  const afterUserChange = (path: string) => {\n    touched.add(path);\n    serverErrors.delete(path);\n    schedule(path, 'change');\n    for (const [other, runtime] of fields) {\n      if (other !== path && runtime.registration.deps?.includes(path) && isTouched(other))\n        void runField(other, true);\n    }\n    notify();\n  };\n\n  const validate = async (paths?: string[]): Promise<ValidateResult> => {\n    const values = getValues();\n    const formResult = (formValidator ? await formValidator(values) : undefined) ?? {};\n    const targets = paths ?? [...new Set([...fields.keys(), ...Object.keys(formResult)])];\n    await Promise.all(targets.map((path) => runField(path, false)));\n    for (const path of targets) setOrDelete(formErrors, path, formResult[path]);\n    notify();\n    const errors: Record<string, string> = {};\n    for (const path of targets) {\n      const error = errorOf(path);\n      if (error !== undefined) errors[path] = error;\n    }\n    return { errors, valid: Object.keys(errors).length === 0 };\n  };\n\n  const clearRuntimeState = () => {\n    for (const runtime of fields.values()) {\n      clearTimeout(runtime.timer);\n      runtime.token += 1;\n    }\n    fieldErrors.clear();\n    formErrors.clear();\n    serverErrors.clear();\n    validating.clear();\n    touched.clear();\n  };\n\n  const runSubmit = async (onSubmit?: (values: Record<string, unknown>) => unknown) => {\n    submitCount += 1;\n    serverErrors.clear();\n    for (const path of fields.keys()) touched.add(path);\n    let values: Record<string, unknown>;\n    let result: ValidateResult;\n    do {\n      values = getValues();\n      result = await validate();\n      // Async validators must finish against unchanged values before submission.\n    } while (values !== getValues());\n    if (!result.valid) {\n      notify();\n      return result;\n    }\n    submitting = true;\n    notify();\n    try {\n      await onSubmit?.(values);\n      if (serverErrors.size > 0) return { errors: Object.fromEntries(serverErrors), valid: false };\n      resetTo(getValues());\n    } finally {\n      submitting = false;\n      notify();\n    }\n    return result;\n  };\n\n  const engine: FormEngine = {\n    blurField: (path) => {\n      touched.add(path);\n      schedule(path, 'blur');\n      notify();\n    },\n    destroy: () => {\n      for (const runtime of fields.values()) clearTimeout(runtime.timer);\n      storeSubscription.unsubscribe();\n      listeners.clear();\n      valueListeners.clear();\n    },\n    getField,\n    getStatus,\n    getValue,\n    getValues,\n    isTouched,\n    moveItem: (path, from, to) => {\n      form.moveFieldValues(toEnginePath(path) as never, from, to);\n      touched.add(path);\n      clearErrorsUnder(path);\n      emitValueChange(path, 'user');\n      notify();\n    },\n    onValueChange: (listener) => {\n      valueListeners.add(listener);\n      return () => valueListeners.delete(listener);\n    },\n    pushItem: (path, item) => {\n      form.pushFieldValue(toEnginePath(path) as never, item as never);\n      touched.add(path);\n      emitValueChange(path, 'user');\n      notify();\n    },\n    registerField: (path, registration) => {\n      const runtime: FieldRuntime = { registration, token: 0 };\n      fields.set(path, runtime);\n      return () => {\n        if (fields.get(path) !== runtime) return;\n        clearTimeout(runtime.timer);\n        fields.delete(path);\n        fieldErrors.delete(path);\n        validating.delete(path);\n        snapshots.delete(path);\n        notify();\n      };\n    },\n    removeItem: (path, index) => {\n      void form.removeFieldValue(toEnginePath(path) as never, index);\n      touched.add(path);\n      clearErrorsUnder(path);\n      emitValueChange(path, 'user');\n      notify();\n    },\n    reset: (values) => resetTo(values ?? baseline),\n    resetField: (path) => {\n      for (const [key, runtime] of fields) {\n        if (!isUnder(key, path)) continue;\n        clearTimeout(runtime.timer);\n        runtime.token += 1;\n        validating.delete(key);\n      }\n      for (const entry of touched) if (isUnder(entry, path)) touched.delete(entry);\n      clearErrorsUnder(path, true);\n      form.setFieldValue(toEnginePath(path) as never, getBy(baseline, toEnginePath(path)), {\n        dontUpdateMeta: true,\n      });\n      emitValueChange(path, 'api');\n      notify();\n    },\n    setErrors: (errors) => {\n      for (const [path, error] of Object.entries(errors)) setOrDelete(serverErrors, path, error);\n      notify();\n    },\n    setFormValidator: (validator) => {\n      formValidator = validator;\n    },\n    setValue: (path, value, source) => {\n      form.setFieldValue(toEnginePath(path) as never, value as never, { dontUpdateMeta: true });\n      if (source === 'api') baseline = setBy(baseline, toEnginePath(path), () => value);\n      emitValueChange(path, source);\n      if (source === 'user') afterUserChange(path);\n    },\n    submit: (onSubmit) => {\n      inflightSubmit ??= runSubmit(onSubmit).finally(() => {\n        inflightSubmit = undefined;\n      });\n      return inflightSubmit;\n    },\n    subscribe: (listener) => {\n      listeners.add(listener);\n      return () => listeners.delete(listener);\n    },\n    validate,\n  };\n\n  return engine;\n};\n"],"mappings":"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"}
+{"version":3,"file":"tanstack.mjs","names":[],"sources":["../../../src/FormKit/engine/tanstack.ts"],"sourcesContent":["import { FormApi, getBy, setBy } from '@tanstack/form-core';\nimport { isEqual } from 'es-toolkit/compat';\n\nimport type {\n  ChangeSource,\n  CreateEngine,\n  FieldRegistration,\n  FieldSnapshot,\n  FormEngine,\n  FormStatus,\n  FormValidator,\n  ValidateResult,\n  ValidateTrigger,\n  ValueChange,\n} from './types';\n\nconst toEnginePath = (path: string) => path.replaceAll(/\\.(\\d+)(?=\\.|$)/g, '[$1]');\n\nconst isSameOrNested = (a: string, b: string) =>\n  a === b || a.startsWith(`${b}.`) || b.startsWith(`${a}.`);\n\nconst isUnder = (path: string, root: string) => path === root || path.startsWith(`${root}.`);\n\ninterface FieldRuntime {\n  registration: FieldRegistration;\n  timer?: ReturnType<typeof setTimeout>;\n  token: number;\n}\n\nexport const createTanstackEngine: CreateEngine = (initialValues) => {\n  const form = new FormApi({ defaultValues: initialValues });\n\n  const fields = new Map<string, FieldRuntime>();\n  const fieldErrors = new Map<string, string>();\n  const formErrors = new Map<string, string>();\n  const serverErrors = new Map<string, string>();\n  const validating = new Set<string>();\n  const touched = new Set<string>();\n  const listeners = new Set<() => void>();\n  const valueListeners = new Set<(change: ValueChange) => void>();\n  const snapshots = new Map<string, FieldSnapshot>();\n\n  let formValidator: FormValidator | undefined;\n  let baseline = initialValues;\n  let dirtyCache: { baseline: unknown; dirty: boolean; values: unknown } | undefined;\n  let inflightSubmit: Promise<ValidateResult> | undefined;\n  let submitting = false;\n  let submitCount = 0;\n  let status: FormStatus = { dirty: false, submitCount: 0, submitting: false };\n\n  const notify = () => {\n    for (const listener of listeners) listener();\n  };\n  const storeSubscription = form.store.subscribe(notify);\n\n  const getValue = (path: string) => form.getFieldValue(toEnginePath(path) as never) as unknown;\n  const getValues = () => form.state.values as Record<string, unknown>;\n  const isTouched = (path: string) => {\n    for (const entry of touched) if (isSameOrNested(entry, path)) return true;\n    return false;\n  };\n  const errorOf = (path: string) =>\n    serverErrors.get(path) ?? fieldErrors.get(path) ?? formErrors.get(path);\n\n  const getField = (path: string): FieldSnapshot => {\n    const next: FieldSnapshot = {\n      error: errorOf(path),\n      touched: isTouched(path),\n      validating: validating.has(path),\n      value: getValue(path),\n    };\n    const prev = snapshots.get(path);\n    if (\n      prev &&\n      prev.error === next.error &&\n      prev.touched === next.touched &&\n      prev.validating === next.validating &&\n      Object.is(prev.value, next.value)\n    )\n      return prev;\n    snapshots.set(path, next);\n    return next;\n  };\n\n  const getStatus = (): FormStatus => {\n    const values = getValues();\n    if (dirtyCache?.values !== values || dirtyCache.baseline !== baseline)\n      dirtyCache = { baseline, dirty: !isEqual(values, baseline), values };\n    const { dirty } = dirtyCache;\n    if (\n      status.dirty !== dirty ||\n      status.submitting !== submitting ||\n      status.submitCount !== submitCount\n    )\n      status = { dirty, submitCount, submitting };\n    return status;\n  };\n\n  const shouldValidate = (path: string, trigger: ValidateTrigger) => {\n    const mode = fields.get(path)?.registration.validateOn ?? 'auto';\n    if (trigger === 'submit') return true;\n    if (mode === 'change') return true;\n    if (mode === 'blur') return trigger === 'blur';\n    if (mode === 'submit') return false;\n    return trigger === 'blur' || errorOf(path) !== undefined;\n  };\n\n  const setOrDelete = (map: Map<string, string>, path: string, error: string | undefined) => {\n    if (error === undefined) map.delete(path);\n    else map.set(path, error);\n  };\n\n  const runField = (path: string, withFormValidator: boolean): Promise<void> => {\n    const runtime = fields.get(path);\n    if (!runtime) return Promise.resolve();\n    runtime.token += 1;\n    const token = runtime.token;\n    const { validate } = runtime.registration;\n    if (!validate && !(withFormValidator && formValidator)) return Promise.resolve();\n\n    validating.add(path);\n    notify();\n    return (async () => {\n      const values = getValues();\n      const [fieldError, formResult] = await Promise.all([\n        validate?.(getValue(path), values),\n        withFormValidator ? formValidator?.(values) : undefined,\n      ]);\n      if (runtime.token !== token || fields.get(path) !== runtime) return;\n      setOrDelete(fieldErrors, path, fieldError);\n      if (withFormValidator) setOrDelete(formErrors, path, formResult?.[path]);\n      validating.delete(path);\n      notify();\n    })();\n  };\n\n  const schedule = (path: string, trigger: ValidateTrigger) => {\n    const runtime = fields.get(path);\n    if (!runtime || !shouldValidate(path, trigger)) return;\n    clearTimeout(runtime.timer);\n    const debounceMs = runtime.registration.debounceMs ?? 0;\n    if (trigger === 'change' && debounceMs > 0) {\n      runtime.token += 1;\n      runtime.timer = setTimeout(() => void runField(path, true), debounceMs);\n      return;\n    }\n    void runField(path, true);\n  };\n\n  const clearErrorsUnder = (path: string, inclusive = false) => {\n    for (const map of [fieldErrors, formErrors, serverErrors])\n      for (const key of map.keys())\n        if (inclusive ? isUnder(key, path) : key.startsWith(`${path}.`)) map.delete(key);\n  };\n\n  const resetTo = (values: Record<string, unknown>) => {\n    clearRuntimeState();\n    baseline = values;\n    form.reset(values);\n    notify();\n  };\n\n  const emitValueChange = (path: string, source: ChangeSource) => {\n    for (const listener of valueListeners) listener({ path, source });\n  };\n\n  const afterUserChange = (path: string) => {\n    touched.add(path);\n    serverErrors.delete(path);\n    schedule(path, 'change');\n    for (const [other, runtime] of fields) {\n      if (other !== path && runtime.registration.deps?.includes(path) && isTouched(other))\n        void runField(other, true);\n    }\n    notify();\n  };\n\n  const validate = async (paths?: string[]): Promise<ValidateResult> => {\n    const values = getValues();\n    const formResult = (formValidator ? await formValidator(values) : undefined) ?? {};\n    const targets = paths ?? [...new Set([...fields.keys(), ...Object.keys(formResult)])];\n    await Promise.all(targets.map((path) => runField(path, false)));\n    for (const path of targets) setOrDelete(formErrors, path, formResult[path]);\n    notify();\n    const errors: Record<string, string> = {};\n    for (const path of targets) {\n      const error = errorOf(path);\n      if (error !== undefined) errors[path] = error;\n    }\n    return { errors, valid: Object.keys(errors).length === 0 };\n  };\n\n  const clearRuntimeState = () => {\n    for (const runtime of fields.values()) {\n      clearTimeout(runtime.timer);\n      runtime.token += 1;\n    }\n    fieldErrors.clear();\n    formErrors.clear();\n    serverErrors.clear();\n    validating.clear();\n    touched.clear();\n  };\n\n  const runSubmit = async (onSubmit?: (values: Record<string, unknown>) => unknown) => {\n    submitCount += 1;\n    serverErrors.clear();\n    for (const path of fields.keys()) touched.add(path);\n    let values: Record<string, unknown>;\n    let result: ValidateResult;\n    do {\n      values = getValues();\n      result = await validate();\n      // Async validators must finish against unchanged values before submission.\n    } while (values !== getValues());\n    if (!result.valid) {\n      notify();\n      return result;\n    }\n    submitting = true;\n    notify();\n    try {\n      await onSubmit?.(values);\n      if (serverErrors.size > 0) return { errors: Object.fromEntries(serverErrors), valid: false };\n      resetTo(getValues());\n    } finally {\n      submitting = false;\n      notify();\n    }\n    return result;\n  };\n\n  const engine: FormEngine = {\n    blurField: (path) => {\n      touched.add(path);\n      schedule(path, 'blur');\n      notify();\n    },\n    destroy: () => {\n      for (const runtime of fields.values()) clearTimeout(runtime.timer);\n      storeSubscription.unsubscribe();\n      listeners.clear();\n      valueListeners.clear();\n    },\n    getField,\n    getStatus,\n    getValue,\n    getValues,\n    isTouched,\n    moveItem: (path, from, to) => {\n      form.moveFieldValues(toEnginePath(path) as never, from, to);\n      touched.add(path);\n      clearErrorsUnder(path);\n      emitValueChange(path, 'user');\n      notify();\n    },\n    onValueChange: (listener) => {\n      valueListeners.add(listener);\n      return () => valueListeners.delete(listener);\n    },\n    pushItem: (path, item) => {\n      form.pushFieldValue(toEnginePath(path) as never, item as never);\n      touched.add(path);\n      emitValueChange(path, 'user');\n      notify();\n    },\n    registerField: (path, registration) => {\n      const runtime: FieldRuntime = { registration, token: 0 };\n      fields.set(path, runtime);\n      return () => {\n        if (fields.get(path) !== runtime) return;\n        clearTimeout(runtime.timer);\n        fields.delete(path);\n        fieldErrors.delete(path);\n        validating.delete(path);\n        snapshots.delete(path);\n        notify();\n      };\n    },\n    removeItem: (path, index) => {\n      void form.removeFieldValue(toEnginePath(path) as never, index);\n      touched.add(path);\n      clearErrorsUnder(path);\n      emitValueChange(path, 'user');\n      notify();\n    },\n    reset: (values) => resetTo(values ?? baseline),\n    resetField: (path) => {\n      for (const [key, runtime] of fields) {\n        if (!isUnder(key, path)) continue;\n        clearTimeout(runtime.timer);\n        runtime.token += 1;\n        validating.delete(key);\n      }\n      for (const entry of touched) if (isUnder(entry, path)) touched.delete(entry);\n      clearErrorsUnder(path, true);\n      form.setFieldValue(toEnginePath(path) as never, getBy(baseline, toEnginePath(path)), {\n        dontUpdateMeta: true,\n      });\n      emitValueChange(path, 'api');\n      notify();\n    },\n    setErrors: (errors) => {\n      for (const [path, error] of Object.entries(errors)) setOrDelete(serverErrors, path, error);\n      notify();\n    },\n    setFormValidator: (validator) => {\n      formValidator = validator;\n    },\n    setValue: (path, value, source) => {\n      form.setFieldValue(toEnginePath(path) as never, value as never, { dontUpdateMeta: true });\n      if (source === 'api') baseline = setBy(baseline, toEnginePath(path), () => value);\n      emitValueChange(path, source);\n      if (source === 'user') afterUserChange(path);\n    },\n    submit: (onSubmit) => {\n      inflightSubmit ??= runSubmit(onSubmit).finally(() => {\n        inflightSubmit = undefined;\n      });\n      return inflightSubmit;\n    },\n    subscribe: (listener) => {\n      listeners.add(listener);\n      return () => listeners.delete(listener);\n    },\n    validate,\n  };\n\n  return engine;\n};\n"],"mappings":"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"}

package/es/HotkeyInput/HotkeyInput.mjs

@@ -4,6 +4,7 @@ import { useThemeMode } from "../styles/theme/scope.mjs";
 import { NORMATIVE_MODIFIER, checkIsAppleDevice, splitKeysByPlus } from "../Hotkey/utils.mjs";
 import Hotkey from "../Hotkey/Hotkey.mjs";
 import ActionIcon from "../ActionIcon/ActionIcon.mjs";
+import { useControlledState } from "../hooks/useControlledState.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
 import hotkey_default from "../i18n/resources/en/hotkey.mjs";
 import { styles } from "./style.mjs";
@@ -12,7 +13,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as stylex from "@stylexjs/stylex";
 import { Undo2Icon, XIcon } from "lucide-react";
 import { isEqual } from "es-toolkit/compat";
-import useControlledState from "use-merge-value";
 import { useHotkeys, useRecordHotkeys } from "react-hotkeys-hook";
 //#region src/HotkeyInput/HotkeyInput.tsx
 const HotkeyInput = memo(({ value = "", defaultValue = "", resetValue = "", onChange, onClear, onConflict, placeholder, disabled, shadow, allowClear, allowReset = true, style, className, hotkeyConflicts = [], variant, texts, isApple, onBlur, onReset, onFocus }) => {

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 * as stylex from '@stylexjs/stylex';\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';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { styles } 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<HTMLInputElement>(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 resolvedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n    const hasError = hasConflict || hasInvalidCombination;\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          {...stylex.props(\n            styles.root,\n            styles[resolvedVariant],\n            shadow && styles.shadow,\n            isFocused && styles.focused,\n            hasError && styles.error,\n            hasError && resolvedVariant === 'outlined' && styles.errorOutlined,\n            disabled && styles.disabled,\n          )}\n          onClick={handleClick}\n        >\n          <div style={{ pointerEvents: 'none' }}>\n            {isRecording ? (\n              <span {...stylex.props(styles.placeholder)}>\n                {keys.length > 0 ? <Hotkey keys={keysString} /> : placeholderText}\n              </span>\n            ) : hotkeyValue ? (\n              <Hotkey keys={hotkeyValue} />\n            ) : (\n              <span {...stylex.props(styles.placeholder)}>{placeholderText}</span>\n            )}\n          </div>\n\n          {/* 隐藏的输入框，用于接收焦点 */}\n          <input\n            readOnly\n            {...stylex.props(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 {...stylex.props(styles.errorText)}>{conflictText}</div>}\n        {hasInvalidCombination && <div {...stylex.props(styles.errorText)}>{invalidText}</div>}\n      </Flexbox>\n    );\n  },\n);\n\nHotkeyInput.displayName = 'HotkeyInput';\n\nexport default HotkeyInput;\n"],"mappings":"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"}
+{"version":3,"file":"HotkeyInput.mjs","names":["hotkeyMessages","Flexbox"],"sources":["../../src/HotkeyInput/HotkeyInput.tsx"],"sourcesContent":["'use client';\n\nimport * as stylex from '@stylexjs/stylex';\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';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport { useControlledState } from '@/hooks/useControlledState';\nimport Hotkey from '@/Hotkey';\nimport { checkIsAppleDevice, NORMATIVE_MODIFIER, splitKeysByPlus } from '@/Hotkey/utils';\nimport hotkeyMessages from '@/i18n/resources/en/hotkey';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { useThemeMode } from '@/styles/theme/scope';\n\nimport { styles } 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<HTMLInputElement>(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 resolvedVariant = variant || (isDarkMode ? 'filled' : 'outlined');\n    const hasError = hasConflict || hasInvalidCombination;\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          {...stylex.props(\n            styles.root,\n            styles[resolvedVariant],\n            shadow && styles.shadow,\n            isFocused && styles.focused,\n            hasError && styles.error,\n            hasError && resolvedVariant === 'outlined' && styles.errorOutlined,\n            disabled && styles.disabled,\n          )}\n          onClick={handleClick}\n        >\n          <div style={{ pointerEvents: 'none' }}>\n            {isRecording ? (\n              <span {...stylex.props(styles.placeholder)}>\n                {keys.length > 0 ? <Hotkey keys={keysString} /> : placeholderText}\n              </span>\n            ) : hotkeyValue ? (\n              <Hotkey keys={hotkeyValue} />\n            ) : (\n              <span {...stylex.props(styles.placeholder)}>{placeholderText}</span>\n            )}\n          </div>\n\n          {/* 隐藏的输入框，用于接收焦点 */}\n          <input\n            readOnly\n            {...stylex.props(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 {...stylex.props(styles.errorText)}>{conflictText}</div>}\n        {hasInvalidCombination && <div {...stylex.props(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/Image/viewer/ImageViewer.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { useAppElement } from "../../ConfigProvider/AppElementContext.mjs";
 import { styleProps } from "../../styles/stylex/props.mjs";
+import { useMergeRefs } from "../../utils/mergeRefs.mjs";
 import { useLayerZIndex } from "../../internal/zIndex/useLayerZIndex.mjs";
 import { ToastHost } from "../../Toast/imperative.mjs";
 import { styles } from "../style.mjs";
@@ -15,7 +16,6 @@ import { useZoomPan } from "./useZoomPan.mjs";
 import ViewerChrome from "./ViewerChrome.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMergeRefs } from "react-merge-refs";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/Image/viewer/ImageViewer.tsx
 const readViewport = () => ({

package/es/Image/viewer/ImageViewer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ImageViewer.mjs","names":[],"sources":["../../../src/Image/viewer/ImageViewer.tsx"],"sourcesContent":["'use client';\n\nimport '../style.css';\n\nimport { Dialog, type DialogRootProps } from '@base-ui/react/dialog';\nimport {\n  memo,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useMergeRefs } from 'react-merge-refs';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useLayerZIndex } from '@/internal/zIndex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { ToastHost } from '@/Toast';\n\nimport { styles } from '../style';\nimport { computeFit, type Size, unrotatedRect } from './geometry';\nimport { beginClosePreview, endClosePreview, type PreviewEntry } from './registry';\nimport { useFinalFocus } from './useFinalFocus';\nimport { useFlipTransition } from './useFlipTransition';\nimport { readNatural, useGalleryNav } from './useGalleryNav';\nimport { useRefitTransition } from './useRefitTransition';\nimport { useViewerGestures } from './useViewerGestures';\nimport { useZoomPan } from './useZoomPan';\nimport ViewerChrome from './ViewerChrome';\n\nexport interface ImageViewerProps {\n  entries: PreviewEntry[];\n  index: number;\n  openerFocusElement: HTMLElement | null;\n  token: number;\n}\n\nconst readViewport = (): Size => ({ height: window.innerHeight, width: window.innerWidth });\n\nconst prefersReducedMotion = () =>\n  window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n\nconst ImageViewer = memo<ImageViewerProps>(({ entries, index, openerFocusElement, token }) => {\n  const openerEntry = entries[index];\n  const appElement = useAppElement();\n  const [animated] = useState(() => !prefersReducedMotion());\n\n  const { ref: layerRef, zIndex } = useLayerZIndex<HTMLDivElement>('modal');\n\n  const [currentIndex, setCurrentIndex] = useState(index);\n  const currentEntry = entries[currentIndex];\n  const currentEntryRef = useRef(currentEntry);\n  currentEntryRef.current = currentEntry;\n\n  const [source, setSource] = useState(openerEntry.src);\n  const [natural, setNatural] = useState<Size>(() => readNatural(openerEntry.element));\n  const [viewport, setViewport] = useState<Size>(readViewport);\n\n  const closeRef = useRef<(() => void) | null>(null);\n  const requestClose = useCallback(() => closeRef.current?.(), []);\n\n  // useZoomPan needs to gate its wheel/toolbar entry points on close-in-flight,\n  // but that state only exists once useFlipTransition (below) has run — and it\n  // needs useZoomPan's own transform values first. Break the cycle with a\n  // stable indirection: the ref is repointed at the real isClosing once it's\n  // available, written directly during render like the other *Ref fields here.\n  const isClosingIndirectRef = useRef<() => boolean>(() => false);\n  const isClosingIndirect = useCallback(() => isClosingIndirectRef.current(), []);\n\n  const isTransitioningIndirectRef = useRef<() => boolean>(() => true);\n  const isTransitioningIndirect = useCallback(() => isTransitioningIndirectRef.current(), []);\n\n  const fillViewport = Boolean(\n    currentEntry.previewSrc && currentEntry.previewSrc !== currentEntry.src,\n  );\n\n  const {\n    canZoomIn,\n    canZoomOut,\n    dragBy,\n    dragEnd,\n    escIntent,\n    flipHorizontal,\n    flipVertical,\n    flipX,\n    flipY,\n    getInitialScale,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    reset,\n    resetCloseTracking,\n    rotate,\n    rotateLeft,\n    rotateRight,\n    rotation,\n    scale,\n    setNatural: syncZoomNatural,\n    setViewport: syncZoomViewport,\n    toggleActualSize,\n    x,\n    y,\n    zoomIn,\n    zoomOut,\n  } = useZoomPan({\n    autoZoomThreshold: currentEntry.options.autoZoomThreshold,\n    defaultZoom: currentEntry.options.defaultZoom,\n    fillViewport,\n    isClosing: isClosingIndirect,\n    isTransitioning: isTransitioningIndirect,\n    maxScale: currentEntry.options.maxScale,\n    natural,\n    onCloseRequest: requestClose,\n    viewport,\n  });\n\n  const fitRect = useMemo(\n    () => computeFit(natural, viewport, rotation, fillViewport),\n    [natural, viewport, rotation, fillViewport],\n  );\n  const fitRectRef = useRef(fitRect);\n  fitRectRef.current = fitRect;\n  const getFitRect = useCallback(() => fitRectRef.current, []);\n\n  const imageRect = useMemo(() => unrotatedRect(fitRect, rotation), [fitRect, rotation]);\n\n  const viewportRef = useRef(viewport);\n  viewportRef.current = viewport;\n  const getViewportWidth = useCallback(() => viewportRef.current.width, []);\n\n  const getCloseSource = useCallback(() => currentEntryRef.current.element, []);\n\n  const transform = useMemo(\n    () => ({ flipX, flipY, rotate, scale, x, y }),\n    [flipX, flipY, rotate, scale, x, y],\n  );\n  const handleClosed = useCallback(() => endClosePreview(token), [token]);\n\n  const {\n    backdropRef,\n    chromeRef,\n    close,\n    imageRef: flipImageRef,\n    isClosing,\n    isTransitioning,\n    switchTo,\n  } = useFlipTransition({\n    animated,\n    getCloseSource,\n    getFitRect,\n    getInitialScale,\n    getViewportWidth,\n    onClosed: handleClosed,\n    source: openerEntry.element,\n    transform,\n  });\n  isClosingIndirectRef.current = isClosing;\n  isTransitioningIndirectRef.current = isTransitioning;\n\n  useRefitTransition({\n    animated,\n    fillViewport,\n    isTransitioning,\n    natural,\n    rotation,\n    scale,\n    viewport,\n    x,\n    y,\n  });\n  const finalFocus = useFinalFocus(openerFocusElement);\n\n  const isCleanRef = useRef(isClean);\n  isCleanRef.current = isClean;\n\n  const handleClose = useCallback(() => {\n    beginClosePreview(token);\n    close({ fade: !isCleanRef.current });\n  }, [close, token]);\n  closeRef.current = handleClose;\n\n  const handleDialogOpenChange = useCallback<NonNullable<DialogRootProps['onOpenChange']>>(\n    (open, eventDetails) => {\n      if (open) return;\n      // Base UI fires this on every Esc regardless of whether we're already\n      // mid-close (our Dialog.Root's open prop never actually flips to\n      // false), so without this guard a second Esc during the close window\n      // reads escIntent() off the close spring's mid-flight scale, decides\n      // 'reset', and cancels the close animation out from under itself.\n      if (isClosing()) return;\n      if (eventDetails.reason === 'escape-key' && escIntent() === 'reset') {\n        eventDetails.cancel();\n        reset();\n        return;\n      }\n      handleClose();\n    },\n    [escIntent, handleClose, isClosing, reset],\n  );\n\n  const gestures = useViewerGestures({\n    dragBy,\n    dragEnd,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    onClose: handleClose,\n    reset,\n    zoomIn,\n    zoomOut,\n  });\n\n  const { hasNext, hasPrev, next, prev } = useGalleryNav({\n    cancelPendingClose: gestures.cancelPendingClose,\n    currentIndex,\n    entries,\n    flipX,\n    flipY,\n    getInitialScale,\n    resetCloseTracking,\n    rotate,\n    scale,\n    setCurrentIndex,\n    setNatural,\n    setSource,\n    switchTo,\n    syncZoomNatural,\n    x,\n    y,\n  });\n\n  const popupNodeRef = useRef<HTMLDivElement | null>(null);\n  const popupRef = useMergeRefs<HTMLDivElement>([layerRef, gestures.popupRef, popupNodeRef]);\n  const imageRef = useMergeRefs<HTMLImageElement>([flipImageRef, gestures.imageRef]);\n\n  const handleLoad = useCallback(\n    (event: SyntheticEvent<HTMLImageElement>) => {\n      const loaded = event.currentTarget;\n      if (!loaded.naturalWidth || !loaded.naturalHeight) return;\n      const next = { height: loaded.naturalHeight, width: loaded.naturalWidth };\n      setNatural((prev) =>\n        prev.width === next.width && prev.height === next.height ? prev : next,\n      );\n      syncZoomNatural(next);\n    },\n    [syncZoomNatural],\n  );\n\n  useEffect(() => {\n    const handleResize = () => {\n      const next = readViewport();\n      setViewport(next);\n      syncZoomViewport(next);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [syncZoomViewport]);\n\n  useEffect(() => {\n    const { previewSrc, src } = currentEntry;\n    if (!previewSrc || previewSrc === src) return;\n    let cancelled = false;\n    const loader = new window.Image();\n    const handleLoaded = () => {\n      if (!cancelled) setSource(previewSrc);\n    };\n    loader.addEventListener('load', handleLoaded);\n    loader.src = previewSrc;\n    return () => {\n      cancelled = true;\n      loader.removeEventListener('load', handleLoaded);\n    };\n  }, [currentEntry]);\n\n  useEffect(\n    () => () => {\n      const thumbnailWasRemoved = !openerEntry.element.isConnected;\n      if (thumbnailWasRemoved) endClosePreview(token);\n    },\n    [openerEntry, token],\n  );\n\n  return (\n    <Dialog.Root modal open onOpenChange={handleDialogOpenChange}>\n      <Dialog.Portal container={appElement ?? undefined}>\n        {/* Base UI drops a nested dialog's backdrop so overlays don't stack. The viewer is\n            not an overlay on the surface it opened from — it replaces the screen — so it\n            keeps its own scrim, or a viewer opened from a maskless drawer would show the\n            page straight through the letterbox around the image. */}\n        <Dialog.Backdrop\n          forceRender\n          {...styleProps(styles.viewerBackdrop, 'lobe-image-viewer-backdrop')}\n          ref={backdropRef}\n          style={zIndex === undefined ? undefined : { zIndex }}\n          onClick={gestures.onSurfaceClick}\n        />\n        <Dialog.Popup\n          aria-label={currentEntry.element.alt || undefined}\n          {...styleProps(styles.viewerPopup, 'lobe-image-viewer-popup')}\n          finalFocus={finalFocus}\n          // Focus the popup itself instead of Base UI's default (the first\n          // tabbable — the close button): a focus-visible close button pins\n          // the idle auto-hide open forever and pops its tooltip on open.\n          initialFocus={popupNodeRef}\n          ref={popupRef}\n          style={zIndex === undefined ? undefined : { zIndex: zIndex + 1 }}\n          tabIndex={-1}\n          onClick={gestures.onSurfaceClick}\n          onPointerCancel={gestures.onPointerFinish}\n          onPointerDown={gestures.onPointerDown}\n          onPointerMove={gestures.onPointerMove}\n          onPointerUp={gestures.onPointerFinish}\n        >\n          <img\n            alt={currentEntry.element.alt}\n            {...styleProps(styles.viewerImage, 'lobe-image-viewer-image')}\n            ref={imageRef}\n            src={source}\n            style={{\n              cursor: gestures.cursor,\n              height: imageRect.height,\n              left: imageRect.x,\n              top: imageRect.y,\n              width: imageRect.width,\n            }}\n            onClick={gestures.onImageClick}\n            onDoubleClick={gestures.onImageDoubleClick}\n            onLoad={handleLoad}\n          />\n          <ViewerChrome\n            canZoomIn={canZoomIn}\n            canZoomOut={canZoomOut}\n            chromeRef={chromeRef}\n            current={currentIndex}\n            fitRect={fitRect}\n            flipHorizontal={flipHorizontal}\n            flipVertical={flipVertical}\n            hasNext={hasNext}\n            hasPrev={hasPrev}\n            natural={natural}\n            next={next}\n            prev={prev}\n            rotateLeft={rotateLeft}\n            rotateRight={rotateRight}\n            rotation={rotation}\n            scale={scale}\n            source={source}\n            toggleActualSize={toggleActualSize}\n            toolbarAddon={currentEntry.options.toolbarAddon}\n            total={entries.length}\n            zoomIn={zoomIn}\n            zoomOut={zoomOut}\n            onClose={handleClose}\n            onDownload={currentEntry.options.onDownload}\n          />\n        </Dialog.Popup>\n        <ToastHost root={appElement ?? undefined} />\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n});\n\nImageViewer.displayName = 'ImageViewer';\n\nexport default ImageViewer;\n"],"mappings":"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"}
+{"version":3,"file":"ImageViewer.mjs","names":[],"sources":["../../../src/Image/viewer/ImageViewer.tsx"],"sourcesContent":["'use client';\n\nimport '../style.css';\n\nimport { Dialog, type DialogRootProps } from '@base-ui/react/dialog';\nimport {\n  memo,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useAppElement } from '@/ConfigProvider/AppElementContext';\nimport { useLayerZIndex } from '@/internal/zIndex';\nimport { styleProps } from '@/styles/stylex/props';\nimport { ToastHost } from '@/Toast';\nimport { useMergeRefs } from '@/utils/mergeRefs';\n\nimport { styles } from '../style';\nimport { computeFit, type Size, unrotatedRect } from './geometry';\nimport { beginClosePreview, endClosePreview, type PreviewEntry } from './registry';\nimport { useFinalFocus } from './useFinalFocus';\nimport { useFlipTransition } from './useFlipTransition';\nimport { readNatural, useGalleryNav } from './useGalleryNav';\nimport { useRefitTransition } from './useRefitTransition';\nimport { useViewerGestures } from './useViewerGestures';\nimport { useZoomPan } from './useZoomPan';\nimport ViewerChrome from './ViewerChrome';\n\nexport interface ImageViewerProps {\n  entries: PreviewEntry[];\n  index: number;\n  openerFocusElement: HTMLElement | null;\n  token: number;\n}\n\nconst readViewport = (): Size => ({ height: window.innerHeight, width: window.innerWidth });\n\nconst prefersReducedMotion = () =>\n  window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;\n\nconst ImageViewer = memo<ImageViewerProps>(({ entries, index, openerFocusElement, token }) => {\n  const openerEntry = entries[index];\n  const appElement = useAppElement();\n  const [animated] = useState(() => !prefersReducedMotion());\n\n  const { ref: layerRef, zIndex } = useLayerZIndex<HTMLDivElement>('modal');\n\n  const [currentIndex, setCurrentIndex] = useState(index);\n  const currentEntry = entries[currentIndex];\n  const currentEntryRef = useRef(currentEntry);\n  currentEntryRef.current = currentEntry;\n\n  const [source, setSource] = useState(openerEntry.src);\n  const [natural, setNatural] = useState<Size>(() => readNatural(openerEntry.element));\n  const [viewport, setViewport] = useState<Size>(readViewport);\n\n  const closeRef = useRef<(() => void) | null>(null);\n  const requestClose = useCallback(() => closeRef.current?.(), []);\n\n  // useZoomPan needs to gate its wheel/toolbar entry points on close-in-flight,\n  // but that state only exists once useFlipTransition (below) has run — and it\n  // needs useZoomPan's own transform values first. Break the cycle with a\n  // stable indirection: the ref is repointed at the real isClosing once it's\n  // available, written directly during render like the other *Ref fields here.\n  const isClosingIndirectRef = useRef<() => boolean>(() => false);\n  const isClosingIndirect = useCallback(() => isClosingIndirectRef.current(), []);\n\n  const isTransitioningIndirectRef = useRef<() => boolean>(() => true);\n  const isTransitioningIndirect = useCallback(() => isTransitioningIndirectRef.current(), []);\n\n  const fillViewport = Boolean(\n    currentEntry.previewSrc && currentEntry.previewSrc !== currentEntry.src,\n  );\n\n  const {\n    canZoomIn,\n    canZoomOut,\n    dragBy,\n    dragEnd,\n    escIntent,\n    flipHorizontal,\n    flipVertical,\n    flipX,\n    flipY,\n    getInitialScale,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    reset,\n    resetCloseTracking,\n    rotate,\n    rotateLeft,\n    rotateRight,\n    rotation,\n    scale,\n    setNatural: syncZoomNatural,\n    setViewport: syncZoomViewport,\n    toggleActualSize,\n    x,\n    y,\n    zoomIn,\n    zoomOut,\n  } = useZoomPan({\n    autoZoomThreshold: currentEntry.options.autoZoomThreshold,\n    defaultZoom: currentEntry.options.defaultZoom,\n    fillViewport,\n    isClosing: isClosingIndirect,\n    isTransitioning: isTransitioningIndirect,\n    maxScale: currentEntry.options.maxScale,\n    natural,\n    onCloseRequest: requestClose,\n    viewport,\n  });\n\n  const fitRect = useMemo(\n    () => computeFit(natural, viewport, rotation, fillViewport),\n    [natural, viewport, rotation, fillViewport],\n  );\n  const fitRectRef = useRef(fitRect);\n  fitRectRef.current = fitRect;\n  const getFitRect = useCallback(() => fitRectRef.current, []);\n\n  const imageRect = useMemo(() => unrotatedRect(fitRect, rotation), [fitRect, rotation]);\n\n  const viewportRef = useRef(viewport);\n  viewportRef.current = viewport;\n  const getViewportWidth = useCallback(() => viewportRef.current.width, []);\n\n  const getCloseSource = useCallback(() => currentEntryRef.current.element, []);\n\n  const transform = useMemo(\n    () => ({ flipX, flipY, rotate, scale, x, y }),\n    [flipX, flipY, rotate, scale, x, y],\n  );\n  const handleClosed = useCallback(() => endClosePreview(token), [token]);\n\n  const {\n    backdropRef,\n    chromeRef,\n    close,\n    imageRef: flipImageRef,\n    isClosing,\n    isTransitioning,\n    switchTo,\n  } = useFlipTransition({\n    animated,\n    getCloseSource,\n    getFitRect,\n    getInitialScale,\n    getViewportWidth,\n    onClosed: handleClosed,\n    source: openerEntry.element,\n    transform,\n  });\n  isClosingIndirectRef.current = isClosing;\n  isTransitioningIndirectRef.current = isTransitioning;\n\n  useRefitTransition({\n    animated,\n    fillViewport,\n    isTransitioning,\n    natural,\n    rotation,\n    scale,\n    viewport,\n    x,\n    y,\n  });\n  const finalFocus = useFinalFocus(openerFocusElement);\n\n  const isCleanRef = useRef(isClean);\n  isCleanRef.current = isClean;\n\n  const handleClose = useCallback(() => {\n    beginClosePreview(token);\n    close({ fade: !isCleanRef.current });\n  }, [close, token]);\n  closeRef.current = handleClose;\n\n  const handleDialogOpenChange = useCallback<NonNullable<DialogRootProps['onOpenChange']>>(\n    (open, eventDetails) => {\n      if (open) return;\n      // Base UI fires this on every Esc regardless of whether we're already\n      // mid-close (our Dialog.Root's open prop never actually flips to\n      // false), so without this guard a second Esc during the close window\n      // reads escIntent() off the close spring's mid-flight scale, decides\n      // 'reset', and cancels the close animation out from under itself.\n      if (isClosing()) return;\n      if (eventDetails.reason === 'escape-key' && escIntent() === 'reset') {\n        eventDetails.cancel();\n        reset();\n        return;\n      }\n      handleClose();\n    },\n    [escIntent, handleClose, isClosing, reset],\n  );\n\n  const gestures = useViewerGestures({\n    dragBy,\n    dragEnd,\n    handleDoubleClick,\n    handleWheel,\n    isClean,\n    isZoomed,\n    onClose: handleClose,\n    reset,\n    zoomIn,\n    zoomOut,\n  });\n\n  const { hasNext, hasPrev, next, prev } = useGalleryNav({\n    cancelPendingClose: gestures.cancelPendingClose,\n    currentIndex,\n    entries,\n    flipX,\n    flipY,\n    getInitialScale,\n    resetCloseTracking,\n    rotate,\n    scale,\n    setCurrentIndex,\n    setNatural,\n    setSource,\n    switchTo,\n    syncZoomNatural,\n    x,\n    y,\n  });\n\n  const popupNodeRef = useRef<HTMLDivElement | null>(null);\n  const popupRef = useMergeRefs<HTMLDivElement>([layerRef, gestures.popupRef, popupNodeRef]);\n  const imageRef = useMergeRefs<HTMLImageElement>([flipImageRef, gestures.imageRef]);\n\n  const handleLoad = useCallback(\n    (event: SyntheticEvent<HTMLImageElement>) => {\n      const loaded = event.currentTarget;\n      if (!loaded.naturalWidth || !loaded.naturalHeight) return;\n      const next = { height: loaded.naturalHeight, width: loaded.naturalWidth };\n      setNatural((prev) =>\n        prev.width === next.width && prev.height === next.height ? prev : next,\n      );\n      syncZoomNatural(next);\n    },\n    [syncZoomNatural],\n  );\n\n  useEffect(() => {\n    const handleResize = () => {\n      const next = readViewport();\n      setViewport(next);\n      syncZoomViewport(next);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, [syncZoomViewport]);\n\n  useEffect(() => {\n    const { previewSrc, src } = currentEntry;\n    if (!previewSrc || previewSrc === src) return;\n    let cancelled = false;\n    const loader = new window.Image();\n    const handleLoaded = () => {\n      if (!cancelled) setSource(previewSrc);\n    };\n    loader.addEventListener('load', handleLoaded);\n    loader.src = previewSrc;\n    return () => {\n      cancelled = true;\n      loader.removeEventListener('load', handleLoaded);\n    };\n  }, [currentEntry]);\n\n  useEffect(\n    () => () => {\n      const thumbnailWasRemoved = !openerEntry.element.isConnected;\n      if (thumbnailWasRemoved) endClosePreview(token);\n    },\n    [openerEntry, token],\n  );\n\n  return (\n    <Dialog.Root modal open onOpenChange={handleDialogOpenChange}>\n      <Dialog.Portal container={appElement ?? undefined}>\n        {/* Base UI drops a nested dialog's backdrop so overlays don't stack. The viewer is\n            not an overlay on the surface it opened from — it replaces the screen — so it\n            keeps its own scrim, or a viewer opened from a maskless drawer would show the\n            page straight through the letterbox around the image. */}\n        <Dialog.Backdrop\n          forceRender\n          {...styleProps(styles.viewerBackdrop, 'lobe-image-viewer-backdrop')}\n          ref={backdropRef}\n          style={zIndex === undefined ? undefined : { zIndex }}\n          onClick={gestures.onSurfaceClick}\n        />\n        <Dialog.Popup\n          aria-label={currentEntry.element.alt || undefined}\n          {...styleProps(styles.viewerPopup, 'lobe-image-viewer-popup')}\n          finalFocus={finalFocus}\n          // Focus the popup itself instead of Base UI's default (the first\n          // tabbable — the close button): a focus-visible close button pins\n          // the idle auto-hide open forever and pops its tooltip on open.\n          initialFocus={popupNodeRef}\n          ref={popupRef}\n          style={zIndex === undefined ? undefined : { zIndex: zIndex + 1 }}\n          tabIndex={-1}\n          onClick={gestures.onSurfaceClick}\n          onPointerCancel={gestures.onPointerFinish}\n          onPointerDown={gestures.onPointerDown}\n          onPointerMove={gestures.onPointerMove}\n          onPointerUp={gestures.onPointerFinish}\n        >\n          <img\n            alt={currentEntry.element.alt}\n            {...styleProps(styles.viewerImage, 'lobe-image-viewer-image')}\n            ref={imageRef}\n            src={source}\n            style={{\n              cursor: gestures.cursor,\n              height: imageRect.height,\n              left: imageRect.x,\n              top: imageRect.y,\n              width: imageRect.width,\n            }}\n            onClick={gestures.onImageClick}\n            onDoubleClick={gestures.onImageDoubleClick}\n            onLoad={handleLoad}\n          />\n          <ViewerChrome\n            canZoomIn={canZoomIn}\n            canZoomOut={canZoomOut}\n            chromeRef={chromeRef}\n            current={currentIndex}\n            fitRect={fitRect}\n            flipHorizontal={flipHorizontal}\n            flipVertical={flipVertical}\n            hasNext={hasNext}\n            hasPrev={hasPrev}\n            natural={natural}\n            next={next}\n            prev={prev}\n            rotateLeft={rotateLeft}\n            rotateRight={rotateRight}\n            rotation={rotation}\n            scale={scale}\n            source={source}\n            toggleActualSize={toggleActualSize}\n            toolbarAddon={currentEntry.options.toolbarAddon}\n            total={entries.length}\n            zoomIn={zoomIn}\n            zoomOut={zoomOut}\n            onClose={handleClose}\n            onDownload={currentEntry.options.onDownload}\n          />\n        </Dialog.Popup>\n        <ToastHost root={appElement ?? undefined} />\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n});\n\nImageViewer.displayName = 'ImageViewer';\n\nexport default ImageViewer;\n"],"mappings":"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"}