@pointylab/dsh 0.0.0-stage → 0.4.4

package/pet/extension/pick.js

@@ -0,0 +1,391 @@
+// 指认模式：只在Pointy叫的时候注入一次，选完、Esc 或右键就把自己拆掉。
+// 高亮光标下"有意义的一块"（一条评论、一张卡片、一段话、一张图……），点一下把它的内容交给Pointy。
+(() => {
+  // 上一次指认要是没收尾（Pointy那边超时、扩展重载过），先把它拆掉再开始，免得这一页从此晃不出来
+  window.__pointyPickCleanup?.()
+  window.__pointyPick = true
+
+  const MAX_TEXT = 4000
+
+  // ---------- shadow DOM 工具 ----------
+  const parentOf = (el) => el.parentElement ?? (el.getRootNode() instanceof ShadowRoot ? el.getRootNode().host : null)
+
+  // 登录墙、半透明蒙层这类盖在内容上面的东西，指认时要穿过去
+  const OVERLAY = /mask|overlay|wall|backdrop|curtain|scrim/i
+  const isOverlay = (el) => OVERLAY.test(el.id ?? '') || (typeof el.className === 'string' && OVERLAY.test(el.className))
+
+  /** 光标下最上面的一个"不是蒙层"的元素，穿过 shadow DOM */
+  function topAt(root, x, y, exclude) {
+    return root.elementsFromPoint(x, y).find(el => el !== exclude && !isOverlay(el))
+  }
+
+  function deepElementFromPoint(x, y) {
+    let el = topAt(document, x, y)
+    while (el?.shadowRoot) {
+      const inner = topAt(el.shadowRoot, x, y, el)
+      if (!inner || inner === el) break
+      el = inner
+    }
+    return el
+  }
+
+  function* deepWalk(root) {
+    const stack = [root]
+    while (stack.length) {
+      const node = stack.pop()
+      yield node
+      if (node.shadowRoot) stack.push(node.shadowRoot)
+      const kids = node.children ?? []
+      for (let i = kids.length - 1; i >= 0; i--) stack.push(kids[i])
+    }
+  }
+
+  const deepQuery = (root, selector) => { for (const n of deepWalk(root)) if (n.matches?.(selector)) return n; return null }
+  const deepQueryAll = (root, selector, limit = 20) => { const out = []; for (const n of deepWalk(root)) { if (n.matches?.(selector)) out.push(n); if (out.length >= limit) break } return out }
+
+  const SKIP = new Set(['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEMPLATE', 'SVG'])
+  const BLOCKY = /^(P|DIV|LI|TR|BR|H[1-6]|ARTICLE|SECTION|BLOCKQUOTE|PRE|TABLE|UL|OL)$/
+
+  /** innerText 进不了 shadow DOM（B 站评论全在里面），自己拼 */
+  function deepText(root) {
+    let out = ''
+    const visit = (node) => {
+      if (out.length > MAX_TEXT) return
+      if (node.nodeType === Node.TEXT_NODE) { out += node.textContent; return }
+      if (node.nodeType !== Node.ELEMENT_NODE && node.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) return
+      if (SKIP.has(node.nodeName)) return
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const style = getComputedStyle(node)
+        if (style.display === 'none' || style.visibility === 'hidden') return
+        if (node.tagName === 'IMG' && node.alt) out += `[图:${node.alt}]`
+      }
+      const children = node.shadowRoot ? node.shadowRoot.childNodes : node.childNodes
+      for (const c of children) visit(c)
+      // 有 shadowRoot 时 slot 进来的 light DOM 也要
+      if (node.shadowRoot) for (const c of node.childNodes) visit(c)
+      if (BLOCKY.test(node.nodeName)) out += '\n'
+    }
+    visit(root)
+    return out.replace(/[ \t]+\n/g, '\n').replace(/\n{3,}/g, '\n\n').trim().slice(0, MAX_TEXT)
+  }
+
+  // ---------- 找"有意义的一块" ----------
+  const SEMANTIC_TAG = /^(ARTICLE|LI|TR|PRE|BLOCKQUOTE|FIGURE|IMG|VIDEO|P|H[1-6]|TABLE|DETAILS|DIALOG)$/
+  const SEMANTIC_CLASS = /comment|reply|card|item|post|feed|message|msg|tweet|issue|timeline|entry|thread|bubble|answer|review/i
+
+  function isSemantic(el) {
+    if (SEMANTIC_TAG.test(el.tagName)) return true
+    if (el.tagName.includes('-') && /comment|reply|card|item|post|thread/i.test(el.tagName)) return true // web component
+    const role = el.getAttribute?.('role')
+    if (role && /article|listitem|row|comment|dialog/.test(role)) return true
+    if (typeof el.className === 'string' && SEMANTIC_CLASS.test(el.className)) return true
+    return [...(el.attributes ?? [])].some(a => /^data-.*(id|key)$/i.test(a.name))
+  }
+
+  /** 从光标下的元素往上，收集一串候选块：最小的有意义块在前，整页在后 */
+  function chainAt(x, y) {
+    const chain = []
+    for (let el = deepElementFromPoint(x, y); el && el !== document.documentElement; el = parentOf(el)) {
+      if (el === document.body) break
+      const r = el.getBoundingClientRect()
+      if (r.width < 16 || r.height < 12) continue
+      if (r.width >= innerWidth * 0.98 && r.height >= innerHeight * 0.9) break // 快到整页了
+      if (isSemantic(el) || el.tagName === 'IMG' || el.tagName === 'VIDEO') chain.push(el)
+    }
+    if (!chain.length) {
+      const el = deepElementFromPoint(x, y)
+      if (el && el !== document.body) chain.push(el)
+    }
+    return chain
+  }
+
+  // ---------- 站点适配器 ----------
+  const pickText = (root, selector) => { const n = root && deepQuery(root, selector); return n ? deepText(n).slice(0, 300) : '' }
+
+  function biliAdapter(el) {
+    const info = { site: 'bilibili' }
+    const bv = location.pathname.match(/\/video\/(BV\w+)/)?.[1]
+    if (bv) {
+      info.page = { 类型: '视频页', BV号: bv, 标题: document.querySelector('h1')?.textContent.trim() ?? document.title, UP主: document.querySelector('.up-name, .up-detail-top a')?.textContent.trim() ?? '' }
+      const video = document.querySelector('video')
+      if (video) info.page.播放到 = `${Math.floor(video.currentTime / 60)}:${String(Math.floor(video.currentTime % 60)).padStart(2, '0')}`
+    }
+    for (let n = el; n; n = parentOf(n)) {
+      if (/^BILI-COMMENT-(REPLY-)?RENDERER$|^BILI-COMMENT-THREAD-RENDERER$/.test(n.tagName) || (typeof n.className === 'string' && /reply-item|sub-reply-item/.test(n.className))) {
+        const userLink = deepQuery(n, 'a[href*="space.bilibili.com"]')
+        info.kind = 'comment'
+        info.fields = {
+          用户: pickText(n, '#user-name, .user-name, .sub-user-name') || userLink?.textContent.trim() || '',
+          uid: userLink?.href.match(/space\.bilibili\.com\/(\d+)/)?.[1] ?? '',
+          时间: pickText(n, '#pubdate, .reply-time, .sub-reply-time'),
+          点赞: pickText(n, '#like #count, .reply-like span, .sub-reply-like span'),
+          正文: pickText(n, '#contents, bili-rich-text, .reply-content, .sub-reply-content'),
+        }
+        return info
+      }
+      const videoLink = n.matches?.('a[href*="/video/BV"]') ? n : null
+      if (videoLink || (typeof n.className === 'string' && /video-card|bili-video-card|feed-card/.test(n.className))) {
+        const a = videoLink ?? deepQuery(n, 'a[href*="/video/BV"]')
+        if (a) {
+          info.kind = 'video-card'
+          info.fields = {
+            BV号: a.href.match(/BV\w+/)?.[0] ?? '',
+            标题: a.title || pickText(n, '[title], .bili-video-card__info--tit, h3') || a.textContent.trim(),
+            UP主: pickText(n, '.bili-video-card__info--author, .up-name, .name'),
+            链接: a.href,
+          }
+          return info
+        }
+      }
+    }
+    return info
+  }
+
+  function githubAdapter(el) {
+    const [, owner, repo, type, num] = location.pathname.split('/')
+    const info = { site: 'github', page: { 仓库: owner && repo ? `${owner}/${repo}` : '' } }
+    if ((type === 'issues' || type === 'pull') && num) { info.page.类型 = type === 'pull' ? 'PR' : 'issue'; info.page.编号 = `#${num}`; info.page.标题 = document.querySelector('.js-issue-title, bdi.markdown-title, [data-testid="issue-title"]')?.textContent.trim() ?? '' }
+    const line = el.closest?.('[data-line-number], td.blob-code, .react-code-line-contents, [id^="LC"]')
+    if (line) {
+      const no = line.getAttribute('data-line-number') ?? line.id?.replace(/^LC/, '') ?? ''
+      info.kind = 'code-line'
+      info.fields = { 文件: location.pathname.split('/blob/')[1]?.split('/').slice(1).join('/') ?? '', 行号: no, 链接: `${location.origin}${location.pathname}#L${no}` }
+      return info
+    }
+    // 新版 React 页面：正文是 .react-issue-body，评论是 .react-issue-comment；旧版页面的选择器留着兜底
+    const comment = el.closest?.('.react-issue-body, .react-issue-comment, .timeline-comment, .js-comment-container, .TimelineItem')
+    if (comment) {
+      const permalink = comment.querySelector('[data-testid="issue-body-header-link"], a[href*="#issuecomment-"], a[href*="#issue-"], a[href*="#discussion_r"], a.js-timestamp')
+      const author = comment.querySelector('[data-testid="issue-body-header-author"], [data-testid="avatar-link"], a.author, .author')
+      info.kind = comment.matches('.react-issue-body') ? 'issue-body' : 'comment'
+      info.fields = {
+        作者: author?.getAttribute('href')?.split('/').filter(Boolean).pop() ?? author?.textContent.trim() ?? '',
+        时间: comment.querySelector('relative-time')?.getAttribute('datetime') ?? '',
+        链接: permalink?.href ?? location.href,
+        正文: deepText(comment.querySelector('.markdown-body, [data-testid="markdown-body"]') ?? comment).slice(0, 3000),
+      }
+    }
+    return info
+  }
+
+  function genericInfo(el) {
+    const kind =
+      el.tagName === 'IMG' ? 'image' :
+      el.tagName === 'VIDEO' ? 'video' :
+      el.tagName === 'PRE' || el.querySelector?.('pre, code') && el.tagName !== 'ARTICLE' ? 'code' :
+      el.tagName === 'TR' ? 'table-row' :
+      /^H[1-6]$/.test(el.tagName) ? 'heading' :
+      el.tagName === 'A' ? 'link' :
+      el.tagName === 'P' ? 'paragraph' : 'block'
+    const links = deepQueryAll(el, 'a[href]', 8).map(a => ({ text: a.textContent.trim().slice(0, 60), href: a.href })).filter(l => l.href.startsWith('http'))
+    if (el.tagName === 'A' && el.href) links.unshift({ text: el.textContent.trim().slice(0, 60), href: el.href })
+    const images = (el.tagName === 'IMG' ? [el] : deepQueryAll(el, 'img', 6)).map(i => ({ src: i.currentSrc || i.src, alt: i.alt })).filter(i => i.src && !i.src.startsWith('data:'))
+    return { kind, links, images }
+  }
+
+  function describe(el) {
+    const host = location.hostname
+    const adapter = /bilibili\.com$/.test(host) ? biliAdapter(el) : /github\.com$/.test(host) ? githubAdapter(el) : {}
+    const generic = genericInfo(el)
+    const r = el.getBoundingClientRect()
+    return {
+      kind: adapter.kind ?? generic.kind,
+      site: adapter.site ?? host,
+      fields: adapter.fields ?? {},
+      page: adapter.page ?? {},
+      text: el.tagName === 'IMG' ? (el.alt || '') : deepText(el),
+      links: generic.links,
+      images: generic.images,
+      tag: el.tagName.toLowerCase(),
+      rect: { x: r.left, y: r.top, width: r.width, height: r.height },
+      viewport: { width: innerWidth, height: innerHeight, dpr: devicePixelRatio },
+    }
+  }
+
+  // ---------- 已有选区就直接用 ----------
+  const existing = getSelection()?.toString().trim()
+  if (existing) {
+    const range = getSelection().getRangeAt(0)
+    const r = range.getBoundingClientRect()
+    let block = range.commonAncestorContainer
+    if (block.nodeType !== 1) block = block.parentElement
+    chrome.runtime.sendMessage({ type: 'pick-result', result: { ...describe(block), kind: 'selection', text: existing.slice(0, 20000), rect: { x: r.left, y: r.top, width: r.width, height: r.height } } })
+    window.__pointyPick = false
+    return
+  }
+
+  // 上一次指认留着的高亮（卡片还开着）先撤掉
+  window.__pointyHeld?.()
+
+  // ---------- 高亮层：浅蓝圆角描边 + 一圈淡光，跟着光标平滑移动 ----------
+  // 用 transform 移动（走合成层，不触发页面重排），缓动是先快后慢，跟手
+  const box = document.createElement('div')
+  const label = document.createElement('div')
+  // 170ms，落位时轻微过冲回弹（弹性调弱过一次），像被吸过去
+  const EASE = '170ms cubic-bezier(0.34, 1.2, 0.64, 1)'
+  Object.assign(box.style, {
+    position: 'fixed', left: '0', top: '0', zIndex: 2147483647, pointerEvents: 'none', boxSizing: 'border-box',
+    border: '1.5px solid rgba(138, 180, 248, 0.95)', background: 'rgba(138, 180, 248, 0.08)', borderRadius: '8px',
+    boxShadow: '0 0 0 3px rgba(138, 180, 248, 0.16), 0 0 16px 4px rgba(138, 180, 248, 0.28)',
+    opacity: '0', willChange: 'transform, width, height',
+    transition: `transform ${EASE}, width ${EASE}, height ${EASE}, opacity 120ms ease-out`,
+  })
+  // 页面正下方一个"右键或 Esc 退出"的小胶囊；放在 shadow DOM 里，不受网页样式影响
+  Object.assign(label.style, { position: 'fixed', left: '0', top: '0', zIndex: 2147483647, pointerEvents: 'none' })
+  label.attachShadow({ mode: 'open' }).innerHTML = `
+    <style>
+      .pill { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 22px; border-radius: 999px;
+        background: rgba(32, 33, 36, 0.92); color: #fff; font: 16px "Segoe UI", "Microsoft YaHei UI", sans-serif; white-space: nowrap;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); pointer-events: none; }
+      kbd { font: inherit; font-size: 14px; padding: 1px 9px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 7px; }
+      .pill svg { width: 15px; height: 20px; }
+    </style>
+    <div class="pill"><svg viewBox="-1 -1 14 22"><path d="M0 0V17L4 13L7 20L10 18.7L7 12H12Z" fill="#fff"/></svg>右键 或 <kbd>Esc</kbd> 退出</div>`
+  // 指认期间光标换成鲸鱼娘扒着箭头的样子，热点在箭头尖；网页自己设的光标（链接的小手等）一律压住
+  const cursorStyle = document.createElement('style')
+  const cur = (n) => chrome.runtime.getURL(`cursor-${n}.png`)
+  cursorStyle.textContent = `* { cursor: image-set(url("${cur(32)}") 1x, url("${cur(48)}") 1.5x, url("${cur(64)}") 2x) 0 8, default !important; }`
+  document.documentElement.append(box, label, cursorStyle)
+
+  let chain = []
+  let level = 0
+  let levelUp = 0 // 用户用 [ ] 往外扩了几级；鼠标移动时保持这个相对层级（滚轮留给页面滚动）
+  // Pointy告诉的光标屏幕坐标（物理像素），换算成页面坐标；算不准也没关系，鼠标一动就更新
+  const start = window.__pointyStart
+  let lastPoint = start
+    ? { x: start.x / devicePixelRatio - screenX - (outerWidth - innerWidth) / 2, y: start.y / devicePixelRatio - screenY - (outerHeight - innerHeight) }
+    : { x: innerWidth / 2, y: innerHeight / 2 }
+
+  const current = () => chain[Math.min(level, chain.length - 1)]
+  let shown = false
+  function render() {
+    const el = current()
+    if (!el) { box.style.opacity = '0'; shown = false; return }
+    const r = el.getBoundingClientRect()
+    // 第一次出现直接放到位再淡入，不从左上角飞过来
+    if (!shown) box.style.transition = 'opacity 120ms ease-out'
+    Object.assign(box.style, { transform: `translate(${r.left - 3}px, ${r.top - 3}px)`, width: `${r.width + 6}px`, height: `${r.height + 6}px`, opacity: '1' })
+    if (!shown) {
+      shown = true
+      box.getBoundingClientRect()
+      box.style.transition = `transform ${EASE}, width ${EASE}, height ${EASE}, opacity 120ms ease-out`
+    }
+  }
+  function retarget(x, y) {
+    chain = chainAt(x, y)
+    level = Math.min(levelUp, chain.length - 1)
+    render()
+  }
+  const setLevel = (n) => { level = Math.max(0, Math.min(chain.length - 1, n)); levelUp = level; render() }
+
+  function cleanup(keepBox) {
+    clearTimeout(giveUp)
+    chrome.runtime.onMessage?.removeListener(onAbort)
+    removeEventListener('mousemove', onMove, true)
+    removeEventListener('click', onClick, true)
+    removeEventListener('mousedown', onMouseDown, true)
+    removeEventListener('mouseup', swallow, true)
+    removeEventListener('keydown', onKey, true)
+    removeEventListener('contextmenu', onContextMenu, true)
+    removeEventListener('scroll', onScroll, true)
+    cancelAnimationFrame(moveFrame)
+    if (!keepBox) box.remove()
+    label.remove()
+    cursorStyle.remove()
+    window.__pointyPick = false
+    if (window.__pointyPickCleanup === stale) window.__pointyPickCleanup = undefined
+  }
+  const stale = () => cleanup()
+  window.__pointyPickCleanup = stale
+
+  /**
+   * 选中之后高亮框留在那个元素上，直到卡片关掉（Pointy发 pick-release 过来）。
+   * 先藏起来等扩展截完图，扩展发 pick-hold 再显示；页面滚动时跟着元素走。
+   */
+  function hold(el) {
+    const follow = () => {
+      const r = el.getBoundingClientRect()
+      Object.assign(box.style, { transform: `translate(${r.left - 3}px, ${r.top - 3}px)`, width: `${r.width + 6}px`, height: `${r.height + 6}px` })
+    }
+    let holdId // 扩展在 pick-hold 里告诉这次指认的 id，只认同一个 id 的 pick-release
+    const onMsg = (msg) => {
+      if (msg?.type === 'pick-hold') { holdId = msg.reqId; follow(); box.style.transition = 'opacity 120ms ease-out'; box.style.opacity = '1' }
+      else if (msg?.type === 'pick-release' && msg.reqId === holdId) release()
+    }
+    const release = () => {
+      removeEventListener('scroll', follow, true)
+      removeEventListener('resize', follow)
+      chrome.runtime.onMessage?.removeListener(onMsg)
+      clearTimeout(expire)
+      box.remove()
+      if (window.__pointyHeld === release) window.__pointyHeld = undefined
+    }
+    // 万一Pointy那边没通知，5 分钟后自己撤掉
+    const expire = setTimeout(release, 5 * 60 * 1000)
+    addEventListener('scroll', follow, true)
+    addEventListener('resize', follow)
+    chrome.runtime.onMessage?.addListener(onMsg)
+    window.__pointyHeld = release
+  }
+
+  // 一帧最多算一次，鼠标甩得快也不卡
+  let moveFrame = 0
+  const onMove = (e) => {
+    lastPoint = { x: e.clientX, y: e.clientY }
+    if (moveFrame) return
+    moveFrame = requestAnimationFrame(() => {
+      moveFrame = 0
+      retarget(lastPoint.x, lastPoint.y)
+    })
+  }
+  const swallow = (e) => { e.preventDefault(); e.stopPropagation() }
+  // 右键按下就取消；紧跟着的那一次右键菜单吃掉（之后右键照常）
+  function onMouseDown(e) {
+    swallow(e)
+    if (e.button !== 2) return
+    const eat = (ev) => { ev.preventDefault(); ev.stopPropagation(); removeEventListener('contextmenu', eat, true) }
+    addEventListener('contextmenu', eat, true)
+    setTimeout(() => removeEventListener('contextmenu', eat, true), 1500)
+    cancel(e)
+  }
+  function onClick(e) {
+    swallow(e)
+    const el = current()
+    cleanup(!!el)
+    if (!el) return chrome.runtime.sendMessage({ type: 'pick-result', cancelled: true })
+    const result = describe(el)
+    // 高亮框先藏起来，等两帧再让扩展截图，免得截进去；截完扩展会发 pick-hold 让它回来
+    box.style.transition = 'none'
+    box.style.opacity = '0'
+    hold(el)
+    requestAnimationFrame(() => requestAnimationFrame(() => chrome.runtime.sendMessage({ type: 'pick-result', result })))
+  }
+  function cancel(e) {
+    swallow(e)
+    cleanup()
+    chrome.runtime.sendMessage({ type: 'pick-result', cancelled: true })
+  }
+  // 右键 = 取消，同时不让网页弹右键菜单
+  const onContextMenu = (e) => cancel(e)
+  function onKey(e) {
+    if (e.key === 'Escape') cancel(e)
+    else if (e.key === '[') { swallow(e); setLevel(level - 1) }
+    else if (e.key === ']') { swallow(e); setLevel(level + 1) }
+  }
+  // 页面滚动时光标下的东西变了，重新算一下高亮
+  const onScroll = () => retarget(lastPoint.x, lastPoint.y)
+
+  // 没人理就自己撤掉，免得一直拦着这个页面的滚轮和点击；Pointy那边超时也会发 pick-abort 过来
+  const giveUp = setTimeout(() => { cleanup(); chrome.runtime.sendMessage({ type: 'pick-result', cancelled: true }) }, 45_000)
+  const onAbort = (msg) => { if (msg?.type === 'pick-abort') cleanup() }
+  chrome.runtime.onMessage?.addListener(onAbort)
+
+  addEventListener('mousemove', onMove, true)
+  addEventListener('click', onClick, true)
+  addEventListener('mousedown', onMouseDown, true)
+  addEventListener('mouseup', swallow, true)
+  addEventListener('keydown', onKey, true)
+  addEventListener('contextmenu', onContextMenu, true)
+  addEventListener('scroll', onScroll, true)
+  retarget(lastPoint.x, lastPoint.y)
+})()

package/pet/extension/popup.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <style>
+    body { width: 240px; margin: 12px; font: 13px "Microsoft YaHei UI", sans-serif; color: #2b2b2b; }
+    input { width: 100%; box-sizing: border-box; padding: 6px; font-size: 18px; letter-spacing: 4px; text-align: center; }
+    button { margin-top: 8px; width: 100%; padding: 6px; cursor: pointer; }
+    .muted { color: #8a7a62; font-size: 12px; }
+    #msg { margin-top: 6px; min-height: 1em; }
+  </style>
+</head>
+<body>
+  <div id="status">检查中……</div>
+  <div id="pair-box" hidden>
+    <p class="muted">点下面的按钮，屏幕右下角 Pointy 会问要不要允许连接，点「允许」。</p>
+    <button id="pair" type="button">连接 Pointy</button>
+  </div>
+  <button id="unpair" type="button" hidden>取消配对</button>
+  <div id="msg"></div>
+  <details>
+    <summary class="muted">高级</summary>
+    <label class="muted">Pointy 端口（设了 POINTY_PORT 才需要改）
+      <input id="port" inputmode="numeric" style="font-size:13px;letter-spacing:0;text-align:left">
+    </label>
+  </details>
+  <script src="popup.js"></script>
+</body>
+</html>

package/pet/extension/popup.js

@@ -0,0 +1,30 @@
+const $ = (id) => document.getElementById(id)
+
+async function refresh() {
+  const s = await chrome.runtime.sendMessage({ type: 'status' })
+  $('status').textContent = !s.paired ? '还没配对' : s.connected ? '已连接 Pointy' : '已配对，Pointy 没在运行'
+  $('pair-box').hidden = s.paired
+  $('unpair').hidden = !s.paired
+}
+
+$('pair').addEventListener('click', async () => {
+  $('msg').textContent = '去 Pointy 那边点「允许」……'
+  const r = await chrome.runtime.sendMessage({ type: 'pair' })
+  $('msg').textContent = r.ok ? '已连接' : r.error
+  setTimeout(refresh, 800)
+})
+
+$('unpair').addEventListener('click', async () => {
+  await chrome.runtime.sendMessage({ type: 'unpair' })
+  refresh()
+})
+
+chrome.storage.local.get('port').then(({ port }) => { $('port').value = port ?? 47321 })
+$('port').addEventListener('change', async () => {
+  const port = Number($('port').value)
+  if (Number.isInteger(port) && port > 0 && port < 65536) await chrome.storage.local.set({ port })
+  else await chrome.storage.local.remove('port')
+  $('msg').textContent = '端口已保存'
+})
+
+refresh()

package/pet/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "pointy",
+  "private": true,
+  "main": "boot.js",
+  "pointy": {
+    "electron": {
+      "version": "44.10.1",
+      "sha256": "5099bdc11c6a78edff35851491c1f8228a1c2e844e1b376eee219402c42c6011"
+    }
+  }
+}

package/pet/vendor/koffi/LICENSE.txt

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (C) 2025  Niels Martignène <niels.martignene@protonmail.com>
+
+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.