@malilion/block-ui-react 0.2.0 → 0.4.0

package/dist/components/crafting/TradingUI/TradingUI.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradingUI.types.js","names":[],"sources":["../../../../src/components/crafting/TradingUI/TradingUI.types.ts"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\n\nexport interface Trade {\n  id: string;\n  /** Price, usually an `<ItemStack />` (e.g. emeralds). */\n  cost: ReactNode;\n  /** Optional second price item. */\n  cost2?: ReactNode;\n  /** What the player receives. */\n  result: ReactNode;\n  /** Accessible summary, e.g. \"12 emeralds for a diamond sword\". */\n  label: string;\n  /** Times traded so far. */\n  uses?: number;\n  /** Uses before the trade sells out. */\n  maxUses?: number;\n}\n\nexport const villagerLevels = [\"Novice\", \"Apprentice\", \"Journeyman\", \"Expert\", \"Master\"] as const;\n\nexport interface TradingUIProps extends Omit<HTMLAttributes<HTMLDivElement>, \"defaultValue\"> {\n  trades: Trade[];\n  /** Controlled selected trade id. */\n  value?: string;\n  /** Initially selected trade id. @default the first trade */\n  defaultValue?: string;\n  onValueChange?: (id: string) => void;\n  /** Called when the player confirms the selected trade. */\n  onTrade?: (id: string) => void;\n  /** Villager profession shown in the header, e.g. \"Armorer\". */\n  profession?: ReactNode;\n  /** Villager level 1–5 (Novice … Master). */\n  level?: number;\n  /** Progress to the next level, 0–100. */\n  levelProgress?: number;\n  /** Accessible name. @default \"Trading\" */\n  label?: string;\n}\n"],"mappings":";AAkBA,IAAa,iBAAiB;CAAC;CAAU;CAAc;CAAc;CAAU;AAAQ"}

package/dist/components/crafting/TradingUI/TradingUI.utils.d.ts

@@ -0,0 +1,3 @@
+import type { Trade } from "./TradingUI.types";
+export declare function isSoldOut(trade: Trade): boolean;
+//# sourceMappingURL=TradingUI.utils.d.ts.map

package/dist/components/crafting/TradingUI/TradingUI.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradingUI.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/crafting/TradingUI/TradingUI.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAE/C"}

package/dist/components/crafting/TradingUI/TradingUI.utils.js

@@ -0,0 +1,8 @@
+//#region src/components/crafting/TradingUI/TradingUI.utils.ts
+function isSoldOut(trade) {
+	return trade.maxUses !== void 0 && (trade.uses ?? 0) >= trade.maxUses;
+}
+//#endregion
+export { isSoldOut };
+
+//# sourceMappingURL=TradingUI.utils.js.map

package/dist/components/crafting/TradingUI/TradingUI.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TradingUI.utils.js","names":[],"sources":["../../../../src/components/crafting/TradingUI/TradingUI.utils.ts"],"sourcesContent":["import type { Trade } from \"./TradingUI.types\";\n\nexport function isSoldOut(trade: Trade): boolean {\n  return trade.maxUses !== undefined && (trade.uses ?? 0) >= trade.maxUses;\n}\n"],"mappings":";AAEA,SAAgB,UAAU,OAAuB;CAC/C,OAAO,MAAM,YAAY,KAAA,MAAc,MAAM,QAAQ,MAAM,MAAM;AACnE"}

package/dist/components/crafting/TradingUI/index.d.ts

@@ -0,0 +1,4 @@
+export { TradingUI } from "./TradingUI";
+export { villagerLevels } from "./TradingUI.types";
+export type { Trade, TradingUIProps } from "./TradingUI.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/crafting/TradingUI/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/crafting/TradingUI/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/crafting/index.d.ts

@@ -3,4 +3,9 @@ export * from "./CraftingGrid";
 export * from "./CraftingResult";
 export * from "./CraftingTable";
 export * from "./Furnace";
+export * from "./EnchantingTable";
+export * from "./BrewingStand";
+export * from "./Anvil";
+export * from "./TradingUI";
+export * from "./RecipeBook";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/crafting/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/crafting/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/crafting/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/components/display/Avatar/Avatar.d.ts

@@ -0,0 +1,7 @@
+import type { AvatarProps } from "./Avatar.types";
+/**
+ * Square block avatar: a pixelated face image, or initials on a material
+ * colour picked from the name, with an optional presence dot.
+ */
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/components/display/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Avatar/Avatar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAKlD;;;GAGG;AACH,eAAO,MAAM,MAAM,yGAiCjB,CAAC"}

package/dist/components/display/Avatar/Avatar.js

@@ -0,0 +1,53 @@
+import { cx } from "../../../utils/cx.js";
+import Avatar_module_default from "./Avatar.module.js";
+import { avatarMaterial, initials } from "./Avatar.utils.js";
+import { forwardRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/display/Avatar/Avatar.tsx
+var STATUS_TEXT = {
+	online: "online",
+	away: "away",
+	busy: "busy",
+	offline: "offline"
+};
+/**
+* Square block avatar: a pixelated face image, or initials on a material
+* colour picked from the name, with an optional presence dot.
+*/
+var Avatar = forwardRef(function Avatar({ name, src, icon, size = "md", status, decorative = false, className, ...rest }, ref) {
+	const [failedSrc, setFailedSrc] = useState(void 0);
+	const showImage = src !== void 0 && src !== failedSrc;
+	const accessibleName = status ? `${name} (${STATUS_TEXT[status]})` : name;
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		role: decorative ? void 0 : "img",
+		"aria-label": decorative ? void 0 : accessibleName,
+		"aria-hidden": decorative || void 0,
+		"data-size": size,
+		"data-material": avatarMaterial(name),
+		className: cx(Avatar_module_default.avatar, className),
+		...rest,
+		children: [showImage ? /* @__PURE__ */ jsx("img", {
+			src,
+			alt: "",
+			className: Avatar_module_default.image,
+			onError: () => setFailedSrc(src)
+		}) : icon ? /* @__PURE__ */ jsx("span", {
+			className: Avatar_module_default.icon,
+			"aria-hidden": "true",
+			children: icon
+		}) : /* @__PURE__ */ jsx("span", {
+			className: Avatar_module_default.initials,
+			"aria-hidden": "true",
+			children: initials(name)
+		}), status ? /* @__PURE__ */ jsx("span", {
+			className: Avatar_module_default.status,
+			"data-status": status,
+			"aria-hidden": "true"
+		}) : null]
+	});
+});
+//#endregion
+export { Avatar };
+
+//# sourceMappingURL=Avatar.js.map

package/dist/components/display/Avatar/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","names":["styles"],"sources":["../../../../src/components/display/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport styles from \"./Avatar.module.css\";\nimport type { AvatarProps } from \"./Avatar.types\";\nimport { avatarMaterial, initials } from \"./Avatar.utils\";\n\nconst STATUS_TEXT = { online: \"online\", away: \"away\", busy: \"busy\", offline: \"offline\" } as const;\n\n/**\n * Square block avatar: a pixelated face image, or initials on a material\n * colour picked from the name, with an optional presence dot.\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { name, src, icon, size = \"md\", status, decorative = false, className, ...rest },\n  ref,\n) {\n  const [failedSrc, setFailedSrc] = useState<string | undefined>(undefined);\n  const showImage = src !== undefined && src !== failedSrc;\n  const accessibleName = status ? `${name} (${STATUS_TEXT[status]})` : name;\n\n  return (\n    <span\n      ref={ref}\n      role={decorative ? undefined : \"img\"}\n      aria-label={decorative ? undefined : accessibleName}\n      aria-hidden={decorative || undefined}\n      data-size={size}\n      data-material={avatarMaterial(name)}\n      className={cx(styles.avatar, className)}\n      {...rest}\n    >\n      {showImage ? (\n        <img src={src} alt=\"\" className={styles.image} onError={() => setFailedSrc(src)} />\n      ) : icon ? (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : (\n        <span className={styles.initials} aria-hidden=\"true\">\n          {initials(name)}\n        </span>\n      )}\n      {status ? <span className={styles.status} data-status={status} aria-hidden=\"true\" /> : null}\n    </span>\n  );\n});\n"],"mappings":";;;;;;AAMA,IAAM,cAAc;CAAE,QAAQ;CAAU,MAAM;CAAQ,MAAM;CAAQ,SAAS;AAAU;;;;;AAMvF,IAAa,SAAS,WAAyC,SAAS,OACtE,EAAE,MAAM,KAAK,MAAM,OAAO,MAAM,QAAQ,aAAa,OAAO,WAAW,GAAG,QAC1E,KACA;CACA,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAA,CAAS;CACxE,MAAM,YAAY,QAAQ,KAAA,KAAa,QAAQ;CAC/C,MAAM,iBAAiB,SAAS,GAAG,KAAK,IAAI,YAAY,QAAQ,KAAK;CAErE,OACE,qBAAC,QAAD;EACO;EACL,MAAM,aAAa,KAAA,IAAY;EAC/B,cAAY,aAAa,KAAA,IAAY;EACrC,eAAa,cAAc,KAAA;EAC3B,aAAW;EACX,iBAAe,eAAe,IAAI;EAClC,WAAW,GAAGA,sBAAO,QAAQ,SAAS;EACtC,GAAI;EARN,UAAA,CAUG,YACC,oBAAC,OAAD;GAAU;GAAK,KAAI;GAAG,WAAWA,sBAAO;GAAO,eAAe,aAAa,GAAG;EAAI,CAAA,IAChF,OACF,oBAAC,QAAD;GAAM,WAAWA,sBAAO;GAAM,eAAY;GACvC,UAAA;EACG,CAAA,IAEN,oBAAC,QAAD;GAAM,WAAWA,sBAAO;GAAU,eAAY;GAC3C,UAAA,SAAS,IAAI;EACV,CAAA,GAEP,SAAS,oBAAC,QAAD;GAAM,WAAWA,sBAAO;GAAQ,eAAa;GAAQ,eAAY;EAAQ,CAAA,IAAI,IACnF;;AAEV,CAAC"}

package/dist/components/display/Avatar/Avatar.module.js

@@ -0,0 +1,17 @@
+//#region src/components/display/Avatar/Avatar.module.css
+var avatar = "block-avatar-9s1vM";
+var image = "block-image-RZELF";
+var icon = "block-icon-mq-FE";
+var initials = "block-initials-siD-X";
+var status = "block-status-CalIQ";
+var Avatar_module_default = {
+	avatar,
+	image,
+	icon,
+	initials,
+	status
+};
+//#endregion
+export { avatar, Avatar_module_default as default, icon, image, initials, status };
+
+//# sourceMappingURL=Avatar.module.js.map

package/dist/components/display/Avatar/Avatar.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.module.js","names":[],"sources":["../../../../src/components/display/Avatar/Avatar.module.css"],"sourcesContent":[".avatar {\n  --avatar-size: 32px;\n  position: relative;\n  display: inline-flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  width: var(--avatar-size);\n  height: var(--avatar-size);\n  color: var(--block-mat-on);\n  background-color: var(--block-mat);\n  border: var(--block-border-width-thin) solid var(--block-black);\n  box-shadow:\n    inset 2px 2px 0 var(--block-mat-light),\n    inset -2px -2px 0 var(--block-mat-dark);\n  vertical-align: middle;\n}\n\n.avatar[data-size=\"sm\"] {\n  --avatar-size: 24px;\n}\n\n.avatar[data-size=\"lg\"] {\n  --avatar-size: 48px;\n}\n\n.avatar[data-size=\"xl\"] {\n  --avatar-size: 64px;\n}\n\n.image {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  image-rendering: pixelated;\n}\n\n.icon {\n  display: inline-flex;\n  width: 70%;\n  height: 70%;\n}\n\n.icon > * {\n  width: 100%;\n  height: 100%;\n}\n\n.initials {\n  font-family: var(--block-font-display);\n  font-size: calc(var(--avatar-size) * 0.4);\n  font-weight: var(--block-font-weight-bold);\n  line-height: 1;\n  text-shadow: var(--block-mat-text-shadow, none);\n}\n\n/* Presence dot, a quarter of the avatar, in the bottom-right corner. */\n.status {\n  position: absolute;\n  right: -3px;\n  bottom: -3px;\n  width: max(8px, calc(var(--avatar-size) * 0.3));\n  height: max(8px, calc(var(--avatar-size) * 0.3));\n  border: 2px solid var(--block-black);\n}\n\n.status[data-status=\"online\"] {\n  background-color: var(--block-emerald-light);\n}\n\n.status[data-status=\"away\"] {\n  background-color: var(--block-gold-light);\n}\n\n.status[data-status=\"busy\"] {\n  background-color: var(--block-redstone-light);\n}\n\n.status[data-status=\"offline\"] {\n  background-color: var(--block-stone);\n}\n"],"mappings":""}

package/dist/components/display/Avatar/Avatar.types.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export declare const avatarStatuses: readonly ["online", "away", "busy", "offline"];
+export type AvatarStatus = (typeof avatarStatuses)[number];
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Player name: the accessible name and the source of the initials. */
+    name: string;
+    /** Skin / face image URL (rendered pixelated). Falls back to initials if it fails. */
+    src?: string;
+    /** Icon instead of initials when there is no image. */
+    icon?: ReactNode;
+    /** 24 / 32 / 48 / 64 px. @default "md" */
+    size?: "sm" | "md" | "lg" | "xl";
+    /** Presence dot in the corner. */
+    status?: AvatarStatus;
+    /** Hide from assistive technology when the name is already shown next to it. */
+    decorative?: boolean;
+}
+//# sourceMappingURL=Avatar.types.d.ts.map

package/dist/components/display/Avatar/Avatar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Avatar/Avatar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,eAAO,MAAM,cAAc,gDAAiD,CAAC;AAE7E,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE,uEAAuE;IACvE,IAAI,EAAE,MAAM,CAAC;IACb,sFAAsF;IACtF,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,uDAAuD;IACvD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,kCAAkC;IAClC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,gFAAgF;IAChF,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB"}

package/dist/components/display/Avatar/Avatar.types.js

@@ -0,0 +1,11 @@
+//#region src/components/display/Avatar/Avatar.types.ts
+var avatarStatuses = [
+	"online",
+	"away",
+	"busy",
+	"offline"
+];
+//#endregion
+export { avatarStatuses };
+
+//# sourceMappingURL=Avatar.types.js.map

package/dist/components/display/Avatar/Avatar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.types.js","names":[],"sources":["../../../../src/components/display/Avatar/Avatar.types.ts"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\n\nexport const avatarStatuses = [\"online\", \"away\", \"busy\", \"offline\"] as const;\n\nexport type AvatarStatus = (typeof avatarStatuses)[number];\n\nexport interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Player name: the accessible name and the source of the initials. */\n  name: string;\n  /** Skin / face image URL (rendered pixelated). Falls back to initials if it fails. */\n  src?: string;\n  /** Icon instead of initials when there is no image. */\n  icon?: ReactNode;\n  /** 24 / 32 / 48 / 64 px. @default \"md\" */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n  /** Presence dot in the corner. */\n  status?: AvatarStatus;\n  /** Hide from assistive technology when the name is already shown next to it. */\n  decorative?: boolean;\n}\n"],"mappings":";AAEA,IAAa,iBAAiB;CAAC;CAAU;CAAQ;CAAQ;AAAS"}

package/dist/components/display/Avatar/Avatar.utils.d.ts

@@ -0,0 +1,7 @@
+/** Up to two letters: first letters of the first two words, or the first two characters. */
+export declare function initials(name: string): string;
+declare const MATERIALS: readonly ["grass", "diamond", "gold", "redstone", "amethyst", "emerald", "wood", "water"];
+/** Stable block material for a name, so a player always gets the same colour. */
+export declare function avatarMaterial(name: string): (typeof MATERIALS)[number];
+export {};
+//# sourceMappingURL=Avatar.utils.d.ts.map

package/dist/components/display/Avatar/Avatar.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Avatar/Avatar.utils.ts"],"names":[],"mappings":"AAAA,4FAA4F;AAC5F,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAS7C;AAED,QAAA,MAAM,SAAS,2FASL,CAAC;AAEX,iFAAiF;AACjF,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAIvE"}

package/dist/components/display/Avatar/Avatar.utils.js

@@ -0,0 +1,28 @@
+//#region src/components/display/Avatar/Avatar.utils.ts
+/** Up to two letters: first letters of the first two words, or the first two characters. */
+function initials(name) {
+	const words = name.replace(/[_\-.]+/g, " ").trim().split(/\s+/).filter(Boolean);
+	if (words.length === 0) return "?";
+	if (words.length === 1) return (words[0] ?? "").slice(0, 2).toUpperCase();
+	return `${words[0]?.[0] ?? ""}${words[1]?.[0] ?? ""}`.toUpperCase();
+}
+var MATERIALS = [
+	"grass",
+	"diamond",
+	"gold",
+	"redstone",
+	"amethyst",
+	"emerald",
+	"wood",
+	"water"
+];
+/** Stable block material for a name, so a player always gets the same colour. */
+function avatarMaterial(name) {
+	let hash = 0;
+	for (const char of name) hash = hash * 31 + char.charCodeAt(0) >>> 0;
+	return MATERIALS[hash % MATERIALS.length] ?? "grass";
+}
+//#endregion
+export { avatarMaterial, initials };
+
+//# sourceMappingURL=Avatar.utils.js.map

package/dist/components/display/Avatar/Avatar.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.utils.js","names":[],"sources":["../../../../src/components/display/Avatar/Avatar.utils.ts"],"sourcesContent":["/** Up to two letters: first letters of the first two words, or the first two characters. */\nexport function initials(name: string): string {\n  const words = name\n    .replace(/[_\\-.]+/g, \" \")\n    .trim()\n    .split(/\\s+/)\n    .filter(Boolean);\n  if (words.length === 0) return \"?\";\n  if (words.length === 1) return (words[0] ?? \"\").slice(0, 2).toUpperCase();\n  return `${words[0]?.[0] ?? \"\"}${words[1]?.[0] ?? \"\"}`.toUpperCase();\n}\n\nconst MATERIALS = [\n  \"grass\",\n  \"diamond\",\n  \"gold\",\n  \"redstone\",\n  \"amethyst\",\n  \"emerald\",\n  \"wood\",\n  \"water\",\n] as const;\n\n/** Stable block material for a name, so a player always gets the same colour. */\nexport function avatarMaterial(name: string): (typeof MATERIALS)[number] {\n  let hash = 0;\n  for (const char of name) hash = (hash * 31 + char.charCodeAt(0)) >>> 0;\n  return MATERIALS[hash % MATERIALS.length] ?? \"grass\";\n}\n"],"mappings":";;AACA,SAAgB,SAAS,MAAsB;CAC7C,MAAM,QAAQ,KACX,QAAQ,YAAY,GAAG,CAAC,CACxB,KAAK,CAAC,CACN,MAAM,KAAK,CAAC,CACZ,OAAO,OAAO;CACjB,IAAI,MAAM,WAAW,GAAG,OAAO;CAC/B,IAAI,MAAM,WAAW,GAAG,QAAQ,MAAM,MAAM,GAAA,CAAI,MAAM,GAAG,CAAC,CAAC,CAAC,YAAY;CACxE,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,KAAK,MAAM,EAAE,GAAG,MAAM,KAAK,YAAY;AACpE;AAEA,IAAM,YAAY;CAChB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;;AAGA,SAAgB,eAAe,MAA0C;CACvE,IAAI,OAAO;CACX,KAAK,MAAM,QAAQ,MAAM,OAAQ,OAAO,KAAK,KAAK,WAAW,CAAC,MAAO;CACrE,OAAO,UAAU,OAAO,UAAU,WAAW;AAC/C"}

package/dist/components/display/Avatar/index.d.ts

@@ -0,0 +1,5 @@
+export { Avatar } from "./Avatar";
+export { avatarStatuses } from "./Avatar.types";
+export { initials } from "./Avatar.utils";
+export type { AvatarProps, AvatarStatus } from "./Avatar.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/display/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/display/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/display/SkillTree/SkillTree.d.ts

@@ -0,0 +1,8 @@
+import type { SkillTreeProps } from "./SkillTree.types";
+/**
+ * Skill tree: nodes on a grid joined to their prerequisites. Unlocked skills
+ * glow, available ones can be bought with skill points, locked ones show what
+ * they need. Selecting a node shows its details and Unlock button.
+ */
+export declare const SkillTree: import("react").ForwardRefExoticComponent<SkillTreeProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SkillTree.d.ts.map

package/dist/components/display/SkillTree/SkillTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillTree.d.ts","sourceRoot":"","sources":["../../../../src/components/display/SkillTree/SkillTree.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAKxD;;;;GAIG;AACH,eAAO,MAAM,SAAS,2GAgIpB,CAAC"}

package/dist/components/display/SkillTree/SkillTree.js

@@ -0,0 +1,138 @@
+import { cx } from "../../../utils/cx.js";
+import { BlockButton } from "../../actions/BlockButton/BlockButton.js";
+import SkillTree_module_default from "./SkillTree.module.js";
+import { gridSize, skillState } from "./SkillTree.utils.js";
+import { forwardRef, useId, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/display/SkillTree/SkillTree.tsx
+var STATE_TEXT = {
+	locked: "locked",
+	available: "available",
+	unlocked: "unlocked"
+};
+/**
+* Skill tree: nodes on a grid joined to their prerequisites. Unlocked skills
+* glow, available ones can be bought with skill points, locked ones show what
+* they need. Selecting a node shows its details and Unlock button.
+*/
+var SkillTree = forwardRef(function SkillTree({ skills, unlocked, points, onUnlock, defaultValue, label = "Skill tree", className, ...rest }, ref) {
+	const detailId = useId();
+	const [selectedId, setSelectedId] = useState(defaultValue ?? skills[0]?.id ?? "");
+	const unlockedSet = new Set(unlocked);
+	const byId = new Map(skills.map((skill) => [skill.id, skill]));
+	const { rows, columns } = gridSize(skills);
+	const selected = byId.get(selectedId);
+	const selectedState = selected ? skillState(selected, unlockedSet) : void 0;
+	const selectedCost = selected?.cost ?? 1;
+	const affordable = points === void 0 || points >= selectedCost;
+	const missing = selected && selectedState === "locked" ? (selected.requires ?? []).filter((id) => !unlockedSet.has(id)).map((id) => byId.get(id)?.label ?? id) : [];
+	const edges = skills.flatMap((skill) => (skill.requires ?? []).flatMap((id) => {
+		const from = byId.get(id);
+		return from ? [{
+			key: `${id}-${skill.id}`,
+			from,
+			to: skill,
+			lit: unlockedSet.has(skill.id)
+		}] : [];
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": label,
+		className: cx(SkillTree_module_default.tree, className),
+		...rest,
+		children: [
+			points !== void 0 ? /* @__PURE__ */ jsxs("p", {
+				className: SkillTree_module_default.points,
+				children: ["Skill points: ", /* @__PURE__ */ jsx("strong", { children: points })]
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: SkillTree_module_default.board,
+				style: {
+					"--block-skill-rows": rows,
+					"--block-skill-columns": columns
+				},
+				children: [/* @__PURE__ */ jsx("svg", {
+					className: SkillTree_module_default.lines,
+					viewBox: `0 0 ${columns} ${rows}`,
+					preserveAspectRatio: "none",
+					"aria-hidden": "true",
+					children: edges.map(({ key, from, to, lit }) => /* @__PURE__ */ jsx("line", {
+						x1: from.column - .5,
+						y1: from.row - .5,
+						x2: to.column - .5,
+						y2: to.row - .5,
+						"data-lit": lit || void 0,
+						vectorEffect: "non-scaling-stroke"
+					}, key))
+				}), /* @__PURE__ */ jsx("ul", {
+					className: SkillTree_module_default.nodes,
+					"aria-label": "Skills",
+					children: skills.map((skill) => {
+						const state = skillState(skill, unlockedSet);
+						return /* @__PURE__ */ jsx("li", {
+							className: SkillTree_module_default.cell,
+							style: {
+								"--block-skill-row": skill.row,
+								"--block-skill-col": skill.column
+							},
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: SkillTree_module_default.node,
+								"data-state": state,
+								"aria-pressed": skill.id === selectedId,
+								"aria-controls": detailId,
+								"aria-label": `${skill.label}, ${STATE_TEXT[state]}`,
+								onClick: () => setSelectedId(skill.id),
+								children: /* @__PURE__ */ jsx("span", {
+									className: SkillTree_module_default.icon,
+									"aria-hidden": "true",
+									children: skill.icon
+								})
+							})
+						}, skill.id);
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("section", {
+				id: detailId,
+				className: SkillTree_module_default.detail,
+				"aria-live": "polite",
+				"aria-label": "Skill details",
+				children: selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("p", {
+						className: SkillTree_module_default.name,
+						children: [
+							selected.label,
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: SkillTree_module_default.state,
+								"data-state": selectedState,
+								children: selectedState
+							})
+						]
+					}),
+					selected.description ? /* @__PURE__ */ jsx("p", {
+						className: SkillTree_module_default.description,
+						children: selected.description
+					}) : null,
+					missing.length > 0 ? /* @__PURE__ */ jsxs("p", {
+						className: SkillTree_module_default.requires,
+						children: ["Requires: ", missing.join(", ")]
+					}) : null,
+					selectedState === "available" && onUnlock ? /* @__PURE__ */ jsx(BlockButton, {
+						variant: "emerald",
+						size: "sm",
+						disabled: !affordable,
+						onClick: () => onUnlock(selected.id),
+						children: affordable ? `Unlock (${selectedCost} ${selectedCost === 1 ? "point" : "points"})` : `Needs ${selectedCost} ${selectedCost === 1 ? "point" : "points"}`
+					}) : null
+				] }) : null
+			})
+		]
+	});
+});
+//#endregion
+export { SkillTree };
+
+//# sourceMappingURL=SkillTree.js.map

package/dist/components/display/SkillTree/SkillTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillTree.js","names":["styles","_Fragment"],"sources":["../../../../src/components/display/SkillTree/SkillTree.tsx"],"sourcesContent":["import { forwardRef, useId, useState, type CSSProperties } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport { BlockButton } from \"../../actions/BlockButton/BlockButton\";\nimport styles from \"./SkillTree.module.css\";\nimport type { SkillTreeProps } from \"./SkillTree.types\";\nimport { gridSize, skillState } from \"./SkillTree.utils\";\n\nconst STATE_TEXT = { locked: \"locked\", available: \"available\", unlocked: \"unlocked\" } as const;\n\n/**\n * Skill tree: nodes on a grid joined to their prerequisites. Unlocked skills\n * glow, available ones can be bought with skill points, locked ones show what\n * they need. Selecting a node shows its details and Unlock button.\n */\nexport const SkillTree = forwardRef<HTMLDivElement, SkillTreeProps>(function SkillTree(\n  { skills, unlocked, points, onUnlock, defaultValue, label = \"Skill tree\", className, ...rest },\n  ref,\n) {\n  const detailId = useId();\n  const [selectedId, setSelectedId] = useState(defaultValue ?? skills[0]?.id ?? \"\");\n  const unlockedSet = new Set(unlocked);\n  const byId = new Map(skills.map((skill) => [skill.id, skill]));\n  const { rows, columns } = gridSize(skills);\n  const selected = byId.get(selectedId);\n  const selectedState = selected ? skillState(selected, unlockedSet) : undefined;\n  const selectedCost = selected?.cost ?? 1;\n  const affordable = points === undefined || points >= selectedCost;\n  const missing =\n    selected && selectedState === \"locked\"\n      ? (selected.requires ?? [])\n          .filter((id) => !unlockedSet.has(id))\n          .map((id) => byId.get(id)?.label ?? id)\n      : [];\n\n  // Connector centres in grid units (0.5 = middle of the first cell).\n  const edges = skills.flatMap((skill) =>\n    (skill.requires ?? []).flatMap((id) => {\n      const from = byId.get(id);\n      return from\n        ? [{ key: `${id}-${skill.id}`, from, to: skill, lit: unlockedSet.has(skill.id) }]\n        : [];\n    }),\n  );\n\n  return (\n    <div ref={ref} role=\"group\" aria-label={label} className={cx(styles.tree, className)} {...rest}>\n      {points !== undefined ? (\n        <p className={styles.points}>\n          Skill points: <strong>{points}</strong>\n        </p>\n      ) : null}\n      <div\n        className={styles.board}\n        style={{ \"--block-skill-rows\": rows, \"--block-skill-columns\": columns } as CSSProperties}\n      >\n        <svg\n          className={styles.lines}\n          viewBox={`0 0 ${columns} ${rows}`}\n          preserveAspectRatio=\"none\"\n          aria-hidden=\"true\"\n        >\n          {edges.map(({ key, from, to, lit }) => (\n            <line\n              key={key}\n              x1={from.column - 0.5}\n              y1={from.row - 0.5}\n              x2={to.column - 0.5}\n              y2={to.row - 0.5}\n              data-lit={lit || undefined}\n              vectorEffect=\"non-scaling-stroke\"\n            />\n          ))}\n        </svg>\n        <ul className={styles.nodes} aria-label=\"Skills\">\n          {skills.map((skill) => {\n            const state = skillState(skill, unlockedSet);\n            return (\n              <li\n                key={skill.id}\n                className={styles.cell}\n                style={\n                  {\n                    \"--block-skill-row\": skill.row,\n                    \"--block-skill-col\": skill.column,\n                  } as CSSProperties\n                }\n              >\n                <button\n                  type=\"button\"\n                  className={styles.node}\n                  data-state={state}\n                  aria-pressed={skill.id === selectedId}\n                  aria-controls={detailId}\n                  aria-label={`${skill.label}, ${STATE_TEXT[state]}`}\n                  onClick={() => setSelectedId(skill.id)}\n                >\n                  <span className={styles.icon} aria-hidden=\"true\">\n                    {skill.icon}\n                  </span>\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      </div>\n      <section\n        id={detailId}\n        className={styles.detail}\n        aria-live=\"polite\"\n        aria-label=\"Skill details\"\n      >\n        {selected ? (\n          <>\n            <p className={styles.name}>\n              {selected.label}{\" \"}\n              <span className={styles.state} data-state={selectedState}>\n                {selectedState}\n              </span>\n            </p>\n            {selected.description ? (\n              <p className={styles.description}>{selected.description}</p>\n            ) : null}\n            {missing.length > 0 ? (\n              <p className={styles.requires}>Requires: {missing.join(\", \")}</p>\n            ) : null}\n            {selectedState === \"available\" && onUnlock ? (\n              <BlockButton\n                variant=\"emerald\"\n                size=\"sm\"\n                disabled={!affordable}\n                onClick={() => onUnlock(selected.id)}\n              >\n                {affordable\n                  ? `Unlock (${selectedCost} ${selectedCost === 1 ? \"point\" : \"points\"})`\n                  : `Needs ${selectedCost} ${selectedCost === 1 ? \"point\" : \"points\"}`}\n              </BlockButton>\n            ) : null}\n          </>\n        ) : null}\n      </section>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/components/display/SkillTree/SkillTree.module.js

@@ -0,0 +1,33 @@
+//#region src/components/display/SkillTree/SkillTree.module.css
+var tree = "block-tree-t4d9e";
+var points = "block-points-l5jMV";
+var board = "block-board-n1kUI";
+var lines = "block-lines-tJ0wI";
+var nodes = "block-nodes-DQOOP";
+var cell = "block-cell-LDgL6";
+var node = "block-node-91mfm";
+var icon = "block-icon-BuZf1";
+var detail = "block-detail-RJItE";
+var name = "block-name-rX7DZ";
+var state = "block-state-sNumz";
+var description = "block-description-dDvD4";
+var requires = "block-requires-Vg1oB";
+var SkillTree_module_default = {
+	tree,
+	points,
+	board,
+	lines,
+	nodes,
+	cell,
+	node,
+	icon,
+	detail,
+	name,
+	state,
+	description,
+	requires
+};
+//#endregion
+export { board, cell, SkillTree_module_default as default, description, detail, icon, lines, name, node, nodes, points, requires, state, tree };
+
+//# sourceMappingURL=SkillTree.module.js.map

package/dist/components/display/SkillTree/SkillTree.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillTree.module.js","names":[],"sources":["../../../../src/components/display/SkillTree/SkillTree.module.css"],"sourcesContent":[".tree {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--block-space-3);\n  width: 100%;\n}\n\n.points {\n  margin: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-sm);\n  text-transform: uppercase;\n  color: var(--block-text-muted);\n}\n\n.points strong {\n  color: var(--block-emerald-light);\n}\n\n.board {\n  --cell: 64px;\n  position: relative;\n  width: calc(var(--block-skill-columns) * var(--cell));\n  max-width: 100%;\n  aspect-ratio: var(--block-skill-columns) / var(--block-skill-rows);\n}\n\n.lines {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.lines line {\n  stroke: var(--block-border);\n  stroke-width: 4;\n}\n\n.lines line[data-lit] {\n  stroke: var(--block-emerald);\n}\n\n.nodes {\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(var(--block-skill-columns), 1fr);\n  grid-template-rows: repeat(var(--block-skill-rows), 1fr);\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.cell {\n  grid-row: var(--block-skill-row);\n  grid-column: var(--block-skill-col);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.node {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: min(48px, 80%);\n  aspect-ratio: 1;\n  padding: 0;\n  background-color: var(--block-slot);\n  border: var(--block-border-width) solid var(--block-border);\n  box-shadow: var(--block-shadow-inset);\n  cursor: pointer;\n}\n\n.node[data-state=\"available\"] {\n  background-color: var(--block-surface-alt);\n  border-color: var(--block-gold);\n  box-shadow: var(--block-shadow-bevel);\n}\n\n.node[data-state=\"unlocked\"] {\n  background-color: color-mix(in srgb, var(--block-emerald) 35%, var(--block-surface-alt));\n  border-color: var(--block-emerald-light);\n  box-shadow:\n    var(--block-shadow-bevel),\n    0 0 0 2px color-mix(in srgb, var(--block-emerald-light) 40%, transparent);\n}\n\n.node[aria-pressed=\"true\"] {\n  outline: 3px solid var(--block-text);\n  outline-offset: 2px;\n}\n\n.node:focus-visible {\n  outline: 3px solid var(--block-focus);\n  outline-offset: 2px;\n}\n\n.icon {\n  display: inline-flex;\n  width: 70%;\n  height: 70%;\n}\n\n.icon > * {\n  width: 100%;\n  height: 100%;\n}\n\n.node[data-state=\"locked\"] .icon {\n  opacity: 0.45;\n  filter: grayscale(1);\n}\n\n.detail {\n  width: 100%;\n  max-width: 420px;\n  min-height: 72px;\n  padding: var(--block-space-2) var(--block-space-3);\n  background-color: var(--block-surface-alt);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  box-shadow: var(--block-shadow-bevel);\n}\n\n.detail > * + * {\n  margin-top: var(--block-space-2);\n}\n\n.name {\n  margin: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-md);\n  text-transform: uppercase;\n}\n\n.state {\n  margin-left: var(--block-space-1);\n  font-size: var(--block-font-size-xs);\n  color: var(--block-text-muted);\n}\n\n.state[data-state=\"unlocked\"] {\n  color: var(--block-emerald-light);\n}\n\n.state[data-state=\"available\"] {\n  color: var(--block-gold-light);\n}\n\n.description {\n  margin: 0;\n  font-size: var(--block-font-size-sm);\n  color: var(--block-text-muted);\n}\n\n.requires {\n  margin: 0;\n  font-size: var(--block-font-size-sm);\n  /* Lightened so it stays above 4.5:1 on every theme's panel colour. */\n  color: color-mix(in srgb, var(--block-redstone-light) 65%, var(--block-white));\n}\n"],"mappings":""}

package/dist/components/display/SkillTree/SkillTree.types.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface SkillNode {
+    id: string;
+    label: string;
+    icon: ReactNode;
+    description?: ReactNode;
+    /** Skill points needed to unlock. @default 1 */
+    cost?: number;
+    /** 1-based grid position. */
+    row: number;
+    column: number;
+    /** Skills that must be unlocked first. */
+    requires?: string[];
+}
+export type SkillState = "locked" | "available" | "unlocked";
+export interface SkillTreeProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue"> {
+    skills: SkillNode[];
+    /** Ids of unlocked skills. */
+    unlocked: string[];
+    /** Skill points the player can spend. */
+    points?: number;
+    /** Called when an available, affordable skill is unlocked. */
+    onUnlock?: (id: string) => void;
+    /** Initially selected skill id. */
+    defaultValue?: string;
+    /** Accessible name. @default "Skill tree" */
+    label?: string;
+}
+//# sourceMappingURL=SkillTree.types.d.ts.map

package/dist/components/display/SkillTree/SkillTree.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillTree.types.d.ts","sourceRoot":"","sources":["../../../../src/components/display/SkillTree/SkillTree.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC;AAE7D,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC;IAC1F,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/display/SkillTree/SkillTree.utils.d.ts

@@ -0,0 +1,8 @@
+import type { SkillNode, SkillState } from "./SkillTree.types";
+export declare function skillState(skill: SkillNode, unlocked: ReadonlySet<string>): SkillState;
+/** Grid size needed to fit every node. */
+export declare function gridSize(skills: SkillNode[]): {
+    rows: number;
+    columns: number;
+};
+//# sourceMappingURL=SkillTree.utils.d.ts.map

package/dist/components/display/SkillTree/SkillTree.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillTree.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/display/SkillTree/SkillTree.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/D,wBAAgB,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG,UAAU,CAGtF;AAED,0CAA0C;AAC1C,wBAAgB,QAAQ,CAAC,MAAM,EAAE,SAAS,EAAE,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAK/E"}

package/dist/components/display/SkillTree/SkillTree.utils.js

@@ -0,0 +1,16 @@
+//#region src/components/display/SkillTree/SkillTree.utils.ts
+function skillState(skill, unlocked) {
+	if (unlocked.has(skill.id)) return "unlocked";
+	return (skill.requires ?? []).every((id) => unlocked.has(id)) ? "available" : "locked";
+}
+/** Grid size needed to fit every node. */
+function gridSize(skills) {
+	return {
+		rows: Math.max(1, ...skills.map((skill) => skill.row)),
+		columns: Math.max(1, ...skills.map((skill) => skill.column))
+	};
+}
+//#endregion
+export { gridSize, skillState };
+
+//# sourceMappingURL=SkillTree.utils.js.map

package/dist/components/display/SkillTree/SkillTree.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillTree.utils.js","names":[],"sources":["../../../../src/components/display/SkillTree/SkillTree.utils.ts"],"sourcesContent":["import type { SkillNode, SkillState } from \"./SkillTree.types\";\n\nexport function skillState(skill: SkillNode, unlocked: ReadonlySet<string>): SkillState {\n  if (unlocked.has(skill.id)) return \"unlocked\";\n  return (skill.requires ?? []).every((id) => unlocked.has(id)) ? \"available\" : \"locked\";\n}\n\n/** Grid size needed to fit every node. */\nexport function gridSize(skills: SkillNode[]): { rows: number; columns: number } {\n  return {\n    rows: Math.max(1, ...skills.map((skill) => skill.row)),\n    columns: Math.max(1, ...skills.map((skill) => skill.column)),\n  };\n}\n"],"mappings":";AAEA,SAAgB,WAAW,OAAkB,UAA2C;CACtF,IAAI,SAAS,IAAI,MAAM,EAAE,GAAG,OAAO;CACnC,QAAQ,MAAM,YAAY,CAAC,EAAA,CAAG,OAAO,OAAO,SAAS,IAAI,EAAE,CAAC,IAAI,cAAc;AAChF;;AAGA,SAAgB,SAAS,QAAwD;CAC/E,OAAO;EACL,MAAM,KAAK,IAAI,GAAG,GAAG,OAAO,KAAK,UAAU,MAAM,GAAG,CAAC;EACrD,SAAS,KAAK,IAAI,GAAG,GAAG,OAAO,KAAK,UAAU,MAAM,MAAM,CAAC;CAC7D;AACF"}

package/dist/components/display/SkillTree/index.d.ts

@@ -0,0 +1,4 @@
+export { SkillTree } from "./SkillTree";
+export { skillState } from "./SkillTree.utils";
+export type { SkillNode, SkillState, SkillTreeProps } from "./SkillTree.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/display/SkillTree/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/display/SkillTree/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/components/display/index.d.ts

@@ -1,4 +1,6 @@
 export * from "./BlockBadge";
 export * from "./BlockTooltip";
 export * from "./BlockTable";
+export * from "./SkillTree";
+export * from "./Avatar";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/display/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC"}

package/dist/components/feedback/Drawer/Drawer.d.ts

@@ -0,0 +1,7 @@
+import type { DrawerProps } from "./Drawer.types";
+/**
+ * Panel that slides in from an edge (inventory, settings, mobile menu). Modal
+ * like `BlockModal`: focus trap, Escape, overlay click and focus restoration.
+ */
+export declare const Drawer: import("react").ForwardRefExoticComponent<DrawerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/components/feedback/Drawer/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Drawer/Drawer.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;;GAGG;AACH,eAAO,MAAM,MAAM,wGAsEjB,CAAC"}