data-preview 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 YOUR_NAME
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,216 @@
+# data-preview
+
+AI-native semantic preview runtime for modern web.
+
+一个零依赖、框架无关、支持 AI 生成页面的智能预览运行时。
+
+------
+
+## Features
+
+- Zero Dependency
+- Framework Agnostic
+- Hover Preview（PC）/ Long Press Preview（Mobile）
+- Smart Positioning — 自动适应窗口边界与图片比例
+- SPA Compatible — 内置 `destroy()` 支持路由卸载
+- Auto Dark Mode
+- Dynamic DOM — 内置 MutationObserver，动态内容自动绑定
+- Semantic Protocol Driven
+
+------
+
+## Install
+
+```bash
+npm install data-preview
+```
+
+------
+
+## Usage
+
+#### CDN方式
+
+直接集成
+
+```html
+<script src="https://unpkg.com/data-preview/dist/data-preview.umd.js"></script>
+<script>
+  DataPreview.init()
+</script>
+```
+
+#### ESM
+
+现在模块化集成，需要编译
+
+##### Native HTML
+
+```html
+<img src="./thumb.jpg" data-preview />
+
+<script type="module">
+  import DataPreview from 'data-preview'
+  DataPreview.init()
+</script>
+```
+
+##### React
+
+```jsx
+import { useEffect } from 'react'
+import DataPreview from 'data-preview'
+
+export default function App() {
+  useEffect(() => {
+    DataPreview.init()
+    return () => DataPreview.destroy()
+  }, [])
+
+  return <img src="/thumb.jpg" data-preview data-preview-src="/large.jpg" />
+}
+```
+
+##### Vue
+
+```vue
+<script setup>
+import { onMounted, onUnmounted } from 'vue'
+import DataPreview from 'data-preview'
+
+onMounted(() => DataPreview.init())
+onUnmounted(() => DataPreview.destroy())
+</script>
+
+<template>
+  <img src="/thumb.jpg" data-preview data-preview-src="/large.jpg" />
+</template>
+```
+
+------
+
+## Semantic Protocol
+
+data-preview 基于 `data-preview` 语义协议工作，只需在元素上声明属性，runtime 自动增强交互能力。
+
+#### 最简用法
+
+```html
+<img src="demo.jpg" data-preview />
+```
+
+#### 原图与缩略图分离
+
+```html
+<img src="thumb.jpg" data-preview data-preview-src="large.jpg" />
+```
+
+#### 自定义标注
+
+```html
+<img src="demo.jpg" data-preview data-preview-label="产品展示图" />
+```
+
+#### 非 img 元素
+
+```html
+<div data-preview data-preview-src="large.jpg">
+  <img src="thumb.jpg" />
+</div>
+```
+
+------
+
+## API
+
+#### `DataPreview.init(selector?)`
+
+全局初始化。扫描页面中所有匹配元素并绑定，同时启动 MutationObserver 监听后续动态插入的元素。
+
+```js
+DataPreview.init()                      // 默认绑定 [data-preview]
+DataPreview.init('.product-card')       // 自定义选择器
+```
+
+#### `DataPreview.bind(el)`
+
+手动绑定单个元素，幂等，重复调用无副作用。
+
+```js
+DataPreview.bind(document.querySelector('.my-img'))
+```
+
+#### `DataPreview.bindAll(selector)`
+
+手动批量绑定，适合虚拟列表、分页加载等场景（此时建议关闭 MutationObserver 自动绑定）。
+
+```js
+DataPreview.bindAll('.product-list img')
+```
+
+#### `DataPreview.unbind(el)`
+
+解绑单个元素，移除所有事件监听。
+
+```js
+DataPreview.unbind(el)
+```
+
+#### `DataPreview.destroy()`
+
+完全销毁 runtime，清理 DOM、事件监听、MutationObserver、预加载缓存。适用于 SPA 路由切换、微前端卸载。
+
+```js
+DataPreview.destroy()
+```
+
+------
+
+## Config
+
+在 `init()` 前修改配置项：
+
+```js
+DataPreview.config.imgPad = 12
+DataPreview.config.maxWRatio = 0.85
+DataPreview.init()
+```
+
+| 配置项              | 默认值 | 说明                     |
+| ------------------- | ------ | ------------------------ |
+| `imgPad`            | `8`    | 预览框内边距 px          |
+| `maxWRatio`         | `0.9`  | 预览框最大宽度占窗口比例 |
+| `maxHRatio`         | `0.85` | 预览框最大高度占窗口比例 |
+| `delayHide`         | `120`  | 鼠标离开后隐藏延迟 ms    |
+| `longPressDuration` | `480`  | 移动端长按触发时长 ms    |
+
+------
+
+## Mobile
+
+移动端通过 `(pointer: coarse)` 自动识别触摸设备，采用长按触发预览，点击遮罩或右上角 ✕ 关闭。无需额外配置。
+
+------
+
+## TypeScript
+
+包含内置类型声明，无需单独安装 `@types`。
+
+```ts
+import DataPreview from 'data-preview'
+
+DataPreview.config.imgPad = 12
+DataPreview.init()
+```
+
+------
+
+## Browser Support
+
+Chrome、Edge、Safari、Firefox 所有现代浏览器。
+
+------
+
+## License
+
+MIT

package/dist/data-preview.es.js

@@ -0,0 +1,206 @@
+const ee = (() => {
+  const x = {
+    imgPad: 8,
+    maxWRatio: 0.9,
+    maxHRatio: 0.85,
+    delayHide: 120,
+    longPressDuration: 480,
+    badgeOffset: 6
+  }, y = 16, b = 12;
+  let h, i, H, d, m, p, a, M = null, w = null, L = null, E = null, _ = 0, u = null;
+  const v = /* @__PURE__ */ new Map();
+  let g = window.matchMedia("(pointer: coarse)").matches;
+  const z = window.matchMedia("(prefers-color-scheme: dark)");
+  window.matchMedia("(pointer: coarse)").addEventListener("change", (e) => {
+    g = e.matches;
+  });
+  function J() {
+    h || (h = T("div", {
+      style: "position:fixed;inset:0;z-index:99999;pointer-events:none;"
+    }), a = T("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);
+      `
+    }), a.textContent = "🖼️", i = T("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 = T("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(), q();
+    }), p.addEventListener("touchend", (e) => {
+      e.stopPropagation(), q();
+    }), H = T("div", { style: "position:relative;" }), d = T("img", { style: "display:block;", alt: "preview" }), m = T("div", { style: "font-size:11px;padding:5px 10px;white-space:nowrap;" }), H.append(d, p), i.append(H, m), h.append(a, i), document.body.appendChild(h), a.addEventListener("mouseenter", () => {
+      if (clearTimeout(M), clearTimeout(w), !u) return;
+      const e = O(u), n = I(u);
+      e && j(e, n);
+    }), a.addEventListener("mouseleave", C), i.addEventListener("mouseenter", () => {
+      clearTimeout(M), clearTimeout(w), g || (p.style.opacity = "1");
+    }), i.addEventListener("mouseleave", () => {
+      g || (p.style.opacity = "0"), C();
+    }), 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 D(e) {
+    const n = e.getBoundingClientRect(), t = x.badgeOffset;
+    a.style.left = n.right - 24 - t + "px", a.style.top = n.top + t + "px";
+  }
+  function R(e, n) {
+    const t = x.imgPad * 2, o = m.offsetHeight || 22, r = Math.floor(window.innerWidth * x.maxWRatio) - t, c = Math.floor(window.innerHeight * x.maxHRatio) - t - o, f = e / n;
+    let s, l;
+    return f >= 1 ? (s = Math.min(r, e), l = s / f, l > c && (l = c, s = l * f)) : (l = Math.min(c, n), s = l * f, s > r && (s = r, l = s / f)), { pw: Math.round(s), ph: Math.round(l) };
+  }
+  function K(e, n) {
+    if (!u) return;
+    const t = u.getBoundingClientRect(), o = x.imgPad, r = m.offsetHeight || 22, { pw: c, ph: f } = R(e, n), s = c + o * 2, l = f + o * 2 + r, S = window.innerWidth, G = window.innerHeight;
+    let W;
+    t.left - b >= s + y ? W = t.left - b - s : S - t.right - b >= s + y ? W = t.right + b : W = k(t.left + (t.width - s) / 2, y, S - s - y);
+    let B;
+    G - t.bottom - b >= l + y ? B = t.bottom + b : t.top - b >= l + y ? B = t.top - b - l : B = k(t.top + (t.height - l) / 2, y, G - l - y), i.style.left = W + "px", i.style.top = B + "px", i.style.width = s + "px", H.style.padding = o + "px", d.style.width = c + "px", d.style.height = f + "px";
+  }
+  function U(e, n) {
+    const t = x.imgPad, o = m.offsetHeight || 22, { pw: r, ph: c } = R(e, n), f = r + t * 2, s = c + t * 2 + o, l = window.innerWidth, S = window.innerHeight;
+    i.style.left = k((l - f) / 2, y, l - f - y) + "px", i.style.top = k((S - s) / 2, y, S - s - y) + "px", i.style.width = f + "px", H.style.padding = t + "px", d.style.width = r + "px", d.style.height = c + "px";
+  }
+  function V(e) {
+    clearTimeout(w), !(u === e && a.style.opacity === "1") && (u = e, D(e), a.style.opacity = "1", a.style.pointerEvents = "auto", h.style.pointerEvents = "auto");
+  }
+  function j(e, n) {
+    const t = ++_;
+    m.textContent = n || "";
+    function o(r, c) {
+      t === _ && (g ? U(r, c) : K(r, c), i.style.opacity = "1", i.style.transform = "scale(1)", i.style.pointerEvents = "auto", g && (p.style.opacity = "1"), m.textContent = n || r + " × " + c);
+    }
+    if (v.get(e) === "loaded" && d.src === e) {
+      o(d.naturalWidth, d.naturalHeight);
+      return;
+    }
+    d.src = e, d.onload = () => {
+      v.set(e, "loaded"), o(d.naturalWidth, d.naturalHeight);
+    }, d.onerror = () => {
+      v.set(e, "error");
+    };
+  }
+  function C() {
+    clearTimeout(M), M = setTimeout(() => {
+      i.style.opacity = "0", i.style.transform = "scale(0.95)", i.style.pointerEvents = "none", a.style.opacity = "0", a.style.pointerEvents = "none", h.style.pointerEvents = "none", p.style.opacity = "0", u = null;
+    }, x.delayHide);
+  }
+  function q() {
+    clearTimeout(M), clearTimeout(w), ++_, i.style.opacity = "0", i.style.transform = "scale(0.95)", i.style.pointerEvents = "none", a.style.opacity = "0", a.style.pointerEvents = "none", h.style.pointerEvents = "none", p.style.opacity = "0", u = null;
+  }
+  function Q(e) {
+    if (!e || v.has(e)) return;
+    v.set(e, "loading");
+    const n = new Image();
+    n.onload = () => v.set(e, "loaded"), n.onerror = () => v.set(e, "error"), n.src = e;
+  }
+  function F() {
+    u && a.style.opacity === "1" && D(u);
+  }
+  function O(e) {
+    var n;
+    return e.dataset.previewSrc || e.src || e.currentSrc || ((n = e.querySelector("img")) == null ? void 0 : n.src) || null;
+  }
+  function I(e) {
+    return e.dataset.previewLabel || e.alt || e.title || null;
+  }
+  function P(e) {
+    if (e._dpBound) return;
+    const n = {
+      mouseenter() {
+        g || (clearTimeout(w), !(u === e && a.style.opacity === "1") && (Q(O(e)), V(e)));
+      },
+      mouseleave(t) {
+        g || e.contains(t.relatedTarget) || (w = setTimeout(() => {
+          u === e && C();
+        }, x.delayHide));
+      },
+      touchstart(t) {
+        if (!g) return;
+        const o = O(e);
+        o && (Q(o), L = setTimeout(() => {
+          u = e, j(o, I(e));
+        }, x.longPressDuration));
+      },
+      touchend() {
+        clearTimeout(L);
+      },
+      touchmove() {
+        clearTimeout(L);
+      },
+      touchcancel() {
+        clearTimeout(L);
+      },
+      contextmenu(t) {
+        g && t.preventDefault();
+      }
+    };
+    Object.entries(n).forEach(([t, o]) => e.addEventListener(t, o)), e._dpBound = !0, e._dpHandlers = n;
+  }
+  function N(e) {
+    e._dpBound && (Object.entries(e._dpHandlers).forEach(
+      ([n, t]) => e.removeEventListener(n, t)
+    ), e._dpBound = !1, e._dpHandlers = null, e._dpMoveTimer = null);
+  }
+  function X(e) {
+    document.querySelectorAll(e).forEach((n) => P(n));
+  }
+  function Y(e = "[data-preview]") {
+    J(), document.querySelectorAll(e).forEach((n) => P(n)), window.addEventListener("scroll", F, !0), E = new MutationObserver((n) => {
+      n.forEach((t) => {
+        t.addedNodes.forEach((o) => {
+          var r, c;
+          o.nodeType === 1 && ((r = o.matches) != null && r.call(o, e) && P(o), (c = o.querySelectorAll) == null || c.call(o, e).forEach((f) => P(f)));
+        });
+      });
+    }), E.observe(document.body, { childList: !0, subtree: !0 });
+  }
+  function Z() {
+    E == null || E.disconnect(), E = null, document.querySelectorAll("[data-preview]").forEach((e) => N(e)), window.removeEventListener("scroll", F, !0), z.removeEventListener("change", A), h == null || h.remove(), h = i = H = d = m = p = a = null, v.clear(), clearTimeout(M), clearTimeout(w), clearTimeout(L);
+  }
+  function T(e, n = {}) {
+    const t = document.createElement(e);
+    return Object.entries(n).forEach(([o, r]) => {
+      o === "style" ? t.style.cssText = r : t[o] = r;
+    }), t;
+  }
+  function k(e, n, t) {
+    return Math.max(n, Math.min(e, t));
+  }
+  return { init: Y, bind: P, unbind: N, bindAll: X, destroy: Z, config: x };
+})();
+export {
+  ee as default
+};

package/dist/data-preview.umd.js

@@ -0,0 +1,32 @@
+(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:120,longPressDuration:480,badgeOffset:6},h=16,g=12;let m,i,H,d,x,u,a,P=null,w=null,E=null,M=null,z=0,f=null;const v=new Map;let b=window.matchMedia("(pointer: coarse)").matches;const A=window.matchMedia("(prefers-color-scheme: dark)");window.matchMedia("(pointer: coarse)").addEventListener("change",e=>{b=e.matches});function K(){m||(m=T("div",{style:"position:fixed;inset:0;z-index:99999;pointer-events:none;"}),a=T("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);
+      `}),a.textContent="🖼️",i=T("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;
+      `}),u=T("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;
+      `}),u.textContent="✕",u.setAttribute("aria-label","关闭预览"),u.addEventListener("click",e=>{e.stopPropagation(),Q()}),u.addEventListener("touchend",e=>{e.stopPropagation(),Q()}),H=T("div",{style:"position:relative;"}),d=T("img",{style:"display:block;",alt:"preview"}),x=T("div",{style:"font-size:11px;padding:5px 10px;white-space:nowrap;"}),H.append(d,u),i.append(H,x),m.append(a,i),document.body.appendChild(m),a.addEventListener("mouseenter",()=>{if(clearTimeout(P),clearTimeout(w),!f)return;const e=O(f),n=N(f);e&&q(e,n)}),a.addEventListener("mouseleave",D),i.addEventListener("mouseenter",()=>{clearTimeout(P),clearTimeout(w),b||(u.style.opacity="1")}),i.addEventListener("mouseleave",()=>{b||(u.style.opacity="0"),D()}),C(),A.addEventListener("change",C))}function C(){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)",x.style.background=e?"rgba(255,255,255,.06)":"rgba(0,0,0,.04)",x.style.color=e?"rgba(255,255,255,.4)":"rgba(0,0,0,.4)",x.style.borderTop=e?"1px solid rgba(255,255,255,.08)":"1px solid rgba(0,0,0,.06)",u.style.background=e?"rgba(255,255,255,.15)":"rgba(0,0,0,.15)",u.style.color=e?"rgba(255,255,255,.8)":"rgba(0,0,0,.6)"}function j(e){const n=e.getBoundingClientRect(),t=p.badgeOffset;a.style.left=n.right-24-t+"px",a.style.top=n.top+t+"px"}function R(e,n){const t=p.imgPad*2,o=x.offsetHeight||22,r=Math.floor(window.innerWidth*p.maxWRatio)-t,c=Math.floor(window.innerHeight*p.maxHRatio)-t-o,y=e/n;let s,l;return y>=1?(s=Math.min(r,e),l=s/y,l>c&&(l=c,s=l*y)):(l=Math.min(c,n),s=l*y,s>r&&(s=r,l=s/y)),{pw:Math.round(s),ph:Math.round(l)}}function U(e,n){if(!f)return;const t=f.getBoundingClientRect(),o=p.imgPad,r=x.offsetHeight||22,{pw:c,ph:y}=R(e,n),s=c+o*2,l=y+o*2+r,S=window.innerWidth,J=window.innerHeight;let B;t.left-g>=s+h?B=t.left-g-s:S-t.right-g>=s+h?B=t.right+g:B=W(t.left+(t.width-s)/2,h,S-s-h);let _;J-t.bottom-g>=l+h?_=t.bottom+g:t.top-g>=l+h?_=t.top-g-l:_=W(t.top+(t.height-l)/2,h,J-l-h),i.style.left=B+"px",i.style.top=_+"px",i.style.width=s+"px",H.style.padding=o+"px",d.style.width=c+"px",d.style.height=y+"px"}function V(e,n){const t=p.imgPad,o=x.offsetHeight||22,{pw:r,ph:c}=R(e,n),y=r+t*2,s=c+t*2+o,l=window.innerWidth,S=window.innerHeight;i.style.left=W((l-y)/2,h,l-y-h)+"px",i.style.top=W((S-s)/2,h,S-s-h)+"px",i.style.width=y+"px",H.style.padding=t+"px",d.style.width=r+"px",d.style.height=c+"px"}function X(e){clearTimeout(w),!(f===e&&a.style.opacity==="1")&&(f=e,j(e),a.style.opacity="1",a.style.pointerEvents="auto",m.style.pointerEvents="auto")}function q(e,n){const t=++z;x.textContent=n||"";function o(r,c){t===z&&(b?V(r,c):U(r,c),i.style.opacity="1",i.style.transform="scale(1)",i.style.pointerEvents="auto",b&&(u.style.opacity="1"),x.textContent=n||r+" × "+c)}if(v.get(e)==="loaded"&&d.src===e){o(d.naturalWidth,d.naturalHeight);return}d.src=e,d.onload=()=>{v.set(e,"loaded"),o(d.naturalWidth,d.naturalHeight)},d.onerror=()=>{v.set(e,"error")}}function D(){clearTimeout(P),P=setTimeout(()=>{i.style.opacity="0",i.style.transform="scale(0.95)",i.style.pointerEvents="none",a.style.opacity="0",a.style.pointerEvents="none",m.style.pointerEvents="none",u.style.opacity="0",f=null},p.delayHide)}function Q(){clearTimeout(P),clearTimeout(w),++z,i.style.opacity="0",i.style.transform="scale(0.95)",i.style.pointerEvents="none",a.style.opacity="0",a.style.pointerEvents="none",m.style.pointerEvents="none",u.style.opacity="0",f=null}function F(e){if(!e||v.has(e))return;v.set(e,"loading");const n=new Image;n.onload=()=>v.set(e,"loaded"),n.onerror=()=>v.set(e,"error"),n.src=e}function I(){f&&a.style.opacity==="1"&&j(f)}function O(e){var n;return e.dataset.previewSrc||e.src||e.currentSrc||((n=e.querySelector("img"))==null?void 0:n.src)||null}function N(e){return e.dataset.previewLabel||e.alt||e.title||null}function L(e){if(e._dpBound)return;const n={mouseenter(){b||(clearTimeout(w),!(f===e&&a.style.opacity==="1")&&(F(O(e)),X(e)))},mouseleave(t){b||e.contains(t.relatedTarget)||(w=setTimeout(()=>{f===e&&D()},p.delayHide))},touchstart(t){if(!b)return;const o=O(e);o&&(F(o),E=setTimeout(()=>{f=e,q(o,N(e))},p.longPressDuration))},touchend(){clearTimeout(E)},touchmove(){clearTimeout(E)},touchcancel(){clearTimeout(E)},contextmenu(t){b&&t.preventDefault()}};Object.entries(n).forEach(([t,o])=>e.addEventListener(t,o)),e._dpBound=!0,e._dpHandlers=n}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 Y(e){document.querySelectorAll(e).forEach(n=>L(n))}function Z(e="[data-preview]"){K(),document.querySelectorAll(e).forEach(n=>L(n)),window.addEventListener("scroll",I,!0),M=new MutationObserver(n=>{n.forEach(t=>{t.addedNodes.forEach(o=>{var r,c;o.nodeType===1&&((r=o.matches)!=null&&r.call(o,e)&&L(o),(c=o.querySelectorAll)==null||c.call(o,e).forEach(y=>L(y)))})})}),M.observe(document.body,{childList:!0,subtree:!0})}function $(){M==null||M.disconnect(),M=null,document.querySelectorAll("[data-preview]").forEach(e=>G(e)),window.removeEventListener("scroll",I,!0),A.removeEventListener("change",C),m==null||m.remove(),m=i=H=d=x=u=a=null,v.clear(),clearTimeout(P),clearTimeout(w),clearTimeout(E)}function T(e,n={}){const t=document.createElement(e);return Object.entries(n).forEach(([o,r])=>{o==="style"?t.style.cssText=r:t[o]=r}),t}function W(e,n,t){return Math.max(n,Math.min(e,t))}return{init:Z,bind:L,unbind:G,bindAll:Y,destroy:$,config:p}})()}));

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "data-preview",
+  "version": "1.0.0",
+  "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",
+
+  "exports": {
+    ".": {
+      "import": "./dist/data-preview.js",
+      "default": "./dist/data-preview.umd.js"
+    }
+  },
+
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "vite build"
+  },
+
+  "devDependencies": {
+    "vite": "^6.0.0"
+  },
+
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/doc-war/data-preview"
+  },
+  "homepage": "https://github.com/doc-war/data-preview#readme",
+
+  "license": "MIT"
+}