@crockery/fellowship-components 0.1.0

package/dist/chunks/dungeon-map-IPN6sEDj.js

@@ -0,0 +1,1144 @@
+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 { findImage as i, getAssetUrl as a } from "@crockery/fellowship-data";
+import { LitElement as o, css as s, html as c, nothing as l } from "lit";
+import { customElement as u, property as d, query as f, state as p } from "lit/decorators.js";
+import { repeat as m } from "lit/directives/repeat.js";
+import { styleMap as h } from "lit/directives/style-map.js";
+//#region src/data/package-data-source.ts
+var g, _ = (t) => {
+	if (t?.aborted) throw new e("aborted", "The dungeon data request was aborted.", t.reason);
+}, v = () => (g ??= Promise.all([
+	import("@crockery/fellowship-data/dungeons"),
+	import("@crockery/fellowship-data/enemies"),
+	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)}.`);
+	return {
+		manifest: i,
+		dungeons: new Map(t.default.map((e) => [e.id, e])),
+		enemies: new Map(n.default.map((e) => [e.id, e]))
+	};
+}).catch((t) => {
+	throw g = void 0, t instanceof e ? t : new e("data-load-failed", "Unable to load @crockery/fellowship-data.", t);
+}), g), y = (t = {}) => ({
+	async loadDungeon(t, n) {
+		_(n);
+		let r = await v();
+		_(n);
+		let i = r.dungeons.get(t);
+		if (!i) throw new e("dungeon-not-found", `No dungeon with ID “${t}” exists in @crockery/fellowship-data.`);
+		return {
+			manifest: r.manifest,
+			dungeon: i,
+			enemies: r.enemies
+		};
+	},
+	resolveAssetUrl(e) {
+		return t.assetBaseUrl ? a(e, { baseUrl: t.assetBaseUrl }) : a(e);
+	}
+}), b = s`
+  :host {
+    --fellowship-map-soot: var(--_fellowship-field-canvas);
+    --fellowship-map-ink: var(--_fellowship-field-ink);
+    --fellowship-map-muted-ink: var(--_fellowship-field-muted);
+    --fellowship-map-border: var(--_fellowship-field-border);
+    --fellowship-map-focus: var(--_fellowship-field-focus);
+    --fellowship-map-rune: var(--_fellowship-field-accent);
+    --fellowship-map-ember: var(--_fellowship-field-ember);
+    --fellowship-map-control-surface: color-mix(
+      in srgb,
+      var(--_fellowship-field-surface-raised) 92%,
+      transparent
+    );
+    --fellowship-map-enemy-size: 32px;
+    --fellowship-map-radius: var(--_fellowship-field-radius);
+    --fellowship-map-font-family: var(--_fellowship-field-font-family);
+    --fellowship-map-tactical-font-family: var(--_fellowship-field-mono-font-family);
+
+    display: block;
+    inline-size: 100%;
+    min-block-size: 240px;
+    aspect-ratio: 2 / 1;
+    container-type: inline-size;
+    color: var(--fellowship-map-ink);
+    font-family: var(--fellowship-map-font-family);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  .viewer,
+  .viewport {
+    inline-size: 100%;
+    block-size: 100%;
+    min-block-size: inherit;
+  }
+
+  .viewer {
+    position: relative;
+    overflow: hidden;
+    border: 1px solid var(--fellowship-map-border);
+    border-radius: calc(var(--fellowship-map-radius) + 2px);
+    background: var(--fellowship-map-soot);
+  }
+
+  .viewport {
+    position: relative;
+    overflow: hidden;
+    outline: none;
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .viewport[data-panning="true"] {
+    cursor: grabbing;
+  }
+
+  .viewport:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--fellowship-map-focus);
+  }
+
+  .stage {
+    position: absolute;
+    inset: 0 auto auto 0;
+    transform-origin: 0 0;
+    will-change: transform;
+  }
+
+  .map-canvas,
+  .overlay {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .map-canvas {
+    display: block;
+    background: #d5ceb1;
+    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
+  }
+
+  .overlay {
+    pointer-events: none;
+  }
+
+  .group-anchor {
+    position: absolute;
+    pointer-events: none;
+  }
+
+  .default-group,
+  .custom-group-host {
+    position: absolute;
+    inset: 0;
+  }
+
+  .group-ring {
+    position: absolute;
+    inset: 0;
+    border: calc(1px * var(--fellowship-map-inverse-scale, 1)) solid transparent;
+    border-radius: 50%;
+    background: transparent;
+    transition:
+      border-color 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 140ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  .group-anchor:has(.enemy-anchor:hover) .group-ring,
+  .group-anchor:focus-within .group-ring {
+    border-color: var(--fellowship-map-rune);
+    background: color-mix(in srgb, var(--fellowship-map-rune) 8%, transparent);
+  }
+
+  .group-label {
+    position: absolute;
+    inset: 0 auto auto 50%;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    min-block-size: 22px;
+    padding: 0 8px 0 12px;
+    border-radius: 4px;
+    background: var(--fellowship-map-control-surface);
+    color: var(--fellowship-map-ink);
+    box-shadow: inset 0 0 0 1px var(--fellowship-map-border);
+    font-family: var(--fellowship-map-tactical-font-family);
+    font-size: 10px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.04em;
+    line-height: 1;
+    white-space: nowrap;
+    transform: translate(-50%, -45%) scale(var(--fellowship-map-inverse-scale, 1));
+    transform-origin: center;
+  }
+
+  .group-label::before {
+    position: absolute;
+    inset: 5px auto 5px 0;
+    width: 2px;
+    background: var(--fellowship-map-rune);
+    content: "";
+  }
+
+  .enemy-anchor {
+    position: absolute;
+    z-index: 2;
+    inline-size: 0;
+    block-size: 0;
+    pointer-events: auto;
+  }
+
+  .enemy-visual {
+    position: absolute;
+    inset: 0 auto auto 0;
+    transform: translate(-50%, -50%) scale(var(--fellowship-map-inverse-scale, 1));
+    transform-origin: center;
+  }
+
+  .enemy-marker {
+    position: relative;
+    display: grid;
+    inline-size: var(--fellowship-map-enemy-size);
+    block-size: var(--fellowship-map-enemy-size);
+    place-items: center;
+    overflow: hidden;
+    border: 2px solid var(--fellowship-map-rune);
+    border-radius: 50%;
+    background: var(--_fellowship-field-surface-raised);
+    color: var(--fellowship-map-ink);
+    font-family: var(--fellowship-map-tactical-font-family);
+    font-size: 10px;
+    font-weight: 600;
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 68%);
+    transition:
+      border-color 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  .enemy-marker[data-boss="true"] {
+    inline-size: calc(var(--fellowship-map-enemy-size) + 4px);
+    block-size: calc(var(--fellowship-map-enemy-size) + 4px);
+    border-color: var(--fellowship-map-ember);
+  }
+
+  .enemy-anchor:hover .enemy-marker {
+    transform: scale(1.08);
+  }
+
+  .enemy-image {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  .controls,
+  .map-selector {
+    position: absolute;
+    z-index: 20;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px;
+    border-radius: calc(var(--fellowship-map-radius) + 2px);
+    background: var(--fellowship-map-control-surface);
+    box-shadow: inset 0 0 0 1px var(--fellowship-map-border);
+    backdrop-filter: blur(12px);
+  }
+
+  .map-selector {
+    inset: 12px auto auto 12px;
+    max-inline-size: calc(100% - 172px);
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  .map-selector::-webkit-scrollbar {
+    display: none;
+  }
+
+  .controls {
+    inset: 12px 12px auto auto;
+  }
+
+  .control-button,
+  .map-selector-button {
+    position: relative;
+    min-inline-size: 44px;
+    min-block-size: 44px;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--fellowship-map-muted-ink);
+    font: inherit;
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      color 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      background-color 140ms cubic-bezier(0.23, 1, 0.32, 1),
+      transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  .control-button {
+    font-family: var(--fellowship-map-tactical-font-family);
+    font-size: 16px;
+    font-weight: 500;
+  }
+
+  .map-selector-button {
+    padding-inline: 12px;
+    letter-spacing: 0.02em;
+    white-space: nowrap;
+  }
+
+  .map-selector-button[aria-selected="true"] {
+    background: rgb(255 255 255 / 6%);
+    color: var(--fellowship-map-ink);
+  }
+
+  .map-selector-button[aria-selected="true"]::after {
+    position: absolute;
+    inset: auto 12px 0;
+    height: 2px;
+    background: var(--fellowship-map-rune);
+    content: "";
+  }
+
+  .control-button:focus-visible,
+  .map-selector-button:focus-visible,
+  .retry-button:focus-visible {
+    outline: 2px solid var(--fellowship-map-focus);
+    outline-offset: 2px;
+  }
+
+  .control-button:active,
+  .map-selector-button:active,
+  .retry-button:active {
+    transform: scale(0.97);
+  }
+
+  .status {
+    position: absolute;
+    z-index: 30;
+    inset: 0;
+    display: grid;
+    padding: 24px;
+    place-items: center;
+    background: color-mix(in srgb, var(--fellowship-map-soot) 84%, transparent);
+    text-align: center;
+  }
+
+  .status-card {
+    display: grid;
+    max-inline-size: 376px;
+    gap: 8px;
+    justify-items: center;
+    padding: 24px;
+    border-radius: calc(var(--fellowship-map-radius) + 2px);
+    background: var(--fellowship-map-control-surface);
+    box-shadow: inset 0 0 0 1px var(--fellowship-map-border);
+  }
+
+  .status-mark {
+    position: relative;
+    display: grid;
+    inline-size: 40px;
+    block-size: 24px;
+    place-items: center;
+    color: var(--fellowship-map-rune);
+    font-family: var(--fellowship-map-tactical-font-family);
+    font-size: 12px;
+  }
+
+  .status-mark::before,
+  .status-mark::after {
+    position: absolute;
+    width: 8px;
+    height: 1px;
+    background: var(--fellowship-map-border);
+    content: "";
+  }
+
+  .status-mark::before {
+    left: 0;
+  }
+
+  .status-mark::after {
+    right: 0;
+  }
+
+  .status-title {
+    margin: 4px 0 0;
+    color: var(--fellowship-map-ink);
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 24px;
+    text-wrap: balance;
+  }
+
+  .status-copy {
+    margin: 0;
+    color: var(--fellowship-map-muted-ink);
+    font-size: 14px;
+    line-height: 1.5;
+    text-wrap: pretty;
+  }
+
+  .retry-button {
+    min-block-size: 44px;
+    margin-block-start: 8px;
+    padding-inline: 16px;
+    border: 1px solid var(--fellowship-map-border);
+    border-radius: 4px;
+    background: var(--_fellowship-field-inset);
+    color: var(--fellowship-map-ink);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+  }
+
+  .empty-badge {
+    position: absolute;
+    z-index: 20;
+    inset: auto auto 12px 12px;
+    padding: 8px;
+    border-radius: 4px;
+    background: var(--fellowship-map-control-surface);
+    color: var(--fellowship-map-muted-ink);
+    box-shadow: inset 0 0 0 1px var(--fellowship-map-border);
+    font-size: 12px;
+  }
+
+  .visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  @media (hover: hover) {
+    .control-button:hover,
+    .map-selector-button:hover {
+      background: rgb(255 255 255 / 6%);
+      color: var(--fellowship-map-ink);
+    }
+
+    .retry-button:hover {
+      border-color: color-mix(in srgb, var(--fellowship-map-rune) 48%, transparent);
+      color: var(--fellowship-map-focus);
+    }
+  }
+
+  @container (max-width: 560px) {
+    .map-selector,
+    .controls {
+      inset-block-start: 8px;
+    }
+
+    .map-selector {
+      inset-inline-start: 8px;
+      max-inline-size: calc(100% - 164px);
+    }
+
+    .controls {
+      inset-inline-end: 8px;
+    }
+
+    .map-selector-button {
+      padding-inline: 8px;
+    }
+
+    .map-selector-button[aria-selected="true"]::after {
+      inset-inline: 8px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .group-ring,
+    .enemy-marker,
+    .control-button,
+    .map-selector-button,
+    .retry-button {
+      transition: none;
+    }
+
+    .control-button:active,
+    .map-selector-button:active,
+    .retry-button:active {
+      transform: none;
+    }
+  }
+`, x = .018, S = .036, C = .06, w = .12, T = (e, t, n) => Math.min(n, Math.max(t, e)), E = (e) => {
+	let t = e.map(({ position: e }) => e.x), n = e.map(({ position: e }) => e.y), r = Math.min(...t), i = Math.max(...t), a = Math.min(...n), o = Math.max(...n);
+	return {
+		x: r,
+		y: a,
+		width: i - r,
+		height: o - a
+	};
+}, D = (e) => {
+	let t = e.x + e.width / 2, n = e.y + e.height / 2, r = Math.max(C, e.width + x * 2), i = Math.max(w, e.height + S * 2);
+	return {
+		x: T(t - r / 2, 0, Math.max(0, 1 - r)),
+		y: T(n - i / 2, 0, Math.max(0, 1 - i)),
+		width: Math.min(r, 1),
+		height: Math.min(i, 1)
+	};
+}, O = (e) => ({
+	x: e.reduce((e, t) => e + t.position.x, 0) / e.length,
+	y: e.reduce((e, t) => e + t.position.y, 0) / e.length
+}), k = (e) => {
+	let t = e.map(({ enemy: e }) => e?.dungeonScore).filter((e) => typeof e == "number");
+	return t.length > 0 ? t.reduce((e, t) => e + t, 0) : null;
+}, A = (e, t) => {
+	let n = E(t);
+	return {
+		id: e,
+		enemies: t,
+		enemyBounds: n,
+		visualBounds: D(n),
+		center: O(t),
+		dungeonScore: k(t)
+	};
+}, j = (e) => e !== null && Number.isFinite(e.x) && Number.isFinite(e.y) && e.x >= 0 && e.x <= 1 && e.y >= 0 && e.y <= 1, M = (e, t, n) => {
+	let r = [], a = /* @__PURE__ */ new Map();
+	return e.dungeon.enemies.forEach((o, s) => {
+		if (o.mapImageId !== t.id) return;
+		if (!j(o.mapPosition)) {
+			r.push({
+				code: "invalid-map-position",
+				message: `Skipped ${o.id}: its map position is missing or outside the map.`,
+				placementIndex: s,
+				enemyId: o.id
+			});
+			return;
+		}
+		let c = e.enemies.get(o.id) ?? null;
+		c || r.push({
+			code: "missing-enemy",
+			message: `No enemy metadata exists for ${o.id}.`,
+			placementIndex: s,
+			enemyId: o.id
+		});
+		let l = c ? i(c.images, {
+			type: "enemy",
+			size: "200"
+		}) : null, u = null;
+		if (l) try {
+			u = n.resolveAssetUrl(l);
+		} catch (e) {
+			r.push({
+				code: "asset-url-error",
+				message: `Could not resolve the image URL for ${o.id}: ${String(e)}.`,
+				placementIndex: s,
+				enemyId: o.id
+			});
+		}
+		else c && r.push({
+			code: "missing-enemy-image",
+			message: `No 200px enemy image exists for ${o.id}.`,
+			placementIndex: s,
+			enemyId: o.id
+		});
+		let d = {
+			instanceId: `${e.dungeon.id}:${t.id}:${s}`,
+			enemy: c,
+			placement: o,
+			position: o.mapPosition,
+			imageUrl: u
+		}, f = o.groupId === null ? `singleton:${s}` : `group:${o.groupId}`, p = a.get(f) ?? {
+			id: o.groupId,
+			enemies: []
+		};
+		p.enemies.push(d), a.set(f, p);
+	}), {
+		dungeon: e.dungeon,
+		mapImage: t,
+		groups: [...a.values()].map(({ id: e, enemies: t }) => A(e, t)),
+		warnings: r
+	};
+}, N = (e, t) => {
+	let n = (e.id.split(":").at(-1) ?? e.id).replace(/^T_(?:Map_)?/i, "").replace(/^map[-_]/i, "").replaceAll(/[_-]+/g, " ").replace(/([a-z\d])([A-Z])/g, "$1 $2").trim(), r = t.id.split(".").at(-1)?.toLowerCase();
+	return (n.split(/\s+/).filter((e) => e.toLowerCase() !== r).join(" ") || n || "Map").replace(/\b[a-z]/g, (e) => e.toUpperCase());
+}, P = (e, t, n) => Math.min(n, Math.max(t, e)), F = class {
+	constructor() {
+		this.#e = 0, this.#t = 0, this.#n = 0, this.#r = 0, this.#i = 1, this.#a = 0, this.#o = 0, this.maxZoom = 8;
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	get state() {
+		return {
+			zoom: this.#i,
+			scale: this.scale,
+			x: this.#a,
+			y: this.#o
+		};
+	}
+	get scale() {
+		return this.fitScale * this.#i;
+	}
+	get fitScale() {
+		return !this.#e || !this.#t || !this.#n || !this.#r ? 1 : Math.min(this.#e / this.#n, this.#t / this.#r);
+	}
+	setDimensions(e, t, n, r) {
+		let i = this.scale, a = this.#n ? (this.#e / 2 - this.#a) / i / this.#n : .5, o = this.#r ? (this.#t / 2 - this.#o) / i / this.#r : .5;
+		return this.#e = Math.max(0, e), this.#t = Math.max(0, t), this.#n = Math.max(0, n), this.#r = Math.max(0, r), this.#a = this.#e / 2 - a * this.#n * this.scale, this.#o = this.#t / 2 - o * this.#r * this.scale, this.#s(), this.state;
+	}
+	fit() {
+		return this.#i = 1, this.#a = (this.#e - this.#n * this.scale) / 2, this.#o = (this.#t - this.#r * this.scale) / 2, this.state;
+	}
+	zoomAt(e, t = this.#e / 2, n = this.#t / 2) {
+		let r = this.scale, i = (t - this.#a) / r, a = (n - this.#o) / r;
+		return this.#i = P(this.#i * e, 1, Math.max(1, this.maxZoom)), this.#a = t - i * this.scale, this.#o = n - a * this.scale, this.#s(), this.state;
+	}
+	panBy(e, t) {
+		return this.#a += e, this.#o += t, this.#s(), this.state;
+	}
+	#s() {
+		let e = this.#n * this.scale, t = this.#r * this.scale;
+		this.#a = e <= this.#e ? (this.#e - e) / 2 : P(this.#a, this.#e - e, 0), this.#o = t <= this.#t ? (this.#t - t) / 2 : P(this.#o, this.#t - t, 0);
+	}
+}, I = {
+	bubbles: !0,
+	composed: !0
+}, L = class extends o {
+	constructor(...e) {
+		super(...e), this.dungeonId = "", this.mapImageId = null, this.assetBaseUrl = null, this.dataSource = null, this.renderEnemy = null, this.renderGroup = null, this.mapLabelFormatter = null, this.showControls = !0, this.showMapSelector = !0, this.maxZoom = 8, this.externalOverlay = !1, this._status = "empty", this._error = null, this._data = null, this._model = null, this._selectedMap = null, this._viewportState = {
+			zoom: 1,
+			scale: 1,
+			x: 0,
+			y: 0
+		}, this._isPanning = !1, this._enemyRenderContent = /* @__PURE__ */ new Map(), this._groupRenderContent = /* @__PURE__ */ new Map(), this._mapLabels = /* @__PURE__ */ new Map(), this.#e = null, this.#t = null, this.#n = 0, this.#r = 0, this.#i = null, this.#a = new F(), this.#o = /* @__PURE__ */ new Map(), this.#s = null, this.#c = 0, this.#l = null, this.#u = /* @__PURE__ */ new Set(), this.#d = [], this.#j = (e) => {
+			if (![
+				"ArrowLeft",
+				"ArrowRight",
+				"Home",
+				"End"
+			].includes(e.key)) return;
+			let t = this._data?.dungeon.mapImages ?? [], n = t.findIndex(({ id: e }) => e === this._selectedMap?.id), r = e.key === "Home" ? 0 : e.key === "End" ? t.length - 1 : e.key === "ArrowRight" ? (n + 1) % t.length : (n - 1 + t.length) % t.length, i = t[r];
+			i && (e.preventDefault(), this.#A(i), this.updateComplete.then(() => {
+				this.renderRoot.querySelector(`[data-map-index="${r}"]`)?.focus();
+			}));
+		}, this.#M = (e) => {
+			if (!this._model || this._status !== "ready") return;
+			e.preventDefault();
+			let t = this._viewportElement?.getBoundingClientRect();
+			if (!t) return;
+			let n = Math.exp(-e.deltaY * .0015);
+			this.#a.zoomAt(n, e.clientX - t.left, e.clientY - t.top), this.#z("wheel");
+		}, this.#N = (e) => {
+			if (!(e.target !== this._viewportElement || !this._model)) {
+				if (e.key === "+" || e.key === "=") e.preventDefault(), this.#a.zoomAt(1.35);
+				else if (e.key === "-") e.preventDefault(), this.#a.zoomAt(1 / 1.35);
+				else if (e.key === "0") e.preventDefault(), this.#a.fit();
+				else if (e.key === "ArrowLeft") e.preventDefault(), this.#a.panBy(56, 0);
+				else if (e.key === "ArrowRight") e.preventDefault(), this.#a.panBy(-56, 0);
+				else if (e.key === "ArrowUp") e.preventDefault(), this.#a.panBy(0, 56);
+				else if (e.key === "ArrowDown") e.preventDefault(), this.#a.panBy(0, -56);
+				else return;
+				this.#z("keyboard");
+			}
+		}, this.#P = (e) => {
+			if (!this._model || this.#L(e)) return;
+			let t = this._viewportElement, n = t?.getBoundingClientRect();
+			if (!t || !n) return;
+			t.setPointerCapture(e.pointerId);
+			let r = {
+				x: e.clientX - n.left,
+				y: e.clientY - n.top
+			};
+			if (this.#o.set(e.pointerId, r), this._isPanning = !0, this.#o.size === 1) this.#s = r;
+			else if (this.#o.size === 2) {
+				let [e, t] = [...this.#o.values()];
+				e && t && (this.#c = Math.hypot(t.x - e.x, t.y - e.y), this.#l = {
+					x: (e.x + t.x) / 2,
+					y: (e.y + t.y) / 2
+				});
+			}
+		}, this.#F = (e) => {
+			if (!this.#o.has(e.pointerId)) return;
+			let t = this._viewportElement?.getBoundingClientRect();
+			if (!t) return;
+			let n = {
+				x: e.clientX - t.left,
+				y: e.clientY - t.top
+			};
+			if (this.#o.set(e.pointerId, n), this.#o.size === 1 && this.#s) {
+				this.#a.panBy(n.x - this.#s.x, n.y - this.#s.y), this.#s = n, this.#z("pan");
+				return;
+			}
+			if (this.#o.size === 2) {
+				let [e, t] = [...this.#o.values()];
+				if (!e || !t) return;
+				let n = Math.hypot(t.x - e.x, t.y - e.y), r = {
+					x: (e.x + t.x) / 2,
+					y: (e.y + t.y) / 2
+				};
+				this.#c > 0 && this.#a.zoomAt(n / this.#c, r.x, r.y), this.#l && this.#a.panBy(r.x - this.#l.x, r.y - this.#l.y), this.#c = n, this.#l = r, this.#z("pinch");
+			}
+		}, this.#I = (e) => {
+			this.#o.delete(e.pointerId), this.#o.size === 1 ? this.#s = [...this.#o.values()][0] ?? null : this.#o.size === 0 && (this.#s = null, this.#l = null, this.#c = 0, this._isPanning = !1);
+		};
+	}
+	static {
+		this.styles = [n, b];
+	}
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	#l;
+	#u;
+	#d;
+	connectedCallback() {
+		super.connectedCallback(), t(this.ownerDocument), this.#i ??= new ResizeObserver(() => this.#R());
+	}
+	disconnectedCallback() {
+		this.#t?.abort(), this.#i?.disconnect(), super.disconnectedCallback();
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e);
+		let t = this._viewportElement;
+		t && this.#i?.observe(t);
+	}
+	updated(e) {
+		if (super.updated(e), this.#V(), e.has("dungeonId") || e.has("dataSource") || e.has("assetBaseUrl")) {
+			queueMicrotask(() => {
+				this.isConnected && this.#m();
+			});
+			return;
+		}
+		e.has("mapImageId") && this._data && queueMicrotask(() => {
+			this.isConnected && this.#h(!0);
+		}), e.has("maxZoom") && e.get("maxZoom") !== void 0 && (this.#a.maxZoom = Math.max(1, this.maxZoom), this.#a.zoomAt(1), queueMicrotask(() => this.#z("button")));
+	}
+	willUpdate(e) {
+		super.willUpdate(e), (e.has("renderEnemy") || e.has("renderGroup") || e.has("mapLabelFormatter")) && this.#u.clear(), (e.has("_model") || e.has("renderEnemy") || e.has("renderGroup")) && this.#v(), (e.has("_data") || e.has("mapLabelFormatter")) && this.#y();
+	}
+	fitToView() {
+		this.#a.fit(), this.#z("fit");
+	}
+	zoomIn() {
+		this.#a.zoomAt(1.35), this.#z("button");
+	}
+	zoomOut() {
+		this.#a.zoomAt(1 / 1.35), this.#z("button");
+	}
+	retry() {
+		this.#m();
+	}
+	get renderModel() {
+		return this._model;
+	}
+	render() {
+		let e = this._model, t = this._viewportState, n = this.#p, r = e ? {
+			width: `${e.mapImage.width}px`,
+			height: `${e.mapImage.height}px`,
+			transform: `translate3d(${t.x}px, ${t.y}px, 0) scale(${t.scale})`,
+			"--fellowship-map-inverse-scale": String(1 / t.scale)
+		} : {};
+		return c`
+      <section class="viewer" aria-label=${this.#f}>
+        <div
+          class="viewport"
+          part="viewport"
+          role="region"
+          aria-label="Interactive dungeon map"
+          tabindex="0"
+          aria-describedby="map-instructions"
+          data-panning=${String(this._isPanning)}
+          @wheel=${this.#M}
+          @keydown=${this.#N}
+          @pointerdown=${this.#P}
+          @pointermove=${this.#F}
+          @pointerup=${this.#I}
+          @pointercancel=${this.#I}
+        >
+          ${e ? c`
+                  <div
+                    class="stage"
+                    id="map-stage"
+                    role=${n === l ? l : "tabpanel"}
+                    aria-labelledby=${n}
+                    style=${h(r)}
+                  >
+                    <canvas
+                      class="map-canvas"
+                      part="map-canvas"
+                      role="img"
+                      aria-label=${`${e.dungeon.name ?? e.dungeon.id}, ${this.#k(e.mapImage)}`}
+                      .width=${e.mapImage.width}
+                      .height=${e.mapImage.height}
+                    ></canvas>
+                    <div class="overlay" part="overlay">
+                      ${this.externalOverlay ? c`<slot name="overlay"></slot>` : this.#b(e)}
+                    </div>
+                  </div>
+                  ${this.#E(e)} ${this.#D()}
+                  ${e.groups.length === 0 && this._status === "ready" ? c`<div class="empty-badge">No enemy placements on this map</div>` : l}
+                ` : l}
+          ${this.#O()}
+          <p class="visually-hidden" id="map-instructions">
+            Drag to pan. Use the mouse wheel, plus and minus keys, or zoom controls to zoom. Press
+            zero to fit the full map.
+          </p>
+        </div>
+      </section>
+    `;
+	}
+	get #f() {
+		return this._data ? `${this._data.dungeon.name ?? this._data.dungeon.id} dungeon map` : "Fellowship dungeon map";
+	}
+	get #p() {
+		if (!this.showMapSelector || !this._model || this._model.dungeon.mapImages.length <= 1 || !this._selectedMap) return l;
+		let e = this._model.dungeon.mapImages.findIndex((e) => e.id === this._selectedMap?.id);
+		return e >= 0 ? `map-tab-${e}` : l;
+	}
+	async #m() {
+		let t = this.dungeonId.trim(), n = ++this.#n;
+		if (this.#r += 1, this.#t?.abort(), this.#t = new AbortController(), this._data = null, this._model = null, this._selectedMap = null, this._error = null, this.#u.clear(), !t) {
+			this._status = "empty";
+			return;
+		}
+		this._status = "loading";
+		let r = this.dataSource ?? y(this.assetBaseUrl ? { assetBaseUrl: this.assetBaseUrl } : {});
+		this.#e = r;
+		try {
+			let i = await r.loadDungeon(t, this.#t.signal);
+			if (n !== this.#n || this.#t.signal.aborted) return;
+			if (i.manifest.schemaVersion !== 1) throw new e("unsupported-schema", `Unsupported fellowship-data schema version: ${String(i.manifest.schemaVersion)}.`);
+			this._data = i, await this.#h(!0);
+		} catch (e) {
+			if (n !== this.#n || this.#t.signal.aborted) return;
+			this.#_(e);
+		}
+	}
+	async #h(e) {
+		let t = this._data, n = this.#e;
+		if (!t || !n) return;
+		let r = this.mapImageId ? t.dungeon.mapImages.find(({ id: e }) => e === this.mapImageId) : t.dungeon.mapImages[0];
+		if (!r) {
+			this.#_({
+				code: "map-not-found",
+				message: this.mapImageId ? `No map image with ID “${this.mapImageId}” exists for this dungeon.` : "This dungeon does not include a map image."
+			});
+			return;
+		}
+		let i = ++this.#r, a = M(t, r, n);
+		this._model = a, this._selectedMap = r, this._status = "loading", this._error = null, await this.updateComplete;
+		let o = this._viewportElement;
+		o && (this.#a.maxZoom = Math.max(1, this.maxZoom), this.#a.setDimensions(o.clientWidth, o.clientHeight, r.width, r.height), e && this.#a.fit(), this._viewportState = this.#a.state, await this.updateComplete);
+		try {
+			if (await this.#g(r, n, i), i !== this.#r) return;
+			this._status = "ready", this.dispatchEvent(new CustomEvent("fellowship-map-ready", {
+				...I,
+				detail: {
+					model: a,
+					data: t
+				}
+			})), a.warnings.length > 0 && this.dispatchEvent(new CustomEvent("fellowship-map-warning", {
+				...I,
+				detail: {
+					warnings: a.warnings,
+					model: a
+				}
+			}));
+		} catch (e) {
+			i === this.#r && this.#_({
+				code: "map-image-error",
+				message: `Unable to load the dungeon map image: ${String(e)}.`,
+				cause: e
+			});
+		}
+	}
+	async #g(e, t, n) {
+		let r = new Image();
+		if (r.crossOrigin = "anonymous", r.src = t.resolveAssetUrl(e), await r.decode(), n !== this.#r) return;
+		let i = this._canvasElement, a = i?.getContext("2d");
+		if (!i || !a) throw Error("A 2D canvas context is unavailable.");
+		a.clearRect(0, 0, i.width, i.height), a.drawImage(r, 0, 0, e.width, e.height);
+	}
+	#_(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-map-error", {
+			...I,
+			detail: n
+		}));
+	}
+	#v() {
+		let e = this._model, t = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map();
+		if (!e) {
+			this._enemyRenderContent = t, this._groupRenderContent = n;
+			return;
+		}
+		if (this.renderEnemy) for (let n of e.groups) for (let r of n.enemies) try {
+			t.set(r.instanceId, this.renderEnemy({
+				model: r,
+				group: n,
+				dungeon: e.dungeon,
+				mapImage: e.mapImage
+			}));
+		} catch (e) {
+			this.#B(`enemy:${r.instanceId}`, "enemy-renderer-error", e);
+		}
+		if (this._enemyRenderContent = t, this.renderGroup) for (let t of e.groups) {
+			let r = t.enemies.map((e) => this.#w(t, e)), i = this.#x(e, t);
+			try {
+				n.set(i, this.renderGroup({
+					group: t,
+					children: r,
+					dungeon: e.dungeon,
+					mapImage: e.mapImage
+				}));
+			} catch (e) {
+				this.#B(`group:${i}`, "group-renderer-error", e);
+			}
+		}
+		this._groupRenderContent = n;
+	}
+	#y() {
+		let e = /* @__PURE__ */ new Map(), t = this._data?.dungeon;
+		if (t) for (let n of t.mapImages) try {
+			e.set(n.id, this.mapLabelFormatter?.(n, t) ?? N(n, t));
+		} catch (r) {
+			this.#B(`map-label:${n.id}`, "map-label-formatter-error", r), e.set(n.id, N(n, t));
+		}
+		this._mapLabels = e;
+	}
+	#b(e) {
+		return m(e.groups, (t) => this.#x(e, t), (t) => this.#S(e, t));
+	}
+	#x(e, t) {
+		return `${e.mapImage.id}:${String(t.id)}:${t.enemies[0]?.instanceId ?? "empty"}`;
+	}
+	#S(e, t) {
+		let n = t.visualBounds, r = {
+			left: `${n.x * 100}%`,
+			top: `${n.y * 100}%`,
+			width: `${n.width * 100}%`,
+			height: `${n.height * 100}%`
+		}, i = this.#x(e, t), a = this.renderGroup && this._groupRenderContent.has(i) ? this._groupRenderContent.get(i) ?? l : this.#C(t);
+		return c` <div class="group-anchor" part="group" style=${h(r)}>${a}</div> `;
+	}
+	#C(e) {
+		return c`
+      <div class="default-group">
+        <div class="group-ring" aria-hidden="true"></div>
+        <span class="group-label">${`G${e.id ?? "–"}${e.dungeonScore === null ? "" : ` · ${e.dungeonScore}`}`}</span>
+        ${m(e.enemies, (e) => e.instanceId, (t) => this.#w(e, t))}
+      </div>
+    `;
+	}
+	#w(e, t) {
+		let n = e.visualBounds, r = {
+			left: `${(t.position.x - n.x) / n.width * 100}%`,
+			top: `${(t.position.y - n.y) / n.height * 100}%`
+		}, i = this.renderEnemy && this._enemyRenderContent.has(t.instanceId) ? this._enemyRenderContent.get(t.instanceId) ?? l : this.#T(t), a = t.enemy?.name ?? t.placement.id;
+		return c`
+      <div
+        class="enemy-anchor"
+        part="enemy"
+        style=${h(r)}
+        role="img"
+        aria-label=${a}
+        title=${a}
+      >
+        <div class="enemy-visual">${i}</div>
+      </div>
+    `;
+	}
+	#T(e) {
+		let t = (e.enemy?.name ?? e.placement.id).split(/\s+/).map((e) => e[0]).join("").slice(0, 2).toUpperCase();
+		return c`
+      <span class="enemy-marker" data-boss=${String(e.enemy?.isBoss === !0)}>
+        ${e.imageUrl ? c`<img class="enemy-image" src=${e.imageUrl} alt="" draggable="false" />` : t}
+      </span>
+    `;
+	}
+	#E(e) {
+		let t = e.dungeon.mapImages;
+		return !this.showMapSelector || t.length <= 1 ? l : c`
+      <div class="map-selector" part="map-selector" role="tablist" aria-label="Dungeon maps">
+        ${m(t, (e) => e.id, (e, t) => c`
+            <button
+              class="map-selector-button"
+              id=${`map-tab-${t}`}
+              part="map-selector-button"
+              type="button"
+              role="tab"
+              aria-controls="map-stage"
+              aria-selected=${String(e.id === this._selectedMap?.id)}
+              tabindex=${e.id === this._selectedMap?.id ? "0" : "-1"}
+              data-map-index=${String(t)}
+              @click=${() => this.#A(e)}
+              @keydown=${this.#j}
+            >
+              ${this.#k(e)}
+            </button>
+          `)}
+      </div>
+    `;
+	}
+	#D() {
+		return !this.showControls || !this._model ? l : c`
+      <div class="controls" part="controls" role="group" aria-label="Map zoom controls">
+        <button
+          class="control-button"
+          part="control-button"
+          type="button"
+          aria-label="Zoom out"
+          title="Zoom out"
+          @click=${this.zoomOut}
+        >
+          −
+        </button>
+        <button
+          class="control-button"
+          part="control-button"
+          type="button"
+          aria-label="Fit map"
+          title="Fit map"
+          @click=${this.fitToView}
+        >
+          ◇
+        </button>
+        <button
+          class="control-button"
+          part="control-button"
+          type="button"
+          aria-label="Zoom in"
+          title="Zoom in"
+          @click=${this.zoomIn}
+        >
+          +
+        </button>
+      </div>
+    `;
+	}
+	#O() {
+		if (this._status === "ready") return l;
+		let e = this._status === "loading", t = this._status === "empty", n = e ? "Charting dungeon" : t ? "Choose a dungeon" : "Map unavailable", r = e ? "Loading Fellowship data and preparing the tactical layer." : t ? "Set the dungeon-id attribute or dungeonId property to render a map." : this._error?.message ?? "An unexpected map error occurred.";
+		return c`
+      <div class="status" part="status" role=${this._status === "error" ? "alert" : "status"}>
+        <div class="status-card">
+          <div class="status-mark" aria-hidden="true"><span>${e ? "…" : "✦"}</span></div>
+          <p class="status-title">${n}</p>
+          <p class="status-copy">${r}</p>
+          ${this._status === "error" ? c`<button class="retry-button" type="button" @click=${this.retry}>Retry</button>` : l}
+        </div>
+      </div>
+    `;
+	}
+	#k(e) {
+		return this._mapLabels.get(e.id) ?? "Map";
+	}
+	#A(e) {
+		e.id !== this._selectedMap?.id && (this.mapImageId = e.id, this.dispatchEvent(new CustomEvent("fellowship-map-image-change", {
+			...I,
+			detail: {
+				mapImageId: e.id,
+				mapImage: e
+			}
+		})));
+	}
+	#j;
+	#M;
+	#N;
+	#P;
+	#F;
+	#I;
+	#L(e) {
+		return e.composedPath().some((e) => e instanceof HTMLElement && e.matches("button, a, input, select, textarea, [contenteditable='true']"));
+	}
+	#R() {
+		let e = this._viewportElement, t = this._selectedMap;
+		!e || !t || (this.#a.setDimensions(e.clientWidth, e.clientHeight, t.width, t.height), this.#z("resize"));
+	}
+	#z(e) {
+		this._viewportState = this.#a.state, this.dispatchEvent(new CustomEvent("fellowship-map-viewport-change", {
+			...I,
+			detail: {
+				viewport: this.#a.state,
+				source: e
+			}
+		}));
+	}
+	#B(e, t, n) {
+		this.#u.has(e) || (this.#u.add(e), this.#d.push({
+			code: t,
+			message: n instanceof Error ? n.message : String(n),
+			cause: n
+		}));
+	}
+	#V() {
+		if (this.#d.length === 0) return;
+		let e = this.#d;
+		this.#d = [];
+		for (let t of e) this.dispatchEvent(new CustomEvent("fellowship-map-error", {
+			...I,
+			detail: t
+		}));
+	}
+};
+r([d({
+	type: String,
+	attribute: "dungeon-id"
+})], L.prototype, "dungeonId", void 0), r([d({
+	type: String,
+	attribute: "map-image-id"
+})], L.prototype, "mapImageId", void 0), r([d({
+	type: String,
+	attribute: "asset-base-url"
+})], L.prototype, "assetBaseUrl", void 0), r([d({ attribute: !1 })], L.prototype, "dataSource", void 0), r([d({ attribute: !1 })], L.prototype, "renderEnemy", void 0), r([d({ attribute: !1 })], L.prototype, "renderGroup", void 0), r([d({ attribute: !1 })], L.prototype, "mapLabelFormatter", void 0), r([d({
+	type: Boolean,
+	attribute: "show-controls"
+})], L.prototype, "showControls", void 0), r([d({
+	type: Boolean,
+	attribute: "show-map-selector"
+})], L.prototype, "showMapSelector", void 0), r([d({
+	type: Number,
+	attribute: "max-zoom"
+})], L.prototype, "maxZoom", void 0), r([d({
+	type: Boolean,
+	attribute: !1
+})], L.prototype, "externalOverlay", void 0), r([p()], L.prototype, "_status", void 0), r([p()], L.prototype, "_error", void 0), r([p()], L.prototype, "_data", void 0), r([p()], L.prototype, "_model", void 0), r([p()], L.prototype, "_selectedMap", void 0), r([p()], L.prototype, "_viewportState", void 0), r([p()], L.prototype, "_isPanning", void 0), r([p()], L.prototype, "_enemyRenderContent", void 0), r([p()], L.prototype, "_groupRenderContent", void 0), r([p()], L.prototype, "_mapLabels", void 0), r([f(".viewport")], L.prototype, "_viewportElement", void 0), r([f("canvas")], L.prototype, "_canvasElement", void 0), L = r([u("fellowship-dungeon-map")], L);
+var R = () => {
+	globalThis.customElements !== void 0 && !globalThis.customElements.get("fellowship-dungeon-map") && globalThis.customElements.define("fellowship-dungeon-map", L);
+};
+//#endregion
+export { N as a, M as i, R as n, y as o, F as r, L as t };
+
+//# sourceMappingURL=dungeon-map-IPN6sEDj.js.map