@opentiny/next-sdk 0.4.1 → 0.4.3

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,198 +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;
-      }
-  `
-
-function isElementViewport(element: HTMLElement) {
-  const rect = element.getBoundingClientRect()
-  return (
-    rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-  )
-}
-
-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()
-  const overlays = []
-
-  // 3、 遍历 refMap
-  for (const [index, el] of refMap.entries()) {
-    if (!isElementViewport(el)) continue
-
-    const color = colors[index % colors.length]
-    const textColor = color + opacity
-
-    const rect = el.getBoundingClientRect()
-    if (rect.width === 0 || rect.height === 0) continue
-
-    const overlay = document.createElement('div')
-    overlay.style.border = `2px solid ${textColor}`
-
-    const top = rect.top + iframeOffset.y
-    const left = rect.left + iframeOffset.x
-
-    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 = `${rect.height - 4}px`
-    text.style.lineHeight = `${rect.height - 4}px`
-    text.textContent = index.toString()
-    overlay.appendChild(text)
-
-    fragment.appendChild(overlay)
-    overlays.push({ element: overlay, initialRect: rect })
-  }
-
-  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;
-}

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

@@ -1,279 +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-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;
-	}
-}
-
-.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' }
-      })
-      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'))
-  }
-}

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>