webmarker-js 0.1.0 → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Reid Barber
+
+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

@@ -11,11 +11,10 @@ Mark web pages for use with vision-language models.
 
 ## Overview
 
-**WebMarker** adds visual markings with labels to elements on a web page. This can be used for [Set-of-Mark (SoM)](https://github.com/microsoft/SoM) prompting, which improves visual grounding abilities of vision-language models such as GPT-4o, Claude 3.5, and Google Gemini 1.5.
+**WebMarker** adds visual markings with labels to elements on a web page. This can be used for [Set-of-Mark](https://github.com/microsoft/SoM) prompting, which improves visual grounding abilities of vision-language models such as GPT-4o, Claude 3.5, and Google Gemini 1.5.
 
 ![Screenshot of marked Google homepage](https://github.com/user-attachments/assets/722e1034-06d4-4ccd-a7d6-f03749435681)
 
-
 ## How it works
 
 **1. Call the `mark()` function**
@@ -24,7 +23,7 @@ This marks the interactive elements on the page, and returns an object containin
 
 - `element`: The interactive element that was marked.
 - `markElement`: The label element that was added to the page.
-- `maskElement`: The bounding box element that was added to the page.
+- `boundingBoxElement`: The bounding box element that was added to the page.
 
 You can use this information to build your prompt for the vision-language model.
 
@@ -58,7 +57,7 @@ Example response: click 0
 
 In a web browser (i.e. via Playwright), interact with elements as needed.
 
-For prompting or agent ideas, see the [WebVoyager](https://arxiv.org/abs/2401.13919) paper.
+For prompting or agent ideas, see the [WebVoyager](https://github.com/MinorJerry/WebVoyager) paper.
 
 ## Playwright example
 
@@ -71,6 +70,9 @@ await page.addScriptTag({
 // Mark the page and get the marked elements
 let markedElements = await page.evaluate(async () => await WebMarker.mark());
 
+// Click a marked element
+await page.locator('[data-mark-label="0"]').click();
+
 // (Optional) Check if page is marked
 let isMarked = await page.evaluate(async () => await WebMarker.isMarked());
 
@@ -87,19 +89,19 @@ A custom CSS selector to specify which elements to mark.
 - Type: `string`
 - Default: `"button, input, a, select, textarea"`
 
-### markAttribute
+### getLabel
 
-A custom attribute to add to the marked elements. This attribute contains the label of the mark.
+Provide a function for generating labels. By default, labels are generated as integers starting from 0.
 
-- Type: `string`
-- Default: `"data-mark-id"`
+- Type: `(element: Element, index: number) => string`
+- Default: `(_, index) => index.toString()`
 
-### markStyle
+### markAttribute
 
-A CSS style to apply to the label element. You can also specify a function that returns a CSS style object.
+A custom attribute to add to the marked elements. This attribute contains the label of the mark.
 
-- Type: `Readonly<Partial<CSSStyleDeclaration>> or (element: Element) => Readonly<Partial<CSSStyleDeclaration>>`
-- Default: `{backgroundColor: "red", color: "white", padding: "2px 4px", fontSize: "12px", fontWeight: "bold"}`
+- Type: `string`
+- Default: `"data-mark-label"`
 
 ### markPlacement
 
@@ -108,27 +110,27 @@ The placement of the mark relative to the element.
 - Type: `'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`
 - Default: `'top-start'`
 
-### maskStyle
+### markStyle
+
+A CSS style to apply to the label element. You can also specify a function that returns a CSS style object.
+
+- Type: `Partial<CSSStyleDeclaration> | (element: Element) => Partial<CSSStyleDeclaration>`
+- Default: `{backgroundColor: "red", color: "white", padding: "2px 4px", fontSize: "12px", fontWeight: "bold"}`
+
+### boundingBoxStyle
 
-A CSS style to apply to the bounding box element. You can also specify a function that returns a CSS style object. Bounding boxes are only shown if showMasks is true.
+A CSS style to apply to the bounding box element. You can also specify a function that returns a CSS style object. Bounding boxes are only shown if showBoundingBoxes is true.
 
-- Type: `Readonly<Partial<CSSStyleDeclaration>> or (element: Element) => Readonly<Partial<CSSStyleDeclaration>>`
+- Type: `Partial<CSSStyleDeclaration> | (element: Element) => Partial<CSSStyleDeclaration>`
 - Default: `{outline: "2px dashed red", backgroundColor: "transparent"}`
 
-### showMasks
+### showBoundingBoxes
 
 Whether or not to show bounding boxes around the elements.
 
 - Type: `boolean`
 - Default: `true`
 
-### labelGenerator
-
-Provide a function for generating labels. By default, labels are generated as integers starting from 0.
-
-- Type: `(element: Element, index: number) => string`
-- Default: `(_, index) => index.toString()`
-
 ### containerElement
 
 Provide a container element to query the elements to be marked. By default, the container element is document.body.
@@ -153,15 +155,15 @@ const markedElements = await mark({
   markAttribute: "data-test-id",
   // Use a blue mark with white text
   markStyle: { color: "white", backgroundColor: "blue", padding: 5 },
-  // Use a blue dashed outline mask with a transparent and slighly blue background
-  maskStyle: { outline: "2px dashed blue", backgroundColor: "rgba(0, 0, 255, 0.1)"},
+  // Use a blue dashed outline with a transparent and slighly blue background
+  boundingBoxStyle: { outline: "2px dashed blue", backgroundColor: "rgba(0, 0, 255, 0.1)"},
   // Place the mark at the top right corner of the element
   markPlacement: "top-end";
-  // Show masks over elements (defaults to true)
-  showMasks: true,
+  // Show bounding boxes over elements (defaults to true)
+  showBoundingBoxes: true,
   // Generate labels as 'Element 0', 'Element 1', 'Element 2'...
   // Defaults to '0', '1', '2'... if not provided.
-  labelGenerator: (element, index) => `Element ${index}`,
+  getLabel: (element, index) => `Element ${index}`,
   // A custom container element to query the elements to be marked.
   // Defaults to the document.body.
   containerElement: document.body.querySelector("main"),

package/dist/index.d.ts

@@ -1,43 +1,45 @@
 type Placement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+type StyleFunction = (element: Element) => Partial<CSSStyleDeclaration>;
+type StyleObject = Partial<CSSStyleDeclaration>;
 interface MarkOptions {
     /**
-     * A CSS selector to specify the elements to be marked.
+     * A CSS selector to query the elements to be marked.
      */
     selector?: string;
     /**
-     * Name for the attribute added to the marked elements. This attribute is used to store the label.
-     *
-     * @default 'data-mark-id'
+     * Provide a function for generating labels.
+     * By default, labels are generated as numbers starting from 0.
      */
-    markAttribute?: string;
+    getLabel?: (element: Element, index: number) => string;
     /**
-     * A CSS style to apply to the label element.
-     * You can also specify a function that returns a CSS style object.
+     * Name for the attribute added to the marked elements to store the mark label.
+     *
+     * @default 'data-mark-label'
      */
-    markStyle?: Readonly<Partial<CSSStyleDeclaration>> | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);
+    markAttribute?: string;
     /**
      * The placement of the mark relative to the element.
      *
      * @default 'top-start'
      */
     markPlacement?: Placement;
+    /**
+     * A CSS style to apply to the label element.
+     * You can also specify a function that returns a CSS style object.
+     */
+    markStyle?: StyleObject | StyleFunction;
     /**
      * A CSS style to apply to the bounding box element.
      * You can also specify a function that returns a CSS style object.
-     * Bounding boxes are only shown if `showMasks` is `true`.
+     * Bounding boxes are only shown if `showBoundingBoxes` is `true`.
      */
-    maskStyle?: Readonly<Partial<CSSStyleDeclaration>> | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);
+    boundingBoxStyle?: StyleObject | StyleFunction;
     /**
      * Whether or not to show bounding boxes around the elements.
      *
      * @default true
      */
-    showMasks?: boolean;
-    /**
-     * Provide a function for generating labels.
-     * By default, labels are generated as numbers starting from 0.
-     */
-    labelGenerator?: (element: Element, index: number) => string;
+    showBoundingBoxes?: boolean;
     /**
      * Provide a container element to query the elements to be marked.
      * By default, the container element is `document.body`.
@@ -53,7 +55,7 @@ interface MarkOptions {
 interface MarkedElement {
     element: Element;
     markElement: HTMLElement;
-    maskElement?: HTMLElement;
+    boundingBoxElement?: HTMLElement;
 }
 declare function mark(options?: MarkOptions): Promise<Record<string, MarkedElement>>;
 declare function unmark(): void;

package/dist/main.js

@@ -932,7 +932,9 @@ var WebMarker = (() => {
     return __async(this, arguments, function* (options = {}) {
       const {
         selector = "button, input, a, select, textarea",
-        markAttribute = "data-mark-id",
+        getLabel = (_, index) => index.toString(),
+        markAttribute = "data-mark-label",
+        markPlacement = "top-start",
         markStyle = {
           backgroundColor: "red",
           color: "white",
@@ -940,13 +942,11 @@ var WebMarker = (() => {
           fontSize: "12px",
           fontWeight: "bold"
         },
-        markPlacement = "top-start",
-        maskStyle = {
+        boundingBoxStyle = {
           outline: "2px dashed red",
           backgroundColor: "transparent"
         },
-        showMasks = true,
-        labelGenerator = (_, index) => index.toString(),
+        showBoundingBoxes = true,
         containerElement = document.body,
         viewPortOnly = false
       } = options;
@@ -958,14 +958,14 @@ var WebMarker = (() => {
       const markedElements = {};
       yield Promise.all(
         elements.map((element, index) => __async(this, null, function* () {
-          const label = labelGenerator(element, index);
+          const label = getLabel(element, index);
           const markElement = createMark(element, markStyle, label, markPlacement);
-          const maskElement = showMasks ? createMask(element, maskStyle, label) : void 0;
-          markedElements[label] = { element, markElement, maskElement };
+          const boundingBoxElement = showBoundingBoxes ? createBoundingBox(element, boundingBoxStyle, label) : void 0;
+          markedElements[label] = { element, markElement, boundingBoxElement };
           element.setAttribute(markAttribute, label);
         }))
       );
-      document.documentElement.dataset.webmarkered = "true";
+      document.documentElement.setAttribute("data-marked", "true");
       return markedElements;
     });
   }
@@ -987,14 +987,14 @@ var WebMarker = (() => {
     );
     return markElement;
   }
-  function createMask(element, style, label) {
-    const maskElement = document.createElement("div");
-    maskElement.className = "webmarker-mask";
-    maskElement.id = `webmarker-mask-${label}`;
-    document.body.appendChild(maskElement);
-    positionMask(maskElement, element);
+  function createBoundingBox(element, style, label) {
+    const boundingBoxElement = document.createElement("div");
+    boundingBoxElement.className = "webmarker-bounding-box";
+    boundingBoxElement.id = `webmarker-bounding-box-${label}`;
+    document.body.appendChild(boundingBoxElement);
+    positionBoundingBox(boundingBoxElement, element);
     applyStyle(
-      maskElement,
+      boundingBoxElement,
       {
         zIndex: "999999999",
         position: "absolute",
@@ -1002,7 +1002,7 @@ var WebMarker = (() => {
       },
       typeof style === "function" ? style(element) : style
     );
-    return maskElement;
+    return boundingBoxElement;
   }
   function positionMark(markElement, element, markPlacement) {
     function updatePosition() {
@@ -1018,36 +1018,36 @@ var WebMarker = (() => {
     }
     cleanupFns.push(autoUpdate(element, markElement, updatePosition));
   }
-  function positionMask(mask, element) {
+  function positionBoundingBox(boundingBox, element) {
     return __async(this, null, function* () {
       const { width, height } = element.getBoundingClientRect();
       function updatePosition() {
         return __async(this, null, function* () {
-          const { x: maskX, y: maskY } = yield computePosition2(element, mask, {
+          const { x, y } = yield computePosition2(element, boundingBox, {
             placement: "top-start"
           });
-          Object.assign(mask.style, {
-            left: `${maskX}px`,
-            top: `${maskY + height}px`,
+          Object.assign(boundingBox.style, {
+            left: `${x}px`,
+            top: `${y + height}px`,
             width: `${width}px`,
             height: `${height}px`
           });
         });
       }
-      cleanupFns.push(autoUpdate(element, mask, updatePosition));
+      cleanupFns.push(autoUpdate(element, boundingBox, updatePosition));
     });
   }
   function applyStyle(element, defaultStyle, customStyle) {
     Object.assign(element.style, defaultStyle, customStyle);
   }
   function unmark() {
-    document.querySelectorAll(".webmarker, .webmarker-mask").forEach((el) => el.remove());
-    document.documentElement.removeAttribute("data-webmarkered");
+    document.querySelectorAll(".webmarker, .webmarker-bounding-box").forEach((el) => el.remove());
+    document.documentElement.removeAttribute("data-marked");
     cleanupFns.forEach((fn) => fn());
     cleanupFns = [];
   }
   function isMarked() {
-    return document.documentElement.hasAttribute("data-webmarkered");
+    return document.documentElement.hasAttribute("data-marked");
   }
   if (typeof window !== "undefined") {
     window["mark"] = mark;

package/dist/module.js

@@ -908,7 +908,9 @@ function mark() {
   return __async(this, arguments, function* (options = {}) {
     const {
       selector = "button, input, a, select, textarea",
-      markAttribute = "data-mark-id",
+      getLabel = (_, index) => index.toString(),
+      markAttribute = "data-mark-label",
+      markPlacement = "top-start",
       markStyle = {
         backgroundColor: "red",
         color: "white",
@@ -916,13 +918,11 @@ function mark() {
         fontSize: "12px",
         fontWeight: "bold"
       },
-      markPlacement = "top-start",
-      maskStyle = {
+      boundingBoxStyle = {
         outline: "2px dashed red",
         backgroundColor: "transparent"
       },
-      showMasks = true,
-      labelGenerator = (_, index) => index.toString(),
+      showBoundingBoxes = true,
       containerElement = document.body,
       viewPortOnly = false
     } = options;
@@ -934,14 +934,14 @@ function mark() {
     const markedElements = {};
     yield Promise.all(
       elements.map((element, index) => __async(this, null, function* () {
-        const label = labelGenerator(element, index);
+        const label = getLabel(element, index);
         const markElement = createMark(element, markStyle, label, markPlacement);
-        const maskElement = showMasks ? createMask(element, maskStyle, label) : void 0;
-        markedElements[label] = { element, markElement, maskElement };
+        const boundingBoxElement = showBoundingBoxes ? createBoundingBox(element, boundingBoxStyle, label) : void 0;
+        markedElements[label] = { element, markElement, boundingBoxElement };
         element.setAttribute(markAttribute, label);
       }))
     );
-    document.documentElement.dataset.webmarkered = "true";
+    document.documentElement.setAttribute("data-marked", "true");
     return markedElements;
   });
 }
@@ -963,14 +963,14 @@ function createMark(element, style, label, markPlacement = "top-start") {
   );
   return markElement;
 }
-function createMask(element, style, label) {
-  const maskElement = document.createElement("div");
-  maskElement.className = "webmarker-mask";
-  maskElement.id = `webmarker-mask-${label}`;
-  document.body.appendChild(maskElement);
-  positionMask(maskElement, element);
+function createBoundingBox(element, style, label) {
+  const boundingBoxElement = document.createElement("div");
+  boundingBoxElement.className = "webmarker-bounding-box";
+  boundingBoxElement.id = `webmarker-bounding-box-${label}`;
+  document.body.appendChild(boundingBoxElement);
+  positionBoundingBox(boundingBoxElement, element);
   applyStyle(
-    maskElement,
+    boundingBoxElement,
     {
       zIndex: "999999999",
       position: "absolute",
@@ -978,7 +978,7 @@ function createMask(element, style, label) {
     },
     typeof style === "function" ? style(element) : style
   );
-  return maskElement;
+  return boundingBoxElement;
 }
 function positionMark(markElement, element, markPlacement) {
   function updatePosition() {
@@ -994,36 +994,36 @@ function positionMark(markElement, element, markPlacement) {
   }
   cleanupFns.push(autoUpdate(element, markElement, updatePosition));
 }
-function positionMask(mask, element) {
+function positionBoundingBox(boundingBox, element) {
   return __async(this, null, function* () {
     const { width, height } = element.getBoundingClientRect();
     function updatePosition() {
       return __async(this, null, function* () {
-        const { x: maskX, y: maskY } = yield computePosition2(element, mask, {
+        const { x, y } = yield computePosition2(element, boundingBox, {
           placement: "top-start"
         });
-        Object.assign(mask.style, {
-          left: `${maskX}px`,
-          top: `${maskY + height}px`,
+        Object.assign(boundingBox.style, {
+          left: `${x}px`,
+          top: `${y + height}px`,
           width: `${width}px`,
           height: `${height}px`
         });
       });
     }
-    cleanupFns.push(autoUpdate(element, mask, updatePosition));
+    cleanupFns.push(autoUpdate(element, boundingBox, updatePosition));
   });
 }
 function applyStyle(element, defaultStyle, customStyle) {
   Object.assign(element.style, defaultStyle, customStyle);
 }
 function unmark() {
-  document.querySelectorAll(".webmarker, .webmarker-mask").forEach((el) => el.remove());
-  document.documentElement.removeAttribute("data-webmarkered");
+  document.querySelectorAll(".webmarker, .webmarker-bounding-box").forEach((el) => el.remove());
+  document.documentElement.removeAttribute("data-marked");
   cleanupFns.forEach((fn) => fn());
   cleanupFns = [];
 }
 function isMarked() {
-  return document.documentElement.hasAttribute("data-webmarkered");
+  return document.documentElement.hasAttribute("data-marked");
 }
 if (typeof window !== "undefined") {
   window["mark"] = mark;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "webmarker-js",
-  "version": "0.1.0",
-  "description": "A library for marking web pages for Set-of-Mark (SoM) prompting with vision-language models.",
+  "version": "0.3.0",
+  "description": "A library for marking web pages for Set-of-Mark prompting with vision-language models.",
   "source": "src/index.ts",
   "main": "dist/main.js",
   "module": "dist/module.js",

package/src/index.ts

@@ -14,49 +14,48 @@ type Placement =
   | "left-start"
   | "left-end";
 
+type StyleFunction = (element: Element) => Partial<CSSStyleDeclaration>;
+type StyleObject = Partial<CSSStyleDeclaration>;
+
 interface MarkOptions {
   /**
-   * A CSS selector to specify the elements to be marked.
+   * A CSS selector to query the elements to be marked.
    */
   selector?: string;
   /**
-   * Name for the attribute added to the marked elements. This attribute is used to store the label.
-   *
-   * @default 'data-mark-id'
+   * Provide a function for generating labels.
+   * By default, labels are generated as numbers starting from 0.
    */
-  markAttribute?: string;
+  getLabel?: (element: Element, index: number) => string;
   /**
-   * A CSS style to apply to the label element.
-   * You can also specify a function that returns a CSS style object.
+   * Name for the attribute added to the marked elements to store the mark label.
+   *
+   * @default 'data-mark-label'
    */
-  markStyle?:
-    | Readonly<Partial<CSSStyleDeclaration>>
-    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);
+  markAttribute?: string;
   /**
    * The placement of the mark relative to the element.
    *
    * @default 'top-start'
    */
   markPlacement?: Placement;
+  /**
+   * A CSS style to apply to the label element.
+   * You can also specify a function that returns a CSS style object.
+   */
+  markStyle?: StyleObject | StyleFunction;
   /**
    * A CSS style to apply to the bounding box element.
    * You can also specify a function that returns a CSS style object.
-   * Bounding boxes are only shown if `showMasks` is `true`.
+   * Bounding boxes are only shown if `showBoundingBoxes` is `true`.
    */
-  maskStyle?:
-    | Readonly<Partial<CSSStyleDeclaration>>
-    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);
+  boundingBoxStyle?: StyleObject | StyleFunction;
   /**
    * Whether or not to show bounding boxes around the elements.
    *
    * @default true
    */
-  showMasks?: boolean;
-  /**
-   * Provide a function for generating labels.
-   * By default, labels are generated as numbers starting from 0.
-   */
-  labelGenerator?: (element: Element, index: number) => string;
+  showBoundingBoxes?: boolean;
   /**
    * Provide a container element to query the elements to be marked.
    * By default, the container element is `document.body`.
@@ -73,7 +72,7 @@ interface MarkOptions {
 interface MarkedElement {
   element: Element;
   markElement: HTMLElement;
-  maskElement?: HTMLElement;
+  boundingBoxElement?: HTMLElement;
 }
 
 let cleanupFns: (() => void)[] = [];
@@ -83,7 +82,9 @@ async function mark(
 ): Promise<Record<string, MarkedElement>> {
   const {
     selector = "button, input, a, select, textarea",
-    markAttribute = "data-mark-id",
+    getLabel = (_, index) => index.toString(),
+    markAttribute = "data-mark-label",
+    markPlacement = "top-start",
     markStyle = {
       backgroundColor: "red",
       color: "white",
@@ -91,13 +92,11 @@ async function mark(
       fontSize: "12px",
       fontWeight: "bold",
     },
-    markPlacement = "top-start",
-    maskStyle = {
+    boundingBoxStyle = {
       outline: "2px dashed red",
       backgroundColor: "transparent",
     },
-    showMasks = true,
-    labelGenerator = (_, index) => index.toString(),
+    showBoundingBoxes = true,
     containerElement = document.body,
     viewPortOnly = false,
   } = options;
@@ -112,27 +111,25 @@ async function mark(
 
   await Promise.all(
     elements.map(async (element, index) => {
-      const label = labelGenerator(element, index);
+      const label = getLabel(element, index);
       const markElement = createMark(element, markStyle, label, markPlacement);
 
-      const maskElement = showMasks
-        ? createMask(element, maskStyle, label)
+      const boundingBoxElement = showBoundingBoxes
+        ? createBoundingBox(element, boundingBoxStyle, label)
         : undefined;
 
-      markedElements[label] = { element, markElement, maskElement };
+      markedElements[label] = { element, markElement, boundingBoxElement };
       element.setAttribute(markAttribute, label);
     })
   );
 
-  document.documentElement.dataset.webmarkered = "true";
+  document.documentElement.setAttribute("data-marked", "true");
   return markedElements;
 }
 
 function createMark(
   element: Element,
-  style:
-    | Readonly<Partial<CSSStyleDeclaration>>
-    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),
+  style: StyleObject | StyleFunction,
   label: string,
   markPlacement: Placement = "top-start"
 ): HTMLElement {
@@ -154,20 +151,18 @@ function createMark(
   return markElement;
 }
 
-function createMask(
+function createBoundingBox(
   element: Element,
-  style:
-    | Readonly<Partial<CSSStyleDeclaration>>
-    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),
+  style: StyleObject | StyleFunction,
   label: string
 ): HTMLElement {
-  const maskElement = document.createElement("div");
-  maskElement.className = "webmarker-mask";
-  maskElement.id = `webmarker-mask-${label}`;
-  document.body.appendChild(maskElement);
-  positionMask(maskElement, element);
+  const boundingBoxElement = document.createElement("div");
+  boundingBoxElement.className = "webmarker-bounding-box";
+  boundingBoxElement.id = `webmarker-bounding-box-${label}`;
+  document.body.appendChild(boundingBoxElement);
+  positionBoundingBox(boundingBoxElement, element);
   applyStyle(
-    maskElement,
+    boundingBoxElement,
     {
       zIndex: "999999999",
       position: "absolute",
@@ -175,7 +170,7 @@ function createMask(
     },
     typeof style === "function" ? style(element) : style
   );
-  return maskElement;
+  return boundingBoxElement;
 }
 
 function positionMark(
@@ -196,41 +191,41 @@ function positionMark(
   cleanupFns.push(autoUpdate(element, markElement, updatePosition));
 }
 
-async function positionMask(mask: HTMLElement, element: Element) {
+async function positionBoundingBox(boundingBox: HTMLElement, element: Element) {
   const { width, height } = element.getBoundingClientRect();
   async function updatePosition() {
-    const { x: maskX, y: maskY } = await computePosition(element, mask, {
+    const { x, y } = await computePosition(element, boundingBox, {
       placement: "top-start",
     });
-    Object.assign(mask.style, {
-      left: `${maskX}px`,
-      top: `${maskY + height}px`,
+    Object.assign(boundingBox.style, {
+      left: `${x}px`,
+      top: `${y + height}px`,
       width: `${width}px`,
       height: `${height}px`,
     });
   }
-  cleanupFns.push(autoUpdate(element, mask, updatePosition));
+  cleanupFns.push(autoUpdate(element, boundingBox, updatePosition));
 }
 
 function applyStyle(
   element: HTMLElement,
-  defaultStyle: Readonly<Partial<CSSStyleDeclaration>>,
-  customStyle: Readonly<Partial<CSSStyleDeclaration>>
+  defaultStyle: Partial<CSSStyleDeclaration>,
+  customStyle: Partial<CSSStyleDeclaration>
 ): void {
   Object.assign(element.style, defaultStyle, customStyle);
 }
 
 function unmark(): void {
   document
-    .querySelectorAll(".webmarker, .webmarker-mask")
+    .querySelectorAll(".webmarker, .webmarker-bounding-box")
     .forEach((el) => el.remove());
-  document.documentElement.removeAttribute("data-webmarkered");
+  document.documentElement.removeAttribute("data-marked");
   cleanupFns.forEach((fn) => fn());
   cleanupFns = [];
 }
 
 function isMarked(): boolean {
-  return document.documentElement.hasAttribute("data-webmarkered");
+  return document.documentElement.hasAttribute("data-marked");
 }
 
 if (typeof window !== "undefined") {

package/test-results/.last-run.json

@@ -1,6 +1,4 @@
 {
-  "status": "failed",
-  "failedTests": [
-    "bcbd25456d68a5d49fac-61d7a7d69e576e88625b"
-  ]
+  "status": "passed",
+  "failedTests": []
 }