webmarker-js 0.0.2 → 0.0.4

package/README.md

@@ -11,6 +11,8 @@ Mark web pages for use with vision-language models.
 
 ## Overview
 
+🚧 Under Construction
+
 **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-4V, Claude 3, and Google Gemini 1.5.
 
 ## Usage
@@ -30,29 +32,53 @@ console.log(elements.get("0").element);
 unmark();
 ```
 
-### Options
+## Options
 
-```javascript
+- **selector**: A custom CSS selector to specify which elements to mark.
+  - Type: `string`
+  - Default: `"button, input, a, select, textarea"`
+- **markStyle**: A CSS style to apply to the label element. You can also specify a function that returns a CSS style object.
+  - Type: `Readonly<Partial<CSSStyleDeclaration>> or (element: Element) => Readonly<Partial<CSSStyleDeclaration>>`
+  - Default: `{backgroundColor: "red", color: "white", padding: "2px 4px", fontSize: "12px", fontWeight: "bold"}`
+- **markPlacement**: 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**: 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.
+  - Type: `Readonly<Partial<CSSStyleDeclaration>> or (element: Element) => Readonly<Partial<CSSStyleDeclaration>>`
+  - Default: `{outline: "2px dashed red", backgroundColor: "transparent"}`
+- **showMasks**: 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 numbers 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.
+  - Type: `Element`
+  - Default: `document.body`
+- **viewPortOnly**: Only mark elements that are visible in the current viewport.
+  - Type: `boolean`
+  - Default: `false`
+
+### Advanced example
+
+```typescript
 let elements = mark({
-  // A custom CSS selector for which elements to mark.
-  // The default selector will select all interactive elements.
+  // Only mark buttons and inputs
   selector: "button, input",
-  // A custom CSS style to apply to the mark element.
+  // Use a blue mark with white text
   markStyle: { color: "white", backgroundColor: "blue", padding: 5 },
-  // A custom CSS style to apply to the mask element.
-  // Use a transparent background to have it act as a bounding box.
-  maskStyle: { outline: "2px dashed blue", backgroundColor: "transparent" },
-  // The placement of the mark relative to the element.
-  markPlacement: "top-start";
-  // Whether or not to show masks over elements.
-  // Defaults to true.
+  // 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)"},
+  // Place the mark at the top right corner of the element
+  markPlacement: "top-end";
+  // Show masks over elements (defaults to true)
   showMasks: true,
-  // A custom function for generating the labels.
+  // Generate labels as 'Element 0', 'Element 1', 'Element 2'...
   // Defaults to '0', '1', '2'... if not provided.
   labelGenerator: (element, index) => `Element ${index}`,
-  // A container element to query the elements to be marked.
-  // Defaults to the document.
-  containerElement: document.body,
+  // A custom container element to query the elements to be marked.
+  // Defaults to the document.body.
+  containerElement: document.body.querySelector("main"),
   // Only mark elements that are visible in the current viewport
   viewPortOnly: true,
 });

package/dist/main.js

@@ -300,6 +300,9 @@ function $fd046e7a82b9f872$export$3522532a010241a0() {
 function $fd046e7a82b9f872$export$3b489baf08eae67a() {
     return document.documentElement.hasAttribute("data-webmarkered");
 }
+window["mark"] = $fd046e7a82b9f872$export$bf7f2fce5c1cf636;
+window["unmark"] = $fd046e7a82b9f872$export$3522532a010241a0;
+window["isMarked"] = $fd046e7a82b9f872$export$3b489baf08eae67a;
 
 
 //# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;A,I,kC,a,U,S,I,S,O,E,U,E,C,E,S;I,S,M,K;Q,O,iB,I,Q,I,E,S,O;Y,Q;Q;I;I,O,I,C,K,C,I,O,C,E,S,O,E,M;Q,S,U,K;Y,I;gB,K,U,I,C;Y,E,O,G;gB,O;Y;Q;Q,S,S,K;Y,I;gB,K,S,C,Q,C;Y,E,O,G;gB,O;Y;Q;Q,S,K,M;Y,O,I,G,Q,O,K,I,M,O,K,E,I,C,W;Q;Q,K,A,C,Y,U,K,C,S,c,E,C,E,I;I;A;A,I,oC,a,U,W,I,S,O,E,I;I,I,I;Q,O;Q,M;Y,I,C,C,E,G,G,M,C,C,E;Y,O,C,C,E;Q;Q,M,E;Q,K,E;I,G,G,G,G;I,O,I;Q,M,K;Q,S,K;Q,U,K;I,G,O,W,c,C,C,C,O,Q,C,G;Q,O,I;I,C,G;I,S,K,C;Q,O,S,C;Y,O,K;gB;gB;a;Q;I;I,S,K,E;Q,I,G,M,I,U;Q,M,K,C,I,G,E,C,E,I,C,I,C,C,G,E,I;Y,I,I,G,K,C,I,E,C,E,G,I,C,C,S,G,E,C,E,G,C,C,Q,I,C,A,C,I,C,C,S,A,K,E,I,C,I,C,I,E,I,A,K,C,A,C,I,E,I,C,G,E,C,E,C,E,I,E,O;Y,I,I,G,G,K;gB,E,C,E,G;gB,E,K;a;Y,O,E,C,E;gB,K;gB,K;oB,I;oB;gB,K;oB,E,K;oB,O;wB,O,E,C,E;wB,M;oB;gB,K;oB,E,K;oB,I,E,C,E;oB,K;wB;qB;oB;gB,K;oB,K,E,G,C,G;oB,E,I,C,G;oB;gB;oB,I,C,C,I,E,I,E,I,E,M,G,K,C,C,E,M,G,E,A,K,C,E,C,E,K,K,E,C,E,K,C,G;wB,I;wB;oB;oB,I,E,C,E,K,K,C,C,K,E,C,E,G,C,C,E,I,E,C,E,G,C,C,E,G;wB,E,K,G,E,C,E;wB;oB;oB,I,E,C,E,K,K,E,K,G,C,C,E,E;wB,E,K,G,C,C,E;wB,I;wB;oB;oB,I,K,E,K,G,C,C,E,E;wB,E,K,G,C,C,E;wB,E,G,C,I,C;wB;oB;oB,I,C,C,E,E,E,G,C,G;oB,E,I,C,G;oB;Y;Y,K,K,I,C,S;Q,E,O,G;Y,K;gB;gB;a;Y,I;Q,S;Y,I,I;Q;Q,I,E,C,E,G,G,M,E,C,E;Q,O;Y,O,E,C,E,G,E,C,E,G,K;Y,M;Q;I;A;AAwEA,IAA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","sources":["src/index.ts"],"sourcesContent":["import { autoUpdate, computePosition } from \"@floating-ui/dom\";\n\ntype Placement =\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\";\n\ninterface MarkOptions {\n  /**\n   * A CSS selector to specify the elements to be marked.\n   */\n  selector?: string;\n  /**\n   * A CSS style to apply to the label element.\n   * You can also specify a function that returns a CSS style object.\n   */\n  markStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * The placement of the mark relative to the element.\n   *\n   * @default 'top-start'\n   */\n  markPlacement?: Placement;\n  /**\n   * A CSS style to apply to the bounding box element.\n   * You can also specify a function that returns a CSS style object.\n   * Bounding boxes are only shown if `showMasks` is `true`.\n   */\n  maskStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * Whether or not to show bounding boxes around the elements.\n   *\n   * @default true\n   */\n  showMasks?: boolean;\n  /**\n   * Provide a function for generating labels.\n   * By default, labels are generated as numbers starting from 0.\n   */\n  labelGenerator?: (element: Element, index: number) => string;\n  /**\n   * Provide a container element to query the elements to be marked.\n   * By default, the container element is `document.body`.\n   */\n  containerElement?: Element;\n  /**\n   * Only mark elements that are visible in the current viewport\n   *\n   * @default false\n   */\n  viewPortOnly?: boolean;\n}\n\ninterface MarkedElement {\n  element: Element;\n  markElement: HTMLElement;\n  maskElement?: HTMLElement;\n}\n\nlet cleanupFns: (() => void)[] = [];\n\nasync function mark(\n  options: MarkOptions = {}\n): Promise<Map<string, MarkedElement>> {\n  const {\n    selector = \"button, input, a, select, textarea\",\n    markStyle = {\n      backgroundColor: \"red\",\n      color: \"white\",\n      padding: \"2px 4px\",\n      fontSize: \"12px\",\n      fontWeight: \"bold\",\n    },\n    markPlacement = \"top-start\",\n    maskStyle = {\n      outline: \"2px dashed red\",\n      backgroundColor: \"transparent\",\n    },\n    showMasks = true,\n    labelGenerator = (_, index) => index.toString(),\n    containerElement = document.body,\n    viewPortOnly = false,\n  } = options;\n\n  const elements = Array.from(\n    containerElement.querySelectorAll(selector)\n  ).filter(\n    (el) => !viewPortOnly || el.getBoundingClientRect().top < window.innerHeight\n  );\n\n  const markedElements = new Map<string, MarkedElement>();\n\n  await Promise.all(\n    elements.map(async (element, index) => {\n      const label = labelGenerator(element, index);\n      const markElement = createMark(element, markStyle, label, markPlacement);\n\n      const maskElement = showMasks\n        ? createMask(element, maskStyle, label)\n        : undefined;\n\n      markedElements.set(label, { element, markElement, maskElement });\n      element.setAttribute(\"data-webmarkeredby\", `webmarker-${label}`);\n    })\n  );\n\n  document.documentElement.dataset.webmarkered = \"true\";\n  return markedElements;\n}\n\nfunction createMark(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string,\n  markPlacement: Placement = \"top-start\"\n): HTMLElement {\n  const markElement = document.createElement(\"div\");\n  markElement.className = \"webmarker\";\n  markElement.id = `webmarker-${label}`;\n  markElement.textContent = label;\n  document.body.appendChild(markElement);\n  positionMark(markElement, element, markPlacement);\n  applyStyle(\n    markElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return markElement;\n}\n\nfunction createMask(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string\n): HTMLElement {\n  const maskElement = document.createElement(\"div\");\n  maskElement.className = \"webmarkermask\";\n  maskElement.id = `webmarkermask-${label}`;\n  document.body.appendChild(maskElement);\n  positionMask(maskElement, element);\n  applyStyle(\n    maskElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return maskElement;\n}\n\nfunction positionMark(\n  markElement: HTMLElement,\n  element: Element,\n  markPlacement: Placement\n) {\n  async function updatePosition() {\n    const { x, y } = await computePosition(element, markElement, {\n      placement: markPlacement,\n    });\n    Object.assign(markElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n  }\n\n  cleanupFns.push(autoUpdate(element, markElement, updatePosition));\n}\n\nasync function positionMask(mask: HTMLElement, element: Element) {\n  const { width, height } = element.getBoundingClientRect();\n  async function updatePosition() {\n    const { x: maskX, y: maskY } = await computePosition(element, mask, {\n      placement: \"top-start\",\n    });\n    Object.assign(mask.style, {\n      left: `${maskX}px`,\n      top: `${maskY + height}px`,\n      width: `${width}px`,\n      height: `${height}px`,\n    });\n  }\n  cleanupFns.push(autoUpdate(element, mask, updatePosition));\n}\n\nfunction applyStyle(\n  element: HTMLElement,\n  defaultStyle: Readonly<Partial<CSSStyleDeclaration>>,\n  customStyle: Readonly<Partial<CSSStyleDeclaration>>\n): void {\n  Object.assign(element.style, defaultStyle, customStyle);\n}\n\nfunction unmark(): void {\n  document\n    .querySelectorAll(\".webmarker, .webmarkermask\")\n    .forEach((el) => el.remove());\n  document.documentElement.removeAttribute(\"data-webmarkered\");\n  cleanupFns.forEach((fn) => fn());\n  cleanupFns = [];\n}\n\nfunction isMarked(): boolean {\n  return document.documentElement.hasAttribute(\"data-webmarkered\");\n}\n\nexport { mark, unmark, isMarked };\nexport type { MarkOptions, MarkedElement, Placement };\n"],"names":[],"version":3,"file":"main.js.map"}
+{"mappings":";;;;;;;;;;;A,I,kC,a,U,S,I,S,O,E,U,E,C,E,S;I,S,M,K;Q,O,iB,I,Q,I,E,S,O;Y,Q;Q;I;I,O,I,C,K,C,I,O,C,E,S,O,E,M;Q,S,U,K;Y,I;gB,K,U,I,C;Y,E,O,G;gB,O;Y;Q;Q,S,S,K;Y,I;gB,K,S,C,Q,C;Y,E,O,G;gB,O;Y;Q;Q,S,K,M;Y,O,I,G,Q,O,K,I,M,O,K,E,I,C,W;Q;Q,K,A,C,Y,U,K,C,S,c,E,C,E,I;I;A;A,I,oC,a,U,W,I,S,O,E,I;I,I,I;Q,O;Q,M;Y,I,C,C,E,G,G,M,C,C,E;Y,O,C,C,E;Q;Q,M,E;Q,K,E;I,G,G,G,G;I,O,I;Q,M,K;Q,S,K;Q,U,K;I,G,O,W,c,C,C,C,O,Q,C,G;Q,O,I;I,C,G;I,S,K,C;Q,O,S,C;Y,O,K;gB;gB;a;Q;I;I,S,K,E;Q,I,G,M,I,U;Q,M,K,C,I,G,E,C,E,I,C,I,C,C,G,E,I;Y,I,I,G,K,C,I,E,C,E,G,I,C,C,S,G,E,C,E,G,C,C,Q,I,C,A,C,I,C,C,S,A,K,E,I,C,I,C,I,E,I,A,K,C,A,C,I,E,I,C,G,E,C,E,C,E,I,E,O;Y,I,I,G,G,K;gB,E,C,E,G;gB,E,K;a;Y,O,E,C,E;gB,K;gB,K;oB,I;oB;gB,K;oB,E,K;oB,O;wB,O,E,C,E;wB,M;oB;gB,K;oB,E,K;oB,I,E,C,E;oB,K;wB;qB;oB;gB,K;oB,K,E,G,C,G;oB,E,I,C,G;oB;gB;oB,I,C,C,I,E,I,E,I,E,M,G,K,C,C,E,M,G,E,A,K,C,E,C,E,K,K,E,C,E,K,C,G;wB,I;wB;oB;oB,I,E,C,E,K,K,C,C,K,E,C,E,G,C,C,E,I,E,C,E,G,C,C,E,G;wB,E,K,G,E,C,E;wB;oB;oB,I,E,C,E,K,K,E,K,G,C,C,E,E;wB,E,K,G,C,C,E;wB,I;wB;oB;oB,I,K,E,K,G,C,C,E,E;wB,E,K,G,C,C,E;wB,E,G,C,I,C;wB;oB;oB,I,C,C,E,E,E,G,C,G;oB,E,I,C,G;oB;Y;Y,K,K,I,C,S;Q,E,O,G;Y,K;gB;gB;a;Y,I;Q,S;Y,I,I;Q;Q,I,E,C,E,G,G,M,E,C,E;Q,O;Y,O,E,C,E,G,E,C,E,G,K;Y,M;Q;I;A;AAwEA,IAA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","sources":["src/index.ts"],"sourcesContent":["import { autoUpdate, computePosition } from \"@floating-ui/dom\";\n\ntype Placement =\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\";\n\ninterface MarkOptions {\n  /**\n   * A CSS selector to specify the elements to be marked.\n   */\n  selector?: string;\n  /**\n   * A CSS style to apply to the label element.\n   * You can also specify a function that returns a CSS style object.\n   */\n  markStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * The placement of the mark relative to the element.\n   *\n   * @default 'top-start'\n   */\n  markPlacement?: Placement;\n  /**\n   * A CSS style to apply to the bounding box element.\n   * You can also specify a function that returns a CSS style object.\n   * Bounding boxes are only shown if `showMasks` is `true`.\n   */\n  maskStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * Whether or not to show bounding boxes around the elements.\n   *\n   * @default true\n   */\n  showMasks?: boolean;\n  /**\n   * Provide a function for generating labels.\n   * By default, labels are generated as numbers starting from 0.\n   */\n  labelGenerator?: (element: Element, index: number) => string;\n  /**\n   * Provide a container element to query the elements to be marked.\n   * By default, the container element is `document.body`.\n   */\n  containerElement?: Element;\n  /**\n   * Only mark elements that are visible in the current viewport\n   *\n   * @default false\n   */\n  viewPortOnly?: boolean;\n}\n\ninterface MarkedElement {\n  element: Element;\n  markElement: HTMLElement;\n  maskElement?: HTMLElement;\n}\n\nlet cleanupFns: (() => void)[] = [];\n\nasync function mark(\n  options: MarkOptions = {}\n): Promise<Map<string, MarkedElement>> {\n  const {\n    selector = \"button, input, a, select, textarea\",\n    markStyle = {\n      backgroundColor: \"red\",\n      color: \"white\",\n      padding: \"2px 4px\",\n      fontSize: \"12px\",\n      fontWeight: \"bold\",\n    },\n    markPlacement = \"top-start\",\n    maskStyle = {\n      outline: \"2px dashed red\",\n      backgroundColor: \"transparent\",\n    },\n    showMasks = true,\n    labelGenerator = (_, index) => index.toString(),\n    containerElement = document.body,\n    viewPortOnly = false,\n  } = options;\n\n  const elements = Array.from(\n    containerElement.querySelectorAll(selector)\n  ).filter(\n    (el) => !viewPortOnly || el.getBoundingClientRect().top < window.innerHeight\n  );\n\n  const markedElements = new Map<string, MarkedElement>();\n\n  await Promise.all(\n    elements.map(async (element, index) => {\n      const label = labelGenerator(element, index);\n      const markElement = createMark(element, markStyle, label, markPlacement);\n\n      const maskElement = showMasks\n        ? createMask(element, maskStyle, label)\n        : undefined;\n\n      markedElements.set(label, { element, markElement, maskElement });\n      element.setAttribute(\"data-webmarkeredby\", `webmarker-${label}`);\n    })\n  );\n\n  document.documentElement.dataset.webmarkered = \"true\";\n  return markedElements;\n}\n\nfunction createMark(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string,\n  markPlacement: Placement = \"top-start\"\n): HTMLElement {\n  const markElement = document.createElement(\"div\");\n  markElement.className = \"webmarker\";\n  markElement.id = `webmarker-${label}`;\n  markElement.textContent = label;\n  document.body.appendChild(markElement);\n  positionMark(markElement, element, markPlacement);\n  applyStyle(\n    markElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return markElement;\n}\n\nfunction createMask(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string\n): HTMLElement {\n  const maskElement = document.createElement(\"div\");\n  maskElement.className = \"webmarkermask\";\n  maskElement.id = `webmarkermask-${label}`;\n  document.body.appendChild(maskElement);\n  positionMask(maskElement, element);\n  applyStyle(\n    maskElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return maskElement;\n}\n\nfunction positionMark(\n  markElement: HTMLElement,\n  element: Element,\n  markPlacement: Placement\n) {\n  async function updatePosition() {\n    const { x, y } = await computePosition(element, markElement, {\n      placement: markPlacement,\n    });\n    Object.assign(markElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n  }\n\n  cleanupFns.push(autoUpdate(element, markElement, updatePosition));\n}\n\nasync function positionMask(mask: HTMLElement, element: Element) {\n  const { width, height } = element.getBoundingClientRect();\n  async function updatePosition() {\n    const { x: maskX, y: maskY } = await computePosition(element, mask, {\n      placement: \"top-start\",\n    });\n    Object.assign(mask.style, {\n      left: `${maskX}px`,\n      top: `${maskY + height}px`,\n      width: `${width}px`,\n      height: `${height}px`,\n    });\n  }\n  cleanupFns.push(autoUpdate(element, mask, updatePosition));\n}\n\nfunction applyStyle(\n  element: HTMLElement,\n  defaultStyle: Readonly<Partial<CSSStyleDeclaration>>,\n  customStyle: Readonly<Partial<CSSStyleDeclaration>>\n): void {\n  Object.assign(element.style, defaultStyle, customStyle);\n}\n\nfunction unmark(): void {\n  document\n    .querySelectorAll(\".webmarker, .webmarkermask\")\n    .forEach((el) => el.remove());\n  document.documentElement.removeAttribute(\"data-webmarkered\");\n  cleanupFns.forEach((fn) => fn());\n  cleanupFns = [];\n}\n\nfunction isMarked(): boolean {\n  return document.documentElement.hasAttribute(\"data-webmarkered\");\n}\n\nwindow[\"mark\"] = mark;\nwindow[\"unmark\"] = unmark;\nwindow[\"isMarked\"] = isMarked;\n\nexport { mark, unmark, isMarked };\nexport type { MarkOptions, MarkedElement, Placement };\n"],"names":[],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -292,6 +292,9 @@ function $2df9d79b6788b58e$export$3522532a010241a0() {
 function $2df9d79b6788b58e$export$3b489baf08eae67a() {
     return document.documentElement.hasAttribute("data-webmarkered");
 }
+window["mark"] = $2df9d79b6788b58e$export$bf7f2fce5c1cf636;
+window["unmark"] = $2df9d79b6788b58e$export$3522532a010241a0;
+window["isMarked"] = $2df9d79b6788b58e$export$3b489baf08eae67a;
 
 
 export {$2df9d79b6788b58e$export$bf7f2fce5c1cf636 as mark, $2df9d79b6788b58e$export$3522532a010241a0 as unmark, $2df9d79b6788b58e$export$3b489baf08eae67a as isMarked};

package/dist/module.js.map

@@ -1 +1 @@
-{"mappings":";;;A,I,kC,a,U,S,I,S,O,E,U,E,C,E,S;I,S,M,K;Q,O,iB,I,Q,I,E,S,O;Y,Q;Q;I;I,O,I,C,K,C,I,O,C,E,S,O,E,M;Q,S,U,K;Y,I;gB,K,U,I,C;Y,E,O,G;gB,O;Y;Q;Q,S,S,K;Y,I;gB,K,S,C,Q,C;Y,E,O,G;gB,O;Y;Q;Q,S,K,M;Y,O,I,G,Q,O,K,I,M,O,K,E,I,C,W;Q;Q,K,A,C,Y,U,K,C,S,c,E,C,E,I;I;A;A,I,oC,a,U,W,I,S,O,E,I;I,I,I;Q,O;Q,M;Y,I,C,C,E,G,G,M,C,C,E;Y,O,C,C,E;Q;Q,M,E;Q,K,E;I,G,G,G,G;I,O,I;Q,M,K;Q,S,K;Q,U,K;I,G,O,W,c,C,C,C,O,Q,C,G;Q,O,I;I,C,G;I,S,K,C;Q,O,S,C;Y,O,K;gB;gB;a;Q;I;I,S,K,E;Q,I,G,M,I,U;Q,M,K,C,I,G,E,C,E,I,C,I,C,C,G,E,I;Y,I,I,G,K,C,I,E,C,E,G,I,C,C,S,G,E,C,E,G,C,C,Q,I,C,A,C,I,C,C,S,A,K,E,I,C,I,C,I,E,I,A,K,C,A,C,I,E,I,C,G,E,C,E,C,E,I,E,O;Y,I,I,G,G,K;gB,E,C,E,G;gB,E,K;a;Y,O,E,C,E;gB,K;gB,K;oB,I;oB;gB,K;oB,E,K;oB,O;wB,O,E,C,E;wB,M;oB;gB,K;oB,E,K;oB,I,E,C,E;oB,K;wB;qB;oB;gB,K;oB,K,E,G,C,G;oB,E,I,C,G;oB;gB;oB,I,C,C,I,E,I,E,I,E,M,G,K,C,C,E,M,G,E,A,K,C,E,C,E,K,K,E,C,E,K,C,G;wB,I;wB;oB;oB,I,E,C,E,K,K,C,C,K,E,C,E,G,C,C,E,I,E,C,E,G,C,C,E,G;wB,E,K,G,E,C,E;wB;oB;oB,I,E,C,E,K,K,E,K,G,C,C,E,E;wB,E,K,G,C,C,E;wB,I;wB;oB;oB,I,K,E,K,G,C,C,E,E;wB,E,K,G,C,C,E;wB,E,G,C,I,C;wB;oB;oB,I,C,C,E,E,E,G,C,G;oB,E,I,C,G;oB;Y;Y,K,K,I,C,S;Q,E,O,G;Y,K;gB;gB;a;Y,I;Q,S;Y,I,I;Q;Q,I,E,C,E,G,G,M,E,C,E;Q,O;Y,O,E,C,E,G,E,C,E,G,K;Y,M;Q;I;A;AAwEA,IAAI,mCAA6B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","sources":["src/index.ts"],"sourcesContent":["import { autoUpdate, computePosition } from \"@floating-ui/dom\";\n\ntype Placement =\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\";\n\ninterface MarkOptions {\n  /**\n   * A CSS selector to specify the elements to be marked.\n   */\n  selector?: string;\n  /**\n   * A CSS style to apply to the label element.\n   * You can also specify a function that returns a CSS style object.\n   */\n  markStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * The placement of the mark relative to the element.\n   *\n   * @default 'top-start'\n   */\n  markPlacement?: Placement;\n  /**\n   * A CSS style to apply to the bounding box element.\n   * You can also specify a function that returns a CSS style object.\n   * Bounding boxes are only shown if `showMasks` is `true`.\n   */\n  maskStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * Whether or not to show bounding boxes around the elements.\n   *\n   * @default true\n   */\n  showMasks?: boolean;\n  /**\n   * Provide a function for generating labels.\n   * By default, labels are generated as numbers starting from 0.\n   */\n  labelGenerator?: (element: Element, index: number) => string;\n  /**\n   * Provide a container element to query the elements to be marked.\n   * By default, the container element is `document.body`.\n   */\n  containerElement?: Element;\n  /**\n   * Only mark elements that are visible in the current viewport\n   *\n   * @default false\n   */\n  viewPortOnly?: boolean;\n}\n\ninterface MarkedElement {\n  element: Element;\n  markElement: HTMLElement;\n  maskElement?: HTMLElement;\n}\n\nlet cleanupFns: (() => void)[] = [];\n\nasync function mark(\n  options: MarkOptions = {}\n): Promise<Map<string, MarkedElement>> {\n  const {\n    selector = \"button, input, a, select, textarea\",\n    markStyle = {\n      backgroundColor: \"red\",\n      color: \"white\",\n      padding: \"2px 4px\",\n      fontSize: \"12px\",\n      fontWeight: \"bold\",\n    },\n    markPlacement = \"top-start\",\n    maskStyle = {\n      outline: \"2px dashed red\",\n      backgroundColor: \"transparent\",\n    },\n    showMasks = true,\n    labelGenerator = (_, index) => index.toString(),\n    containerElement = document.body,\n    viewPortOnly = false,\n  } = options;\n\n  const elements = Array.from(\n    containerElement.querySelectorAll(selector)\n  ).filter(\n    (el) => !viewPortOnly || el.getBoundingClientRect().top < window.innerHeight\n  );\n\n  const markedElements = new Map<string, MarkedElement>();\n\n  await Promise.all(\n    elements.map(async (element, index) => {\n      const label = labelGenerator(element, index);\n      const markElement = createMark(element, markStyle, label, markPlacement);\n\n      const maskElement = showMasks\n        ? createMask(element, maskStyle, label)\n        : undefined;\n\n      markedElements.set(label, { element, markElement, maskElement });\n      element.setAttribute(\"data-webmarkeredby\", `webmarker-${label}`);\n    })\n  );\n\n  document.documentElement.dataset.webmarkered = \"true\";\n  return markedElements;\n}\n\nfunction createMark(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string,\n  markPlacement: Placement = \"top-start\"\n): HTMLElement {\n  const markElement = document.createElement(\"div\");\n  markElement.className = \"webmarker\";\n  markElement.id = `webmarker-${label}`;\n  markElement.textContent = label;\n  document.body.appendChild(markElement);\n  positionMark(markElement, element, markPlacement);\n  applyStyle(\n    markElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return markElement;\n}\n\nfunction createMask(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string\n): HTMLElement {\n  const maskElement = document.createElement(\"div\");\n  maskElement.className = \"webmarkermask\";\n  maskElement.id = `webmarkermask-${label}`;\n  document.body.appendChild(maskElement);\n  positionMask(maskElement, element);\n  applyStyle(\n    maskElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return maskElement;\n}\n\nfunction positionMark(\n  markElement: HTMLElement,\n  element: Element,\n  markPlacement: Placement\n) {\n  async function updatePosition() {\n    const { x, y } = await computePosition(element, markElement, {\n      placement: markPlacement,\n    });\n    Object.assign(markElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n  }\n\n  cleanupFns.push(autoUpdate(element, markElement, updatePosition));\n}\n\nasync function positionMask(mask: HTMLElement, element: Element) {\n  const { width, height } = element.getBoundingClientRect();\n  async function updatePosition() {\n    const { x: maskX, y: maskY } = await computePosition(element, mask, {\n      placement: \"top-start\",\n    });\n    Object.assign(mask.style, {\n      left: `${maskX}px`,\n      top: `${maskY + height}px`,\n      width: `${width}px`,\n      height: `${height}px`,\n    });\n  }\n  cleanupFns.push(autoUpdate(element, mask, updatePosition));\n}\n\nfunction applyStyle(\n  element: HTMLElement,\n  defaultStyle: Readonly<Partial<CSSStyleDeclaration>>,\n  customStyle: Readonly<Partial<CSSStyleDeclaration>>\n): void {\n  Object.assign(element.style, defaultStyle, customStyle);\n}\n\nfunction unmark(): void {\n  document\n    .querySelectorAll(\".webmarker, .webmarkermask\")\n    .forEach((el) => el.remove());\n  document.documentElement.removeAttribute(\"data-webmarkered\");\n  cleanupFns.forEach((fn) => fn());\n  cleanupFns = [];\n}\n\nfunction isMarked(): boolean {\n  return document.documentElement.hasAttribute(\"data-webmarkered\");\n}\n\nexport { mark, unmark, isMarked };\nexport type { MarkOptions, MarkedElement, Placement };\n"],"names":[],"version":3,"file":"module.js.map"}
+{"mappings":";;;A,I,kC,a,U,S,I,S,O,E,U,E,C,E,S;I,S,M,K;Q,O,iB,I,Q,I,E,S,O;Y,Q;Q;I;I,O,I,C,K,C,I,O,C,E,S,O,E,M;Q,S,U,K;Y,I;gB,K,U,I,C;Y,E,O,G;gB,O;Y;Q;Q,S,S,K;Y,I;gB,K,S,C,Q,C;Y,E,O,G;gB,O;Y;Q;Q,S,K,M;Y,O,I,G,Q,O,K,I,M,O,K,E,I,C,W;Q;Q,K,A,C,Y,U,K,C,S,c,E,C,E,I;I;A;A,I,oC,a,U,W,I,S,O,E,I;I,I,I;Q,O;Q,M;Y,I,C,C,E,G,G,M,C,C,E;Y,O,C,C,E;Q;Q,M,E;Q,K,E;I,G,G,G,G;I,O,I;Q,M,K;Q,S,K;Q,U,K;I,G,O,W,c,C,C,C,O,Q,C,G;Q,O,I;I,C,G;I,S,K,C;Q,O,S,C;Y,O,K;gB;gB;a;Q;I;I,S,K,E;Q,I,G,M,I,U;Q,M,K,C,I,G,E,C,E,I,C,I,C,C,G,E,I;Y,I,I,G,K,C,I,E,C,E,G,I,C,C,S,G,E,C,E,G,C,C,Q,I,C,A,C,I,C,C,S,A,K,E,I,C,I,C,I,E,I,A,K,C,A,C,I,E,I,C,G,E,C,E,C,E,I,E,O;Y,I,I,G,G,K;gB,E,C,E,G;gB,E,K;a;Y,O,E,C,E;gB,K;gB,K;oB,I;oB;gB,K;oB,E,K;oB,O;wB,O,E,C,E;wB,M;oB;gB,K;oB,E,K;oB,I,E,C,E;oB,K;wB;qB;oB;gB,K;oB,K,E,G,C,G;oB,E,I,C,G;oB;gB;oB,I,C,C,I,E,I,E,I,E,M,G,K,C,C,E,M,G,E,A,K,C,E,C,E,K,K,E,C,E,K,C,G;wB,I;wB;oB;oB,I,E,C,E,K,K,C,C,K,E,C,E,G,C,C,E,I,E,C,E,G,C,C,E,G;wB,E,K,G,E,C,E;wB;oB;oB,I,E,C,E,K,K,E,K,G,C,C,E,E;wB,E,K,G,C,C,E;wB,I;wB;oB;oB,I,K,E,K,G,C,C,E,E;wB,E,K,G,C,C,E;wB,E,G,C,I,C;wB;oB;oB,I,C,C,E,E,E,G,C,G;oB,E,I,C,G;oB;Y;Y,K,K,I,C,S;Q,E,O,G;Y,K;gB;gB;a;Y,I;Q,S;Y,I,I;Q;Q,I,E,C,E,G,G,M,E,C,E;Q,O;Y,O,E,C,E,G,E,C,E,G,K;Y,M;Q;I;A;AAwEA,IAAI,mCAA6B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","sources":["src/index.ts"],"sourcesContent":["import { autoUpdate, computePosition } from \"@floating-ui/dom\";\n\ntype Placement =\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\";\n\ninterface MarkOptions {\n  /**\n   * A CSS selector to specify the elements to be marked.\n   */\n  selector?: string;\n  /**\n   * A CSS style to apply to the label element.\n   * You can also specify a function that returns a CSS style object.\n   */\n  markStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * The placement of the mark relative to the element.\n   *\n   * @default 'top-start'\n   */\n  markPlacement?: Placement;\n  /**\n   * A CSS style to apply to the bounding box element.\n   * You can also specify a function that returns a CSS style object.\n   * Bounding boxes are only shown if `showMasks` is `true`.\n   */\n  maskStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * Whether or not to show bounding boxes around the elements.\n   *\n   * @default true\n   */\n  showMasks?: boolean;\n  /**\n   * Provide a function for generating labels.\n   * By default, labels are generated as numbers starting from 0.\n   */\n  labelGenerator?: (element: Element, index: number) => string;\n  /**\n   * Provide a container element to query the elements to be marked.\n   * By default, the container element is `document.body`.\n   */\n  containerElement?: Element;\n  /**\n   * Only mark elements that are visible in the current viewport\n   *\n   * @default false\n   */\n  viewPortOnly?: boolean;\n}\n\ninterface MarkedElement {\n  element: Element;\n  markElement: HTMLElement;\n  maskElement?: HTMLElement;\n}\n\nlet cleanupFns: (() => void)[] = [];\n\nasync function mark(\n  options: MarkOptions = {}\n): Promise<Map<string, MarkedElement>> {\n  const {\n    selector = \"button, input, a, select, textarea\",\n    markStyle = {\n      backgroundColor: \"red\",\n      color: \"white\",\n      padding: \"2px 4px\",\n      fontSize: \"12px\",\n      fontWeight: \"bold\",\n    },\n    markPlacement = \"top-start\",\n    maskStyle = {\n      outline: \"2px dashed red\",\n      backgroundColor: \"transparent\",\n    },\n    showMasks = true,\n    labelGenerator = (_, index) => index.toString(),\n    containerElement = document.body,\n    viewPortOnly = false,\n  } = options;\n\n  const elements = Array.from(\n    containerElement.querySelectorAll(selector)\n  ).filter(\n    (el) => !viewPortOnly || el.getBoundingClientRect().top < window.innerHeight\n  );\n\n  const markedElements = new Map<string, MarkedElement>();\n\n  await Promise.all(\n    elements.map(async (element, index) => {\n      const label = labelGenerator(element, index);\n      const markElement = createMark(element, markStyle, label, markPlacement);\n\n      const maskElement = showMasks\n        ? createMask(element, maskStyle, label)\n        : undefined;\n\n      markedElements.set(label, { element, markElement, maskElement });\n      element.setAttribute(\"data-webmarkeredby\", `webmarker-${label}`);\n    })\n  );\n\n  document.documentElement.dataset.webmarkered = \"true\";\n  return markedElements;\n}\n\nfunction createMark(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string,\n  markPlacement: Placement = \"top-start\"\n): HTMLElement {\n  const markElement = document.createElement(\"div\");\n  markElement.className = \"webmarker\";\n  markElement.id = `webmarker-${label}`;\n  markElement.textContent = label;\n  document.body.appendChild(markElement);\n  positionMark(markElement, element, markPlacement);\n  applyStyle(\n    markElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return markElement;\n}\n\nfunction createMask(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string\n): HTMLElement {\n  const maskElement = document.createElement(\"div\");\n  maskElement.className = \"webmarkermask\";\n  maskElement.id = `webmarkermask-${label}`;\n  document.body.appendChild(maskElement);\n  positionMask(maskElement, element);\n  applyStyle(\n    maskElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return maskElement;\n}\n\nfunction positionMark(\n  markElement: HTMLElement,\n  element: Element,\n  markPlacement: Placement\n) {\n  async function updatePosition() {\n    const { x, y } = await computePosition(element, markElement, {\n      placement: markPlacement,\n    });\n    Object.assign(markElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n  }\n\n  cleanupFns.push(autoUpdate(element, markElement, updatePosition));\n}\n\nasync function positionMask(mask: HTMLElement, element: Element) {\n  const { width, height } = element.getBoundingClientRect();\n  async function updatePosition() {\n    const { x: maskX, y: maskY } = await computePosition(element, mask, {\n      placement: \"top-start\",\n    });\n    Object.assign(mask.style, {\n      left: `${maskX}px`,\n      top: `${maskY + height}px`,\n      width: `${width}px`,\n      height: `${height}px`,\n    });\n  }\n  cleanupFns.push(autoUpdate(element, mask, updatePosition));\n}\n\nfunction applyStyle(\n  element: HTMLElement,\n  defaultStyle: Readonly<Partial<CSSStyleDeclaration>>,\n  customStyle: Readonly<Partial<CSSStyleDeclaration>>\n): void {\n  Object.assign(element.style, defaultStyle, customStyle);\n}\n\nfunction unmark(): void {\n  document\n    .querySelectorAll(\".webmarker, .webmarkermask\")\n    .forEach((el) => el.remove());\n  document.documentElement.removeAttribute(\"data-webmarkered\");\n  cleanupFns.forEach((fn) => fn());\n  cleanupFns = [];\n}\n\nfunction isMarked(): boolean {\n  return document.documentElement.hasAttribute(\"data-webmarkered\");\n}\n\nwindow[\"mark\"] = mark;\nwindow[\"unmark\"] = unmark;\nwindow[\"isMarked\"] = isMarked;\n\nexport { mark, unmark, isMarked };\nexport type { MarkOptions, MarkedElement, Placement };\n"],"names":[],"version":3,"file":"module.js.map"}

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":"AAEA,wBACI,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEf;IACE;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EACN,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,GACtC,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;IACnE;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EACN,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,GACtC,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;IACnE;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;IACE,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAID,qBACE,OAAO,GAAE,WAAgB,GACxB,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CA6CrC;AA8FD,0BAAmB,IAAI,CAOtB;AAED,4BAAqB,OAAO,CAE3B","sources":["src/src/index.ts","src/index.ts"],"sourcesContent":[null,"import { autoUpdate, computePosition } from \"@floating-ui/dom\";\n\ntype Placement =\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\";\n\ninterface MarkOptions {\n  /**\n   * A CSS selector to specify the elements to be marked.\n   */\n  selector?: string;\n  /**\n   * A CSS style to apply to the label element.\n   * You can also specify a function that returns a CSS style object.\n   */\n  markStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * The placement of the mark relative to the element.\n   *\n   * @default 'top-start'\n   */\n  markPlacement?: Placement;\n  /**\n   * A CSS style to apply to the bounding box element.\n   * You can also specify a function that returns a CSS style object.\n   * Bounding boxes are only shown if `showMasks` is `true`.\n   */\n  maskStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * Whether or not to show bounding boxes around the elements.\n   *\n   * @default true\n   */\n  showMasks?: boolean;\n  /**\n   * Provide a function for generating labels.\n   * By default, labels are generated as numbers starting from 0.\n   */\n  labelGenerator?: (element: Element, index: number) => string;\n  /**\n   * Provide a container element to query the elements to be marked.\n   * By default, the container element is `document.body`.\n   */\n  containerElement?: Element;\n  /**\n   * Only mark elements that are visible in the current viewport\n   *\n   * @default false\n   */\n  viewPortOnly?: boolean;\n}\n\ninterface MarkedElement {\n  element: Element;\n  markElement: HTMLElement;\n  maskElement?: HTMLElement;\n}\n\nlet cleanupFns: (() => void)[] = [];\n\nasync function mark(\n  options: MarkOptions = {}\n): Promise<Map<string, MarkedElement>> {\n  const {\n    selector = \"button, input, a, select, textarea\",\n    markStyle = {\n      backgroundColor: \"red\",\n      color: \"white\",\n      padding: \"2px 4px\",\n      fontSize: \"12px\",\n      fontWeight: \"bold\",\n    },\n    markPlacement = \"top-start\",\n    maskStyle = {\n      outline: \"2px dashed red\",\n      backgroundColor: \"transparent\",\n    },\n    showMasks = true,\n    labelGenerator = (_, index) => index.toString(),\n    containerElement = document.body,\n    viewPortOnly = false,\n  } = options;\n\n  const elements = Array.from(\n    containerElement.querySelectorAll(selector)\n  ).filter(\n    (el) => !viewPortOnly || el.getBoundingClientRect().top < window.innerHeight\n  );\n\n  const markedElements = new Map<string, MarkedElement>();\n\n  await Promise.all(\n    elements.map(async (element, index) => {\n      const label = labelGenerator(element, index);\n      const markElement = createMark(element, markStyle, label, markPlacement);\n\n      const maskElement = showMasks\n        ? createMask(element, maskStyle, label)\n        : undefined;\n\n      markedElements.set(label, { element, markElement, maskElement });\n      element.setAttribute(\"data-webmarkeredby\", `webmarker-${label}`);\n    })\n  );\n\n  document.documentElement.dataset.webmarkered = \"true\";\n  return markedElements;\n}\n\nfunction createMark(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string,\n  markPlacement: Placement = \"top-start\"\n): HTMLElement {\n  const markElement = document.createElement(\"div\");\n  markElement.className = \"webmarker\";\n  markElement.id = `webmarker-${label}`;\n  markElement.textContent = label;\n  document.body.appendChild(markElement);\n  positionMark(markElement, element, markPlacement);\n  applyStyle(\n    markElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return markElement;\n}\n\nfunction createMask(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string\n): HTMLElement {\n  const maskElement = document.createElement(\"div\");\n  maskElement.className = \"webmarkermask\";\n  maskElement.id = `webmarkermask-${label}`;\n  document.body.appendChild(maskElement);\n  positionMask(maskElement, element);\n  applyStyle(\n    maskElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return maskElement;\n}\n\nfunction positionMark(\n  markElement: HTMLElement,\n  element: Element,\n  markPlacement: Placement\n) {\n  async function updatePosition() {\n    const { x, y } = await computePosition(element, markElement, {\n      placement: markPlacement,\n    });\n    Object.assign(markElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n  }\n\n  cleanupFns.push(autoUpdate(element, markElement, updatePosition));\n}\n\nasync function positionMask(mask: HTMLElement, element: Element) {\n  const { width, height } = element.getBoundingClientRect();\n  async function updatePosition() {\n    const { x: maskX, y: maskY } = await computePosition(element, mask, {\n      placement: \"top-start\",\n    });\n    Object.assign(mask.style, {\n      left: `${maskX}px`,\n      top: `${maskY + height}px`,\n      width: `${width}px`,\n      height: `${height}px`,\n    });\n  }\n  cleanupFns.push(autoUpdate(element, mask, updatePosition));\n}\n\nfunction applyStyle(\n  element: HTMLElement,\n  defaultStyle: Readonly<Partial<CSSStyleDeclaration>>,\n  customStyle: Readonly<Partial<CSSStyleDeclaration>>\n): void {\n  Object.assign(element.style, defaultStyle, customStyle);\n}\n\nfunction unmark(): void {\n  document\n    .querySelectorAll(\".webmarker, .webmarkermask\")\n    .forEach((el) => el.remove());\n  document.documentElement.removeAttribute(\"data-webmarkered\");\n  cleanupFns.forEach((fn) => fn());\n  cleanupFns = [];\n}\n\nfunction isMarked(): boolean {\n  return document.documentElement.hasAttribute(\"data-webmarkered\");\n}\n\nexport { mark, unmark, isMarked };\nexport type { MarkOptions, MarkedElement, Placement };\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":"AAEA,wBACI,KAAK,GACL,WAAW,GACX,SAAS,GACT,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,cAAc,GACd,YAAY,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,CAAC;AAEf;IACE;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EACN,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,GACtC,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;IACnE;;;;OAIG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EACN,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,GACtC,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,QAAQ,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;IACnE;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7D;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;IACE,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAID,qBACE,OAAO,GAAE,WAAgB,GACxB,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CA6CrC;AA8FD,0BAAmB,IAAI,CAOtB;AAED,4BAAqB,OAAO,CAE3B","sources":["src/src/index.ts","src/index.ts"],"sourcesContent":[null,"import { autoUpdate, computePosition } from \"@floating-ui/dom\";\n\ntype Placement =\n  | \"top\"\n  | \"top-start\"\n  | \"top-end\"\n  | \"right\"\n  | \"right-start\"\n  | \"right-end\"\n  | \"bottom\"\n  | \"bottom-start\"\n  | \"bottom-end\"\n  | \"left\"\n  | \"left-start\"\n  | \"left-end\";\n\ninterface MarkOptions {\n  /**\n   * A CSS selector to specify the elements to be marked.\n   */\n  selector?: string;\n  /**\n   * A CSS style to apply to the label element.\n   * You can also specify a function that returns a CSS style object.\n   */\n  markStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * The placement of the mark relative to the element.\n   *\n   * @default 'top-start'\n   */\n  markPlacement?: Placement;\n  /**\n   * A CSS style to apply to the bounding box element.\n   * You can also specify a function that returns a CSS style object.\n   * Bounding boxes are only shown if `showMasks` is `true`.\n   */\n  maskStyle?:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>);\n  /**\n   * Whether or not to show bounding boxes around the elements.\n   *\n   * @default true\n   */\n  showMasks?: boolean;\n  /**\n   * Provide a function for generating labels.\n   * By default, labels are generated as numbers starting from 0.\n   */\n  labelGenerator?: (element: Element, index: number) => string;\n  /**\n   * Provide a container element to query the elements to be marked.\n   * By default, the container element is `document.body`.\n   */\n  containerElement?: Element;\n  /**\n   * Only mark elements that are visible in the current viewport\n   *\n   * @default false\n   */\n  viewPortOnly?: boolean;\n}\n\ninterface MarkedElement {\n  element: Element;\n  markElement: HTMLElement;\n  maskElement?: HTMLElement;\n}\n\nlet cleanupFns: (() => void)[] = [];\n\nasync function mark(\n  options: MarkOptions = {}\n): Promise<Map<string, MarkedElement>> {\n  const {\n    selector = \"button, input, a, select, textarea\",\n    markStyle = {\n      backgroundColor: \"red\",\n      color: \"white\",\n      padding: \"2px 4px\",\n      fontSize: \"12px\",\n      fontWeight: \"bold\",\n    },\n    markPlacement = \"top-start\",\n    maskStyle = {\n      outline: \"2px dashed red\",\n      backgroundColor: \"transparent\",\n    },\n    showMasks = true,\n    labelGenerator = (_, index) => index.toString(),\n    containerElement = document.body,\n    viewPortOnly = false,\n  } = options;\n\n  const elements = Array.from(\n    containerElement.querySelectorAll(selector)\n  ).filter(\n    (el) => !viewPortOnly || el.getBoundingClientRect().top < window.innerHeight\n  );\n\n  const markedElements = new Map<string, MarkedElement>();\n\n  await Promise.all(\n    elements.map(async (element, index) => {\n      const label = labelGenerator(element, index);\n      const markElement = createMark(element, markStyle, label, markPlacement);\n\n      const maskElement = showMasks\n        ? createMask(element, maskStyle, label)\n        : undefined;\n\n      markedElements.set(label, { element, markElement, maskElement });\n      element.setAttribute(\"data-webmarkeredby\", `webmarker-${label}`);\n    })\n  );\n\n  document.documentElement.dataset.webmarkered = \"true\";\n  return markedElements;\n}\n\nfunction createMark(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string,\n  markPlacement: Placement = \"top-start\"\n): HTMLElement {\n  const markElement = document.createElement(\"div\");\n  markElement.className = \"webmarker\";\n  markElement.id = `webmarker-${label}`;\n  markElement.textContent = label;\n  document.body.appendChild(markElement);\n  positionMark(markElement, element, markPlacement);\n  applyStyle(\n    markElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return markElement;\n}\n\nfunction createMask(\n  element: Element,\n  style:\n    | Readonly<Partial<CSSStyleDeclaration>>\n    | ((element: Element) => Readonly<Partial<CSSStyleDeclaration>>),\n  label: string\n): HTMLElement {\n  const maskElement = document.createElement(\"div\");\n  maskElement.className = \"webmarkermask\";\n  maskElement.id = `webmarkermask-${label}`;\n  document.body.appendChild(maskElement);\n  positionMask(maskElement, element);\n  applyStyle(\n    maskElement,\n    {\n      zIndex: \"999999999\",\n      position: \"absolute\",\n      pointerEvents: \"none\",\n    },\n    typeof style === \"function\" ? style(element) : style\n  );\n  return maskElement;\n}\n\nfunction positionMark(\n  markElement: HTMLElement,\n  element: Element,\n  markPlacement: Placement\n) {\n  async function updatePosition() {\n    const { x, y } = await computePosition(element, markElement, {\n      placement: markPlacement,\n    });\n    Object.assign(markElement.style, {\n      left: `${x}px`,\n      top: `${y}px`,\n    });\n  }\n\n  cleanupFns.push(autoUpdate(element, markElement, updatePosition));\n}\n\nasync function positionMask(mask: HTMLElement, element: Element) {\n  const { width, height } = element.getBoundingClientRect();\n  async function updatePosition() {\n    const { x: maskX, y: maskY } = await computePosition(element, mask, {\n      placement: \"top-start\",\n    });\n    Object.assign(mask.style, {\n      left: `${maskX}px`,\n      top: `${maskY + height}px`,\n      width: `${width}px`,\n      height: `${height}px`,\n    });\n  }\n  cleanupFns.push(autoUpdate(element, mask, updatePosition));\n}\n\nfunction applyStyle(\n  element: HTMLElement,\n  defaultStyle: Readonly<Partial<CSSStyleDeclaration>>,\n  customStyle: Readonly<Partial<CSSStyleDeclaration>>\n): void {\n  Object.assign(element.style, defaultStyle, customStyle);\n}\n\nfunction unmark(): void {\n  document\n    .querySelectorAll(\".webmarker, .webmarkermask\")\n    .forEach((el) => el.remove());\n  document.documentElement.removeAttribute(\"data-webmarkered\");\n  cleanupFns.forEach((fn) => fn());\n  cleanupFns = [];\n}\n\nfunction isMarked(): boolean {\n  return document.documentElement.hasAttribute(\"data-webmarkered\");\n}\n\nwindow[\"mark\"] = mark;\nwindow[\"unmark\"] = unmark;\nwindow[\"isMarked\"] = isMarked;\n\nexport { mark, unmark, isMarked };\nexport type { MarkOptions, MarkedElement, Placement };\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

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

package/src/index.ts

@@ -226,5 +226,9 @@ function isMarked(): boolean {
   return document.documentElement.hasAttribute("data-webmarkered");
 }
 
+window["mark"] = mark;
+window["unmark"] = unmark;
+window["isMarked"] = isMarked;
+
 export { mark, unmark, isMarked };
 export type { MarkOptions, MarkedElement, Placement };

package/.babel.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  presets: [
-    ["@babel/preset-env", { targets: { node: "current" } }],
-    "@babel/preset-typescript",
-  ],
-};

package/.parcelrc

@@ -1,9 +0,0 @@
-{
-  "extends": "@parcel/config-default",
-  "transformers": {
-    "*.{ts,tsx}": ["@parcel/transformer-typescript-tsc"]
-  },
-  "validators": {
-    "*.{ts,tsx}": ["@parcel/validator-typescript"]
-  }
-}

package/demo/App.js

@@ -1,69 +0,0 @@
-import { unmark, mark } from "../src";
-import { useEffect, useState, useRef } from "react";
-
-export function App() {
-  let [isMarked, setMarked] = useState(false);
-  let [elementMap, setElementMap] = useState(new Map());
-  let demoRef = useRef(null);
-
-  useEffect(() => {
-    if (!isMarked) {
-      let elements = mark({});
-      elements.then((res) => setElementMap(res));
-      setMarked(true);
-    }
-  }, []);
-
-  let toggleMark = () => {
-    if (isMarked) {
-      unmark();
-      setMarked(false);
-      setElementMap(new Map());
-    } else {
-      let elements = mark({});
-      elements.then((res) => setElementMap(res));
-      setMarked(true);
-    }
-  };
-
-  return (
-    <main>
-      <h1>WebMarker Demo</h1>
-      <button onClick={toggleMark}>{isMarked ? "Unmark" : "Mark"}</button>
-      <div ref={demoRef} style={{ display: "flex", flexDirection: "column" }}>
-        <h2>Interactive Elements:</h2>
-        <div>
-          <label htmlFor="field-1">Input:</label>
-          <input id="field-1" type="text" />
-        </div>
-
-        <div>
-          <label htmlFor="field-2">Input:</label>
-          <input id="field-2" type="text" />
-        </div>
-
-        <div>
-          <label htmlFor="field-3">Input:</label>
-          <input id="field-3" type="text" />
-        </div>
-
-        <div>
-          <button>Button 1</button>
-          <button>Button 2</button>
-        </div>
-      </div>
-      <div>
-        <h2>Marked Elements:</h2>
-        <ul>
-          {Array.from(elementMap)
-            .map(([key, value]) => ({ key, value }))
-            .map((element) => (
-              <li key={element.key}>
-                {element.key} : {element.value.element.tagName}
-              </li>
-            ))}
-        </ul>
-      </div>
-    </main>
-  );
-}

package/demo/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>WebMarker Demo</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="index.js"></script>
-  </body>
-</html>

package/demo/index.js

@@ -1,6 +0,0 @@
-import { createRoot } from "react-dom/client";
-import { App } from "./App";
-
-const container = document.getElementById("app");
-const root = createRoot(container);
-root.render(<App />);

package/docs/components/Demo.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import { unmark, mark } from "../../dist/main";
-import { useEffect, useState } from "react";
-
-export function Demo() {
-  let [isMarked, setMarked] = useState(false);
-  let [elementMap, setElementMap] = useState(new Map());
-
-  let toggleMark = () => {
-    if (isMarked) {
-      unmark();
-      setMarked(false);
-      setElementMap(new Map());
-    } else {
-      let elements = mark({});
-      elements.then((res) => setElementMap(res));
-      setMarked(true);
-    }
-  };
-
-  useEffect(() => {
-    return () => {
-      if (isMarked) {
-        unmark();
-      }
-    };
-  }, []);
-
-  return (
-    <div>
-      <div className="content-center text-center p-8">
-        <button
-          className="text-white bg-blue-700 w-52 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none dark:focus:ring-blue-900"
-          onClick={toggleMark}
-        >
-          {isMarked ? "Unmark this page" : "Mark this page"}
-        </button>
-      </div>
-
-      <div className="text-center">{elementMap.size} marked elements</div>
-    </div>
-  );
-}

package/docs/components/Logo.tsx

@@ -1,15 +0,0 @@
-"use client";
-
-import { useConfig } from "nextra-theme-docs";
-import Image from "next/image";
-
-export function Logo() {
-  const { themeSwitch } = useConfig();
-  console.log(themeSwitch);
-
-  return themeSwitch ? (
-    <img src="/webmarker-dark.png" alt="Nextra" width={120} height={40} />
-  ) : (
-    <img src="/webmarker-light.png" alt="Nextra" width={120} height={40} />
-  );
-}

package/docs/components/mdx-components.tsx

@@ -1,7 +0,0 @@
-import type { MDXComponents } from "mdx/types";
-
-export function useMDXComponents(components: MDXComponents): MDXComponents {
-  return {
-    ...components,
-  };
-}

package/docs/global.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/docs/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

package/docs/next.config.js

@@ -1,6 +0,0 @@
-const withNextra = require('nextra')({
-  theme: 'nextra-theme-docs',
-  themeConfig: './theme.config.tsx',
-})
-
-module.exports = withNextra()

package/docs/pages/_app.tsx

@@ -1,7 +0,0 @@
-// These styles apply to every route in the application
-import "../global.css";
-import type { AppProps } from "next/app";
-
-export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
-}

package/docs/pages/_meta.json

@@ -1,3 +0,0 @@
-{
-  "index": "Get started"
-}

package/docs/pages/index.mdx

@@ -1,82 +0,0 @@
-import { Demo } from "../components/Demo";
-import { Callout } from "nextra/components";
-import { Tabs } from "nextra/components";
-import { Logo } from "../components/Logo";
-
-# WebMarker
-
-<p align="center">
-  <Logo />
-</p>
-
-<br />
-
-<p align="center">Mark web pages for use with vision-language models.</p>
-
-<Demo />
-
-## 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-4V, Claude 3, and Google Gemini 1.5.
-
-## Installation
-
-<Tabs items={["yarn", "npm", "pnpm"]}>
-  <Tabs.Tab>```yarn add webmarker-js ```</Tabs.Tab>
-  <Tabs.Tab>```npm install webmarker-js ```</Tabs.Tab>
-  <Tabs.Tab>```pnpm add webmarker-js ```</Tabs.Tab>
-</Tabs>
-
-## Usage
-
-The `mark()` function will add markings for all interactive elements on a web page, and return a Map of the marked elements. The returned Map's keys are the mark labels, and the values are an object with the element (`element`), mark element (`markElement`), and mask element (`markElement`).
-
-```javascript
-import { mark, unmark } from "webmarker-js";
-
-// Mark interactive elements on the document
-let elements = await mark();
-
-// Reference an element by label
-console.log(elements.get("0").element);
-
-// Remove markings
-unmark();
-```
-
-### Options
-
-```javascript
-let elements = mark({
-  // A custom CSS selector for which elements to mark.
-  // The default selector will select all interactive elements.
-  selector: "button, input",
-  // A custom CSS style to apply to the mark element.
-  markStyle: { color: "white", backgroundColor: "blue", padding: 5 },
-  // A custom CSS style to apply to the mask element.
-  // Use a transparent background to have it act as a bounding box.
-  maskStyle: { outline: "2px dashed blue", backgroundColor: "transparent" },
-  // The placement of the mark relative to the element.
-  markPlacement: "top-start";
-  // Whether or not to show masks over elements.
-  // Defaults to true.
-  showMasks: true,
-  // A custom function for generating the labels.
-  // Defaults to '0', '1', '2'... if not provided.
-  labelGenerator: (element, index) => `Element ${index}`,
-  // A container element to query the elements to be marked.
-  // Defaults to the document.
-  containerElement: document.body,
-  // Only mark elements that are visible in the current viewport
-  viewPortOnly: true,
-});
-
-// Cleanup
-unmark();
-```
-
-## Use with Playwright
-
-<Callout emoji="🚧" type="info">
-  Coming soon
-</Callout>

package/docs/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

package/docs/tailwind.config.js

@@ -1,11 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

package/docs/theme.config.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { DocsThemeConfig } from "nextra-theme-docs";
-import { useRouter } from "next/router";
-
-const config: DocsThemeConfig = {
-  logo: <span>WebMarker</span>,
-  useNextSeoProps() {
-    const { pathname } = useRouter();
-    if (pathname !== "/") {
-      return {
-        titleTemplate: "%s – WebMarker",
-      };
-    } else {
-      return {
-        title: "WebMarker",
-        description: "Mark web pages for use with vision-language models.",
-      };
-    }
-  },
-  project: {
-    link: "https://github.com/reidbarber/webmarker",
-  },
-  docsRepositoryBase: "https://github.com/reidbarber/webmarker",
-  footer: {
-    text: "Webmarker",
-  },
-};
-
-export default config;

package/docs/tsconfig.json

@@ -1,20 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "incremental": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve"
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "../../src/**/*.ts"],
-  "exclude": ["node_modules"]
-}

package/jest.config.js

@@ -1,5 +0,0 @@
-/** @type {import('ts-jest').JestConfigWithTsJest} */
-module.exports = {
-  preset: "ts-jest",
-  testEnvironment: "jsdom",
-};

package/test/index.test.ts

@@ -1,59 +0,0 @@
-import { mark, unmark, isMarked, MarkOptions } from "../src/index";
-import { describe, expect, test, beforeEach, afterEach } from "@jest/globals";
-
-describe("WebMarker", () => {
-  beforeEach(() => {
-    document.body.innerHTML = `
-    <button>Button 1</button>
-    <button>Button 2</button>
-    <input type="text" placeholder="Input field" />
-    <a href="#">Link</a>
-  `;
-  });
-
-  afterEach(() => {
-    unmark();
-  });
-
-  test("marks all interactive elements", async () => {
-    const elements = await mark();
-    expect(elements.size).toBe(4);
-    expect(isMarked()).toBe(true);
-  });
-
-  test("assigns correct labels to elements", async () => {
-    const options: MarkOptions = {
-      labelGenerator: (_, index) => `Label ${index}`,
-    };
-    const elements = await mark(options);
-
-    expect(elements.get("Label 0")?.element.tagName).toBe("BUTTON");
-    expect(elements.get("Label 1")?.element.tagName).toBe("BUTTON");
-    expect(elements.get("Label 2")?.element.tagName).toBe("INPUT");
-    expect(elements.get("Label 3")?.element.tagName).toBe("A");
-  });
-
-  test("removes marks with unmark()", async () => {
-    await mark();
-    expect(isMarked()).toBe(true);
-    unmark();
-    expect(document.querySelector(".webmarker")).toBeNull();
-    expect(document.querySelector(".webmarkermask")).toBeNull();
-    expect(isMarked()).toBe(false);
-  });
-
-  test("applies custom styles to marks and masks", async () => {
-    await mark({
-      markStyle: { backgroundColor: "blue", color: "red" },
-      maskStyle: { outline: "3px solid green" },
-    });
-
-    const markElement = document.querySelector(".webmarker") as HTMLElement;
-    const maskElement = document.querySelector(".webmarkermask") as HTMLElement;
-
-    expect(markElement.style.backgroundColor).toBe("blue");
-    expect(markElement.textContent).toBe("0");
-    expect(markElement.style.color).toBe("red");
-    expect(maskElement.style.outline).toBe("3px solid green");
-  });
-});

package/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": "./src",
-    "lib": ["dom", "es2015"]
-  },
-  "include": ["src/**/*"]
-}