@beforegolive/floating-ball 0.1.19 → 0.2.1

package/dist/index.js

@@ -0,0 +1,538 @@
+import ie, { useState as re, useRef as O, useEffect as te, useCallback as A } from "react";
+var I = { exports: {} }, J = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ne;
+function fe() {
+  if (ne) return J;
+  ne = 1;
+  var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+  function s(b, c, o) {
+    var l = null;
+    if (o !== void 0 && (l = "" + o), c.key !== void 0 && (l = "" + c.key), "key" in c) {
+      o = {};
+      for (var u in c)
+        u !== "key" && (o[u] = c[u]);
+    } else o = c;
+    return c = o.ref, {
+      $$typeof: t,
+      type: b,
+      key: l,
+      ref: c !== void 0 ? c : null,
+      props: o
+    };
+  }
+  return J.Fragment = n, J.jsx = s, J.jsxs = s, J;
+}
+var q = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var oe;
+function de() {
+  return oe || (oe = 1, process.env.NODE_ENV !== "production" && (function() {
+    function t(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Z ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case k:
+          return "Fragment";
+        case h:
+          return "Profiler";
+        case L:
+          return "StrictMode";
+        case C:
+          return "Suspense";
+        case M:
+          return "SuspenseList";
+        case V:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case _:
+            return "Portal";
+          case S:
+            return e.displayName || "Context";
+          case z:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case X:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case F:
+            return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
+          case j:
+            r = e._payload, e = e._init;
+            try {
+              return t(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function n(e) {
+      return "" + e;
+    }
+    function s(e) {
+      try {
+        n(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var i = r.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return i.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          d
+        ), n(e);
+      }
+    }
+    function b(e) {
+      if (e === k) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === j)
+        return "<...>";
+      try {
+        var r = t(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function c() {
+      var e = Y.A;
+      return e === null ? null : e.getOwner();
+    }
+    function o() {
+      return Error("react-stack-top-frame");
+    }
+    function l(e) {
+      if (G.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function u(e, r) {
+      function i() {
+        B || (B = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      i.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: i,
+        configurable: !0
+      });
+    }
+    function p() {
+      var e = t(this.type);
+      return a[e] || (a[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function E(e, r, i, d, H, Q) {
+      var g = i.ref;
+      return e = {
+        $$typeof: N,
+        type: e,
+        key: r,
+        props: i,
+        _owner: d
+      }, (g !== void 0 ? g : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: p
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: H
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: Q
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function f(e, r, i, d, H, Q) {
+      var g = r.children;
+      if (g !== void 0)
+        if (d)
+          if (ee(g)) {
+            for (d = 0; d < g.length; d++)
+              m(g[d]);
+            Object.freeze && Object.freeze(g);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else m(g);
+      if (G.call(r, "key")) {
+        g = t(e);
+        var U = Object.keys(r).filter(function(ue) {
+          return ue !== "key";
+        });
+        d = 0 < U.length ? "{key: someKey, " + U.join(": ..., ") + ": ...}" : "{key: someKey}", w[g + d] || (U = 0 < U.length ? "{" + U.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          d,
+          g,
+          U,
+          g
+        ), w[g + d] = !0);
+      }
+      if (g = null, i !== void 0 && (s(i), g = "" + i), l(r) && (s(r.key), g = "" + r.key), "key" in r) {
+        i = {};
+        for (var K in r)
+          K !== "key" && (i[K] = r[K]);
+      } else i = r;
+      return g && u(
+        i,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), E(
+        e,
+        g,
+        i,
+        c(),
+        H,
+        Q
+      );
+    }
+    function m(e) {
+      x(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === j && (e._payload.status === "fulfilled" ? x(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function x(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === N;
+    }
+    var D = ie, N = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), L = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), z = Symbol.for("react.consumer"), S = Symbol.for("react.context"), X = Symbol.for("react.forward_ref"), C = Symbol.for("react.suspense"), M = Symbol.for("react.suspense_list"), F = Symbol.for("react.memo"), j = Symbol.for("react.lazy"), V = Symbol.for("react.activity"), Z = Symbol.for("react.client.reference"), Y = D.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, G = Object.prototype.hasOwnProperty, ee = Array.isArray, $ = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    D = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var B, a = {}, v = D.react_stack_bottom_frame.bind(
+      D,
+      o
+    )(), R = $(b(o)), w = {};
+    q.Fragment = k, q.jsx = function(e, r, i) {
+      var d = 1e4 > Y.recentlyCreatedOwnerStacks++;
+      return f(
+        e,
+        r,
+        i,
+        !1,
+        d ? Error("react-stack-top-frame") : v,
+        d ? $(b(e)) : R
+      );
+    }, q.jsxs = function(e, r, i) {
+      var d = 1e4 > Y.recentlyCreatedOwnerStacks++;
+      return f(
+        e,
+        r,
+        i,
+        !0,
+        d ? Error("react-stack-top-frame") : v,
+        d ? $(b(e)) : R
+      );
+    };
+  })()), q;
+}
+var ae;
+function pe() {
+  return ae || (ae = 1, process.env.NODE_ENV === "production" ? I.exports = fe() : I.exports = de()), I.exports;
+}
+var T = pe();
+let me = { data: "" }, be = (t) => {
+  if (typeof window == "object") {
+    let n = (t ? t.querySelector("#_goober") : window._goober) || Object.assign(document.createElement("style"), { innerHTML: " ", id: "_goober" });
+    return n.nonce = window.__nonce__, n.parentNode || (t || document.head).appendChild(n), n.firstChild;
+  }
+  return t || me;
+}, ge = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, he = /\/\*[^]*?\*\/|  +/g, le = /\n+/g, P = (t, n) => {
+  let s = "", b = "", c = "";
+  for (let o in t) {
+    let l = t[o];
+    o[0] == "@" ? o[1] == "i" ? s = o + " " + l + ";" : b += o[1] == "f" ? P(l, o) : o + "{" + P(l, o[1] == "k" ? "" : n) + "}" : typeof l == "object" ? b += P(l, n ? n.replace(/([^,])+/g, (u) => o.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g, (p) => /&/.test(p) ? p.replace(/&/g, u) : u ? u + " " + p : p)) : o) : l != null && (o = /^--/.test(o) ? o : o.replace(/[A-Z]/g, "-$&").toLowerCase(), c += P.p ? P.p(o, l) : o + ":" + l + ";");
+  }
+  return s + (n && c ? n + "{" + c + "}" : c) + b;
+}, y = {}, se = (t) => {
+  if (typeof t == "object") {
+    let n = "";
+    for (let s in t) n += s + se(t[s]);
+    return n;
+  }
+  return t;
+}, Ee = (t, n, s, b, c) => {
+  let o = se(t), l = y[o] || (y[o] = ((p) => {
+    let E = 0, f = 11;
+    for (; E < p.length; ) f = 101 * f + p.charCodeAt(E++) >>> 0;
+    return "go" + f;
+  })(o));
+  if (!y[l]) {
+    let p = o !== t ? t : ((E) => {
+      let f, m, x = [{}];
+      for (; f = ge.exec(E.replace(he, "")); ) f[4] ? x.shift() : f[3] ? (m = f[3].replace(le, " ").trim(), x.unshift(x[0][m] = x[0][m] || {})) : x[0][f[1]] = f[2].replace(le, " ").trim();
+      return x[0];
+    })(t);
+    y[l] = P(c ? { ["@keyframes " + l]: p } : p, s ? "" : "." + l);
+  }
+  let u = s && y.g ? y.g : null;
+  return s && (y.g = y[l]), ((p, E, f, m) => {
+    m ? E.data = E.data.replace(m, p) : E.data.indexOf(p) === -1 && (E.data = f ? p + E.data : E.data + p);
+  })(y[l], n, b, u), l;
+}, ve = (t, n, s) => t.reduce((b, c, o) => {
+  let l = n[o];
+  if (l && l.call) {
+    let u = l(s), p = u && u.props && u.props.className || /^go/.test(u) && u;
+    l = p ? "." + p : u && typeof u == "object" ? u.props ? "" : P(u, "") : u === !1 ? "" : u;
+  }
+  return b + c + (l ?? "");
+}, "");
+function W(t) {
+  let n = this || {}, s = t.call ? t(n.p) : t;
+  return Ee(s.unshift ? s.raw ? ve(s, [].slice.call(arguments, 1), n.p) : s.reduce((b, c) => Object.assign(b, c && c.call ? c(n.p) : c), {}) : s, be(n.target), n.g, n.o, n.k);
+}
+W.bind({ g: 1 });
+W.bind({ k: 1 });
+function _e(t, n, s, b) {
+  P.p = n;
+}
+_e();
+const ce = W`
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  user-select: none;
+  color: white;
+  font-size: 10px;
+  border: 2px solid rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  opacity: 0.85;
+  &:active {
+    cursor: grabbing;
+  }
+`, Te = W`
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+`, xe = W`
+  position: fixed;
+  z-index: 50;
+  background-color: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 8px 0;
+  min-width: 144px;
+`, Re = W`
+  width: 100%;
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 14px;
+  color: #333;
+  cursor: pointer;
+  background: none;
+  border: none;
+  text-align: left;
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+`, we = 80, ye = 32, ke = 12, je = ({
+  extraMenuItems: t,
+  onClick: n,
+  storageKey: s = "floating-ball-position",
+  defaultPosition: b = { x: 16, y: 16 },
+  width: c = we,
+  height: o = ye,
+  borderRadius: l = ke,
+  bgColor: u = "rgb(34, 139, 34)",
+  className: p = "",
+  zIndex: E = 2999,
+  versionInfo: f
+}) => {
+  const [m, x] = re(() => {
+    const a = localStorage.getItem(s);
+    if (a)
+      try {
+        return JSON.parse(a);
+      } catch {
+        return b;
+      }
+    return b;
+  }), [D, N] = re(!1), _ = O(!1), k = O({ x: 0, y: 0 }), L = O(m), h = O(null), z = O(!1), S = O(!1), X = O(null), C = O(null);
+  te(() => {
+    L.current = m;
+  }, [m]);
+  const M = A((a, v) => {
+    _.current = !1, k.current = { x: a, y: v };
+  }, []), F = A(
+    (a, v) => {
+      const R = a - k.current.x, w = v - k.current.y;
+      if ((Math.abs(R) > 5 || Math.abs(w) > 5) && (_.current = !0), _.current) {
+        const e = Math.max(0, Math.min(window.innerWidth - c, L.current.x + R)), r = Math.max(0, Math.min(window.innerHeight - o, L.current.y + w));
+        x({ x: e, y: r }), k.current = { x: a, y: v };
+      }
+    },
+    [c, o]
+  ), j = A(() => {
+    _.current && localStorage.setItem(s, JSON.stringify(L.current));
+  }, [s]), V = A(
+    (a) => {
+      if (a.button !== 0) return;
+      M(a.clientX, a.clientY);
+      const v = (w) => {
+        F(w.clientX, w.clientY);
+      }, R = () => {
+        j(), _.current = !1, document.removeEventListener("mousemove", v), document.removeEventListener("mouseup", R);
+      };
+      document.addEventListener("mousemove", v), document.addEventListener("mouseup", R);
+    },
+    [M, F, j]
+  ), Z = A(() => {
+    z.current || n !== !1 && (t && t.length > 0 ? (h.current && clearTimeout(h.current), h.current = setTimeout(() => {
+      h.current = null, !_.current && !S.current && (n ? n() : window.location.reload());
+    }, 300)) : _.current || (n ? n() : window.location.reload()));
+  }, [n, t]), Y = A(() => {
+    h.current && (clearTimeout(h.current), h.current = null), !_.current && t && t.length > 0 && N(!0), S.current = !0, setTimeout(() => {
+      S.current = !1;
+    }, 400);
+  }, [t]), G = A(
+    (a) => {
+      a.stopPropagation(), V(a);
+    },
+    [V]
+  );
+  te(() => {
+    const a = X.current;
+    if (!a) return;
+    const v = (r) => {
+      r.touches.length === 1 && M(r.touches[0].clientX, r.touches[0].clientY);
+    }, R = (r) => {
+      r.touches.length === 1 && (F(r.touches[0].clientX, r.touches[0].clientY), _.current && r.preventDefault());
+    }, w = (r) => {
+      if (j(), !_.current) {
+        const i = Date.now(), d = C.current;
+        if (d && i - d.time < 300 && Math.abs(m.x - d.x) < 10 && Math.abs(m.y - d.y) < 10) {
+          C.current = null, h.current && (clearTimeout(h.current), h.current = null), t && t.length > 0 && N(!0), S.current = !0, setTimeout(() => {
+            S.current = !1;
+          }, 400), z.current = !0;
+          return;
+        }
+        C.current = { time: i, x: m.x, y: m.y }, h.current && clearTimeout(h.current), t && t.length > 0 ? h.current = setTimeout(() => {
+          h.current = null, C.current = null, S.current || (n ? n() : window.location.reload());
+        }, 300) : n ? n() : window.location.reload(), z.current = !0;
+      }
+    }, e = () => {
+      Y();
+    };
+    return a.addEventListener("touchstart", v, { passive: !1 }), a.addEventListener("touchmove", R, { passive: !1 }), a.addEventListener("touchend", w), a.addEventListener("dblclick", e), () => {
+      a.removeEventListener("touchstart", v), a.removeEventListener("touchmove", R), a.removeEventListener("touchend", w), a.removeEventListener("dblclick", e);
+    };
+  }, [M, F, j, Y]);
+  const $ = [...[
+    { label: "刷新", icon: "🔄", action: () => window.location.reload() },
+    { label: "回到首页", icon: "🏠", action: () => {
+      window.location.href = "/";
+    } }
+  ], ...t || []], B = A(() => {
+    N(!1);
+  }, []);
+  return /* @__PURE__ */ T.jsxs(T.Fragment, { children: [
+    /* @__PURE__ */ T.jsxs(
+      "div",
+      {
+        ref: X,
+        className: `${ce} ${p}`.trim() || ce,
+        style: {
+          left: m.x,
+          top: m.y,
+          width: c,
+          height: o,
+          borderRadius: l,
+          zIndex: E,
+          backgroundColor: u
+        },
+        onMouseDown: G,
+        onClick: Z,
+        children: [
+          (f == null ? void 0 : f.buildTime) && /* @__PURE__ */ T.jsx("span", { style: { opacity: 0.8, lineHeight: 1.1, textAlign: "center", margin: 0 }, children: f.buildTime }),
+          (f == null ? void 0 : f.version) && /* @__PURE__ */ T.jsxs("span", { style: { opacity: 0.8, lineHeight: 1.1, textAlign: "center", margin: 0, fontWeight: "bold" }, children: [
+            "v",
+            f.version
+          ] })
+        ]
+      }
+    ),
+    D && $.length > 0 && /* @__PURE__ */ T.jsxs(T.Fragment, { children: [
+      /* @__PURE__ */ T.jsx("div", { className: Te, onClick: B }),
+      /* @__PURE__ */ T.jsx(
+        "div",
+        {
+          className: xe,
+          style: {
+            left: Math.max(16, Math.min(m.x, window.innerWidth - 160)),
+            top: m.y + o + 8
+          },
+          children: $.map((a, v) => /* @__PURE__ */ T.jsxs(
+            "button",
+            {
+              className: Re,
+              onClick: () => {
+                N(!1), a.action();
+              },
+              children: [
+                a.icon && /* @__PURE__ */ T.jsx("span", { children: a.icon }),
+                /* @__PURE__ */ T.jsx("span", { children: a.label })
+              ]
+            },
+            `${a.label}-${v}`
+          ))
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  je as default
+};

package/dist/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FloatingBall';
+export type { FloatingBallProps, MenuItem, Position, VersionInfo } from '../types';

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@beforegolive/floating-ball",
-  "version": "0.1.19",
+  "version": "0.2.1",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/.claude/skills/floating-ball-publish/SKILL.md

@@ -1,21 +0,0 @@
-# floating-ball-publish
-
-发布 @beforegolive/floating-ball 包的完整流程。
-
-## 流程
-1. 检查代码是否有未提交的变动（git status）
-2. 如有变动：
-   - 提交 commit
-   - 升级 patch 版本（npm version patch）
-3. 构建（npm run build）
-4. 发布到 npm（npm publish）
-5. 推送到远端（git push）
-
-## 使用
-```
-/floating-ball-publish
-```
-
-## 注意事项
-- 需要在 floating-ball 项目目录下执行
-- npm 已配置 registry 和 authToken

package/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Floating Ball Demo</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/demo.tsx"></script>
-  </body>
-</html>

package/src/FloatingBall.tsx

@@ -1,357 +0,0 @@
-import { useState, useRef, useEffect, useCallback } from "react";
-import { css, setup } from "goober";
-import type { FloatingBallProps, MenuItem, Position, VersionInfo } from "../types";
-
-// 初始化 goober
-setup(css);
-
-// 样式定义
-const ballStyle = css`
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  cursor: grab;
-  user-select: none;
-  color: white;
-  font-size: 10px;
-  border: 2px solid rgba(255, 255, 255, 0.9);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  opacity: 0.85;
-  &:active {
-    cursor: grabbing;
-  }
-`;
-
-const menuOverlayStyle = css`
-  position: fixed;
-  inset: 0;
-  z-index: 40;
-`;
-
-const menuStyle = css`
-  position: fixed;
-  z-index: 50;
-  background-color: #ffffff;
-  border-radius: 8px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 8px 0;
-  min-width: 144px;
-`;
-
-const menuItemStyle = css`
-  width: 100%;
-  padding: 8px 16px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 14px;
-  color: #333;
-  cursor: pointer;
-  background: none;
-  border: none;
-  text-align: left;
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-  }
-`;
-
-interface InternalProps extends FloatingBallProps {
-  versionInfo?: VersionInfo;
-}
-
-const DEFAULT_WIDTH = 80;
-const DEFAULT_HEIGHT = 32;
-const DEFAULT_BORDER_RADIUS = 12;
-
-const FloatingBall = ({
-  extraMenuItems,
-  onClick,
-  storageKey = "floating-ball-position",
-  defaultPosition = { x: 16, y: 16 },
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEIGHT,
-  borderRadius = DEFAULT_BORDER_RADIUS,
-  bgColor = "rgb(34, 139, 34)",
-  className = "",
-  zIndex = 2999,
-  versionInfo,
-}: InternalProps) => {
-  const [position, setPosition] = useState<Position>(() => {
-    const saved = localStorage.getItem(storageKey);
-    if (saved) {
-      try {
-        return JSON.parse(saved);
-      } catch {
-        return defaultPosition;
-      }
-    }
-    return defaultPosition;
-  });
-
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
-  const isDraggingRef = useRef(false);
-  const dragStartRef = useRef({ x: 0, y: 0 });
-  const positionRef = useRef(position);
-  const clickTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const touchHandledRef = useRef(false);
-  const doubleClickFiredRef = useRef(false);
-  const ballRef = useRef<HTMLDivElement>(null);
-  const lastTapRef = useRef<{ time: number; x: number; y: number } | null>(null);
-
-  useEffect(() => {
-    positionRef.current = position;
-  }, [position]);
-
-  const handleDragStart = useCallback((clientX: number, clientY: number) => {
-    isDraggingRef.current = false;
-    dragStartRef.current = { x: clientX, y: clientY };
-  }, []);
-
-  const handleDragMove = useCallback(
-    (clientX: number, clientY: number) => {
-      const dx = clientX - dragStartRef.current.x;
-      const dy = clientY - dragStartRef.current.y;
-      if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
-        isDraggingRef.current = true;
-      }
-      if (isDraggingRef.current) {
-        const newX = Math.max(0, Math.min(window.innerWidth - width, positionRef.current.x + dx));
-        const newY = Math.max(0, Math.min(window.innerHeight - height, positionRef.current.y + dy));
-        setPosition({ x: newX, y: newY });
-        dragStartRef.current = { x: clientX, y: clientY };
-      }
-    },
-    [width, height]
-  );
-
-  const handleDragEnd = useCallback(() => {
-    if (isDraggingRef.current) {
-      localStorage.setItem(storageKey, JSON.stringify(positionRef.current));
-    }
-  }, [storageKey]);
-
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      if (e.button !== 0) return;
-      handleDragStart(e.clientX, e.clientY);
-
-      const handleMouseMove = (moveEvent: MouseEvent) => {
-        handleDragMove(moveEvent.clientX, moveEvent.clientY);
-      };
-
-      const handleMouseUp = () => {
-        handleDragEnd();
-        isDraggingRef.current = false;
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-      };
-
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-    },
-    [handleDragStart, handleDragMove, handleDragEnd]
-  );
-
-  const handleClick = useCallback(() => {
-    if (touchHandledRef.current) {
-      return;
-    }
-
-    if (onClick === false) return;
-
-    if (extraMenuItems && extraMenuItems.length > 0) {
-      if (clickTimerRef.current) {
-        clearTimeout(clickTimerRef.current);
-      }
-
-      clickTimerRef.current = setTimeout(() => {
-        clickTimerRef.current = null;
-        if (!isDraggingRef.current && !doubleClickFiredRef.current) {
-          onClick ? onClick() : window.location.reload();
-        }
-      }, 300);
-    } else {
-      if (!isDraggingRef.current) {
-        onClick ? onClick() : window.location.reload();
-      }
-    }
-  }, [onClick, extraMenuItems]);
-
-  const handleDoubleClick = useCallback(() => {
-    if (clickTimerRef.current) {
-      clearTimeout(clickTimerRef.current);
-      clickTimerRef.current = null;
-    }
-    if (!isDraggingRef.current && extraMenuItems && extraMenuItems.length > 0) {
-      setIsMenuOpen(true);
-    }
-    doubleClickFiredRef.current = true;
-    setTimeout(() => {
-      doubleClickFiredRef.current = false;
-    }, 400);
-  }, [extraMenuItems]);
-
-  const handleMouseDownBall = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      handleMouseDown(e);
-    },
-    [handleMouseDown]
-  );
-
-  useEffect(() => {
-    const ball = ballRef.current;
-    if (!ball) return;
-
-    const onTouchStart = (e: TouchEvent) => {
-      if (e.touches.length !== 1) return;
-      handleDragStart(e.touches[0].clientX, e.touches[0].clientY);
-    };
-    const onTouchMove = (e: TouchEvent) => {
-      if (e.touches.length !== 1) return;
-      handleDragMove(e.touches[0].clientX, e.touches[0].clientY);
-      if (isDraggingRef.current) {
-        e.preventDefault();
-      }
-    };
-    const onTouchEnd = (_e: TouchEvent) => {
-      handleDragEnd();
-      if (!isDraggingRef.current) {
-        const now = Date.now();
-        const lastTap = lastTapRef.current;
-        const isMobileDoubleTap =
-          lastTap &&
-          now - lastTap.time < 300 &&
-          Math.abs(position.x - lastTap.x) < 10 &&
-          Math.abs(position.y - lastTap.y) < 10;
-
-        if (isMobileDoubleTap) {
-          lastTapRef.current = null;
-          if (clickTimerRef.current) {
-            clearTimeout(clickTimerRef.current);
-            clickTimerRef.current = null;
-          }
-          if (extraMenuItems && extraMenuItems.length > 0) {
-            setIsMenuOpen(true);
-          }
-          doubleClickFiredRef.current = true;
-          setTimeout(() => {
-            doubleClickFiredRef.current = false;
-          }, 400);
-          touchHandledRef.current = true;
-          return;
-        }
-
-        lastTapRef.current = { time: now, x: position.x, y: position.y };
-
-        if (clickTimerRef.current) {
-          clearTimeout(clickTimerRef.current);
-        }
-
-        if (extraMenuItems && extraMenuItems.length > 0) {
-          clickTimerRef.current = setTimeout(() => {
-            clickTimerRef.current = null;
-            lastTapRef.current = null;
-            if (!doubleClickFiredRef.current) {
-              onClick ? onClick() : window.location.reload();
-            }
-          }, 300);
-        } else {
-          onClick ? onClick() : window.location.reload();
-        }
-
-        touchHandledRef.current = true;
-      }
-    };
-    const onDblClick = () => {
-      handleDoubleClick();
-    };
-
-    ball.addEventListener("touchstart", onTouchStart, { passive: false });
-    ball.addEventListener("touchmove", onTouchMove, { passive: false });
-    ball.addEventListener("touchend", onTouchEnd);
-    ball.addEventListener("dblclick", onDblClick);
-
-    return () => {
-      ball.removeEventListener("touchstart", onTouchStart);
-      ball.removeEventListener("touchmove", onTouchMove);
-      ball.removeEventListener("touchend", onTouchEnd);
-      ball.removeEventListener("dblclick", onDblClick);
-    };
-  }, [handleDragStart, handleDragMove, handleDragEnd, handleDoubleClick]);
-
-  const defaultMenuItems: MenuItem[] = [
-    { label: "刷新", icon: "🔄", action: () => window.location.reload() },
-    { label: "回到首页", icon: "🏠", action: () => { window.location.href = "/"; } },
-  ];
-  const menuItems: MenuItem[] = [...defaultMenuItems, ...(extraMenuItems || [])];
-
-  const closeMenu = useCallback(() => {
-    setIsMenuOpen(false);
-  }, []);
-
-  return (
-    <>
-      <div
-        ref={ballRef}
-        className={`${ballStyle} ${className}`.trim() || ballStyle}
-        style={{
-          left: position.x,
-          top: position.y,
-          width,
-          height,
-          borderRadius,
-          zIndex,
-          backgroundColor: bgColor,
-        }}
-        onMouseDown={handleMouseDownBall}
-        onClick={handleClick}
-      >
-        {versionInfo?.buildTime && (
-          <span style={{ opacity: 0.8, lineHeight: 1.1, textAlign: "center", margin: 0 }}>
-            {versionInfo.buildTime}
-          </span>
-        )}
-        {versionInfo?.version && (
-          <span style={{ opacity: 0.8, lineHeight: 1.1, textAlign: "center", margin: 0, fontWeight: "bold" }}>
-            v{versionInfo.version}
-          </span>
-        )}
-      </div>
-
-      {isMenuOpen && menuItems.length > 0 && (
-        <>
-          <div className={menuOverlayStyle} onClick={closeMenu} />
-          <div
-            className={menuStyle}
-            style={{
-              left: Math.max(16, Math.min(position.x, window.innerWidth - 160)),
-              top: position.y + height + 8,
-            }}
-          >
-            {menuItems.map((item, index) => (
-              <button
-                key={`${item.label}-${index}`}
-                className={menuItemStyle}
-                onClick={() => {
-                  setIsMenuOpen(false);
-                  item.action();
-                }}
-              >
-                {item.icon && <span>{item.icon}</span>}
-                <span>{item.label}</span>
-              </button>
-            ))}
-          </div>
-        </>
-      )}
-    </>
-  );
-};
-
-export default FloatingBall;
-export type { FloatingBallProps, MenuItem, Position, VersionInfo };

package/src/demo.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { BrowserRouter, useNavigate } from 'react-router-dom';
-import FloatingBall from './FloatingBall';
-
-const VERSION = '1.0.0';
-const now = new Date();
-const BUILD_TIME = `${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}(${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')})`;
-
-function DemoApp() {
-  const navigate = useNavigate();
-
-  const extraMenuItems = [
-    {
-      label: '打开笔记页面',
-      icon: '📝',
-      action: () => {
-        navigate('/notes');
-      },
-    },
-  ];
-
-  return (
-    <div style={{ padding: '20px', fontFamily: 'system-ui' }}>
-      <h1>Floating Ball Demo</h1>
-      <p>点击悬浮球：刷新页面</p>
-      <p>双击悬浮球：打开菜单</p>
-      <p>拖拽悬浮球：移动位置</p>
-
-      <div style={{ marginTop: '100px' }}>
-        <h2>页面内容</h2>
-        <p>这是演示页面，用于测试悬浮球组件。</p>
-      </div>
-
-      <FloatingBall
-        extraMenuItems={extraMenuItems}
-        storageKey="floating-ball-position"
-        defaultPosition={{ x: 16, y: 16 }}
-        width={80}
-        height={32}
-        borderRadius={12}
-        bgColor="rgb(34, 139, 34)"
-        versionInfo={{
-          version: VERSION,
-          buildTime: BUILD_TIME,
-        }}
-      />
-    </div>
-  );
-}
-
-function App() {
-  return (
-    <BrowserRouter>
-      <DemoApp />
-    </BrowserRouter>
-  );
-}
-
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

package/tsconfig.json

@@ -1,21 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "declaration": true,
-    "declarationDir": "./dist",
-    "noEmit": false
-  },
-  "include": ["src", "types"]
-}

package/types/index.ts

@@ -1,44 +0,0 @@
-export interface MenuItem {
-  /** 显示的标签 */
-  label: string;
-  /** 图标（emoji 或 HTML） */
-  icon?: string;
-  /** 点击后的行为 */
-  action: () => void;
-}
-
-export interface FloatingBallProps {
-  /** 附加菜单项（常驻项：刷新、回到首页） */
-  extraMenuItems?: MenuItem[];
-  /** 刷新菜单项的点击行为 */
-  onRefresh?: () => void;
-  /** 回到首页菜单项的点击行为 */
-  onGoHome?: () => void;
-  /** 单击行为（默认刷新页面），设为 false 禁用单击 */
-  onClick?: (() => void) | false;
-  /** localStorage 存储位置持久化的 key */
-  storageKey?: string;
-  /** 默认位置 */
-  defaultPosition?: Position;
-  /** 悬浮球尺寸 */
-  width?: number;
-  height?: number;
-  /** 圆角 */
-  borderRadius?: number;
-  /** 背景色，默认蓝色 */
-  bgColor?: string;
-  /** 样式类名 */
-  className?: string;
-  /** 层级 */
-  zIndex?: number;
-}
-
-export interface Position {
-  x: number;
-  y: number;
-}
-
-export interface VersionInfo {
-  version?: string;
-  buildTime?: string;
-}

package/vite.config.ts

@@ -1,31 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import dts from 'vite-plugin-dts'
-import { resolve } from 'path'
-
-export default defineConfig({
-  plugins: [react(), dts({
-    include: 'src/index.ts',
-  })],
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      name: 'FloatingBall',
-      formats: ['es'],
-      fileName: 'index',
-    },
-    rollupOptions: {
-      external: ['react', 'react-dom', 'react-router-dom'],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-          'react-router-dom': 'ReactRouterDOM',
-        },
-      },
-    },
-  },
-  server: {
-    open: true,
-  },
-})