data-preview 1.0.4 → 1.0.6

package/README.md

@@ -10,7 +10,7 @@ AI-native semantic preview runtime for modern web.
 
 - Zero Dependency
 - Framework Agnostic
-- Hover Preview（PC）/ Long Press Preview（Mobile）
+- Hover Preview（PC）/ Tap Preview（Mobile）
 - Smart Positioning — 自动适应窗口边界与图片比例
 - SPA Compatible — 内置 `destroy()` 支持路由卸载
 - Auto Dark Mode
@@ -181,14 +181,14 @@ DataPreview.init()
 | `imgPad`            | `8`    | 预览框内边距 px          |
 | `maxWRatio`         | `0.9`  | 预览框最大宽度占窗口比例 |
 | `maxHRatio`         | `0.85` | 预览框最大高度占窗口比例 |
-| `delayHide`         | `120`  | 鼠标离开后隐藏延迟 ms    |
-| `longPressDuration` | `480`  | 移动端长按触发时长 ms    |
+| `delayHide`         | `150`  | 鼠标离开后隐藏延迟 ms    |
+| `badgeOffset`       | `6`    | 预览图标距右上角偏移 px  |
 
 ------
 
 ## Mobile
 
-移动端通过 `(pointer: coarse)` 自动识别触摸设备，采用长按触发预览，点击遮罩或右上角 ✕ 关闭。无需额外配置。
+移动端通过 `(pointer: coarse)` 自动识别触摸设备，采用点击触发预览，点击遮罩或右上角 ✕ 关闭。无需额外配置。
 
 ------
 

package/dist/data-preview.es.js

@@ -1,211 +1,200 @@
-const te = (() => {
-  const b = {
+const oe = (() => {
+  const m = {
     imgPad: 8,
     maxWRatio: 0.9,
     maxHRatio: 0.85,
-    delayHide: 120,
-    longPressDuration: 480,
+    delayHide: 150,
     badgeOffset: 6
-  }, y = 16, g = 12;
-  let h, i, L, u, m, p, r, M = null, T = null, k = null, P = null, _ = 0, l = null, v = null;
-  const w = /* @__PURE__ */ new Map();
-  let x = window.matchMedia("(pointer: coarse)").matches;
-  const z = window.matchMedia("(prefers-color-scheme: dark)");
-  window.matchMedia("(pointer: coarse)").addEventListener("change", (e) => {
-    x = e.matches;
-  });
-  function K() {
-    h || (h = H("div", {
-      style: "position:fixed;inset:0;z-index:99999;pointer-events:none;"
-    }), r = H("div", {
-      style: `
-        position:fixed;
-        width:24px;height:24px;
-        border-radius:6px;
-        background:rgba(0,0,0,0.45);
-        color:#fff;font-size:13px;
-        display:flex;align-items:center;justify-content:center;
-        cursor:pointer;
-        opacity:0;
-        transition:opacity 0.15s;
-        pointer-events:none;
-        z-index:100001;
-        user-select:none;
-        backdrop-filter:blur(4px);
-      `
-    }), r.textContent = "🖼️", i = H("div", {
-      style: `
-        position:fixed;
-        border-radius:12px;
-        overflow:hidden;
-        opacity:0;
-        transform:scale(0.95);
-        transition:opacity 0.15s,transform 0.15s;
-        pointer-events:none;
-        z-index:100000;
-        will-change:transform,opacity;
-      `
-    }), p = H("button", {
-      style: `
-        position:absolute;top:6px;right:6px;
-        width:26px;height:26px;
-        border-radius:50%;border:none;cursor:pointer;
-        display:flex;align-items:center;justify-content:center;
-        font-size:13px;line-height:1;z-index:1;
-        opacity:0;transition:opacity 0.15s;
-      `
-    }), p.textContent = "✕", p.setAttribute("aria-label", "关闭预览"), p.addEventListener("click", (e) => {
-      e.stopPropagation(), D();
-    }), p.addEventListener("touchend", (e) => {
-      e.stopPropagation(), D();
-    }), L = H("div", { style: "position:relative;" }), u = H("img", { style: "display:block;", alt: "preview" }), m = H("div", { style: "font-size:11px;padding:5px 10px;white-space:nowrap;" }), L.append(u, p), i.append(L, m), h.append(r, i), document.body.appendChild(h), r.addEventListener("mouseenter", () => {
-      if (clearTimeout(M), clearTimeout(T), !l) return;
-      const e = R(l), n = N(l);
-      e && Q(e, n);
-    }), r.addEventListener("mouseleave", () => {
-      i.style.opacity !== "1" && O();
-    }), r.addEventListener("click", () => {
-      i.style.opacity === "1" && D();
+  }, h = 16, w = 12;
+  let g, i, M, l, v, f, s, L = null, T = null, E = null, W = 0, u = null, b = null, B = "[data-preview]";
+  const x = /* @__PURE__ */ new Map();
+  let y = window.matchMedia("(pointer: coarse)").matches;
+  const A = window.matchMedia("(prefers-color-scheme: dark)"), _ = window.matchMedia("(pointer: coarse)"), q = (e) => {
+    y = e.matches;
+  };
+  _.addEventListener("change", q);
+  let C = !1;
+  function V() {
+    g || (g = H("div", {
+      style: "position:fixed; inset:0; z-index:99999; pointer-events:none; will-change:transform;"
+    }), s = H("div", {
+      style: "position:fixed; width:24px; height:24px; border-radius:6px; background:rgba(0,0,0,0.45); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity 0.15s, background 0.15s; pointer-events:none; z-index:100001; user-select:none; backdrop-filter:blur(4px);"
+    }), s.textContent = "🖼️", i = H("div", {
+      style: "position:fixed; border-radius:12px; overflow:hidden; opacity:0; transform:scale(0.95); transition:opacity 0.15s, transform 0.15s; pointer-events:none; z-index:100000; will-change:transform, opacity;"
+    }), f = H("button", {
+      style: "position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1; z-index:1; opacity:0; transition:opacity 0.15s;"
+    }), f.textContent = "✕", f.setAttribute("aria-label", "关闭预览"), M = H("div", { style: "position:relative;" }), l = H("img", { style: "display:block; max-width:none; max-height:none;", alt: "preview" }), v = H("div", { style: "font-size:11px; padding:5px 10px; white-space:nowrap; height:22px; box-sizing:border-box;" }), M.append(l, f), i.append(M, v), g.append(s, i), document.body.appendChild(g), s.addEventListener("mouseenter", () => {
+      if (y || !u) return;
+      clearTimeout(L), clearTimeout(T);
+      const e = $(u);
+      e && Y(e, G(u));
+    }), s.addEventListener("mouseleave", () => {
+      y || i.style.opacity === "1" || z();
+    }), s.addEventListener("click", (e) => {
+      e.stopPropagation(), i.style.opacity === "1" && P();
     }), i.addEventListener("mouseenter", () => {
-      clearTimeout(M), clearTimeout(T), x || (p.style.opacity = "1");
-    }), i.addEventListener("mouseleave", () => {
-      x || (p.style.opacity = "0"), O();
-    }), A(), z.addEventListener("change", A));
-  }
-  function A() {
-    const e = z.matches;
-    i.style.background = e ? "#1c1c1e" : "#ffffff", i.style.border = e ? "1px solid rgba(255,255,255,.12)" : "1px solid rgba(0,0,0,.1)", i.style.boxShadow = e ? "0 12px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3)" : "0 8px 32px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08)", m.style.background = e ? "rgba(255,255,255,.06)" : "rgba(0,0,0,.04)", m.style.color = e ? "rgba(255,255,255,.4)" : "rgba(0,0,0,.4)", m.style.borderTop = e ? "1px solid rgba(255,255,255,.08)" : "1px solid rgba(0,0,0,.06)", p.style.background = e ? "rgba(255,255,255,.15)" : "rgba(0,0,0,.15)", p.style.color = e ? "rgba(255,255,255,.8)" : "rgba(0,0,0,.6)";
-  }
-  function j(e) {
-    const n = e.getBoundingClientRect(), t = b.badgeOffset;
-    r.style.left = n.right - 24 - t + "px", r.style.top = n.top + t + "px";
-  }
-  function q(e, n) {
-    const t = b.imgPad * 2, o = m.offsetHeight || 22, s = Math.floor(window.innerWidth * b.maxWRatio) - t, d = Math.floor(window.innerHeight * b.maxHRatio) - t - o, f = e / n;
-    let a, c;
-    return f >= 1 ? (a = Math.min(s, e), c = a / f, c > d && (c = d, a = c * f)) : (c = Math.min(d, n), a = c * f, a > s && (a = s, c = a / f)), { pw: Math.round(a), ph: Math.round(c) };
-  }
-  function U(e, n) {
-    if (!l) return;
-    const t = l.getBoundingClientRect(), o = b.imgPad, s = m.offsetHeight || 22, { pw: d, ph: f } = q(e, n), a = d + o * 2, c = f + o * 2 + s, S = window.innerWidth, J = window.innerHeight;
-    let W;
-    t.left - g >= a + y ? W = t.left - g - a : S - t.right - g >= a + y ? W = t.right + g : W = C(t.left + (t.width - a) / 2, y, S - a - y);
-    let B;
-    J - t.bottom - g >= c + y ? B = t.bottom + g : t.top - g >= c + y ? B = t.top - g - c : B = C(t.top + (t.height - c) / 2, y, J - c - y), i.style.left = W + "px", i.style.top = B + "px", i.style.width = a + "px", L.style.padding = o + "px", u.style.width = d + "px", u.style.height = f + "px";
-  }
-  function V(e, n) {
-    const t = b.imgPad, o = m.offsetHeight || 22, { pw: s, ph: d } = q(e, n), f = s + t * 2, a = d + t * 2 + o, c = window.innerWidth, S = window.innerHeight;
-    i.style.left = C((c - f) / 2, y, c - f - y) + "px", i.style.top = C((S - a) / 2, y, S - a - y) + "px", i.style.width = f + "px", L.style.padding = t + "px", u.style.width = s + "px", u.style.height = d + "px";
+      y || (clearTimeout(L), clearTimeout(T), f.style.opacity = "1");
+    }), i.addEventListener("mouseleave", (e) => {
+      y || (f.style.opacity = "0", e.relatedTarget !== s && z());
+    }), f.addEventListener("click", (e) => {
+      e.stopPropagation(), P();
+    }), f.addEventListener("touchend", (e) => {
+      e.stopPropagation(), e.preventDefault(), P();
+    }), document.addEventListener("click", (e) => {
+      i && i.style.opacity === "1" && !i.contains(e.target) && !s.contains(e.target) && P();
+    }, { passive: !0 }), O(), A.addEventListener("change", O));
+  }
+  function O() {
+    if (!i) return;
+    const e = A.matches;
+    i.style.background = e ? "#1c1c1e" : "#ffffff", i.style.border = e ? "1px solid rgba(255,255,255,.12)" : "1px solid rgba(0,0,0,.1)", i.style.boxShadow = e ? "0 12px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3)" : "0 8px 32px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08)", v.style.background = e ? "rgba(255,255,255,.06)" : "rgba(0,0,0,.04)", v.style.color = e ? "rgba(255,255,255,.4)" : "rgba(0,0,0,.4)", v.style.borderTop = e ? "1px solid rgba(255,255,255,.08)" : "1px solid rgba(0,0,0,.06)", f.style.background = e ? "rgba(255,255,255,.15)" : "rgba(0,0,0,.15)", f.style.color = e ? "rgba(255,255,255,.8)" : "rgba(0,0,0,.6)";
+  }
+  function R(e) {
+    const n = e.getBoundingClientRect();
+    s.style.left = `${n.right - 24 - m.badgeOffset}px`, s.style.top = `${n.top + m.badgeOffset}px`;
+  }
+  function j(e, n) {
+    const t = m.imgPad * 2, r = 22, o = Math.floor(window.innerWidth * m.maxWRatio) - t, a = Math.floor(window.innerHeight * m.maxHRatio) - t - r, c = e / n;
+    let d, p;
+    return c >= 1 ? (d = Math.min(o, e), p = d / c, p > a && (p = a, d = p * c)) : (p = Math.min(a, n), d = p * c, d > o && (d = o, p = d / c)), { pw: Math.round(d), ph: Math.round(p) };
+  }
+  function D(e, n) {
+    if (!u) return;
+    const t = u.getBoundingClientRect(), r = m.imgPad, o = 22, { pw: a, ph: c } = j(e, n), d = a + r * 2, p = c + r * 2 + o, K = window.innerWidth, U = window.innerHeight;
+    let ne = t.left - w >= d + h ? t.left - w - d : K - t.right - w >= d + h ? t.right + w : S(t.left + (t.width - d) / 2, h, K - d - h), ie = U - t.bottom - w >= p + h ? t.bottom + w : t.top - w >= p + h ? t.top - w - p : S(t.top + (t.height - p) / 2, h, U - p - h);
+    i.style.left = `${ne}px`, i.style.top = `${ie}px`, i.style.width = `${d}px`, M.style.padding = `${r}px`, l.style.width = `${a}px`, l.style.height = `${c}px`;
+  }
+  function F(e, n) {
+    const t = m.imgPad, r = 22, { pw: o, ph: a } = j(e, n), c = o + t * 2, d = a + t * 2 + r;
+    i.style.left = `${S((window.innerWidth - c) / 2, h, window.innerWidth - c - h)}px`, i.style.top = `${S((window.innerHeight - d) / 2, h, window.innerHeight - d - h)}px`, i.style.width = `${c}px`, M.style.padding = `${t}px`, l.style.width = `${o}px`, l.style.height = `${a}px`;
   }
   function X(e) {
-    v !== e && (clearTimeout(T), !(l === e && r.style.opacity === "1") && (l = e, j(e), r.style.opacity = "1", r.style.pointerEvents = "auto", h.style.pointerEvents = "auto"));
-  }
-  function Q(e, n) {
-    if (v && l === v) return;
-    const t = ++_;
-    m.textContent = n || "";
-    function o(s, d) {
-      t === _ && (x ? V(s, d) : U(s, d), i.style.opacity = "1", i.style.transform = "scale(1)", i.style.pointerEvents = "auto", x && (p.style.opacity = "1"), r.textContent = "✕", r.style.background = "rgba(220,60,60,0.75)", m.textContent = n || s + " × " + d);
+    b !== e && (clearTimeout(T), u = e, R(e), s.style.opacity = "1", s.style.pointerEvents = y ? "none" : "auto");
+  }
+  function Y(e, n) {
+    if (!e) return;
+    const t = ++W;
+    function r(a, c) {
+      t !== W || !u || (y ? F(a, c) : D(a, c), i.style.opacity = "1", i.style.transform = "scale(1)", i.style.pointerEvents = "auto", g.style.pointerEvents = "auto", f.style.opacity = "1", s.textContent = "✕", s.style.background = "rgba(220,60,60,0.75)", s.style.pointerEvents = "auto", v.textContent = n || `${a} × ${c}`);
     }
-    if (w.get(e) === "loaded" && u.src === e) {
-      o(u.naturalWidth, u.naturalHeight);
+    const o = x.get(e);
+    if (o && o.status === "loaded") {
+      l.src !== e && (l.onload = l.onerror = null, l.src = e), r(o.w, o.h);
       return;
     }
-    u.src = e, u.onload = () => {
-      w.set(e, "loaded"), o(u.naturalWidth, u.naturalHeight);
-    }, u.onerror = () => {
-      w.set(e, "error");
-    };
-  }
-  function O() {
-    clearTimeout(M), M = setTimeout(() => {
-      i.style.opacity = "0", i.style.transform = "scale(0.95)", i.style.pointerEvents = "none", r.style.opacity = "0", r.style.pointerEvents = "none", r.textContent = "🖼️", r.style.background = "rgba(0,0,0,0.45)", h.style.pointerEvents = "none", p.style.opacity = "0", l = null;
-    }, b.delayHide);
+    l.onload = l.onerror = null, l.onload = () => {
+      x.set(e, { status: "loaded", w: l.naturalWidth, h: l.naturalHeight }), r(l.naturalWidth, l.naturalHeight);
+    }, l.onerror = () => {
+      x.set(e, { status: "error", w: 0, h: 0 });
+    }, l.src = e;
+  }
+  function z() {
+    clearTimeout(L), L = setTimeout(() => {
+      I();
+    }, m.delayHide);
+  }
+  function P() {
+    if (clearTimeout(L), clearTimeout(T), u) {
+      const e = u;
+      b = e, setTimeout(() => {
+        b === e && (b = null);
+      }, 300);
+    }
+    I();
   }
-  function D() {
-    clearTimeout(M), clearTimeout(T), ++_, l && (v = l), i.style.opacity = "0", i.style.transform = "scale(0.95)", i.style.pointerEvents = "none", r.style.opacity = "0", r.style.pointerEvents = "none", r.textContent = "🖼️", r.style.background = "rgba(0,0,0,0.45)", h.style.pointerEvents = "none", p.style.opacity = "0", l = null;
+  function I() {
+    W++, i && (i.style.opacity = "0", i.style.transform = "scale(0.95)", i.style.pointerEvents = "none", s.style.opacity = "0", s.style.pointerEvents = "none", f.style.opacity = "0", s.textContent = "🖼️", s.style.background = "rgba(0,0,0,0.45)", g.style.pointerEvents = "none", u = null);
   }
-  function F(e) {
-    if (!e || w.has(e)) return;
-    w.set(e, "loading");
+  function N(e) {
+    if (!e || x.has(e)) return;
+    x.set(e, { status: "loading", w: 0, h: 0 });
     const n = new Image();
-    n.onload = () => w.set(e, "loaded"), n.onerror = () => w.set(e, "error"), n.src = e;
-  }
-  function I() {
-    l && r.style.opacity === "1" && j(l);
+    n.onload = () => {
+      x.set(e, { status: "loaded", w: n.naturalWidth, h: n.naturalHeight });
+    }, n.onerror = () => {
+      x.set(e, { status: "error", w: 0, h: 0 });
+    }, n.src = e;
+  }
+  function Q() {
+    !u || C || (C = !0, requestAnimationFrame(() => {
+      if (u && s && s.style.opacity === "1") {
+        R(u);
+        const e = x.get($(u));
+        i && i.style.opacity === "1" && e && e.status === "loaded" && (y ? F(e.w, e.h) : D(e.w, e.h));
+      }
+      C = !1;
+    }));
   }
-  function R(e) {
+  function $(e) {
     var n;
     return e.dataset.previewSrc || e.src || e.currentSrc || ((n = e.querySelector("img")) == null ? void 0 : n.src) || null;
   }
-  function N(e) {
+  function G(e) {
     return e.dataset.previewLabel || e.alt || e.title || null;
   }
-  function E(e) {
+  function k(e) {
     if (e._dpBound) return;
-    const n = {
+    let n = 0, t = 0;
+    const r = {
       mouseenter() {
-        x || v !== e && (clearTimeout(T), !(l === e && r.style.opacity === "1") && (F(R(e)), X(e)));
-      },
-      mouseleave(t) {
-        x || e.contains(t.relatedTarget) || (v === e && (v = null), T = setTimeout(() => {
-          l === e && O();
-        }, b.delayHide));
+        y || b === e || (clearTimeout(T), N($(e)), X(e));
       },
-      touchstart(t) {
-        if (!x) return;
-        const o = R(e);
-        o && (F(o), k = setTimeout(() => {
-          l = e, Q(o, N(e));
-        }, b.longPressDuration));
+      mouseleave(o) {
+        y || e.contains(o.relatedTarget) || (b === e && (b = null), T = setTimeout(() => {
+          u === e && z();
+        }, m.delayHide));
       },
-      touchend() {
-        clearTimeout(k);
+      touchstart(o) {
+        if (!y) return;
+        const a = o.touches[0];
+        n = a.clientX, t = a.clientY, N($(e));
       },
-      touchmove() {
-        clearTimeout(k);
-      },
-      touchcancel() {
-        clearTimeout(k);
-      },
-      contextmenu(t) {
-        x && t.preventDefault();
+      touchend(o) {
+        if (!y || b === e) return;
+        const a = o.changedTouches[0];
+        if (Math.abs(a.clientX - n) < 10 && Math.abs(a.clientY - t) < 10) {
+          X(e);
+          const c = $(e);
+          c && Y(c, G(e));
+        }
       }
     };
-    Object.entries(n).forEach(([t, o]) => e.addEventListener(t, o)), e._dpBound = !0, e._dpHandlers = n;
+    Object.entries(r).forEach(([o, a]) => {
+      e.addEventListener(o, a, o.startsWith("touch") && o !== "touchend" ? { passive: !0 } : !1);
+    }), e._dpBound = !0, e._dpHandlers = r;
   }
-  function G(e) {
-    e._dpBound && (Object.entries(e._dpHandlers).forEach(
-      ([n, t]) => e.removeEventListener(n, t)
-    ), e._dpBound = !1, e._dpHandlers = null, e._dpMoveTimer = null);
+  function J(e) {
+    !e || !e._dpBound || (Object.entries(e._dpHandlers || {}).forEach(([n, t]) => {
+      e.removeEventListener(n, t);
+    }), delete e._dpBound, delete e._dpHandlers);
   }
-  function Y(e) {
-    document.querySelectorAll(e).forEach((n) => E(n));
+  function Z(e) {
+    document.querySelectorAll(e).forEach(k);
   }
-  function Z(e = "[data-preview]") {
-    K(), document.querySelectorAll(e).forEach((n) => E(n)), window.addEventListener("scroll", I, !0), P = new MutationObserver((n) => {
+  function ee(e = "[data-preview]") {
+    B = e, V(), document.querySelectorAll(e).forEach(k), window.addEventListener("scroll", Q, { capture: !0, passive: !0 }), E = new MutationObserver((n) => {
       n.forEach((t) => {
-        t.addedNodes.forEach((o) => {
-          var s, d;
-          o.nodeType === 1 && ((s = o.matches) != null && s.call(o, e) && E(o), (d = o.querySelectorAll) == null || d.call(o, e).forEach((f) => E(f)));
+        t.addedNodes.forEach((r) => {
+          var o, a;
+          r.nodeType === 1 && ((o = r.matches) != null && o.call(r, e) && k(r), (a = r.querySelectorAll) == null || a.call(r, e).forEach(k));
         });
       });
-    }), P.observe(document.body, { childList: !0, subtree: !0 });
+    }), E.observe(document.body, { childList: !0, subtree: !0 });
   }
-  function $() {
-    P == null || P.disconnect(), P = null, document.querySelectorAll("[data-preview]").forEach((e) => G(e)), window.removeEventListener("scroll", I, !0), z.removeEventListener("change", A), h == null || h.remove(), h = i = L = u = m = p = r = null, w.clear(), clearTimeout(M), clearTimeout(T), clearTimeout(k), v = null;
+  function te() {
+    E == null || E.disconnect(), E = null, document.querySelectorAll(B).forEach(J), window.removeEventListener("scroll", Q, { capture: !0, passive: !0 }), A.removeEventListener("change", O), _.removeEventListener("change", q), g == null || g.remove(), g = null, i = null, M = null, l = null, v = null, f = null, s = null, x.clear(), clearTimeout(L), clearTimeout(T), b = null, u = null;
   }
   function H(e, n = {}) {
     const t = document.createElement(e);
-    return Object.entries(n).forEach(([o, s]) => {
-      o === "style" ? t.style.cssText = s : t[o] = s;
+    return Object.entries(n).forEach(([r, o]) => {
+      r === "style" ? t.style.cssText = o : r.startsWith("aria-") ? t.setAttribute(r, o) : t[r] = o;
     }), t;
   }
-  function C(e, n, t) {
+  function S(e, n, t) {
     return Math.max(n, Math.min(e, t));
   }
-  return { init: Z, bind: E, unbind: G, bindAll: Y, destroy: $, config: b };
+  return { init: ee, bind: k, unbind: J, bindAll: Z, destroy: te, config: m };
 })();
 export {
-  te as default
+  oe as default
 };

package/dist/data-preview.umd.js

@@ -1,32 +1 @@
-(function(C,p){typeof exports=="object"&&typeof module<"u"?module.exports=p():typeof define=="function"&&define.amd?define(p):(C=typeof globalThis<"u"?globalThis:C||self,C.DataPreview=p())})(this,(function(){"use strict";return(()=>{const p={imgPad:8,maxWRatio:.9,maxHRatio:.85,delayHide:120,longPressDuration:480,badgeOffset:6},h=16,g=12;let m,o,P,u,b,f,r,L=null,T=null,k=null,M=null,z=0,l=null,v=null;const w=new Map;let x=window.matchMedia("(pointer: coarse)").matches;const A=window.matchMedia("(prefers-color-scheme: dark)");window.matchMedia("(pointer: coarse)").addEventListener("change",e=>{x=e.matches});function U(){m||(m=H("div",{style:"position:fixed;inset:0;z-index:99999;pointer-events:none;"}),r=H("div",{style:`
-        position:fixed;
-        width:24px;height:24px;
-        border-radius:6px;
-        background:rgba(0,0,0,0.45);
-        color:#fff;font-size:13px;
-        display:flex;align-items:center;justify-content:center;
-        cursor:pointer;
-        opacity:0;
-        transition:opacity 0.15s;
-        pointer-events:none;
-        z-index:100001;
-        user-select:none;
-        backdrop-filter:blur(4px);
-      `}),r.textContent="🖼️",o=H("div",{style:`
-        position:fixed;
-        border-radius:12px;
-        overflow:hidden;
-        opacity:0;
-        transform:scale(0.95);
-        transition:opacity 0.15s,transform 0.15s;
-        pointer-events:none;
-        z-index:100000;
-        will-change:transform,opacity;
-      `}),f=H("button",{style:`
-        position:absolute;top:6px;right:6px;
-        width:26px;height:26px;
-        border-radius:50%;border:none;cursor:pointer;
-        display:flex;align-items:center;justify-content:center;
-        font-size:13px;line-height:1;z-index:1;
-        opacity:0;transition:opacity 0.15s;
-      `}),f.textContent="✕",f.setAttribute("aria-label","关闭预览"),f.addEventListener("click",e=>{e.stopPropagation(),j()}),f.addEventListener("touchend",e=>{e.stopPropagation(),j()}),P=H("div",{style:"position:relative;"}),u=H("img",{style:"display:block;",alt:"preview"}),b=H("div",{style:"font-size:11px;padding:5px 10px;white-space:nowrap;"}),P.append(u,f),o.append(P,b),m.append(r,o),document.body.appendChild(m),r.addEventListener("mouseenter",()=>{if(clearTimeout(L),clearTimeout(T),!l)return;const e=R(l),n=G(l);e&&F(e,n)}),r.addEventListener("mouseleave",()=>{o.style.opacity!=="1"&&O()}),r.addEventListener("click",()=>{o.style.opacity==="1"&&j()}),o.addEventListener("mouseenter",()=>{clearTimeout(L),clearTimeout(T),x||(f.style.opacity="1")}),o.addEventListener("mouseleave",()=>{x||(f.style.opacity="0"),O()}),D(),A.addEventListener("change",D))}function D(){const e=A.matches;o.style.background=e?"#1c1c1e":"#ffffff",o.style.border=e?"1px solid rgba(255,255,255,.12)":"1px solid rgba(0,0,0,.1)",o.style.boxShadow=e?"0 12px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3)":"0 8px 32px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08)",b.style.background=e?"rgba(255,255,255,.06)":"rgba(0,0,0,.04)",b.style.color=e?"rgba(255,255,255,.4)":"rgba(0,0,0,.4)",b.style.borderTop=e?"1px solid rgba(255,255,255,.08)":"1px solid rgba(0,0,0,.06)",f.style.background=e?"rgba(255,255,255,.15)":"rgba(0,0,0,.15)",f.style.color=e?"rgba(255,255,255,.8)":"rgba(0,0,0,.6)"}function q(e){const n=e.getBoundingClientRect(),t=p.badgeOffset;r.style.left=n.right-24-t+"px",r.style.top=n.top+t+"px"}function Q(e,n){const t=p.imgPad*2,i=b.offsetHeight||22,s=Math.floor(window.innerWidth*p.maxWRatio)-t,d=Math.floor(window.innerHeight*p.maxHRatio)-t-i,y=e/n;let a,c;return y>=1?(a=Math.min(s,e),c=a/y,c>d&&(c=d,a=c*y)):(c=Math.min(d,n),a=c*y,a>s&&(a=s,c=a/y)),{pw:Math.round(a),ph:Math.round(c)}}function V(e,n){if(!l)return;const t=l.getBoundingClientRect(),i=p.imgPad,s=b.offsetHeight||22,{pw:d,ph:y}=Q(e,n),a=d+i*2,c=y+i*2+s,S=window.innerWidth,K=window.innerHeight;let B;t.left-g>=a+h?B=t.left-g-a:S-t.right-g>=a+h?B=t.right+g:B=W(t.left+(t.width-a)/2,h,S-a-h);let _;K-t.bottom-g>=c+h?_=t.bottom+g:t.top-g>=c+h?_=t.top-g-c:_=W(t.top+(t.height-c)/2,h,K-c-h),o.style.left=B+"px",o.style.top=_+"px",o.style.width=a+"px",P.style.padding=i+"px",u.style.width=d+"px",u.style.height=y+"px"}function X(e,n){const t=p.imgPad,i=b.offsetHeight||22,{pw:s,ph:d}=Q(e,n),y=s+t*2,a=d+t*2+i,c=window.innerWidth,S=window.innerHeight;o.style.left=W((c-y)/2,h,c-y-h)+"px",o.style.top=W((S-a)/2,h,S-a-h)+"px",o.style.width=y+"px",P.style.padding=t+"px",u.style.width=s+"px",u.style.height=d+"px"}function Y(e){v!==e&&(clearTimeout(T),!(l===e&&r.style.opacity==="1")&&(l=e,q(e),r.style.opacity="1",r.style.pointerEvents="auto",m.style.pointerEvents="auto"))}function F(e,n){if(v&&l===v)return;const t=++z;b.textContent=n||"";function i(s,d){t===z&&(x?X(s,d):V(s,d),o.style.opacity="1",o.style.transform="scale(1)",o.style.pointerEvents="auto",x&&(f.style.opacity="1"),r.textContent="✕",r.style.background="rgba(220,60,60,0.75)",b.textContent=n||s+" × "+d)}if(w.get(e)==="loaded"&&u.src===e){i(u.naturalWidth,u.naturalHeight);return}u.src=e,u.onload=()=>{w.set(e,"loaded"),i(u.naturalWidth,u.naturalHeight)},u.onerror=()=>{w.set(e,"error")}}function O(){clearTimeout(L),L=setTimeout(()=>{o.style.opacity="0",o.style.transform="scale(0.95)",o.style.pointerEvents="none",r.style.opacity="0",r.style.pointerEvents="none",r.textContent="🖼️",r.style.background="rgba(0,0,0,0.45)",m.style.pointerEvents="none",f.style.opacity="0",l=null},p.delayHide)}function j(){clearTimeout(L),clearTimeout(T),++z,l&&(v=l),o.style.opacity="0",o.style.transform="scale(0.95)",o.style.pointerEvents="none",r.style.opacity="0",r.style.pointerEvents="none",r.textContent="🖼️",r.style.background="rgba(0,0,0,0.45)",m.style.pointerEvents="none",f.style.opacity="0",l=null}function I(e){if(!e||w.has(e))return;w.set(e,"loading");const n=new Image;n.onload=()=>w.set(e,"loaded"),n.onerror=()=>w.set(e,"error"),n.src=e}function N(){l&&r.style.opacity==="1"&&q(l)}function R(e){var n;return e.dataset.previewSrc||e.src||e.currentSrc||((n=e.querySelector("img"))==null?void 0:n.src)||null}function G(e){return e.dataset.previewLabel||e.alt||e.title||null}function E(e){if(e._dpBound)return;const n={mouseenter(){x||v!==e&&(clearTimeout(T),!(l===e&&r.style.opacity==="1")&&(I(R(e)),Y(e)))},mouseleave(t){x||e.contains(t.relatedTarget)||(v===e&&(v=null),T=setTimeout(()=>{l===e&&O()},p.delayHide))},touchstart(t){if(!x)return;const i=R(e);i&&(I(i),k=setTimeout(()=>{l=e,F(i,G(e))},p.longPressDuration))},touchend(){clearTimeout(k)},touchmove(){clearTimeout(k)},touchcancel(){clearTimeout(k)},contextmenu(t){x&&t.preventDefault()}};Object.entries(n).forEach(([t,i])=>e.addEventListener(t,i)),e._dpBound=!0,e._dpHandlers=n}function J(e){e._dpBound&&(Object.entries(e._dpHandlers).forEach(([n,t])=>e.removeEventListener(n,t)),e._dpBound=!1,e._dpHandlers=null,e._dpMoveTimer=null)}function Z(e){document.querySelectorAll(e).forEach(n=>E(n))}function $(e="[data-preview]"){U(),document.querySelectorAll(e).forEach(n=>E(n)),window.addEventListener("scroll",N,!0),M=new MutationObserver(n=>{n.forEach(t=>{t.addedNodes.forEach(i=>{var s,d;i.nodeType===1&&((s=i.matches)!=null&&s.call(i,e)&&E(i),(d=i.querySelectorAll)==null||d.call(i,e).forEach(y=>E(y)))})})}),M.observe(document.body,{childList:!0,subtree:!0})}function ee(){M==null||M.disconnect(),M=null,document.querySelectorAll("[data-preview]").forEach(e=>J(e)),window.removeEventListener("scroll",N,!0),A.removeEventListener("change",D),m==null||m.remove(),m=o=P=u=b=f=r=null,w.clear(),clearTimeout(L),clearTimeout(T),clearTimeout(k),v=null}function H(e,n={}){const t=document.createElement(e);return Object.entries(n).forEach(([i,s])=>{i==="style"?t.style.cssText=s:t[i]=s}),t}function W(e,n,t){return Math.max(n,Math.min(e,t))}return{init:$,bind:E,unbind:J,bindAll:Z,destroy:ee,config:p}})()}));
+(function(k,p){typeof exports=="object"&&typeof module<"u"?module.exports=p():typeof define=="function"&&define.amd?define(p):(k=typeof globalThis<"u"?globalThis:k||self,k.DataPreview=p())})(this,(function(){"use strict";return(()=>{const p={imgPad:8,maxWRatio:.9,maxHRatio:.85,delayHide:150,badgeOffset:6},y=16,w=12;let b,i,M,l,v,h,a,L=null,T=null,P=null,A=0,u=null,g=null,_="[data-preview]";const x=new Map;let m=window.matchMedia("(pointer: coarse)").matches;const C=window.matchMedia("(prefers-color-scheme: dark)"),D=window.matchMedia("(pointer: coarse)"),j=e=>{m=e.matches};D.addEventListener("change",j);let O=!1;function Z(){b||(b=H("div",{style:"position:fixed; inset:0; z-index:99999; pointer-events:none; will-change:transform;"}),a=H("div",{style:"position:fixed; width:24px; height:24px; border-radius:6px; background:rgba(0,0,0,0.45); color:#fff; font-size:13px; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity 0.15s, background 0.15s; pointer-events:none; z-index:100001; user-select:none; backdrop-filter:blur(4px);"}),a.textContent="🖼️",i=H("div",{style:"position:fixed; border-radius:12px; overflow:hidden; opacity:0; transform:scale(0.95); transition:opacity 0.15s, transform 0.15s; pointer-events:none; z-index:100000; will-change:transform, opacity;"}),h=H("button",{style:"position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:13px; line-height:1; z-index:1; opacity:0; transition:opacity 0.15s;"}),h.textContent="✕",h.setAttribute("aria-label","关闭预览"),M=H("div",{style:"position:relative;"}),l=H("img",{style:"display:block; max-width:none; max-height:none;",alt:"preview"}),v=H("div",{style:"font-size:11px; padding:5px 10px; white-space:nowrap; height:22px; box-sizing:border-box;"}),M.append(l,h),i.append(M,v),b.append(a,i),document.body.appendChild(b),a.addEventListener("mouseenter",()=>{if(m||!u)return;clearTimeout(L),clearTimeout(T);const e=E(u);e&&I(e,J(u))}),a.addEventListener("mouseleave",()=>{m||i.style.opacity==="1"||B()}),a.addEventListener("click",e=>{e.stopPropagation(),i.style.opacity==="1"&&S()}),i.addEventListener("mouseenter",()=>{m||(clearTimeout(L),clearTimeout(T),h.style.opacity="1")}),i.addEventListener("mouseleave",e=>{m||(h.style.opacity="0",e.relatedTarget!==a&&B())}),h.addEventListener("click",e=>{e.stopPropagation(),S()}),h.addEventListener("touchend",e=>{e.stopPropagation(),e.preventDefault(),S()}),document.addEventListener("click",e=>{i&&i.style.opacity==="1"&&!i.contains(e.target)&&!a.contains(e.target)&&S()},{passive:!0}),z(),C.addEventListener("change",z))}function z(){if(!i)return;const e=C.matches;i.style.background=e?"#1c1c1e":"#ffffff",i.style.border=e?"1px solid rgba(255,255,255,.12)":"1px solid rgba(0,0,0,.1)",i.style.boxShadow=e?"0 12px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3)":"0 8px 32px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08)",v.style.background=e?"rgba(255,255,255,.06)":"rgba(0,0,0,.04)",v.style.color=e?"rgba(255,255,255,.4)":"rgba(0,0,0,.4)",v.style.borderTop=e?"1px solid rgba(255,255,255,.08)":"1px solid rgba(0,0,0,.06)",h.style.background=e?"rgba(255,255,255,.15)":"rgba(0,0,0,.15)",h.style.color=e?"rgba(255,255,255,.8)":"rgba(0,0,0,.6)"}function q(e){const n=e.getBoundingClientRect();a.style.left=`${n.right-24-p.badgeOffset}px`,a.style.top=`${n.top+p.badgeOffset}px`}function R(e,n){const t=p.imgPad*2,r=22,o=Math.floor(window.innerWidth*p.maxWRatio)-t,s=Math.floor(window.innerHeight*p.maxHRatio)-t-r,c=e/n;let d,f;return c>=1?(d=Math.min(o,e),f=d/c,f>s&&(f=s,d=f*c)):(f=Math.min(s,n),d=f*c,d>o&&(d=o,f=d/c)),{pw:Math.round(d),ph:Math.round(f)}}function F(e,n){if(!u)return;const t=u.getBoundingClientRect(),r=p.imgPad,o=22,{pw:s,ph:c}=R(e,n),d=s+r*2,f=c+r*2+o,U=window.innerWidth,V=window.innerHeight;let ie=t.left-w>=d+y?t.left-w-d:U-t.right-w>=d+y?t.right+w:W(t.left+(t.width-d)/2,y,U-d-y),oe=V-t.bottom-w>=f+y?t.bottom+w:t.top-w>=f+y?t.top-w-f:W(t.top+(t.height-f)/2,y,V-f-y);i.style.left=`${ie}px`,i.style.top=`${oe}px`,i.style.width=`${d}px`,M.style.padding=`${r}px`,l.style.width=`${s}px`,l.style.height=`${c}px`}function X(e,n){const t=p.imgPad,r=22,{pw:o,ph:s}=R(e,n),c=o+t*2,d=s+t*2+r;i.style.left=`${W((window.innerWidth-c)/2,y,window.innerWidth-c-y)}px`,i.style.top=`${W((window.innerHeight-d)/2,y,window.innerHeight-d-y)}px`,i.style.width=`${c}px`,M.style.padding=`${t}px`,l.style.width=`${o}px`,l.style.height=`${s}px`}function Y(e){g!==e&&(clearTimeout(T),u=e,q(e),a.style.opacity="1",a.style.pointerEvents=m?"none":"auto")}function I(e,n){if(!e)return;const t=++A;function r(s,c){t!==A||!u||(m?X(s,c):F(s,c),i.style.opacity="1",i.style.transform="scale(1)",i.style.pointerEvents="auto",b.style.pointerEvents="auto",h.style.opacity="1",a.textContent="✕",a.style.background="rgba(220,60,60,0.75)",a.style.pointerEvents="auto",v.textContent=n||`${s} × ${c}`)}const o=x.get(e);if(o&&o.status==="loaded"){l.src!==e&&(l.onload=l.onerror=null,l.src=e),r(o.w,o.h);return}l.onload=l.onerror=null,l.onload=()=>{x.set(e,{status:"loaded",w:l.naturalWidth,h:l.naturalHeight}),r(l.naturalWidth,l.naturalHeight)},l.onerror=()=>{x.set(e,{status:"error",w:0,h:0})},l.src=e}function B(){clearTimeout(L),L=setTimeout(()=>{N()},p.delayHide)}function S(){if(clearTimeout(L),clearTimeout(T),u){const e=u;g=e,setTimeout(()=>{g===e&&(g=null)},300)}N()}function N(){A++,i&&(i.style.opacity="0",i.style.transform="scale(0.95)",i.style.pointerEvents="none",a.style.opacity="0",a.style.pointerEvents="none",h.style.opacity="0",a.textContent="🖼️",a.style.background="rgba(0,0,0,0.45)",b.style.pointerEvents="none",u=null)}function Q(e){if(!e||x.has(e))return;x.set(e,{status:"loading",w:0,h:0});const n=new Image;n.onload=()=>{x.set(e,{status:"loaded",w:n.naturalWidth,h:n.naturalHeight})},n.onerror=()=>{x.set(e,{status:"error",w:0,h:0})},n.src=e}function G(){!u||O||(O=!0,requestAnimationFrame(()=>{if(u&&a&&a.style.opacity==="1"){q(u);const e=x.get(E(u));i&&i.style.opacity==="1"&&e&&e.status==="loaded"&&(m?X(e.w,e.h):F(e.w,e.h))}O=!1}))}function E(e){var n;return e.dataset.previewSrc||e.src||e.currentSrc||((n=e.querySelector("img"))==null?void 0:n.src)||null}function J(e){return e.dataset.previewLabel||e.alt||e.title||null}function $(e){if(e._dpBound)return;let n=0,t=0;const r={mouseenter(){m||g===e||(clearTimeout(T),Q(E(e)),Y(e))},mouseleave(o){m||e.contains(o.relatedTarget)||(g===e&&(g=null),T=setTimeout(()=>{u===e&&B()},p.delayHide))},touchstart(o){if(!m)return;const s=o.touches[0];n=s.clientX,t=s.clientY,Q(E(e))},touchend(o){if(!m||g===e)return;const s=o.changedTouches[0];if(Math.abs(s.clientX-n)<10&&Math.abs(s.clientY-t)<10){Y(e);const c=E(e);c&&I(c,J(e))}}};Object.entries(r).forEach(([o,s])=>{e.addEventListener(o,s,o.startsWith("touch")&&o!=="touchend"?{passive:!0}:!1)}),e._dpBound=!0,e._dpHandlers=r}function K(e){!e||!e._dpBound||(Object.entries(e._dpHandlers||{}).forEach(([n,t])=>{e.removeEventListener(n,t)}),delete e._dpBound,delete e._dpHandlers)}function ee(e){document.querySelectorAll(e).forEach($)}function te(e="[data-preview]"){_=e,Z(),document.querySelectorAll(e).forEach($),window.addEventListener("scroll",G,{capture:!0,passive:!0}),P=new MutationObserver(n=>{n.forEach(t=>{t.addedNodes.forEach(r=>{var o,s;r.nodeType===1&&((o=r.matches)!=null&&o.call(r,e)&&$(r),(s=r.querySelectorAll)==null||s.call(r,e).forEach($))})})}),P.observe(document.body,{childList:!0,subtree:!0})}function ne(){P==null||P.disconnect(),P=null,document.querySelectorAll(_).forEach(K),window.removeEventListener("scroll",G,{capture:!0,passive:!0}),C.removeEventListener("change",z),D.removeEventListener("change",j),b==null||b.remove(),b=null,i=null,M=null,l=null,v=null,h=null,a=null,x.clear(),clearTimeout(L),clearTimeout(T),g=null,u=null}function H(e,n={}){const t=document.createElement(e);return Object.entries(n).forEach(([r,o])=>{r==="style"?t.style.cssText=o:r.startsWith("aria-")?t.setAttribute(r,o):t[r]=o}),t}function W(e,n,t){return Math.max(n,Math.min(e,t))}return{init:te,bind:$,unbind:K,bindAll:ee,destroy:ne,config:p}})()}));

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "data-preview",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "AI-native semantic preview runtime for modern web.",
   "keywords": ["image preview", "big image", "semantic protocol", "ai-native","data preview protocol"],
   "type": "module",
 
   "main": "./dist/data-preview.umd.js",
-  "module": "./dist/data-preview.js",
+  "module": "./dist/data-preview.es.js",
 
   "exports": {
     ".": {
-      "import": "./dist/data-preview.js",
+      "import": "./dist/data-preview.es.js",
       "default": "./dist/data-preview.umd.js"
     }
   },
@@ -34,7 +34,7 @@
     "type": "git",
     "url": "https://github.com/doc-war/data-preview"
   },
-  "homepage": "https://doc-war.com/data-preview",
+  "homepage": "https://doc-war.com",
 
   "license": "MIT"
 }