@axiapps/forge-render 0.1.0

package/src/hover-preview.js

@@ -0,0 +1,87 @@
+// Standalone hover preview: a fixed-position card that follows the cursor.
+// Framework-free; the host owns the container element and what HTML to show.
+import { escapeHtml } from "./escape.js";
+
+export function positionHoverPreview(node, x, y) {
+  if (!node || node.classList.contains("hidden")) return;
+  const pad = 8;
+  const offset = 16;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const rect = node.getBoundingClientRect();
+  let left = Number(x) + offset;
+  let top = Number(y) + offset;
+  if (left + rect.width > vw - pad) left = Number(x) - rect.width - offset;
+  if (top + rect.height > vh - pad) top = Number(y) - rect.height - offset;
+  left = Math.max(pad, Math.min(left, vw - rect.width - pad));
+  top = Math.max(pad, Math.min(top, vh - rect.height - pad));
+  node.style.left = `${left}px`;
+  node.style.top = `${top}px`;
+}
+
+/** Minimal entity card for catalog records ({ name, icon, description, facts? }). */
+export function renderEntityHoverHtml(entity, meta = "") {
+  if (!entity) return "";
+  const icon = entity.icon
+    ? `<img class="hover-preview__icon" src="${escapeHtml(entity.icon)}" alt="" loading="lazy">`
+    : "";
+  const facts = (entity.facts || [])
+    .filter((f) => f && f.text)
+    .slice(0, 8)
+    .map((f) => `<li>${escapeHtml(f.text)}${f.value !== undefined ? `: ${escapeHtml(String(f.value))}` : ""}</li>`)
+    .join("");
+  return `
+    <div class="hover-preview__head">
+      ${icon}
+      <div>
+        <p class="hover-preview__title">${escapeHtml(entity.name || "")}</p>
+        ${meta ? `<p class="hover-preview__meta">${escapeHtml(meta)}</p>` : ""}
+      </div>
+    </div>
+    ${entity.description ? `<p class="hover-preview__desc">${escapeHtml(entity.description)}</p>` : ""}
+    ${facts ? `<ul class="hover-preview__bonuses">${facts}</ul>` : ""}`;
+}
+
+/**
+ * Creates a hover-preview controller bound to a host element. The card node
+ * is appended to `host` (give the host class="forge-render" so the scoped
+ * CSS applies). Returns { bind, hide, destroy }.
+ */
+export function createHoverPreview(host) {
+  const node = document.createElement("div");
+  node.className = "hover-preview hidden";
+  host.appendChild(node);
+  const unbinders = [];
+
+  const show = (html, x, y) => {
+    node.innerHTML = html;
+    node.classList.remove("hidden");
+    positionHoverPreview(node, x, y);
+  };
+  const hide = () => node.classList.add("hidden");
+
+  const bind = (target, htmlProvider) => {
+    const read = () => (typeof htmlProvider === "function" ? htmlProvider() : htmlProvider || "");
+    const onEnter = (event) => {
+      const html = read();
+      if (html) show(html, event.clientX, event.clientY);
+    };
+    const onMove = (event) => positionHoverPreview(node, event.clientX, event.clientY);
+    const onLeave = () => hide();
+    target.addEventListener("mouseenter", onEnter);
+    target.addEventListener("mousemove", onMove);
+    target.addEventListener("mouseleave", onLeave);
+    unbinders.push(() => {
+      target.removeEventListener("mouseenter", onEnter);
+      target.removeEventListener("mousemove", onMove);
+      target.removeEventListener("mouseleave", onLeave);
+    });
+  };
+
+  const destroy = () => {
+    for (const un of unbinders) un();
+    node.remove();
+  };
+
+  return { bind, hide, destroy };
+}

package/src/index.js

@@ -0,0 +1,12 @@
+export { renderMiniBuildCard, renderMissingMiniBuildCard } from "./mini-build-card.js";
+export { renderCompCard } from "./comp-card.js";
+export { createHoverPreview, positionHoverPreview, renderEntityHoverHtml } from "./hover-preview.js";
+export { estimateRole, roleBadgeHtml } from "./role-estimator.js";
+export {
+  getEliteSpecName, getSpecIcon, getSpecIconColored,
+  profClass, getDisplayName, resolveStatPackage, getRuneName,
+} from "./build-helpers.js";
+export { getProfessionSvg, getProfessionSvgColored } from "./profession-icons.js";
+export { getWeaponSvg } from "./weapon-icons.js";
+export { GW2_WEAPONS, GW2_WEAPONS_BY_ID } from "./weapons.js";
+export { escapeHtml } from "./escape.js";

package/src/mini-build-card.js

@@ -0,0 +1,304 @@
+// Mini Build Card — reusable compact build summary card.
+
+import { escapeHtml } from "./escape.js";
+import { GW2_WEAPONS_BY_ID } from "./weapons.js";
+import { getProfessionSvg, getProfessionSvgColored } from "./profession-icons.js";
+import { getWeaponSvg } from "./weapon-icons.js";
+
+import {
+  getSpecIcon,
+  getSpecIconColored,
+  profClass,
+  getDisplayName,
+  resolveStatPackage,
+  getRuneName,
+} from "./build-helpers.js";
+import { roleBadgeHtml } from "./role-estimator.js";
+
+/**
+ * Return array of { name, isElite, svg } for each specialization on the build.
+ * Elite specs get their own SVG icon; core specs get the profession icon as fallback.
+ */
+function getSpecLineInfo(build, color) {
+  if (!build.specializations) return [];
+  const getSvg = (name) => color && color !== "normal"
+    ? (getProfessionSvgColored(name, color) || "")
+    : (getProfessionSvg(name) || "");
+  const profSvg = getSvg(build.profession);
+  return build.specializations
+    .filter((s) => s && s.name)
+    .map((s) => ({
+      name: s.name,
+      isElite: !!s.elite,
+      svg: getSvg(s.name) || profSvg,
+    }));
+}
+
+/**
+ * Resolve the relic icon URL from the live wiki-synced catalog.
+ */
+function getRelicIcon(relicName, upgradeCatalog) {
+  if (!relicName) return null;
+  return upgradeCatalog?.relicByName?.get(relicName)?.icon || null;
+}
+
+/**
+ * Resolve the rune icon URL from upgradeCatalog, or null.
+ */
+function getRuneIcon(build, upgradeCatalog) {
+  const runes = build.equipment?.runes;
+  if (!runes || typeof runes !== "object" || !upgradeCatalog) return null;
+  const counts = {};
+  for (const v of Object.values(runes)) {
+    if (v) counts[String(v)] = (counts[String(v)] || 0) + 1;
+  }
+  let bestId = "";
+  let bestCount = 0;
+  for (const [id, count] of Object.entries(counts)) {
+    if (count > bestCount) { bestId = id; bestCount = count; }
+  }
+  if (!bestId) return null;
+  const runeDef = upgradeCatalog.runeById?.get(Number(bestId));
+  return runeDef?.icon || null;
+}
+
+/**
+ * Return array of weapon set objects: [{ weapons: [{ id, label }], display }].
+ * Each set has the individual weapons (for icons) and a display string.
+ */
+function getWeaponSets(build) {
+  const weaps = build.equipment?.weapons;
+  if (!weaps) return [];
+
+  const resolve = (id) => {
+    if (!id) return null;
+    const w = GW2_WEAPONS_BY_ID.get(id);
+    return w ? { id, label: w.label } : { id, label: id };
+  };
+
+  const sets = [];
+
+  // Set 1
+  const mh1 = resolve(weaps.mainhand1);
+  const oh1 = resolve(weaps.offhand1);
+  if (mh1 || oh1) {
+    const weapons = [mh1, oh1].filter(Boolean);
+    sets.push({ weapons, display: weapons.map((w) => w.label).join(" / ") });
+  }
+
+  // Set 2
+  const mh2 = resolve(weaps.mainhand2);
+  const oh2 = resolve(weaps.offhand2);
+  if (mh2 || oh2) {
+    const weapons = [mh2, oh2].filter(Boolean);
+    sets.push({ weapons, display: weapons.map((w) => w.label).join(" / ") });
+  }
+
+  return sets;
+}
+
+/**
+ * Render a mini build card as an HTML string.
+ *
+ * @param {Object} build - Build object from state
+ * @param {Object} upgradeCatalog - state.upgradeCatalog (for rune name resolution)
+ * @param {Object} [options]
+ * @param {boolean} [options.showActions=true] - Show open/remove buttons
+ * @param {boolean} [options.showMode=true] - Show game mode pill
+ * @returns {string} HTML string
+ */
+export function renderMiniBuildCard(build, upgradeCatalog, options = {}) {
+  const { showActions = true, showMode = true, linkUrl = null, chatLink = null, linkBadge = null, slotColor = null, showColorPicker = false } = options;
+
+  const icon = slotColor && slotColor !== "normal" ? getSpecIconColored(build, slotColor) : getSpecIcon(build);
+  const pClass = profClass(build.profession);
+  const name = escapeHtml(getDisplayName(build));
+  const gameMode = build.gameMode || "pve";
+
+  // Tag pills
+  const tagPills = (build.tags || [])
+    .map((t) => `<span class="mini-card__tag">${escapeHtml(t)}</span>`)
+    .join("");
+
+  // Role badge
+  const role = roleBadgeHtml(build, upgradeCatalog);
+
+  // Mode pill
+  const modePill = showMode
+    ? `<span class="mini-card__mode">${escapeHtml(gameMode)}</span>`
+    : "";
+
+  // Left column: Specs as mini cards
+  const specs = getSpecLineInfo(build, slotColor);
+  let specColHtml = "";
+  if (specs.length) {
+    const specLines = specs.map((s) => {
+      const pipClass = s.isElite ? "mini-card__spec-pip mini-card__spec-pip--elite" : "mini-card__spec-pip";
+      const nameClass = s.isElite ? "mini-card__spec-name mini-card__spec-name--elite" : "mini-card__spec-name";
+      const pipContent = s.svg || escapeHtml(s.name.charAt(0).toUpperCase());
+      return `<div class="mini-card__spec-line"><span class="${pipClass}">${pipContent}</span><span class="${nameClass}">${escapeHtml(s.name)}</span></div>`;
+    }).join("");
+
+    specColHtml = `
+      <div class="mini-card__col-left">
+        <span class="mini-card__detail-label">Specs</span>
+        <div class="mini-card__spec-list">${specLines}</div>
+      </div>`;
+  }
+
+  // Right column: Weapons, Gear, Relic (stacked)
+  const weaponSets = getWeaponSets(build);
+  let weapRowHtml = "";
+  if (weaponSets.length) {
+    const weapHtml = weaponSets.map((set) => {
+      return set.weapons.map((w) => {
+        const svg = getWeaponSvg(w.id);
+        const icon = svg ? `<span class="mini-card__weap-icon">${svg}</span>` : "";
+        return `${icon}<span class="mini-card__weap-name">${escapeHtml(w.label)}</span>`;
+      }).join(`<span class="mini-card__weap-sep">/</span>`);
+    }).join(`<span class="mini-card__weap-div">|</span>`);
+
+    weapRowHtml = `
+      <div class="mini-card__cell">
+        <span class="mini-card__detail-label">Weap</span>
+        <div class="mini-card__weap-group">${weapHtml}</div>
+      </div>`;
+  }
+
+  const statPackage = resolveStatPackage(build);
+  let statRowHtml = "";
+  if (statPackage) {
+    statRowHtml = `
+      <div class="mini-card__cell">
+        <span class="mini-card__detail-label">Stats</span>
+        <span class="mini-card__gear-icon mini-card__gear-icon--stat">◆</span>
+        <span class="mini-card__stat">${escapeHtml(statPackage)}</span>
+      </div>`;
+  }
+
+  const runeName = getRuneName(build, upgradeCatalog);
+  const runeIconUrl = getRuneIcon(build, upgradeCatalog);
+  let runeRowHtml = "";
+  if (runeName) {
+    const runeIcon = runeIconUrl
+      ? `<img class="mini-card__gear-img" src="${escapeHtml(runeIconUrl)}" alt="" loading="lazy">`
+      : `<span class="mini-card__gear-icon mini-card__gear-icon--rune">ᚱ</span>`;
+    runeRowHtml = `
+      <div class="mini-card__cell">
+        <span class="mini-card__detail-label">Rune</span>
+        ${runeIcon}
+        <span class="mini-card__equip">${escapeHtml(runeName)}</span>
+      </div>`;
+  }
+
+  const relicName = build.equipment?.relic || "";
+  const relicIconUrl = getRelicIcon(relicName, upgradeCatalog);
+  let relicRowHtml = "";
+  if (relicName) {
+    const relicIcon = relicIconUrl
+      ? `<img class="mini-card__gear-img" src="${escapeHtml(relicIconUrl)}" alt="" loading="lazy">`
+      : `<span class="mini-card__gear-icon mini-card__gear-icon--relic">⬡</span>`;
+    relicRowHtml = `
+      <div class="mini-card__cell">
+        <span class="mini-card__detail-label">Relic</span>
+        ${relicIcon}
+        <span class="mini-card__relic">${escapeHtml(relicName)}</span>
+      </div>`;
+  }
+
+  const rightColHtml = (weapRowHtml || statRowHtml || runeRowHtml || relicRowHtml)
+    ? `<div class="mini-card__col-right">${weapRowHtml}${statRowHtml}${runeRowHtml}${relicRowHtml}</div>`
+    : "";
+
+  // Title is a clickable link to open the build
+  const titleHtml = showActions
+    ? `<button type="button" class="mini-card__name" data-action="pool-open"
+              data-build-id="${escapeHtml(build.id)}" title="Open build">${name} <span class="mini-card__name-arrow">&#8599;</span></button>`
+    : linkUrl
+      ? `<a href="${escapeHtml(linkUrl)}" target="_blank" rel="noopener" class="mini-card__name" title="Open build">${name} <span class="mini-card__name-arrow">&#8599;</span></a>`
+      : `<span class="mini-card__name">${name}</span>`;
+
+  // Link badge — shows this build is a reference, not owned by the comp
+  const linkBadgeHtml = linkBadge
+    ? `<span class="mini-card__link-badge" title="${escapeHtml(linkBadge.tooltip)}">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+        ${escapeHtml(linkBadge.label)}
+      </span>`
+    : "";
+
+  // Remove button — absolute top-right
+  const removeHtml = showActions
+    ? `<button type="button" class="mini-card__btn-remove" data-action="pool-remove"
+              data-build-id="${escapeHtml(build.id)}" title="Unlink from comp">&times;</button>`
+    : "";
+
+  // Copy build code button (SPA comp view)
+  const copyCodeHtml = chatLink
+    ? `<button type="button" class="mini-card__btn-copy-code" data-chat-link="${escapeHtml(chatLink)}" title="Copy build code">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+        <span>Code</span>
+      </button>`
+    : "";
+
+  // Color picker dropdown (Condi / Heal)
+  const colorPickerHtml = showColorPicker ? (() => {
+    const c = slotColor || "normal";
+    const dotColor = c === "red" ? "#d63a3a" : c === "blue" ? "#3a8fd6" : "transparent";
+    const dotStyle = c === "normal"
+      ? 'style="border:1px solid #666;background:transparent"'
+      : `style="background:${dotColor}"`;
+    return `<div class="mini-card__color-picker" data-action="color-picker" data-build-id="${escapeHtml(build.id)}" data-current="${c}" title="Icon color">
+      <span class="mini-card__color-dot" ${dotStyle}></span>
+      <span class="mini-card__color-label">${c === "red" ? "Condi" : c === "blue" ? "Heal" : "Default"}</span>
+      <span class="mini-card__color-caret">&#9662;</span>
+    </div>`;
+  })() : "";
+
+  return `
+    <div class="mini-card ${pClass}" data-build-id="${escapeHtml(build.id)}"${slotColor && slotColor !== "normal" ? ` data-slot-color="${slotColor}"` : ""}>
+      ${removeHtml}
+      <div class="mini-card__icon">${icon}</div>
+      <div class="mini-card__info">
+        <div class="mini-card__header">
+          ${titleHtml}
+          ${linkBadgeHtml}
+          ${tagPills}
+          ${role}
+          <div class="mini-card__pills">
+            ${colorPickerHtml}
+            ${copyCodeHtml}
+            ${modePill}
+          </div>
+        </div>
+        <div class="mini-card__columns">
+          ${specColHtml}
+          ${rightColHtml}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * Render a placeholder card for a build that no longer exists in the library.
+ */
+export function renderMissingMiniBuildCard(buildId) {
+  const truncId = buildId.length > 12 ? buildId.slice(0, 12) + "\u2026" : buildId;
+  return `
+    <div class="mini-card mini-card--missing" data-build-id="${escapeHtml(buildId)}">
+      <div class="mini-card__icon mini-card__icon--missing">?</div>
+      <div class="mini-card__info">
+        <div class="mini-card__header">
+          <span class="mini-card__name mini-card__name--missing">Missing Build</span>
+        </div>
+        <div class="mini-card__detail-row">
+          <span class="mini-card__equip">${escapeHtml(truncId)}</span>
+        </div>
+      </div>
+      <div class="mini-card__actions">
+        <button type="button" class="mini-card__btn-remove" data-action="pool-remove"
+                data-build-id="${escapeHtml(buildId)}" title="Remove from comp">&times;</button>
+      </div>
+    </div>
+  `;
+}

package/src/profession-icons.js

@@ -0,0 +1,91 @@
+// Profession and elite-spec class icons from gw2-class-icons package.
+// Imported as raw SVG strings via Vite's ?raw suffix.
+// The package's index.js is Node-only (uses fs.readdirSync) — we bypass it entirely.
+import Amalgam      from "gw2-class-icons/wiki/svg/Amalgam.svg?raw";
+import Antiquary    from "gw2-class-icons/wiki/svg/Antiquary.svg?raw";
+import Berserker    from "gw2-class-icons/wiki/svg/Berserker.svg?raw";
+import Bladesworn   from "gw2-class-icons/wiki/svg/Bladesworn.svg?raw";
+import Catalyst     from "gw2-class-icons/wiki/svg/Catalyst.svg?raw";
+import Chronomancer from "gw2-class-icons/wiki/svg/Chronomancer.svg?raw";
+import Conduit      from "gw2-class-icons/wiki/svg/Conduit.svg?raw";
+import Daredevil    from "gw2-class-icons/wiki/svg/Daredevil.svg?raw";
+import Deadeye      from "gw2-class-icons/wiki/svg/Deadeye.svg?raw";
+import Dragonhunter from "gw2-class-icons/wiki/svg/Dragonhunter.svg?raw";
+import Druid        from "gw2-class-icons/wiki/svg/Druid.svg?raw";
+import Elementalist from "gw2-class-icons/wiki/svg/Elementalist.svg?raw";
+import Engineer     from "gw2-class-icons/wiki/svg/Engineer.svg?raw";
+import Evoker       from "gw2-class-icons/wiki/svg/Evoker.svg?raw";
+import Firebrand    from "gw2-class-icons/wiki/svg/Firebrand.svg?raw";
+import Galeshot     from "gw2-class-icons/wiki/svg/Galeshot.svg?raw";
+import Guardian     from "gw2-class-icons/wiki/svg/Guardian.svg?raw";
+import Harbinger    from "gw2-class-icons/wiki/svg/Harbinger.svg?raw";
+import Herald       from "gw2-class-icons/wiki/svg/Herald.svg?raw";
+import Holosmith    from "gw2-class-icons/wiki/svg/Holosmith.svg?raw";
+import Luminary     from "gw2-class-icons/wiki/svg/Luminary.svg?raw";
+import Mechanist    from "gw2-class-icons/wiki/svg/Mechanist.svg?raw";
+import Mesmer       from "gw2-class-icons/wiki/svg/Mesmer.svg?raw";
+import Mirage       from "gw2-class-icons/wiki/svg/Mirage.svg?raw";
+import Necromancer  from "gw2-class-icons/wiki/svg/Necromancer.svg?raw";
+import Paragon      from "gw2-class-icons/wiki/svg/Paragon.svg?raw";
+import Ranger       from "gw2-class-icons/wiki/svg/Ranger.svg?raw";
+import Reaper       from "gw2-class-icons/wiki/svg/Reaper.svg?raw";
+import Renegade     from "gw2-class-icons/wiki/svg/Renegade.svg?raw";
+import Revenant     from "gw2-class-icons/wiki/svg/Revenant.svg?raw";
+import Ritualist    from "gw2-class-icons/wiki/svg/Ritualist.svg?raw";
+import Scourge      from "gw2-class-icons/wiki/svg/Scourge.svg?raw";
+import Scrapper     from "gw2-class-icons/wiki/svg/Scrapper.svg?raw";
+import Soulbeast    from "gw2-class-icons/wiki/svg/Soulbeast.svg?raw";
+import Specter      from "gw2-class-icons/wiki/svg/Specter.svg?raw";
+import Spellbreaker from "gw2-class-icons/wiki/svg/Spellbreaker.svg?raw";
+import Tempest      from "gw2-class-icons/wiki/svg/Tempest.svg?raw";
+import Thief        from "gw2-class-icons/wiki/svg/Thief.svg?raw";
+import Troubadour   from "gw2-class-icons/wiki/svg/Troubadour.svg?raw";
+import Untamed      from "gw2-class-icons/wiki/svg/Untamed.svg?raw";
+import Vindicator   from "gw2-class-icons/wiki/svg/Vindicator.svg?raw";
+import Virtuoso     from "gw2-class-icons/wiki/svg/Virtuoso.svg?raw";
+import Warrior      from "gw2-class-icons/wiki/svg/Warrior.svg?raw";
+import Weaver       from "gw2-class-icons/wiki/svg/Weaver.svg?raw";
+import Willbender   from "gw2-class-icons/wiki/svg/Willbender.svg?raw";
+
+const SVG_MAP = {
+  Amalgam, Antiquary, Berserker, Bladesworn, Catalyst, Chronomancer, Conduit,
+  Daredevil, Deadeye, Dragonhunter, Druid, Elementalist, Engineer, Evoker,
+  Firebrand, Galeshot, Guardian, Harbinger, Herald, Holosmith, Luminary,
+  Mechanist, Mesmer, Mirage, Necromancer, Paragon, Ranger, Reaper, Renegade,
+  Revenant, Ritualist, Scourge, Scrapper, Soulbeast, Specter, Spellbreaker,
+  Tempest, Thief, Troubadour, Untamed, Vindicator, Virtuoso, Warrior, Weaver,
+  Willbender,
+};
+
+/**
+ * Returns the raw SVG string for a profession or elite spec name, or null if unknown.
+ * @param {string} name — e.g. "Guardian", "Dragonhunter", "Elementalist"
+ */
+export function getProfessionSvg(name) {
+  return SVG_MAP[name] ?? null;
+}
+
+const LINE_COLORS = {
+  red:  "#d63a3a",
+  blue: "#3a8fd6",
+};
+
+const _colorCache = new Map();
+
+/**
+ * Returns the raw SVG with non-black fills replaced by the given line color.
+ * "normal" (or falsy) returns the original SVG unchanged.
+ */
+export function getProfessionSvgColored(name, color) {
+  const svg = SVG_MAP[name] ?? null;
+  if (!svg || !color || color === "normal") return svg;
+  const hex = LINE_COLORS[color];
+  if (!hex) return svg;
+  const key = `${name}_${color}`;
+  let cached = _colorCache.get(key);
+  if (!cached) {
+    cached = svg.replace(/fill:#(?!000000)[0-9a-fA-F]{6}/gi, `fill:${hex}`);
+    _colorCache.set(key, cached);
+  }
+  return cached;
+}

package/src/role-estimator.js

@@ -0,0 +1,158 @@
+// Role estimation from equipment stats — pure functions, no app state.
+// Slot stat math comes from the shared engine; we feed it the build's own
+// weapon set and game mode (the desktop app previously read editor state,
+// which is wrong for library/chat cards anyway).
+import * as _engine from "@axiapps/gw2-data/engine";
+const engine = _engine.default || _engine;
+const { computeSlotStats } = engine;
+
+// 700 (not the spec's 1500): tuned down so Celestial gear (~810 max) and partial builds
+// still get a role rather than Unknown. Rune bonuses further lift scores for full builds.
+const MIN_THRESHOLD = 700;
+const HYBRID_RATIO  = 0.10;
+
+// Tank is intentionally excluded — not a meaningful role category in GW2.
+const ROLE_SCORERS = [
+  { role: 'Power DPS',    fn: s => s.Power * 1.0 + s.Precision * 0.5 + s.Ferocity * 0.5 },
+  { role: 'Condi DPS',    fn: s => s.ConditionDamage * 1.0 + s.Expertise * 0.8 },
+  { role: 'Boon Support', fn: s => s.Concentration * 1.5 + s.HealingPower * 0.3 },
+  { role: 'Heal Support', fn: s => s.HealingPower * 1.5 + s.Concentration * 0.3 },
+];
+
+const ROLE_CSS_CLASS = {
+  'Power DPS':    'power-dps',
+  'Condi DPS':    'condi-dps',
+  'Boon Support': 'boon-support',
+  'Heal Support': 'heal-support',
+  'Hybrid':       'hybrid',
+  'Unknown':      'unknown',
+};
+
+const RUNE_STAT_RE = /\+(\d+)\s+(Condition Damage|Healing Power|Healing|Power|Precision|Toughness|Vitality|Ferocity|Concentration|Expertise|to All Stats)/;
+const RUNE_BOON_RE = /\+(\d+)%\s+Boon Duration/i;
+const RUNE_CONDI_RE = /\+(\d+)%\s+Condition Duration/i;
+
+const RUNE_STAT_MAP = {
+  'Condition Damage': 'ConditionDamage',
+  'Healing Power':    'HealingPower',
+  'Healing':          'HealingPower',
+  'Power':            'Power',
+  'Precision':        'Precision',
+  'Toughness':        'Toughness',
+  'Vitality':         'Vitality',
+  'Ferocity':         'Ferocity',
+  'Concentration':    'Concentration',
+  'Expertise':        'Expertise',
+};
+
+// Returns a stat totals object from the equipped rune set, or null if no runes.
+// catalog = state.upgradeCatalog passed in from the caller.
+function scoreRuneStats(build, catalog) {
+  const runeSlots = build?.equipment?.runes;
+  if (!runeSlots || !catalog?.runeById) return null;
+
+  // Count equipped rune IDs (ignore breather slot, only armor slots contribute)
+  const counts = {};
+  for (const [slot, id] of Object.entries(runeSlots)) {
+    if (!id || slot === 'breather') continue;
+    const key = Number(id);
+    counts[key] = (counts[key] || 0) + 1;
+  }
+
+  // Find dominant rune
+  let bestId = null, bestCount = 0;
+  for (const [id, count] of Object.entries(counts)) {
+    if (count > bestCount) { bestId = Number(id); bestCount = count; }
+  }
+  if (!bestId) return null;
+
+  const runeDef = catalog.runeById.get(bestId);
+  if (!runeDef?.bonuses?.length) return null;
+
+  const totals = {
+    Power: 0, Precision: 0, Toughness: 0, Vitality: 0,
+    Ferocity: 0, ConditionDamage: 0, Expertise: 0, Concentration: 0, HealingPower: 0,
+  };
+  const activeBonuses = runeDef.bonuses.slice(0, Math.min(bestCount, 6));
+
+  for (const bonus of activeBonuses) {
+    const statMatch = RUNE_STAT_RE.exec(bonus);
+    if (statMatch) {
+      const value = parseInt(statMatch[1], 10);
+      const rawName = statMatch[2];
+      if (rawName === 'to All Stats') {
+        for (const k of Object.keys(totals)) totals[k] += value;
+      } else {
+        const statKey = RUNE_STAT_MAP[rawName];
+        if (statKey) totals[statKey] += value;
+      }
+      continue;
+    }
+    const boonMatch = RUNE_BOON_RE.exec(bonus);
+    if (boonMatch) { totals.Concentration += parseInt(boonMatch[1], 10) * 15; continue; }
+    const condiMatch = RUNE_CONDI_RE.exec(bonus);
+    if (condiMatch) { totals.Expertise += parseInt(condiMatch[1], 10) * 15; }
+  }
+
+  return totals;
+}
+
+// Note: computeSlotStats returns only the equipment contribution for a slot,
+// not GW2 base stats (Power/Precision/Toughness/Vitality base = 1000 each).
+// Base stats are added separately in computeEquipmentStats() and are NOT
+// present here, so no subtraction is needed before scoring.
+// The returned totals serve as the base for rune stat scoring when a catalog is provided.
+function scoreEquipmentSlots(build) {
+  const slots = build?.equipment?.slots || {};
+  const weapons = build?.equipment?.weapons || {};
+  const gameMode = build?.gameMode || "pve";
+  const totals = {
+    Power: 0, Precision: 0, Toughness: 0, Vitality: 0,
+    Ferocity: 0, ConditionDamage: 0, Expertise: 0, Concentration: 0, HealingPower: 0,
+  };
+  for (const [slotKey, label] of Object.entries(slots)) {
+    if (!label) continue;
+    for (const { stat, value } of computeSlotStats(label, slotKey, weapons, gameMode)) {
+      if (stat in totals) totals[stat] += value;
+    }
+  }
+  return totals;
+}
+
+/**
+ * Returns the estimated role for a build, or null if no slots are equipped.
+ * Pure function — reads only from the build object, no global state.
+ */
+export function estimateRole(build, catalog = null) {
+  const slots = build?.equipment?.slots;
+  if (!slots || !Object.values(slots).some(Boolean)) return null;
+
+  const equipStats = scoreEquipmentSlots(build);
+  const runeStats  = catalog ? scoreRuneStats(build, catalog) : null;
+  const s = runeStats
+    ? Object.fromEntries(Object.keys(equipStats).map(k => [k, equipStats[k] + (runeStats[k] || 0)]))
+    : equipStats;
+  const scored = ROLE_SCORERS.map(({ role, fn }) => ({ role, score: fn(s) }));
+  scored.sort((a, b) => b.score - a.score);
+
+  const [first, second] = scored;
+  if (first.score < MIN_THRESHOLD) return 'Unknown';
+  if (
+    second &&
+    second.score >= MIN_THRESHOLD &&
+    (first.score - second.score) / first.score < HYBRID_RATIO
+  ) {
+    return 'Hybrid';
+  }
+  return first.role;
+}
+
+/**
+ * Returns an HTML string for the role badge, or '' if the build has no equipment.
+ */
+export function roleBadgeHtml(build, catalog = null) {
+  const role = estimateRole(build, catalog);
+  if (!role) return '';
+  const cls = ROLE_CSS_CLASS[role] ?? 'unknown';
+  return `<span class="role-badge role-badge--${cls}">${role}</span>`;
+}