@crockery/fellowship-components 0.1.0

package/dist/chunks/talent-calculator-Ch1Pbbba.js

@@ -0,0 +1,1086 @@
+import { t as e } from "./data-source-CoIFvV72.js";
+import { n as t, r as n, t as r } from "./decorate-B_ZTN9li.js";
+import { a as i, n as a } from "./tooltip-DoQVSnOn.js";
+import { findImage as o, getAssetUrl as s } from "@crockery/fellowship-data";
+import { LitElement as c, css as l, html as u, nothing as d } from "lit";
+import { customElement as f, property as p, state as m } from "lit/decorators.js";
+import { repeat as h } from "lit/directives/repeat.js";
+//#region src/data/package-talent-data-source.ts
+var g, _ = (t) => {
+	if (t?.aborted) throw new e("aborted", "The hero talent data request was aborted.", t.reason);
+}, v = () => (g ??= Promise.all([
+	import("@crockery/fellowship-data/heroes"),
+	import("@crockery/fellowship-data/talents"),
+	import("@crockery/fellowship-data/manifest")
+]).then(([t, n, r]) => {
+	let i = r.default;
+	if (i.schemaVersion !== 1) throw new e("unsupported-schema", `Unsupported fellowship-data schema version: ${String(i.schemaVersion)}.`);
+	let a = /* @__PURE__ */ new Map();
+	for (let e of n.default) {
+		let t = a.get(e.parentId) ?? [];
+		t.push(e), a.set(e.parentId, t);
+	}
+	return {
+		manifest: i,
+		heroes: new Map(t.default.map((e) => [e.id, e])),
+		talentsByHero: new Map([...a].map(([e, t]) => [e, t]))
+	};
+}).catch((t) => {
+	throw g = void 0, t instanceof e ? t : new e("data-load-failed", "Unable to load hero talents from @crockery/fellowship-data.", t);
+}), g), y = (t = {}) => ({
+	async loadHeroTalents(t, n) {
+		_(n);
+		let r = await v();
+		_(n);
+		let i = r.heroes.get(t);
+		if (!i) throw new e("hero-not-found", `No hero with ID “${t}” exists in @crockery/fellowship-data.`);
+		return {
+			manifest: r.manifest,
+			hero: i,
+			talents: r.talentsByHero.get(t) ?? []
+		};
+	},
+	resolveAssetUrl(e) {
+		return t.assetBaseUrl ? s(e, { baseUrl: t.assetBaseUrl }) : s(e);
+	}
+}), b = [
+	"I",
+	"II",
+	"III",
+	"IV",
+	"V",
+	"VI"
+], x = (e) => b[e - 1] ?? String(e), S = (e, t, n) => ({
+	code: e,
+	message: n,
+	talentId: t.id
+}), C = (e, t) => {
+	let n = [], r = /* @__PURE__ */ new Set(), i = [];
+	for (let a of e.talents) {
+		if (a.row === null && a.column === null) continue;
+		if (!Number.isInteger(a.row) || !Number.isInteger(a.column) || a.row === null || a.column === null || a.row < 1 || a.row > 6 || a.column < 1 || a.column > 3) {
+			n.push(S("invalid-position", a, `Talent “${a.id}” has an invalid row or column and was skipped.`));
+			continue;
+		}
+		let e = `${a.row}:${a.column}`;
+		if (r.has(e)) {
+			n.push(S("duplicate-position", a, `Talent “${a.id}” duplicates row ${a.row}, column ${a.column} and was skipped.`));
+			continue;
+		}
+		r.add(e);
+		let s = Number.isInteger(a.pointCost) && (a.pointCost ?? 0) > 0 ? a.pointCost : null;
+		s === null && n.push(S("invalid-cost", a, `Talent “${a.id}” has an invalid point cost.`)), a.name || n.push(S("missing-name", a, `Talent “${a.id}” has no display name.`)), a.description || n.push(S("missing-description", a, `Talent “${a.id}” has no description.`));
+		let c = o(a.images, {
+			type: "talent",
+			size: "200"
+		}) ?? o(a.images, {
+			type: "talent",
+			size: "full"
+		}), l = null;
+		if (!c) n.push(S("missing-image", a, `Talent “${a.id}” has no icon.`));
+		else try {
+			l = t.resolveAssetUrl(c);
+		} catch (e) {
+			n.push(S("asset-url-error", a, `The icon URL for talent “${a.id}” could not be resolved: ${String(e)}.`));
+		}
+		i.push({
+			talent: a,
+			row: a.row,
+			column: a.column,
+			pointCost: s,
+			imageUrl: l
+		});
+	}
+	i.sort((e, t) => e.row - t.row || e.column - t.column);
+	let a = new Map(i.map((e) => [e.talent.id, e])), s = [...new Set(i.map(({ row: e }) => e))].map((e) => ({
+		row: e,
+		label: x(e),
+		talents: i.filter((t) => t.row === e)
+	}));
+	return {
+		hero: e.hero,
+		rows: s,
+		talentById: a,
+		warnings: n
+	};
+}, w = 14, T = (e) => Math.min(14, Math.max(0, Math.round(Number.isFinite(e) ? e : 14))), E = (e, t) => {
+	let n = new Set(t), r = [...e.talentById.values()].filter(({ talent: e }) => n.has(e.id)).map(({ talent: e }) => e.id), i = new Set(r);
+	return {
+		selectedTalentIds: r,
+		removedTalentIds: [...new Set(t)].filter((e) => !i.has(e))
+	};
+}, D = (e, t, n) => {
+	let r = new Set(t), i = [...e.talentById.values()].reduce((e, t) => r.has(t.talent.id) && t.pointCost !== null ? e + t.pointCost : e, 0), a = n - i;
+	return {
+		selectedTalentIds: [...e.talentById.values()].filter(({ talent: e }) => r.has(e.id)).map(({ talent: e }) => e.id),
+		spentPoints: i,
+		remainingPoints: a,
+		overBudget: a < 0
+	};
+}, O = (e, t) => e !== null && !t.overBudget && e <= t.remainingPoints, k = l`
+  :host {
+    --fellowship-talent-background: var(--_fellowship-field-canvas);
+    --fellowship-talent-surface: var(--_fellowship-field-surface);
+    --fellowship-talent-card-background: var(--_fellowship-field-surface);
+    --fellowship-talent-card-selected-background: color-mix(
+      in srgb,
+      var(--_fellowship-field-surface-raised) 88%,
+      var(--_fellowship-field-accent)
+    );
+    --fellowship-talent-foreground: var(--_fellowship-field-ink);
+    --fellowship-talent-muted: var(--_fellowship-field-muted);
+    --fellowship-talent-disabled: var(--_fellowship-field-tertiary);
+    --fellowship-talent-border: var(--_fellowship-field-border);
+    --fellowship-talent-selection: var(--_fellowship-field-accent);
+    --fellowship-talent-focus: var(--_fellowship-field-focus);
+    --fellowship-talent-points: var(--_fellowship-field-brass);
+    --fellowship-talent-danger: var(--_fellowship-field-ember);
+    --fellowship-talent-control-surface: var(--_fellowship-field-inset);
+    --fellowship-talent-icon-size: 56px;
+    --fellowship-talent-font-family: var(--_fellowship-field-font-family);
+    --fellowship-talent-tactical-font-family: var(--_fellowship-field-mono-font-family);
+    --fellowship-talent-radius: var(--_fellowship-field-radius);
+
+    display: block;
+    min-width: 0;
+    container-type: inline-size;
+    color: var(--fellowship-talent-foreground);
+    font-family: var(--fellowship-talent-font-family);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  button {
+    font: inherit;
+  }
+
+  .container {
+    min-width: 0;
+    padding: 16px;
+    border-radius: calc(var(--fellowship-talent-radius) + 2px);
+    background: var(--fellowship-talent-background);
+  }
+
+  .header {
+    min-height: 72px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    padding: 8px 8px 24px;
+  }
+
+  .heading {
+    margin: 0;
+    color: var(--fellowship-talent-muted);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+  }
+
+  .points-cluster,
+  .point-controls {
+    display: flex;
+    align-items: center;
+  }
+
+  .points-cluster {
+    gap: 16px;
+  }
+
+  .points {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+    color: var(--fellowship-talent-foreground);
+    font-family: var(--fellowship-talent-tactical-font-family);
+    font-size: 32px;
+    font-weight: 600;
+    line-height: 40px;
+    letter-spacing: -0.04em;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .points-spent {
+    color: var(--fellowship-talent-points);
+  }
+
+  .points-separator,
+  .points-total {
+    color: var(--_fellowship-field-tertiary);
+  }
+
+  .points-separator {
+    font-size: 18px;
+    font-weight: 500;
+  }
+
+  .points[data-invalid="true"],
+  .points[data-invalid="true"] .points-spent {
+    color: var(--fellowship-talent-danger);
+  }
+
+  .point-controls {
+    gap: 4px;
+    padding: 2px;
+    border-radius: calc(var(--fellowship-talent-radius) + 2px);
+    background: var(--fellowship-talent-control-surface);
+    box-shadow: inset 0 0 0 1px var(--fellowship-talent-border);
+  }
+
+  .point-control {
+    width: 40px;
+    height: 40px;
+    display: inline-grid;
+    place-items: center;
+    padding: 0;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--fellowship-talent-muted);
+    font-family: var(--fellowship-talent-tactical-font-family);
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      background-color 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      color 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  .point-control:active:not(:disabled) {
+    transform: scale(0.97);
+  }
+
+  .point-control:focus-visible,
+  .clear-all:focus-visible,
+  .talent:focus-visible,
+  .retry-button:focus-visible {
+    outline: 2px solid var(--fellowship-talent-focus);
+    outline-offset: 2px;
+  }
+
+  .point-control:disabled {
+    color: var(--fellowship-talent-disabled);
+    cursor: not-allowed;
+    opacity: 0.48;
+  }
+
+  .clear-all {
+    min-height: 44px;
+    padding: 0 8px;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--fellowship-talent-muted);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      background-color 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      color 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  .clear-all:active:not(:disabled) {
+    transform: scale(0.97);
+  }
+
+  .clear-all:disabled {
+    color: var(--fellowship-talent-disabled);
+    cursor: not-allowed;
+    opacity: 0.42;
+  }
+
+  .grid {
+    display: grid;
+    gap: 16px;
+    padding: 8px 0 0;
+  }
+
+  .row {
+    min-width: 0;
+    min-inline-size: 0;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 48px minmax(0, 1fr);
+    align-items: stretch;
+    gap: 8px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  .row-label {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 16px;
+    color: var(--fellowship-talent-disabled);
+    font-family: var(--fellowship-talent-tactical-font-family);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 16px;
+    text-align: center;
+    letter-spacing: 0.08em;
+  }
+
+  .row-label::before {
+    position: absolute;
+    inset: 0 0 0 auto;
+    width: 1px;
+    background: var(--fellowship-talent-border);
+    content: "";
+  }
+
+  .row-label::after {
+    position: absolute;
+    top: 23px;
+    right: -3px;
+    width: 7px;
+    height: 1px;
+    background: var(--fellowship-talent-selection);
+    content: "";
+  }
+
+  .row-talents {
+    min-width: 0;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  fellowship-tooltip {
+    display: block;
+    min-width: 0;
+  }
+
+  .talent {
+    position: relative;
+    width: 100%;
+    min-width: 0;
+    min-height: 88px;
+    display: grid;
+    grid-template-columns: var(--fellowship-talent-icon-size) minmax(0, 1fr);
+    align-items: center;
+    gap: 16px;
+    padding: 16px 36px 16px 16px;
+    overflow: hidden;
+    border: 1px solid transparent;
+    border-radius: var(--fellowship-talent-radius);
+    background: var(--fellowship-talent-card-background);
+    color: var(--fellowship-talent-foreground);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fellowship-talent-border) 64%, transparent);
+    text-align: left;
+    cursor: pointer;
+    transition:
+      background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      box-shadow 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
+      opacity 140ms linear;
+  }
+
+  .talent::before {
+    position: absolute;
+    top: 16px;
+    left: 0;
+    width: 2px;
+    height: 24px;
+    background: transparent;
+    content: "";
+  }
+
+  .talent:active:not([aria-disabled="true"]) {
+    transform: scale(0.99);
+  }
+
+  .talent[aria-pressed="true"] {
+    background: var(--fellowship-talent-card-selected-background);
+    box-shadow: inset 0 0 0 1px
+      color-mix(in srgb, var(--fellowship-talent-selection) 32%, transparent);
+  }
+
+  .talent[aria-pressed="true"]::before {
+    background: var(--fellowship-talent-selection);
+  }
+
+  .talent[aria-disabled="true"] {
+    color: var(--fellowship-talent-disabled);
+    cursor: not-allowed;
+    opacity: 0.46;
+  }
+
+  .talent-icon,
+  .talent-icon-fallback {
+    width: var(--fellowship-talent-icon-size);
+    height: var(--fellowship-talent-icon-size);
+    border-radius: calc(var(--fellowship-talent-radius) - 2px);
+    box-shadow: inset 0 0 0 1px var(--fellowship-talent-border);
+  }
+
+  .talent-icon {
+    display: block;
+    object-fit: cover;
+  }
+
+  .talent-icon-fallback {
+    display: grid;
+    place-items: center;
+    background: var(--fellowship-talent-control-surface);
+    color: var(--fellowship-talent-muted);
+    font-family: var(--fellowship-talent-tactical-font-family);
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+  }
+
+  .talent[aria-pressed="true"] .talent-icon,
+  .talent[aria-pressed="true"] .talent-icon-fallback {
+    box-shadow:
+      inset 0 0 0 1px var(--fellowship-talent-border),
+      0 0 0 1px color-mix(in srgb, var(--fellowship-talent-selection) 60%, transparent);
+  }
+
+  .talent-name {
+    min-width: 0;
+    overflow: hidden;
+    color: currentColor;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    text-overflow: ellipsis;
+    text-wrap: balance;
+    white-space: nowrap;
+  }
+
+  .talent-cost {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    color: var(--fellowship-talent-muted);
+    font-family: var(--fellowship-talent-tactical-font-family);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 16px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .talent[aria-pressed="true"] .talent-cost {
+    color: var(--fellowship-talent-focus);
+  }
+
+  .status {
+    min-height: 256px;
+    display: grid;
+    place-items: center;
+    padding: 32px;
+    color: var(--fellowship-talent-muted);
+    text-align: center;
+  }
+
+  .status-card {
+    max-width: 480px;
+  }
+
+  .status-mark {
+    display: flex;
+    width: 40px;
+    height: 24px;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 auto 16px;
+    color: var(--fellowship-talent-points);
+    font-family: var(--fellowship-talent-tactical-font-family);
+    font-size: 16px;
+  }
+
+  .status-mark::before,
+  .status-mark::after {
+    width: 8px;
+    height: 1px;
+    background: var(--fellowship-talent-border);
+    content: "";
+  }
+
+  .status-title {
+    margin: 0;
+    color: var(--fellowship-talent-foreground);
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 24px;
+    text-wrap: balance;
+  }
+
+  .status-copy {
+    margin: 8px 0 0;
+    font-size: 14px;
+    line-height: 24px;
+    text-wrap: pretty;
+  }
+
+  .retry-button {
+    min-height: 44px;
+    margin-top: 24px;
+    padding: 0 16px;
+    border: 1px solid var(--fellowship-talent-border);
+    border-radius: 4px;
+    background: var(--fellowship-talent-control-surface);
+    color: var(--fellowship-talent-foreground);
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (hover: hover) {
+    .point-control:hover:not(:disabled) {
+      background: var(--fellowship-talent-surface);
+      color: var(--fellowship-talent-foreground);
+    }
+
+    .clear-all:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--fellowship-talent-danger) 8%, transparent);
+      color: var(--fellowship-talent-danger);
+    }
+
+    .talent:hover:not([aria-disabled="true"]) {
+      background: var(--_fellowship-field-surface-raised);
+      box-shadow: inset 0 0 0 1px var(--fellowship-talent-border);
+    }
+  }
+
+  @container (max-width: 719px) {
+    .container {
+      padding: 16px 12px;
+    }
+
+    .header {
+      min-height: 80px;
+      grid-template-columns: 1fr;
+      display: grid;
+      gap: 8px;
+      padding: 4px 4px 20px;
+    }
+
+    .heading {
+      font-size: 11px;
+    }
+
+    .points-cluster {
+      width: 100%;
+      flex-wrap: wrap;
+      justify-content: flex-start;
+      gap: 8px;
+    }
+
+    .points {
+      font-size: 28px;
+      line-height: 36px;
+    }
+
+    .grid {
+      gap: 24px;
+    }
+
+    .row {
+      grid-template-columns: 1fr;
+      gap: 8px;
+    }
+
+    .row-label {
+      min-height: 24px;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 0 0 0 16px;
+      text-align: left;
+    }
+
+    .row-label::before {
+      inset: 12px auto auto 0;
+      width: 8px;
+      height: 1px;
+    }
+
+    .row-label::after {
+      top: 9px;
+      right: auto;
+      left: 0;
+      width: 1px;
+      height: 7px;
+    }
+
+    .row-talents {
+      grid-template-columns: 1fr;
+      gap: 8px;
+    }
+
+    .talent {
+      --fellowship-talent-icon-size: 52px;
+
+      min-height: 80px;
+      padding-block: 12px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .point-control,
+    .clear-all,
+    .talent {
+      transition:
+        background-color 100ms linear,
+        box-shadow 100ms linear,
+        color 100ms linear,
+        opacity 100ms linear;
+    }
+
+    .point-control:active:not(:disabled),
+    .clear-all:active:not(:disabled),
+    .talent:active:not([aria-disabled="true"]) {
+      transform: none;
+    }
+  }
+`, A = {
+	bubbles: !0,
+	composed: !0
+}, j = (e, t) => e.length !== t?.length || e.some((e, n) => e !== t[n]), M = (e) => `talent:${e}`, N = (e) => ({
+	selectedTalentIds: [],
+	spentPoints: 0,
+	remainingPoints: e,
+	overBudget: !1
+}), P = class extends c {
+	constructor(...e) {
+		super(...e), this.heroId = "", this.talentPoints = 14, this.selectedTalentIds = [], this.assetBaseUrl = null, this.dataSource = null, this.renderTalent = null, this.showPointControls = !0, this.showTooltips = !0, this._status = "empty", this._error = null, this._model = null, this._failedImages = /* @__PURE__ */ new Set(), this._announcement = "", this._renderSelectionState = N(14), this._talentPresentation = /* @__PURE__ */ new Map(), this._talentRenderContent = /* @__PURE__ */ new Map(), this.#e = null, this.#t = 0, this.#n = null, this.#r = !1, this.#i = /* @__PURE__ */ new Set(), this.#a = [];
+	}
+	static {
+		this.styles = [n, k];
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	connectedCallback() {
+		super.connectedCallback(), t(this.ownerDocument);
+	}
+	disconnectedCallback() {
+		this.#e?.abort(), super.disconnectedCallback();
+	}
+	updated(e) {
+		if (super.updated(e), this.#S(), e.has("heroId") || e.has("dataSource") || e.has("assetBaseUrl")) {
+			queueMicrotask(() => {
+				this.isConnected && this.#p();
+			});
+			return;
+		}
+		if (e.has("talentPoints")) {
+			let t = T(this.talentPoints);
+			if (t !== this.talentPoints) {
+				this.#r = !0, this.talentPoints = t, this.#v("normalization");
+				return;
+			}
+			this.#r ? this.#r = !1 : e.get("talentPoints") !== void 0 && this.#v("property");
+		}
+		e.has("selectedTalentIds") && this._model && this.#m(!0), this.#y();
+	}
+	willUpdate(e) {
+		super.willUpdate(e);
+		let t = e.has("_model") || e.has("selectedTalentIds") || e.has("talentPoints");
+		t && (this._renderSelectionState = this._model ? D(this._model, this.selectedTalentIds, this.talentPoints) : N(this.talentPoints)), e.has("renderTalent") && this.#i.clear(), (t || e.has("renderTalent")) && this.#l(this._renderSelectionState);
+	}
+	get renderModel() {
+		return this._model;
+	}
+	get selectionState() {
+		return this._model ? D(this._model, this.selectedTalentIds, this.talentPoints) : N(this.talentPoints);
+	}
+	reset() {
+		this.selectedTalentIds.length !== 0 && (this.selectedTalentIds = [], this.#_("reset"));
+	}
+	selectTalent(e) {
+		let t = this._model?.talentById.get(e), n = this.selectionState;
+		return !t || n.selectedTalentIds.includes(e) || !O(t.pointCost, n) ? !1 : (this.selectedTalentIds = [...n.selectedTalentIds, e], this.#_("api"), !0);
+	}
+	deselectTalent(e) {
+		return this.selectionState.selectedTalentIds.includes(e) ? (this.selectedTalentIds = this.selectionState.selectedTalentIds.filter((t) => t !== e), this.#_("api"), !0) : !1;
+	}
+	retry() {
+		this.#p();
+	}
+	render() {
+		let e = this._renderSelectionState;
+		return u`
+      <section
+        class="container"
+        part="container"
+        aria-label=${`${this._model?.hero.name ?? this._model?.hero.id ?? "Fellowship hero"} talent calculator`}
+        aria-invalid=${String(e.overBudget)}
+      >
+        ${this.#o(e)}
+        ${this._status === "ready" && this._model ? this.#s(this._model) : this.#f()}
+        <p class="visually-hidden" role="status" aria-live="polite">${this._announcement}</p>
+      </section>
+    `;
+	}
+	#o(e) {
+		return u`
+      <header class="header" part="header">
+        <h2 class="heading" part="heading">Talent points</h2>
+        <div class="points-cluster">
+          <div
+            class="points"
+            part="points"
+            data-invalid=${String(e.overBudget)}
+            aria-label=${`${e.spentPoints} of ${this.talentPoints} talent points spent`}
+            aria-live="polite"
+          >
+            <span class="points-spent" part="points-spent">${e.spentPoints}</span>
+            <span class="points-separator" aria-hidden="true">/</span>
+            <span class="points-total" part="points-total">${this.talentPoints}</span>
+          </div>
+          ${this.showPointControls ? u`
+                  <div
+                    class="point-controls"
+                    part="point-controls"
+                    role="group"
+                    aria-label="Talent points"
+                  >
+                    <button
+                      class="point-control"
+                      part="point-control"
+                      type="button"
+                      aria-label="Decrease available talent points"
+                      title="Decrease available talent points"
+                      ?disabled=${this.talentPoints <= e.spentPoints}
+                      @click=${() => this.#g(this.talentPoints - 1, "decrement")}
+                    >
+                      −
+                    </button>
+                    <button
+                      class="point-control"
+                      part="point-control"
+                      type="button"
+                      aria-label="Increase available talent points"
+                      title="Increase available talent points"
+                      ?disabled=${this.talentPoints >= 14}
+                      @click=${() => this.#g(this.talentPoints + 1, "increment")}
+                    >
+                      +
+                    </button>
+                  </div>
+                ` : d}
+          <button
+            class="clear-all"
+            part="clear-all"
+            type="button"
+            ?disabled=${e.selectedTalentIds.length === 0}
+            @click=${this.reset}
+          >
+            Clear All
+          </button>
+        </div>
+      </header>
+    `;
+	}
+	#s(e) {
+		return e.rows.length === 0 ? u`
+        <div class="status" part="empty-state" role="status">
+          <div class="status-card">
+            <div class="status-mark" aria-hidden="true">◇</div>
+            <p class="status-title">No active talents</p>
+            <p class="status-copy">
+              ${e.hero.name ?? e.hero.id} has no positioned talents.
+            </p>
+          </div>
+        </div>
+      ` : u`
+      <div class="grid" part="grid" role="group" aria-label="Talent tiers">
+        ${h(e.rows, (e) => e.row, (e) => u`
+            <fieldset class="row" part="row">
+              <legend class="visually-hidden">Talent tier ${e.label}</legend>
+              <span class="row-label" part="row-label" aria-hidden="true">${e.label}</span>
+              <div class="row-talents">
+                ${h(e.talents, (e) => e.talent.id, (e) => this.#c(e))}
+              </div>
+            </fieldset>
+          `)}
+      </div>
+    `;
+	}
+	#c(e) {
+		let t = this._talentPresentation.get(e.talent.id);
+		if (!t) return d;
+		let { context: n, name: r, descriptionId: i, affordability: a, description: o } = t, { selected: s, disabled: c } = n, l = u`
+      <button
+        class="talent"
+        part="talent"
+        type="button"
+        aria-label=${`${r}, ${a}`}
+        aria-describedby=${i}
+        aria-pressed=${String(s)}
+        aria-disabled=${String(c)}
+        @click=${() => this.#h(e, s, c)}
+      >
+        ${this.#u(n)}
+        <span class="talent-cost" part="talent-cost">${e.pointCost ?? "–"}</span>
+      </button>
+    `;
+		return u`
+      ${this.showTooltips && (e.talent.description || c) ? u`
+              <fellowship-tooltip
+                .heading=${r}
+                .text=${e.talent.description ?? a}
+              >
+                ${l}
+              </fellowship-tooltip>
+            ` : l}
+      <span class="visually-hidden" id=${i}>${o}</span>
+    `;
+	}
+	#l(e) {
+		let t = this.renderTalent, n = this._model, r = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map();
+		if (n) for (let o of n.talentById.values()) {
+			let s = e.selectedTalentIds.includes(o.talent.id), c = O(o.pointCost, e), l = !s && !c, u = o.talent.name ?? o.talent.id, d = o.pointCost === null ? "This talent has no valid point cost." : l ? `Requires ${o.pointCost} talent points; ${Math.max(0, e.remainingPoints)} remaining.` : `${o.pointCost} talent ${o.pointCost === 1 ? "point" : "points"}.`, f = {
+				talent: o,
+				hero: n.hero,
+				selected: s,
+				affordable: c,
+				disabled: l,
+				spentPoints: e.spentPoints,
+				remainingPoints: e.remainingPoints,
+				talentPoints: this.talentPoints
+			};
+			if (a.set(o.talent.id, {
+				context: f,
+				name: u,
+				descriptionId: `talent-description-${o.row}-${o.column}`,
+				affordability: d,
+				description: [i(o.talent.description ?? ""), d].filter(Boolean).join(" ")
+			}), t) try {
+				r.set(o.talent.id, t(f));
+			} catch (e) {
+				this.#i.has(o.talent.id) || (this.#i.add(o.talent.id), this.#a.push({
+					code: "renderer-error",
+					message: `The talent renderer failed for “${o.talent.id}”: ${String(e)}.`,
+					talentId: o.talent.id
+				}));
+			}
+		}
+		this._talentPresentation = a, this._talentRenderContent = r;
+	}
+	#u(e) {
+		let t = e.talent, n = t.talent.name ?? t.talent.id, r = this.renderTalent && this._talentRenderContent.has(t.talent.id) ? this._talentRenderContent.get(t.talent.id) : u`
+            <slot name=${M(t.talent.id)}>
+              <span class="talent-name" part="talent-name" title=${n}>${n}</span>
+            </slot>
+          `;
+		return u`
+      ${this.#d(t, n)} ${r}
+    `;
+	}
+	#d(e, t) {
+		return e.imageUrl && !this._failedImages.has(e.talent.id) ? u`
+        <img
+          class="talent-icon"
+          part="talent-icon"
+          src=${e.imageUrl}
+          alt=""
+          draggable="false"
+          @error=${() => this.#b(e)}
+        />
+      ` : u`<span class="talent-icon-fallback" part="talent-icon-fallback">${t.split(/\s+/).map((e) => e[0]).join("").slice(0, 2).toUpperCase()}</span>`;
+	}
+	#f() {
+		let e = this._status === "loading", t = this._status === "empty", n = e ? "Reading talent codex" : t ? "Choose a hero" : "Talents unavailable", r = e ? "Loading the hero and their available talents." : t ? "Set the hero-id attribute or heroId property to build a talent loadout." : this._error?.message ?? "An unexpected talent data error occurred.";
+		return u`
+      <div
+        class="status"
+        part=${this._status === "error" ? "error-state" : "status"}
+        role=${this._status === "error" ? "alert" : "status"}
+      >
+        <div class="status-card">
+          <div class="status-mark" aria-hidden="true">${e ? "…" : "✦"}</div>
+          <p class="status-title">${n}</p>
+          <p class="status-copy">${r}</p>
+          ${this._status === "error" ? u`<button class="retry-button" type="button" @click=${this.retry}>Retry</button>` : d}
+        </div>
+      </div>
+    `;
+	}
+	async #p() {
+		let t = this.heroId.trim(), n = ++this.#t;
+		if (this.#e?.abort(), this.#e = new AbortController(), this._model = null, this._error = null, this._failedImages = /* @__PURE__ */ new Set(), this.#i.clear(), this.#n = null, !t) {
+			this._status = "empty";
+			return;
+		}
+		this._status = "loading";
+		let r = this.dataSource ?? y(this.assetBaseUrl ? { assetBaseUrl: this.assetBaseUrl } : {});
+		try {
+			let i = await r.loadHeroTalents(t, this.#e.signal);
+			if (n !== this.#t || this.#e.signal.aborted) return;
+			if (i.manifest.schemaVersion !== 1) throw new e("unsupported-schema", `Unsupported fellowship-data schema version: ${String(i.manifest.schemaVersion)}.`);
+			let a = C(i, r);
+			this._model = a, this._status = "ready";
+			let o = this.#m(!1);
+			await this.updateComplete;
+			let s = this.selectionState;
+			this.dispatchEvent(new CustomEvent("fellowship-talents-ready", {
+				...A,
+				detail: {
+					data: i,
+					model: a,
+					selection: s
+				}
+			})), a.warnings.length > 0 && this.#x(a.warnings), o && this.#_("normalization"), this.#y();
+		} catch (e) {
+			if (n !== this.#t || this.#e.signal.aborted) return;
+			this.#C(e);
+		}
+	}
+	#m(e) {
+		if (!this._model) return !1;
+		let t = E(this._model, this.selectedTalentIds);
+		return t.selectedTalentIds.length !== this.selectedTalentIds.length || t.selectedTalentIds.some((e, t) => e !== this.selectedTalentIds[t]) ? (this.selectedTalentIds = t.selectedTalentIds, t.removedTalentIds.length > 0 && this.#x([{
+			code: "invalid-selection",
+			message: `Removed unavailable talent selections: ${t.removedTalentIds.join(", ")}.`,
+			talentId: null
+		}]), e && this.#_("normalization"), !0) : !1;
+	}
+	#h(e, t, n) {
+		if (t) {
+			this.selectedTalentIds = this.selectionState.selectedTalentIds.filter((t) => t !== e.talent.id), this.#_("user");
+			return;
+		}
+		if (n) {
+			this._announcement = this.selectionState.overBudget ? "The current build exceeds the available talent points. Deselect a talent first." : `Not enough points for ${e.talent.name ?? e.talent.id}.`;
+			return;
+		}
+		this.selectedTalentIds = [...this.selectionState.selectedTalentIds, e.talent.id], this.#_("user");
+	}
+	#g(e, t) {
+		let n = T(e), r = this.selectionState;
+		n === this.talentPoints || n < r.spentPoints || (this.talentPoints = n, this.#r = !0, this.#v(t));
+	}
+	#_(e) {
+		let t = this._model ? D(this._model, this.selectedTalentIds, this.talentPoints) : N(this.talentPoints);
+		this.dispatchEvent(new CustomEvent("fellowship-talent-selection-change", {
+			...A,
+			detail: {
+				...t,
+				source: e
+			}
+		}));
+	}
+	#v(e) {
+		let t = this.selectionState;
+		this.dispatchEvent(new CustomEvent("fellowship-talent-points-change", {
+			...A,
+			detail: {
+				...t,
+				talentPoints: this.talentPoints,
+				source: e
+			}
+		}));
+	}
+	#y() {
+		let e = this.selectionState;
+		if (!e.overBudget) {
+			this.#n = null, this.removeAttribute("aria-invalid");
+			return;
+		}
+		this.setAttribute("aria-invalid", "true");
+		let t = `${this.talentPoints}:${e.selectedTalentIds.join(",")}`;
+		t !== this.#n && (this.#n = t, this.#x([{
+			code: "over-budget",
+			message: `The selected talents cost ${e.spentPoints} points, exceeding the ${this.talentPoints}-point budget.`,
+			talentId: null
+		}]));
+	}
+	#b(e) {
+		this._failedImages.has(e.talent.id) || (this._failedImages = new Set(this._failedImages).add(e.talent.id), this.#x([{
+			code: "asset-image-error",
+			message: `The icon for talent “${e.talent.id}” could not be loaded.`,
+			talentId: e.talent.id
+		}]));
+	}
+	#x(e) {
+		this.dispatchEvent(new CustomEvent("fellowship-talents-warning", {
+			...A,
+			detail: {
+				warnings: e,
+				model: this._model
+			}
+		}));
+	}
+	#S() {
+		if (this.#a.length === 0) return;
+		let e = this.#a;
+		this.#a = [], this.#x(e);
+	}
+	#C(t) {
+		let n = typeof t == "object" && t && "code" in t && "message" in t ? {
+			code: String(t.code),
+			message: String(t.message),
+			...t instanceof e && t.cause !== void 0 ? { cause: t.cause } : {}
+		} : {
+			code: "unknown",
+			message: t instanceof Error ? t.message : String(t)
+		};
+		this._error = n, this._status = "error", this.dispatchEvent(new CustomEvent("fellowship-talents-error", {
+			...A,
+			detail: n
+		}));
+	}
+};
+r([p({
+	type: String,
+	attribute: "hero-id"
+})], P.prototype, "heroId", void 0), r([p({
+	type: Number,
+	attribute: "talent-points"
+})], P.prototype, "talentPoints", void 0), r([p({
+	attribute: !1,
+	hasChanged: j
+})], P.prototype, "selectedTalentIds", void 0), r([p({
+	type: String,
+	attribute: "asset-base-url"
+})], P.prototype, "assetBaseUrl", void 0), r([p({ attribute: !1 })], P.prototype, "dataSource", void 0), r([p({ attribute: !1 })], P.prototype, "renderTalent", void 0), r([p({
+	type: Boolean,
+	attribute: "show-point-controls"
+})], P.prototype, "showPointControls", void 0), r([p({
+	type: Boolean,
+	attribute: "show-tooltips"
+})], P.prototype, "showTooltips", void 0), r([m()], P.prototype, "_status", void 0), r([m()], P.prototype, "_error", void 0), r([m()], P.prototype, "_model", void 0), r([m()], P.prototype, "_failedImages", void 0), r([m()], P.prototype, "_announcement", void 0), r([m()], P.prototype, "_renderSelectionState", void 0), r([m()], P.prototype, "_talentPresentation", void 0), r([m()], P.prototype, "_talentRenderContent", void 0), P = r([f("fellowship-talent-calculator")], P);
+var F = () => {
+	a(), customElements.get("fellowship-talent-calculator") || customElements.define("fellowship-talent-calculator", P);
+};
+//#endregion
+export { O as a, T as c, y as d, w as i, C as l, F as n, D as o, M as r, E as s, P as t, x as u };
+
+//# sourceMappingURL=talent-calculator-Ch1Pbbba.js.map