@opentiny/next-sdk 0.4.2 → 0.4.3

package/page-tools/page-agent-mask/SimulatorMask.ts

@@ -1,299 +0,0 @@
-import { Motion } from 'ai-motion'
-
-import { isPageDark } from './checkDarkMode'
-
-const injectStyles = `
-.webmcp-page-agent-cursor {
-	position: absolute;
-	width: var(--cursor-size, 75px);
-	height: var(--cursor-size, 75px);
-	pointer-events: none;
-	z-index: 10000;
-}
-
-.webmcp-page-agent-cursorFilling {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	background: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2079.0834%2079.4553%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20%20width%3D%2779.083374%27%20height%3D%2779.455322%27%20fill%3D%27none%27%20%3E--%3Cdefs%3E%3Cfilter%20id%3D%27filter_0%27%20width%3D%2779.083374%27%20height%3D%2779.455322%27%20x%3D%270.000000%27%20y%3D%270.000000%27%20filterUnits%3D%27userSpaceOnUse%27%20%20color-interpolation-filters%3D%27sRGB%27%3E%3CfeFlood%20flood-opacity%3D%270%27%20result%3D%27BackgroundImageFix%27%20%2F%3E%3CfeOffset%20dx%3D%276.000000%27%20dy%3D%276.000000%27%20in%3D%27SourceAlpha%27%20%2F%3E%3CfeGaussianBlur%20stdDeviation%3D%276.66666651%27%20%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.18%200%20%27%20%2F%3E%3CfeBlend%20result%3D%27effect_dropShadow_1%27%20in2%3D%27BackgroundImageFix%27%20mode%3D%27normal%27%20%2F%3E%3CfeBlend%20result%3D%27shape%27%20in%3D%27SourceGraphic%27%20in2%3D%27effect_dropShadow_1%27%20mode%3D%27normal%27%20%2F%3E%3C%2Ffilter%3E%3ClinearGradient%20id%3D%27paint_linear_0%27%20x1%3D%2718.4743214%27%20x2%3D%2718.4213886%27%20y1%3D%27-1.86264515e-09%27%20y2%3D%2734.9221306%27%20gradientUnits%3D%27userSpaceOnUse%27%3E%3Cstop%20stop-color%3D%27rgb%28255%2C181%2C96%29%27%20offset%3D%270%27%20stop-opacity%3D%271%27%20%2F%3E%3Cstop%20stop-color%3D%27rgb%28255%2C120%2C114%29%27%20offset%3D%270.5%27%20stop-opacity%3D%271%27%20%2F%3E%3Cstop%20stop-color%3D%27rgb%28241%2C109%2C237%29%27%20offset%3D%271%27%20stop-opacity%3D%271%27%20%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20filter%3D%27url%28%23filter_0%29%27%3E%3Cpath%20d%3D%27M20.2632%203.57771L34.6257%2032.3027C35.4444%2033.9402%2033.8152%2035.7258%2032.1097%2035.0603L19.2014%2030.0229C18.7339%2029.8404%2018.2148%2029.8404%2017.7472%2030.0229L4.83891%2035.0603C3.13343%2035.7258%201.50423%2033.9402%202.32297%2032.3027L16.6855%203.57771C17.4225%202.10361%2019.5261%202.10361%2020.2632%203.57771Z%27%20fill%3D%27url%28%23paint_linear_0%29%27%20fill-rule%3D%27evenodd%27%20transform%3D%27matrix%280.719908%2C-0.69407%2C0.69407%2C0.719908%2C2.00256%2C28.0095%29%27%20%2F%3E%3Cpath%20d%3D%27M37.2169%2032.6848C37.1578%2032.189%2037.0096%2031.7039%2036.7723%2031.2294L22.4098%202.5044C22.1973%202.07946%2021.9328%201.70554%2021.6163%201.38261C21.3524%201.11342%2021.0524%200.879671%2020.7162%200.681366C20.3925%200.490407%2020.0558%200.34434%2019.7061%200.243163C19.312%200.129145%2018.9014%200.0721366%2018.4743%200.0721366C18.0472%200.0721366%2017.6367%200.129145%2017.2426%200.243163C16.8929%200.34434%2016.5562%200.490407%2016.2324%200.681366C15.8962%200.879671%2015.5962%201.11342%2015.3323%201.38261C15.0158%201.70553%2014.7513%202.07946%2014.5388%202.5044L0.176342%2031.2294C-0.0609121%2031.7039%20-0.209128%2032.189%20-0.268305%2032.6848C-0.316251%2033.0865%20-0.305747%2033.4951%20-0.236792%2033.9108C-0.171059%2034.307%20-0.0570567%2034.6809%200.105216%2035.0326C0.292784%2035.4391%200.544845%2035.8158%200.861397%2036.1627C1.17794%2036.5097%201.53001%2036.7951%201.91761%2037.0191C2.25297%2037.2128%202.61492%2037.3606%203.00348%2037.4623C3.41106%2037.5689%203.81704%2037.6168%204.22142%2037.6058C4.72053%2037.5922%205.21719%2037.4889%205.71141%2037.2961L18.4743%2032.3154L31.2372%2037.2961C31.7315%2037.4889%2032.2281%2037.5922%2032.7272%2037.6058C33.1316%2037.6168%2033.5376%2037.5689%2033.9452%2037.4623C34.3337%2037.3606%2034.6957%2037.2128%2035.0311%2037.0191C35.4187%2036.7951%2035.7707%2036.5097%2036.0873%2036.1627C36.4038%2035.8158%2036.6558%2035.4391%2036.8434%2035.0327C37.0057%2034.681%2037.1197%2034.307%2037.1854%2033.9108C37.2544%2033.4951%2037.2649%2033.0865%2037.2169%2032.6848ZM34.6257%2032.3027L20.2632%203.57771C19.5261%202.10361%2017.4225%202.10361%2016.6855%203.57771L2.32297%2032.3027C1.50423%2033.9402%203.13343%2035.7258%204.83891%2035.0603L17.7472%2030.0229C18.2148%2029.8404%2018.7339%2029.8404%2019.2014%2030.0229L32.1097%2035.0603C33.8152%2035.7258%2035.4444%2033.9402%2034.6257%2032.3027Z%27%20fill%3D%27rgb%28255%2C255%2C255%29%27%20fill-rule%3D%27evenodd%27%20transform%3D%27matrix%280.719908%2C-0.69407%2C0.69407%2C0.719908%2C2.00256%2C28.0095%29%27%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
-  background-size: 100% 100%;
-	background-repeat: no-repeat;
-
-	transform-origin: center;
-	margin-left: -10px;
-	margin-top: -18px;
-}
-
-.webmcp-page-agent-cursorRipple {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	pointer-events: none;
-	margin-left: -50%;
-	margin-top: -50%;
-
-	&::after {
-		content: '';
-		opacity: 0;
-		position: absolute;
-		inset: 0;
-		border: 4px solid rgba(57, 182, 255, 1);
-		border-radius: 50%;
-	}
-}
-
-.webmcp-page-agent-cursor.clicking .webmcp-page-agent-cursorRipple::after {
-	animation: webmcp-page-agent-cursor-ripple 300ms ease-out forwards;
-}
-
-@keyframes webmcp-page-agent-cursor-ripple {
-	0% {
-		transform: scale(0);
-		opacity: 1;
-	}
-
-	100% {
-		transform: scale(2);
-		opacity: 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;
-}
-`
-
-export class SimulatorMask extends EventTarget {
-  shown: boolean = false
-  wrapper = document.createElement('div')
-  motion: Motion | null = null
-
-  #disposed = false
-
-  #cursor = document.createElement('div')
-
-  #currentCursorX = 0
-  #currentCursorY = 0
-
-  #targetCursorX = 0
-  #targetCursorY = 0
-
-  constructor() {
-    super()
-    // 注入样式，防止打包失败
-    document.head.appendChild(document.createElement('style')).textContent = injectStyles
-    this.wrapper.id = 'page-agent-runtime_simulator-mask'
-    this.wrapper.className = 'webmcp-page-agent-wrapper'
-    this.wrapper.setAttribute('data-browser-use-ignore', 'true')
-    this.wrapper.setAttribute('data-page-agent-ignore', 'true')
-
-    try {
-      const motion = new Motion({
-        mode: isPageDark() ? 'dark' : 'light',
-        styles: { position: 'absolute', inset: '0' },
-        glowWidth: 80,
-        borderWidth: 8,
-        colors: ['rgb(121, 216, 247)', 'rgb(171, 219, 110)', 'rgb(252, 188, 114)', 'rgb(235, 117, 231)']
-      })
-      this.motion = motion
-      this.wrapper.appendChild(motion.element)
-      motion.autoResize(this.wrapper)
-    } catch (e) {
-      console.warn('[SimulatorMask] Motion overlay unavailable:', e)
-    }
-
-    const stopEvent = (e: Event) => {
-      e.stopPropagation()
-      e.preventDefault()
-    }
-    ;['click', 'mousedown', 'mouseup', 'mousemove', 'wheel', 'keydown', 'keyup'].forEach((eventName) =>
-      this.wrapper.addEventListener(eventName, stopEvent)
-    )
-    // Create AI cursor
-    this.#createCursor()
-    // this.show()
-
-    document.body.appendChild(this.wrapper)
-
-    this.#moveCursorToTarget()
-
-    // global events
-    // @note Mask should be isolated from the rest of the code.
-    // Global events are easier to manage and cleanup.
-
-    const movePointerToListener = (event: Event) => {
-      const { x, y } = (event as CustomEvent).detail
-      this.setCursorPosition(x, y)
-    }
-    const clickPointerListener = () => {
-      this.triggerClickAnimation()
-    }
-    const enablePassThroughListener = () => {
-      this.wrapper.style.pointerEvents = 'none'
-    }
-    const disablePassThroughListener = () => {
-      this.wrapper.style.pointerEvents = 'auto'
-    }
-
-    window.addEventListener('PageAgent::MovePointerTo', movePointerToListener)
-    window.addEventListener('PageAgent::ClickPointer', clickPointerListener)
-    window.addEventListener('PageAgent::EnablePassThrough', enablePassThroughListener)
-    window.addEventListener('PageAgent::DisablePassThrough', disablePassThroughListener)
-
-    this.addEventListener('dispose', () => {
-      window.removeEventListener('PageAgent::MovePointerTo', movePointerToListener)
-      window.removeEventListener('PageAgent::ClickPointer', clickPointerListener)
-      window.removeEventListener('PageAgent::EnablePassThrough', enablePassThroughListener)
-      window.removeEventListener('PageAgent::DisablePassThrough', disablePassThroughListener)
-    })
-  }
-
-  #createCursor() {
-    this.#cursor.className = 'webmcp-page-agent-cursor'
-
-    // Create ripple effect container
-    const rippleContainer = document.createElement('div')
-    rippleContainer.className = 'webmcp-page-agent-cursorRipple'
-    this.#cursor.appendChild(rippleContainer)
-
-    // Create filling layer
-    const fillingLayer = document.createElement('div')
-    fillingLayer.className = 'webmcp-page-agent-cursorFilling'
-    this.#cursor.appendChild(fillingLayer)
-
-    // Create border layer
-    // const borderLayer = document.createElement('div')
-    // borderLayer.className = 'webmcp-page-agent-cursorBorder'
-    // this.#cursor.appendChild(borderLayer)
-
-    this.wrapper.appendChild(this.#cursor)
-  }
-
-  #moveCursorToTarget() {
-    if (this.#disposed) return
-
-    const newX = this.#currentCursorX + (this.#targetCursorX - this.#currentCursorX) * 0.2
-    const newY = this.#currentCursorY + (this.#targetCursorY - this.#currentCursorY) * 0.2
-
-    const xDistance = Math.abs(newX - this.#targetCursorX)
-    if (xDistance > 0) {
-      if (xDistance < 2) {
-        this.#currentCursorX = this.#targetCursorX
-      } else {
-        this.#currentCursorX = newX
-      }
-      this.#cursor.style.left = `${this.#currentCursorX}px`
-    }
-
-    const yDistance = Math.abs(newY - this.#targetCursorY)
-    if (yDistance > 0) {
-      if (yDistance < 2) {
-        this.#currentCursorY = this.#targetCursorY
-      } else {
-        this.#currentCursorY = newY
-      }
-      this.#cursor.style.top = `${this.#currentCursorY}px`
-    }
-
-    requestAnimationFrame(() => this.#moveCursorToTarget())
-  }
-
-  setCursorPosition(x: number, y: number) {
-    if (this.#disposed) return
-
-    this.#targetCursorX = x
-    this.#targetCursorY = y
-  }
-
-  triggerClickAnimation() {
-    if (this.#disposed) return
-
-    this.#cursor.classList.remove('clicking')
-    // Force reflow to restart animation
-    void this.#cursor.offsetHeight
-    this.#cursor.classList.add('clicking')
-  }
-
-  show() {
-    if (this.shown || this.#disposed) return
-
-    this.shown = true
-    this.motion?.start()
-    this.motion?.fadeIn()
-
-    this.wrapper.classList.add('visible')
-
-    // Initialize cursor position
-    this.#currentCursorX = window.innerWidth / 2
-    this.#currentCursorY = window.innerHeight / 2
-    this.#targetCursorX = this.#currentCursorX
-    this.#targetCursorY = this.#currentCursorY
-    this.#cursor.style.left = `${this.#currentCursorX}px`
-    this.#cursor.style.top = `${this.#currentCursorY}px`
-  }
-
-  hide() {
-    if (!this.shown || this.#disposed) return
-
-    this.shown = false
-    this.motion?.fadeOut()
-    this.motion?.pause()
-
-    this.#cursor.classList.remove('clicking')
-
-    setTimeout(() => {
-      this.wrapper.classList.remove('visible')
-    }, 800) // Match the animation duration
-  }
-
-  dispose() {
-    this.#disposed = true
-    this.motion?.dispose()
-    this.wrapper.remove()
-    this.dispatchEvent(new Event('dispose'))
-  }
-  // 根据目标元素大小，在 wrapper 添加绝对定位边框：2px 宽、与目标间距 2px，对角渐变 (0,0 → 1,1)
-  borderElement(targetElement: HTMLElement) {
-    if (!targetElement) return
-
-    this.wrapper.querySelector('.webmcp-page-agent-border')?.remove()
-
-    const rect = targetElement.getBoundingClientRect()
-    const gap = 2
-    const borderWidth = 2
-    const offset = gap + borderWidth
-
-    const el = document.createElement('div')
-    el.className = 'webmcp-page-agent-border'
-    el.style.position = 'absolute'
-    el.style.left = `${rect.left - offset}px`
-    el.style.top = `${rect.top - offset}px`
-    el.style.width = `${rect.width + offset * 2}px`
-    el.style.height = `${rect.height + offset * 2}px`
-    el.style.boxSizing = 'border-box'
-    el.style.pointerEvents = 'none'
-    el.style.zIndex = '10000'
-    el.style.border = `${borderWidth}px solid transparent`
-    // 对角渐变：左上 (0,0) → 右下 (1,1)
-    el.style.borderImageSource = 'linear-gradient(to bottom right, #79D8F7, #ABDB6E, #FCBC72, #FA8682, #EB75E7)'
-    el.style.borderImageSlice = '1'
-    el.style.borderImageWidth = `${borderWidth}px`
-
-    this.wrapper.appendChild(el)
-  }
-
-  removeBorderElement() {
-    this.wrapper.querySelector('.webmcp-page-agent-border')?.remove()
-  }
-}

package/page-tools/page-agent-mask/checkDarkMode.ts

@@ -1,181 +0,0 @@
-/**
- * A comprehensive function to determine if the page is currently in a dark theme.
- * Heuristic check. Only work for common patterns. Return false by default.
- */
-export function isPageDark() {
-	try {
-		if (hasDarkModeClass()) return true
-		if (hasDarkModeDataAttribute()) return true
-		if (isColorSchemeDark()) return true
-		if (isBackgroundDark()) return true
-		if (isMainContentBackgroundDark()) return true
-		if (isTextColorLight()) return true
-
-		return false
-	} catch (error) {
-		console.warn('Error determining if page is dark:', error)
-		return false
-	}
-}
-
-/**
- * Checks for common dark mode CSS classes on the html or body elements.
- */
-function hasDarkModeClass() {
-	const DEFAULT_DARK_MODE_CLASSES = ['dark', 'dark-mode', 'theme-dark', 'night', 'night-mode']
-
-	const htmlElement = document.documentElement
-	const bodyElement = document.body || document.documentElement // can be null in some cases
-
-	// Check class names on <html> and <body>
-	for (const className of DEFAULT_DARK_MODE_CLASSES) {
-		if (htmlElement.classList.contains(className) || bodyElement?.classList.contains(className)) {
-			return true
-		}
-	}
-
-	return false
-}
-
-/**
- * Some UI frameworks use data attributes to indicate theme
- */
-function hasDarkModeDataAttribute() {
-	const htmlElement = document.documentElement
-	const bodyElement = document.body || document.documentElement // can be null in some cases
-
-	const dataAttrs = ['data-theme', 'data-color-mode', 'data-bs-theme', 'data-mui-color-scheme']
-	for (const attr of dataAttrs) {
-		const bodyValue = bodyElement?.getAttribute(attr)
-		const htmlValue = htmlElement.getAttribute(attr)
-
-		if (bodyValue?.toLowerCase() === 'dark' || htmlValue?.toLowerCase() === 'dark') {
-			return true
-		}
-	}
-
-	return false
-}
-
-/**
- * Checks the CSS `color-scheme` property and `<meta name="color-scheme">` tag.
- * Only "dark"/"only dark" counts as dark; "light dark" is ambiguous and ignored.
- */
-function isColorSchemeDark() {
-	// Check <meta name="color-scheme" content="dark">
-	const meta = document.querySelector<HTMLMetaElement>('meta[name="color-scheme"]')
-	const metaContent = meta?.content.toLowerCase()
-	if (metaContent === 'dark' || metaContent === 'only dark') return true
-
-	// Check the computed color-scheme CSS property on :root
-	const rootStyle = window.getComputedStyle(document.documentElement)
-	const colorScheme = rootStyle.getPropertyValue('color-scheme').trim().toLowerCase()
-	return colorScheme === 'dark' || colorScheme === 'only dark'
-}
-
-/**
- * Checks the background color of the body element to determine if the page is dark.
- */
-function isBackgroundDark() {
-	// We check both <html> and <body> because some pages set the color on <html>
-	const htmlStyle = window.getComputedStyle(document.documentElement)
-	const bodyStyle = window.getComputedStyle(document.body || document.documentElement)
-
-	// Get background colors
-	const htmlBgColor = htmlStyle.backgroundColor
-	const bodyBgColor = bodyStyle.backgroundColor
-
-	// The body's background might be transparent, in which case we should
-	// fall back to the html element's background.
-	if (isColorDark(bodyBgColor)) {
-		return true
-	} else if (bodyBgColor === 'transparent' || bodyBgColor.startsWith('rgba(0, 0, 0, 0)')) {
-		return isColorDark(htmlBgColor)
-	}
-
-	return false
-}
-
-/**
- * Checks if the text color on the body is light, which implies a dark background.
- */
-function isTextColorLight() {
-	/** Luminance (0-255) above which body text is considered light */
-	const LIGHT_TEXT_LUMINANCE = 200
-
-	const bodyStyle = window.getComputedStyle(document.body || document.documentElement)
-	const luminance = getLuminance(bodyStyle.color)
-
-	// Light text has high luminance (e.g. white text on dark bg)
-	return luminance !== null && luminance > LIGHT_TEXT_LUMINANCE
-}
-
-/**
- * Checks the background color of major layout elements (#app, #root, etc.).
- * Many SPAs render into a container that may have its own dark background while
- * <body> remains transparent.
- */
-function isMainContentBackgroundDark() {
-	const { innerWidth: vw, innerHeight: vh } = window
-	const minArea = vw * vh * 0.5
-
-	const selectors = ['#app', '#root', '#__next']
-	for (const selector of selectors) {
-		const el = document.querySelector(selector)
-		if (!el) continue
-
-		const rect = el.getBoundingClientRect()
-		if (rect.width * rect.height < minArea) continue
-
-		if (isColorDark(window.getComputedStyle(el).backgroundColor)) return true
-	}
-	return false
-}
-
-// --- utils ---
-
-/**
- * Parses an RGB or RGBA color string and returns an object with r, g, b properties.
- * @param {string} colorString - e.g., "rgb(34, 34, 34)" or "rgba(0, 0, 0, 0.5)"
- * @returns {{r: number, g: number, b: number}|null}
- */
-function parseRgbColor(colorString: string) {
-	const rgbMatch = /rgba?\((\d+),\s*(\d+),\s*(\d+)/.exec(colorString)
-	if (!rgbMatch) {
-		return null // Not a valid rgb/rgba string
-	}
-	return {
-		r: parseInt(rgbMatch[1]),
-		g: parseInt(rgbMatch[2]),
-		b: parseInt(rgbMatch[3]),
-	}
-}
-
-/**
- * Calculates the perceived luminance (0-255) of a CSS color string.
- * @param {string} colorString - e.g., "rgb(50, 50, 50)" or "rgba(0, 0, 0, 0.5)"
- * @returns {number|null} - The luminance, or null if the color is transparent or unparseable.
- */
-function getLuminance(colorString: string): number | null {
-	if (!colorString || colorString === 'transparent' || colorString.startsWith('rgba(0, 0, 0, 0)')) {
-		return null // Transparent has no meaningful luminance
-	}
-
-	const rgb = parseRgbColor(colorString)
-	if (!rgb) {
-		return null // Could not parse color
-	}
-
-	// Standard perceived luminance formula
-	return 0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b
-}
-
-/**
- * Determines if a color is "dark" based on its calculated luminance.
- * @param {string} colorString - The CSS color string (e.g., "rgb(50, 50, 50)").
- * @param {number} threshold - A value between 0 and 255. Colors with luminance below this will be considered dark. Default is 128.
- */
-function isColorDark(colorString: string, threshold = 128) {
-	const luminance = getLuminance(colorString)
-	return luminance !== null && luminance < threshold
-}

package/page-tools/page-agent-mask/cursor-border.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none">
-  <g><path d="M 15 42 L 15 36.99 Q 15 31.99 23.7 31.99 L 28.05 31.99 Q 32.41 31.99 32.41 21.99 L 32.41 17 Q 32.41 12 41.09 16.95 L 76.31 37.05 Q 85 42 76.31 46.95 L 41.09 67.05 Q 32.41 72 32.41 62.01 L 32.41 57.01 Q 32.41 52.01 23.7 52.01 L 19.35 52.01 Q 15 52.01 15 47.01 Z" fill="none" stroke="#000000" stroke-width="6" stroke-miterlimit="10" style="stroke: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));"/></g>
-</svg>

package/page-tools/page-agent-mask/cursor-fill.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-  <defs>
-  </defs>
-  <g xmlns="http://www.w3.org/2000/svg" style="filter: drop-shadow(light-dark(rgba(0, 0, 0, 0.4), rgba(237, 237, 237, 0.4)) 3px 4px 4px);"><path d="M 15 42 L 15 36.99 Q 15 31.99 23.7 31.99 L 28.05 31.99 Q 32.41 31.99 32.41 21.99 L 32.41 17 Q 32.41 12 41.09 16.95 L 76.31 37.05 Q 85 42 76.31 46.95 L 41.09 67.05 Q 32.41 72 32.41 62.01 L 32.41 57.01 Q 32.41 52.01 23.7 52.01 L 19.35 52.01 Q 15 52.01 15 47.01 Z" fill="#ffffff" stroke="none" style="fill: #ffffff;"/></g>
-</svg>

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

@@ -1,70 +0,0 @@
-.webmcp-page-agent-cursor {
-	position: absolute;
-	width: var(--cursor-size, 75px);
-	height: var(--cursor-size, 75px);
-	pointer-events: none;
-	z-index: 10000;
-}
-
-.webmcp-page-agent-cursorBorder {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	background: linear-gradient(45deg, rgb(57, 182, 255), rgb(189, 69, 251));
-	mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20fill='none'%3e%3cg%3e%3cpath%20d='M%2015%2042%20L%2015%2036.99%20Q%2015%2031.99%2023.7%2031.99%20L%2028.05%2031.99%20Q%2032.41%2031.99%2032.41%2021.99%20L%2032.41%2017%20Q%2032.41%2012%2041.09%2016.95%20L%2076.31%2037.05%20Q%2085%2042%2076.31%2046.95%20L%2041.09%2067.05%20Q%2032.41%2072%2032.41%2062.01%20L%2032.41%2057.01%20Q%2032.41%2052.01%2023.7%2052.01%20L%2019.35%2052.01%20Q%2015%2052.01%2015%2047.01%20Z'%20fill='none'%20stroke='%23000000'%20stroke-width='6'%20stroke-miterlimit='10'%20style='stroke:%20light-dark(rgb(0,%200,%200),%20rgb(255,%20255,%20255));'/%3e%3c/g%3e%3c/svg%3e");
-	mask-size: 100% 100%;
-	mask-repeat: no-repeat;
-
-	transform-origin: center;
-	transform: rotate(-90deg) scale(0.8);
-	margin-left: -10px;
-	margin-top: -18px;
-}
-
-.webmcp-page-agent-cursorFilling {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	background: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3e%3cdefs%3e%3c/defs%3e%3cg%20xmlns='http://www.w3.org/2000/svg'%20style='filter:%20drop-shadow(light-dark(rgba(0,%200,%200,%200.4),%20rgba(237,%20237,%20237,%200.4))%203px%204px%204px);'%3e%3cpath%20d='M%2015%2042%20L%2015%2036.99%20Q%2015%2031.99%2023.7%2031.99%20L%2028.05%2031.99%20Q%2032.41%2031.99%2032.41%2021.99%20L%2032.41%2017%20Q%2032.41%2012%2041.09%2016.95%20L%2076.31%2037.05%20Q%2085%2042%2076.31%2046.95%20L%2041.09%2067.05%20Q%2032.41%2072%2032.41%2062.01%20L%2032.41%2057.01%20Q%2032.41%2052.01%2023.7%2052.01%20L%2019.35%2052.01%20Q%2015%2052.01%2015%2047.01%20Z'%20fill='%23ffffff'%20stroke='none'%20style='fill:%20%23ffffff;'/%3e%3c/g%3e%3c/svg%3e");
-	background-size: 100% 100%;
-	background-repeat: no-repeat;
-
-	transform-origin: center;
-	transform: rotate(-90deg) scale(0.8);
-	margin-left: -10px;
-	margin-top: -18px;
-}
-
-.webmcp-page-agent-cursorRipple {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	pointer-events: none;
-	margin-left: -50%;
-	margin-top: -50%;
-
-	&::after {
-		content: '';
-		opacity: 0;
-		position: absolute;
-		inset: 0;
-		border: 4px solid rgba(57, 182, 255, 1);
-		border-radius: 50%;
-	}
-}
-
-.webmcp-page-agent-cursor.clicking .webmcp-page-agent-cursorRipple::after {
-	animation: webmcp-page-agent-cursor-ripple 300ms ease-out forwards;
-}
-
-@keyframes webmcp-page-agent-cursor-ripple {
-	0% {
-		transform: scale(0);
-		opacity: 1;
-	}
-
-	100% {
-		transform: scale(2);
-		opacity: 0;
-	}
-}

package/page-tools/page-agent-mask/hauwei.svg

@@ -1,25 +0,0 @@
-<svg viewBox="0 0 79.0834 79.4553" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="79.083374" height="79.455322" fill="none" customFrame="#000000">
---
-<defs>
-<g id="pixso_custom_effect_0">
-<effect x="6.000000" y="6.000000" visibility="visible" fill="rgb(0,0,0)" fill-opacity="0.180000007" effectType="dropShadow" stdDeviation="20" radius="0" />
-</g>
-<filter id="filter_0" width="79.083374" height="79.455322" x="0.000000" y="0.000000" filterUnits="userSpaceOnUse" customEffect="url(#pixso_custom_effect_0)" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix" />
-<feOffset dx="6.000000" dy="6.000000" in="SourceAlpha" />
-<feGaussianBlur stdDeviation="6.66666651" />
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0 " />
-<feBlend result="effect_dropShadow_1" in2="BackgroundImageFix" mode="normal" />
-<feBlend result="shape" in="SourceGraphic" in2="effect_dropShadow_1" mode="normal" />
-</filter>
-<linearGradient id="paint_linear_0" x1="18.4743214" x2="18.4213886" y1="-1.86264515e-09" y2="34.9221306" gradientUnits="userSpaceOnUse">
-<stop stop-color="rgb(255,181,96)" offset="0" stop-opacity="1" />
-<stop stop-color="rgb(255,120,114)" offset="0.5" stop-opacity="1" />
-<stop stop-color="rgb(241,109,237)" offset="1" stop-opacity="1" />
-</linearGradient>
-</defs>
-<g filter="url(#filter_0)">
-<path id="多边形 11" d="M20.2632 3.57771L34.6257 32.3027C35.4444 33.9402 33.8152 35.7258 32.1097 35.0603L19.2014 30.0229C18.7339 29.8404 18.2148 29.8404 17.7472 30.0229L4.83891 35.0603C3.13343 35.7258 1.50423 33.9402 2.32297 32.3027L16.6855 3.57771C17.4225 2.10361 19.5261 2.10361 20.2632 3.57771Z" fill="url(#paint_linear_0)" fill-rule="evenodd" transform="matrix(0.719908,-0.69407,0.69407,0.719908,2.00256,28.0095)" />
-<path id="多边形 11" d="M37.2169 32.6848C37.1578 32.189 37.0096 31.7039 36.7723 31.2294L22.4098 2.5044C22.1973 2.07946 21.9328 1.70554 21.6163 1.38261C21.3524 1.11342 21.0524 0.879671 20.7162 0.681366C20.3925 0.490407 20.0558 0.34434 19.7061 0.243163C19.312 0.129145 18.9014 0.0721366 18.4743 0.0721366C18.0472 0.0721366 17.6367 0.129145 17.2426 0.243163C16.8929 0.34434 16.5562 0.490407 16.2324 0.681366C15.8962 0.879671 15.5962 1.11342 15.3323 1.38261C15.0158 1.70553 14.7513 2.07946 14.5388 2.5044L0.176342 31.2294C-0.0609121 31.7039 -0.209128 32.189 -0.268305 32.6848C-0.316251 33.0865 -0.305747 33.4951 -0.236792 33.9108C-0.171059 34.307 -0.0570567 34.6809 0.105216 35.0326C0.292784 35.4391 0.544845 35.8158 0.861397 36.1627C1.17794 36.5097 1.53001 36.7951 1.91761 37.0191C2.25297 37.2128 2.61492 37.3606 3.00348 37.4623C3.41106 37.5689 3.81704 37.6168 4.22142 37.6058C4.72053 37.5922 5.21719 37.4889 5.71141 37.2961L18.4743 32.3154L31.2372 37.2961C31.7315 37.4889 32.2281 37.5922 32.7272 37.6058C33.1316 37.6168 33.5376 37.5689 33.9452 37.4623C34.3337 37.3606 34.6957 37.2128 35.0311 37.0191C35.4187 36.7951 35.7707 36.5097 36.0873 36.1627C36.4038 35.8158 36.6558 35.4391 36.8434 35.0327C37.0057 34.681 37.1197 34.307 37.1854 33.9108C37.2544 33.4951 37.2649 33.0865 37.2169 32.6848ZM34.6257 32.3027L20.2632 3.57771C19.5261 2.10361 17.4225 2.10361 16.6855 3.57771L2.32297 32.3027C1.50423 33.9402 3.13343 35.7258 4.83891 35.0603L17.7472 30.0229C18.2148 29.8404 18.7339 29.8404 19.2014 30.0229L32.1097 35.0603C33.8152 35.7258 35.4444 33.9402 34.6257 32.3027Z" fill="rgb(255,255,255)" fill-rule="evenodd" transform="matrix(0.719908,-0.69407,0.69407,0.719908,2.00256,28.0095)" />
-</g>
-</svg>