@crockery/fellowship-components 0.4.1 → 1.1.0

package/src/dungeon-map/README.md

@@ -66,10 +66,11 @@ map loading, canvas drawing, positioning, and viewport interactions.
 
 ## Data and assets
 
-Set `assetBaseUrl` to self-host package images:
+Provide the application-owned image resolver separately from the data source:
 
 ```ts
-map.assetBaseUrl = "https://static.example.com/fellowship-data/v1.0.0/";
+map.resolveAssetUrl = (asset) =>
+  new URL(asset.path, "https://static.example.com/fellowship/").href;
 ```
 
 Replace `dataSource` for filtered, experimental, remote, or application-owned data:
@@ -83,9 +84,6 @@ const source: FellowshipDataSource = {
   async loadDungeon(dungeonId, signal) {
     return applicationData.loadDungeon(dungeonId, signal);
   },
-  resolveAssetUrl(asset) {
-    return new URL(asset.path, "https://static.example.com/").href;
-  },
 };
 
 map.dataSource = source;
@@ -97,7 +95,8 @@ map.dataSource = source;
 
 - `dungeonId: string`
 - `mapImageId: string | null`
-- `assetBaseUrl: string | null` — `null` uses the package-pinned CDN.
+- `resolveAssetUrl: ImageAssetUrlResolver` — required and assigned as a
+  JavaScript property.
 - `dataSource: FellowshipDataSource | null` — `null` uses the package provider.
 - `renderEnemy: LitEnemyRenderer | null`
 - `renderGroup: LitGroupRenderer | null`

package/src/gear-planner/README.md

@@ -0,0 +1,44 @@
+# Gear Planner
+
+`<fellowship-gear-planner>` is a controlled, responsive editor for serializable
+Fellowship loadouts.
+
+```ts
+import gearPlannerData, {
+  createEmptyGearPlannerBuild,
+} from "@crockery/fellowship-data/gear-planner";
+import "@crockery/fellowship-components/gear-planner";
+
+const planner = document.querySelector("fellowship-gear-planner");
+planner.data = gearPlannerData;
+planner.build = createEmptyGearPlannerBuild(
+  gearPlannerData,
+  gearPlannerData.heroes[0].hero.id,
+);
+planner.resolveAssetUrl = (asset) =>
+  new URL(asset.path, "https://static.example.com/fellowship/").href;
+planner.addEventListener("fellowship-gear-build-change", (event) => {
+  planner.build = event.detail.build;
+});
+```
+
+The element never persists or mutates `build`. Its public properties are
+`data`, `build`, `loading`, `error`, and the required `resolveAssetUrl`
+callback.
+`fellowship-gear-build-change` bubbles and is composed; its detail includes the
+complete proposed build, change source, and affected position.
+`fellowship-gear-planner-error` reports recoverable presentation failures.
+
+The React wrapper is exported from
+`@crockery/fellowship-components/react/gear-planner` as `GearPlanner`, with
+`onBuildChange` and `onPlannerError` event props.
+
+At 1200px and above, the component renders summary and slot rails around a
+persistent workbench. Below 1200px it uses Traits & gems, Gear, and Bonuses tabs,
+with configuration in a full-height focus-contained editor. Item choices are
+filtered by the Data package, all changes are immediate, and unsupported
+mechanics remain visibly excluded from exact totals.
+
+The planner uses the public `--fellowship-poster-*` Dungeon Poster tokens and
+bundled Syne/DM Mono faces. It maintains 44px controls, visible focus, reduced
+motion, canonical mobile position order, and accessible equipped-item tooltips.

package/src/talent-calculator/README.md

@@ -102,22 +102,20 @@ continues to own button semantics and selection state.
 
 ## Data and assets
 
-Self-host images with `assetBaseUrl`, or replace the complete provider:
+Provide an image resolver and optionally replace the data provider:
 
 ```ts
 import type { FellowshipTalentDataSource } from "@crockery/fellowship-components/talent-calculator";
 
 declare const applicationTalentData: FellowshipTalentDataSource;
 
-calculator.assetBaseUrl = "https://static.example.com/fellowship-data/v1.0.0/";
+calculator.resolveAssetUrl = (asset) =>
+  new URL(asset.path, "https://static.example.com/fellowship/").href;
 
 const source: FellowshipTalentDataSource = {
   async loadHeroTalents(heroId, signal) {
     return applicationTalentData.loadHeroTalents(heroId, signal);
   },
-  resolveAssetUrl(asset) {
-    return new URL(asset.path, "https://static.example.com/").href;
-  },
 };
 
 calculator.dataSource = source;
@@ -131,7 +129,8 @@ calculator.dataSource = source;
 - `talentPoints: number` — defaults to `14`, normalized from `0` through
   `MAX_TALENT_POINTS`.
 - `selectedTalentIds: readonly string[]`
-- `assetBaseUrl: string | null`
+- `resolveAssetUrl: ImageAssetUrlResolver` — required and assigned as a
+  JavaScript property.
 - `dataSource: FellowshipTalentDataSource | null`
 - `renderTalent: LitTalentRenderer | null`
 - `showPointControls: boolean` — defaults to `true`.

package/src/tooltip/README.md

@@ -48,8 +48,9 @@ Pass a React node to the wrapper's `content` prop to fill the named content slot
 - Positioning maintains an 8px trigger gap and viewport collision margin.
 - The native Popover API is used when available, with a fixed-position fallback.
 
-Tooltip content is noninteractive and uses `role="tooltip"`. The first slotted trigger receives a
-plain-text `aria-description` while connected; any existing value is restored afterward.
+Tooltip content is noninteractive and uses `role="tooltip"`. The first slotted
+trigger receives a stable `aria-describedby` relationship to the tooltip
+surface while connected; any existing relationship is preserved and restored.
 
 ## API
 
@@ -101,10 +102,8 @@ import {
 
 ## Theming
 
-The tooltip inherits the shared `--fellowship-field-*` theme and exposes the established
-`--fellowship-tooltip-*` overrides. Its desaturated semantic defaults are ability `#76C5D2`,
-warning `#D4A761`, effect `#AFA1CA`, resource `#7CB2C2`, healing `#82B997`, Meiko primary
-`#C892A0`, and Meiko secondary `#8DBAB7`.
+The tooltip inherits the shared `--fellowship-poster-*` Dungeon Poster
+foundation and exposes the established `--fellowship-tooltip-*` overrides.
 
 CSS parts: `trigger`, `surface`, `arrow`, `heading`, `content`, and `paragraph`.
 

package/dist/chunks/data-source-XbksqUrw.js

@@ -1,7 +0,0 @@
-import { FellowshipDataError as e } from "@crockery/fellowship-data/client";
-//#region src/data/data-source.ts
-var t = 2, n = (n) => {
-	if (n !== t) throw new e("unsupported-schema", `Unsupported fellowship-data schema version: ${String(n)}.`);
-};
-//#endregion
-export { n, e as t };

package/dist/chunks/tooltip-DoQVSnOn.js

@@ -1,410 +0,0 @@
-import { n as e, r as t, t as n } from "./decorate-B_ZTN9li.js";
-import { LitElement as r, css as i, html as a, nothing as o } from "lit";
-import { customElement as s, property as c, query as l, state as u } from "lit/decorators.js";
-import { repeat as d } from "lit/directives/repeat.js";
-import { styleMap as f } from "lit/directives/style-map.js";
-//#region src/tooltip/rich-text.ts
-var p = {
-	bold: "strong",
-	"rt.bold": "strong",
-	"rt.absorb": "ability",
-	"rt.warning": "warning",
-	"rt.effect": "effect",
-	"rt.mana": "resource",
-	"rt.heal": "healing",
-	"rt.meikoability1": "meiko-primary",
-	"rt.meikoability2": "meiko-secondary"
-}, m = (e, t, n) => {
-	let r = t.replace(/\r\n?/g, "\n").split(/\n{2,}/);
-	r.forEach((t, i) => {
-		let a = e.at(-1);
-		if (t.length > 0) {
-			let e = a.at(-1);
-			e?.tone === n ? a[a.length - 1] = {
-				text: `${e.text}${t}`,
-				tone: n
-			} : a.push({
-				text: t,
-				tone: n
-			});
-		}
-		i < r.length - 1 && e.push([]);
-	});
-}, h = (e) => {
-	let t = [[]], n = ["default"], r = e.split(/(<\/?[^>]+>|<\/>)/g);
-	for (let e of r) {
-		if (!e) continue;
-		if (e === "</>") {
-			n.length > 1 && n.pop();
-			continue;
-		}
-		if (e.match(/^<\/\s*([^>\s]+)\s*>$/)) {
-			n.length > 1 && n.pop();
-			continue;
-		}
-		let r = e.match(/^<\s*([^/][^>\s]*)\s*>$/);
-		if (r) {
-			let e = r[1]?.toLowerCase() ?? "";
-			n.push(p[e] ?? "default");
-			continue;
-		}
-		m(t, e, n.at(-1) ?? "default");
-	}
-	return t;
-}, g = (e) => h(e).map((e) => e.map(({ text: e }) => e).join("")).join("\n\n").trim(), _ = (e, t, n) => Math.min(Math.max(e, t), Math.max(t, n)), v = (e, t, n) => {
-	let r = n.gap ?? 8, i = n.margin ?? 8, a = {
-		top: e.top - i,
-		bottom: n.viewportHeight - e.bottom - i,
-		right: n.viewportWidth - e.right - i,
-		left: e.left - i
-	}, o = {
-		top: t.height + r,
-		bottom: t.height + r,
-		right: t.width + r,
-		left: t.width + r
-	}, s = [
-		"top",
-		"bottom",
-		"right",
-		"left"
-	], c = n.placement ?? "auto", l = c === "auto" ? s.find((e) => a[e] >= o[e]) ?? [...s].sort((e, t) => a[t] - a[e])[0] : c, u = e.left + e.width / 2 - t.width / 2, d = e.top + e.height / 2 - t.height / 2, f = l === "left" ? e.left - t.width - r : l === "right" ? e.right + r : u, p = l === "top" ? e.top - t.height - r : l === "bottom" ? e.bottom + r : d;
-	return {
-		placement: l,
-		x: Math.round(_(f, i, n.viewportWidth - t.width - i)),
-		y: Math.round(_(p, i, n.viewportHeight - t.height - i))
-	};
-}, y = i`
-  :host {
-    --fellowship-tooltip-void: var(--_fellowship-field-surface-raised);
-    --fellowship-tooltip-ink: var(--_fellowship-field-ink);
-    --fellowship-tooltip-muted-ink: var(--_fellowship-field-muted);
-    --fellowship-tooltip-border: var(--_fellowship-field-border-strong);
-    --fellowship-tooltip-focus: var(--_fellowship-field-focus);
-    --fellowship-tooltip-ability: #76c5d2;
-    --fellowship-tooltip-warning: #d4a761;
-    --fellowship-tooltip-effect: #afa1ca;
-    --fellowship-tooltip-resource: #7cb2c2;
-    --fellowship-tooltip-healing: #82b997;
-    --fellowship-tooltip-meiko-primary: #c892a0;
-    --fellowship-tooltip-meiko-secondary: #8dbab7;
-    --fellowship-tooltip-font-family: var(--_fellowship-field-font-family);
-    --fellowship-tooltip-radius: var(--_fellowship-field-radius);
-    --fellowship-tooltip-max-width: 360px;
-
-    display: inline-block;
-    min-width: 0;
-    color: var(--fellowship-tooltip-ink);
-    font-family: var(--fellowship-tooltip-font-family);
-    -webkit-font-smoothing: antialiased;
-  }
-
-  :host([hidden]) {
-    display: none;
-  }
-
-  .trigger {
-    display: contents;
-  }
-
-  .surface {
-    position: fixed;
-    z-index: 2147483647;
-    box-sizing: border-box;
-    display: none;
-    overflow: visible;
-    width: max-content;
-    max-width: min(var(--fellowship-tooltip-max-width), calc(100vw - 16px));
-    margin: 0;
-    padding: 12px 14px 14px;
-    border: 1px solid var(--fellowship-tooltip-border);
-    border-radius: var(--fellowship-tooltip-radius);
-    background: var(--fellowship-tooltip-void);
-    color: var(--fellowship-tooltip-ink);
-    box-shadow: 0 8px 24px rgb(0 0 0 / 34%);
-    opacity: 0;
-    transform: translateY(4px) scale(0.98);
-    transform-origin: bottom center;
-    transition:
-      opacity 140ms cubic-bezier(0.23, 1, 0.32, 1),
-      transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
-    pointer-events: none;
-  }
-
-  .surface[data-open="true"] {
-    display: block;
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-
-  .surface[data-placement="bottom"] {
-    transform-origin: top center;
-  }
-
-  .surface[data-placement="left"] {
-    transform-origin: center right;
-  }
-
-  .surface[data-placement="right"] {
-    transform-origin: center left;
-  }
-
-  .heading {
-    position: relative;
-    margin: 0 0 6px;
-    padding-left: 12px;
-    color: var(--fellowship-tooltip-ink);
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 20px;
-    text-wrap: balance;
-  }
-
-  .heading::before {
-    position: absolute;
-    inset: 4px auto 4px 0;
-    width: 2px;
-    background: var(--_fellowship-field-accent);
-    content: "";
-  }
-
-  .content {
-    color: var(--fellowship-tooltip-muted-ink);
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 20px;
-    text-wrap: pretty;
-  }
-
-  .paragraph {
-    margin: 0;
-    white-space: pre-line;
-  }
-
-  .paragraph + .paragraph {
-    margin-top: 8px;
-  }
-
-  [data-tone="strong"] {
-    color: var(--fellowship-tooltip-ink);
-    font-weight: 600;
-  }
-
-  [data-tone="ability"] {
-    color: var(--fellowship-tooltip-ability);
-  }
-
-  [data-tone="warning"] {
-    color: var(--fellowship-tooltip-warning);
-  }
-
-  [data-tone="effect"] {
-    color: var(--fellowship-tooltip-effect);
-  }
-
-  [data-tone="resource"] {
-    color: var(--fellowship-tooltip-resource);
-  }
-
-  [data-tone="healing"] {
-    color: var(--fellowship-tooltip-healing);
-  }
-
-  [data-tone="meiko-primary"] {
-    color: var(--fellowship-tooltip-meiko-primary);
-  }
-
-  [data-tone="meiko-secondary"] {
-    color: var(--fellowship-tooltip-meiko-secondary);
-  }
-
-  .arrow {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    border: solid var(--fellowship-tooltip-border);
-    background: var(--fellowship-tooltip-void);
-    transform: rotate(45deg);
-  }
-
-  .surface[data-placement="top"] .arrow {
-    bottom: -5px;
-    left: calc(50% - 4px);
-    border-width: 0 1px 1px 0;
-  }
-
-  .surface[data-placement="bottom"] .arrow {
-    top: -5px;
-    left: calc(50% - 4px);
-    border-width: 1px 0 0 1px;
-  }
-
-  .surface[data-placement="left"] .arrow {
-    top: calc(50% - 4px);
-    right: -5px;
-    border-width: 1px 1px 0 0;
-  }
-
-  .surface[data-placement="right"] .arrow {
-    top: calc(50% - 4px);
-    left: -5px;
-    border-width: 0 0 1px 1px;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .surface {
-      transition: opacity 100ms linear;
-      transform: none;
-    }
-  }
-`, b = {
-	bubbles: !0,
-	composed: !0
-}, x = class extends r {
-	constructor(...e) {
-		super(...e), this.heading = null, this.text = null, this.placement = "auto", this.openDelay = 250, this.disabled = !1, this._open = !1, this._position = {
-			x: 0,
-			y: 0
-		}, this._resolvedPlacement = "top", this._paragraphs = [], this.#e = null, this.#t = null, this.#n = null, this.#r = !1, this.#i = null, this.#o = () => {
-			if (!this._open || !this.#t || !this._surface) return;
-			let e = v(this.#t.getBoundingClientRect(), this._surface.getBoundingClientRect(), {
-				placement: this.placement,
-				viewportWidth: window.innerWidth,
-				viewportHeight: window.innerHeight
-			});
-			e.x === this._position.x && e.y === this._position.y && e.placement === this._resolvedPlacement || (this._position = {
-				x: e.x,
-				y: e.y
-			}, this._resolvedPlacement = e.placement);
-		}, this.#l = () => {
-			this.disabled || this._open || (this.#_(), this.#e = window.setTimeout(() => {
-				this.#e = null, this.#a(!0, "pointer");
-			}, Math.max(0, this.openDelay)));
-		}, this.#u = () => {
-			this.#_(), this._open && this.#a(!1, "pointer");
-		}, this.#d = () => {
-			this.#_(), !this.disabled && !this._open && this.#a(!0, "focus");
-		}, this.#f = (e) => {
-			!this.contains(e.relatedTarget) && this._open && this.#a(!1, "focus");
-		}, this.#p = (e) => {
-			e.key === "Escape" && this._open && (e.stopPropagation(), this.#a(!1, "escape"));
-		}, this.#m = (e) => {
-			let t = e.currentTarget.assignedElements({ flatten: !0 })[0];
-			this.#g(), this.#t = t instanceof HTMLElement ? t : null, this.#h();
-		};
-	}
-	static {
-		this.styles = [t, y];
-	}
-	#e;
-	#t;
-	#n;
-	#r;
-	#i;
-	connectedCallback() {
-		super.connectedCallback(), e(this.ownerDocument), this.#i ??= new ResizeObserver(() => this.#o());
-	}
-	disconnectedCallback() {
-		this.#_(), this.#c(), this.#g(), super.disconnectedCallback();
-	}
-	updated(e) {
-		super.updated(e), (e.has("text") || e.has("heading")) && this.#h(), e.has("disabled") && this.disabled && this._open && this.#a(!1, "disabled"), e.has("placement") && this._open && this.#o();
-	}
-	willUpdate(e) {
-		super.willUpdate(e), e.has("text") && (this._paragraphs = h(this.text ?? ""));
-	}
-	show() {
-		this.disabled || this._open || this.#a(!0, "programmatic");
-	}
-	hide() {
-		this.#_(), this._open && this.#a(!1, "programmatic");
-	}
-	render() {
-		let e = {
-			left: `${this._position.x}px`,
-			top: `${this._position.y}px`
-		};
-		return a`
-      <span
-        class="trigger"
-        part="trigger"
-        @pointerenter=${this.#l}
-        @pointerleave=${this.#u}
-        @focusin=${this.#d}
-        @focusout=${this.#f}
-        @keydown=${this.#p}
-      >
-        <slot @slotchange=${this.#m}></slot>
-      </span>
-      <div
-        class="surface"
-        part="surface"
-        role="tooltip"
-        popover="manual"
-        data-open=${String(this._open)}
-        data-placement=${this._resolvedPlacement}
-        style=${f(e)}
-      >
-        <span class="arrow" part="arrow" aria-hidden="true"></span>
-        <slot name="content">
-          ${this.heading ? a`<p class="heading" part="heading">${this.heading}</p>` : o}
-          <div class="content" part="content">
-            ${d(this._paragraphs, (e, t) => t, (e, t) => a`
-                <p class="paragraph" part="paragraph">
-                  ${d(e, (e, n) => `${t}:${n}:${e.tone}:${e.text}`, (e) => a`<span data-tone=${e.tone}>${e.text}</span>`)}
-                </p>
-              `)}
-          </div>
-        </slot>
-      </div>
-    `;
-	}
-	#a(e, t) {
-		e !== this._open && (this._open = e, this.updateComplete.then(() => {
-			let t = this._surface;
-			t && (e ? ("showPopover" in t && !t.matches(":popover-open") && t.showPopover(), this.#s(), this.#o()) : ("hidePopover" in t && t.matches(":popover-open") && t.hidePopover(), this.#c()));
-		}), this.dispatchEvent(new CustomEvent("fellowship-tooltip-toggle", {
-			...b,
-			detail: {
-				open: e,
-				reason: t
-			}
-		})));
-	}
-	#o;
-	#s() {
-		window.addEventListener("resize", this.#o), window.addEventListener("scroll", this.#o, !0), this.#t && this.#i?.observe(this.#t), this._surface && this.#i?.observe(this._surface);
-	}
-	#c() {
-		window.removeEventListener("resize", this.#o), window.removeEventListener("scroll", this.#o, !0), this.#i?.disconnect();
-	}
-	#l;
-	#u;
-	#d;
-	#f;
-	#p;
-	#m;
-	#h() {
-		if (!this.#t) return;
-		this.#r ||= (this.#n = this.#t.getAttribute("aria-description"), !0);
-		let e = [this.heading, g(this.text ?? "")].filter(Boolean).join(". ");
-		e ? this.#t.setAttribute("aria-description", e) : this.#n === null && this.#t.removeAttribute("aria-description");
-	}
-	#g() {
-		this.#t && (this.#n === null ? this.#t.removeAttribute("aria-description") : this.#t.setAttribute("aria-description", this.#n), this.#t = null, this.#n = null, this.#r = !1);
-	}
-	#_() {
-		this.#e !== null && (window.clearTimeout(this.#e), this.#e = null);
-	}
-};
-n([c({ type: String })], x.prototype, "heading", void 0), n([c({ type: String })], x.prototype, "text", void 0), n([c({ type: String })], x.prototype, "placement", void 0), n([c({
-	type: Number,
-	attribute: "open-delay"
-})], x.prototype, "openDelay", void 0), n([c({
-	type: Boolean,
-	reflect: !0
-})], x.prototype, "disabled", void 0), n([u()], x.prototype, "_open", void 0), n([u()], x.prototype, "_position", void 0), n([u()], x.prototype, "_resolvedPlacement", void 0), n([u()], x.prototype, "_paragraphs", void 0), n([l(".surface")], x.prototype, "_surface", void 0), x = n([s("fellowship-tooltip")], x);
-var S = () => {
-	customElements.get("fellowship-tooltip") || customElements.define("fellowship-tooltip", x);
-};
-//#endregion
-export { g as a, h as i, S as n, v as r, x as t };