@pie-players/pie-assessment-toolkit 0.3.75 → 1.0.0-beta.0

package/dist/services/ElementToolStateStore.d.ts

@@ -1,21 +1,22 @@
 /**
- * ElementToolStateStore - Manages element-level ephemeral tool state
+ * ElementToolStateStore: ephemeral UI tool state (answer eliminations, flags and
+ * the like), kept out of the session data sent to the server for scoring.
  *
- * Provides centralized storage for UI tool state (answer eliminations, flags, etc.)
- * that should NOT be sent to the server for scoring. Each element is uniquely identified
- * across the entire assessment using composite keys.
- *
- * Key features:
- * - Element-level granularity (not item-level)
- * - Composite keys for global uniqueness: `assessmentId:sectionId:itemId:elementId`
- * - Cross-section state persistence
- * - Reactive subscriptions
- * - Optional persistence callback integration
- * - Generic solution for any tool
+ * State is keyed by a composite global element id,
+ * `assessmentId:sectionId:attemptId:itemId:elementId`, unique across the
+ * assessment and per attempt: two attempts at one section never share a key.
+ * Subscribers see every change, and an optional persistence callback
+ * (`setOnStateChange`) receives the serialized state.
+ */
+/**
+ * The parts of a global element id. `attemptId` is `""` when the host names no
+ * attempt. A tool whose state belongs to an item or a section rather than to
+ * one element leaves `elementId`, and for a section `itemId`, as `""`.
  */
 export interface ElementIdComponents {
     assessmentId: string;
     sectionId: string;
+    attemptId: string;
     itemId: string;
     elementId: string;
 }
@@ -24,70 +25,51 @@ export declare class ElementToolStateStore {
     private listeners;
     private onStateChange;
     /**
-     * Generates a globally unique element ID by combining assessment, section, item, and element IDs.
-     * Format: `${assessmentId}:${sectionId}:${itemId}:${elementId}`, each part with
-     * `%` written as `%25` and `:` as `%3A`, so an id containing `:` round-trips
-     * and cannot collide with another split of the same characters.
+     * Generates a globally unique element ID from its parts.
+     * Format: `${assessmentId}:${sectionId}:${attemptId}:${itemId}:${elementId}`,
+     * each part with `%` written as `%25` and `:` as `%3A`, so an id containing
+     * `:` round-trips and cannot collide with another split of the same characters.
      *
      * @example
-     * getGlobalElementId('demo-assessment', 'section-1', 'q1', 'mc1')
-     * // Returns: "demo-assessment:section-1:q1:mc1"
+     * getGlobalElementId({ assessmentId: 'demo-assessment', sectionId: 'section-1',
+     *   attemptId: 'attempt-1', itemId: 'q1', elementId: 'mc1' })
+     * // Returns: "demo-assessment:section-1:attempt-1:q1:mc1"
      */
-    getGlobalElementId(assessmentId: string, sectionId: string, itemId: string, elementId: string): string;
+    getGlobalElementId(parts: ElementIdComponents): string;
     /**
      * Parses a global element ID into its component parts.
      *
      * @example
-     * parseGlobalElementId('demo-assessment:section-1:q1:mc1')
-     * // Returns: { assessmentId: 'demo-assessment', sectionId: 'section-1', itemId: 'q1', elementId: 'mc1' }
+     * parseGlobalElementId('demo-assessment:section-1:attempt-1:q1:mc1')
+     * // Returns: { assessmentId: 'demo-assessment', sectionId: 'section-1',
+     * //   attemptId: 'attempt-1', itemId: 'q1', elementId: 'mc1' }
      */
     parseGlobalElementId(globalElementId: string): ElementIdComponents | null;
     /**
      * Sets tool state for a specific element.
      * Notifies all subscribers and triggers persistence callback.
-     *
-     * @param globalElementId Composite key identifying the element
-     * @param toolId Tool identifier (e.g., 'answerEliminator', 'flagging')
-     * @param state Tool-specific state object
      */
     setState(globalElementId: string, toolId: string, state: unknown): void;
-    /**
-     * Gets tool state for a specific element.
-     *
-     * @param globalElementId Composite key identifying the element
-     * @param toolId Tool identifier
-     * @returns Tool state or undefined if not found
-     */
+    /** One tool's state for an element, or `undefined` when none is set. */
     getState(globalElementId: string, toolId: string): unknown;
-    /**
-     * Gets all tool states for a specific element.
-     *
-     * @param globalElementId Composite key identifying the element
-     * @returns Object with tool states keyed by toolId
-     */
+    /** Every tool's state for an element, keyed by toolId. */
     getElementState(globalElementId: string): Record<string, unknown>;
     /**
-     * Gets all tool states for all elements.
-     * Used for persistence and debugging.
-     *
-     * @returns Nested object: { globalElementId: { toolId: state } }
+     * All state as `{ globalElementId: { toolId: state } }`, for persistence and
+     * debugging.
      */
     getAllState(): Record<string, Record<string, unknown>>;
     /**
      * Subscribes to state changes.
      * Callback is invoked whenever any element's tool state changes, including
-     * a `loadState` restore, with a copy of the state that it may keep.
-     *
-     * @param callback Function to call on state changes
-     * @returns Unsubscribe function
+     * a `loadState` restore, with a copy of the state that it may keep. Returns
+     * the unsubscribe function.
      */
     subscribe(callback: (state: Map<string, Map<string, unknown>>) => void): () => void;
     private _notifyListeners;
     /**
      * Sets a callback to be invoked on state changes for persistence integration.
      * Used by demo/app layer to persist tool state to localStorage or server.
-     *
-     * @param callback Function to call with serialized state on changes
      */
     setOnStateChange(callback: (state: Record<string, Record<string, unknown>>) => void): void;
     private _notifyStateChange;
@@ -95,29 +77,18 @@ export declare class ElementToolStateStore {
      * Loads tool state from serialized format.
      * Used to restore state from localStorage or server. Subscribers are
      * notified; the persistence callback is not, so a restore never writes back.
-     *
-     * @param state Serialized state object
      */
     loadState(state: Record<string, Record<string, unknown>>): void;
-    /**
-     * Clears all tool state for a specific element.
-     *
-     * @param globalElementId Composite key identifying the element
-     */
+    /** Clears all tool state for a specific element. */
     clearElement(globalElementId: string): void;
     /**
      * Clears state for a specific tool across all elements.
      * Useful when disabling a tool globally.
-     *
-     * @param toolId Tool identifier
      */
     clearTool(toolId: string): void;
     /**
-     * Clears all tool state for a specific section.
+     * Clears all tool state for a specific section, across its attempts.
      * Useful when unmounting/disposing a section.
-     *
-     * @param assessmentId Assessment identifier
-     * @param sectionId Section identifier
      */
     clearSection(assessmentId: string, sectionId: string): void;
     /**

package/dist/services/ElementToolStateStore.js

@@ -1,18 +1,20 @@
 /**
- * ElementToolStateStore - Manages element-level ephemeral tool state
+ * ElementToolStateStore: ephemeral UI tool state (answer eliminations, flags and
+ * the like), kept out of the session data sent to the server for scoring.
  *
- * Provides centralized storage for UI tool state (answer eliminations, flags, etc.)
- * that should NOT be sent to the server for scoring. Each element is uniquely identified
- * across the entire assessment using composite keys.
- *
- * Key features:
- * - Element-level granularity (not item-level)
- * - Composite keys for global uniqueness: `assessmentId:sectionId:itemId:elementId`
- * - Cross-section state persistence
- * - Reactive subscriptions
- * - Optional persistence callback integration
- * - Generic solution for any tool
+ * State is keyed by a composite global element id,
+ * `assessmentId:sectionId:attemptId:itemId:elementId`, unique across the
+ * assessment and per attempt: two attempts at one section never share a key.
+ * Subscribers see every change, and an optional persistence callback
+ * (`setOnStateChange`) receives the serialized state.
  */
+const ID_PARTS = [
+    "assessmentId",
+    "sectionId",
+    "attemptId",
+    "itemId",
+    "elementId",
+];
 function escapeIdPart(part) {
     return part.replace(/%/g, "%25").replace(/:/g, "%3A");
 }
@@ -24,41 +26,37 @@ export class ElementToolStateStore {
     listeners = new Set();
     onStateChange = null;
     /**
-     * Generates a globally unique element ID by combining assessment, section, item, and element IDs.
-     * Format: `${assessmentId}:${sectionId}:${itemId}:${elementId}`, each part with
-     * `%` written as `%25` and `:` as `%3A`, so an id containing `:` round-trips
-     * and cannot collide with another split of the same characters.
+     * Generates a globally unique element ID from its parts.
+     * Format: `${assessmentId}:${sectionId}:${attemptId}:${itemId}:${elementId}`,
+     * each part with `%` written as `%25` and `:` as `%3A`, so an id containing
+     * `:` round-trips and cannot collide with another split of the same characters.
      *
      * @example
-     * getGlobalElementId('demo-assessment', 'section-1', 'q1', 'mc1')
-     * // Returns: "demo-assessment:section-1:q1:mc1"
+     * getGlobalElementId({ assessmentId: 'demo-assessment', sectionId: 'section-1',
+     *   attemptId: 'attempt-1', itemId: 'q1', elementId: 'mc1' })
+     * // Returns: "demo-assessment:section-1:attempt-1:q1:mc1"
      */
-    getGlobalElementId(assessmentId, sectionId, itemId, elementId) {
-        return [assessmentId, sectionId, itemId, elementId]
-            .map(escapeIdPart)
-            .join(":");
+    getGlobalElementId(parts) {
+        return ID_PARTS.map((name) => escapeIdPart(parts[name])).join(":");
     }
     /**
      * Parses a global element ID into its component parts.
      *
      * @example
-     * parseGlobalElementId('demo-assessment:section-1:q1:mc1')
-     * // Returns: { assessmentId: 'demo-assessment', sectionId: 'section-1', itemId: 'q1', elementId: 'mc1' }
+     * parseGlobalElementId('demo-assessment:section-1:attempt-1:q1:mc1')
+     * // Returns: { assessmentId: 'demo-assessment', sectionId: 'section-1',
+     * //   attemptId: 'attempt-1', itemId: 'q1', elementId: 'mc1' }
      */
     parseGlobalElementId(globalElementId) {
         const parts = globalElementId.split(":");
-        if (parts.length !== 4)
+        if (parts.length !== ID_PARTS.length)
             return null;
-        const [assessmentId, sectionId, itemId, elementId] = parts.map(unescapeIdPart);
-        return { assessmentId, sectionId, itemId, elementId };
+        const [assessmentId, sectionId, attemptId, itemId, elementId] = parts.map(unescapeIdPart);
+        return { assessmentId, sectionId, attemptId, itemId, elementId };
     }
     /**
      * Sets tool state for a specific element.
      * Notifies all subscribers and triggers persistence callback.
-     *
-     * @param globalElementId Composite key identifying the element
-     * @param toolId Tool identifier (e.g., 'answerEliminator', 'flagging')
-     * @param state Tool-specific state object
      */
     setState(globalElementId, toolId, state) {
         let elementState = this.elementStates.get(globalElementId);
@@ -70,22 +68,11 @@ export class ElementToolStateStore {
         this._notifyListeners();
         this._notifyStateChange();
     }
-    /**
-     * Gets tool state for a specific element.
-     *
-     * @param globalElementId Composite key identifying the element
-     * @param toolId Tool identifier
-     * @returns Tool state or undefined if not found
-     */
+    /** One tool's state for an element, or `undefined` when none is set. */
     getState(globalElementId, toolId) {
         return this.elementStates.get(globalElementId)?.get(toolId);
     }
-    /**
-     * Gets all tool states for a specific element.
-     *
-     * @param globalElementId Composite key identifying the element
-     * @returns Object with tool states keyed by toolId
-     */
+    /** Every tool's state for an element, keyed by toolId. */
     getElementState(globalElementId) {
         const elementState = this.elementStates.get(globalElementId);
         if (!elementState)
@@ -93,10 +80,8 @@ export class ElementToolStateStore {
         return Object.fromEntries(elementState.entries());
     }
     /**
-     * Gets all tool states for all elements.
-     * Used for persistence and debugging.
-     *
-     * @returns Nested object: { globalElementId: { toolId: state } }
+     * All state as `{ globalElementId: { toolId: state } }`, for persistence and
+     * debugging.
      */
     getAllState() {
         const result = {};
@@ -108,10 +93,8 @@ export class ElementToolStateStore {
     /**
      * Subscribes to state changes.
      * Callback is invoked whenever any element's tool state changes, including
-     * a `loadState` restore, with a copy of the state that it may keep.
-     *
-     * @param callback Function to call on state changes
-     * @returns Unsubscribe function
+     * a `loadState` restore, with a copy of the state that it may keep. Returns
+     * the unsubscribe function.
      */
     subscribe(callback) {
         this.listeners.add(callback);
@@ -136,8 +119,6 @@ export class ElementToolStateStore {
     /**
      * Sets a callback to be invoked on state changes for persistence integration.
      * Used by demo/app layer to persist tool state to localStorage or server.
-     *
-     * @param callback Function to call with serialized state on changes
      */
     setOnStateChange(callback) {
         this.onStateChange = callback;
@@ -156,8 +137,6 @@ export class ElementToolStateStore {
      * Loads tool state from serialized format.
      * Used to restore state from localStorage or server. Subscribers are
      * notified; the persistence callback is not, so a restore never writes back.
-     *
-     * @param state Serialized state object
      */
     loadState(state) {
         this.elementStates.clear();
@@ -167,11 +146,7 @@ export class ElementToolStateStore {
         }
         this._notifyListeners();
     }
-    /**
-     * Clears all tool state for a specific element.
-     *
-     * @param globalElementId Composite key identifying the element
-     */
+    /** Clears all tool state for a specific element. */
     clearElement(globalElementId) {
         this.elementStates.delete(globalElementId);
         this._notifyListeners();
@@ -180,8 +155,6 @@ export class ElementToolStateStore {
     /**
      * Clears state for a specific tool across all elements.
      * Useful when disabling a tool globally.
-     *
-     * @param toolId Tool identifier
      */
     clearTool(toolId) {
         for (const elementState of this.elementStates.values()) {
@@ -191,11 +164,8 @@ export class ElementToolStateStore {
         this._notifyStateChange();
     }
     /**
-     * Clears all tool state for a specific section.
+     * Clears all tool state for a specific section, across its attempts.
      * Useful when unmounting/disposing a section.
-     *
-     * @param assessmentId Assessment identifier
-     * @param sectionId Section identifier
      */
     clearSection(assessmentId, sectionId) {
         const prefix = `${escapeIdPart(assessmentId)}:${escapeIdPart(sectionId)}:`;

package/dist/services/HighlightCoordinator.d.ts

@@ -11,8 +11,6 @@
  * - Configurable colors and styles
  * - Annotation persistence via RangeSerializer
  *
- * Part of PIE Assessment Toolkit.
- *
  * Browser Support:
  * - Chrome/Edge 105+
  * - Safari 17.2+
@@ -63,6 +61,11 @@ export declare class HighlightCoordinator implements HighlightCoordinatorApi {
     private rangeSerializer;
     private themeObserver;
     constructor();
+    /**
+     * Re-adapt the TTS colors when the page's theme moves: on the document
+     * element, on a `<pie-theme>` host, and when a `<pie-theme>` mounts, which
+     * themes its target as it connects.
+     */
     private setupThemeObservation;
     private parseColor;
     private relativeLuminance;
@@ -100,12 +103,10 @@ export declare class HighlightCoordinator implements HighlightCoordinatorApi {
      * lives in a font-driven pseudo-element a CSS range cannot paint) and
      * whole-expression fallbacks.
      *
-     * The supplied element is painted exactly; we deliberately do NOT walk up to
-     * a containing `<math>` / `<mjx-container>`. That escalation is what made
-     * MathJax-rendered math highlight as a full block while native MathML tracked
-     * per-token: a resolved single token must paint as a token, and only a
-     * genuine expression fallback (where the element already is the container)
-     * should paint the whole expression.
+     * The supplied element is painted exactly, with no walk up to a containing
+     * `<math>` / `<mjx-container>`: a resolved token paints as a token, and only
+     * an expression fallback, where the element already is the container, paints
+     * the whole expression.
      */
     highlightTTSWordElement(element: Element): void;
     /**
@@ -196,23 +197,10 @@ export declare class HighlightCoordinator implements HighlightCoordinatorApi {
         color: HighlightColor;
         timestamp?: number;
     }>, root?: Element): number;
-    /**
-     * Highlight a range as the given type: the TTS types paint as
-     * {@link highlightTTSWord} and {@link highlightTTSSentence} do.
-     */
-    highlightRange(range: Range, type: HighlightType, color?: HighlightColor): void;
-    /**
-     * Clear highlights of a specific type (interface method)
-     */
-    clearHighlights(type: HighlightType): void;
     /**
      * Clear all highlights (interface method)
      */
     clearAll(): void;
-    /**
-     * Check if CSS Highlight API is supported (interface method)
-     */
-    isSupported(): boolean;
     /**
      * Update TTS highlight style dynamically
      *

package/dist/services/HighlightCoordinator.js

@@ -11,8 +11,6 @@
  * - Configurable colors and styles
  * - Annotation persistence via RangeSerializer
  *
- * Part of PIE Assessment Toolkit.
- *
  * Browser Support:
  * - Chrome/Edge 105+
  * - Safari 17.2+
@@ -383,31 +381,55 @@ export class HighlightCoordinator {
         this.applyAdaptiveTTSStyle();
         this.setupThemeObservation();
     }
+    /**
+     * Re-adapt the TTS colors when the page's theme moves: on the document
+     * element, on a `<pie-theme>` host, and when a `<pie-theme>` mounts, which
+     * themes its target as it connects.
+     */
     setupThemeObservation() {
         if (typeof document === "undefined")
             return;
         if (typeof MutationObserver === "undefined")
             return;
-        const refresh = () => this.applyAdaptiveTTSStyle();
-        this.themeObserver = new MutationObserver(refresh);
-        this.themeObserver.observe(document.documentElement, {
+        const themeHosts = document.getElementsByTagName("pie-theme");
+        const observedHosts = new WeakSet();
+        const observeNewHosts = () => {
+            let found = false;
+            for (const host of themeHosts) {
+                if (observedHosts.has(host))
+                    continue;
+                observedHosts.add(host);
+                observer.observe(host, {
+                    attributes: true,
+                    attributeFilter: [
+                        "theme",
+                        "scheme",
+                        "provider",
+                        "variables",
+                        "style",
+                        "data-theme",
+                        "data-color-scheme",
+                    ],
+                });
+                found = true;
+            }
+            return found;
+        };
+        const observer = new MutationObserver((records) => {
+            const mounted = observeNewHosts();
+            if (mounted || records.some((record) => record.type === "attributes")) {
+                this.applyAdaptiveTTSStyle();
+            }
+        });
+        this.themeObserver = observer;
+        observer.observe(document.documentElement, {
             attributes: true,
             attributeFilter: ["style", "data-theme", "data-color-scheme", "class"],
         });
-        for (const host of document.querySelectorAll("pie-theme")) {
-            this.themeObserver.observe(host, {
-                attributes: true,
-                attributeFilter: [
-                    "theme",
-                    "scheme",
-                    "provider",
-                    "variables",
-                    "style",
-                    "data-theme",
-                    "data-color-scheme",
-                ],
-            });
-        }
+        // Insertions, so a `<pie-theme>` mounted later is found. An insertion
+        // costs a walk of the live host list, which holds a handful at most.
+        observer.observe(document, { childList: true, subtree: true });
+        observeNewHosts();
     }
     parseColor(input) {
         if (!input)
@@ -511,6 +533,8 @@ export class HighlightCoordinator {
             : [0.8, 0.72, 0.68, 0.62, 0.56, 0.5];
         let selectedOpacity = opacityCandidates[opacityCandidates.length - 1];
         let bestScore = -Infinity;
+        // The first opacity whose blend clears 1.25:1 against the background and
+        // 2.4:1 against the text wins; otherwise the best weighted score.
         for (const opacity of opacityCandidates) {
             const blended = this.blend(accent, background, opacity);
             const backgroundDelta = this.contrastRatio(blended, background);
@@ -593,7 +617,6 @@ export class HighlightCoordinator {
             return;
         if (typeof document === "undefined")
             return; // SSR guard
-        // Check if styles already exist
         if (document.getElementById("pie-highlight-styles"))
             return;
         const style = document.createElement("style");
@@ -633,12 +656,10 @@ export class HighlightCoordinator {
      * lives in a font-driven pseudo-element a CSS range cannot paint) and
      * whole-expression fallbacks.
      *
-     * The supplied element is painted exactly; we deliberately do NOT walk up to
-     * a containing `<math>` / `<mjx-container>`. That escalation is what made
-     * MathJax-rendered math highlight as a full block while native MathML tracked
-     * per-token: a resolved single token must paint as a token, and only a
-     * genuine expression fallback (where the element already is the container)
-     * should paint the whole expression.
+     * The supplied element is painted exactly, with no walk up to a containing
+     * `<math>` / `<mjx-container>`: a resolved token paints as a token, and only
+     * an expression fallback, where the element already is the container, paints
+     * the whole expression.
      */
     highlightTTSWordElement(element) {
         if (!this.supported)
@@ -660,7 +681,6 @@ export class HighlightCoordinator {
         if (!this.supported)
             return;
         this.applyAdaptiveTTSStyle(startElementOf(ranges));
-        // Clear previous sentence highlight
         this.clearTTSSentence();
         const highlight = sharedHighlight(TTS_SENTENCE_HIGHLIGHT);
         for (const range of ranges) {
@@ -689,12 +709,11 @@ export class HighlightCoordinator {
     // The read-along (sentence) band legitimately covers whole equations and
     // replaced elements, so it escalates to them.
     static SENTENCE_FALLBACK_SELECTOR = "math, mjx-container, svg, img, canvas, [role='img']";
-    // The word layer must NOT escalate a multi-node range to the enclosing
-    // `<math>` / `<mjx-container>`: that is what made an equation flash as a
-    // whole block whenever a spoken word's visible range crossed several math
-    // glyph nodes. Math is tracked per token (or held / region) by the highlight
-    // pipeline instead. Replaced elements (svg/img/canvas) still need the element
-    // fallback because a CSS range cannot paint them.
+    // The word layer falls back to the element only for replaced elements
+    // (svg/img/canvas), which a CSS range cannot paint. Escalating to the
+    // enclosing `<math>` / `<mjx-container>` flashed the whole equation whenever
+    // a word crossed several glyph nodes, so math is tracked per token, held or
+    // by region in the highlight pipeline.
     static WORD_FALLBACK_SELECTOR = "svg, img, canvas, [role='img']";
     highlightTTSElementFallbacks(ranges) {
         if (typeof Element === "undefined")
@@ -796,10 +815,8 @@ export class HighlightCoordinator {
      */
     addAnnotation(range, color = HighlightColor.YELLOW) {
         const id = `annotation-${this.nextAnnotationId++}`;
-        // Clone the range to store
         const clonedRange = range.cloneRange();
         adoptHighlightStylesFor(clonedRange.startContainer);
-        // Store annotation data
         const annotation = {
             id,
             range: clonedRange,
@@ -913,44 +930,6 @@ export class HighlightCoordinator {
     // ============================================================================
     // HighlightCoordinatorApi interface implementation
     // ============================================================================
-    /**
-     * Highlight a range as the given type: the TTS types paint as
-     * {@link highlightTTSWord} and {@link highlightTTSSentence} do.
-     */
-    highlightRange(range, type, color = HighlightColor.YELLOW) {
-        if (!this.supported)
-            return;
-        switch (type) {
-            case HighlightType.TTS_WORD:
-                this.highlightTTSWord([range]);
-                break;
-            case HighlightType.TTS_SENTENCE:
-                this.highlightTTSSentence([range]);
-                break;
-            case HighlightType.ANNOTATION:
-                // For annotations, use the existing method
-                this.addAnnotation(range, color);
-                break;
-        }
-    }
-    /**
-     * Clear highlights of a specific type (interface method)
-     */
-    clearHighlights(type) {
-        if (!this.supported)
-            return;
-        switch (type) {
-            case HighlightType.TTS_WORD:
-                this.clearTTSWord();
-                break;
-            case HighlightType.TTS_SENTENCE:
-                this.clearTTSSentence();
-                break;
-            case HighlightType.ANNOTATION:
-                this.clearAnnotations();
-                break;
-        }
-    }
     /**
      * Clear all highlights (interface method)
      */
@@ -960,12 +939,6 @@ export class HighlightCoordinator {
         this.clearTTS();
         this.clearAnnotations();
     }
-    /**
-     * Check if CSS Highlight API is supported (interface method)
-     */
-    isSupported() {
-        return this.supported;
-    }
     /**
      * Update TTS highlight style dynamically
      *
@@ -980,7 +953,6 @@ export class HighlightCoordinator {
         const styleEl = document.getElementById("pie-highlight-styles");
         if (!styleEl)
             return;
-        // Convert hex to rgba
         const hexToRgb = (hex) => {
             const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
             return result