@opentiny/next-sdk 0.4.2 → 0.4.3

package/page-tools/handlers/fill.ts

@@ -1,65 +0,0 @@
-import { inputTextElement } from '@page-agent/page-controller'
-import { dispatchComposedEvents, isInShadowDom, waitForDomSettled } from '../utils/dom'
-import type { ActionContext } from '../context'
-
-export async function handleFill(args: any, ctx: ActionContext) {
-  const mode = args.responseMode ?? 'diff'
-  if (args.index === undefined || typeof args.text !== 'string')
-    return ctx.actionError('填写结果: 缺少元素索引或文本内容')
-  const el = ctx.getRefMap().get(args.index)
-  if (!el) {
-    return ctx.actionError(
-      `填写失败: ref 索引 ${args.index} 已失效（页面可能已刷新），已自动重新加载页面状态，请使用新的 ref 索引重试。`
-    )
-  }
-
-  let targetEl = el
-  if (!(targetEl instanceof HTMLInputElement) && !(targetEl instanceof HTMLTextAreaElement)) {
-    // querySelector 不穿透 shadow boundary，对 shadow host 补查其 shadowRoot
-    const innerInput =
-      el.querySelector('input, textarea') ?? (el.shadowRoot?.querySelector('input, textarea') as HTMLElement | null)
-    if (innerInput) {
-      targetEl = innerInput as HTMLElement
-    }
-  }
-
-  if (targetEl instanceof HTMLInputElement && targetEl.readOnly) {
-    targetEl.value = args.text
-    // composed:true 确保事件穿透 shadow boundary，事件委托框架可捕获
-    dispatchComposedEvents(targetEl, 'input', 'change', 'blur')
-  } else {
-    // 优先尝试标准方式（支持 contenteditable、普通 input/textarea）
-    let fillSuccess = false
-    try {
-      await inputTextElement(targetEl, args.text)
-      fillSuccess = true
-    } catch (fillErr) {
-      // inputTextElement 失败时（如 Angular/React 组件包装的密码框），
-      // 降级使用原生 input value 描述符触发框架变更检测
-      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
-        (targetEl instanceof HTMLTextAreaElement ? HTMLTextAreaElement : HTMLInputElement).prototype,
-        'value'
-      )?.set
-      if (nativeInputValueSetter && (targetEl instanceof HTMLInputElement || targetEl instanceof HTMLTextAreaElement)) {
-        nativeInputValueSetter.call(targetEl, args.text)
-        // 发送完整事件序列，触发 Angular ngModel / React 合成事件的变更检测
-        targetEl.dispatchEvent(new Event('focus', { bubbles: true, composed: true }))
-        targetEl.dispatchEvent(new Event('input', { bubbles: true, composed: true }))
-        targetEl.dispatchEvent(new Event('change', { bubbles: true, composed: true }))
-        targetEl.dispatchEvent(new Event('blur', { bubbles: true, composed: true }))
-        fillSuccess = true
-      }
-    }
-    if (!fillSuccess) {
-      return ctx.actionError(`填写结果: 无法填写元素 ${args.index}，元素不是 input、textarea 或 contenteditable`)
-    }
-    // shadow DOM 内元素：inputTextElement 派发的合成事件 composed:false，
-    // 补发 composed:true 事件确保事件委托框架（如 React）能收到
-    if (isInShadowDom(targetEl)) {
-      dispatchComposedEvents(targetEl, 'input', 'change')
-    }
-  }
-  // 等待框架异步插入的校验错误/条件渲染内容稳定后再采集状态
-  await waitForDomSettled()
-  return ctx.buildBrowserStateResponse(mode)
-}

package/page-tools/handlers/scroll.ts

@@ -1,66 +0,0 @@
-import { getScrollInfo, waitForScrollEnd } from '../utils/scroll'
-import type { ActionContext } from '../context'
-
-export async function handleScroll(args: any, ctx: ActionContext) {
-  const mode = args.responseMode ?? 'diff'
-  if (args.down === undefined && args.right === undefined) return ctx.errContent('滚动结果: 缺少滚动方向参数')
-
-  // 确定滚动目标（有 index 时滚动该元素容器，否则滚动整个文档）
-  let scrollTarget: Element | Window = window
-  if (args.index !== undefined) {
-    const el = ctx.getRefMap().get(args.index)
-    if (!el) return ctx.refreshOnStaleRef('滚动', args.index)
-    scrollTarget = el
-  }
-
-  // 滚动前快照
-  const before = getScrollInfo(scrollTarget)
-
-  if (args.right !== undefined) {
-    const pixels = args.pixels ?? 300
-    scrollTarget.scrollBy({ left: args.right ? pixels : -pixels, behavior: 'smooth' })
-  } else {
-    const pixels = args.pixels ?? Math.round((args.numPages ?? 1) * window.innerHeight)
-    scrollTarget.scrollBy({ top: args.down ? pixels : -pixels, behavior: 'smooth' })
-  }
-
-  // 等待滚动动画完成后再采集状态（scrollend + 超时兜底）
-  await waitForScrollEnd(scrollTarget)
-
-  // 滚动后快照，计算实际位移
-  const after = getScrollInfo(scrollTarget)
-  const deltaY = Math.round(after.scrollY - before.scrollY)
-  const deltaX = Math.round(after.scrollX - before.scrollX)
-  const isHorizontal = args.right !== undefined
-
-  let scrollMsg: string
-  if (Math.abs(deltaY) < 1 && Math.abs(deltaX) < 1) {
-    // 实际未发生位移，说明已到达边界
-    if (isHorizontal) {
-      scrollMsg = args.right ? '⚠️ 已到达右边界，无法继续向右滚动' : '⚠️ 已到达左边界，无法继续向左滚动'
-    } else {
-      scrollMsg = args.down ? '⚠️ 已到达底部，无法继续向下滚动' : '⚠️ 已到达顶部，无法继续向上滚动'
-    }
-  } else {
-    const axis = isHorizontal ? `水平滚动 ${deltaX}px` : `垂直滚动 ${deltaY}px`
-    let boundary = ''
-    if (isHorizontal) {
-      if (args.right && after.atRight) boundary = '，已到达右边界'
-      else if (!args.right && after.atLeft) boundary = '，已到达左边界'
-    } else {
-      if (args.down && after.atBottom) boundary = '，已到达底部'
-      else if (!args.down && after.atTop) boundary = '，已到达顶部'
-    }
-    scrollMsg = `✅ ${axis}${boundary}`
-  }
-
-  // 附加位置信息（参考 page-agent getPageInfo 格式）
-  const posInfo = args.right !== undefined
-    ? `当前水平滚动位置: scrollX=${Math.round(after.scrollX)}px，左侧 ${after.pagesAbove.toFixed(1)} 屏，右侧 ${after.pagesBelow.toFixed(1)} 屏`
-    : `当前滚动位置: scrollY=${Math.round(after.scrollY)}px，上方 ${after.pagesAbove.toFixed(1)} 屏，下方 ${after.pagesBelow.toFixed(1)} 屏`
-  const scrollResult = `[滚动结果] ${scrollMsg}\n${posInfo}`
-
-  const stateResult = await ctx.buildBrowserStateResponse(mode)
-  stateResult.content[0].text = `${scrollResult}\n\n${stateResult.content[0].text}`
-  return stateResult
-}

package/page-tools/handlers/searchTree.ts

@@ -1,27 +0,0 @@
-import { searchA11yTree } from '../a11y-tree'
-import { detectPageDialog, detectValidationErrors } from '../utils/dom'
-import { getPageAgentToolConfig } from '../tool-config'
-import type { ActionContext } from '../context'
-import type { PageAgentToolInput } from '../schema'
-
-export async function handleSearchTree(args: PageAgentToolInput, ctx: ActionContext) {
-  if (!args.query) return ctx.errContent('搜索失败: 缺少 query 参数')
-  const result = searchA11yTree(args.query, document.body, {
-    ...getPageAgentToolConfig().a11yConfig,
-    contextLines: args.contextLines,
-    maxMatches: args.maxMatches,
-  })
-
-  ctx.setRefMap(result.refMap)
-  ctx.stateCache.update(window.location.href, result.yaml)
-
-  await ctx.pageController.hideMask()
-  // 检测页面弹窗/遮罩层，帮助 AI 发现可能遮挡目标的确认弹窗
-  const dialogAlert = detectPageDialog()
-  // 检测表单校验错误，提醒 AI 优先修复
-  const validationErrors = detectValidationErrors()
-  const alerts = `${dialogAlert}${validationErrors}`
-  return {
-    content: [{ type: 'text' as const, text: alerts ? `${alerts}\n${result.text}` : result.text }]
-  }
-}

package/page-tools/handlers/select.ts

@@ -1,39 +0,0 @@
-import { selectOptionElement } from '@page-agent/page-controller'
-import { dispatchComposedEvents, isInShadowDom, waitForDomSettled } from '../utils/dom'
-import type { ActionContext } from '../context'
-
-export async function handleSelect(args: any, ctx: ActionContext) {
-  const mode = args.responseMode ?? 'diff'
-  if (args.index === undefined || typeof args.text !== 'string')
-    return ctx.actionError('选择结果: 缺少元素索引或文本内容')
-  let el = ctx.getRefMap().get(args.index) as HTMLSelectElement | HTMLElement | undefined
-  if (!el) {
-    return ctx.actionError(
-      `选择失败: ref 索引 ${args.index} 已失效（页面可能已刷新），已自动重新加载页面状态，请使用新的 ref 索引重试。`
-    )
-  }
-  // 若 ref 指向 shadow host，解析其内部真正的 <select>（与 fill 一致）
-  let targetSelect: HTMLSelectElement | null = null
-  if (el instanceof HTMLSelectElement) {
-    targetSelect = el
-  } else {
-    const innerSelect =
-      el.querySelector('select') ?? (el.shadowRoot?.querySelector('select') as HTMLSelectElement | null)
-    if (innerSelect) {
-      targetSelect = innerSelect
-    }
-  }
-
-  if (!targetSelect) {
-    return ctx.actionError(`选择结果: 无法选择元素 ${args.index}，未找到对应的 <select> 元素`)
-  }
-
-  await selectOptionElement(targetSelect, args.text)
-  // shadow DOM 内元素：补发 composed:true 的 change 事件
-  if (isInShadowDom(targetSelect)) {
-    dispatchComposedEvents(targetSelect, 'change')
-  }
-  // 等待框架异步插入的校验错误/条件渲染内容稳定后再采集状态
-  await waitForDomSettled()
-  return ctx.buildBrowserStateResponse(mode)
-}

package/page-tools/initialize-builtin-WebMCP.ts

@@ -1,20 +0,0 @@
-import { initializeWebMCPPolyfill } from '@mcp-b/webmcp-polyfill'
-import { setupModelContextBridge } from './bridge'
-import { isBrowser } from '../utils/env'
-
-let initialized = false
-
-export const initializeBuiltinWebMCP = () => {
-  if (isBrowser()) {
-    try {
-      if (initialized) return
-
-      initializeWebMCPPolyfill()
-      setupModelContextBridge()
-
-      initialized = true
-    } catch (err) {
-      console.warn('[next-sdk] 自动注入 modelContext polyfill 和桥接同步失败:', err)
-    }
-  }
-}

package/page-tools/page-agent-highlight/index.ts

@@ -1,245 +0,0 @@
-import { type RefMap } from '../a11y-tree'
-
-export const HIGHLIGHT_CONTAINER_ID = 'webmcpcli-highlight-container'
-export const HIGHLIGHT_CONTAINER_STYLE_ID = 'webmcpcli-highlight-container-style'
-const colors = [
-  '#FF0000',
-  '#00FF00',
-  '#0000FF',
-  '#FFA500',
-  '#800080',
-  '#008080',
-  '#FF69B4',
-  '#4B0082',
-  '#FF4500',
-  '#2E8B57',
-  '#DC143C',
-  '#4682B4'
-]
-// border + label opacity
-const opacity = Math.floor(0.3 * 255)
-  .toString(16)
-  .padStart(2, '0')
-
-const injectStyles = `
-      #${HIGHLIGHT_CONTAINER_ID} {
-        position: fixed;
-        pointer-events: none;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 2147483640;
-        background-color: transparent;
-      }
-
-      #${HIGHLIGHT_CONTAINER_ID} div {
-        position: fixed;
-        pointer-events: none;
-        background-color: transparent;
-        text-align: right;
-        box-sizing: border-box;
-        border-radius: 4px;
-      }
-
-      #${HIGHLIGHT_CONTAINER_ID} div span {
-        display: inline-block;
-        color: #fff;
-        padding: 0 2px;
-        border-radius: 4px;
-      }
-  `
-
-/** 图标热区回退时父节点宽高上限，避免用到整行容器 */
-const MAX_ICON_FALLBACK_SIZE = 48
-
-export type HighlightRect = { top: number; left: number; width: number; height: number }
-
-/**
- * 解析高亮矩形。
- * Tiny3 `ti-icon` / `tp-icon` 字形常画在 ::before 上，宿主 getBoundingClientRect 宽或高为 0，
- * 旧逻辑直接跳过导致帮助中心关闭/全屏等图标有 ref 却不高亮。
- */
-export function resolveHighlightRect(el: HTMLElement): HighlightRect | null {
-  const rect = el.getBoundingClientRect()
-  if (rect.width > 0 && rect.height > 0) {
-    return { top: rect.top, left: rect.left, width: rect.width, height: rect.height }
-  }
-
-  // 优先用紧凑父节点（帮助中心 header 图标外包 28×28 的可点区域）
-  let parent: HTMLElement | null = el.parentElement
-  for (let depth = 0; depth < 3 && parent; depth++) {
-    const pr = parent.getBoundingClientRect()
-    if (
-      pr.width > 0 &&
-      pr.height > 0 &&
-      pr.width <= MAX_ICON_FALLBACK_SIZE &&
-      pr.height <= MAX_ICON_FALLBACK_SIZE
-    ) {
-      return { top: pr.top, left: pr.left, width: pr.width, height: pr.height }
-    }
-    parent = parent.parentElement
-  }
-
-  // 单边有尺寸时，用 font-size 补齐另一边
-  if (rect.width > 0 || rect.height > 0) {
-    try {
-      const fs = parseFloat(getComputedStyle(el).fontSize) || 16
-      const width = rect.width > 0 ? rect.width : fs
-      const height = rect.height > 0 ? rect.height : fs
-      return {
-        top: rect.height > 0 ? rect.top : rect.top - (height - rect.height) / 2,
-        left: rect.width > 0 ? rect.left : rect.left - (width - rect.width) / 2,
-        width,
-        height,
-      }
-    } catch {
-      /* ignore */
-    }
-  }
-
-  return null
-}
-
-/** 与视口有交集即可（侧栏轻微负 left、贴边控件不应被整框剔除） */
-function isRectInViewport(rect: HighlightRect): boolean {
-  const vh = window.innerHeight || document.documentElement.clientHeight
-  const vw = window.innerWidth || document.documentElement.clientWidth
-  return rect.top < vh && rect.top + rect.height > 0 && rect.left < vw && rect.left + rect.width > 0
-}
-
-const doHighlight = (refMap: RefMap, parentIframe: HTMLIFrameElement | null = null) => {
-  // 1、保证注入脚本
-  if (!document.head.querySelector(`#${HIGHLIGHT_CONTAINER_STYLE_ID}`)) {
-    const style = document.head.appendChild(document.createElement('style'))
-    style.id = HIGHLIGHT_CONTAINER_STYLE_ID
-    style.textContent = injectStyles
-    document.head.appendChild(style)
-  }
-
-  // 2、保证contrainer( container 在 a11y 时已加入黑名单)
-  let container = document.getElementById(HIGHLIGHT_CONTAINER_ID)
-  if (!container) {
-    container = document.createElement('div')
-    container.id = HIGHLIGHT_CONTAINER_ID
-
-    document.body.appendChild(container)
-  } else {
-    container.innerHTML = ''
-  }
-
-  let iframeOffset = { x: 0, y: 0 }
-  if (parentIframe) {
-    const iframeRect = parentIframe.getBoundingClientRect() // Keep getBoundingClientRect for iframe offset
-    iframeOffset.x = iframeRect.left
-    iframeOffset.y = iframeRect.top
-  }
-  const fragment = document.createDocumentFragment()
-
-  // 3、 遍历 refMap
-  for (const [index, el] of refMap.entries()) {
-    const rect = resolveHighlightRect(el)
-    if (!rect) continue
-
-    const top = rect.top + iframeOffset.y
-    const left = rect.left + iframeOffset.x
-    const viewportRect = { top, left, width: rect.width, height: rect.height }
-    if (!isRectInViewport(viewportRect)) continue
-
-    const color = colors[index % colors.length]
-    const textColor = color + opacity
-
-    const overlay = document.createElement('div')
-    overlay.style.border = `2px solid ${textColor}`
-    overlay.dataset.refIndex = String(index)
-
-    overlay.style.top = `${top}px`
-    overlay.style.left = `${left}px`
-    overlay.style.width = `${rect.width}px`
-    overlay.style.height = `${rect.height}px`
-
-    // 文字
-    const text = document.createElement('span')
-    text.style.backgroundColor = textColor
-    text.style.height = `${Math.max(rect.height - 4, 0)}px`
-    text.style.lineHeight = `${Math.max(rect.height - 4, 0)}px`
-    text.textContent = index.toString()
-    overlay.appendChild(text)
-
-    fragment.appendChild(overlay)
-  }
-
-  container.appendChild(fragment)
-}
-
-export const highlight = (refMap: RefMap, parentIframe: HTMLIFrameElement | null = null) => {
-  doHighlight(refMap, parentIframe)
-
-  // 4、监听滚动和resize事件，更新位置
-  const updatePositions = () => doHighlight(refMap, parentIframe)
-  const throttleFunction = (func: (...args: any[]) => void, delay: number) => {
-    let lastCall = 0
-    return (...args: any[]) => {
-      const now = performance.now()
-      if (now - lastCall < delay) return
-      lastCall = now
-      return func(...args)
-    }
-  }
-
-  const throttledUpdatePositions = throttleFunction(updatePositions, 16)
-  window.addEventListener('scroll', throttledUpdatePositions, true)
-  window.addEventListener('resize', throttledUpdatePositions)
-
-  const cleanupFn = () => {
-    window.removeEventListener('scroll', throttledUpdatePositions, true)
-    window.removeEventListener('resize', throttledUpdatePositions)
-  }
-  const win = window as any
-  ;(win._highlightCleanupFunctions = win._highlightCleanupFunctions || []).push(cleanupFn)
-}
-
-/** 移除高亮， 可反复调用 */
-export const unhighlight = () => {
-  document.getElementById(HIGHLIGHT_CONTAINER_ID)?.remove()
-
-  const cleanupFunctions = (window as any)._highlightCleanupFunctions || []
-  for (const cleanup of cleanupFunctions) {
-    if (typeof cleanup === 'function') {
-      cleanup()
-    }
-  }
-
-  ;(window as any)._highlightCleanupFunctions = []
-}
-
-/** 全局监听变化，随时准备移除高亮, 可反复调用 */
-export const globalRemoveListener = () => {
-  if ((window as any).__registerGlobalRemoveListener) return
-  ;(window as any).__registerGlobalRemoveListener = true
-  window.addEventListener('popstate', () => {
-    unhighlight()
-  })
-  window.addEventListener('hashchange', () => {
-    unhighlight()
-  })
-  window.addEventListener('beforeunload', () => {
-    unhighlight()
-  })
-
-  const navigation = (window as any).navigation
-  if (navigation && typeof navigation.addEventListener === 'function') {
-    navigation.addEventListener('navigate', () => {
-      unhighlight()
-    })
-  } else {
-    // 定时器
-    let currentUrl = window.location.href
-    setInterval(() => {
-      if (window.location.href !== currentUrl) {
-        currentUrl = window.location.href
-        unhighlight()
-      }
-    }, 500)
-  }
-}

package/page-tools/page-agent-mask/SimulatorMask.module.css

@@ -1,14 +0,0 @@
-.webmcp-page-agent-wrapper {
-	position: fixed;
-	inset: 0;
-	z-index: 2147483641;
-	/* 确保在所有元素之上，除了 panel */
-	cursor: wait;
-	overflow: hidden;
-
-	display: none;
-}
-
-.webmcp-page-agent-wrapper.visible {
-	display: block;
-}