@crockery/fellowship-components 1.0.0 → 2.0.0

package/README.md

@@ -136,11 +136,13 @@ pnpm --filter @crockery/fellowship-components build
 pnpm --filter @crockery/fellowship-components pack:check
 ```
 
-Current Chromium, Firefox, and Safari/WebKit are supported. Add a Changeset with
-`pnpm changeset` from the monorepo root for every user-facing change. Merging
-the generated version pull request publishes through trusted OIDC publishing.
-The private repository means npm provenance attestations are unavailable.
-Maintainers should follow [`RELEASING.md`](RELEASING.md).
+Browser tests currently use headless Chromium as the package's deterministic
+browser harness. Cross-browser compatibility is not yet a supported contract.
+Add a Changeset with `pnpm changeset` from the monorepo root for every
+user-facing change. Merging the generated version pull request publishes
+through trusted OIDC publishing. The private repository means npm provenance
+attestations are unavailable. Maintainers should follow
+[`RELEASING.md`](RELEASING.md).
 
 ## License
 

package/dist/chunks/{gear-planner-Bgt77Ovf.js → gear-planner-C-ZTX8S2.js}

@@ -4,12 +4,66 @@ 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";
+import { calculateGearPlannerBuild as m, getMaxGearPlannerAppliedTempers as h, getValidGearConfiguration as g, getValidGearItems as _, normalizeGearPlannerBuild as v, resolveGearPlannerItemImage as y, resolveGearPlannerItemName as b, validateGearPlannerBuild as x } from "@crockery/fellowship-data/gear-planner";
+//#region src/gear-planner/rarity-thumbnail.styles.ts
+var S = a`
+  [data-rarity="Common"] {
+    --_fellowship-rarity-start: var(--fellowship-rarity-common-start, #545456);
+    --_fellowship-rarity-end: var(--fellowship-rarity-common-end, #909291);
+    --_fellowship-rarity-border: var(--fellowship-rarity-common-border, #b8bab9);
+  }
+
+  [data-rarity="Uncommon"] {
+    --_fellowship-rarity-start: var(--fellowship-rarity-uncommon-start, #235824);
+    --_fellowship-rarity-end: var(--fellowship-rarity-uncommon-end, #509650);
+    --_fellowship-rarity-border: var(--fellowship-rarity-uncommon-border, #77bd74);
+  }
+
+  [data-rarity="Rare"] {
+    --_fellowship-rarity-start: var(--fellowship-rarity-rare-start, #253358);
+    --_fellowship-rarity-end: var(--fellowship-rarity-rare-end, #475b80);
+    --_fellowship-rarity-border: var(--fellowship-rarity-rare-border, #718bb7);
+  }
+
+  [data-rarity="Epic"] {
+    --_fellowship-rarity-start: var(--fellowship-rarity-epic-start, #402858);
+    --_fellowship-rarity-end: var(--fellowship-rarity-epic-end, #6b4b8e);
+    --_fellowship-rarity-border: var(--fellowship-rarity-epic-border, #9b72c3);
+  }
+
+  [data-rarity="Champion"] {
+    --_fellowship-rarity-start: var(--fellowship-rarity-champion-start, #8a6222);
+    --_fellowship-rarity-end: var(--fellowship-rarity-champion-end, #c49d3f);
+    --_fellowship-rarity-border: var(--fellowship-rarity-champion-border, #e7c96e);
+  }
+
+  [data-rarity="Heroic"] {
+    --_fellowship-rarity-start: var(--fellowship-rarity-heroic-start, #7b3538);
+    --_fellowship-rarity-end: var(--fellowship-rarity-heroic-end, #c64d42);
+    --_fellowship-rarity-border: var(--fellowship-rarity-heroic-border, #e37b6f);
+  }
+
+  [data-rarity="Legendary"] {
+    --_fellowship-rarity-start: var(--fellowship-rarity-legendary-start, #8f4a2f);
+    --_fellowship-rarity-end: var(--fellowship-rarity-legendary-end, #d07c44);
+    --_fellowship-rarity-border: var(--fellowship-rarity-legendary-border, #efa36c);
+  }
+
+  [data-rarity] {
+    border-color: var(--_fellowship-rarity-border);
+    background: linear-gradient(
+      145deg,
+      var(--_fellowship-rarity-start),
+      var(--_fellowship-rarity-end)
+    );
+  }
+`;
+//#endregion
 //#region src/gear-planner/gear-position.ts
 r();
-var y = class extends i {
+var C = 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) => {
+		super(...e), this.position = null, this.item = null, this.itemBuild = null, this.itemName = null, this.selected = !1, this.imageUrl = null, this.tooltipDetails = [], this.#e = (e) => {
 			this.dispatchEvent(new CustomEvent("fellowship-gear-position-select", {
 				bubbles: !0,
 				composed: !0,
@@ -23,7 +77,7 @@ var y = class extends i {
 		};
 	}
 	static {
-		this.styles = a`
+		this.styles = [a`
     * {
       box-sizing: border-box;
     }
@@ -140,18 +194,18 @@ var y = class extends i {
         transition: none;
       }
     }
-  `;
+  `, S];
 	}
 	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`
+		let e = this.itemName ?? 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">
+        <span class="image" data-rarity=${this.itemBuild?.rarity ?? s}>
           ${this.imageUrl ? o`<img src=${this.imageUrl} alt="" @error=${this.#t} />` : this.position.label.slice(0, 2)}
         </span>
         <span class="copy">
@@ -180,13 +234,13 @@ var y = class extends i {
 	#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({
+e([l({ attribute: !1 })], C.prototype, "position", void 0), e([l({ attribute: !1 })], C.prototype, "item", void 0), e([l({ attribute: !1 })], C.prototype, "itemBuild", void 0), e([l({ type: String })], C.prototype, "itemName", 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`
+})], C.prototype, "selected", void 0), e([l({ type: String })], C.prototype, "imageUrl", void 0), e([l({ attribute: !1 })], C.prototype, "tooltipDetails", void 0), C = e([c("fellowship-gear-position")], C);
+var w = () => {
+	customElements.get("fellowship-gear-position") || customElements.define("fellowship-gear-position", C);
+}, T = a`
   :host {
     display: block;
     min-width: 0;
@@ -366,6 +420,13 @@ var b = () => {
     display: block;
   }
 
+  .control-hint {
+    display: block;
+    margin-top: 3px;
+    font-size: 9px;
+    text-transform: uppercase;
+  }
+
   fieldset {
     min-width: 0;
     margin: 4px 0 0;
@@ -431,23 +492,31 @@ var b = () => {
       grid-row: auto;
     }
   }
-`, S = class extends i {
+`, E = 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];
+		this.styles = [
+			n,
+			T,
+			S
+		];
 	}
 	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);
-		});
+		let n = t?.item ?? null, r = n ? this.data.itemById.get(n.itemId) : null, i = n && r ? g(this.data, this.build, this.positionId, n.itemId) : null, a = this.data.heroById.get(this.build.heroId), s = this._query.trim().toLocaleLowerCase(), c = a ? _(this.data, this.build, this.positionId).map((e) => {
+			let t = e.validRarities[0] ?? "Common";
+			return {
+				item: e,
+				name: b(e, a),
+				rarity: t
+			};
+		}).filter(({ name: e }) => !s || e.toLocaleLowerCase().includes(s)) : [];
 		return o`
       <header class="workbench-header">
         <div>
@@ -467,20 +536,22 @@ var b = () => {
         />
       </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`
+        ${c.length === 0 ? o`<p class="empty-search">No valid items match this search.</p>` : f(c, (e) => e.item.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)}
+                  aria-pressed=${String(e.item.item.id === n?.itemId)}
+                  ?disabled=${e.item.validItemLevels.length === 0 || e.item.validRarities.length === 0}
+                  @click=${() => this.#l(e.item.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 class="choice-image" data-rarity=${e.rarity}>
+                    ${this.#o(e.item, a, e.rarity, e.name)}
                   </span>
-                  <span>${e.item.name ?? e.item.id}</span>
-                  <small>${e.maxEquipped === 1 ? "Unique" : e.itemType}</small>
+                  <span>${e.name}</span>
+                  <small>
+                    ${e.item.maxEquipped === 1 ? "Unique" : e.item.itemType}
+                  </small>
                 </button>
               `)}
       </div>
@@ -488,7 +559,7 @@ var b = () => {
     `;
 	}
 	#e(e, t) {
-		let n = t.slots.filter((e) => e.rollGroupId === null);
+		let n = t.slots.filter((e) => e.rollGroupId === null), r = h(e.itemLevel, e.rarity);
 		return o`
       <section class="configuration" aria-label="Item configuration">
         ${this.#a(t)}
@@ -505,6 +576,20 @@ var b = () => {
               ${f(t.item.validItemLevels, (e) => e, (e) => o`<option value=${e}>${e}</option>`)}
             </select>
           </label>
+          <label>
+            <span>Applied tempers</span>
+            <input
+              type="number"
+              min="0"
+              max=${r}
+              .value=${String(e.appliedTempers)}
+              @change=${(t) => this.#h({
+			...e,
+			appliedTempers: Math.max(0, Math.min(r, Math.round(Number(t.currentTarget.value))))
+		}, "tempers")}
+            />
+            <small class="control-hint">Maximum ${r}</small>
+          </label>
           <label>
             <span>Rarity</span>
             <select
@@ -640,21 +725,18 @@ var b = () => {
       </aside>
     `;
 	}
-	#o(e, t) {
-		let n = p(e, {
-			size: "200",
-			type: "hero-item"
-		});
-		if (!n || !this.resolveAssetUrl) return t.slice(0, 2);
-		let r;
+	#o(e, t, n, r) {
+		let i = y(e, t, n, "200");
+		if (!i || !this.resolveAssetUrl) return r.slice(0, 2);
+		let a;
 		try {
-			r = this.resolveAssetUrl(n);
+			a = this.resolveAssetUrl(i);
 		} catch {
-			return t.slice(0, 2);
+			return r.slice(0, 2);
 		}
 		return o`
       <img
-        src=${r}
+        src=${a}
         alt=""
         @error=${(e) => {
 			e.currentTarget.hidden = !0;
@@ -680,6 +762,7 @@ var b = () => {
 			itemId: e,
 			itemLevel: n,
 			rarity: r,
+			appliedTempers: 0,
 			rolledModifiers: [],
 			gems: [],
 			traits: [],
@@ -768,10 +851,10 @@ var b = () => {
 	}
 	#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`
+e([l({ attribute: !1 })], E.prototype, "data", void 0), e([l({ attribute: !1 })], E.prototype, "build", void 0), e([l({ type: String })], E.prototype, "positionId", void 0), e([l({ attribute: !1 })], E.prototype, "resolveAssetUrl", void 0), e([d()], E.prototype, "_query", void 0), E = e([c("fellowship-item-workbench")], E);
+var D = () => {
+	customElements.get("fellowship-item-workbench") || customElements.define("fellowship-item-workbench", E);
+}, O = a`
   :host {
     display: block;
     min-width: 0;
@@ -813,6 +896,34 @@ var C = () => {
     text-align: left;
   }
 
+  .talent-points > span {
+    display: block;
+    margin-bottom: 4px;
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .talent-points {
+    grid-column: 1 / -1;
+  }
+
+  .talent-points input {
+    width: 100%;
+    min-height: 44px;
+    padding-inline: 10px;
+    border: 2px solid var(--_fellowship-poster-plum);
+    border-radius: var(--_fellowship-poster-radius);
+    background: var(--_fellowship-poster-white);
+    color: var(--_fellowship-poster-plum);
+  }
+
+  .talent-points input:focus-visible {
+    outline: 4px solid var(--_fellowship-poster-focus);
+    outline-offset: 2px;
+  }
+
   .hero-image {
     display: grid;
     place-items: center;
@@ -1061,10 +1172,14 @@ var C = () => {
     }
 
     .hero {
-      grid-template-columns: 92px minmax(0, max-content);
+      grid-template-columns: 92px minmax(0, max-content) minmax(150px, 180px);
       margin-bottom: 20px;
     }
 
+    .talent-points {
+      grid-column: auto;
+    }
+
     .hero-image {
       width: 92px;
       height: 92px;
@@ -1081,7 +1196,7 @@ var C = () => {
         minmax(142px, 0.64fr)
         minmax(390px, 1.9fr)
         minmax(142px, 0.64fr)
-        minmax(190px, 0.86fr);
+        minmax(220px, 1fr);
       align-items: start;
       gap: 12px;
     }
@@ -1199,6 +1314,10 @@ var C = () => {
       margin-bottom: 10px;
     }
 
+    .talent-points {
+      grid-column: 1 / -1;
+    }
+
     .hero-image {
       width: 52px;
       height: 52px;
@@ -1231,39 +1350,30 @@ var C = () => {
       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) => {
+`, k = "button:not([disabled]), input:not([disabled]), select:not([disabled]), [href], [tabindex]:not([tabindex=\"-1\"])", A = (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));
+	for (let n of e.children) n instanceof HTMLElement && n.matches(k) && t.push(n), n.shadowRoot && t.push(...A(n.shadowRoot)), t.push(...A(n));
 	return t;
-}, k = (e) => {
+}, j = (e) => {
 	let t = e.activeElement;
 	for (; t?.shadowRoot?.activeElement;) t = t.shadowRoot.activeElement;
 	return t;
 };
-b(), C();
-var A = class extends i {
+w(), D();
+var M = 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) => {
+		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._leftPositionIds = [], this._rightPositionIds = [], this._mobilePositionIds = [], this.#e = null, this.#t = null, this.#n = null, this.#r = null, this.#i = null, this.#a = !1, this.#o = /* @__PURE__ */ new Set(), this.#m = (e) => {
+			if (!this.data || !this.build) return;
+			let t = Math.max(0, Math.min(this.data.maxAllocatedTalentPoints, Math.round(Number(e.currentTarget.value))));
+			this.#v({
+				...this.build,
+				allocatedTalentPoints: t
+			}, "talent-points", null);
+		}, this.#h = (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) => {
+		}, this.#g = (e) => {
 			if (e.stopPropagation(), !this.data || !this.build || !this._selectedPositionId) return;
 			let t = {
 				...this.build,
@@ -1271,10 +1381,10 @@ var A = class extends i {
 					...t,
 					item: e.detail.item
 				} : t)
-			}, n = _(this.data, t), r = v(this.data, n.build);
+			}, n = v(this.data, t), r = x(this.data, n.build);
 			if (!r.valid || !r.build) {
 				let e = r.issues.find(({ severity: e }) => e === "error");
-				this.#_({
+				this.#y({
 					code: e?.code ?? "invalid-change",
 					message: e?.message ?? "That item choice is not valid.",
 					recoverable: !0
@@ -1282,29 +1392,29 @@ var A = class extends i {
 				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._announcement = i > 0 ? `${i} incompatible item choice${i === 1 ? " was" : "s were"} reset.` : "Build updated.", this.#v(r.build, e.detail.source, this._selectedPositionId);
+		}, this.#b = () => {
 			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) => {
+		}, this.#x = (e) => {
+			e.key !== "Escape" || !this._compact || !this._sheetOpen || (e.preventDefault(), this.#b());
+		}, this.#S = (e) => {
 			if (!this._compact || !this._sheetOpen) return;
 			if (e.key === "Escape") {
-				e.preventDefault(), this.#v();
+				e.preventDefault(), this.#b();
 				return;
 			}
 			if (e.key !== "Tab" || !this._workbenchPanel) return;
-			let t = O(this._workbenchPanel), n = t[0], r = t.at(-1), i = k(this.shadowRoot);
+			let t = A(this._workbenchPanel), n = t[0], r = t.at(-1), i = j(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) => {
+		}, this.#C = (e) => {
 			if (!["ArrowLeft", "ArrowRight"].includes(e.key)) return;
 			e.preventDefault();
 			let t = [
@@ -1315,12 +1425,12 @@ var A = class extends i {
 			this._tab = t[(r + n + t.length) % t.length] ?? "gear", this.updateComplete.then(() => {
 				(this.shadowRoot?.querySelector(".tab[aria-selected=\"true\"]"))?.focus();
 			});
-		}, this.#C = (e) => {
+		}, this.#T = (e) => {
 			e.currentTarget.hidden = !0;
 		};
 	}
 	static {
-		this.styles = [n, w];
+		this.styles = [n, O];
 	}
 	#e;
 	#t;
@@ -1335,19 +1445,23 @@ var A = class extends i {
 			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);
+		}), this.#e.observe(this), this.ownerDocument.addEventListener("keydown", this.#x);
 	}
 	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();
+		this.#e?.disconnect(), this.ownerDocument.removeEventListener("keydown", this.#x), 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));
+		if (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);
+			let e = [...this.data?.positions ?? []].sort((e, t) => e.order - t.order);
+			this._leftPositionIds = e.slice(0, 7).map(({ id: e }) => e), this._rightPositionIds = e.slice(7).map(({ id: e }) => e), this._mobilePositionIds = e.map(({ id: e }) => e);
+		}
 	}
 	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.#_({
+			t && !this.#a ? (this.#a = !0, this.#y({
 				code: "asset-resolver-missing",
 				message: "A resolveAssetUrl callback is required to render Fellowship images.",
 				recoverable: !0
@@ -1390,18 +1504,28 @@ var A = class extends i {
 		let t = p(e.hero.images, {
 			size: "200",
 			type: "hero"
-		}), n = t ? this.#S(t) : null;
+		}), n = t ? this.#w(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)}
+            ${n ? o`<img src=${n} alt="" @error=${this.#T} />` : (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>
+          <label class="talent-points">
+            <span>Allocated talent points</span>
+            <input
+              type="number"
+              min="0"
+              max=${this.data.maxAllocatedTalentPoints}
+              .value=${String(this.build.allocatedTalentPoints)}
+              @change=${this.#m}
+            />
+          </label>
         </header>
 
         ${this.#s()}
@@ -1419,11 +1543,11 @@ var A = class extends i {
           >
             <div class="slot-grid">
               <div class="slot-rail left-rail">
-                ${this.#c(this._compact ? this.data.positions.map(({ id: e }) => e) : T)}
+                ${this.#c(this._compact ? this._mobilePositionIds : this._leftPositionIds)}
               </div>
               ${this._compact ? s : o`
                     <div class="slot-rail right-rail">
-                      ${this.#c(E)}
+                      ${this.#c(this._rightPositionIds)}
                     </div>
                   `}
             </div>
@@ -1445,11 +1569,11 @@ var A = class extends i {
 	#s() {
 		return o`
       <div class="tabs" role="tablist" aria-label="Planner workspace">
-        ${[
+        ${f([
 			["traits", "Traits & gems"],
 			["gear", "Gear"],
 			["bonuses", "Bonuses"]
-		].map(([e, t]) => o`
+		], ([e]) => e, ([e, t]) => o`
             <button
               class="tab"
               type="button"
@@ -1459,7 +1583,7 @@ var A = class extends i {
               @click=${() => {
 			this._tab = e;
 		}}
-              @keydown=${this.#x}
+              @keydown=${this.#C}
             >
               ${t}
             </button>
@@ -1468,21 +1592,21 @@ var A = class extends i {
     `;
 	}
 	#c(e) {
-		return !this.data || !this.build ? o`` : o`
+		if (!this.data || !this.build) return o``;
+		let t = this.data.heroById.get(this.build.heroId) ?? null;
+		return 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;
+			let n = this.data?.positions.find(({ id: t }) => t === e) ?? null, r = this.build?.positions.find((t) => t.positionId === e) ?? null, i = r?.item ? this.data?.itemById.get(r.item.itemId) ?? null : null, a = i && t && r?.item ? y(i, t, r.item.rarity, "200") : null;
 			return o`
             <fellowship-gear-position
-              .position=${t}
-              .item=${r}
-              .itemBuild=${n?.item ?? null}
+              .position=${n}
+              .item=${i}
+              .itemBuild=${r?.item ?? null}
+              .itemName=${i && t ? b(i, t) : null}
               .selected=${e === this._selectedPositionId}
-              .imageUrl=${i ? this.#S(i) : null}
-              .tooltipDetails=${this.#u(e, n?.item ?? null)}
-              @fellowship-gear-position-select=${this.#p}
+              .imageUrl=${a ? this.#w(a) : null}
+              .tooltipDetails=${this.#u(e, r?.item ?? null)}
+              @fellowship-gear-position-select=${this.#h}
             ></fellowship-gear-position>
           `;
 		})}
@@ -1497,12 +1621,12 @@ var A = class extends i {
         aria-modal=${this._compact ? "true" : s}
         aria-label="Item workbench"
         tabindex=${this._compact ? "-1" : s}
-        @keydown=${this.#b}
-        @fellowship-workbench-change=${this.#m}
+        @keydown=${this.#S}
+        @fellowship-workbench-change=${this.#g}
       >
         <header class="sheet-header">
           <strong>Configure item</strong>
-          <button class="sheet-close" type="button" @click=${this.#v}>Close</button>
+          <button class="sheet-close" type="button" @click=${this.#b}>Close</button>
         </header>
         <fellowship-item-workbench
           .data=${this.data}
@@ -1553,7 +1677,7 @@ var A = class extends i {
       <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`
+        ${e.size === 0 ? o`<li class="summary-row"><span>No traits selected</span></li>` : f([...e], ([e]) => e, ([e, t]) => o`
                 <li class="summary-row">
                   <span>${this.data?.traitById.get(e)?.name ?? e}</span>
                   <strong>R${t}</strong>
@@ -1562,7 +1686,7 @@ var A = class extends i {
       </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`
+        ${t.size === 0 ? o`<li class="summary-row"><span>No gems socketed</span></li>` : f([...t], ([e]) => e, ([e, t]) => o`
                 <li class="summary-row">
                   <span>${e} × ${t.count}</span>
                   <strong>${t.power}</strong>
@@ -1582,10 +1706,10 @@ var A = class extends i {
 		}
 		return o`
       <span class="section-label">Build output</span>
-      <h2>Bonuses & totals</h2>
+      <h2>Bonuses & stats</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`
+        ${e.size === 0 ? o`<li class="summary-row"><span>No blessings selected</span></li>` : f([...e], ([e]) => e, ([e, t]) => o`
                 <li class="summary-row">
                   <span>${this.data?.blessingById.get(e)?.name ?? e}</span>
                   <strong>R${t}</strong>
@@ -1594,7 +1718,7 @@ var A = class extends i {
       </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]) => {
+        ${t.size === 0 ? o`<li class="summary-row"><span>No set pieces equipped</span></li>` : f([...t], ([e]) => e, ([e, t]) => {
 			let n = this.data?.setBonuses.find(({ id: t }) => t === e);
 			return o`
                 <li class="summary-row">
@@ -1604,20 +1728,29 @@ var A = class extends i {
               `;
 		})}
       </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>
+      <div class="hero-sheet" aria-label="Hero stats">
+        ${f(this._calculation.heroSheet.sections, (e) => e.id, (e) => o`
+            <section class="hero-sheet-section">
+              <h3>${e.label}</h3>
+              <ul class="breakdown">
+                ${f(e.rows, (e) => e.id, (e) => o`
+                    <li class="total-row">
+                      <span>${e.label}</span>
+                      <strong>${this.#p(e)}</strong>
+                    </li>
+                  `)}
+              </ul>
+            </section>
+          `)}
+      </div>
       ${this._calculation.conditionalMechanics.length > 0 ? o`
             <h3>Conditional</h3>
-            ${this._calculation.conditionalMechanics.map((e) => o`
+            ${f(this._calculation.conditionalMechanics, (e) => e.id, (e) => o`
                 <label class="condition">
                   <input
                     type="checkbox"
                     .checked=${e.applied}
-                    @change=${() => this.#h(e.id)}
+                    @change=${() => this.#_(e.id)}
                   />
                   <span>${e.sourceName} · Apply</span>
                 </label>
@@ -1625,7 +1758,7 @@ var A = class extends i {
           ` : 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`
+        ${this._calculation.unsupportedContributions.length === 0 ? o`<li class="unsupported-row"><span>None</span></li>` : f(this._calculation.unsupportedContributions, (e) => e.id, (e) => o`
                 <li class="unsupported-row">
                   <span>${e.sourceName}</span>
                   <span class="unsupported-code">${e.reasonCode.replaceAll("-", " ")}</span>
@@ -1634,17 +1767,25 @@ var A = class extends i {
       </ul>
     `;
 	}
-	#p;
+	#p(e) {
+		return new Intl.NumberFormat("en-US", {
+			style: e.displayKind === "percentage" ? "percent" : "decimal",
+			minimumFractionDigits: e.decimals,
+			maximumFractionDigits: e.decimals
+		}).format(e.value);
+	}
 	#m;
-	#h(e) {
+	#h;
+	#g;
+	#_(e) {
 		if (!this.build) return;
 		let t = new Set(this.build.disabledConditionalContributionIds);
-		t.has(e) ? t.delete(e) : t.add(e), this.#g({
+		t.has(e) ? t.delete(e) : t.add(e), this.#v({
 			...this.build,
 			disabledConditionalContributionIds: [...t].sort()
 		}, "conditional", null);
 	}
-	#g(e, t, n) {
+	#v(e, t, n) {
 		this.dispatchEvent(new CustomEvent("fellowship-gear-build-change", {
 			bubbles: !0,
 			composed: !0,
@@ -1655,7 +1796,7 @@ var A = class extends i {
 			}
 		}));
 	}
-	#_(e) {
+	#y(e) {
 		this.dispatchEvent(new CustomEvent("fellowship-gear-planner-error", {
 			bubbles: !0,
 			composed: !0,
@@ -1665,17 +1806,17 @@ var A = class extends i {
 			}
 		}));
 	}
-	#v;
-	#y;
 	#b;
 	#x;
-	#S(e) {
+	#S;
+	#C;
+	#w(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.#_({
+				this.isConnected && this.#y({
 					code: "asset-url-error",
 					message: `Could not resolve ${e.path}: ${String(t)}.`,
 					recoverable: !0
@@ -1683,14 +1824,14 @@ var A = class extends i {
 			})), null;
 		}
 	}
-	#C;
+	#T;
 };
-e([l({ attribute: !1 })], A.prototype, "data", void 0), e([l({ attribute: !1 })], A.prototype, "build", void 0), e([l({
+e([l({ attribute: !1 })], M.prototype, "data", void 0), e([l({ attribute: !1 })], M.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);
+})], M.prototype, "loading", void 0), e([l({ attribute: !1 })], M.prototype, "error", void 0), e([l({ attribute: !1 })], M.prototype, "resolveAssetUrl", void 0), e([d()], M.prototype, "_selectedPositionId", void 0), e([d()], M.prototype, "_tab", void 0), e([d()], M.prototype, "_sheetOpen", void 0), e([d()], M.prototype, "_compact", void 0), e([d()], M.prototype, "_announcement", void 0), e([d()], M.prototype, "_calculation", void 0), e([u(".workbench-panel")], M.prototype, "_workbenchPanel", void 0), M = e([c("fellowship-gear-planner")], M);
+var N = () => {
+	customElements.get("fellowship-gear-planner") || customElements.define("fellowship-gear-planner", M);
 };
 //#endregion
-export { j as n, A as t };
+export { N as n, M as t };

package/dist/gear-planner/gear-planner.d.ts

@@ -21,6 +21,9 @@ export declare class FellowshipGearPlannerElement extends LitElement {
     private _compact;
     private _announcement;
     private _calculation;
+    private _leftPositionIds;
+    private _rightPositionIds;
+    private _mobilePositionIds;
     private _workbenchPanel?;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/gear-planner/gear-position.d.ts

@@ -2,10 +2,11 @@ import type { GearPlannerItem, GearPlannerItemBuild, GearPlannerPosition } from
 import { LitElement, type TemplateResult } from "lit";
 export declare class FellowshipGearPositionElement extends LitElement {
     #private;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     position: GearPlannerPosition | null;
     item: GearPlannerItem | null;
     itemBuild: GearPlannerItemBuild | null;
+    itemName: string | null;
     selected: boolean;
     imageUrl: string | null;
     tooltipDetails: readonly string[];

package/dist/gear-planner/rarity-thumbnail.styles.d.ts

@@ -0,0 +1 @@
+export declare const rarityThumbnailStyles: import("lit").CSSResult;

package/dist/gear-planner/types.d.ts

@@ -4,7 +4,7 @@ export interface GearPlannerPresentationError {
     readonly message: string;
     readonly recoverable?: boolean;
 }
-export type GearPlannerChangeSource = "item" | "item-level" | "rarity" | "modifier" | "gem" | "trait" | "blessing" | "conditional";
+export type GearPlannerChangeSource = "item" | "item-level" | "rarity" | "tempers" | "talent-points" | "modifier" | "gem" | "trait" | "blessing" | "conditional";
 export interface GearPlannerBuildChangeDetail {
     readonly build: GearPlannerBuild;
     readonly source: GearPlannerChangeSource;

package/dist/gear-planner.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "./chunks/gear-planner-Bgt77Ovf.js";
+import { n as e, t } from "./chunks/gear-planner-C-ZTX8S2.js";
 //#region src/gear-planner/index.ts
 e();
 //#endregion

package/dist/index.js

@@ -7,7 +7,7 @@ import "./dungeon-cast-browser.js";
 import { n as C, o as w, r as T, s as E, t as D } from "./chunks/tooltip-C3SSJw-t.js";
 import "./talent-calculator.js";
 import "./tooltip.js";
-import { n as O, t as k } from "./chunks/gear-planner-Bgt77Ovf.js";
+import { n as O, t as k } from "./chunks/gear-planner-C-ZTX8S2.js";
 import "./gear-planner.js";
 import { createPackageFellowshipDataClient as A } from "@crockery/fellowship-data/client";
 export { e as FellowshipDataError, d as FellowshipDungeonCastBrowserElement, o as FellowshipDungeonMapElement, k as FellowshipGearPlannerElement, x as FellowshipTalentCalculatorElement, D as FellowshipTooltipElement, h as MAX_TALENT_POINTS, a as ViewportController, T as calculateTooltipPosition, f as canSelectTalent, u as castIdentityKey, c as createDungeonCastBrowserModel, n as createDungeonMapRenderModel, s as createPackageFellowshipCastDataSource, A as createPackageFellowshipDataClient, i as createPackageFellowshipDataSource, m as createPackageFellowshipTalentDataSource, g as createTalentCalculatorRenderModel, v as createTalentCalculatorSelectionState, l as defineFellowshipDungeonCastBrowser, r as defineFellowshipDungeonMap, O as defineFellowshipGearPlanner, _ as defineFellowshipTalentCalculator, C as defineFellowshipTooltip, t as humanizeMapLabel, b as normalizeSelectedTalentIds, p as normalizeTalentPoints, w as resolveFellowshipRichText, E as stripFellowshipRichText, S as talentRowLabel, y as talentSlotName };

package/dist/react/gear-planner.js

@@ -1,4 +1,4 @@
-import { n as e, t } from "../chunks/gear-planner-Bgt77Ovf.js";
+import { n as e, t } from "../chunks/gear-planner-C-ZTX8S2.js";
 import { createComponent as n } from "@lit/react";
 import r, { forwardRef as i } from "react";
 import { jsx as a } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crockery/fellowship-components",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Lit web components for rendering Fellowship game data.",
   "repository": {
     "type": "git",
@@ -112,7 +112,7 @@
   "dependencies": {
     "@lit/react": "^1.0.8",
     "lit": "^3.3.3",
-    "@crockery/fellowship-data": "^3.0.0"
+    "@crockery/fellowship-data": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=18 <20",
@@ -155,8 +155,6 @@
     "test": "pnpm test:unit && pnpm test:browser",
     "test:unit": "vitest run --project unit",
     "test:browser": "vitest run --project browser",
-    "test:browser:smoke": "FELLOWSHIP_TEST_BROWSERS=smoke vitest run --project browser -t '\\[smoke\\]'",
-    "test:browser:all": "FELLOWSHIP_TEST_BROWSERS=all vitest run --project browser",
     "ladle": "ladle serve",
     "ladle:build": "ladle build",
     "package:lint": "publint --strict --pack npm && attw --pack . --profile esm-only",

package/src/gear-planner/README.md

@@ -37,7 +37,7 @@ At 1200px and above, the component renders summary and slot rails around a
 persistent workbench. Below 1200px it uses Traits & gems, Gear, and Bonuses tabs,
 with configuration in a full-height focus-contained editor. Item choices are
 filtered by the Data package, all changes are immediate, and unsupported
-mechanics remain visibly excluded from exact totals.
+mechanics remain visibly separated from the generated in-game hero sheet.
 
 The planner uses the public `--fellowship-poster-*` Dungeon Poster tokens and
 bundled Syne/DM Mono faces. It maintains 44px controls, visible focus, reduced