@ifhover/leaf-ui 0.5.0 → 0.6.0

package/dist/esm/errorboundary/errorboundary.js

@@ -1,10 +1,16 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { Component } from "react";
-import { Button } from "../button/index.js";
-import { Result } from "../result/index.js";
+import { ButtonControl } from "../button/button.js";
+import { ComponentDefaultsContext, mergeComponentProps } from "../config-provider/component-defaults.js";
+import { ResultControl } from "../result/result.js";
 import { useText } from "../shared/use-text.js";
 class ErrorBoundary extends Component {
+    static contextType = ComponentDefaultsContext;
+    previousResetKeys = [];
+    get resolvedProps() {
+        return mergeComponentProps(this.context.ErrorBoundary, this.props);
+    }
     state = {
         error: null
     };
@@ -14,22 +20,27 @@ class ErrorBoundary extends Component {
         };
     }
     componentDidCatch(error, info) {
-        this.props.onError?.(error, info);
+        this.resolvedProps.onError?.(error, info);
+    }
+    componentDidMount() {
+        this.previousResetKeys = this.resolvedProps.resetKeys ?? [];
     }
-    componentDidUpdate(previous) {
-        const next = this.props.resetKeys ?? [];
-        const old = previous.resetKeys ?? [];
+    componentDidUpdate() {
+        const next = this.resolvedProps.resetKeys ?? [];
+        const old = this.previousResetKeys;
+        this.previousResetKeys = next;
         if (this.state.error && (next.length !== old.length || next.some((item, index)=>!Object.is(item, old[index])))) this.reset();
     }
     reset = ()=>{
-        this.props.onReset?.();
+        this.resolvedProps.onReset?.();
         this.setState({
             error: null
         });
     };
     render() {
-        if (!this.state.error) return this.props.children;
-        const fallback = this.props.fallback;
+        const props = this.resolvedProps;
+        if (!this.state.error) return props.children;
+        const fallback = props.fallback;
         return 'function' == typeof fallback ? fallback({
             error: this.state.error,
             reset: this.reset
@@ -40,14 +51,14 @@ class ErrorBoundary extends Component {
 }
 function DefaultFallback({ reset }) {
     const t = useText();
-    return /*#__PURE__*/ jsx(Result, {
+    return /*#__PURE__*/ jsx(ResultControl, {
         className: "leaf-error-boundary",
         status: "error",
-        title: t('内容暂时无法显示', 'This content could not be displayed'),
-        description: t('请重试，或稍后返回。', 'Please retry or come back later.'),
-        extra: /*#__PURE__*/ jsx(Button, {
+        title: t('errorBoundary.title'),
+        description: t("errorBoundary.description"),
+        extra: /*#__PURE__*/ jsx(ButtonControl, {
             onClick: reset,
-            children: t('重试', 'Retry')
+            children: t('common.retry')
         })
     });
 }

package/dist/esm/errorboundary/errorboundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"errorboundary/errorboundary.js","sources":["../../../src/errorboundary/errorboundary.tsx"],"sourcesContent":["import { Component, type ErrorInfo, type ReactNode } from 'react';\nimport { Button } from '../button';\nimport { Result } from '../result';\nimport { useText } from '../shared/use-text';\nexport interface ErrorBoundaryFallbackProps {\n  error: Error;\n  reset: () => void;\n}\nexport interface ErrorBoundaryProps {\n  children?: ReactNode;\n  fallback?: ReactNode | ((props: ErrorBoundaryFallbackProps) => ReactNode);\n  resetKeys?: readonly unknown[];\n  onError?: (error: Error, info: ErrorInfo) => void;\n  onReset?: () => void;\n}\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, { error: Error | null }> {\n  state: { error: Error | null } = { error: null };\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n  componentDidCatch(error: Error, info: ErrorInfo) {\n    this.props.onError?.(error, info);\n  }\n  componentDidUpdate(previous: ErrorBoundaryProps) {\n    const next = this.props.resetKeys ?? [];\n    const old = previous.resetKeys ?? [];\n    if (\n      this.state.error &&\n      (next.length !== old.length || next.some((item, index) => !Object.is(item, old[index])))\n    )\n      this.reset();\n  }\n  reset = () => {\n    this.props.onReset?.();\n    this.setState({ error: null });\n  };\n  render() {\n    if (!this.state.error) return this.props.children;\n    const fallback = this.props.fallback;\n    return typeof fallback === 'function'\n      ? fallback({ error: this.state.error, reset: this.reset })\n      : (fallback ?? <DefaultFallback reset={this.reset} />);\n  }\n}\nfunction DefaultFallback({ reset }: { reset: () => void }) {\n  const t = useText();\n  return (\n    <Result\n      className=\"leaf-error-boundary\"\n      status=\"error\"\n      title={t('内容暂时无法显示', 'This content could not be displayed')}\n      description={t('请重试，或稍后返回。', 'Please retry or come back later.')}\n      extra={<Button onClick={reset}>{t('重试', 'Retry')}</Button>}\n    />\n  );\n}\n"],"names":["ErrorBoundary","Component","error","info","previous","next","old","item","index","Object","fallback","DefaultFallback","reset","t","useText","Result","Button"],"mappings":";;;;;;AAeO,MAAMA,sBAAsBC;IACjC,QAAiC;QAAE,OAAO;IAAK,EAAE;IACjD,OAAO,yBAAyBC,KAAY,EAAE;QAC5C,OAAO;YAAEA;QAAM;IACjB;IACA,kBAAkBA,KAAY,EAAEC,IAAe,EAAE;QAC/C,IAAI,CAAC,KAAK,CAAC,OAAO,GAAGD,OAAOC;IAC9B;IACA,mBAAmBC,QAA4B,EAAE;QAC/C,MAAMC,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,EAAE;QACvC,MAAMC,MAAMF,SAAS,SAAS,IAAI,EAAE;QACpC,IACE,IAAI,CAAC,KAAK,CAAC,KAAK,IACfC,CAAAA,KAAK,MAAM,KAAKC,IAAI,MAAM,IAAID,KAAK,IAAI,CAAC,CAACE,MAAMC,QAAU,CAACC,OAAO,EAAE,CAACF,MAAMD,GAAG,CAACE,MAAM,EAAC,GAEtF,IAAI,CAAC,KAAK;IACd;IACA,QAAQ;QACN,IAAI,CAAC,KAAK,CAAC,OAAO;QAClB,IAAI,CAAC,QAAQ,CAAC;YAAE,OAAO;QAAK;IAC9B,EAAE;IACF,SAAS;QACP,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;QACjD,MAAME,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ;QACpC,OAAO,AAAoB,cAApB,OAAOA,WACVA,SAAS;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,KAAK;QAAC,KACrDA,YAAY,WAAZA,GAAY,IAACC,iBAAeA;YAAC,OAAO,IAAI,CAAC,KAAK;;IACrD;AACF;AACA,SAASA,gBAAgB,EAAEC,KAAK,EAAyB;IACvD,MAAMC,IAAIC;IACV,OAAO,WAAP,GACE,IAACC,QAAMA;QACL,WAAU;QACV,QAAO;QACP,OAAOF,EAAE,YAAY;QACrB,aAAaA,EAAE,cAAc;QAC7B,qBAAO,IAACG,QAAMA;YAAC,SAASJ;sBAAQC,EAAE,MAAM;;;AAG9C"}
+{"version":3,"file":"errorboundary/errorboundary.js","sources":["../../../src/errorboundary/errorboundary.tsx"],"sourcesContent":["import { Component, type ContextType, type ErrorInfo, type ReactNode } from 'react';\nimport { ButtonControl } from '../button/button';\nimport {\n  ComponentDefaultsContext,\n  mergeComponentProps,\n} from '../config-provider/component-defaults';\nimport { ResultControl as Result } from '../result/result';\nimport { useText } from '../shared/use-text';\nexport interface ErrorBoundaryFallbackProps {\n  error: Error;\n  reset: () => void;\n}\nexport interface ErrorBoundaryProps {\n  children?: ReactNode;\n  fallback?: ReactNode | ((props: ErrorBoundaryFallbackProps) => ReactNode);\n  resetKeys?: readonly unknown[];\n  onError?: (error: Error, info: ErrorInfo) => void;\n  onReset?: () => void;\n}\nexport class ErrorBoundary extends Component<ErrorBoundaryProps, { error: Error | null }> {\n  static contextType = ComponentDefaultsContext;\n  declare context: ContextType<typeof ComponentDefaultsContext>;\n  private previousResetKeys: readonly unknown[] = [];\n  private get resolvedProps(): ErrorBoundaryProps {\n    return mergeComponentProps(this.context.ErrorBoundary, this.props);\n  }\n  state: { error: Error | null } = { error: null };\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n  componentDidCatch(error: Error, info: ErrorInfo) {\n    this.resolvedProps.onError?.(error, info);\n  }\n  componentDidMount() {\n    this.previousResetKeys = this.resolvedProps.resetKeys ?? [];\n  }\n  componentDidUpdate() {\n    const next = this.resolvedProps.resetKeys ?? [];\n    const old = this.previousResetKeys;\n    this.previousResetKeys = next;\n    if (\n      this.state.error &&\n      (next.length !== old.length || next.some((item, index) => !Object.is(item, old[index])))\n    )\n      this.reset();\n  }\n  reset = () => {\n    this.resolvedProps.onReset?.();\n    this.setState({ error: null });\n  };\n  render() {\n    const props = this.resolvedProps;\n    if (!this.state.error) return props.children;\n    const fallback = props.fallback;\n    return typeof fallback === 'function'\n      ? fallback({ error: this.state.error, reset: this.reset })\n      : (fallback ?? <DefaultFallback reset={this.reset} />);\n  }\n}\nfunction DefaultFallback({ reset }: { reset: () => void }) {\n  const t = useText();\n  return (\n    <Result\n      className=\"leaf-error-boundary\"\n      status=\"error\"\n      title={t('errorBoundary.title')}\n      description={t('errorBoundary.description')}\n      extra={<ButtonControl onClick={reset}>{t('common.retry')}</ButtonControl>}\n    />\n  );\n}\n"],"names":["ErrorBoundary","Component","ComponentDefaultsContext","mergeComponentProps","error","info","next","old","item","index","Object","props","fallback","DefaultFallback","reset","t","useText","Result","ButtonControl"],"mappings":";;;;;;;AAmBO,MAAMA,sBAAsBC;IACjC,OAAO,cAAcC,yBAAyB;IAEtC,oBAAwC,EAAE,CAAC;IACnD,IAAY,gBAAoC;QAC9C,OAAOC,oBAAoB,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,IAAI,CAAC,KAAK;IACnE;IACA,QAAiC;QAAE,OAAO;IAAK,EAAE;IACjD,OAAO,yBAAyBC,KAAY,EAAE;QAC5C,OAAO;YAAEA;QAAM;IACjB;IACA,kBAAkBA,KAAY,EAAEC,IAAe,EAAE;QAC/C,IAAI,CAAC,aAAa,CAAC,OAAO,GAAGD,OAAOC;IACtC;IACA,oBAAoB;QAClB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,aAAa,CAAC,SAAS,IAAI,EAAE;IAC7D;IACA,qBAAqB;QACnB,MAAMC,OAAO,IAAI,CAAC,aAAa,CAAC,SAAS,IAAI,EAAE;QAC/C,MAAMC,MAAM,IAAI,CAAC,iBAAiB;QAClC,IAAI,CAAC,iBAAiB,GAAGD;QACzB,IACE,IAAI,CAAC,KAAK,CAAC,KAAK,IACfA,CAAAA,KAAK,MAAM,KAAKC,IAAI,MAAM,IAAID,KAAK,IAAI,CAAC,CAACE,MAAMC,QAAU,CAACC,OAAO,EAAE,CAACF,MAAMD,GAAG,CAACE,MAAM,EAAC,GAEtF,IAAI,CAAC,KAAK;IACd;IACA,QAAQ;QACN,IAAI,CAAC,aAAa,CAAC,OAAO;QAC1B,IAAI,CAAC,QAAQ,CAAC;YAAE,OAAO;QAAK;IAC9B,EAAE;IACF,SAAS;QACP,MAAME,QAAQ,IAAI,CAAC,aAAa;QAChC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAOA,MAAM,QAAQ;QAC5C,MAAMC,WAAWD,MAAM,QAAQ;QAC/B,OAAO,AAAoB,cAApB,OAAOC,WACVA,SAAS;YAAE,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC,KAAK;QAAC,KACrDA,YAAY,WAAZA,GAAY,IAACC,iBAAeA;YAAC,OAAO,IAAI,CAAC,KAAK;;IACrD;AACF;AACA,SAASA,gBAAgB,EAAEC,KAAK,EAAyB;IACvD,MAAMC,IAAIC;IACV,OAAO,WAAP,GACE,IAACC,eAAMA;QACL,WAAU;QACV,QAAO;QACP,OAAOF,EAAE;QACT,aAAaA,EAAE;QACf,qBAAO,IAACG,eAAaA;YAAC,SAASJ;sBAAQC,EAAE;;;AAG/C"}

package/dist/esm/filelist/filelist.d.ts

@@ -23,5 +23,6 @@ export interface FileListProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onE
     disabled?: boolean;
     listType?: 'text' | 'picture' | 'picture-card';
 }
-export declare function FileList({ items, downloadable, previewable, removable, onPreview, onDownload, onRemove, renderActions, emptyContent, disabled, listType, className, ...props }: FileListProps): import("react").JSX.Element;
+export declare function FileListControl({ items, downloadable, previewable, removable, onPreview, onDownload, onRemove, renderActions, emptyContent, disabled, listType, className, ...props }: FileListProps): import("react").JSX.Element;
+export declare function FileList(rawProps: FileListProps): import("react").JSX.Element;
 //# sourceMappingURL=filelist.d.ts.map

package/dist/esm/filelist/filelist.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filelist.d.ts","sourceRoot":"","sources":["../../../src/filelist/filelist.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;AAS9E,MAAM,WAAW,QAAQ;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,CAAC;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;CAC9B;AACD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACpF,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACjF,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,KAAK,SAAS,CAAC;IAClE,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,CAAC;CAChD;AAaD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,YAAmB,EACnB,WAAkB,EAClB,SAAiB,EACjB,SAAS,EACT,UAAU,EACV,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,QAAgB,EAChB,QAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,+BAkOf"}
+{"version":3,"file":"filelist.d.ts","sourceRoot":"","sources":["../../../src/filelist/filelist.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAWzF,MAAM,WAAW,QAAQ;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,WAAW,CAAC;IAChE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;CAC9B;AACD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACpF,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,CAAC;IACjF,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,KAAK,SAAS,CAAC;IAClE,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,cAAc,CAAC;CAChD;AA4ND,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,YAAmB,EACnB,WAAkB,EAClB,SAAiB,EACjB,SAAS,EACT,UAAU,EACV,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,QAAgB,EAChB,QAAiB,EACjB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,aAAa,+BA0Gf;AAED,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,aAAa,+BAG/C"}

package/dist/esm/filelist/filelist.js

@@ -1,12 +1,14 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Check, Download, Eye, File, FileArchive, FileAudio2, FileCode2, FileImage, FileSpreadsheet, FileText, FileVideo2, Trash2 } from "lucide-react";
-import { useRef, useState } from "react";
-import { Button } from "../button/index.js";
-import { ImagePreview } from "../image/index.js";
-import { Modal } from "../modal/index.js";
+import { Check, CircleAlert, Clock3, Download, Eye, File, FileArchive, FileAudio2, FileCode2, FileImage, FileSpreadsheet, FileText, FileVideo2, Paperclip, Trash2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { ButtonControl } from "../button/button.js";
+import { useComponentProps } from "../config-provider/component-defaults.js";
+import { ImagePreviewControl } from "../image/image.js";
+import { ModalBase } from "../modal/modal.js";
 import { classes } from "../shared/classes.js";
 import { useListMotion } from "../shared/motion.js";
+import { useFormattedText } from "../shared/use-formatted-text.js";
 import { useText } from "../shared/use-text.js";
 import { fileExtension, fileKind, fileName, formatFileSize, safeFileUrl } from "./model.js";
 const icons = {
@@ -19,15 +21,251 @@ const icons = {
     code: FileCode2,
     file: File
 };
-const itemKey = (file, index)=>file.uid ?? `${file.url ?? fileName(file)}-${index}`;
-function FileList({ items, downloadable = true, previewable = true, removable = false, onPreview, onDownload, onRemove, renderActions, emptyContent, disabled = false, listType = 'text', className, ...props }) {
+function FileVisual({ file, listType }) {
+    const kind = fileKind(file);
+    const Icon = icons[kind];
+    const url = safeFileUrl(file.url);
+    const [failedUrl, setFailedUrl] = useState();
+    const thumbnail = Boolean('text' !== listType && 'image' === kind && url && failedUrl !== url);
+    return /*#__PURE__*/ jsxs("span", {
+        className: "leaf-file-list__icon",
+        "data-kind": kind,
+        "data-extension": fileExtension(file),
+        "data-thumbnail": thumbnail || void 0,
+        "aria-hidden": "true",
+        children: [
+            /*#__PURE__*/ jsx(Icon, {
+                size: 22
+            }),
+            thumbnail && /*#__PURE__*/ jsx("img", {
+                src: url,
+                alt: "",
+                loading: "lazy",
+                decoding: "async",
+                onError: ()=>setFailedUrl(url)
+            })
+        ]
+    });
+}
+function FileRow({ file, motionKey, disabled, listType, downloadable, previewable, removable, onDownload, onRemove, onPreview, renderActions }) {
+    const t = useText();
+    const format = useFormattedText();
+    const [removing, setRemoving] = useState(false);
+    const [removeError, setRemoveError] = useState('');
+    const pending = useRef(false);
+    const mounted = useRef(true);
+    useEffect(()=>{
+        mounted.current = true;
+        return ()=>{
+            mounted.current = false;
+        };
+    }, []);
+    const name = fileName(file);
+    const kind = fileKind(file);
+    const url = safeFileUrl(file.url);
+    const extension = fileExtension(file).toUpperCase();
+    const size = file.size ?? file.originFile?.size;
+    const formattedSize = void 0 === size ? '' : formatFileSize(size);
+    const percent = Number.isFinite(file.percent) ? Math.max(0, Math.min(100, file.percent ?? 0)) : 0;
+    const canPreview = previewable && url && [
+        'image',
+        'video',
+        'audio'
+    ].includes(kind);
+    const status = 'uploading' === file.status ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            t('fileList.uploading'),
+            " ",
+            /*#__PURE__*/ jsxs("span", {
+                children: [
+                    Math.round(percent),
+                    "%"
+                ]
+            })
+        ]
+    }) : 'done' === file.status ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Check, {
+                size: 13,
+                "aria-hidden": "true"
+            }),
+            t('fileList.uploadComplete')
+        ]
+    }) : 'error' === file.status ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(CircleAlert, {
+                size: 13,
+                "aria-hidden": "true"
+            }),
+            t('fileList.uploadFailed')
+        ]
+    }) : 'cancelled' === file.status ? t('fileList.cancelled') : 'ready' === file.status ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Clock3, {
+                size: 13,
+                "aria-hidden": "true"
+            }),
+            t('fileList.ready')
+        ]
+    }) : null;
+    const actions = /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            canPreview && /*#__PURE__*/ jsx(ButtonControl, {
+                className: "leaf-file-list__action",
+                variant: "ghost",
+                size: "sm",
+                disabled: disabled,
+                startIcon: /*#__PURE__*/ jsx(Eye, {
+                    size: 16
+                }),
+                "aria-label": format('fileList.preview', {
+                    name
+                }),
+                title: t('common.preview'),
+                onClick: ()=>onPreview(file)
+            }),
+            downloadable && url && (onDownload ? /*#__PURE__*/ jsx(ButtonControl, {
+                className: "leaf-file-list__action",
+                variant: "ghost",
+                size: "sm",
+                disabled: disabled,
+                startIcon: /*#__PURE__*/ jsx(Download, {
+                    size: 16
+                }),
+                "aria-label": format('fileList.download', {
+                    name
+                }),
+                title: t('common.download'),
+                onClick: ()=>onDownload(file)
+            }) : /*#__PURE__*/ jsx("a", {
+                className: "leaf-file-list__action",
+                href: disabled ? void 0 : url,
+                download: name,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": format('fileList.download', {
+                    name
+                }),
+                title: t('common.download'),
+                "aria-disabled": disabled || void 0,
+                role: disabled ? 'link' : void 0,
+                tabIndex: disabled ? -1 : void 0,
+                children: /*#__PURE__*/ jsx(Download, {
+                    size: 16,
+                    "aria-hidden": "true"
+                })
+            })),
+            removable && onRemove && /*#__PURE__*/ jsx(ButtonControl, {
+                className: "leaf-file-list__action leaf-file-list__remove",
+                variant: "ghost",
+                size: "sm",
+                disabled: disabled,
+                loading: removing,
+                startIcon: /*#__PURE__*/ jsx(Trash2, {
+                    size: 16
+                }),
+                "aria-label": format('fileList.remove', {
+                    name
+                }),
+                title: t('common.remove'),
+                onClick: async ()=>{
+                    if (pending.current) return;
+                    pending.current = true;
+                    setRemoving(true);
+                    setRemoveError('');
+                    try {
+                        await onRemove(file);
+                    } catch (reason) {
+                        if (mounted.current) setRemoveError(reason instanceof Error ? reason.message : String(reason));
+                    } finally{
+                        pending.current = false;
+                        if (mounted.current) setRemoving(false);
+                    }
+                }
+            })
+        ]
+    });
+    const renderedActions = renderActions ? renderActions(file, actions) : actions;
+    return /*#__PURE__*/ jsxs("li", {
+        className: "leaf-file-list__item",
+        "data-status": file.status,
+        "data-motion-key": motionKey,
+        "aria-busy": 'uploading' === file.status || removing || void 0,
+        children: [
+            /*#__PURE__*/ jsx(FileVisual, {
+                file: file,
+                listType: listType
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "leaf-file-list__details",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "leaf-file-list__name",
+                        title: name,
+                        children: name
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "leaf-file-list__meta",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "leaf-file-list__type",
+                                children: extension || t('fileList.fileType')
+                            }),
+                            formattedSize && /*#__PURE__*/ jsx("span", {
+                                className: "leaf-file-list__size",
+                                children: formattedSize
+                            })
+                        ]
+                    })
+                ]
+            }),
+            status && /*#__PURE__*/ jsx("span", {
+                className: "leaf-file-list__status",
+                "data-status": file.status,
+                children: status
+            }),
+            'uploading' === file.status && /*#__PURE__*/ jsx("div", {
+                className: "leaf-file-list__progress",
+                role: "progressbar",
+                "aria-label": format('fileList.uploadProgress', {
+                    name
+                }),
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": Math.round(percent),
+                children: /*#__PURE__*/ jsx("span", {
+                    style: {
+                        width: `${percent}%`
+                    }
+                })
+            }),
+            (removeError || 'error' === file.status && file.error) && /*#__PURE__*/ jsx("p", {
+                className: "leaf-file-list__error",
+                role: removeError ? 'alert' : void 0,
+                children: removeError || file.error
+            }),
+            null !== renderedActions && false !== renderedActions && /*#__PURE__*/ jsx("div", {
+                className: "leaf-file-list__actions",
+                children: renderedActions
+            })
+        ]
+    });
+}
+function FileListControl({ items, downloadable = true, previewable = true, removable = false, onPreview, onDownload, onRemove, renderActions, emptyContent, disabled = false, listType = 'text', className, ...props }) {
     const t = useText();
     const root = useRef(null);
-    const keys = items.map(itemKey);
-    useListMotion(root, JSON.stringify(keys), '.leaf-file-list__item[data-motion-key]');
+    const occurrences = new Map();
+    const keys = items.map((file)=>{
+        const identity = file.uid ?? file.url ?? fileName(file);
+        const occurrence = occurrences.get(identity) ?? 0;
+        occurrences.set(identity, occurrence + 1);
+        return JSON.stringify([
+            identity,
+            occurrence
+        ]);
+    });
+    useListMotion(root, JSON.stringify(keys), '.leaf-file-list__item[data-motion-key]', listType);
     const [preview, setPreview] = useState(null);
-    const [pending, setPending] = useState([]);
-    const [error, setError] = useState('');
     const selected = preview ? items.find((file)=>preview.uid ? file.uid === preview.uid : preview.url ? file.url === preview.url : file === preview) : void 0;
     const images = items.filter((file)=>'image' === fileKind(file) && safeFileUrl(file.url));
     const kind = selected ? fileKind(selected) : void 0;
@@ -41,188 +279,36 @@ function FileList({ items, downloadable = true, previewable = true, removable =
         children: [
             items.length ? /*#__PURE__*/ jsx("ul", {
                 className: "leaf-file-list__items",
-                children: items.map((file, index)=>{
-                    const key = itemKey(file, index);
-                    const name = fileName(file);
-                    const kind = fileKind(file);
-                    const Icon = icons[kind];
-                    const url = safeFileUrl(file.url);
-                    const size = file.size ?? file.originFile?.size;
-                    const isPending = pending.includes(key);
-                    const canPreview = previewable && url && [
-                        'image',
-                        'video',
-                        'audio'
-                    ].includes(kind);
-                    const actions = /*#__PURE__*/ jsxs(Fragment, {
-                        children: [
-                            canPreview && /*#__PURE__*/ jsx(Button, {
-                                variant: "ghost",
-                                size: "sm",
-                                disabled: disabled,
-                                startIcon: /*#__PURE__*/ jsx(Eye, {
-                                    size: 16
-                                }),
-                                "aria-label": `${t('预览', 'Preview')} ${name}`,
-                                title: t('预览', 'Preview'),
-                                onClick: ()=>onPreview ? onPreview(file) : setPreview(file)
-                            }),
-                            downloadable && url && (onDownload ? /*#__PURE__*/ jsx(Button, {
-                                variant: "ghost",
-                                size: "sm",
-                                disabled: disabled,
-                                startIcon: /*#__PURE__*/ jsx(Download, {
-                                    size: 16
-                                }),
-                                "aria-label": `${t('下载', 'Download')} ${name}`,
-                                title: t('下载', 'Download'),
-                                onClick: ()=>onDownload(file)
-                            }) : /*#__PURE__*/ jsx("a", {
-                                className: "leaf-file-list__action",
-                                href: disabled ? void 0 : url,
-                                download: name,
-                                target: "_blank",
-                                rel: "noopener noreferrer",
-                                "aria-label": `${t('下载', 'Download')} ${name}`,
-                                title: t('下载', 'Download'),
-                                "aria-disabled": disabled || void 0,
-                                tabIndex: disabled ? -1 : void 0,
-                                children: /*#__PURE__*/ jsx(Download, {
-                                    size: 16,
-                                    "aria-hidden": "true"
-                                })
-                            })),
-                            removable && onRemove && /*#__PURE__*/ jsx(Button, {
-                                className: "leaf-file-list__remove",
-                                variant: "ghost",
-                                size: "sm",
-                                disabled: disabled || isPending,
-                                loading: isPending,
-                                startIcon: /*#__PURE__*/ jsx(Trash2, {
-                                    size: 15
-                                }),
-                                "aria-label": `${t('移除', 'Remove')} ${name}`,
-                                title: t('移除', 'Remove'),
-                                onClick: async ()=>{
-                                    if (isPending) return;
-                                    setPending((previous)=>[
-                                            ...previous,
-                                            key
-                                        ]);
-                                    setError('');
-                                    try {
-                                        await onRemove(file);
-                                    } catch (reason) {
-                                        setError(reason instanceof Error ? reason.message : String(reason));
-                                    } finally{
-                                        setPending((previous)=>previous.filter((value)=>value !== key));
-                                    }
-                                }
-                            })
-                        ]
-                    });
-                    const percent = Math.max(0, Math.min(100, file.percent ?? 0));
-                    return /*#__PURE__*/ jsxs("li", {
-                        className: "leaf-file-list__item",
-                        "data-status": file.status,
-                        "data-motion-key": key,
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: "leaf-file-list__icon",
-                                "data-kind": kind,
-                                "data-extension": fileExtension(file),
-                                children: 'text' !== listType && 'image' === kind && url ? /*#__PURE__*/ jsx("img", {
-                                    src: url,
-                                    alt: "",
-                                    loading: "lazy"
-                                }) : /*#__PURE__*/ jsx(Icon, {
-                                    size: 21,
-                                    "aria-hidden": "true"
-                                })
-                            }),
-                            /*#__PURE__*/ jsxs("div", {
-                                className: "leaf-file-list__details",
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: "leaf-file-list__name",
-                                        title: name,
-                                        children: name
-                                    }),
-                                    /*#__PURE__*/ jsxs("span", {
-                                        className: "leaf-file-list__meta",
-                                        children: [
-                                            /*#__PURE__*/ jsx("span", {
-                                                className: "leaf-file-list__type",
-                                                children: fileExtension(file).toUpperCase() || t('文件', 'FILE')
-                                            }),
-                                            void 0 !== size && formatFileSize(size) && /*#__PURE__*/ jsx("span", {
-                                                children: formatFileSize(size)
-                                            }),
-                                            'uploading' === file.status && /*#__PURE__*/ jsxs("span", {
-                                                children: [
-                                                    t('上传中', 'Uploading'),
-                                                    " ",
-                                                    Math.round(percent),
-                                                    "%"
-                                                ]
-                                            }),
-                                            'error' === file.status && /*#__PURE__*/ jsx("span", {
-                                                className: "leaf-file-list__error",
-                                                children: file.error ?? t('上传失败', 'Upload failed')
-                                            }),
-                                            'cancelled' === file.status && /*#__PURE__*/ jsx("span", {
-                                                children: t('已取消', 'Cancelled')
-                                            }),
-                                            'done' === file.status && /*#__PURE__*/ jsxs("span", {
-                                                className: "leaf-file-list__complete",
-                                                children: [
-                                                    /*#__PURE__*/ jsx(Check, {
-                                                        size: 12,
-                                                        "aria-hidden": "true"
-                                                    }),
-                                                    " ",
-                                                    t('上传完成', 'Upload complete')
-                                                ]
-                                            }),
-                                            'ready' === file.status && /*#__PURE__*/ jsx("span", {
-                                                children: t('待上传', 'Ready')
-                                            })
-                                        ]
-                                    }),
-                                    'uploading' === file.status && /*#__PURE__*/ jsx("div", {
-                                        className: "leaf-file-list__progress",
-                                        role: "progressbar",
-                                        "aria-label": `${t('上传进度', 'Upload progress')} ${name}`,
-                                        "aria-valuemin": 0,
-                                        "aria-valuemax": 100,
-                                        "aria-valuenow": Math.round(percent),
-                                        children: /*#__PURE__*/ jsx("span", {
-                                            style: {
-                                                width: `${percent}%`
-                                            }
-                                        })
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsx("div", {
-                                className: "leaf-file-list__actions",
-                                children: renderActions ? renderActions(file, actions) : actions
-                            })
-                        ]
-                    }, key);
-                })
+                children: items.map((file, position)=>/*#__PURE__*/ jsx(FileRow, {
+                        motionKey: keys[position] ?? String(position),
+                        file: file,
+                        listType: listType,
+                        disabled: disabled,
+                        downloadable: downloadable,
+                        previewable: previewable,
+                        removable: removable,
+                        onDownload: onDownload,
+                        onRemove: onRemove,
+                        renderActions: renderActions,
+                        onPreview: (file)=>onPreview ? onPreview(file) : setPreview(file)
+                    }, keys[position]))
             }) : /*#__PURE__*/ jsx("div", {
                 className: "leaf-file-list__empty",
-                children: emptyContent ?? t('暂无文件', 'No files')
-            }),
-            error && /*#__PURE__*/ jsx("p", {
-                role: "alert",
-                className: "leaf-file-list__error",
-                children: error
+                children: emptyContent ?? /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx(Paperclip, {
+                            size: 22,
+                            "aria-hidden": "true"
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            children: t('fileList.noFiles')
+                        })
+                    ]
+                })
             }),
-            /*#__PURE__*/ jsx(ImagePreview, {
+            /*#__PURE__*/ jsx(ImagePreviewControl, {
                 items: images.map((file)=>({
-                        src: file.url ?? '',
+                        src: safeFileUrl(file.url) ?? '',
                         alt: fileName(file),
                         downloadName: fileName(file)
                     })),
@@ -230,13 +316,13 @@ function FileList({ items, downloadable = true, previewable = true, removable =
                 index: Math.max(0, index),
                 onIndexChange: (next)=>setPreview(images[next] ?? null),
                 onClose: ()=>setPreview(null),
-                downloadable: downloadable
+                downloadable: downloadable && !disabled
             }),
-            /*#__PURE__*/ jsxs(Modal, {
+            /*#__PURE__*/ jsxs(ModalBase, {
                 open: Boolean(previewUrl && ('video' === kind || 'audio' === kind)),
                 title: selected ? fileName(selected) : '',
                 footer: null,
-                width: 800,
+                width: 'audio' === kind ? 520 : 800,
                 onClose: ()=>setPreview(null),
                 className: "leaf-file-list__media-modal",
                 children: [
@@ -263,6 +349,12 @@ function FileList({ items, downloadable = true, previewable = true, removable =
         ]
     });
 }
-export { FileList };
+function FileList(rawProps) {
+    const props = useComponentProps('FileList', rawProps);
+    return /*#__PURE__*/ jsx(FileListControl, {
+        ...props
+    });
+}
+export { FileList, FileListControl };
 
 //# sourceMappingURL=filelist.js.map