@xiping/react-components 1.0.70 → 1.0.78

package/dist/es/components/image-viewer/ImageViewer2.js

@@ -0,0 +1,151 @@
+"use client";
+import e from "../pinch-content/index.js";
+import t from "./ImageThumbnails2.js";
+import './ImageViewer.css';/* empty css            */
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { useCallback as i, useEffect as a, useState as o } from "react";
+import s from "clsx";
+import { AnimatePresence as c, motion as l } from "motion/react";
+import { createPortal as u } from "react-dom";
+import { Download as d, Loader2 as f, X as p } from "lucide-react";
+//#region src/components/image-viewer/ImageViewer.tsx
+var m = (e) => {
+	e.target.closest(".xiping-main-content") && e.preventDefault();
+}, h = (h) => {
+	let { isOpen: g, onClose: _, imgSrc: v, thumbnailImages: y, canDownload: b = !1, wrapperClassName: x, closeClassName: S, downloadClassName: C, toolWrapperClassName: w, initialIndex: T = 0 } = h, E = Array.isArray(v) ? v : [v], D = y || E, [O, k] = o(Math.max(0, Math.min(T, E.length - 1))), [A, j] = o(!0), M = i(() => {
+		j(!0), _();
+	}, [_]), N = async () => {
+		let e = E[O];
+		try {
+			let t = await (await fetch(e)).blob(), n = window.URL.createObjectURL(t), r = document.createElement("a");
+			r.href = n, r.download = e.split("/").pop() || "image", document.body.appendChild(r), r.click(), window.URL.revokeObjectURL(n), document.body.removeChild(r);
+		} catch (e) {
+			console.error("Error downloading image:", e);
+		}
+	}, P = () => {
+		j(!1);
+	}, F = () => {
+		j(!1);
+	};
+	a(() => {
+		if (g) return document.addEventListener("touchmove", m, { passive: !1 }), () => {
+			document.removeEventListener("touchmove", m);
+		};
+	}, [g]), a(() => {
+		if (!g) return;
+		let e = document.body.style.overflow;
+		return document.body.style.overflow = "hidden", () => {
+			document.body.style.overflow = e;
+		};
+	}, [g]);
+	let I = i(() => {
+		"vibrate" in navigator && navigator.vibrate([
+			50,
+			50,
+			50
+		]);
+	}, []);
+	a(() => {
+		if (!g) return;
+		let e = (e) => {
+			let t = e.target;
+			if (!(t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) switch (e.key) {
+				case "ArrowLeft":
+					e.preventDefault(), k((e) => e > 0 ? e - 1 : (I(), e));
+					break;
+				case "ArrowRight":
+					e.preventDefault(), k((e) => e < E.length - 1 ? e + 1 : (I(), e));
+					break;
+				case "Escape":
+					e.preventDefault(), M();
+					break;
+			}
+		};
+		return document.addEventListener("keydown", e), () => {
+			document.removeEventListener("keydown", e);
+		};
+	}, [
+		g,
+		E.length,
+		M,
+		I
+	]);
+	let L = /* @__PURE__ */ r("div", {
+		className: s("xiping-modal-root", x),
+		children: [/* @__PURE__ */ n("div", {
+			className: "xiping-modal-backdrop xiping-modal-overlay",
+			onClick: M,
+			"aria-hidden": !0
+		}), /* @__PURE__ */ n("div", {
+			className: "xiping-modal-content",
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": "图片预览",
+			children: /* @__PURE__ */ r("div", {
+				className: "xiping-wrapper",
+				children: [
+					/* @__PURE__ */ r("div", {
+						className: s("xiping-tool-wrapper", w),
+						children: [b && /* @__PURE__ */ n(d, {
+							size: 24,
+							className: s("xiping-download-icon", C),
+							onClick: N
+						}), /* @__PURE__ */ n(p, {
+							size: 24,
+							className: s("xiping-close-icon", S),
+							onClick: M
+						})]
+					}),
+					/* @__PURE__ */ r("div", {
+						className: "xiping-main-content",
+						children: [/* @__PURE__ */ n(e, {
+							canRotate: !1,
+							className: "xiping-pinch-content",
+							children: /* @__PURE__ */ n(c, {
+								mode: "wait",
+								children: /* @__PURE__ */ n(l.img, {
+									draggable: "false",
+									src: E[O],
+									alt: "",
+									className: "xiping-image",
+									onLoad: P,
+									onError: F,
+									initial: {
+										opacity: 0,
+										scale: .95
+									},
+									animate: {
+										opacity: 1,
+										scale: 1
+									},
+									exit: {
+										opacity: 0,
+										scale: 1.05
+									},
+									transition: {
+										duration: .3,
+										ease: "easeInOut"
+									}
+								}, O)
+							})
+						}), A && /* @__PURE__ */ n("div", {
+							className: "xiping-loading",
+							children: /* @__PURE__ */ n(f, {
+								className: "xiping-spinner-icon",
+								"aria-hidden": !0
+							})
+						})]
+					}),
+					/* @__PURE__ */ n(t, {
+						images: D,
+						currentIndex: O,
+						onImageSelect: k
+					})
+				]
+			})
+		})]
+	});
+	return g ? u(L, document.body) : null;
+};
+//#endregion
+export { h as default };

package/dist/es/components/message/Message.css

@@ -1 +1 @@
-.xiping-message{display:flex;align-items:flex-start;max-width:80%;margin-bottom:16px}.xiping-message.user{align-self:flex-end;flex-direction:row-reverse;margin-left:auto}.xiping-message.assistant{align-self:flex-start;margin-right:auto}.xiping-message__avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;margin:0 8px;background-color:#e0e0e0;display:flex;align-items:center;justify-content:center;flex-shrink:0}.xiping-message__content{background-color:#fff;padding:12px 16px;border-radius:12px;box-shadow:0 1px 2px #0000001a;position:relative;max-width:100%}.xiping-message:not(:has(.xiping-message__avatar)) .xiping-message__content{margin:0}.xiping-message.user .xiping-message__content{background-color:#007bff;color:#fff}.xiping-message__text{word-break:break-word;line-height:1.5}.xiping-message__timestamp{font-size:.75rem;color:#888;margin-top:4px;text-align:right}.xiping-message.user .xiping-message__timestamp{color:#fffc}.xiping-message__thinking{display:flex;align-items:center;margin-top:8px}.xiping-message__thinking-dots{display:flex;align-items:center;margin-right:8px}.xiping-message__thinking-dots span{width:8px;height:8px;margin:0 2px;background-color:#888;border-radius:50%;display:inline-block;animation:xiping-thinking 1.4s infinite ease-in-out both}.xiping-message__thinking-dots span:nth-child(1){animation-delay:-.32s}.xiping-message__thinking-dots span:nth-child(2){animation-delay:-.16s}.xiping-message__thinking-text{font-size:.9rem;color:#888}.xiping-message.user .xiping-message__thinking-text{color:#fffc}@keyframes xiping-thinking{0%,80%,to{transform:scale(.6)}40%{transform:scale(1)}}.xiping-message__loading{display:flex;align-items:center;justify-content:center;padding:8px}.xiping-message__loading-spinner{width:24px;height:24px;border:3px solid rgba(0,123,255,.3);border-radius:50%;border-top-color:#007bff;animation:xiping-spin 1s ease-in-out infinite}@keyframes xiping-spin{to{transform:rotate(360deg)}}.xiping-message__think{margin-top:12px;padding:8px 12px;background-color:#0000000d;border-radius:8px;font-size:.9rem}.xiping-message.user .xiping-message__think{background-color:#ffffff1a}.xiping-message__think-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:500}.xiping-message__think-toggle{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.xiping-message__think-toggle:hover{background-color:#0000000d}.xiping-message__think-content{max-height:1000px;opacity:1;overflow:hidden;transition:all .3s ease-in-out}.xiping-message__think-content.hidden{max-height:0;opacity:0;margin:0;padding:0}.xiping-message__knowledge-sources{margin-top:8px;padding:8px;background-color:#00000008;border-radius:4px;font-size:.9em}.xiping-message__knowledge-sources-header{font-weight:500;margin-bottom:4px;color:#666}.xiping-message__knowledge-sources-list{list-style:none;padding:0;margin:0}.xiping-message__knowledge-source-item{margin-bottom:4px}.xiping-message__knowledge-source-item:last-child{margin-bottom:0}.xiping-message__knowledge-source-item a{color:#06c;text-decoration:none}.xiping-message__knowledge-source-item a:hover{text-decoration:underline}.xiping-message__knowledge-source-description{font-size:.9em;color:#666;margin-top:2px;margin-left:8px}.xiping-message__text-container{position:relative;display:flex;flex-direction:column;gap:4px}.xiping-message__copy-button{align-self:flex-end;padding:4px;background:none;border:none;cursor:pointer;color:#666;opacity:0;transition:all .2s ease;border-radius:4px;display:flex;align-items:center;justify-content:center}.xiping-message__text-container:hover .xiping-message__copy-button{opacity:1}.xiping-message__copy-button:hover{color:#333;background-color:#0000000d}.xiping-message__copy-tooltip{position:absolute;top:-24px;right:0;background-color:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;animation:xiping-fadeInOut 2s ease-in-out}@keyframes xiping-fadeInOut{0%{opacity:0;transform:translateY(4px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}
+.xiping-message{align-items:flex-start;max-width:80%;margin-bottom:16px;display:flex}.xiping-message.user{flex-direction:row-reverse;align-self:flex-end;margin-left:auto}.xiping-message.assistant{align-self:flex-start;margin-right:auto}.xiping-message__avatar{background-color:#e0e0e0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;margin:0 8px;display:flex;overflow:hidden}.xiping-message__content{background-color:#fff;border-radius:12px;max-width:100%;padding:12px 16px;position:relative;box-shadow:0 1px 2px #0000001a}.xiping-message:not(:has(.xiping-message__avatar)) .xiping-message__content{margin:0}.xiping-message.user .xiping-message__content{color:#fff;background-color:#007bff}.xiping-message__text{word-break:break-word;line-height:1.5}.xiping-message__timestamp{color:#888;text-align:right;margin-top:4px;font-size:.75rem}.xiping-message.user .xiping-message__timestamp{color:#fffc}.xiping-message__thinking{align-items:center;margin-top:8px;display:flex}.xiping-message__thinking-dots{align-items:center;margin-right:8px;display:flex}.xiping-message__thinking-dots span{background-color:#888;border-radius:50%;width:8px;height:8px;margin:0 2px;animation:1.4s ease-in-out infinite both xiping-thinking;display:inline-block}.xiping-message__thinking-dots span:first-child{animation-delay:-.32s}.xiping-message__thinking-dots span:nth-child(2){animation-delay:-.16s}.xiping-message__thinking-text{color:#888;font-size:.9rem}.xiping-message.user .xiping-message__thinking-text{color:#fffc}@keyframes xiping-thinking{0%,80%,to{transform:scale(.6)}40%{transform:scale(1)}}.xiping-message__loading{justify-content:center;align-items:center;padding:8px;display:flex}.xiping-message__loading-spinner{border:3px solid #007bff4d;border-top-color:#007bff;border-radius:50%;width:24px;height:24px;animation:1s ease-in-out infinite xiping-spin}@keyframes xiping-spin{to{transform:rotate(360deg)}}.xiping-message__think{background-color:#0000000d;border-radius:8px;margin-top:12px;padding:8px 12px;font-size:.9rem}.xiping-message.user .xiping-message__think{background-color:#ffffff1a}.xiping-message__think-header{align-items:center;gap:8px;margin-bottom:8px;font-weight:500;display:flex}.xiping-message__think-toggle{cursor:pointer;color:#666;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;transition:background-color .2s;display:flex}.xiping-message__think-toggle:hover{background-color:#0000000d}.xiping-message__think-content{opacity:1;max-height:1000px;transition:all .3s ease-in-out;overflow:hidden}.xiping-message__think-content.hidden{opacity:0;max-height:0;margin:0;padding:0}.xiping-message__knowledge-sources{background-color:#00000008;border-radius:4px;margin-top:8px;padding:8px;font-size:.9em}.xiping-message__knowledge-sources-header{color:#666;margin-bottom:4px;font-weight:500}.xiping-message__knowledge-sources-list{margin:0;padding:0;list-style:none}.xiping-message__knowledge-source-item{margin-bottom:4px}.xiping-message__knowledge-source-item:last-child{margin-bottom:0}.xiping-message__knowledge-source-item a{color:#06c;text-decoration:none}.xiping-message__knowledge-source-item a:hover{text-decoration:underline}.xiping-message__knowledge-source-description{color:#666;margin-top:2px;margin-left:8px;font-size:.9em}.xiping-message__text-container{flex-direction:column;gap:4px;display:flex;position:relative}.xiping-message__copy-button{cursor:pointer;color:#666;opacity:0;background:0 0;border:none;border-radius:4px;justify-content:center;align-self:flex-end;align-items:center;padding:4px;transition:all .2s;display:flex}.xiping-message__text-container:hover .xiping-message__copy-button{opacity:1}.xiping-message__copy-button:hover{color:#333;background-color:#0000000d}.xiping-message__copy-tooltip{color:#fff;white-space:nowrap;background-color:#333;border-radius:4px;padding:4px 8px;font-size:12px;animation:2s ease-in-out xiping-fadeInOut;position:absolute;top:-24px;right:0}@keyframes xiping-fadeInOut{0%{opacity:0;transform:translateY(4px)}10%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(4px)}}

package/dist/es/components/message/Message2.js

@@ -0,0 +1,189 @@
+import './Message.css';/* empty css        */
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useState as r } from "react";
+import i from "clsx";
+import a from "react-markdown";
+//#region src/components/message/Message.tsx
+var o = ({ id: o, content: s, sender: c, timestamp: l, isThinking: u = !1, isLoading: d = !1, className: f = "", style: p = {}, showTimestamp: m = !0, avatarUser: h, avatarAssistant: g, thinkingText: _ = "思考中...", customThinkingComponent: v, customUserMessageComponent: y, customAssistantMessageComponent: b, parseContent: x = !1, parsedContent: S, thinkContent: C, knowledgeSources: w }) => {
+	let [T, E] = r(!0), [D, O] = r("idle");
+	console.log(o, "id");
+	let k = (e) => e.toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit"
+	}), A = async () => {
+		try {
+			await navigator.clipboard.writeText(s), O("copied"), setTimeout(() => O("idle"), 2e3);
+		} catch (e) {
+			console.error("复制失败:", e);
+		}
+	}, j = () => v || /* @__PURE__ */ n("div", {
+		className: "xiping-message__thinking",
+		children: [/* @__PURE__ */ n("div", {
+			className: "xiping-message__thinking-dots",
+			children: [
+				/* @__PURE__ */ t("span", {}),
+				/* @__PURE__ */ t("span", {}),
+				/* @__PURE__ */ t("span", {})
+			]
+		}), /* @__PURE__ */ t("span", {
+			className: "xiping-message__thinking-text",
+			children: _
+		})]
+	}), M = () => /* @__PURE__ */ t("div", {
+		className: "xiping-message__loading",
+		children: /* @__PURE__ */ t("div", { className: "xiping-message__loading-spinner" })
+	}), N = () => !w || w.length === 0 ? null : /* @__PURE__ */ n("div", {
+		className: "xiping-message__knowledge-sources",
+		children: [/* @__PURE__ */ t("div", {
+			className: "xiping-message__knowledge-sources-header",
+			children: "知识来源："
+		}), /* @__PURE__ */ t("ul", {
+			className: "xiping-message__knowledge-sources-list",
+			children: w.map((e, r) => /* @__PURE__ */ n("li", {
+				className: "xiping-message__knowledge-source-item",
+				children: [e.url ? /* @__PURE__ */ t("a", {
+					href: e.url,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					children: e.title
+				}) : /* @__PURE__ */ t("span", { children: e.title }), e.description && /* @__PURE__ */ t("div", {
+					className: "xiping-message__knowledge-source-description",
+					children: e.description
+				})]
+			}, r))
+		})]
+	}), P = () => c === "user" ? null : /* @__PURE__ */ n("button", {
+		className: "xiping-message__copy-button",
+		onClick: A,
+		"aria-label": "Copy message",
+		title: "Copy message",
+		children: [/* @__PURE__ */ n("svg", {
+			width: "14",
+			height: "14",
+			viewBox: "0 0 16 16",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ t("path", {
+				d: "M13.3333 6H7.33333C6.59695 6 6 6.59695 6 7.33333V13.3333C6 14.0697 6.59695 14.6667 7.33333 14.6667H13.3333C14.0697 14.6667 14.6667 14.0697 14.6667 13.3333V7.33333C14.6667 6.59695 14.0697 6 13.3333 6Z",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}), /* @__PURE__ */ t("path", {
+				d: "M3.33333 10H2.66667C2.31305 10 1.97391 9.85953 1.72386 9.60948C1.47381 9.35943 1.33334 9.02029 1.33334 8.66667V2.66667C1.33334 2.31305 1.47381 1.97391 1.72386 1.72386C1.97391 1.47381 2.31305 1.33334 2.66667 1.33334H8.66667C9.02029 1.33334 9.35943 1.47381 9.60948 1.72386C9.85953 1.97391 10 2.31305 10 2.66667V3.33334",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})]
+		}), D === "copied" && /* @__PURE__ */ t("span", {
+			className: "xiping-message__copy-tooltip",
+			children: "Copied"
+		})]
+	});
+	return c === "user" && y ? y : c === "assistant" && b ? b : /* @__PURE__ */ n("div", {
+		className: i("xiping-message", c === "user" ? "user" : "assistant", f),
+		style: p,
+		children: [c === "user" && h || c === "assistant" && g ? /* @__PURE__ */ t("div", {
+			className: "xiping-message__avatar",
+			children: c === "user" ? h : g
+		}) : null, /* @__PURE__ */ t("div", {
+			className: "xiping-message__content",
+			children: d ? M() : x && c === "assistant" ? /* @__PURE__ */ n(e, { children: [
+				C && /* @__PURE__ */ n("div", {
+					className: "xiping-message__think",
+					children: [/* @__PURE__ */ n("div", {
+						className: "xiping-message__think-header",
+						children: ["思考过程：", /* @__PURE__ */ t("button", {
+							className: "xiping-message__think-toggle",
+							onClick: () => E(!T),
+							"aria-label": T ? "隐藏思考过程" : "显示思考过程",
+							children: /* @__PURE__ */ t("svg", {
+								width: "12",
+								height: "12",
+								viewBox: "0 0 12 12",
+								fill: "none",
+								xmlns: "http://www.w3.org/2000/svg",
+								style: {
+									transform: T ? "rotate(180deg)" : "rotate(0deg)",
+									transition: "transform 0.3s ease"
+								},
+								children: /* @__PURE__ */ t("path", {
+									d: "M2 4L6 8L10 4",
+									stroke: "currentColor",
+									strokeWidth: "1.5",
+									strokeLinecap: "round",
+									strokeLinejoin: "round"
+								})
+							})
+						})]
+					}), /* @__PURE__ */ t("div", {
+						className: i("xiping-message__think-content", T ? "visible" : "hidden"),
+						children: /* @__PURE__ */ t(a, { children: C })
+					})]
+				}),
+				u && j(),
+				S && /* @__PURE__ */ n("div", {
+					className: "xiping-message__text-container",
+					children: [/* @__PURE__ */ t("div", {
+						className: "xiping-message__text",
+						children: /* @__PURE__ */ t(a, { children: S })
+					}), P()]
+				}),
+				N(),
+				m && /* @__PURE__ */ t("div", {
+					className: "xiping-message__timestamp",
+					children: k(l)
+				})
+			] }) : /* @__PURE__ */ n(e, { children: [
+				C && /* @__PURE__ */ n("div", {
+					className: "xiping-message__think",
+					children: [/* @__PURE__ */ n("div", {
+						className: "xiping-message__think-header",
+						children: ["思考过程：", /* @__PURE__ */ t("button", {
+							className: "xiping-message__think-toggle",
+							onClick: () => E(!T),
+							"aria-label": T ? "隐藏思考过程" : "显示思考过程",
+							children: /* @__PURE__ */ t("svg", {
+								width: "12",
+								height: "12",
+								viewBox: "0 0 12 12",
+								fill: "none",
+								xmlns: "http://www.w3.org/2000/svg",
+								style: {
+									transform: T ? "rotate(180deg)" : "rotate(0deg)",
+									transition: "transform 0.3s ease"
+								},
+								children: /* @__PURE__ */ t("path", {
+									d: "M2 4L6 8L10 4",
+									stroke: "currentColor",
+									strokeWidth: "1.5",
+									strokeLinecap: "round",
+									strokeLinejoin: "round"
+								})
+							})
+						})]
+					}), /* @__PURE__ */ t("div", {
+						className: i("xiping-message__think-content", T ? "visible" : "hidden"),
+						children: /* @__PURE__ */ t(a, { children: C })
+					})]
+				}),
+				/* @__PURE__ */ n("div", {
+					className: "xiping-message__text-container",
+					children: [/* @__PURE__ */ t("div", {
+						className: "xiping-message__text",
+						children: /* @__PURE__ */ t(a, { children: s })
+					}), P()]
+				}),
+				u && j(),
+				N(),
+				m && /* @__PURE__ */ t("div", {
+					className: "xiping-message__timestamp",
+					children: k(l)
+				})
+			] })
+		})]
+	});
+};
+//#endregion
+export { o as default };

package/dist/es/components/pinch-content/PinchContent.js

@@ -1,127 +1,120 @@
-import { jsx as U } from "react/jsx-runtime";
-import { useSpring as W, animated as j } from "@react-spring/web";
-import { createUseGesture as F, dragAction as H, pinchAction as O, wheelAction as k } from "@use-gesture/react";
-import { forwardRef as q, useRef as J, useEffect as K, useImperativeHandle as Q } from "react";
-import { useMount as T, useUnmount as V } from "ahooks";
-import X from "clsx";
-const Y = F([H, O, k]), i = (u) => u.preventDefault(), _ = q(
-  (u, x) => {
-    const {
-      className: p,
-      children: S,
-      pinchWithoutMove: v = !1,
-      canPinch: h = !0,
-      canDrag: y = !0,
-      canRotate: M = !0,
-      scaleBounds: r = { min: 0.3, max: 10 },
-      wheelZoomFactor: E = 1e-3,
-      rubberband: w = !0,
-      scale: m,
-      onScaleChange: d
-    } = u, a = J(null);
-    T(() => {
-      a.current?.addEventListener("gesturestart", i), a.current?.addEventListener("gesturechange", i), a.current?.addEventListener("gestureend", i);
-    }), V(() => {
-      a.current?.removeEventListener("gesturestart", i), a.current?.removeEventListener("gesturechange", i), a.current?.removeEventListener("gestureend", i);
-    });
-    const L = m ?? 1, [t, c] = W(() => ({
-      x: 0,
-      y: 0,
-      scale: L,
-      rotateZ: 0
-    }));
-    K(() => {
-      if (m !== void 0) {
-        const e = Math.min(
-          Math.max(m, r.min),
-          r.max
-        );
-        c.start({ scale: e });
-      }
-    }, [m, r.min, r.max, c]);
-    const g = (e) => {
-      const n = Math.min(
-        Math.max(e, r.min),
-        r.max
-      );
-      c.start({ scale: n }), d?.(n);
-    };
-    return Q(x, () => ({
-      zoomIn: (e = 1.2) => {
-        const n = t.scale.get();
-        g(n * e);
-      },
-      zoomOut: (e = 1.2) => {
-        const n = t.scale.get();
-        g(n / e);
-      },
-      setScale: (e) => {
-        g(e);
-      },
-      reset: () => {
-        c.start({ x: 0, y: 0, scale: 1, rotateZ: 0 }), d?.(1);
-      },
-      getScale: () => t.scale.get()
-    })), Y(
-      {
-        onWheel: ({ delta: [, e] }) => {
-          if (!h) return;
-          const l = t.scale.get() * (1 - e * E), s = Math.min(
-            Math.max(l, r.min),
-            r.max
-          );
-          c.start({ scale: s }), d?.(s);
-        },
-        onDrag: ({ pinching: e, cancel: n, offset: [l, s] }) => {
-          if (!y || e) return n();
-          c.start({ x: l, y: s });
-        },
-        onPinch: ({
-          origin: [e, n],
-          first: l,
-          movement: [s],
-          offset: [R, Z],
-          memo: o,
-          cancel: b
-        }) => {
-          if (!h) return b();
-          if (l) {
-            const { width: D, height: N, x: z, y: B } = a.current.getBoundingClientRect(), G = e - (z + D / 2), I = n - (B + N / 2);
-            o = [t.x.get(), t.y.get(), G, I];
-          }
-          const f = Math.min(
-            Math.max(R, r.min),
-            r.max
-          ), C = o[0] - (s - 1) * o[2], P = o[1] - (s - 1) * o[3], A = {
-            scale: f,
-            rotateZ: M ? Z : t.rotateZ.get(),
-            ...v ? { x: t.x.get(), y: t.y.get() } : { x: C, y: P }
-          };
-          return c.start(A), d?.(f), o;
-        }
-      },
-      {
-        target: a,
-        drag: { from: () => [t.x.get(), t.y.get()] },
-        pinch: { scaleBounds: r, rubberband: w },
-        wheel: { enabled: !0 }
-      }
-    ), /* @__PURE__ */ U(
-      j.div,
-      {
-        className: X(p),
-        ref: a,
-        style: {
-          userSelect: "none",
-          ...u.style,
-          ...t
-        },
-        children: S
-      }
-    );
-  }
-);
-_.displayName = "PinchContent";
-export {
-  _ as default
-};
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as t, useEffect as n, useImperativeHandle as r, useRef as i } from "react";
+import a from "clsx";
+import { animated as o, useSpring as s } from "@react-spring/web";
+import { createUseGesture as c, dragAction as l, pinchAction as u, wheelAction as d } from "@use-gesture/react";
+import { useMount as f, useUnmount as p } from "ahooks";
+//#region src/components/pinch-content/PinchContent.tsx
+var m = c([
+	l,
+	u,
+	d
+]), h = (e) => e.preventDefault(), g = t((t, c) => {
+	let { className: l, children: u, pinchWithoutMove: d = !1, canPinch: g = !0, canDrag: _ = !0, canRotate: v = !0, scaleBounds: y = {
+		min: .3,
+		max: 10
+	}, wheelZoomFactor: b = .001, rubberband: x = !0, scale: S, onScaleChange: C } = t, w = i(null);
+	f(() => {
+		w.current?.addEventListener("gesturestart", h), w.current?.addEventListener("gesturechange", h), w.current?.addEventListener("gestureend", h);
+	}), p(() => {
+		w.current?.removeEventListener("gesturestart", h), w.current?.removeEventListener("gesturechange", h), w.current?.removeEventListener("gestureend", h);
+	});
+	let T = S ?? 1, [E, D] = s(() => ({
+		x: 0,
+		y: 0,
+		scale: T,
+		rotateZ: 0
+	}));
+	n(() => {
+		if (S !== void 0) {
+			let e = Math.min(Math.max(S, y.min), y.max);
+			D.start({ scale: e });
+		}
+	}, [
+		S,
+		y.min,
+		y.max,
+		D
+	]);
+	let O = (e) => {
+		let t = Math.min(Math.max(e, y.min), y.max);
+		D.start({ scale: t }), C?.(t);
+	};
+	return r(c, () => ({
+		zoomIn: (e = 1.2) => {
+			O(E.scale.get() * e);
+		},
+		zoomOut: (e = 1.2) => {
+			O(E.scale.get() / e);
+		},
+		setScale: (e) => {
+			O(e);
+		},
+		reset: () => {
+			D.start({
+				x: 0,
+				y: 0,
+				scale: 1,
+				rotateZ: 0
+			}), C?.(1);
+		},
+		getScale: () => E.scale.get()
+	})), m({
+		onWheel: ({ delta: [, e] }) => {
+			if (!g) return;
+			let t = E.scale.get() * (1 - e * b), n = Math.min(Math.max(t, y.min), y.max);
+			D.start({ scale: n }), C?.(n);
+		},
+		onDrag: ({ pinching: e, cancel: t, offset: [n, r] }) => {
+			if (!_ || e) return t();
+			D.start({
+				x: n,
+				y: r
+			});
+		},
+		onPinch: ({ origin: [e, t], first: n, movement: [r], offset: [i, a], memo: o, cancel: s }) => {
+			if (!g) return s();
+			if (n) {
+				let { width: n, height: r, x: i, y: a } = w.current.getBoundingClientRect(), s = e - (i + n / 2), c = t - (a + r / 2);
+				o = [
+					E.x.get(),
+					E.y.get(),
+					s,
+					c
+				];
+			}
+			let c = Math.min(Math.max(i, y.min), y.max), l = o[0] - (r - 1) * o[2], u = o[1] - (r - 1) * o[3], f = {
+				scale: c,
+				rotateZ: v ? a : E.rotateZ.get(),
+				...d ? {
+					x: E.x.get(),
+					y: E.y.get()
+				} : {
+					x: l,
+					y: u
+				}
+			};
+			return D.start(f), C?.(c), o;
+		}
+	}, {
+		target: w,
+		drag: { from: () => [E.x.get(), E.y.get()] },
+		pinch: {
+			scaleBounds: y,
+			rubberband: x
+		},
+		wheel: { enabled: !0 }
+	}), /* @__PURE__ */ e(o.div, {
+		className: a(l),
+		ref: w,
+		style: {
+			userSelect: "none",
+			...t.style,
+			...E
+		},
+		children: u
+	});
+});
+g.displayName = "PinchContent";
+//#endregion
+export { g as default };

package/dist/es/components/pinch-content/index.js

@@ -1,5 +1,5 @@
-import o from "./PinchContent.js";
-export {
-  o as PinchContent,
-  o as default
-};
+import e from "./PinchContent.js";
+//#region src/components/pinch-content/index.tsx
+var t = e;
+//#endregion
+export { t as default };

package/dist/es/components/pointer/Pointer.css

@@ -1 +1 @@
-.xiping-pointer{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%)}.xiping-pointer-icon{transform:rotate(-70deg);stroke:#fff;color:#000}
+.xiping-pointer{z-index:50;pointer-events:none;position:fixed;transform:translate(-50%,-50%)}.xiping-pointer-icon{stroke:#fff;color:#000;transform:rotate(-70deg)}