@askviraj/linter 1.1.2 → 1.1.4

package/node_modules/@rviscomi/capo.js/src/extension/styles/open-props.css

@@ -0,0 +1,291 @@
+/* https://github.com/argyleink/open-props */
+:where(html) {
+  --font-sans: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
+  --font-serif: ui-serif,serif;
+  --font-mono: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;
+  --font-weight-1: 100;
+  --font-weight-2: 200;
+  --font-weight-3: 300;
+  --font-weight-4: 400;
+  --font-weight-5: 500;
+  --font-weight-6: 600;
+  --font-weight-7: 700;
+  --font-weight-8: 800;
+  --font-weight-9: 900;
+  --font-lineheight-00: .95;
+  --font-lineheight-0: 1.1;
+  --font-lineheight-1: 1.25;
+  --font-lineheight-2: 1.375;
+  --font-lineheight-3: 1.5;
+  --font-lineheight-4: 1.75;
+  --font-lineheight-5: 2;
+  --font-letterspacing-0: -.05em;
+  --font-letterspacing-1: .025em;
+  --font-letterspacing-2: .050em;
+  --font-letterspacing-3: .075em;
+  --font-letterspacing-4: .150em;
+  --font-letterspacing-5: .500em;
+  --font-letterspacing-6: .750em;
+  --font-letterspacing-7: 1em;
+  --font-size-00: .5rem;
+  --font-size-0: .75rem;
+  --font-size-1: 1rem;
+  --font-size-2: 1.1rem;
+  --font-size-3: 1.25rem;
+  --font-size-4: 1.5rem;
+  --font-size-5: 2rem;
+  --font-size-6: 2.5rem;
+  --font-size-7: 3rem;
+  --font-size-8: 3.5rem;
+  --font-size-fluid-0: clamp(.75rem, 2vw, 1rem);
+  --font-size-fluid-1: clamp(1rem, 4vw, 1.5rem);
+  --font-size-fluid-2: clamp(1.5rem, 6vw, 2.5rem);
+  --font-size-fluid-3: clamp(2rem, 9vw, 3.5rem);
+  --gray-0: #f8f9fa;
+  --gray-1: #f1f3f5;
+  --gray-2: #e9ecef;
+  --gray-3: #dee2e6;
+  --gray-4: #ced4da;
+  --gray-5: #adb5bd;
+  --gray-6: #868e96;
+  --gray-7: #495057;
+  --gray-8: #343a40;
+  --gray-9: #212529;
+  --gray-10: #16191d;
+  --gray-11: #0d0f12;
+  --gray-12: #030507;
+  --stone-0: #f8fafb;
+  --stone-1: #f2f4f6;
+  --stone-2: #ebedef;
+  --stone-3: #e0e4e5;
+  --stone-4: #d1d6d8;
+  --stone-5: #b1b6b9;
+  --stone-6: #979b9d;
+  --stone-7: #7e8282;
+  --stone-8: #666968;
+  --stone-9: #50514f;
+  --stone-10: #3a3a37;
+  --stone-11: #252521;
+  --stone-12: #121210;
+  --red-0: #fff5f5;
+  --red-1: #ffe3e3;
+  --red-2: #ffc9c9;
+  --red-3: #ffa8a8;
+  --red-4: #ff8787;
+  --red-5: #ff6b6b;
+  --red-6: #fa5252;
+  --red-7: #f03e3e;
+  --red-8: #e03131;
+  --red-9: #c92a2a;
+  --red-10: #b02525;
+  --red-11: #962020;
+  --red-12: #7d1a1a;
+  --pink-0: #fff0f6;
+  --pink-1: #ffdeeb;
+  --pink-2: #fcc2d7;
+  --pink-3: #faa2c1;
+  --pink-4: #f783ac;
+  --pink-5: #f06595;
+  --pink-6: #e64980;
+  --pink-7: #d6336c;
+  --pink-8: #c2255c;
+  --pink-9: #a61e4d;
+  --pink-10: #8c1941;
+  --pink-11: #731536;
+  --pink-12: #59102a;
+  --purple-0: #f8f0fc;
+  --purple-1: #f3d9fa;
+  --purple-2: #eebefa;
+  --purple-3: #e599f7;
+  --purple-4: #da77f2;
+  --purple-5: #cc5de8;
+  --purple-6: #be4bdb;
+  --purple-7: #ae3ec9;
+  --purple-8: #9c36b5;
+  --purple-9: #862e9c;
+  --purple-10: #702682;
+  --purple-11: #5a1e69;
+  --purple-12: #44174f;
+  --violet-0: #f3f0ff;
+  --violet-1: #e5dbff;
+  --violet-2: #d0bfff;
+  --violet-3: #b197fc;
+  --violet-4: #9775fa;
+  --violet-5: #845ef7;
+  --violet-6: #7950f2;
+  --violet-7: #7048e8;
+  --violet-8: #6741d9;
+  --violet-9: #5f3dc4;
+  --violet-10: #5235ab;
+  --violet-11: #462d91;
+  --violet-12: #3a2578;
+  --indigo-0: #edf2ff;
+  --indigo-1: #dbe4ff;
+  --indigo-2: #bac8ff;
+  --indigo-3: #91a7ff;
+  --indigo-4: #748ffc;
+  --indigo-5: #5c7cfa;
+  --indigo-6: #4c6ef5;
+  --indigo-7: #4263eb;
+  --indigo-8: #3b5bdb;
+  --indigo-9: #364fc7;
+  --indigo-10: #2f44ad;
+  --indigo-11: #283a94;
+  --indigo-12: #21307a;
+  --blue-0: #e7f5ff;
+  --blue-1: #d0ebff;
+  --blue-2: #a5d8ff;
+  --blue-3: #74c0fc;
+  --blue-4: #4dabf7;
+  --blue-5: #339af0;
+  --blue-6: #228be6;
+  --blue-7: #1c7ed6;
+  --blue-8: #1971c2;
+  --blue-9: #1864ab;
+  --blue-10: #145591;
+  --blue-11: #114678;
+  --blue-12: #0d375e;
+  --cyan-0: #e3fafc;
+  --cyan-1: #c5f6fa;
+  --cyan-2: #99e9f2;
+  --cyan-3: #66d9e8;
+  --cyan-4: #3bc9db;
+  --cyan-5: #22b8cf;
+  --cyan-6: #15aabf;
+  --cyan-7: #1098ad;
+  --cyan-8: #0c8599;
+  --cyan-9: #0b7285;
+  --cyan-10: #095c6b;
+  --cyan-11: #074652;
+  --cyan-12: #053038;
+  --teal-0: #e6fcf5;
+  --teal-1: #c3fae8;
+  --teal-2: #96f2d7;
+  --teal-3: #63e6be;
+  --teal-4: #38d9a9;
+  --teal-5: #20c997;
+  --teal-6: #12b886;
+  --teal-7: #0ca678;
+  --teal-8: #099268;
+  --teal-9: #087f5b;
+  --teal-10: #066649;
+  --teal-11: #054d37;
+  --teal-12: #033325;
+  --green-0: #ebfbee;
+  --green-1: #d3f9d8;
+  --green-2: #b2f2bb;
+  --green-3: #8ce99a;
+  --green-4: #69db7c;
+  --green-5: #51cf66;
+  --green-6: #40c057;
+  --green-7: #37b24d;
+  --green-8: #2f9e44;
+  --green-9: #2b8a3e;
+  --green-10: #237032;
+  --green-11: #1b5727;
+  --green-12: #133d1b;
+  --lime-0: #f4fce3;
+  --lime-1: #e9fac8;
+  --lime-2: #d8f5a2;
+  --lime-3: #c0eb75;
+  --lime-4: #a9e34b;
+  --lime-5: #94d82d;
+  --lime-6: #82c91e;
+  --lime-7: #74b816;
+  --lime-8: #66a80f;
+  --lime-9: #5c940d;
+  --lime-10: #4c7a0b;
+  --lime-11: #3c6109;
+  --lime-12: #2c4706;
+  --yellow-0: #fff9db;
+  --yellow-1: #fff3bf;
+  --yellow-2: #ffec99;
+  --yellow-3: #ffe066;
+  --yellow-4: #ffd43b;
+  --yellow-5: #fcc419;
+  --yellow-6: #fab005;
+  --yellow-7: #f59f00;
+  --yellow-8: #f08c00;
+  --yellow-9: #e67700;
+  --yellow-10: #b35c00;
+  --yellow-11: #804200;
+  --yellow-12: #663500;
+  --orange-0: #fff4e6;
+  --orange-1: #ffe8cc;
+  --orange-2: #ffd8a8;
+  --orange-3: #ffc078;
+  --orange-4: #ffa94d;
+  --orange-5: #ff922b;
+  --orange-6: #fd7e14;
+  --orange-7: #f76707;
+  --orange-8: #e8590c;
+  --orange-9: #d9480f;
+  --orange-10: #bf400d;
+  --orange-11: #99330b;
+  --orange-12: #802b09;
+  --choco-0: #fff8dc;
+  --choco-1: #fce1bc;
+  --choco-2: #f7ca9e;
+  --choco-3: #f1b280;
+  --choco-4: #e99b62;
+  --choco-5: #df8545;
+  --choco-6: #d46e25;
+  --choco-7: #bd5f1b;
+  --choco-8: #a45117;
+  --choco-9: #8a4513;
+  --choco-10: #703a13;
+  --choco-11: #572f12;
+  --choco-12: #3d210d;
+  --brown-0: #faf4eb;
+  --brown-1: #ede0d1;
+  --brown-2: #e0cab7;
+  --brown-3: #d3b79e;
+  --brown-4: #c5a285;
+  --brown-5: #b78f6d;
+  --brown-6: #a87c56;
+  --brown-7: #956b47;
+  --brown-8: #825b3a;
+  --brown-9: #6f4b2d;
+  --brown-10: #5e3a21;
+  --brown-11: #4e2b15;
+  --brown-12: #422412;
+  --sand-0: #f8fafb;
+  --sand-1: #e6e4dc;
+  --sand-2: #d5cfbd;
+  --sand-3: #c2b9a0;
+  --sand-4: #aea58c;
+  --sand-5: #9a9178;
+  --sand-6: #867c65;
+  --sand-7: #736a53;
+  --sand-8: #5f5746;
+  --sand-9: #4b4639;
+  --sand-10: #38352d;
+  --sand-11: #252521;
+  --sand-12: #121210;
+  --camo-0: #f9fbe7;
+  --camo-1: #e8ed9c;
+  --camo-2: #d2df4e;
+  --camo-3: #c2ce34;
+  --camo-4: #b5bb2e;
+  --camo-5: #a7a827;
+  --camo-6: #999621;
+  --camo-7: #8c851c;
+  --camo-8: #7e7416;
+  --camo-9: #6d6414;
+  --camo-10: #5d5411;
+  --camo-11: #4d460e;
+  --camo-12: #36300a;
+  --jungle-0: #ecfeb0;
+  --jungle-1: #def39a;
+  --jungle-2: #d0e884;
+  --jungle-3: #c2dd6e;
+  --jungle-4: #b5d15b;
+  --jungle-5: #a8c648;
+  --jungle-6: #9bbb36;
+  --jungle-7: #8fb024;
+  --jungle-8: #84a513;
+  --jungle-9: #7a9908;
+  --jungle-10: #658006;
+  --jungle-11: #516605;
+  --jungle-12: #3d4d04;
+}

package/node_modules/@rviscomi/capo.js/src/index.js

@@ -15,6 +15,16 @@ export {
   getWeightCategory
 } from './analyzer.js';
 
+/**
+ * @typedef {import('./analyzer.js').AnalysisResult} AnalysisResult
+ * @typedef {import('./analyzer.js').WeightInfo} WeightInfo
+ * @typedef {import('./analyzer.js').ValidationWarning} ValidationWarning
+ * @typedef {import('./analyzer.js').CustomValidation} CustomValidation
+ * @typedef {import('./analyzer.js').OrderingViolation} OrderingViolation
+ * @typedef {import('./analyzer.js').AnalysisResultWithOrdering} AnalysisResultWithOrdering
+ * @typedef {import('./analyzer.js').AnalyzeHeadOptions} AnalyzeHeadOptions
+ */
+
 // Rules API
 export {
   ElementWeights,

package/node_modules/@rviscomi/capo.js/src/lib/colors.js

@@ -3,6 +3,11 @@ const Hues = {
   BLUE: 200
 };
 
+/**
+ * Generate color swatches for a given hue
+ * @param {number} hue
+ * @returns {string[]}
+ */
 export function generateSwatches(hue) {
   return [
     `oklch(5% .1 ${hue})`,
@@ -19,6 +24,7 @@ export function generateSwatches(hue) {
   ];
 }
 
+/** @type {string[]} */
 export const DEFAULT = [
   '#9e0142',
   '#d53e4f',
@@ -33,15 +39,23 @@ export const DEFAULT = [
   '#cccccc'
 ];
 
+/** @type {string[]} */
 export const PINK = generateSwatches(Hues.PINK);
+/** @type {string[]} */
 export const BLUE = generateSwatches(Hues.BLUE);
 
+/** @type {Record<string, string[]>} */
 export const Palettes = {
   DEFAULT: DEFAULT,
   PINK: PINK,
   BLUE: BLUE
 };
 
+/**
+ * Get striped background gradient for invalid element visualization
+ * @param {string} elementColor
+ * @returns {string}
+ */
 export function getInvalidBackgroundColor(elementColor) {
   let invalidColor = '#cccccc';
   if (elementColor == invalidColor) {

package/node_modules/@rviscomi/capo.js/src/lib/io.js

@@ -1,39 +1,103 @@
 import { getInvalidBackgroundColor } from "./colors.js";
 
+/**
+ * @typedef {import('./options.js').Options} Options
+ * @typedef {import('../analyzer.js').AnalysisResult} AnalysisResult
+ * 
+ * @typedef {Object} ConsoleOutput
+ * @property {(...args: any[]) => void} log
+ * @property {(...args: any[]) => void} warn
+ * @property {(...args: any[]) => void} error
+ * @property {(...args: any[]) => void} groupCollapsed
+ * @property {() => void} groupEnd
+ * 
+ * @typedef {Object} HeadWeightInfo
+ * @property {any} [element]
+ * @property {number} weight
+ * @property {boolean} [isValid]
+ * @property {Record<string, any>} [customValidations]
+ * 
+ * @typedef {Object} ElementVisualization
+ * @property {string} visual
+ * @property {string} style
+ * 
+ * @typedef {Object} HeadVisualization
+ * @property {string} visual
+ * @property {string[]} styles
+ */
+
 export class IO {
-  constructor(document, options, output = window.console) {
+  /**
+   * @param {Document|null} document
+   * @param {Options} options
+   * @param {ConsoleOutput|any} [output=window.console]
+   */
+  constructor(document, options, output = typeof window !== 'undefined' ? window.console : console) {
     this.document = document;
     this.options = options;
     this.console = output;
     this.isStaticHead = false;
+    /** @type {any} */
     this.head = null;
   }
 
+  /**
+   * @param {string} html
+   * @returns {string}
+   */
+  static formatStaticHeadHTML(html) {
+    if (/<head[\s>]/i.test(html)) {
+      return html.replace(/(\<\/?)(head)/gi, "$1static-head");
+    }
+    return `<static-head>${html}</static-head>`;
+  }
+
+  /**
+   * @param {any} head
+   */
+  initFromStaticHead(head) {
+    this.head = head;
+    this.isStaticHead = true;
+  }
+
+  /**
+   * @param {string} html
+   */
+  initFromHTML(html) {
+    const formattedHtml = IO.formatStaticHeadHTML(html.trim());
+    const parser = new (this.document?.defaultView?.DOMParser || DOMParser)();
+    const staticDoc = parser.parseFromString(formattedHtml, "text/html");
+    this.initFromStaticHead(staticDoc.querySelector("static-head") || staticDoc.head);
+  }
+
+  /**
+   * @returns {Promise<void>}
+   */
   async init() {
     if (this.head) {
       return;
     }
 
     if (this.options.prefersDynamicAssessment()) {
-      this.head = this.document.querySelector("head");
+      this.head = this.document?.querySelector("head") || null;
       return;
     }
 
     try {
       let html = await this.getStaticHTML();
-      html = html.replace(/(\<\/?)(head)/gi, "$1static-head");
-      const staticDoc = this.document.implementation.createHTMLDocument("New Document");
-      staticDoc.documentElement.innerHTML = html;
-      this.head = staticDoc.querySelector("static-head");
+      html = IO.formatStaticHeadHTML(html);
+      const parser = new (this.document?.defaultView?.DOMParser || DOMParser)();
+      const staticDoc = parser.parseFromString(html, "text/html");
+      const staticHead = staticDoc.querySelector("static-head");
 
-      if (this.head) {
-        this.isStaticHead = true;
+      if (staticHead) {
+        this.initFromStaticHead(staticHead);
       } else {
-        this.head = this.document.head;
+        this.head = this.document?.head || null;
       }
     } catch (e) {
       this.console.error(`${this.options.loggingPrefix}An exception occurred while getting the static <head>:`, e);
-      this.head = this.document.head;
+      this.head = this.document?.head || null;
     }
 
     if (!this.isStaticHead) {
@@ -44,29 +108,48 @@ export class IO {
     }
   }
 
+  /**
+   * @returns {Promise<string>}
+   */
   async getStaticHTML() {
-    const url = this.document.location.href;
+    const url = this.document?.location.href || '';
     const response = await fetch(url);
     return await response.text();
   }
 
+  /**
+   * @returns {any}
+   */
   getHead() {
     return this.head;
   }
 
+  /**
+   * @param {any} element
+   * @returns {string}
+   */
   stringifyElement(element) {
-    return element.getAttributeNames().reduce((id, attr) => {
+    return element.getAttributeNames().reduce((/** @type {string} */ id, /** @type {string} */ attr) => {
       return (id += `[${CSS.escape(attr)}=${JSON.stringify(element.getAttribute(attr))}]`);
     }, element.nodeName);
   }
 
+  /**
+   * @param {any} element
+   * @returns {any}
+   */
   getLoggableElement(element) {
     if (!this.isStaticHead) {
       return element;
     }
 
+    const head = this.document?.head || this.head;
+    if (!head) {
+      return element;
+    }
+
     const selector = this.stringifyElement(element);
-    const candidates = Array.from(this.document.head.querySelectorAll(selector));
+    const candidates = Array.from(head.querySelectorAll(selector));
     if (candidates.length == 0) {
       return element;
     }
@@ -75,14 +158,18 @@ export class IO {
     }
 
     // The way the static elements are parsed makes their innerHTML different.
-    // Recreate the element in DOM and compare its innerHTML with those of the candidates.
-    // This ensures a consistent parsing and positive string matches.
-    const candidateWrapper = this.document.createElement("div");
-    const elementWrapper = this.document.createElement("div");
-    elementWrapper.innerHTML = element.innerHTML;
+    // Compare child nodes using isEqualNode to avoid unsafe innerHTML assignment.
+    // This ensures a consistent parsing and positive matches.
     const candidate = candidates.find((c) => {
-      candidateWrapper.innerHTML = c.innerHTML;
-      return candidateWrapper.innerHTML == elementWrapper.innerHTML;
+      if (c.childNodes.length !== element.childNodes.length) {
+        return false;
+      }
+      for (let i = 0; i < c.childNodes.length; i++) {
+        if (!c.childNodes[i].isEqualNode(element.childNodes[i])) {
+          return false;
+        }
+      }
+      return true;
     });
     if (candidate) {
       return candidate;
@@ -91,10 +178,14 @@ export class IO {
     return element;
   }
 
-  // Note: AI-generated function.
+  /**
+   * Create an element from a CSS selector
+   * @param {string} selector
+   * @returns {any}
+   */
   createElementFromSelector(selector) {
-    // Extract the tag name from the selector
-    const tagName = selector.match(/^[A-Za-z]+/)[0];
+    const match = selector.match(/^[A-Za-z]+/);
+    const tagName = match ? match[0] : null;
 
     if (!tagName) {
       return;
@@ -121,14 +212,20 @@ export class IO {
     return element;
   }
 
+  /**
+   * @param {AnalysisResult} result
+   * @returns {HeadWeightInfo[]}
+   */
   logAnalysis(result) {
     const headElement = this.getHead();
     const headWeights = result.weights.map(w => {
       const customValidation = result.customValidations.find(v => v.element === w.element);
+      const validationWarning = result.validationWarnings.find(v => v.element === w.element || (v.elements && v.elements.includes(w.element)));
+      const isElementValid = !customValidation && !validationWarning;
       return {
         element: w.element,
         weight: w.weight,
-        isValid: !customValidation,
+        isValid: isElementValid,
         customValidations: customValidation || {}
       };
     });
@@ -156,16 +253,36 @@ export class IO {
     return headWeights;
   }
 
-  logElementFromSelector({ weight, selector, innerHTML, isValid, customValidations = {} }) {
-    weight = +weight;
-    const viz = this.getElementVisualization(weight, isValid);
+  /**
+   * @param {Object} params
+   * @param {number|string} params.weight
+   * @param {string} params.selector
+   * @param {string} params.html
+   * @param {boolean} [params.isValid]
+   * @param {Record<string, any>} [params.customValidations]
+   */
+  logElementFromSelector({ weight, selector, html, isValid, customValidations = {} }) {
+    const numWeight = +weight;
+    const viz = this.getElementVisualization(numWeight, isValid);
     let element = this.createElementFromSelector(selector);
-    element.innerHTML = innerHTML;
+    const parser = new (this.document?.defaultView?.DOMParser || DOMParser)();
+    const doc = parser.parseFromString(html || "", "text/html");
+    const nodes = [...doc.head.childNodes, ...doc.body.childNodes];
+    nodes.forEach((child) => element.appendChild(child.cloneNode(true)));
     element = this.getLoggableElement(element);
 
-    this.logElement({ viz, weight, element, isValid, customValidations });
+    this.logElement({ viz, weight: numWeight, element, isValid, customValidations });
   }
 
+  /**
+   * @param {Object} params
+   * @param {ElementVisualization} params.viz
+   * @param {number} params.weight
+   * @param {any} params.element
+   * @param {boolean} [params.isValid]
+   * @param {Record<string, any>} [params.customValidations]
+   * @param {boolean} [params.omitPrefix]
+   */
   logElement({ viz, weight, element, isValid, customValidations = {}, omitPrefix = false }) {
     if (!omitPrefix) {
       viz.visual = `${this.options.loggingPrefix}${viz.visual}`;
@@ -180,7 +297,7 @@ export class IO {
     }
 
     const { payload, warnings } = customValidations;
-    if (payload) {
+    if (payload && Object.keys(payload).length > 0) {
       if (typeof payload.expiry == "string") {
         // Deserialize origin trial expiration dates.
         payload.expiry = new Date(payload.expiry);
@@ -191,7 +308,7 @@ export class IO {
     if (warnings?.length) {
       // Element-specific warnings.
       loggingLevel = "warn";
-      args.push("\n" + warnings.map((warning) => `  ❌ ${warning}`).join("\n"));
+      args.push("\n" + warnings.map((/** @type {string} */ warning) => `  ❌ ${warning}`).join("\n"));
     } else if (!isValid && (this.options.prefersDynamicAssessment() || this.isStaticHead)) {
       // General warnings.
       loggingLevel = "warn";
@@ -201,6 +318,9 @@ export class IO {
     this.console[loggingLevel](...args);
   }
 
+  /**
+   * @param {Array<import('../analyzer.js').ValidationWarning>} warnings
+   */
   logValidationWarnings(warnings) {
     if (!this.options.isValidationEnabled()) {
       return;
@@ -212,19 +332,28 @@ export class IO {
     });
   }
 
+  /**
+   * @param {number} weight
+   * @returns {string}
+   */
   getColor(weight) {
     return this.options.palette[10 - weight];
   }
 
+  /**
+   * @param {HeadWeightInfo[]} elements
+   * @returns {HeadVisualization}
+   */
   getHeadVisualization(elements) {
     let visual = "";
+    /** @type {string[]} */
     const styles = [];
 
     elements.forEach(({ weight, isValid }) => {
       visual += "%c ";
 
       const color = this.getColor(weight);
-      let style = `padding: 5px; margin: 0 -1px; `;
+      let style = `padding: 5px; margin: 4px -1px 0; display: inline-block; `;
 
       if (isValid) {
         style += `background-color: ${color};`;
@@ -238,6 +367,11 @@ export class IO {
     return { visual, styles };
   }
 
+  /**
+   * @param {number} weight
+   * @param {boolean} [isValid=true]
+   * @returns {ElementVisualization}
+   */
   getElementVisualization(weight, isValid = true) {
     const visual = `%c${new Array(weight + 1).fill("█").join("")}`;
     const color = this.getColor(weight);
@@ -246,6 +380,11 @@ export class IO {
     return { visual, style };
   }
 
+  /**
+   * @param {string} groupName
+   * @param {any} headElement
+   * @param {HeadWeightInfo[]} headWeights
+   */
   visualizeHead(groupName, headElement, headWeights) {
     const headViz = this.getHeadVisualization(headWeights);