@crockery/fellowship-components 2.0.0 → 2.1.0

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

@@ -5,8 +5,412 @@ import { customElement as c, property as l, query as u, state as d } from "lit/d
 import { repeat as f } from "lit/directives/repeat.js";
 import { findImage as p } from "@crockery/fellowship-data";
 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
+//#region src/gear-planner/equipment-selector.styles.ts
 var S = a`
+  :host {
+    position: fixed;
+    z-index: 1002;
+    inset: auto;
+    left: var(--_selector-x, 12px);
+    top: var(--_selector-y, 12px);
+    display: grid;
+    width: min(400px, calc(100vw - 24px));
+    max-height: min(680px, calc(100dvh - 24px));
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    border: 3px solid var(--_fellowship-poster-plum);
+    border-radius: var(--_fellowship-poster-radius);
+    background: var(--_fellowship-poster-cream);
+    color: var(--_fellowship-poster-plum);
+    box-shadow: 6px 6px 0 var(--_fellowship-poster-yellow);
+    font: 400 12px/1.45 var(--_fellowship-poster-mono);
+    overscroll-behavior: contain;
+  }
+
+  :host(:focus-visible) {
+    outline: 4px solid var(--_fellowship-poster-focus);
+    outline-offset: -7px;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  button,
+  input {
+    font: inherit;
+  }
+
+  .selector {
+    display: grid;
+    grid-template-rows: auto auto minmax(0, 1fr);
+    min-height: 0;
+    max-height: inherit;
+  }
+
+  .actions {
+    position: relative;
+    z-index: 2;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
+    gap: 8px;
+    padding: 10px;
+    border-bottom: 3px solid var(--_fellowship-poster-plum);
+    background: var(--_fellowship-poster-cream);
+  }
+
+  .action,
+  .chip,
+  .candidate {
+    border: 2px solid var(--_fellowship-poster-plum);
+    border-radius: var(--_fellowship-poster-radius);
+    color: var(--_fellowship-poster-plum);
+    cursor: pointer;
+    transition:
+      background var(--_fellowship-poster-motion) var(--_fellowship-poster-ease),
+      color var(--_fellowship-poster-motion) var(--_fellowship-poster-ease),
+      box-shadow var(--_fellowship-poster-motion) var(--_fellowship-poster-ease),
+      transform var(--_fellowship-poster-motion) var(--_fellowship-poster-ease);
+  }
+
+  .action {
+    min-width: 0;
+    min-height: 44px;
+    padding: 8px 10px;
+    background: var(--_fellowship-poster-white);
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+
+  .action-primary {
+    background: var(--_fellowship-poster-yellow);
+    font-family: var(--_fellowship-poster-display);
+    font-weight: 800;
+  }
+
+  .action-expand {
+    display: none;
+    background: var(--_fellowship-poster-violet);
+    color: var(--_fellowship-poster-cream);
+  }
+
+  .action:hover:not(:disabled),
+  .chip:hover,
+  .candidate:hover {
+    box-shadow: 3px 3px 0 var(--_fellowship-poster-violet);
+    transform: translate(-1px, -1px);
+  }
+
+  .action:active:not(:disabled),
+  .chip:active,
+  .candidate:active {
+    box-shadow: none;
+    transform: translate(0, 0);
+  }
+
+  .action:disabled {
+    cursor: not-allowed;
+    opacity: 0.42;
+  }
+
+  .search-and-filters {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    gap: 8px;
+    padding: 10px;
+    border-bottom: 2px solid var(--_fellowship-poster-plum);
+    background: var(--_fellowship-poster-white);
+  }
+
+  .search {
+    display: block;
+  }
+
+  .search input {
+    width: 100%;
+    min-height: 44px;
+    padding: 9px 12px;
+    border: 2px solid var(--_fellowship-poster-plum);
+    border-radius: var(--_fellowship-poster-radius);
+    background: var(--_fellowship-poster-cream);
+    color: var(--_fellowship-poster-plum);
+    font-weight: 500;
+  }
+
+  .chips {
+    display: flex;
+    gap: 6px;
+    min-width: 0;
+    margin: 0;
+    padding: 0 2px 3px 0;
+    overflow-x: auto;
+    border: 0;
+    scrollbar-width: thin;
+  }
+
+  .chip {
+    flex: 0 0 auto;
+    min-height: 44px;
+    padding: 7px 12px;
+    background: var(--_fellowship-poster-cream);
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .chip[aria-pressed="true"] {
+    background: var(--_fellowship-poster-violet);
+    color: var(--_fellowship-poster-cream);
+  }
+
+  .candidate-list {
+    display: grid;
+    align-content: start;
+    min-height: 0;
+    overflow: auto;
+    padding: 6px;
+    background: var(--_fellowship-poster-cream);
+    scrollbar-width: thin;
+  }
+
+  .candidate {
+    display: grid;
+    grid-template-columns: 50px minmax(0, 1fr) auto;
+    gap: 3px 10px;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    min-height: 72px;
+    padding: 8px;
+    border-width: 0 0 2px;
+    background: var(--_fellowship-poster-cream);
+    text-align: left;
+  }
+
+  .candidate:last-child {
+    border-bottom: 0;
+  }
+
+  .candidate[aria-pressed="true"] {
+    background: color-mix(
+      in oklch,
+      var(--_fellowship-poster-yellow) 52%,
+      var(--_fellowship-poster-cream)
+    );
+  }
+
+  .choice-image,
+  .choice-image img {
+    width: 48px;
+    height: 48px;
+  }
+
+  .choice-image {
+    position: relative;
+    grid-row: 1 / span 2;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    border: 2px solid var(--_fellowship-rarity-border, var(--_fellowship-poster-plum));
+    background: var(--_fellowship-rarity-start, var(--_fellowship-poster-violet));
+    color: var(--_fellowship-poster-cream);
+    font: 800 13px/1 var(--_fellowship-poster-display);
+    text-transform: uppercase;
+  }
+
+  .choice-image img {
+    position: absolute;
+    inset: 0;
+    object-fit: cover;
+  }
+
+  .candidate-copy {
+    min-width: 0;
+  }
+
+  .candidate-name {
+    display: block;
+    overflow: hidden;
+    font: 800 14px/1.05 var(--_fellowship-poster-display);
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+
+  .candidate-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-top: 5px;
+  }
+
+  .tag {
+    padding: 2px 5px;
+    background: var(--_fellowship-poster-plum);
+    color: var(--_fellowship-poster-cream);
+    font-size: 8px;
+    font-weight: 500;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  .candidate-delta {
+    align-self: start;
+    min-width: max-content;
+    padding: 4px 6px;
+    background: var(--_fellowship-poster-yellow);
+    font-size: 10px;
+    font-weight: 500;
+  }
+
+  .candidate[aria-pressed="true"] .candidate-delta {
+    background: var(--_fellowship-poster-violet);
+    color: var(--_fellowship-poster-cream);
+  }
+
+  .candidate-stats {
+    grid-column: 2 / 4;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3px 8px;
+    min-width: 0;
+    color: color-mix(
+      in oklch,
+      var(--_fellowship-poster-plum) 72%,
+      var(--_fellowship-poster-cream)
+    );
+    font-size: 9px;
+  }
+
+  .partial {
+    color: var(--_fellowship-poster-violet);
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+
+  .no-results {
+    display: grid;
+    min-height: 180px;
+    place-items: center;
+    padding: 24px;
+    border: 2px dashed var(--_fellowship-poster-plum);
+    text-align: center;
+  }
+
+  .no-results strong {
+    display: block;
+    margin-bottom: 6px;
+    font: 800 20px/1 var(--_fellowship-poster-display);
+    text-transform: uppercase;
+  }
+
+  .action:focus-visible,
+  .chip:focus-visible,
+  .candidate:focus-visible,
+  .search input:focus-visible {
+    position: relative;
+    z-index: 3;
+    outline: 4px solid var(--_fellowship-poster-focus);
+    outline-offset: 2px;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host([compact]) {
+    inset: auto 0 0;
+    width: 100%;
+    max-width: none;
+    height: 68dvh;
+    max-height: calc(100dvh - env(safe-area-inset-top));
+    border-width: 3px 0 0;
+    box-shadow: 0 -6px 0 var(--_fellowship-poster-yellow);
+    transition: height var(--_fellowship-poster-motion) var(--_fellowship-poster-ease);
+  }
+
+  :host([compact][expanded]) {
+    height: 92dvh;
+  }
+
+  :host([compact]) .actions {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) auto;
+    padding-top: 12px;
+  }
+
+  :host([compact]) .action-expand {
+    display: block;
+    min-width: 72px;
+  }
+
+  :host([compact]) .candidate-list {
+    padding-bottom: max(12px, env(safe-area-inset-bottom));
+  }
+
+  @media (max-width: 430px) {
+    .candidate {
+      grid-template-columns: 46px minmax(0, 1fr) auto;
+      gap-inline: 8px;
+      min-height: 68px;
+      padding-inline: 6px;
+    }
+
+    .choice-image,
+    .choice-image img {
+      width: 44px;
+      height: 44px;
+    }
+
+    .candidate-name {
+      font-size: 13px;
+    }
+
+    .candidate-delta {
+      font-size: 9px;
+    }
+
+    :host([compact]) .actions {
+      gap: 6px;
+      padding-inline: 8px;
+    }
+
+    .action {
+      padding-inline: 7px;
+      font-size: 10px;
+    }
+
+    :host([compact]) .action-expand {
+      min-width: 64px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :host,
+    .action,
+    .chip,
+    .candidate {
+      transition-duration: 0.01ms !important;
+    }
+
+    .action:hover:not(:disabled),
+    .chip:hover,
+    .candidate:hover {
+      transform: none;
+    }
+  }
+`, C = a`
   [data-rarity="Common"] {
     --_fellowship-rarity-start: var(--fellowship-rarity-common-start, #545456);
     --_fellowship-rarity-end: var(--fellowship-rarity-common-end, #909291);
@@ -57,11 +461,356 @@ var S = a`
       var(--_fellowship-rarity-end)
     );
   }
-`;
+`, w = {
+	bubbles: !0,
+	composed: !0
+}, T = [
+	{
+		id: "critical-strike",
+		stat: "CritChance",
+		label: "Crit"
+	},
+	{
+		id: "expertise",
+		stat: "Expertise",
+		label: "Expertise"
+	},
+	{
+		id: "haste",
+		stat: "Haste",
+		label: "Haste"
+	},
+	{
+		id: "spirit",
+		stat: "Spirit",
+		label: "Spirit"
+	},
+	{
+		id: "armor",
+		stat: "Armor",
+		label: "Armor"
+	}
+], E = (e) => {
+	let t = e.validItemLevels.at(-1), n = e.validRarities.at(-1);
+	return t === void 0 || n === void 0 ? null : {
+		itemId: e.item.id,
+		itemLevel: t,
+		rarity: n,
+		appliedTempers: 0,
+		rolledModifiers: [],
+		gems: [],
+		traits: [],
+		blessings: []
+	};
+}, D = (e, t, n) => ({
+	...e,
+	positions: e.positions.map((e) => e.positionId === t ? {
+		...e,
+		item: n
+	} : e)
+}), O = (e) => new Map(e.heroSheet.sections.flatMap((e) => e.rows.map((e) => [e.id, e]))), k = (e, t = 0) => {
+	let n = Number(e.toFixed(t));
+	return `${n > 0 ? "+" : ""}${new Intl.NumberFormat("en-US", {
+		minimumFractionDigits: t,
+		maximumFractionDigits: t
+	}).format(n)}`;
+}, A = (e, t) => e.displayKind === "percentage" ? `${e.label} ${k(t * 100, e.decimals)}%` : `${e.label} ${k(t, e.decimals)}`, j = (e, t, n, r) => {
+	let i = [];
+	(e.setBonusIdsByHero[n.hero.id] ?? []).length > 0 && i.push({
+		id: "set",
+		label: "Set"
+	}), e.maxEquipped === 1 && i.push({
+		id: "unique",
+		label: "Unique"
+	});
+	let a = new Set(t.fixedItemStats.filter((e) => e.positionId === r && e.stat).map((e) => e.stat));
+	for (let e of T) a.has(e.stat) && i.push({
+		id: e.id,
+		label: e.label
+	});
+	return e.item.linkedAbilityIds.length > 0 && i.push({
+		id: "effect",
+		label: "Effect"
+	}), e.relicIdsByHero[n.hero.id] && i.push({
+		id: "relic",
+		label: "Relic"
+	}), i;
+}, M = (e, t) => {
+	let n = new Map(e.map((e) => [e.id, e]));
+	return [
+		n.get("set"),
+		n.get("unique"),
+		...T.map((e) => n.get(e.id)),
+		n.get("effect"),
+		n.get("relic")
+	].filter((e) => !!e).map((e) => e.label).concat(t).slice(0, 2);
+}, N = (e, t, n) => {
+	let r = e.heroById.get(t.heroId), i = e.positions.find((e) => e.id === n);
+	if (!r || !i) return [];
+	let a = t.positions.find((e) => e.positionId === n)?.item ?? null, o = m(e, t), s = O(o), c = s.get("power-score")?.value ?? 0, l = o.unsupportedContributions.some((e) => e.positionId === n), u = [
+		r.primaryStat?.toLocaleLowerCase(),
+		"critical-strike",
+		"expertise",
+		"haste",
+		"spirit",
+		"armor"
+	].filter((e) => !!e);
+	return _(e, t, n).flatMap((d) => {
+		let f = d.item.id === a?.itemId, p = f ? a : E(d);
+		if (!p) return [];
+		let h = f ? t : D(t, n, p), g = f ? o : m(e, h), _ = O(g), v = j(d, g, r, n), y = u.flatMap((e) => {
+			let t = _.get(e), n = s.get(e);
+			if (!t) return [];
+			let r = t.value - (n?.value ?? 0);
+			return Math.abs(r) > 1e-4 ? [A(t, r)] : [];
+		});
+		return [{
+			item: d,
+			itemBuild: p,
+			name: b(d, r),
+			rarity: p.rarity,
+			features: v,
+			tags: M(v, i.itemType),
+			powerDelta: (_.get("power-score")?.value ?? 0) - c,
+			statDeltas: y.slice(0, 2),
+			partial: l || g.unsupportedContributions.some((e) => e.positionId === n),
+			equipped: f
+		}];
+	});
+}, P = (e) => {
+	let t = /* @__PURE__ */ new Map();
+	for (let n of e) for (let e of n.features) {
+		let n = t.get(e.id) ?? {
+			label: e.label,
+			count: 0
+		};
+		t.set(e.id, {
+			...n,
+			count: n.count + 1
+		});
+	}
+	let n = [{
+		id: "all",
+		label: "All"
+	}];
+	for (let e of ["set", "unique"]) {
+		let r = t.get(e);
+		r && n.push({
+			id: e,
+			label: r.label
+		});
+	}
+	let r = [
+		...T.map((e) => e.id),
+		"effect",
+		"relic"
+	];
+	return n.push(...r.flatMap((n) => {
+		let r = t.get(n);
+		return r && r.count < e.length ? [{
+			id: n,
+			label: r.label
+		}] : [];
+	}).slice(0, 2)), n;
+}, F = class extends i {
+	constructor(...e) {
+		super(...e), this.data = null, this.build = null, this.positionId = null, this.resolveAssetUrl = null, this.compact = !1, this.expanded = !1, this._query = "", this._filterId = "all", this._candidates = [], this._filters = [{
+			id: "all",
+			label: "All"
+		}], this._visibleCandidates = [], this.#n = () => {
+			this.dispatchEvent(new CustomEvent("fellowship-equipment-selector-configure", w));
+		}, this.#r = () => {
+			this.dispatchEvent(new CustomEvent("fellowship-equipment-selector-unequip", w));
+		}, this.#i = () => {
+			this.expanded = !this.expanded;
+		}, this.#a = (e) => {
+			this._query = e.currentTarget.value;
+		}, this.#o = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault(), e.stopPropagation(), this.dispatchEvent(new CustomEvent("fellowship-equipment-selector-dismiss", w));
+				return;
+			}
+			if (e.key !== "Tab") return;
+			let t = [...this.shadowRoot.querySelectorAll("button:not([disabled]), input:not([disabled]), [href], [tabindex]:not([tabindex=\"-1\"])")].filter((e) => e.getClientRects().length > 0), n = t[0], r = t.at(-1);
+			if (!n || !r) {
+				e.preventDefault();
+				return;
+			}
+			e.shiftKey && this.shadowRoot.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && this.shadowRoot.activeElement === r && (e.preventDefault(), n.focus());
+		};
+	}
+	static {
+		this.styles = [
+			n,
+			C,
+			S
+		];
+	}
+	willUpdate(e) {
+		super.willUpdate(e);
+		let t = e.has("data") || e.has("build") || e.has("positionId");
+		if (t && (this._candidates = this.data && this.build && this.positionId ? N(this.data, this.build, this.positionId) : [], this._filters = P(this._candidates), e.has("positionId") ? (this._query = "", this._filterId = "all", this.expanded = !1) : this._filters.some((e) => e.id === this._filterId) || (this._filterId = "all")), t || e.has("_query") || e.has("_filterId")) {
+			let e = this._query.trim().toLocaleLowerCase();
+			this._visibleCandidates = this._candidates.filter((t) => (!e || t.name.toLocaleLowerCase().includes(e)) && (this._filterId === "all" || t.features.some((e) => e.id === this._filterId)));
+		}
+	}
+	focusInitial() {
+		if (this.compact) {
+			this.focus({ preventScroll: !0 });
+			return;
+		}
+		this._searchInput?.focus({ preventScroll: !0 });
+	}
+	render() {
+		let e = this.data?.positions.find(({ id: e }) => e === this.positionId) ?? null, t = this.build?.positions.find(({ positionId: e }) => e === this.positionId)?.item ?? null;
+		return o`
+      <section class="selector" @keydown=${this.#o}>
+        <div class="actions">
+          <button
+            class="action action-primary"
+            type="button"
+            ?disabled=${!t}
+            @click=${this.#n}
+          >
+            Configure current
+          </button>
+          <button
+            class="action"
+            type="button"
+            ?disabled=${!t}
+            @click=${this.#r}
+          >
+            Unequip
+          </button>
+          <button
+            class="action action-expand"
+            type="button"
+            aria-expanded=${String(this.expanded)}
+            aria-hidden=${String(!this.compact)}
+            ?disabled=${!this.compact}
+            @click=${this.#i}
+          >
+            ${this.expanded ? "Collapse" : "Expand"}
+          </button>
+        </div>
+
+        <div class="search-and-filters">
+          <label class="search">
+            <span class="sr-only">Search valid ${e?.label ?? "equipment"} items</span>
+            <input
+              type="search"
+              .value=${this._query}
+              placeholder=${`Search ${e?.label?.toLocaleLowerCase() ?? "equipment"}`}
+              @input=${this.#a}
+            />
+          </label>
+          <fieldset class="chips">
+            <legend class="sr-only">Quick filters</legend>
+            ${f(this._filters, (e) => e.id, (e) => o`
+                <button
+                  class="chip"
+                  type="button"
+                  aria-pressed=${String(this._filterId === e.id)}
+                  @click=${() => {
+			this._filterId = e.id;
+		}}
+                >
+                  ${e.label}
+                </button>
+              `)}
+          </fieldset>
+        </div>
+
+        <section
+          class="candidate-list"
+          aria-label=${`Alphabetical equipment choices for ${e?.label ?? "this slot"}`}
+        >
+          ${this._visibleCandidates.length === 0 ? o`
+                <div class="no-results" role="status">
+                  <div>
+                    <strong>No matching equipment</strong>
+                    <span>Clear search or filters to see valid items.</span>
+                  </div>
+                </div>
+              ` : f(this._visibleCandidates, (e) => e.item.item.id, (e) => this.#e(e))}
+        </section>
+      </section>
+    `;
+	}
+	#e(e) {
+		let t = this.data && this.build ? this.data.heroById.get(this.build.heroId) : null, n = this.data && t ? y(e.item, t, e.rarity, "200") : null, r = null;
+		if (n && this.resolveAssetUrl) try {
+			r = this.resolveAssetUrl(n);
+		} catch {
+			r = null;
+		}
+		return o`
+      <button
+        class="candidate"
+        type="button"
+        aria-pressed=${String(e.equipped)}
+        aria-label=${`${e.name}. ${e.equipped ? "Equipped" : e.powerDelta === 0 ? "No power change" : `${k(e.powerDelta)} power`}`}
+        @click=${() => this.#t(e)}
+      >
+        <span class="choice-image" data-rarity=${e.rarity} aria-hidden="true">
+          <span>${e.name.slice(0, 2)}</span>
+          ${r ? o`
+                <img
+                  src=${r}
+                  alt=""
+                  @error=${(e) => {
+			e.currentTarget.hidden = !0;
+		}}
+                />
+              ` : s}
+        </span>
+        <span class="candidate-copy">
+          <span class="candidate-name">${e.name}</span>
+          <span class="candidate-tags">
+            ${f(e.tags, (e) => e, (e) => o`<span class="tag">${e}</span>`)}
+          </span>
+        </span>
+        <span class="candidate-delta">
+          ${e.equipped ? "Equipped" : e.powerDelta === 0 ? "0 Power" : `${k(e.powerDelta)} Power`}
+        </span>
+        <span class="candidate-stats">
+          <span>
+            ${e.statDeltas.length > 0 ? e.statDeltas.join(" · ") : "No key-stat change"}
+          </span>
+          ${e.partial ? o`<span class="partial">Partial estimate</span>` : s}
+        </span>
+      </button>
+    `;
+	}
+	#t(e) {
+		this.dispatchEvent(new CustomEvent("fellowship-equipment-selector-select", {
+			...w,
+			detail: {
+				item: e.itemBuild,
+				name: e.name
+			}
+		}));
+	}
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+};
+e([l({ attribute: !1 })], F.prototype, "data", void 0), e([l({ attribute: !1 })], F.prototype, "build", void 0), e([l({ type: String })], F.prototype, "positionId", void 0), e([l({ attribute: !1 })], F.prototype, "resolveAssetUrl", void 0), e([l({
+	type: Boolean,
+	reflect: !0
+})], F.prototype, "compact", void 0), e([l({
+	type: Boolean,
+	reflect: !0
+})], F.prototype, "expanded", void 0), e([d()], F.prototype, "_query", void 0), e([d()], F.prototype, "_filterId", void 0), e([d()], F.prototype, "_candidates", void 0), e([d()], F.prototype, "_filters", void 0), e([d()], F.prototype, "_visibleCandidates", void 0), e([u("input[type='search']")], F.prototype, "_searchInput", void 0), F = e([c("fellowship-equipment-selector")], F);
+var I = () => {
+	customElements.get("fellowship-equipment-selector") || customElements.define("fellowship-equipment-selector", F);
+};
 //#endregion
 //#region src/gear-planner/gear-position.ts
 r();
-var C = class extends i {
+var L = class extends i {
 	constructor(...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", {
@@ -194,7 +943,7 @@ var C = class extends i {
         transition: none;
       }
     }
-  `, S];
+  `, C];
 	}
 	render() {
 		if (!this.position) return o``;
@@ -234,13 +983,13 @@ var C = class extends i {
 	#e;
 	#t;
 };
-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({
+e([l({ attribute: !1 })], L.prototype, "position", void 0), e([l({ attribute: !1 })], L.prototype, "item", void 0), e([l({ attribute: !1 })], L.prototype, "itemBuild", void 0), e([l({ type: String })], L.prototype, "itemName", void 0), e([l({
 	type: Boolean,
 	reflect: !0
-})], 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`
+})], L.prototype, "selected", void 0), e([l({ type: String })], L.prototype, "imageUrl", void 0), e([l({ attribute: !1 })], L.prototype, "tooltipDetails", void 0), L = e([c("fellowship-gear-position")], L);
+var R = () => {
+	customElements.get("fellowship-gear-position") || customElements.define("fellowship-gear-position", L);
+}, z = a`
   :host {
     display: block;
     min-width: 0;
@@ -288,11 +1037,6 @@ var w = () => {
     text-transform: uppercase;
   }
 
-  .search {
-    display: block;
-    margin-block: 16px 8px;
-  }
-
   input,
   select {
     width: 100%;
@@ -319,74 +1063,6 @@ var w = () => {
     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;
@@ -469,8 +1145,7 @@ var w = () => {
     margin-top: 6px;
   }
 
-  .empty,
-  .empty-search {
+  .empty {
     margin: 0;
     padding: 24px 16px;
     border: 2px dashed var(--_fellowship-poster-plum);
@@ -492,31 +1167,18 @@ var w = () => {
       grid-row: auto;
     }
   }
-`, E = class extends i {
+`, B = 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;
-		};
+		super(...e), this.data = null, this.build = null, this.positionId = null;
 	}
 	static {
-		this.styles = [
-			n,
-			T,
-			S
-		];
+		this.styles = [n, z];
 	}
 	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 ? 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)) : [];
+		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;
 		return o`
       <header class="workbench-header">
         <div>
@@ -525,37 +1187,11 @@ var w = () => {
         </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}`}>
-        ${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.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" data-rarity=${e.rarity}>
-                    ${this.#o(e.item, a, e.rarity, e.name)}
-                  </span>
-                  <span>${e.name}</span>
-                  <small>
-                    ${e.item.maxEquipped === 1 ? "Unique" : e.item.itemType}
-                  </small>
-                </button>
-              `)}
-      </div>
-      ${n && r && i ? this.#e(n, i) : o`<div class="empty configure-empty">Choose an item to configure it.</div>`}
+      ${n && r && i ? this.#e(n, i) : o`
+            <div class="empty configure-empty">
+              Choose an item from this slot’s equipment selector to configure it.
+            </div>
+          `}
     `;
 	}
 	#e(e, t) {
@@ -568,7 +1204,7 @@ var w = () => {
             <span>Item level</span>
             <select
               .value=${String(e.itemLevel)}
-              @change=${(t) => this.#h({
+              @change=${(t) => this.#p({
 			...e,
 			itemLevel: Number(t.currentTarget.value)
 		}, "item-level")}
@@ -583,7 +1219,7 @@ var w = () => {
               min="0"
               max=${r}
               .value=${String(e.appliedTempers)}
-              @change=${(t) => this.#h({
+              @change=${(t) => this.#p({
 			...e,
 			appliedTempers: Math.max(0, Math.min(r, Math.round(Number(t.currentTarget.value))))
 		}, "tempers")}
@@ -594,7 +1230,7 @@ var w = () => {
             <span>Rarity</span>
             <select
               .value=${e.rarity}
-              @change=${(t) => this.#h({
+              @change=${(t) => this.#p({
 			...e,
 			rarity: t.currentTarget.value
 		}, "rarity")}
@@ -628,7 +1264,7 @@ var w = () => {
                           <select
                             aria-label=${`Trait node ${t.row + 1}.${t.column + 1}`}
                             .value=${n?.traitId ?? ""}
-                            @change=${(n) => this.#p(e, t.id, n.currentTarget.value)}
+                            @change=${(n) => this.#d(e, t.id, n.currentTarget.value)}
                           >
                             <option value="">Unassigned</option>
                             ${f(t.eligibleTraitIds, (e) => e, (e) => o`
@@ -644,7 +1280,7 @@ var w = () => {
                                   max=${t.maxRank}
                                   .value=${String(n.rank)}
                                   aria-label="Trait rank"
-                                  @change=${(n) => this.#m(e, t.id, Number(n.currentTarget.value), t.maxRank)}
+                                  @change=${(n) => this.#f(e, t.id, Number(n.currentTarget.value), t.maxRank)}
                                 />
                               ` : s}
                         </label>
@@ -661,14 +1297,14 @@ var w = () => {
 		let r = this.#i(e, t);
 		return o`
       <label class="configuration-control">
-        <span>${this.#s(t.kind)}</span>
+        <span>${this.#o(t.kind)}</span>
         <select
           .value=${r}
-          @change=${(r) => this.#u(e, t, r.currentTarget.value, n)}
+          @change=${(r) => this.#c(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>
+              <option value=${e}>${this.#s(t.kind, e)}</option>
             `)}
         </select>
       </label>
@@ -683,13 +1319,13 @@ var w = () => {
           .value=${r ? `${r.id}\u001f${this.#i(e, r)}` : ""}
           @change=${(n) => {
 			let r = n.currentTarget.value;
-			this.#d(e, t, r);
+			this.#l(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)}
+                  ${this.#o(e.kind)} · ${this.#s(e.kind, t)}
                 </option>
               `))}
         </select>
@@ -703,7 +1339,7 @@ var w = () => {
         <span>Socket ${n + 1} · ${t.replace("SocketTier", "Tier ")}</span>
         <select
           .value=${i}
-          @change=${(t) => this.#f(e, r, t.currentTarget.value)}
+          @change=${(t) => this.#u(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>`)}
@@ -725,26 +1361,7 @@ var w = () => {
       </aside>
     `;
 	}
-	#o(e, t, n, r) {
-		let i = y(e, t, n, "200");
-		if (!i || !this.resolveAssetUrl) return r.slice(0, 2);
-		let a;
-		try {
-			a = this.resolveAssetUrl(i);
-		} catch {
-			return r.slice(0, 2);
-		}
-		return o`
-      <img
-        src=${a}
-        alt=""
-        @error=${(e) => {
-			e.currentTarget.hidden = !0;
-		}}
-      />
-    `;
-	}
-	#s(e) {
+	#o(e) {
 		return {
 			"rolled-stat": "Rolled stat",
 			"gem-power": "Gem power",
@@ -753,30 +1370,17 @@ var w = () => {
 			"gem-socket": "Gem socket"
 		}[e];
 	}
-	#c(e, t) {
+	#s(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,
-			appliedTempers: 0,
-			rolledModifiers: [],
-			gems: [],
-			traits: [],
-			blessings: []
-		}, "item");
-	}
-	#u(e, t, n, r) {
+	#c(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({
+			}), this.#p({
 				...e,
 				blessings: r
 			}, "blessing");
@@ -787,12 +1391,12 @@ var w = () => {
 			slotId: t.id,
 			kind: t.kind,
 			choiceId: n
-		}), this.#h({
+		}), this.#p({
 			...e,
 			rolledModifiers: i
 		}, "modifier");
 	}
-	#d(e, t, n) {
+	#l(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,
@@ -802,44 +1406,44 @@ var w = () => {
 			slotId: c.id,
 			kind: c.kind,
 			choiceId: s
-		})), this.#h({
+		})), this.#p({
 			...e,
 			rolledModifiers: i,
 			blessings: a
 		}, c?.kind === "blessing" ? "blessing" : "modifier");
 	}
-	#f(e, t, n) {
+	#u(e, t, n) {
 		let r = e.gems.filter((e) => e.socketId !== t);
 		n && r.push({
 			socketId: t,
 			gemId: n
-		}), this.#h({
+		}), this.#p({
 			...e,
 			gems: r
 		}, "gem");
 	}
-	#p(e, t, n) {
+	#d(e, t, n) {
 		let r = e.traits.filter((e) => e.nodeId !== t);
 		n && r.push({
 			nodeId: t,
 			traitId: n,
 			rank: 1
-		}), this.#h({
+		}), this.#p({
 			...e,
 			traits: r
 		}, "trait");
 	}
-	#m(e, t, n, r) {
+	#f(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({
+		this.#p({
 			...e,
 			traits: i
 		}, "trait");
 	}
-	#h(e, t) {
+	#p(e, t) {
 		this.dispatchEvent(new CustomEvent("fellowship-workbench-change", {
 			bubbles: !0,
 			composed: !0,
@@ -849,12 +1453,11 @@ var w = () => {
 			}
 		}));
 	}
-	#g;
 };
-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`
+e([l({ attribute: !1 })], B.prototype, "data", void 0), e([l({ attribute: !1 })], B.prototype, "build", void 0), e([l({ type: String })], B.prototype, "positionId", void 0), B = e([c("fellowship-item-workbench")], B);
+var V = () => {
+	customElements.get("fellowship-item-workbench") || customElements.define("fellowship-item-workbench", B);
+}, H = a`
   :host {
     display: block;
     min-width: 0;
@@ -1122,6 +1725,27 @@ var D = () => {
     outline-offset: -4px;
   }
 
+  .selector-backdrop {
+    position: fixed;
+    z-index: 1000;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
+    background: color-mix(
+      in oklch,
+      var(--_fellowship-poster-plum) 18%,
+      transparent
+    );
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .selector-backdrop[data-compact="true"] {
+    pointer-events: auto;
+  }
+
   .sheet-backdrop,
   .sheet-header {
     display: none;
@@ -1350,71 +1974,89 @@ var D = () => {
       animation-iteration-count: 1 !important;
     }
   }
-`, k = "button:not([disabled]), input:not([disabled]), select:not([disabled]), [href], [tabindex]:not([tabindex=\"-1\"])", A = (e) => {
+`, U = "button:not([disabled]), input:not([disabled]), select:not([disabled]), [href], [tabindex]:not([tabindex=\"-1\"])", W = (e) => {
 	let t = [];
-	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));
+	for (let n of e.children) n instanceof HTMLElement && n.matches(U) && t.push(n), n.shadowRoot && t.push(...W(n.shadowRoot)), t.push(...W(n));
 	return t;
-}, j = (e) => {
+}, G = (e) => {
 	let t = e.activeElement;
 	for (; t?.shadowRoot?.activeElement;) t = t.shadowRoot.activeElement;
 	return t;
 };
-w(), D();
-var M = class extends i {
+I(), R(), V();
+var K = 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._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) => {
+		super(...e), this.data = null, this.build = null, this.loading = !1, this.error = null, this.resolveAssetUrl = null, this._selectedPositionId = null, this._selectorOpen = !1, this._selectorPosition = {
+			x: 12,
+			y: 12,
+			placement: "right"
+		}, 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.#h = (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.#C({
 				...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.#g = (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 = 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.#y({
-					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.#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 });
+			e.stopPropagation(), this.#r !== null && (window.cancelAnimationFrame(this.#r), this.#r = null), this._selectedPositionId = e.detail.positionId, this.#i = e.detail.trigger, this._sheetOpen = !1, this._selectorOpen = !0, this._announcement = `${e.detail.positionId} equipment selector opened.`, this.updateComplete.then(() => this.#T(!0));
+		}, this.#_ = (e) => {
+			e.stopPropagation(), this.#b(e.detail.item, e.detail.source);
+		}, this.#v = (e) => {
+			e.stopPropagation(), this.#b(e.detail.item, "item", `${e.detail.name} equipped.`) && this.#k(!0);
+		}, this.#y = (e) => {
+			e.stopPropagation(), this.#b(null, "item", "Item unequipped.") && this.#k(!0);
+		}, this.#x = (e) => {
+			e.stopPropagation(), !(!this.build || !this._selectedPositionId) && this.build.positions.find(({ positionId: e }) => e === this._selectedPositionId)?.item && (this.#k(!1), this._compact && (this._sheetOpen = !0), this._announcement = "Item configuration focused.", this.updateComplete.then(() => {
+				this.#r !== null && window.cancelAnimationFrame(this.#r), this.#r = window.requestAnimationFrame(() => {
+					this.#r = null, this._workbenchPanel?.focus({ preventScroll: !0 });
 				});
+			}));
+		}, this.#E = () => {
+			let e = this._equipmentSelector, t = this.#i, n = this.ownerDocument.defaultView;
+			if (!this._selectorOpen || this._compact || !e || !t || !n) return;
+			let r = t.getBoundingClientRect(), i = e.getBoundingClientRect(), a = n.innerWidth - 12 - r.right - 8, o = r.left - 12 - 8, s = this._leftPositionIds.includes(this._selectedPositionId), c = s ? "right" : "left", l = s ? a : o, u = s ? o : a;
+			i.width > l && u > l && (c = s ? "left" : "right");
+			let d = c === "right" ? r.right + 8 : r.left - 8 - i.width, f = Math.max(12, n.innerWidth - 12 - i.width), p = Math.max(12, n.innerHeight - 12 - i.height), m = Math.round(Math.min(Math.max(d, 12), f)), h = Math.round(Math.min(Math.max(r.top, 12), p));
+			m === this._selectorPosition.x && h === this._selectorPosition.y && c === this._selectorPosition.placement || (this._selectorPosition = {
+				x: m,
+				y: h,
+				placement: c
 			});
-		}, this.#x = (e) => {
-			e.key !== "Escape" || !this._compact || !this._sheetOpen || (e.preventDefault(), this.#b());
-		}, this.#S = (e) => {
+		}, this.#M = () => {
+			this._sheetOpen = !1, this.#A();
+		}, this.#N = (e) => {
+			e.key === "Escape" && (this._selectorOpen ? (e.preventDefault(), this.#k(!0)) : this._compact && this._sheetOpen && (e.preventDefault(), this.#M()));
+		}, this.#P = (e) => {
+			if (!this._selectorOpen) return;
+			let t = e.composedPath();
+			t.includes(this._equipmentSelector) || t.includes(this.#i) || t.some((e) => e instanceof HTMLElement && e.tagName === "FELLOWSHIP-GEAR-POSITION") || this.#k(!0);
+		}, this.#F = (e) => {
+			if (!this._selectorOpen || !this._equipmentSelector) return;
+			if (e.key === "Escape") {
+				e.preventDefault(), e.stopPropagation(), this.#k(!0);
+				return;
+			}
+			if (e.key !== "Tab") return;
+			let t = W(this._equipmentSelector), n = t[0], r = t.at(-1), i = G(this.ownerDocument);
+			if (!n || !r) {
+				e.preventDefault();
+				return;
+			}
+			e.shiftKey && (i === n || i === this._equipmentSelector) ? (e.preventDefault(), r.focus()) : !e.shiftKey && i === r && (e.preventDefault(), n.focus());
+		}, this.#I = (e) => {
 			if (!this._compact || !this._sheetOpen) return;
 			if (e.key === "Escape") {
-				e.preventDefault(), this.#b();
+				e.preventDefault(), this.#M();
 				return;
 			}
 			if (e.key !== "Tab" || !this._workbenchPanel) return;
-			let t = A(this._workbenchPanel), n = t[0], r = t.at(-1), i = j(this.shadowRoot);
+			let t = W(this._workbenchPanel), n = t[0], r = t.at(-1), i = G(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.#C = (e) => {
+		}, this.#L = (e) => {
 			if (!["ArrowLeft", "ArrowRight"].includes(e.key)) return;
 			e.preventDefault();
 			let t = [
@@ -1425,12 +2067,12 @@ var M = 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.#T = (e) => {
+		}, this.#z = (e) => {
 			e.currentTarget.hidden = !0;
 		};
 	}
 	static {
-		this.styles = [n, O];
+		this.styles = [n, H];
 	}
 	#e;
 	#t;
@@ -1442,17 +2084,17 @@ var M = class extends i {
 	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.#n !== null && window.cancelAnimationFrame(this.#n), this.#n = window.requestAnimationFrame(() => {
+				this.#n = null, e !== this._compact && (this._compact = e, e || (this._sheetOpen = !1), this._selectorOpen && this.updateComplete.then(() => this.#T(!1)));
 			});
-		}), this.#e.observe(this), this.ownerDocument.addEventListener("keydown", this.#x);
+		}), this.#t ??= new ResizeObserver(() => this.#E()), this.#e.observe(this), this.ownerDocument.addEventListener("keydown", this.#N), this.ownerDocument.addEventListener("pointerdown", this.#P);
 	}
 	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();
+		this.#e?.disconnect(), this.#O(), this.ownerDocument.removeEventListener("keydown", this.#N), this.ownerDocument.removeEventListener("pointerdown", this.#P), this.#n !== null && (window.cancelAnimationFrame(this.#n), this.#n = null), this.#r !== null && (window.cancelAnimationFrame(this.#r), this.#r = null), super.disconnectedCallback();
 	}
 	willUpdate(e) {
 		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);
+			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, this._selectorOpen = !1, this.#O());
 			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);
 		}
@@ -1461,7 +2103,7 @@ var M = class extends i {
 		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.#y({
+			t && !this.#a ? (this.#a = !0, this.#w({
 				code: "asset-resolver-missing",
 				message: "A resolveAssetUrl callback is required to render Fellowship images.",
 				recoverable: !0
@@ -1504,13 +2146,13 @@ var M = class extends i {
 		let t = p(e.hero.images, {
 			size: "200",
 			type: "hero"
-		}), n = t ? this.#w(t) : null;
+		}), n = t ? this.#R(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.#T} />` : (e.hero.name ?? e.hero.id).slice(0, 2)}
+            ${n ? o`<img src=${n} alt="" @error=${this.#z} />` : (e.hero.name ?? e.hero.id).slice(0, 2)}
           </span>
           <span>
             <span class="hero-label">Current hero</span>
@@ -1523,7 +2165,7 @@ var M = class extends i {
               min="0"
               max=${this.data.maxAllocatedTalentPoints}
               .value=${String(this.build.allocatedTalentPoints)}
-              @change=${this.#m}
+              @change=${this.#h}
             />
           </label>
         </header>
@@ -1535,7 +2177,7 @@ var M = class extends i {
             aria-label="Traits and gems"
             aria-hidden=${String(this._compact && this._tab !== "traits")}
           >
-            ${this.#d()}
+            ${this.#f()}
           </aside>
           <div
             class="gear-workspace"
@@ -1558,11 +2200,12 @@ var M = class extends i {
             aria-label="Blessings, sets and results"
             aria-hidden=${String(this._compact && this._tab !== "bonuses")}
           >
-            ${this.#f()}
+            ${this.#p()}
           </aside>
         </div>
           <p class="sr-only" aria-live="polite">${this._announcement}</p>
         </section>
+        ${this.#u()}
       </div>
     `;
 	}
@@ -1583,7 +2226,7 @@ var M = class extends i {
               @click=${() => {
 			this._tab = e;
 		}}
-              @keydown=${this.#C}
+              @keydown=${this.#L}
             >
               ${t}
             </button>
@@ -1604,9 +2247,9 @@ var M = class extends i {
               .itemBuild=${r?.item ?? null}
               .itemName=${i && t ? b(i, t) : null}
               .selected=${e === this._selectedPositionId}
-              .imageUrl=${a ? this.#w(a) : null}
-              .tooltipDetails=${this.#u(e, r?.item ?? null)}
-              @fellowship-gear-position-select=${this.#h}
+              .imageUrl=${a ? this.#R(a) : null}
+              .tooltipDetails=${this.#d(e, r?.item ?? null)}
+              @fellowship-gear-position-select=${this.#g}
             ></fellowship-gear-position>
           `;
 		})}
@@ -1620,24 +2263,56 @@ var M = class extends i {
         role=${this._compact ? "dialog" : "region"}
         aria-modal=${this._compact ? "true" : s}
         aria-label="Item workbench"
-        tabindex=${this._compact ? "-1" : s}
-        @keydown=${this.#S}
-        @fellowship-workbench-change=${this.#g}
+        tabindex="-1"
+        @keydown=${this.#I}
+        @fellowship-workbench-change=${this.#_}
       >
         <header class="sheet-header">
           <strong>Configure item</strong>
-          <button class="sheet-close" type="button" @click=${this.#b}>Close</button>
+          <button class="sheet-close" type="button" @click=${this.#M}>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) {
+	#u() {
+		if (!this._selectorOpen || !this.data || !this.build || !this._selectedPositionId || !this.resolveAssetUrl) return s;
+		let e = this.data.positions.find(({ id: e }) => e === this._selectedPositionId), t = `--_selector-x:${this._selectorPosition.x}px;--_selector-y:${this._selectorPosition.y}px`;
+		return o`
+      <button
+        class="selector-backdrop"
+        type="button"
+        tabindex="-1"
+        aria-label="Dismiss equipment selector"
+        data-compact=${String(this._compact)}
+        @click=${() => this.#k(!0)}
+      ></button>
+      <fellowship-equipment-selector
+        popover="manual"
+        role="dialog"
+        aria-modal="true"
+        aria-label=${`Choose equipment for ${e?.label ?? "this slot"}`}
+        tabindex="-1"
+        data-placement=${this._selectorPosition.placement}
+        style=${t}
+        .data=${this.data}
+        .build=${this.build}
+        .positionId=${this._selectedPositionId}
+        .resolveAssetUrl=${this.resolveAssetUrl}
+        .compact=${this._compact}
+        @keydown=${this.#F}
+        @fellowship-equipment-selector-select=${this.#v}
+        @fellowship-equipment-selector-configure=${this.#x}
+        @fellowship-equipment-selector-unequip=${this.#y}
+        @fellowship-equipment-selector-dismiss=${() => this.#k(!0)}
+      ></fellowship-equipment-selector>
+    `;
+	}
+	#d(e, t) {
 		if (!this.data || !this.build || !t) return [];
 		let n = this.data.itemById.get(t.itemId);
 		if (!n) return [];
@@ -1654,7 +2329,7 @@ var M = class extends i {
 			d ? "Some mechanics are excluded from exact totals." : ""
 		].filter(Boolean);
 	}
-	#d() {
+	#f() {
 		if (!this.data || !this.build) return o``;
 		let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Map();
 		for (let n of this.build.positions) {
@@ -1695,7 +2370,7 @@ var M = class extends i {
       </ul>
     `;
 	}
-	#f() {
+	#p() {
 		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) {
@@ -1736,7 +2411,7 @@ var M = class extends i {
                 ${f(e.rows, (e) => e.id, (e) => o`
                     <li class="total-row">
                       <span>${e.label}</span>
-                      <strong>${this.#p(e)}</strong>
+                      <strong>${this.#m(e)}</strong>
                     </li>
                   `)}
               </ul>
@@ -1750,7 +2425,7 @@ var M = class extends i {
                   <input
                     type="checkbox"
                     .checked=${e.applied}
-                    @change=${() => this.#_(e.id)}
+                    @change=${() => this.#S(e.id)}
                   />
                   <span>${e.sourceName} · Apply</span>
                 </label>
@@ -1767,25 +2442,48 @@ var M = class extends i {
       </ul>
     `;
 	}
-	#p(e) {
+	#m(e) {
 		return new Intl.NumberFormat("en-US", {
 			style: e.displayKind === "percentage" ? "percent" : "decimal",
 			minimumFractionDigits: e.decimals,
 			maximumFractionDigits: e.decimals
 		}).format(e.value);
 	}
-	#m;
 	#h;
 	#g;
-	#_(e) {
+	#_;
+	#v;
+	#y;
+	#b(e, t, n = "Build updated.") {
+		if (!this.data || !this.build || !this._selectedPositionId) return !1;
+		let r = {
+			...this.build,
+			positions: this.build.positions.map((t) => t.positionId === this._selectedPositionId ? {
+				...t,
+				item: e
+			} : t)
+		}, i = v(this.data, r), a = x(this.data, i.build);
+		if (!a.valid || !a.build) {
+			let e = a.issues.find(({ severity: e }) => e === "error");
+			return this.#w({
+				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.", !1;
+		}
+		let o = (e) => e ? e.rolledModifiers.length + e.gems.length + e.traits.length + e.blessings.length : 0, s = a.build.positions.find(({ positionId: e }) => e === this._selectedPositionId)?.item ?? null, c = o(e) - o(s);
+		return this._announcement = c > 0 ? `${c} incompatible item choice${c === 1 ? " was" : "s were"} reset.` : n, this.#C(a.build, t, this._selectedPositionId), !0;
+	}
+	#x;
+	#S(e) {
 		if (!this.build) return;
 		let t = new Set(this.build.disabledConditionalContributionIds);
-		t.has(e) ? t.delete(e) : t.add(e), this.#v({
+		t.has(e) ? t.delete(e) : t.add(e), this.#C({
 			...this.build,
 			disabledConditionalContributionIds: [...t].sort()
 		}, "conditional", null);
 	}
-	#v(e, t, n) {
+	#C(e, t, n) {
 		this.dispatchEvent(new CustomEvent("fellowship-gear-build-change", {
 			bubbles: !0,
 			composed: !0,
@@ -1796,7 +2494,7 @@ var M = class extends i {
 			}
 		}));
 	}
-	#y(e) {
+	#w(e) {
 		this.dispatchEvent(new CustomEvent("fellowship-gear-planner-error", {
 			bubbles: !0,
 			composed: !0,
@@ -1806,17 +2504,49 @@ var M = class extends i {
 			}
 		}));
 	}
-	#b;
-	#x;
-	#S;
-	#C;
-	#w(e) {
+	async #T(e) {
+		let t = this._equipmentSelector;
+		!this._selectorOpen || !t || (await t.updateComplete, "showPopover" in t && !t.matches(":popover-open") && t.showPopover(), this.#D(), this.#E(), e && t.focusInitial());
+	}
+	#E;
+	#D() {
+		let e = this.ownerDocument.defaultView;
+		e && (this.#O(), e.addEventListener("resize", this.#E), e.addEventListener("scroll", this.#E, !0), this.#i && this.#t?.observe(this.#i), this._equipmentSelector && this.#t?.observe(this._equipmentSelector));
+	}
+	#O() {
+		let e = this.ownerDocument.defaultView;
+		e?.removeEventListener("resize", this.#E), e?.removeEventListener("scroll", this.#E, !0), this.#t?.disconnect();
+	}
+	#k(e) {
+		if (!this._selectorOpen) return;
+		let t = this._equipmentSelector;
+		t && "hidePopover" in t && t.matches(":popover-open") && t.hidePopover(), this.#O(), this._selectorOpen = !1, e && this.#A();
+	}
+	#A() {
+		this.updateComplete.then(() => {
+			this.#r !== null && window.cancelAnimationFrame(this.#r), this.#r = window.requestAnimationFrame(() => {
+				this.#r = null, this.#j()?.focus({ preventScroll: !0 });
+			});
+		});
+	}
+	#j() {
+		if (this.#i instanceof HTMLButtonElement && this.#i.isConnected) return this.#i;
+		let e = [...this.shadowRoot?.querySelectorAll("fellowship-gear-position") ?? []].find(({ position: e }) => e?.id === this._selectedPositionId)?.shadowRoot?.querySelector("button") ?? null;
+		return this.#i = e, e;
+	}
+	#M;
+	#N;
+	#P;
+	#F;
+	#I;
+	#L;
+	#R(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.#y({
+				this.isConnected && this.#w({
 					code: "asset-url-error",
 					message: `Could not resolve ${e.path}: ${String(t)}.`,
 					recoverable: !0
@@ -1824,14 +2554,14 @@ var M = class extends i {
 			})), null;
 		}
 	}
-	#T;
+	#z;
 };
-e([l({ attribute: !1 })], M.prototype, "data", void 0), e([l({ attribute: !1 })], M.prototype, "build", void 0), e([l({
+e([l({ attribute: !1 })], K.prototype, "data", void 0), e([l({ attribute: !1 })], K.prototype, "build", void 0), e([l({
 	type: Boolean,
 	reflect: !0
-})], 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);
+})], K.prototype, "loading", void 0), e([l({ attribute: !1 })], K.prototype, "error", void 0), e([l({ attribute: !1 })], K.prototype, "resolveAssetUrl", void 0), e([d()], K.prototype, "_selectedPositionId", void 0), e([d()], K.prototype, "_selectorOpen", void 0), e([d()], K.prototype, "_selectorPosition", void 0), e([d()], K.prototype, "_tab", void 0), e([d()], K.prototype, "_sheetOpen", void 0), e([d()], K.prototype, "_compact", void 0), e([d()], K.prototype, "_announcement", void 0), e([d()], K.prototype, "_calculation", void 0), e([u(".workbench-panel")], K.prototype, "_workbenchPanel", void 0), e([u("fellowship-equipment-selector")], K.prototype, "_equipmentSelector", void 0), K = e([c("fellowship-gear-planner")], K);
+var q = () => {
+	customElements.get("fellowship-gear-planner") || customElements.define("fellowship-gear-planner", K);
 };
 //#endregion
-export { N as n, M as t };
+export { q as n, K as t };