@crockery/fellowship-components 0.4.1 → 1.0.0

package/dist/chunks/gear-planner-Bgt77Ovf.js

@@ -0,0 +1,1696 @@
+import { t as e } from "./decorate-DyMgX_Uh.js";
+import { a as t, i as n, n as r } from "./tooltip-C3SSJw-t.js";
+import { LitElement as i, css as a, html as o, nothing as s } from "lit";
+import { customElement as c, property as l, query as u, state as d } from "lit/decorators.js";
+import { repeat as f } from "lit/directives/repeat.js";
+import { findImage as p } from "@crockery/fellowship-data";
+import { calculateGearPlannerBuild as m, getValidGearConfiguration as h, getValidGearItems as g, normalizeGearPlannerBuild as _, validateGearPlannerBuild as v } from "@crockery/fellowship-data/gear-planner";
+//#region src/gear-planner/gear-position.ts
+r();
+var y = class extends i {
+	constructor(...e) {
+		super(...e), this.position = null, this.item = null, this.itemBuild = null, this.selected = !1, this.imageUrl = null, this.tooltipDetails = [], this.#e = (e) => {
+			this.dispatchEvent(new CustomEvent("fellowship-gear-position-select", {
+				bubbles: !0,
+				composed: !0,
+				detail: {
+					positionId: this.position?.id,
+					trigger: e.currentTarget
+				}
+			}));
+		}, this.#t = (e) => {
+			e.currentTarget.hidden = !0;
+		};
+	}
+	static {
+		this.styles = a`
+    * {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: block;
+      min-width: 0;
+    }
+
+    fellowship-tooltip {
+      display: block;
+    }
+
+    button {
+      position: relative;
+      display: grid;
+      grid-template-columns: 52px minmax(0, 1fr);
+      align-items: center;
+      width: 100%;
+      min-height: 68px;
+      padding: 6px;
+      border: 2px solid var(--_fellowship-poster-plum);
+      border-radius: var(--_fellowship-poster-radius);
+      background: var(--_fellowship-poster-cream);
+      color: var(--_fellowship-poster-plum);
+      font: 500 12px/1.3 var(--_fellowship-poster-mono);
+      text-align: left;
+      cursor: pointer;
+      transition:
+        transform var(--_fellowship-poster-motion) var(--_fellowship-poster-ease),
+        background var(--_fellowship-poster-motion) var(--_fellowship-poster-ease);
+    }
+
+    button:hover {
+      background: var(--_fellowship-poster-white);
+      transform: translate(-1px, -1px);
+    }
+
+    button[aria-pressed="true"] {
+      background: var(--_fellowship-poster-yellow);
+      box-shadow: 3px 3px 0 var(--_fellowship-poster-violet);
+    }
+
+    button:focus-visible {
+      outline: 4px solid var(--_fellowship-poster-focus);
+      outline-offset: 2px;
+    }
+
+    .image,
+    img {
+      width: 44px;
+      height: 44px;
+    }
+
+    .image {
+      display: grid;
+      place-items: center;
+      overflow: hidden;
+      border: 2px solid currentColor;
+      background: var(--_fellowship-poster-plum);
+      color: var(--_fellowship-poster-cream);
+      font: 800 14px/1 var(--_fellowship-poster-display);
+    }
+
+    img {
+      display: block;
+      object-fit: cover;
+    }
+
+    .copy {
+      min-width: 0;
+      padding-inline: 4px;
+    }
+
+    .slot {
+      display: block;
+      margin-bottom: 3px;
+      font-size: 10px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .name {
+      display: block;
+      overflow-wrap: anywhere;
+      font-family: var(--_fellowship-poster-display);
+      font-size: 13px;
+      font-weight: 800;
+      line-height: 1.1;
+    }
+
+    .meta {
+      display: block;
+      margin-top: 4px;
+      font-size: 10px;
+    }
+
+    .tooltip-content {
+      display: grid;
+      gap: 6px;
+      max-width: 310px;
+      color: var(--fellowship-tooltip-ink);
+      font: 400 12px/1.45 var(--_fellowship-poster-mono);
+    }
+
+    .tooltip-content strong {
+      color: var(--_fellowship-poster-yellow);
+      font-family: var(--_fellowship-poster-display);
+      font-size: 15px;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      button {
+        transition: none;
+      }
+    }
+  `;
+	}
+	render() {
+		if (!this.position) return o``;
+		let e = this.item?.item.name ?? this.item?.item.id ?? "Choose item", t = this.itemBuild ? `${e}. Level ${this.itemBuild.itemLevel}, ${this.itemBuild.rarity}.` : `${this.position.label}. Empty.`, n = o`
+      <button
+        type="button"
+        aria-pressed=${String(this.selected)}
+        aria-label=${`${this.position.label}: ${t}`}
+        @click=${this.#e}
+      >
+        <span class="image">
+          ${this.imageUrl ? o`<img src=${this.imageUrl} alt="" @error=${this.#t} />` : this.position.label.slice(0, 2)}
+        </span>
+        <span class="copy">
+          <span class="slot">${this.position.label}</span>
+          <span class="name">${e}</span>
+          ${this.itemBuild ? o`<span class="meta">LV ${this.itemBuild.itemLevel} · ${this.itemBuild.rarity}</span>` : s}
+        </span>
+      </button>
+    `;
+		return !this.item || !this.itemBuild ? n : o`
+      <fellowship-tooltip .text=${t} placement="auto">
+        ${n}
+        <span slot="content" class="tooltip-content">
+          <strong>${e}</strong>
+          <span>Level ${this.itemBuild.itemLevel} · ${this.itemBuild.rarity}</span>
+          <span>
+            ${this.itemBuild.rolledModifiers.length} rolls · ${this.itemBuild.gems.length} gems ·
+            ${this.itemBuild.traits.length} traits · ${this.itemBuild.blessings.length} blessings
+          </span>
+          ${this.tooltipDetails.map((e) => o`<span>${e}</span>`)}
+          ${this.item.item.description ? o`<span>${this.item.item.description}</span>` : s}
+        </span>
+      </fellowship-tooltip>
+    `;
+	}
+	#e;
+	#t;
+};
+e([l({ attribute: !1 })], y.prototype, "position", void 0), e([l({ attribute: !1 })], y.prototype, "item", void 0), e([l({ attribute: !1 })], y.prototype, "itemBuild", void 0), e([l({
+	type: Boolean,
+	reflect: !0
+})], y.prototype, "selected", void 0), e([l({ type: String })], y.prototype, "imageUrl", void 0), e([l({ attribute: !1 })], y.prototype, "tooltipDetails", void 0), y = e([c("fellowship-gear-position")], y);
+var b = () => {
+	customElements.get("fellowship-gear-position") || customElements.define("fellowship-gear-position", y);
+}, x = a`
+  :host {
+    display: block;
+    min-width: 0;
+    color: var(--_fellowship-poster-plum);
+    font: 400 12px/1.5 var(--_fellowship-poster-mono);
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .workbench-header {
+    display: flex;
+    align-items: end;
+    justify-content: space-between;
+    gap: 16px;
+    padding-bottom: 12px;
+    border-bottom: 3px solid var(--_fellowship-poster-plum);
+  }
+
+  .eyebrow,
+  label > span {
+    display: block;
+    margin-bottom: 4px;
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.09em;
+    text-transform: uppercase;
+  }
+
+  h2 {
+    margin: 0;
+    font-family: var(--_fellowship-poster-display);
+    font-size: clamp(24px, 3cqi, 38px);
+    font-weight: 800;
+    line-height: 0.94;
+    text-transform: uppercase;
+  }
+
+  .current-rarity {
+    padding: 4px 8px;
+    background: var(--_fellowship-poster-violet);
+    color: var(--_fellowship-poster-cream);
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+
+  .search {
+    display: block;
+    margin-block: 16px 8px;
+  }
+
+  input,
+  select {
+    width: 100%;
+    min-height: 44px;
+    border: 2px solid var(--_fellowship-poster-plum);
+    border-radius: var(--_fellowship-poster-radius);
+    background: var(--_fellowship-poster-white);
+    color: var(--_fellowship-poster-plum);
+    font: 500 12px/1.4 var(--_fellowship-poster-mono);
+  }
+
+  input {
+    padding-inline: 12px;
+  }
+
+  select {
+    padding: 8px 32px 8px 10px;
+  }
+
+  input:focus-visible,
+  select:focus-visible,
+  button:focus-visible {
+    outline: 4px solid var(--_fellowship-poster-focus);
+    outline-offset: 2px;
+  }
+
+  .item-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
+    gap: 6px;
+    max-height: 196px;
+    overflow: auto;
+    padding: 4px 4px 8px 0;
+  }
+
+  .item-choice {
+    display: grid;
+    grid-template-columns: 8px 38px minmax(0, 1fr);
+    gap: 3px 8px;
+    align-content: center;
+    min-height: 52px;
+    padding: 8px;
+    border: 2px solid var(--_fellowship-poster-plum);
+    border-radius: 0;
+    background: var(--_fellowship-poster-cream);
+    color: var(--_fellowship-poster-plum);
+    font: 700 12px/1.2 var(--_fellowship-poster-display);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .item-choice:hover,
+  .item-choice[aria-pressed="true"] {
+    background: var(--_fellowship-poster-yellow);
+  }
+
+  .item-choice:disabled {
+    cursor: not-allowed;
+    opacity: 0.48;
+  }
+
+  .choice-mark {
+    grid-row: span 2;
+    width: 8px;
+    height: 100%;
+    background: var(--_fellowship-poster-violet);
+  }
+
+  .choice-image,
+  .choice-image img {
+    width: 36px;
+    height: 36px;
+  }
+
+  .choice-image {
+    grid-row: span 2;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    border: 2px solid currentColor;
+    background: var(--_fellowship-poster-plum);
+    color: var(--_fellowship-poster-cream);
+  }
+
+  .choice-image img {
+    object-fit: cover;
+  }
+
+  .item-choice small {
+    grid-column: 3;
+    font: 400 9px/1.2 var(--_fellowship-poster-mono);
+    text-transform: uppercase;
+  }
+
+  .configuration {
+    display: grid;
+    gap: 12px;
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 3px solid var(--_fellowship-poster-plum);
+  }
+
+  .fixed-details {
+    display: grid;
+    gap: 3px;
+    padding: 10px;
+    border-left: 6px solid var(--_fellowship-poster-violet);
+    background: var(--_fellowship-poster-yellow);
+    overflow-wrap: anywhere;
+  }
+
+  .fixed-details strong {
+    font-family: var(--_fellowship-poster-display);
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+
+  .control-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .configuration-control {
+    display: block;
+  }
+
+  fieldset {
+    min-width: 0;
+    margin: 4px 0 0;
+    padding: 12px;
+    border: 2px solid var(--_fellowship-poster-plum);
+  }
+
+  legend {
+    padding-inline: 6px;
+    font-family: var(--_fellowship-poster-display);
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+
+  .hint {
+    margin: 0 0 8px;
+    font-size: 10px;
+  }
+
+  .trait-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .trait-node {
+    grid-column: var(--column);
+    grid-row: var(--row);
+    min-width: 0;
+    padding: 6px;
+    border-left: 4px solid var(--_fellowship-poster-violet);
+    background: color-mix(
+      in oklch,
+      var(--_fellowship-poster-yellow) 24%,
+      var(--_fellowship-poster-cream)
+    );
+  }
+
+  .trait-node input {
+    margin-top: 6px;
+  }
+
+  .empty,
+  .empty-search {
+    margin: 0;
+    padding: 24px 16px;
+    border: 2px dashed var(--_fellowship-poster-plum);
+    text-align: center;
+  }
+
+  .configure-empty {
+    margin-top: 16px;
+  }
+
+  @media (max-width: 560px) {
+    .control-grid,
+    .trait-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .trait-node {
+      grid-column: 1;
+      grid-row: auto;
+    }
+  }
+`, S = class extends i {
+	constructor(...e) {
+		super(...e), this.data = null, this.build = null, this.positionId = null, this.resolveAssetUrl = null, this._query = "", this.#g = (e) => {
+			this._query = e.currentTarget.value;
+		};
+	}
+	static {
+		this.styles = [n, x];
+	}
+	render() {
+		if (!this.data || !this.build || !this.positionId) return o`<div class="empty">Select a gear position to begin.</div>`;
+		let e = this.data.positions.find(({ id: e }) => e === this.positionId), t = this.build.positions.find(({ positionId: e }) => e === this.positionId);
+		if (!e) return o`<div class="empty">This gear position is unavailable.</div>`;
+		let n = t?.item ?? null, r = n ? this.data.itemById.get(n.itemId) : null, i = n && r ? h(this.data, this.build, this.positionId, n.itemId) : null, a = g(this.data, this.build, this.positionId).filter((e) => {
+			let t = this._query.trim().toLocaleLowerCase();
+			return !t || (e.item.name ?? e.item.id).toLocaleLowerCase().includes(t);
+		});
+		return o`
+      <header class="workbench-header">
+        <div>
+          <span class="eyebrow">Active position</span>
+          <h2>${e.label}</h2>
+        </div>
+        ${r ? o`<span class="current-rarity">${n?.rarity}</span>` : o`<span class="current-rarity">Empty</span>`}
+      </header>
+
+      <label class="search">
+        <span>Search valid ${e.itemType.toLocaleLowerCase()} items</span>
+        <input
+          type="search"
+          .value=${this._query}
+          placeholder="Type an item name"
+          @input=${this.#g}
+        />
+      </label>
+      <div class="item-list" aria-label=${`Valid items for ${e.label}`}>
+        ${a.length === 0 ? o`<p class="empty-search">No valid items match this search.</p>` : f(a, (e) => e.item.id, (e) => o`
+                <button
+                  type="button"
+                  class="item-choice"
+                  aria-pressed=${String(e.item.id === n?.itemId)}
+                  ?disabled=${e.validItemLevels.length === 0 || e.validRarities.length === 0}
+                  @click=${() => this.#l(e.item.id)}
+                >
+                  <span class="choice-mark" aria-hidden="true"></span>
+                  <span class="choice-image">
+                    ${this.#o(e.item.images, e.item.name ?? e.item.id)}
+                  </span>
+                  <span>${e.item.name ?? e.item.id}</span>
+                  <small>${e.maxEquipped === 1 ? "Unique" : e.itemType}</small>
+                </button>
+              `)}
+      </div>
+      ${n && r && i ? this.#e(n, i) : o`<div class="empty configure-empty">Choose an item to configure it.</div>`}
+    `;
+	}
+	#e(e, t) {
+		let n = t.slots.filter((e) => e.rollGroupId === null);
+		return o`
+      <section class="configuration" aria-label="Item configuration">
+        ${this.#a(t)}
+        <div class="control-grid">
+          <label>
+            <span>Item level</span>
+            <select
+              .value=${String(e.itemLevel)}
+              @change=${(t) => this.#h({
+			...e,
+			itemLevel: Number(t.currentTarget.value)
+		}, "item-level")}
+            >
+              ${f(t.item.validItemLevels, (e) => e, (e) => o`<option value=${e}>${e}</option>`)}
+            </select>
+          </label>
+          <label>
+            <span>Rarity</span>
+            <select
+              .value=${e.rarity}
+              @change=${(t) => this.#h({
+			...e,
+			rarity: t.currentTarget.value
+		}, "rarity")}
+            >
+              ${f(t.item.validRarities, (e) => e, (e) => o`<option value=${e}>${e}</option>`)}
+            </select>
+          </label>
+        </div>
+
+        ${f(n, (e) => e.id, (n) => this.#t(e, n, t))}
+        ${f(t.rollGroups, (e) => e.id, (n, r) => {
+			let i = t.slots.filter((e) => n.slotIds.includes(e.id));
+			return this.#n(e, i, r + 1);
+		})}
+        ${t.socketTiers.length > 0 ? o`
+              <fieldset>
+                <legend>Socketed gems</legend>
+                ${f(t.socketTiers, (e, t) => t, (t, n) => this.#r(e, t, n))}
+              </fieldset>
+            ` : s}
+        ${t.traitTree ? o`
+              <fieldset>
+                <legend>Trait topology</legend>
+                <p class="hint">Weapon and necklace nodes follow the extracted parent links.</p>
+                <div class="trait-grid">
+                  ${f(t.traitTree.nodes, (e) => e.id, (t) => {
+			let n = e.traits.find(({ nodeId: e }) => e === t.id);
+			return o`
+                        <label class="trait-node" style=${`--row:${t.row + 1};--column:${t.column + 1}`}>
+                          <span>Node ${t.row + 1}.${t.column + 1}</span>
+                          <select
+                            aria-label=${`Trait node ${t.row + 1}.${t.column + 1}`}
+                            .value=${n?.traitId ?? ""}
+                            @change=${(n) => this.#p(e, t.id, n.currentTarget.value)}
+                          >
+                            <option value="">Unassigned</option>
+                            ${f(t.eligibleTraitIds, (e) => e, (e) => o`
+                                <option value=${e}>
+                                  ${this.data?.traitById.get(e)?.name ?? e}
+                                </option>
+                              `)}
+                          </select>
+                          ${n ? o`
+                                <input
+                                  type="number"
+                                  min="1"
+                                  max=${t.maxRank}
+                                  .value=${String(n.rank)}
+                                  aria-label="Trait rank"
+                                  @change=${(n) => this.#m(e, t.id, Number(n.currentTarget.value), t.maxRank)}
+                                />
+                              ` : s}
+                        </label>
+                      `;
+		})}
+                </div>
+              </fieldset>
+            ` : s}
+      </section>
+    `;
+	}
+	#t(e, t, n) {
+		if (t.kind === "gem-socket" || t.kind === "item-trait") return o``;
+		let r = this.#i(e, t);
+		return o`
+      <label class="configuration-control">
+        <span>${this.#s(t.kind)}</span>
+        <select
+          .value=${r}
+          @change=${(r) => this.#u(e, t, r.currentTarget.value, n)}
+        >
+          <option value="">${t.required ? "Choose a value" : "None"}</option>
+          ${f(t.kind === "blessing" ? n.blessings.map((e) => e.id) : t.allowedChoiceIds, (e) => e, (e) => o`
+              <option value=${e}>${this.#c(t.kind, e)}</option>
+            `)}
+        </select>
+      </label>
+    `;
+	}
+	#n(e, t, n) {
+		let r = t.find((t) => this.#i(e, t));
+		return o`
+      <label class="configuration-control">
+        <span>Rolled choice ${n}</span>
+        <select
+          .value=${r ? `${r.id}\u001f${this.#i(e, r)}` : ""}
+          @change=${(n) => {
+			let r = n.currentTarget.value;
+			this.#d(e, t, r);
+		}}
+        >
+          <option value="">Choose one roll</option>
+          ${t.flatMap((e) => e.allowedChoiceIds.map((t) => o`
+                <option value=${`${e.id}\u001f${t}`}>
+                  ${this.#s(e.kind)} · ${this.#c(e.kind, t)}
+                </option>
+              `))}
+        </select>
+      </label>
+    `;
+	}
+	#r(e, t, n) {
+		let r = `socket:${n}`, i = e.gems.find((e) => e.socketId === r)?.gemId ?? "", a = Number(t.replace(/\D/g, "")), s = this.data?.socketGems.filter((e) => e.tier <= a) ?? [];
+		return o`
+      <label class="configuration-control">
+        <span>Socket ${n + 1} · ${t.replace("SocketTier", "Tier ")}</span>
+        <select
+          .value=${i}
+          @change=${(t) => this.#f(e, r, t.currentTarget.value)}
+        >
+          <option value="">Empty socket</option>
+          ${f(s, (e) => e.id, (e) => o`<option value=${e.id}>${e.name} · ${e.power} power</option>`)}
+        </select>
+      </label>
+    `;
+	}
+	#i(e, t) {
+		return t.kind === "blessing" ? e.blessings.find(({ slotId: e }) => e === t.id)?.blessingId ?? "" : e.rolledModifiers.find(({ slotId: e }) => e === t.id)?.choiceId ?? "";
+	}
+	#a(e) {
+		let t = e.item, n = this.build?.heroId ?? "", r = (t.setBonusIdsByHero[n] ?? []).map((e) => this.data?.setBonuses.find(({ id: t }) => t === e)?.name ?? e), i = t.relicIdsByHero[n], a = this.data?.relics.find(({ id: e }) => e === i), c = t.item.linkedAbilityIds;
+		return r.length === 0 && !a && c.length === 0 ? o`` : o`
+      <aside class="fixed-details" aria-label="Fixed item mechanics">
+        <strong>Fixed item identity</strong>
+        ${r.length > 0 ? o`<span>Set · ${r.join(", ")}</span>` : s}
+        ${a ? o`<span>Relic · ${a.name ?? a.id}</span>` : s}
+        ${c.length > 0 ? o`<span>Granted ability · ${c.join(", ")}</span>` : s}
+      </aside>
+    `;
+	}
+	#o(e, t) {
+		let n = p(e, {
+			size: "200",
+			type: "hero-item"
+		});
+		if (!n || !this.resolveAssetUrl) return t.slice(0, 2);
+		let r;
+		try {
+			r = this.resolveAssetUrl(n);
+		} catch {
+			return t.slice(0, 2);
+		}
+		return o`
+      <img
+        src=${r}
+        alt=""
+        @error=${(e) => {
+			e.currentTarget.hidden = !0;
+		}}
+      />
+    `;
+	}
+	#s(e) {
+		return {
+			"rolled-stat": "Rolled stat",
+			"gem-power": "Gem power",
+			"item-trait": "Item trait",
+			blessing: "Blessing",
+			"gem-socket": "Gem socket"
+		}[e];
+	}
+	#c(e, t) {
+		return e === "blessing" ? this.data?.blessingById.get(t)?.name ?? t : e === "item-trait" ? this.data?.traitById.get(t)?.name ?? t : t.replaceAll(/([a-z])([A-Z])/g, "$1 $2");
+	}
+	#l(e) {
+		let t = this.data?.itemById.get(e), n = t?.validItemLevels.at(-1), r = t?.validRarities.at(-1);
+		!t || n === void 0 || r === void 0 || this.#h({
+			itemId: e,
+			itemLevel: n,
+			rarity: r,
+			rolledModifiers: [],
+			gems: [],
+			traits: [],
+			blessings: []
+		}, "item");
+	}
+	#u(e, t, n, r) {
+		if (t.kind === "blessing") {
+			let r = e.blessings.filter((e) => e.slotId !== t.id);
+			n && r.push({
+				slotId: t.id,
+				blessingId: n,
+				rank: 1
+			}), this.#h({
+				...e,
+				blessings: r
+			}, "blessing");
+			return;
+		}
+		let i = e.rolledModifiers.filter((e) => e.slotId !== t.id);
+		n && t.kind !== "gem-socket" && i.push({
+			slotId: t.id,
+			kind: t.kind,
+			choiceId: n
+		}), this.#h({
+			...e,
+			rolledModifiers: i
+		}, "modifier");
+	}
+	#d(e, t, n) {
+		let r = new Set(t.map((e) => e.id)), i = e.rolledModifiers.filter((e) => !r.has(e.slotId)), a = e.blessings.filter((e) => !r.has(e.slotId)), [o, s] = n.split(""), c = t.find((e) => e.id === o);
+		c && s && (c.kind === "blessing" ? a.push({
+			slotId: c.id,
+			blessingId: s,
+			rank: 1
+		}) : c.kind !== "gem-socket" && i.push({
+			slotId: c.id,
+			kind: c.kind,
+			choiceId: s
+		})), this.#h({
+			...e,
+			rolledModifiers: i,
+			blessings: a
+		}, c?.kind === "blessing" ? "blessing" : "modifier");
+	}
+	#f(e, t, n) {
+		let r = e.gems.filter((e) => e.socketId !== t);
+		n && r.push({
+			socketId: t,
+			gemId: n
+		}), this.#h({
+			...e,
+			gems: r
+		}, "gem");
+	}
+	#p(e, t, n) {
+		let r = e.traits.filter((e) => e.nodeId !== t);
+		n && r.push({
+			nodeId: t,
+			traitId: n,
+			rank: 1
+		}), this.#h({
+			...e,
+			traits: r
+		}, "trait");
+	}
+	#m(e, t, n, r) {
+		let i = e.traits.map((e) => e.nodeId === t ? {
+			...e,
+			rank: Math.max(1, Math.min(r, Math.round(n)))
+		} : e);
+		this.#h({
+			...e,
+			traits: i
+		}, "trait");
+	}
+	#h(e, t) {
+		this.dispatchEvent(new CustomEvent("fellowship-workbench-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				item: e,
+				source: t
+			}
+		}));
+	}
+	#g;
+};
+e([l({ attribute: !1 })], S.prototype, "data", void 0), e([l({ attribute: !1 })], S.prototype, "build", void 0), e([l({ type: String })], S.prototype, "positionId", void 0), e([l({ attribute: !1 })], S.prototype, "resolveAssetUrl", void 0), e([d()], S.prototype, "_query", void 0), S = e([c("fellowship-item-workbench")], S);
+var C = () => {
+	customElements.get("fellowship-item-workbench") || customElements.define("fellowship-item-workbench", S);
+}, w = a`
+  :host {
+    display: block;
+    min-width: 0;
+    color: var(--_fellowship-poster-plum);
+    font: 400 12px/1.5 var(--_fellowship-poster-mono);
+  }
+
+  .container {
+    container-type: inline-size;
+    min-width: 0;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  button,
+  input,
+  select {
+    font: inherit;
+  }
+
+  .planner {
+    min-width: 0;
+    padding: 16px;
+    border: var(--_fellowship-poster-seam) solid var(--_fellowship-poster-plum);
+    background: var(--_fellowship-poster-cream);
+    box-shadow: var(--_fellowship-poster-shadow);
+  }
+
+  .hero {
+    display: grid;
+    grid-template-columns: 72px minmax(0, max-content);
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    min-width: 0;
+    margin: 0 auto 16px;
+    text-align: left;
+  }
+
+  .hero-image {
+    display: grid;
+    place-items: center;
+    width: 72px;
+    height: 72px;
+    overflow: hidden;
+    border: 3px solid var(--_fellowship-poster-plum);
+    background: var(--_fellowship-poster-violet);
+    color: var(--_fellowship-poster-cream);
+    font: 800 24px/1 var(--_fellowship-poster-display);
+  }
+
+  .hero-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .hero-label,
+  .section-label {
+    display: block;
+    margin-bottom: 4px;
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+
+  h1,
+  h2,
+  h3,
+  p {
+    margin: 0;
+  }
+
+  h1 {
+    max-width: 26ch;
+    overflow-wrap: anywhere;
+    font-family: var(--_fellowship-poster-display);
+    font-size: clamp(24px, 4cqi, 48px);
+    font-weight: 800;
+    line-height: 0.9;
+    text-transform: uppercase;
+  }
+
+  h2 {
+    margin-bottom: 12px;
+    font-family: var(--_fellowship-poster-display);
+    font-size: 18px;
+    font-weight: 800;
+    line-height: 1;
+    text-transform: uppercase;
+  }
+
+  h3 {
+    margin: 16px 0 6px;
+    padding-top: 10px;
+    border-top: 2px solid currentColor;
+    font-family: var(--_fellowship-poster-display);
+    font-size: 13px;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .tabs {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    margin-bottom: 12px;
+    border: 2px solid var(--_fellowship-poster-plum);
+  }
+
+  .tab {
+    min-height: 44px;
+    border: 0;
+    border-right: 2px solid var(--_fellowship-poster-plum);
+    background: var(--_fellowship-poster-cream);
+    color: var(--_fellowship-poster-plum);
+    font-size: 10px;
+    font-weight: 500;
+    text-transform: uppercase;
+    cursor: pointer;
+  }
+
+  .tab:last-child {
+    border-right: 0;
+  }
+
+  .tab[aria-selected="true"] {
+    background: var(--_fellowship-poster-violet);
+    color: var(--_fellowship-poster-cream);
+  }
+
+  .tab:focus-visible,
+  .sheet-close:focus-visible,
+  .condition:focus-within {
+    outline: 4px solid var(--_fellowship-poster-focus);
+    outline-offset: 2px;
+  }
+
+  .desktop-grid {
+    display: block;
+    min-width: 0;
+  }
+
+  .panel {
+    min-width: 0;
+    padding: 14px;
+    border: 2px solid var(--_fellowship-poster-plum);
+    background: var(--_fellowship-poster-white);
+  }
+
+  .slot-grid {
+    display: grid;
+  }
+
+  .slot-rail {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .summary-list,
+  .breakdown {
+    display: grid;
+    gap: 6px;
+    padding: 0;
+    list-style: none;
+  }
+
+  .summary-row,
+  .total-row,
+  .unsupported-row {
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 6px 0;
+    border-bottom: 1px solid color-mix(in oklch, var(--_fellowship-poster-plum) 28%, transparent);
+  }
+
+  .summary-row span:first-child,
+  .total-row span:first-child,
+  .unsupported-row span:first-child {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .summary-row strong,
+  .total-row strong {
+    flex: 0 0 auto;
+    font-weight: 500;
+  }
+
+  .active-set {
+    padding-inline: 4px;
+    background: var(--_fellowship-poster-yellow);
+  }
+
+  .unsupported-row {
+    color: color-mix(in oklch, var(--_fellowship-poster-plum) 72%, white);
+  }
+
+  .unsupported-code {
+    font-size: 9px;
+    text-transform: uppercase;
+  }
+
+  .total-row {
+    font-size: 13px;
+  }
+
+  .condition {
+    display: grid;
+    grid-template-columns: 44px minmax(0, 1fr);
+    align-items: center;
+    min-height: 44px;
+    cursor: pointer;
+  }
+
+  .condition input {
+    width: 20px;
+    height: 20px;
+    accent-color: var(--_fellowship-poster-violet);
+  }
+
+  .workbench-panel {
+    min-width: 0;
+    padding: 16px;
+    border: 3px solid var(--_fellowship-poster-plum);
+    background: var(--_fellowship-poster-cream);
+  }
+
+  .workbench-panel:focus {
+    outline: 4px solid var(--_fellowship-poster-focus);
+    outline-offset: -4px;
+  }
+
+  .sheet-backdrop,
+  .sheet-header {
+    display: none;
+  }
+
+  .loading,
+  .empty,
+  .error {
+    display: grid;
+    min-height: 320px;
+    place-items: center;
+    padding: 32px;
+    border: 3px solid var(--_fellowship-poster-plum);
+    background: var(--_fellowship-poster-cream);
+    color: var(--_fellowship-poster-plum);
+    text-align: center;
+  }
+
+  .loading strong,
+  .empty strong,
+  .error strong {
+    display: block;
+    margin-bottom: 8px;
+    font: 800 clamp(24px, 5cqi, 54px) / 0.9 var(--_fellowship-poster-display);
+    text-transform: uppercase;
+  }
+
+  .error {
+    background: var(--_fellowship-poster-yellow);
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  @container (min-width: 1200px) {
+    .planner {
+      padding: 20px;
+    }
+
+    .hero {
+      grid-template-columns: 92px minmax(0, max-content);
+      margin-bottom: 20px;
+    }
+
+    .hero-image {
+      width: 92px;
+      height: 92px;
+    }
+
+    .tabs {
+      display: none;
+    }
+
+    .desktop-grid {
+      display: grid;
+      grid-template-columns:
+        minmax(170px, 0.78fr)
+        minmax(142px, 0.64fr)
+        minmax(390px, 1.9fr)
+        minmax(142px, 0.64fr)
+        minmax(190px, 0.86fr);
+      align-items: start;
+      gap: 12px;
+    }
+
+    .slot-grid {
+      display: contents;
+    }
+
+    .gear-workspace {
+      display: contents;
+    }
+
+    .slot-rail {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr);
+      gap: 8px;
+    }
+
+    .left-summary {
+      grid-column: 1;
+    }
+
+    .left-rail {
+      grid-column: 2;
+    }
+
+    .workbench-panel {
+      grid-column: 3;
+      min-height: 650px;
+    }
+
+    .right-rail {
+      grid-column: 4;
+    }
+
+    .right-summary {
+      grid-column: 5;
+    }
+
+    .left-summary,
+    .left-rail,
+    .workbench-panel,
+    .right-rail,
+    .right-summary {
+      grid-row: 1;
+    }
+  }
+
+  @container (max-width: 1199px) {
+    .panel[aria-hidden="true"],
+    .gear-workspace[aria-hidden="true"] {
+      display: none;
+    }
+
+    .panel {
+      margin-top: 8px;
+    }
+
+    .workbench-panel {
+      position: fixed;
+      z-index: 1001;
+      inset: 0;
+      display: none;
+      overflow: auto;
+      padding: max(16px, env(safe-area-inset-top)) 16px
+        max(24px, env(safe-area-inset-bottom));
+      border: 0;
+      background: var(--_fellowship-poster-cream);
+      overscroll-behavior: contain;
+    }
+
+    .workbench-panel[data-sheet-open="true"] {
+      display: block;
+    }
+
+    .sheet-header {
+      position: sticky;
+      z-index: 2;
+      top: calc(-1 * max(16px, env(safe-area-inset-top)));
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      margin: calc(-1 * max(16px, env(safe-area-inset-top))) -16px 16px;
+      padding: max(12px, env(safe-area-inset-top)) 16px 12px;
+      border-bottom: 3px solid var(--_fellowship-poster-plum);
+      background: var(--_fellowship-poster-yellow);
+    }
+
+    .sheet-header strong {
+      font: 800 16px/1 var(--_fellowship-poster-display);
+      text-transform: uppercase;
+    }
+
+    .sheet-close {
+      min-width: 44px;
+      min-height: 44px;
+      border: 2px solid var(--_fellowship-poster-plum);
+      background: var(--_fellowship-poster-plum);
+      color: var(--_fellowship-poster-cream);
+      cursor: pointer;
+    }
+  }
+
+  @container (max-width: 560px) {
+    .planner {
+      padding: 8px;
+      border-width: 2px;
+      box-shadow: 2px 2px 0 var(--_fellowship-poster-yellow);
+    }
+
+    .hero {
+      grid-template-columns: 52px minmax(0, 1fr);
+      justify-content: start;
+      margin-bottom: 10px;
+    }
+
+    .hero-image {
+      width: 52px;
+      height: 52px;
+      border-width: 2px;
+      font-size: 18px;
+    }
+
+    h1 {
+      font-size: 24px;
+    }
+
+    .slot-rail {
+      grid-template-columns: 1fr;
+      gap: 6px;
+    }
+
+    .tab {
+      padding-inline: 4px;
+      font-size: 9px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      scroll-behavior: auto !important;
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
+`, T = [
+	"head",
+	"shoulders",
+	"chest",
+	"hands",
+	"waist",
+	"ring-1",
+	"trinket-1"
+], E = [
+	"necklace",
+	"back",
+	"wrists",
+	"feet",
+	"ring-2",
+	"trinket-2",
+	"weapon"
+], D = "button:not([disabled]), input:not([disabled]), select:not([disabled]), [href], [tabindex]:not([tabindex=\"-1\"])", O = (e) => {
+	let t = [];
+	for (let n of e.children) n instanceof HTMLElement && n.matches(D) && t.push(n), n.shadowRoot && t.push(...O(n.shadowRoot)), t.push(...O(n));
+	return t;
+}, k = (e) => {
+	let t = e.activeElement;
+	for (; t?.shadowRoot?.activeElement;) t = t.shadowRoot.activeElement;
+	return t;
+};
+b(), C();
+var A = class extends i {
+	constructor(...e) {
+		super(...e), this.data = null, this.build = null, this.loading = !1, this.error = null, this.resolveAssetUrl = null, this._selectedPositionId = null, this._tab = "gear", this._sheetOpen = !1, this._compact = !1, this._announcement = "", this._calculation = null, this.#e = null, this.#t = null, this.#n = null, this.#r = null, this.#i = null, this.#a = !1, this.#o = /* @__PURE__ */ new Set(), this.#p = (e) => {
+			e.stopPropagation(), this._selectedPositionId = e.detail.positionId, this.#i = e.detail.trigger, this._compact && (this._sheetOpen = !0, this.#r !== null && window.clearTimeout(this.#r), this.#r = window.setTimeout(() => {
+				this.#r = null, this.shadowRoot?.querySelector(".workbench-panel")?.focus({ preventScroll: !0 });
+			}, 0));
+		}, this.#m = (e) => {
+			if (e.stopPropagation(), !this.data || !this.build || !this._selectedPositionId) return;
+			let t = {
+				...this.build,
+				positions: this.build.positions.map((t) => t.positionId === this._selectedPositionId ? {
+					...t,
+					item: e.detail.item
+				} : t)
+			}, n = _(this.data, t), r = v(this.data, n.build);
+			if (!r.valid || !r.build) {
+				let e = r.issues.find(({ severity: e }) => e === "error");
+				this.#_({
+					code: e?.code ?? "invalid-change",
+					message: e?.message ?? "That item choice is not valid.",
+					recoverable: !0
+				}), this._announcement = e?.message ?? "That item choice was rejected.";
+				return;
+			}
+			let i = e.detail.item.rolledModifiers.length + e.detail.item.gems.length + e.detail.item.traits.length + e.detail.item.blessings.length - (r.build.positions.find(({ positionId: e }) => e === this._selectedPositionId)?.item?.rolledModifiers.length ?? 0) - (r.build.positions.find(({ positionId: e }) => e === this._selectedPositionId)?.item?.gems.length ?? 0) - (r.build.positions.find(({ positionId: e }) => e === this._selectedPositionId)?.item?.traits.length ?? 0) - (r.build.positions.find(({ positionId: e }) => e === this._selectedPositionId)?.item?.blessings.length ?? 0);
+			this._announcement = i > 0 ? `${i} incompatible item choice${i === 1 ? " was" : "s were"} reset.` : "Build updated.", this.#g(r.build, e.detail.source, this._selectedPositionId);
+		}, this.#v = () => {
+			this._sheetOpen = !1, this.updateComplete.then(() => {
+				this.#n !== null && window.cancelAnimationFrame(this.#n), this.#n = window.requestAnimationFrame(() => {
+					this.#n = null, this.#i?.focus({ preventScroll: !0 });
+				});
+			});
+		}, this.#y = (e) => {
+			e.key !== "Escape" || !this._compact || !this._sheetOpen || (e.preventDefault(), this.#v());
+		}, this.#b = (e) => {
+			if (!this._compact || !this._sheetOpen) return;
+			if (e.key === "Escape") {
+				e.preventDefault(), this.#v();
+				return;
+			}
+			if (e.key !== "Tab" || !this._workbenchPanel) return;
+			let t = O(this._workbenchPanel), n = t[0], r = t.at(-1), i = k(this.shadowRoot);
+			if (!n || !r) {
+				e.preventDefault();
+				return;
+			}
+			e.shiftKey && (i === n || i === this._workbenchPanel) ? (e.preventDefault(), r.focus()) : !e.shiftKey && i === r && (e.preventDefault(), n.focus());
+		}, this.#x = (e) => {
+			if (!["ArrowLeft", "ArrowRight"].includes(e.key)) return;
+			e.preventDefault();
+			let t = [
+				"traits",
+				"gear",
+				"bonuses"
+			], n = e.key === "ArrowRight" ? 1 : -1, r = t.indexOf(this._tab);
+			this._tab = t[(r + n + t.length) % t.length] ?? "gear", this.updateComplete.then(() => {
+				(this.shadowRoot?.querySelector(".tab[aria-selected=\"true\"]"))?.focus();
+			});
+		}, this.#C = (e) => {
+			e.currentTarget.hidden = !0;
+		};
+	}
+	static {
+		this.styles = [n, w];
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	connectedCallback() {
+		super.connectedCallback(), t(this.ownerDocument), this.#e ??= new ResizeObserver(() => {
+			let e = this.getBoundingClientRect().width < 1200;
+			this.#t !== null && window.cancelAnimationFrame(this.#t), this.#t = window.requestAnimationFrame(() => {
+				this.#t = null, e !== this._compact && (this._compact = e, e || (this._sheetOpen = !1));
+			});
+		}), this.#e.observe(this), this.ownerDocument.addEventListener("keydown", this.#y);
+	}
+	disconnectedCallback() {
+		this.#e?.disconnect(), this.ownerDocument.removeEventListener("keydown", this.#y), this.#t !== null && (window.cancelAnimationFrame(this.#t), this.#t = null), this.#n !== null && (window.cancelAnimationFrame(this.#n), this.#n = null), this.#r !== null && (window.clearTimeout(this.#r), this.#r = null), super.disconnectedCallback();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), (e.has("data") || e.has("build")) && (this._calculation = this.data && this.build ? m(this.data, this.build) : null, this.data && this._selectedPositionId && !this.data.positions.some(({ id: e }) => e === this._selectedPositionId) && (this._selectedPositionId = null));
+	}
+	updated(e) {
+		if (super.updated(e), e.has("data") || e.has("build") || e.has("resolveAssetUrl")) {
+			(e.has("data") || e.has("resolveAssetUrl")) && this.#o.clear();
+			let t = !!(this.data && this.build && !this.resolveAssetUrl);
+			t && !this.#a ? (this.#a = !0, this.#_({
+				code: "asset-resolver-missing",
+				message: "A resolveAssetUrl callback is required to render Fellowship images.",
+				recoverable: !0
+			})) : t || (this.#a = !1);
+		}
+	}
+	render() {
+		if (this.loading) return o`
+        <div class="loading" role="status">
+          <div><strong>Loading gear</strong><span>Preparing live-game choices…</span></div>
+        </div>
+      `;
+		if (this.error) return o`
+        <div class="error" role="alert">
+          <div><strong>Planner unavailable</strong><span>${this.error.message}</span></div>
+        </div>
+      `;
+		if (this.data && this.build && !this.resolveAssetUrl) return o`
+        <div class="error" role="alert">
+          <div>
+            <strong>Planner unavailable</strong>
+            <span>A resolveAssetUrl callback is required to render Fellowship images.</span>
+          </div>
+        </div>
+      `;
+		if (!this.data || !this.build) return o`
+        <div class="empty">
+          <div>
+            <strong>Choose your hero</strong>
+            <span>The planner starts only after an explicit hero selection.</span>
+          </div>
+        </div>
+      `;
+		let e = this.data.heroById.get(this.build.heroId);
+		if (!e) return o`
+        <div class="error" role="alert">
+          <div><strong>Unknown hero</strong><span>This build cannot be displayed safely.</span></div>
+        </div>
+      `;
+		let t = p(e.hero.images, {
+			size: "200",
+			type: "hero"
+		}), n = t ? this.#S(t) : null;
+		return o`
+      <div class="container">
+        <section class="planner" aria-label="Fellership Gear Planner">
+        <header class="hero">
+          <span class="hero-image">
+            ${n ? o`<img src=${n} alt="" @error=${this.#C} />` : (e.hero.name ?? e.hero.id).slice(0, 2)}
+          </span>
+          <span>
+            <span class="hero-label">Current hero</span>
+            <h1>${e.hero.name ?? e.hero.id}</h1>
+          </span>
+        </header>
+
+        ${this.#s()}
+        <div class="desktop-grid">
+          <aside
+            class="panel left-summary"
+            aria-label="Traits and gems"
+            aria-hidden=${String(this._compact && this._tab !== "traits")}
+          >
+            ${this.#d()}
+          </aside>
+          <div
+            class="gear-workspace"
+            aria-hidden=${String(this._compact && this._tab !== "gear")}
+          >
+            <div class="slot-grid">
+              <div class="slot-rail left-rail">
+                ${this.#c(this._compact ? this.data.positions.map(({ id: e }) => e) : T)}
+              </div>
+              ${this._compact ? s : o`
+                    <div class="slot-rail right-rail">
+                      ${this.#c(E)}
+                    </div>
+                  `}
+            </div>
+          </div>
+          ${this.#l()}
+          <aside
+            class="panel right-summary"
+            aria-label="Blessings, sets and results"
+            aria-hidden=${String(this._compact && this._tab !== "bonuses")}
+          >
+            ${this.#f()}
+          </aside>
+        </div>
+          <p class="sr-only" aria-live="polite">${this._announcement}</p>
+        </section>
+      </div>
+    `;
+	}
+	#s() {
+		return o`
+      <div class="tabs" role="tablist" aria-label="Planner workspace">
+        ${[
+			["traits", "Traits & gems"],
+			["gear", "Gear"],
+			["bonuses", "Bonuses"]
+		].map(([e, t]) => o`
+            <button
+              class="tab"
+              type="button"
+              role="tab"
+              aria-selected=${String(this._tab === e)}
+              tabindex=${this._tab === e ? "0" : "-1"}
+              @click=${() => {
+			this._tab = e;
+		}}
+              @keydown=${this.#x}
+            >
+              ${t}
+            </button>
+          `)}
+      </div>
+    `;
+	}
+	#c(e) {
+		return !this.data || !this.build ? o`` : o`
+      ${f(e, (e) => e, (e) => {
+			let t = this.data?.positions.find(({ id: t }) => t === e) ?? null, n = this.build?.positions.find((t) => t.positionId === e) ?? null, r = n?.item ? this.data?.itemById.get(n.item.itemId) ?? null : null, i = r ? p(r.item.images, {
+				size: "200",
+				type: "hero-item"
+			}) : null;
+			return o`
+            <fellowship-gear-position
+              .position=${t}
+              .item=${r}
+              .itemBuild=${n?.item ?? null}
+              .selected=${e === this._selectedPositionId}
+              .imageUrl=${i ? this.#S(i) : null}
+              .tooltipDetails=${this.#u(e, n?.item ?? null)}
+              @fellowship-gear-position-select=${this.#p}
+            ></fellowship-gear-position>
+          `;
+		})}
+    `;
+	}
+	#l() {
+		return o`
+      <section
+        class="workbench-panel"
+        data-sheet-open=${String(this._sheetOpen)}
+        role=${this._compact ? "dialog" : "region"}
+        aria-modal=${this._compact ? "true" : s}
+        aria-label="Item workbench"
+        tabindex=${this._compact ? "-1" : s}
+        @keydown=${this.#b}
+        @fellowship-workbench-change=${this.#m}
+      >
+        <header class="sheet-header">
+          <strong>Configure item</strong>
+          <button class="sheet-close" type="button" @click=${this.#v}>Close</button>
+        </header>
+        <fellowship-item-workbench
+          .data=${this.data}
+          .build=${this.build}
+          .positionId=${this._selectedPositionId}
+          .resolveAssetUrl=${this.resolveAssetUrl}
+        ></fellowship-item-workbench>
+      </section>
+    `;
+	}
+	#u(e, t) {
+		if (!this.data || !this.build || !t) return [];
+		let n = this.data.itemById.get(t.itemId);
+		if (!n) return [];
+		let r = this._calculation?.fixedItemStats.filter((t) => t.positionId === e).map((e) => `${e.stat}: ${e.value}`).join(", "), i = t.rolledModifiers.map((e) => e.choiceId).join(", "), a = t.gems.map((e) => this.data?.socketGemById.get(e.gemId)?.name ?? e.gemId).join(", "), o = t.traits.map((e) => this.data?.traitById.get(e.traitId)?.name ?? e.traitId).join(", "), s = t.blessings.map((e) => this.data?.blessingById.get(e.blessingId)?.name ?? e.blessingId).join(", "), c = (n.setBonusIdsByHero[this.build.heroId] ?? []).map((e) => this.data?.setBonuses.find(({ id: t }) => t === e)?.name ?? e).join(", "), l = n.relicIdsByHero[this.build.heroId], u = this.data.relics.find(({ id: e }) => e === l), d = this._calculation?.unsupportedContributions.some((t) => t.positionId === e);
+		return [
+			r ? `Fixed stats · ${r}` : "",
+			i ? `Rolled · ${i}` : "",
+			a ? `Gems · ${a}` : "",
+			o ? `Traits · ${o}` : "",
+			s ? `Blessings · ${s}` : "",
+			c ? `Set · ${c}` : "",
+			u ? `Relic · ${u.name ?? u.id}` : "",
+			n.item.linkedAbilityIds.length > 0 ? `Granted ability · ${n.item.linkedAbilityIds.join(", ")}` : "",
+			d ? "Some mechanics are excluded from exact totals." : ""
+		].filter(Boolean);
+	}
+	#d() {
+		if (!this.data || !this.build) return o``;
+		let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
+		for (let n of this.build.positions) {
+			for (let t of n.item?.traits ?? []) e.set(t.traitId, (e.get(t.traitId) ?? 0) + t.rank);
+			for (let e of n.item?.gems ?? []) {
+				let n = this.data.socketGemById.get(e.gemId);
+				if (!n) continue;
+				let r = t.get(n.family) ?? {
+					count: 0,
+					power: 0
+				};
+				t.set(n.family, {
+					count: r.count + 1,
+					power: r.power + n.power
+				});
+			}
+		}
+		return o`
+      <span class="section-label">Loadout summary</span>
+      <h2>Traits & gems</h2>
+      <h3>Active traits</h3>
+      <ul class="summary-list">
+        ${e.size === 0 ? o`<li class="summary-row"><span>No traits selected</span></li>` : [...e].map(([e, t]) => o`
+                <li class="summary-row">
+                  <span>${this.data?.traitById.get(e)?.name ?? e}</span>
+                  <strong>R${t}</strong>
+                </li>
+              `)}
+      </ul>
+      <h3>Socket gems</h3>
+      <ul class="summary-list">
+        ${t.size === 0 ? o`<li class="summary-row"><span>No gems socketed</span></li>` : [...t].map(([e, t]) => o`
+                <li class="summary-row">
+                  <span>${e} × ${t.count}</span>
+                  <strong>${t.power}</strong>
+                </li>
+              `)}
+      </ul>
+    `;
+	}
+	#f() {
+		if (!this.data || !this.build || !this._calculation) return o``;
+		let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
+		for (let n of this.build.positions) {
+			for (let t of n.item?.blessings ?? []) e.set(t.blessingId, (e.get(t.blessingId) ?? 0) + t.rank);
+			if (!n.item) continue;
+			let r = this.data.itemById.get(n.item.itemId);
+			for (let e of r?.setBonusIdsByHero[this.build.heroId] ?? []) t.set(e, (t.get(e) ?? 0) + 1);
+		}
+		return o`
+      <span class="section-label">Build output</span>
+      <h2>Bonuses & totals</h2>
+      <h3>Blessings</h3>
+      <ul class="summary-list">
+        ${e.size === 0 ? o`<li class="summary-row"><span>No blessings selected</span></li>` : [...e].map(([e, t]) => o`
+                <li class="summary-row">
+                  <span>${this.data?.blessingById.get(e)?.name ?? e}</span>
+                  <strong>R${t}</strong>
+                </li>
+              `)}
+      </ul>
+      <h3>Set bonuses</h3>
+      <ul class="summary-list">
+        ${t.size === 0 ? o`<li class="summary-row"><span>No set pieces equipped</span></li>` : [...t].map(([e, t]) => {
+			let n = this.data?.setBonuses.find(({ id: t }) => t === e);
+			return o`
+                <li class="summary-row">
+                  <span class=${n?.requiredSetCount !== null && t >= (n?.requiredSetCount ?? 0) ? "active-set" : ""}>${n?.name ?? e}</span>
+                  <strong>${t}/${n?.requiredSetCount ?? "?"}</strong>
+                </li>
+              `;
+		})}
+      </ul>
+      <h3>Exact totals</h3>
+      <ul class="breakdown">
+        ${Object.keys(this._calculation.finalTotals).length === 0 ? o`<li class="total-row"><span>No exact totals yet</span></li>` : Object.entries(this._calculation.finalTotals).map(([e, t]) => o`
+                <li class="total-row"><span>${e}</span><strong>${t}</strong></li>
+              `)}
+      </ul>
+      ${this._calculation.conditionalMechanics.length > 0 ? o`
+            <h3>Conditional</h3>
+            ${this._calculation.conditionalMechanics.map((e) => o`
+                <label class="condition">
+                  <input
+                    type="checkbox"
+                    .checked=${e.applied}
+                    @change=${() => this.#h(e.id)}
+                  />
+                  <span>${e.sourceName} · Apply</span>
+                </label>
+              `)}
+          ` : s}
+      <h3>Unsupported</h3>
+      <ul class="breakdown">
+        ${this._calculation.unsupportedContributions.length === 0 ? o`<li class="unsupported-row"><span>None</span></li>` : this._calculation.unsupportedContributions.map((e) => o`
+                <li class="unsupported-row">
+                  <span>${e.sourceName}</span>
+                  <span class="unsupported-code">${e.reasonCode.replaceAll("-", " ")}</span>
+                </li>
+              `)}
+      </ul>
+    `;
+	}
+	#p;
+	#m;
+	#h(e) {
+		if (!this.build) return;
+		let t = new Set(this.build.disabledConditionalContributionIds);
+		t.has(e) ? t.delete(e) : t.add(e), this.#g({
+			...this.build,
+			disabledConditionalContributionIds: [...t].sort()
+		}, "conditional", null);
+	}
+	#g(e, t, n) {
+		this.dispatchEvent(new CustomEvent("fellowship-gear-build-change", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				build: e,
+				source: t,
+				positionId: n
+			}
+		}));
+	}
+	#_(e) {
+		this.dispatchEvent(new CustomEvent("fellowship-gear-planner-error", {
+			bubbles: !0,
+			composed: !0,
+			detail: {
+				error: e,
+				positionId: this._selectedPositionId
+			}
+		}));
+	}
+	#v;
+	#y;
+	#b;
+	#x;
+	#S(e) {
+		if (!this.resolveAssetUrl) return null;
+		try {
+			return this.resolveAssetUrl(e);
+		} catch (t) {
+			return this.#o.has(e.path) || (this.#o.add(e.path), queueMicrotask(() => {
+				this.isConnected && this.#_({
+					code: "asset-url-error",
+					message: `Could not resolve ${e.path}: ${String(t)}.`,
+					recoverable: !0
+				});
+			})), null;
+		}
+	}
+	#C;
+};
+e([l({ attribute: !1 })], A.prototype, "data", void 0), e([l({ attribute: !1 })], A.prototype, "build", void 0), e([l({
+	type: Boolean,
+	reflect: !0
+})], A.prototype, "loading", void 0), e([l({ attribute: !1 })], A.prototype, "error", void 0), e([l({ attribute: !1 })], A.prototype, "resolveAssetUrl", void 0), e([d()], A.prototype, "_selectedPositionId", void 0), e([d()], A.prototype, "_tab", void 0), e([d()], A.prototype, "_sheetOpen", void 0), e([d()], A.prototype, "_compact", void 0), e([d()], A.prototype, "_announcement", void 0), e([d()], A.prototype, "_calculation", void 0), e([u(".workbench-panel")], A.prototype, "_workbenchPanel", void 0), A = e([c("fellowship-gear-planner")], A);
+var j = () => {
+	customElements.get("fellowship-gear-planner") || customElements.define("fellowship-gear-planner", A);
+};
+//#endregion
+export { j as n, A as t };