dsh-plugin-term-dictionary 0.0.0-stage → 1.0.0

package/lib/core/hover.js

@@ -0,0 +1,470 @@
+"use strict";
+
+/**
+ * The pointer layer: the hover card, the pointer cursor, and the click that opens an entry.
+ *
+ * This is `dsh-plugin-term-wikilink`'s pointer layer, moved in and made smaller by the move.
+ *
+ * What the move removed
+ * --------------------
+ * As a separate plugin this layer had to FETCH the terms (`/dsh-term-dictionary/state`, with a
+ * `localStorage` fallback), walk the transcript a second time, and carry its own matcher — so two
+ * independent pieces of code decided what counts as a marked term, and they disagreed: the marking
+ * painted inline-code words that the hit test then refused, which is what "underlined but nothing
+ * happens" was. It also had to find the dictionary's row by DOM marker (`data-term-entry`) to
+ * reveal an entry, because the panel belonged to another plugin.
+ *
+ * Inside the dictionary all three disappear:
+ *
+ *  - the terms are here, and the ANNOTATION already computes every occurrence as a
+ *    `(node, start, end)` triple, filtered to the entries a reader would want explained
+ *    (`highlight.js`). A caret is the same kind of coordinate, so the hit test is a lookup in
+ *    that list — one text walk in the whole plugin, one matching rule;
+ *  - revealing an entry is a call to the panel this plugin already owns.
+ *
+ * The three behaviours worth naming, all of them learned the hard way:
+ *
+ *  - **the region comes from the event's own target**, every time. The host can mount more than
+ *    one conversation body, and `querySelector` returns the document-order first, which may be
+ *    the hidden one;
+ *  - **listeners are registered in the CAPTURE phase.** React 17+ delegates to the root container
+ *    below `document`, so any `stopPropagation()` in the tree silences a bubble-phase listener —
+ *    indistinguishable from "the page produced no event";
+ *  - **the delay governs APPEARING only.** Leaving closes at once: a card that waits out a timer
+ *    after the pointer has gone reads as lag, not as composure.
+ */
+
+/** The conversation BODY. The bare attribute also matches the composer seat inside it. */
+const CHAT_SELECTOR = '[data-conversation-region="chat"]';
+
+/** How long the pointer must rest on a term before the card appears. */
+const HOVER_DELAY_MS = 110;
+
+/**
+ * The highlight registry key for the term the pointer is on. Distinct from the annotation's own
+ * name, and given a higher priority so the hovered word reads as the live one.
+ */
+const ACTIVE_HIGHLIGHT = "term-dictionary-active";
+
+/** The class put on the conversation body while the pointer is on a term, for the cursor rule. */
+const HOT_CLASS = "term-dictionary-hot";
+
+const { selectionActive } = require("./selection.js");
+
+/**
+ * Turn a caret into a text node plus an offset inside it.
+ *
+ * A caret may land on an element (between two children) rather than on a character; that is
+ * resolved to the start of the following text, or to the end of the preceding one.
+ *
+ * @param caret - `{ startContainer, startOffset }`.
+ * @param document - the document to build a walker with.
+ * @returns `{ node, offset }`, or null when no text can be found.
+ */
+function resolveCaret(caret, document) {
+	const container = caret?.startContainer;
+	if (container === null || container === undefined) return null;
+	if (container.nodeType === 3) {
+		const length = container.nodeValue?.length ?? 0;
+		return { node: container, offset: Math.max(0, Math.min(caret.startOffset ?? 0, length)) };
+	}
+	if (container.nodeType !== 1) return null;
+	const children = Array.from(container.childNodes ?? []);
+	const following = children[caret.startOffset ?? 0];
+	if (following !== undefined) {
+		if (following.nodeType === 3) return { node: following, offset: 0 };
+		const inner = firstTextNode(following);
+		if (inner !== null) return { node: inner, offset: 0 };
+	}
+	const last = lastTextNode(container);
+	return last === null ? null : { node: last, offset: last.nodeValue?.length ?? 0 };
+}
+
+/**
+ * The first text node inside a subtree.
+ * @param root - the subtree root.
+ * @returns the node, or null.
+ */
+function firstTextNode(root) {
+	for (const child of Array.from(root.childNodes ?? [])) {
+		if (child.nodeType === 3 && (child.nodeValue ?? "") !== "") return child;
+		if (child.nodeType === 1) {
+			const found = firstTextNode(child);
+			if (found !== null) return found;
+		}
+	}
+	return null;
+}
+
+/**
+ * The last text node inside a subtree.
+ * @param root - the subtree root.
+ * @returns the node, or null.
+ */
+function lastTextNode(root) {
+	const children = Array.from(root.childNodes ?? []);
+	for (let at = children.length - 1; at >= 0; at--) {
+		const child = children[at];
+		if (child.nodeType === 3 && (child.nodeValue ?? "") !== "") return child;
+		if (child.nodeType === 1) {
+			const found = lastTextNode(child);
+			if (found !== null) return found;
+		}
+	}
+	return null;
+}
+
+/**
+ * Build the pointer layer.
+ *
+ * @param options - `document`, `segments` (a thunk returning the marked occurrences), `delays`
+ *   (a thunk returning `{ inMs, outMs }`), `onOpen`, `onActivate`, `onClose`, `logger`.
+ * @returns `{ attach, detach, close, matchAt, stats, view }`.
+ */
+function createHoverLayer(options) {
+	const doc = options.document ?? globalThis.document;
+	const logger = options.logger ?? null;
+	const readSegments = typeof options.segments === "function" ? options.segments : () => [];
+	const readDelays = typeof options.delays === "function" ? options.delays : () => null;
+	const onOpen = typeof options.onOpen === "function" ? options.onOpen : null;
+	const onActivate = typeof options.onActivate === "function" ? options.onActivate : null;
+	const onClose = typeof options.onClose === "function" ? options.onClose : null;
+
+	/**
+	 * The two delays, read fresh for every gesture.
+	 *
+	 * A thunk rather than two numbers copied at attach time: the settings page is a few centimetres
+	 * away from the transcript, and a knob that only takes effect after a reload is a knob nobody
+	 * trusts. Defaults match the constants so the layer is usable on its own — in a test, or before
+	 * the settings store has hydrated.
+	 *
+	 * @returns `{ inMs, outMs }`, both whole milliseconds.
+	 */
+	function delays() {
+		const raw = readDelays() ?? {};
+		const inMs = Number.isFinite(raw.inMs) ? Math.max(0, Math.round(raw.inMs)) : HOVER_DELAY_MS;
+		const outMs = Number.isFinite(raw.outMs) ? Math.max(0, Math.round(raw.outMs)) : 0;
+		return { inMs, outMs };
+	}
+
+	/** The card's state, kept outside React so the listeners can drive it. */
+	let view = { kind: "closed" };
+	const viewListeners = new Set();
+	const setView = (next) => {
+		view = next;
+		for (const listener of [...viewListeners]) listener();
+	};
+
+	let hoverTimer = null;
+	/** The pending exit, when the user has asked for a grace period. */
+	let closeTimer = null;
+	let hoverPoint = null;
+	let hotRegion = null;
+	/** The conversation body the pointer was last inside, for the cursor class. */
+	let activeRegion = null;
+	let attached = false;
+
+	const stats = { moves: 0, inRegion: 0, lookups: 0, hits: 0, clicks: 0, opens: 0, closes: 0 };
+
+	/** Report a caught failure without breaking the page. */
+	function warn(message, error) {
+		logger?.warn?.(`term-dictionary: ${message}: ${error instanceof Error ? error.message : String(error)}`);
+	}
+
+	/**
+	 * The conversation body an event happened in, or null when it is not in a transcript.
+	 * @param target - the event target.
+	 * @returns the region element, or null.
+	 */
+	function regionFromTarget(target) {
+		if (target === null || target === undefined || typeof target.closest !== "function") return null;
+		return target.closest(CHAT_SELECTOR);
+	}
+
+	/** Resolve the caret under a point through either browser API. */
+	function caretAt(x, y) {
+		if (typeof doc?.caretRangeFromPoint === "function") {
+			const range = doc.caretRangeFromPoint(x, y);
+			if (range !== null && range !== undefined) return range;
+		}
+		if (typeof doc?.caretPositionFromPoint === "function") {
+			const position = doc.caretPositionFromPoint(x, y);
+			if (position !== null && position !== undefined && position.offsetNode != null) {
+				const range = doc.createRange();
+				range.setStart(position.offsetNode, position.offset);
+				range.collapse(true);
+				return range;
+			}
+		}
+		return null;
+	}
+
+	/**
+	 * The marked occurrence under a point.
+	 *
+	 * A caret on a boundary belongs to both neighbours; the narrower span wins, and among equal
+	 * spans the one that starts AT the caret does — a caret on the first character means that
+	 * word, not the one ending there.
+	 *
+	 * @param x - viewport x.
+	 * @param y - viewport y.
+	 * @returns the segment, or null.
+	 */
+	function matchAt(x, y) {
+		const caret = caretAt(x, y);
+		if (caret === null) return null;
+		const at = resolveCaret(caret, doc);
+		if (at === null) return null;
+		let best = null;
+		for (const segment of readSegments()) {
+			if (segment.node !== at.node) continue;
+			if (at.offset < segment.start || at.offset > segment.end) continue;
+			if (best === null) {
+				best = segment;
+				continue;
+			}
+			const span = segment.end - segment.start;
+			const bestSpan = best.end - best.start;
+			if (span < bestSpan || (span === bestSpan && segment.start > best.start)) best = segment;
+		}
+		return best;
+	}
+
+	/** A DOM Range over one segment, for its box and for the emphasis. */
+	function rangeOf(segment) {
+		if (typeof doc?.createRange !== "function") return null;
+		try {
+			const range = doc.createRange();
+			range.setStart(segment.node, segment.start);
+			range.setEnd(segment.node, segment.end);
+			return range;
+		} catch (error) {
+			return null;
+		}
+	}
+
+	/** Mark one occurrence as the live link: an emphasis, and a pointer cursor. */
+	function setActive(segment, region) {
+		clearActive();
+		const range = rangeOf(segment);
+		if (range === null) return;
+		try {
+			const registry = globalThis.CSS?.highlights ?? null;
+			const HighlightConstructor = globalThis.Highlight ?? null;
+			if (registry !== null && typeof registry.set === "function" && typeof HighlightConstructor === "function") {
+				const highlight = new HighlightConstructor(range);
+				try {
+					highlight.priority = 1;
+				} catch (error) {
+					void error;
+				}
+				registry.set(ACTIVE_HIGHLIGHT, highlight);
+			}
+		} catch (error) {
+			warn("marking the hovered term failed", error);
+		}
+		try {
+			if (typeof region?.classList?.add === "function") {
+				region.classList.add(HOT_CLASS);
+				hotRegion = region;
+			}
+		} catch (error) {
+			void error;
+		}
+	}
+
+	/** Drop the emphasis and the pointer cursor. */
+	function clearActive() {
+		try {
+			const registry = globalThis.CSS?.highlights ?? null;
+			if (registry !== null && typeof registry.delete === "function") registry.delete(ACTIVE_HIGHLIGHT);
+		} catch (error) {
+			void error;
+		}
+		try {
+			if (hotRegion !== null && typeof hotRegion.classList?.remove === "function") hotRegion.classList.remove(HOT_CLASS);
+		} catch (error) {
+			void error;
+		}
+		hotRegion = null;
+	}
+
+	/** Hide the card, dropping the emphasis with it. */
+	function close() {
+		cancelClose();
+		clearActive();
+		if (view.kind !== "closed") {
+			stats.closes++;
+			setView({ kind: "closed" });
+			if (onClose !== null) onClose();
+		}
+	}
+
+	/** Drop a pending exit, because the pointer came back to a term. */
+	function cancelClose() {
+		if (closeTimer !== null) {
+			clearTimeout(closeTimer);
+			closeTimer = null;
+		}
+	}
+
+	/**
+	 * Leave the term: at once by default, or after the configured grace period.
+	 *
+	 * The grace period has to be CANCELLABLE, which is the whole reason it is a timer and not a
+	 * sleep: without that, moving from one marked term to the next would schedule a close on leaving
+	 * the first and then close the second one's card from under the pointer.
+	 */
+	function leaveTerm() {
+		const { outMs } = delays();
+		if (outMs <= 0) {
+			close();
+			return;
+		}
+		if (closeTimer !== null) clearTimeout(closeTimer);
+		closeTimer = setTimeout(() => {
+			closeTimer = null;
+			close();
+		}, outMs);
+	}
+
+	/** The card's anchor: the term's own box, never the pointer. */
+	function anchorOf(segment) {
+		const range = rangeOf(segment);
+		if (range === null) return null;
+		try {
+			const box = range.getBoundingClientRect();
+			if (box === null || box === undefined) return null;
+			if (box.width === 0 && box.height === 0) return null;
+			return { left: box.left, top: box.top, right: box.right, bottom: box.bottom, width: box.width, height: box.height };
+		} catch (error) {
+			return null;
+		}
+	}
+
+	/** Resolve the resting pointer to a card, or close the card. */
+	function resolveHover() {
+		hoverTimer = null;
+		const point = hoverPoint;
+		if (point === null) return;
+		stats.lookups++;
+		const segment = matchAt(point.x, point.y);
+		if (segment === null) {
+			leaveTerm();
+			return;
+		}
+		// A term is under the pointer, so any pending exit is void.
+		cancelClose();
+		if (view.kind === "open" && view.segment.key === segment.key) return;
+		stats.hits++;
+		setActive(segment, activeRegion);
+		const anchor = anchorOf(segment);
+		setView({ kind: "open", segment, anchor });
+		if (onOpen !== null) onOpen(segment, anchor);
+	}
+
+	/**
+	 * React to pointer movement.
+	 * @param event - the pointer event.
+	 */
+	function onPointerMove(event) {
+		stats.moves++;
+		const region = regionFromTarget(event.target);
+		activeRegion = region;
+		if (region === null) {
+			hoverPoint = null;
+			if (hoverTimer !== null) {
+				clearTimeout(hoverTimer);
+				hoverTimer = null;
+			}
+			close();
+			return;
+		}
+		stats.inRegion++;
+		hoverPoint = { x: event.clientX, y: event.clientY };
+		// A card that is DISAPPEARING must not wait for the ENTRY delay. That delay exists so a card
+		// does not flash while the pointer crosses a word on its way somewhere else — an argument
+		// about appearing, not about leaving. Leaving has its own delay, and it defaults to zero.
+		if (view.kind === "open") {
+			const segment = matchAt(hoverPoint.x, hoverPoint.y);
+			if (segment !== null && segment.key === view.segment.key) {
+				cancelClose();
+				return;
+			}
+			leaveTerm();
+			return;
+		}
+		if (hoverTimer !== null) clearTimeout(hoverTimer);
+		hoverTimer = setTimeout(resolveHover, delays().inMs);
+	}
+
+	/**
+	 * React to a click: open the entry of the term under the pointer.
+	 * @param event - the click event.
+	 */
+	function onClick(event) {
+		if (event.button !== 0 || event.altKey === true || event.metaKey === true) return;
+		stats.clicks++;
+		if (regionFromTarget(event.target) === null) return;
+		// A click that ENDS a selection is a selection gesture, not a choice.
+		//
+		// This layer handles the words the dictionary already knows — which are exactly the words a
+		// person selects while copying a sentence out of a reply. Dragging across one and releasing on
+		// it used to switch the whole main region to the dictionary, so the sentence being copied was
+		// replaced by an entry page. `interact.js` has guarded its own click path for as long as it has
+		// had one; this path was added later and never got the guard, and the two now share one answer
+		// (`selection.js`) so they cannot drift apart again.
+		if (selectionActive(doc)) return;
+		const segment = matchAt(event.clientX, event.clientY);
+		if (segment === null) return;
+		stats.opens++;
+		close();
+		if (onActivate !== null) onActivate(segment);
+	}
+
+	/** Bind every listener. */
+	function attach() {
+		if (attached) return;
+		attached = true;
+		const onKeyDown = (event) => {
+			if (event.key === "Escape") close();
+		};
+		const onScroll = () => close();
+		// Capture on all four: see the note at the top of this file.
+		doc.addEventListener("pointermove", onPointerMove, true);
+		doc.addEventListener("click", onClick, true);
+		doc.addEventListener("keydown", onKeyDown, true);
+		globalThis.addEventListener?.("scroll", onScroll, true);
+		options.disposers.push(() => doc.removeEventListener("pointermove", onPointerMove, true));
+		options.disposers.push(() => doc.removeEventListener("click", onClick, true));
+		options.disposers.push(() => doc.removeEventListener("keydown", onKeyDown, true));
+		options.disposers.push(() => globalThis.removeEventListener?.("scroll", onScroll, true));
+	}
+
+	/** Remove every listener and timer. */
+	function detach() {
+		attached = false;
+		if (hoverTimer !== null) clearTimeout(hoverTimer);
+		hoverTimer = null;
+		cancelClose();
+		hoverPoint = null;
+		close();
+	}
+
+	return {
+		attach,
+		detach,
+		close,
+		matchAt,
+		stats,
+		view: {
+			getSnapshot: () => view,
+			subscribe: (listener) => {
+				viewListeners.add(listener);
+				return () => viewListeners.delete(listener);
+			}
+		}
+	};
+}
+
+module.exports = { createHoverLayer, resolveCaret, ACTIVE_HIGHLIGHT, HOT_CLASS, HOVER_DELAY_MS };

package/lib/core/hovercard.js

@@ -0,0 +1,173 @@
+"use strict";
+
+/**
+ * The hover card: the brief explanation shown while the pointer rests on a marked term.
+ *
+ * Moved in from `dsh-plugin-term-wikilink` with one change of substance — the content now comes
+ * from this plugin's own store and detector instead of a fetched term list, so there is no
+ * "the dictionary is unreachable" state to degrade into.
+ *
+ * Two properties are deliberate and worth keeping:
+ *
+ *  - it is a fixed-position overlay, because the transcript belongs to the host renderer and a
+ *    plugin must not write into it;
+ *  - it carries `pointer-events: none`, because the card is a reading aid and the click that opens
+ *    the entry has to reach the text underneath it.
+ *
+ * `data-term-dictionary="hover-card"` marks it as one of this plugin's own surfaces, which is what
+ * keeps the layer from treating the card itself as a term (the marker is in the plugin's blocked
+ * set).
+ */
+
+const React = require("react");
+
+const h = React.createElement;
+
+/** The registry key and the cursor class, shared with the pointer layer that creates them. */
+const { ACTIVE_HIGHLIGHT, HOT_CLASS } = require("./hover.js");
+
+/** Gap between the term's box and the card. */
+const ANCHOR_GAP = 10;
+
+/** Minimum distance from a viewport edge. */
+const EDGE_GAP = 10;
+
+/** Shared surface recipe, kept to theme tokens the platform actually defines. */
+const SURFACE = {
+	background: "var(--dsw-alias-bg-overlay)",
+	border: "0.5px solid var(--dsw-alias-border-l2)",
+	borderRadius: "var(--dsw-radius-lg, 12px)"
+};
+
+const STYLES = {
+	card: {
+		...SURFACE,
+		position: "fixed",
+		zIndex: 2147482000,
+		width: "min(340px, calc(100vw - 24px))",
+		maxHeight: "min(52vh, 360px)",
+		overflowY: "auto",
+		boxShadow: "0 10px 30px rgba(0, 0, 0, 0.22)",
+		padding: "12px 14px",
+		display: "flex",
+		flexDirection: "column",
+		gap: "6px",
+		font: "inherit",
+		color: "var(--dsw-alias-label-primary)",
+		// The card must never eat a pointer event: the click belongs to the term underneath.
+		pointerEvents: "none"
+	},
+	head: { display: "flex", alignItems: "baseline", gap: "8px", flexWrap: "wrap" },
+	term: { margin: 0, fontSize: "15px", fontWeight: 600, lineHeight: 1.3 },
+	zh: { fontSize: "13px", color: "var(--dsw-alias-label-secondary)" },
+	domain: {
+		fontSize: "10px",
+		lineHeight: 1.7,
+		padding: "0 6px",
+		borderRadius: "999px",
+		color: "var(--dsw-alias-label-secondary)",
+		background: "var(--dsw-alias-bg-layer-2, transparent)",
+		border: "0.5px solid var(--dsw-alias-border-l2)"
+	},
+	gloss: { margin: 0, fontSize: "13px", lineHeight: 1.7, color: "var(--dsw-alias-label-secondary)", whiteSpace: "pre-wrap" },
+	glossMuted: { margin: 0, fontSize: "13px", fontStyle: "italic", color: "var(--dsw-alias-label-tertiary)" },
+	usage: {
+		margin: 0,
+		fontSize: "12px",
+		lineHeight: 1.6,
+		color: "var(--dsw-alias-label-tertiary)",
+		paddingLeft: "8px",
+		borderLeft: "2px solid var(--dsw-alias-border-l2)",
+		whiteSpace: "pre-wrap"
+	},
+	footer: {
+		margin: 0,
+		paddingTop: "6px",
+		borderTop: "0.5px solid var(--dsw-alias-border-l2)",
+		fontSize: "11px",
+		color: "var(--dsw-alias-brand-primary, var(--dsw-alias-label-secondary))"
+	}
+};
+
+/**
+ * The card itself.
+ *
+ * @param props - `entry` (`{ term, zh, gloss, usage, domain }`), `anchor`, `t`.
+ * @returns the card element.
+ */
+function HoverCard(props) {
+	const { entry, anchor, t } = props;
+	const ref = React.useRef(null);
+	const [placement, setPlacement] = React.useState(null);
+
+	// Measure after paint, then pull the box back inside the viewport. The anchor is the TERM's
+	// box: anchoring to the pointer made the card follow the mouse, which reads as jitter rather
+	// than as a tooltip. A card belongs to the word.
+	React.useLayoutEffect(() => {
+		const element = ref.current;
+		if (element === null || anchor === null || anchor === undefined) return;
+		const box = element.getBoundingClientRect();
+		const width = globalThis.innerWidth ?? 0;
+		const height = globalThis.innerHeight ?? 0;
+		let left = anchor.left;
+		let top = anchor.bottom + ANCHOR_GAP;
+		// No room below the word: open above it, the way a tooltip should.
+		if (height > 0 && top + box.height > height - EDGE_GAP) top = Math.max(EDGE_GAP, anchor.top - ANCHOR_GAP - box.height);
+		if (width > 0 && left + box.width > width - EDGE_GAP) left = Math.max(EDGE_GAP, width - EDGE_GAP - box.width);
+		setPlacement({ left: Math.round(left), top: Math.round(top) });
+	}, [anchor?.left, anchor?.top, anchor?.bottom, entry?.key, entry?.gloss]);
+
+	const gloss = typeof entry?.gloss === "string" ? entry.gloss : "";
+	const style = {
+		...STYLES.card,
+		...(placement === null ? { left: "-9999px", top: "-9999px" } : { left: `${placement.left}px`, top: `${placement.top}px` })
+	};
+
+	return h(
+		"div",
+		{ ref, style, role: "tooltip", "aria-label": entry?.term ?? "", "data-term-dictionary": "hover-card" },
+		h(
+			"div",
+			{ style: STYLES.head },
+			h("p", { style: STYLES.term }, entry?.term ?? ""),
+			entry?.zh !== undefined && entry?.zh !== "" ? h("span", { style: STYLES.zh }, entry.zh) : null,
+			entry?.domain !== undefined && entry?.domain !== "" ? h("span", { style: STYLES.domain }, entry.domain) : null
+		),
+		gloss !== "" ? h("p", { style: STYLES.gloss }, gloss) : h("p", { style: STYLES.glossMuted }, t("hoverNoGloss")),
+		entry?.usage !== undefined && entry?.usage !== "" ? h("p", { style: STYLES.usage }, entry.usage) : null,
+		h("p", { style: STYLES.footer }, t("hoverOpenEntry"))
+	);
+}
+
+/**
+ * The stylesheet the pointer layer needs, rendered as an element so unmounting removes it.
+ *
+ * Two rules, neither of which can be an inline style:
+ *
+ *  - `::highlight(term-dictionary-active)` is the hovered term's emphasis. The transcript word has
+ *    no element to give a class to — it is painted through the CSS Custom Highlight API — so "this
+ *    link is live" can only be expressed as a highlight. It sits above the annotation's own
+ *    marking by `priority`.
+ *  - `.term-dictionary-hot` is the cursor. `cursor` is NOT one of the properties `::highlight()`
+ *    may set, and the browser shows an I-beam over selectable text, which reads as plain text —
+ *    the opposite of a link. The class goes on the conversation body for exactly as long as the
+ *    pointer is on a term, so the rest of the reply keeps its normal cursor, and `!important` is
+ *    needed because the host's own text rules set a text cursor.
+ *
+ * @returns the style element.
+ */
+function HoverStyle() {
+	return h(
+		"style",
+		{ "data-term-dictionary": "hover-style" },
+		`::highlight(${ACTIVE_HIGHLIGHT}) {` +
+			" background-color: var(--dsw-alias-interactive-bg-hover, rgba(77, 107, 254, 0.16));" +
+			" text-decoration: underline solid var(--dsw-alias-brand-primary, #4d6bfe);" +
+			" text-decoration-thickness: 2px;" +
+			" text-underline-offset: 2px;" +
+			" }" +
+			`.${HOT_CLASS}, .${HOT_CLASS} * { cursor: pointer !important; }`
+	);
+}
+
+module.exports = { HoverCard, HoverStyle, STYLES };