@crockery/fellowship-components 0.4.1 → 1.1.0

package/README.md

@@ -11,17 +11,19 @@ npm install @crockery/fellowship-components
 pnpm add @crockery/fellowship-components
 ```
 
-The data package is installed automatically. Components use its shared lazy client, while image
-URLs use the installed data package's version-pinned CDN by default. Your application lockfile
-therefore selects both the exact data and its matching assets.
+The data package is installed automatically. Components use its shared lazy
+client, while each application supplies a `resolveAssetUrl` callback for images
+it hosts. Components never contact a Fellowship image CDN implicitly.
 
 ## Components
 
-| Component                        | Package entry point                                 | Documentation                                        |
-| -------------------------------- | --------------------------------------------------- | ---------------------------------------------------- |
-| `<fellowship-dungeon-map>`       | `@crockery/fellowship-components/dungeon-map`       | [Dungeon map](src/dungeon-map/README.md)             |
-| `<fellowship-talent-calculator>` | `@crockery/fellowship-components/talent-calculator` | [Talent calculator](src/talent-calculator/README.md) |
-| `<fellowship-tooltip>`           | `@crockery/fellowship-components/tooltip`           | [Tooltip](src/tooltip/README.md)                     |
+| Component                           | Package entry point                                    | Documentation                                              |
+| ----------------------------------- | ------------------------------------------------------ | ---------------------------------------------------------- |
+| `<fellowship-dungeon-map>`          | `@crockery/fellowship-components/dungeon-map`          | [Dungeon map](src/dungeon-map/README.md)                   |
+| `<fellowship-dungeon-cast-browser>` | `@crockery/fellowship-components/dungeon-cast-browser` | [Dungeon cast browser](src/dungeon-cast-browser/README.md) |
+| `<fellowship-talent-calculator>`    | `@crockery/fellowship-components/talent-calculator`    | [Talent calculator](src/talent-calculator/README.md)       |
+| `<fellowship-tooltip>`              | `@crockery/fellowship-components/tooltip`              | [Tooltip](src/tooltip/README.md)                           |
+| `<fellowship-gear-planner>`         | `@crockery/fellowship-components/gear-planner`         | [Gear planner](src/gear-planner/README.md)                 |
 
 Importing the package root registers every web component:
 
@@ -36,9 +38,11 @@ Import React wrappers from component-specific entry points so applications only
 implementations they use:
 
 ```tsx
+import { DungeonCastBrowser } from "@crockery/fellowship-components/react/dungeon-cast-browser";
 import { DungeonMapViewer } from "@crockery/fellowship-components/react/dungeon-map";
 import { TalentCalculator } from "@crockery/fellowship-components/react/talent-calculator";
 import { Tooltip } from "@crockery/fellowship-components/react/tooltip";
+import { GearPlanner } from "@crockery/fellowship-components/react/gear-planner";
 ```
 
 Each component entry also provides the component as its default export for `React.lazy`:
@@ -51,7 +55,7 @@ const DungeonMapViewer = lazy(
 );
 ```
 
-The `@crockery/fellowship-components/react` convenience entry still exports all three wrappers,
+The `@crockery/fellowship-components/react` convenience entry still exports every wrapper,
 but importing it registers and loads every component implementation.
 
 Each component document covers its Lit and React APIs, custom data sources, events, methods,
@@ -92,25 +96,35 @@ interface and tactical stacks. The package ships six local IBM Plex WOFF2 assets
 total), registers them as `Fellowship Field` and `Fellowship Tactical`, and makes no remote font
 request. See `THIRD_PARTY_LICENSES.md` for the SIL Open Font License notice.
 
+## Dungeon Poster theme
+
+Gear Planner and Tooltip use the flat Dungeon Poster foundation. Override
+`--fellowship-poster-cream`, `--fellowship-poster-violet`,
+`--fellowship-poster-yellow`, `--fellowship-poster-plum`, display/mono font,
+seam, radius, shadow, focus, and motion tokens on an ancestor or component host.
+The package bundles four Syne and DM Mono WOFF2 assets for this foundation.
+Legacy map, cast, and talent surfaces retain Expedition Field Manual.
+
 ## Data and asset versions
 
-Version 0.4.1 targets `@crockery/fellowship-data@^2.0.0` and requires manifest
-schema 2. The monorepo workspace keeps Components and Data changes atomic;
-published packages retain independent versions.
+Components declares a normal caret dependency on the corresponding
+`@crockery/fellowship-data` release and requires manifest schema 2. The
+monorepo workspace keeps Components and Data changes atomic; published packages
+retain independent versions.
 
 Dataset JSON stays out of the component library's initial JavaScript path and published tarball.
 Each data-driven component supports:
 
-- `assetBaseUrl` for self-hosted package assets.
+- A required `resolveAssetUrl(asset)` property for application-hosted images.
 - A component-specific `dataSource` property for remote, filtered, experimental, or
   application-owned data.
 
 See the relevant component document for the provider contract.
 
-The legacy component-specific data-source types and package factories remain available as
-deprecated structural adapters for the 0.x release line. New integrations should use
-`createPackageFellowshipDataClient` from `@crockery/fellowship-data/client` and pass the relevant
-client methods through `dataSource`.
+The component-specific data-source types and package factories remain
+load-only structural adapters. New integrations should use
+`createPackageFellowshipDataClient` from `@crockery/fellowship-data/client` and
+pass the relevant client methods through `dataSource`.
 
 ## Development
 
@@ -122,11 +136,13 @@ pnpm --filter @crockery/fellowship-components build
 pnpm --filter @crockery/fellowship-components pack:check
 ```
 
-Current Chromium, Firefox, and Safari/WebKit are supported. Add a Changeset with
-`pnpm changeset` from the monorepo root for every user-facing change. Merging
-the generated version pull request publishes through trusted OIDC publishing.
-The private repository means npm provenance attestations are unavailable.
-Maintainers should follow [`RELEASING.md`](RELEASING.md).
+Browser tests currently use headless Chromium as the package's deterministic
+browser harness. Cross-browser compatibility is not yet a supported contract.
+Add a Changeset with `pnpm changeset` from the monorepo root for every
+user-facing change. Merging the generated version pull request publishes
+through trusted OIDC publishing. The private repository means npm provenance
+attestations are unavailable. Maintainers should follow
+[`RELEASING.md`](RELEASING.md).
 
 ## License
 

package/RELEASING.md

@@ -32,8 +32,8 @@ published from a private repository.
 1. Merge consumer-facing changes and their changesets into `master`.
 2. Review the Changesets version pull request, including its generated changelog.
 3. Merge the version pull request after the full release verification succeeds.
-4. Confirm Data's `_release.json` marker and exact npm versions before relying
-   on the release.
+4. Confirm the latest asset archive's build/SHA metadata and the exact npm
+   versions before relying on the release.
 
 Never reuse a version number. If a release is defective, publish a corrective patch. Deprecate a
 bad version with `npm deprecate` when consumers need an explicit warning; unpublish only when npm's

package/THIRD_PARTY_LICENSES.md

@@ -1,5 +1,17 @@
 # Third-party licenses
 
+## Syne
+
+The bundled Syne font files are copyright 2019 The Syne Project Authors
+(https://gitlab.com/bonjour-monde/fonderie/syne-typeface) and are distributed
+under the SIL Open Font License, Version 1.1.
+
+## DM Mono
+
+The bundled DM Mono font files are copyright 2020 The DM Mono Project Authors
+(https://www.github.com/googlefonts/dm-mono) and are distributed under the SIL
+Open Font License, Version 1.1.
+
 ## IBM Plex
 
 The bundled IBM Plex Sans Condensed and IBM Plex Mono font files are copyright IBM Corp. and are

package/dist/chunks/decorate-DyMgX_Uh.js

@@ -0,0 +1,9 @@
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
+function e(e, t, n, r) {
+	var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
+	if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
+	else for (var s = e.length - 1; s >= 0; s--) (o = e[s]) && (a = (i < 3 ? o(a) : i > 3 ? o(t, n, a) : o(t, n)) || a);
+	return i > 3 && a && Object.defineProperty(t, n, a), a;
+}
+//#endregion
+export { e as t };

package/dist/chunks/{dungeon-cast-browser-CSnu3gC5.js → dungeon-cast-browser-DdG8klca.js}

@@ -1,16 +1,13 @@
-import { n as e, t } from "./data-source-XbksqUrw.js";
-import { n, r, t as i } from "./decorate-B_ZTN9li.js";
+import { i as e, n as t, r as n, t as r } from "./field-manual-fonts-DTFloVFe.js";
+import { t as i } from "./decorate-DyMgX_Uh.js";
 import { createPackageFellowshipDataClient as a } from "@crockery/fellowship-data/client";
 import { LitElement as o, css as s, html as c, nothing as l } from "lit";
 import { customElement as u, property as d, state as f } from "lit/decorators.js";
 import { repeat as p } from "lit/directives/repeat.js";
 //#region src/data/package-cast-data-source.ts
-var m = (e = {}) => {
-	let t = a(e);
-	return {
-		loadDungeonCasts: (e, n) => t.loadDungeonCasts(e, n),
-		resolveAssetUrl: (e) => t.resolveAssetUrl(e)
-	};
+var m = () => {
+	let e = a();
+	return { loadDungeonCasts: (t, n) => e.loadDungeonCasts(t, n) };
 }, h = s`
   :host {
     --fellowship-cast-canvas: var(--_fellowship-field-canvas);
@@ -445,7 +442,7 @@ var m = (e = {}) => {
 		let o = (e.abilitiesByEnemy.get(a.id) ?? []).filter((e) => e.castInterruptibility !== void 0).map((e) => {
 			let n = e.castInterruptibility !== "never", r = e.castInterruptibility === "sometimes", i = a.canBeControlled, o = _(e), s = null;
 			if (o) try {
-				s = t.resolveAssetUrl(o);
+				s = t(o);
 			} catch {
 				s = null;
 			}
@@ -479,14 +476,14 @@ var m = (e = {}) => {
 	composed: !0
 }, x = class extends o {
 	constructor(...e) {
-		super(...e), this.dungeonId = "", this.selectedCast = null, this.configuredCasts = [], this.configuredFilter = "all", this.fill = !1, this.assetBaseUrl = null, this.dataSource = null, this._status = "empty", this._error = null, this._model = null, this._query = "", this.#e = null, this.#t = 0, this.#d = (e) => {
+		super(...e), this.dungeonId = "", this.selectedCast = null, this.configuredCasts = [], this.configuredFilter = "all", this.fill = !1, this.resolveAssetUrl = null, this.dataSource = null, this._status = "empty", this._error = null, this._model = null, this._query = "", this.#e = null, this.#t = 0, this.#f = (e) => {
 			this._query = e.currentTarget.value;
-		}, this.#f = (e) => {
+		}, this.#p = (e) => {
 			let t = e.currentTarget;
 			t.hidden = !0;
 			let n = t.nextElementSibling;
 			n instanceof HTMLElement && (n.hidden = !1);
-		}, this.#p = (e) => {
+		}, this.#m = (e) => {
 			let t = e.key === "ArrowDown" || e.key === "ArrowRight" ? 1 : e.key === "ArrowUp" || e.key === "ArrowLeft" ? -1 : 0;
 			if (t === 0 && e.key !== "Home" && e.key !== "End") return;
 			let n = [...this.renderRoot.querySelectorAll(".cast-row:not(:disabled)")];
@@ -496,18 +493,18 @@ var m = (e = {}) => {
 		};
 	}
 	static {
-		this.styles = [r, h];
+		this.styles = [t, h];
 	}
 	#e;
 	#t;
 	connectedCallback() {
-		super.connectedCallback(), n(this.ownerDocument);
+		super.connectedCallback(), r(this.ownerDocument);
 	}
 	disconnectedCallback() {
 		this.#e?.abort(), super.disconnectedCallback();
 	}
 	updated(e) {
-		super.updated(e), (e.has("dungeonId") || e.has("dataSource") || e.has("assetBaseUrl")) && queueMicrotask(() => {
+		super.updated(e), (e.has("dungeonId") || e.has("dataSource") || e.has("resolveAssetUrl")) && queueMicrotask(() => {
 			this.isConnected && this.#n();
 		});
 	}
@@ -518,8 +515,8 @@ var m = (e = {}) => {
 		return this._model;
 	}
 	render() {
-		if (this._status !== "ready" || !this._model) return c`<section class="browser" aria-label="Dungeon cast browser">${this.#o()}</section>`;
-		let e = this.#r(this._model);
+		if (this._status !== "ready" || !this._model) return c`<section class="browser" aria-label="Dungeon cast browser">${this.#s()}</section>`;
+		let e = this.#i(this._model);
 		return c`
       <section class="browser" aria-label=${`${this._model.dungeon.name ?? this._model.dungeon.id} casts`}>
         <header class="toolbar" part="toolbar">
@@ -537,53 +534,63 @@ var m = (e = {}) => {
               type="search"
               placeholder="Enemy or ability"
               .value=${this._query}
-              @input=${this.#d}
+              @input=${this.#f}
             />
           </label>
         </header>
-        ${e.length > 0 ? c`<div class="enemy-list" part="enemy-list">${p(e, ({ enemy: e }) => e.id, (e) => this.#i(e))}</div>` : this.#s()}
+        ${e.length > 0 ? c`<div class="enemy-list" part="enemy-list">${p(e, ({ enemy: e }) => e.id, (e) => this.#a(e))}</div>` : this.#c()}
       </section>
     `;
 	}
 	async #n() {
-		let n = this.dungeonId.trim(), r = ++this.#t;
-		if (this.#e?.abort(), this.#e = new AbortController(), this._model = null, this._error = null, this._query = "", !n) {
+		let t = this.dungeonId.trim(), n = ++this.#t;
+		if (this.#e?.abort(), this.#e = new AbortController(), this._model = null, this._error = null, this._query = "", !t) {
 			this._status = "empty";
 			return;
 		}
+		if (!this.resolveAssetUrl) {
+			this.#r({
+				code: "asset-resolver-missing",
+				message: "A resolveAssetUrl callback is required to render Fellowship images."
+			});
+			return;
+		}
 		this._status = "loading";
-		let i = this.dataSource ?? m(this.assetBaseUrl ? { assetBaseUrl: this.assetBaseUrl } : {});
+		let r = this.dataSource ?? m();
 		try {
-			let t = await i.loadDungeonCasts(n, this.#e.signal);
-			if (r !== this.#t || this.#e.signal.aborted) return;
-			e(t.manifest.schemaVersion);
-			let a = y(t, i);
+			let i = await r.loadDungeonCasts(t, this.#e.signal);
+			if (n !== this.#t || this.#e.signal.aborted) return;
+			e(i.manifest.schemaVersion);
+			let a = y(i, this.resolveAssetUrl);
 			this._model = a, this._status = "ready", this.dispatchEvent(new CustomEvent("fellowship-cast-browser-ready", {
 				...b,
 				detail: {
 					model: a,
-					data: t
+					data: i
 				}
 			}));
 		} catch (e) {
-			if (r !== this.#t || this.#e.signal.aborted) return;
-			let n = {
-				code: e instanceof t ? e.code : e.code ?? "data-load-failed",
-				message: e instanceof Error ? e.message : String(e),
-				...e instanceof Error && e.cause !== void 0 ? { cause: e.cause } : {}
-			};
-			this._error = n, this._status = "error", this.dispatchEvent(new CustomEvent("fellowship-cast-browser-error", {
-				...b,
-				detail: n
-			}));
+			if (n !== this.#t || this.#e.signal.aborted) return;
+			this.#r(e);
 		}
 	}
 	#r(e) {
+		let t = {
+			code: e instanceof n ? e.code : e.code ?? "data-load-failed",
+			message: typeof e == "object" && e && "message" in e ? String(e.message) : e instanceof Error ? e.message : String(e),
+			...e instanceof Error && e.cause !== void 0 ? { cause: e.cause } : {}
+		};
+		this._error = t, this._status = "error", this.dispatchEvent(new CustomEvent("fellowship-cast-browser-error", {
+			...b,
+			detail: t
+		}));
+	}
+	#i(e) {
 		let t = this._query.trim().toLocaleLowerCase(), n = this.configuredFilter === "configured" || this.configuredFilter === "unconfigured" ? this.configuredFilter : "all";
 		return e.enemies.flatMap((e) => {
 			let r = `${e.enemy.name ?? ""} ${e.enemy.id}`.toLocaleLowerCase().includes(t), i = e.casts.filter((e) => {
 				if (!(!t || r || `${e.ability.name ?? ""} ${e.ability.id}`.toLocaleLowerCase().includes(t))) return !1;
-				let i = this.configuredCasts.some((t) => this.#l(t, e.identity));
+				let i = this.configuredCasts.some((t) => this.#u(t, e.identity));
 				return n === "all" || n === "configured" && i || n === "unconfigured" && !i;
 			});
 			return i.length > 0 ? [{
@@ -592,7 +599,7 @@ var m = (e = {}) => {
 			}] : [];
 		});
 	}
-	#i(e) {
+	#a(e) {
 		return c`
       <article class="enemy" part="enemy">
         <header class="enemy-header" part="enemy-header">
@@ -604,13 +611,13 @@ var m = (e = {}) => {
           <span class="enemy-count">${e.casts.length} ${e.casts.length === 1 ? "cast" : "casts"}</span>
         </header>
         <ul class="cast-list">
-          ${p(e.casts, ({ identity: e }) => g(e), (e) => c`<li>${this.#a(e)}</li>`)}
+          ${p(e.casts, ({ identity: e }) => g(e), (e) => c`<li>${this.#o(e)}</li>`)}
         </ul>
       </article>
     `;
 	}
-	#a(e) {
-		let t = this.#l(this.selectedCast, e.identity), n = this.configuredCasts.some((t) => this.#l(t, e.identity)), r = e.interruptVaries ? "varies" : e.canInterrupt ? "interrupt" : e.canStop ? "stop" : "none", i = (e.ability.name ?? e.ability.id).split(/\s+/).map((e) => e[0]).join("").slice(0, 2).toUpperCase();
+	#o(e) {
+		let t = this.#u(this.selectedCast, e.identity), n = this.configuredCasts.some((t) => this.#u(t, e.identity)), r = e.interruptVaries ? "varies" : e.canInterrupt ? "interrupt" : e.canStop ? "stop" : "none", i = (e.ability.name ?? e.ability.id).split(/\s+/).map((e) => e[0]).join("").slice(0, 2).toUpperCase();
 		return c`
       <button
         class="cast-row"
@@ -619,15 +626,15 @@ var m = (e = {}) => {
         ?disabled=${!e.actionable}
         aria-pressed=${String(t)}
         data-configured=${String(n)}
-        @click=${() => this.#u(e)}
-        @keydown=${this.#p}
+        @click=${() => this.#d(e)}
+        @keydown=${this.#m}
       >
         ${e.imageUrl ? c`<img
                   class="ability-image"
                   part="cast-icon"
                   src=${e.imageUrl}
                   alt=""
-                  @error=${this.#f}
+                  @error=${this.#p}
                 /><span
                   class="ability-fallback"
                   part="cast-icon-fallback"
@@ -644,8 +651,8 @@ var m = (e = {}) => {
       </button>
     `;
 	}
-	#o() {
-		return this._status === "loading" ? this.#c("Loading cast index", "Joining dungeon enemies with their cast data.") : this._status === "error" ? c`
+	#s() {
+		return this._status === "loading" ? this.#l("Loading cast index", "Joining dungeon enemies with their cast data.") : this._status === "error" ? c`
         <div class="status" role="alert">
           <div class="status-card">
             <span class="status-mark" aria-hidden="true"></span>
@@ -654,12 +661,12 @@ var m = (e = {}) => {
             <button class="retry-button" type="button" @click=${this.retry}>Retry</button>
           </div>
         </div>
-      ` : this._status === "ready" ? this.#c("No actionable casts", "This dungeon has no enemies with casts that can be interrupted or stopped.") : this.#c("Select a dungeon", "Choose a dungeon to inspect enemy casts.");
+      ` : this._status === "ready" ? this.#l("No actionable casts", "This dungeon has no enemies with casts that can be interrupted or stopped.") : this.#l("Select a dungeon", "Choose a dungeon to inspect enemy casts.");
 	}
-	#s() {
-		return this.#c("No matching casts", `No enemy or ability matches “${this._query.trim()}”.`);
+	#c() {
+		return this.#l("No matching casts", `No enemy or ability matches “${this._query.trim()}”.`);
 	}
-	#c(e, t) {
+	#l(e, t) {
 		return c`
       <div class="status">
         <div class="status-card">
@@ -670,18 +677,18 @@ var m = (e = {}) => {
       </div>
     `;
 	}
-	#l(e, t) {
+	#u(e, t) {
 		return e?.enemyId === t.enemyId && e.abilityId === t.abilityId;
 	}
-	#u(e) {
+	#d(e) {
 		e.actionable && this.dispatchEvent(new CustomEvent("fellowship-cast-selected", {
 			...b,
 			detail: { cast: e }
 		}));
 	}
-	#d;
 	#f;
 	#p;
+	#m;
 };
 i([d({
 	type: String,
@@ -692,10 +699,7 @@ i([d({
 })], x.prototype, "configuredFilter", void 0), i([d({
 	type: Boolean,
 	reflect: !0
-})], x.prototype, "fill", void 0), i([d({
-	type: String,
-	attribute: "asset-base-url"
-})], x.prototype, "assetBaseUrl", void 0), i([d({ attribute: !1 })], x.prototype, "dataSource", void 0), i([f()], x.prototype, "_status", void 0), i([f()], x.prototype, "_error", void 0), i([f()], x.prototype, "_model", void 0), i([f()], x.prototype, "_query", void 0), x = i([u("fellowship-dungeon-cast-browser")], x);
+})], x.prototype, "fill", void 0), i([d({ attribute: !1 })], x.prototype, "resolveAssetUrl", void 0), i([d({ attribute: !1 })], x.prototype, "dataSource", void 0), i([f()], x.prototype, "_status", void 0), i([f()], x.prototype, "_error", void 0), i([f()], x.prototype, "_model", void 0), i([f()], x.prototype, "_query", void 0), x = i([u("fellowship-dungeon-cast-browser")], x);
 var S = () => {
 	globalThis.customElements !== void 0 && !globalThis.customElements.get("fellowship-dungeon-cast-browser") && globalThis.customElements.define("fellowship-dungeon-cast-browser", x);
 };