@malilion/block-ui-react 0.2.0 → 0.3.0

package/dist/components/cards/ServerBrowser/ServerBrowser.d.ts

@@ -0,0 +1,7 @@
+import type { ServerBrowserProps } from "./ServerBrowser.types";
+/**
+ * Multiplayer server list: search, sort and an "online only" switch over
+ * `ServerCard`s, with optional Refresh and Add server actions.
+ */
+export declare const ServerBrowser: import("react").ForwardRefExoticComponent<ServerBrowserProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ServerBrowser.d.ts.map

package/dist/components/cards/ServerBrowser/ServerBrowser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerBrowser.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/ServerBrowser/ServerBrowser.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,kBAAkB,EAAc,MAAM,uBAAuB,CAAC;AAS5E;;;GAGG;AACH,eAAO,MAAM,aAAa,+GAuExB,CAAC"}

package/dist/components/cards/ServerBrowser/ServerBrowser.js

@@ -0,0 +1,106 @@
+import { cx } from "../../../utils/cx.js";
+import { BlockButton } from "../../actions/BlockButton/BlockButton.js";
+import { BlockInput } from "../../forms/BlockInput/BlockInput.js";
+import { BlockSelect } from "../../forms/BlockSelect/BlockSelect.js";
+import { BlockToggle } from "../../forms/BlockToggle/BlockToggle.js";
+import { ServerCard } from "../ServerCard/ServerCard.js";
+import browser_module_default from "../browser.module.js";
+import { browseServers } from "./ServerBrowser.utils.js";
+import { forwardRef, useState } from "react";
+import { PlusIcon, SearchIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/cards/ServerBrowser/ServerBrowser.tsx
+var SORT_OPTIONS = [
+	{
+		value: "players",
+		label: "Most players"
+	},
+	{
+		value: "ping",
+		label: "Lowest ping"
+	},
+	{
+		value: "name",
+		label: "Name"
+	}
+];
+/**
+* Multiplayer server list: search, sort and an "online only" switch over
+* `ServerCard`s, with optional Refresh and Add server actions.
+*/
+var ServerBrowser = forwardRef(function ServerBrowser({ servers, onJoin, onRefresh, onAddServer, defaultSort = "players", emptyText = "No servers found", label = "Server browser", className, ...rest }, ref) {
+	const [query, setQuery] = useState("");
+	const [onlineOnly, setOnlineOnly] = useState(false);
+	const [sort, setSort] = useState(defaultSort);
+	const visible = browseServers(servers, {
+		query,
+		onlineOnly,
+		sort
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "region",
+		"aria-label": label,
+		className: cx(browser_module_default.browser, className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: browser_module_default.toolbar,
+				children: [
+					/* @__PURE__ */ jsx(BlockInput, {
+						type: "search",
+						label: "Search servers",
+						value: query,
+						onChange: (event) => setQuery(event.target.value),
+						startIcon: /* @__PURE__ */ jsx(SearchIcon, { size: 16 }),
+						wrapperClassName: browser_module_default.search
+					}),
+					/* @__PURE__ */ jsx(BlockSelect, {
+						label: "Sort by",
+						value: sort,
+						onChange: (event) => setSort(event.target.value),
+						options: SORT_OPTIONS,
+						wrapperClassName: browser_module_default.filter
+					}),
+					/* @__PURE__ */ jsx(BlockToggle, {
+						label: "Online only",
+						checked: onlineOnly,
+						onCheckedChange: setOnlineOnly
+					}),
+					onRefresh || onAddServer ? /* @__PURE__ */ jsxs("div", {
+						className: browser_module_default.actions,
+						children: [onRefresh ? /* @__PURE__ */ jsx(BlockButton, {
+							onClick: onRefresh,
+							children: "Refresh"
+						}) : null, onAddServer ? /* @__PURE__ */ jsx(BlockButton, {
+							variant: "grass",
+							startIcon: /* @__PURE__ */ jsx(PlusIcon, { size: 16 }),
+							onClick: onAddServer,
+							children: "Add server"
+						}) : null]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: browser_module_default.count,
+				role: "status",
+				children: visible.length === 1 ? "1 server" : `${visible.length} servers`
+			}),
+			visible.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				className: browser_module_default.list,
+				"aria-label": "Servers",
+				children: visible.map(({ id, ...server }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(ServerCard, {
+					...server,
+					onJoin: onJoin ? () => onJoin(id) : void 0
+				}) }, id))
+			}) : /* @__PURE__ */ jsx("p", {
+				className: browser_module_default.empty,
+				children: emptyText
+			})
+		]
+	});
+});
+//#endregion
+export { ServerBrowser };
+
+//# sourceMappingURL=ServerBrowser.js.map

package/dist/components/cards/ServerBrowser/ServerBrowser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerBrowser.js","names":["styles"],"sources":["../../../../src/components/cards/ServerBrowser/ServerBrowser.tsx"],"sourcesContent":["import { PlusIcon, SearchIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef, useState } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport { BlockButton } from \"../../actions/BlockButton/BlockButton\";\nimport { BlockInput } from \"../../forms/BlockInput/BlockInput\";\nimport { BlockSelect } from \"../../forms/BlockSelect/BlockSelect\";\nimport { BlockToggle } from \"../../forms/BlockToggle/BlockToggle\";\nimport styles from \"../browser.module.css\";\nimport { ServerCard } from \"../ServerCard/ServerCard\";\nimport type { ServerBrowserProps, ServerSort } from \"./ServerBrowser.types\";\nimport { browseServers } from \"./ServerBrowser.utils\";\n\nconst SORT_OPTIONS = [\n  { value: \"players\", label: \"Most players\" },\n  { value: \"ping\", label: \"Lowest ping\" },\n  { value: \"name\", label: \"Name\" },\n];\n\n/**\n * Multiplayer server list: search, sort and an \"online only\" switch over\n * `ServerCard`s, with optional Refresh and Add server actions.\n */\nexport const ServerBrowser = forwardRef<HTMLDivElement, ServerBrowserProps>(function ServerBrowser(\n  {\n    servers,\n    onJoin,\n    onRefresh,\n    onAddServer,\n    defaultSort = \"players\",\n    emptyText = \"No servers found\",\n    label = \"Server browser\",\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [query, setQuery] = useState(\"\");\n  const [onlineOnly, setOnlineOnly] = useState(false);\n  const [sort, setSort] = useState<ServerSort>(defaultSort);\n  const visible = browseServers(servers, { query, onlineOnly, sort });\n\n  return (\n    <div\n      ref={ref}\n      role=\"region\"\n      aria-label={label}\n      className={cx(styles.browser, className)}\n      {...rest}\n    >\n      <div className={styles.toolbar}>\n        <BlockInput\n          type=\"search\"\n          label=\"Search servers\"\n          value={query}\n          onChange={(event) => setQuery(event.target.value)}\n          startIcon={<SearchIcon size={16} />}\n          wrapperClassName={styles.search}\n        />\n        <BlockSelect\n          label=\"Sort by\"\n          value={sort}\n          onChange={(event) => setSort(event.target.value as ServerSort)}\n          options={SORT_OPTIONS}\n          wrapperClassName={styles.filter}\n        />\n        <BlockToggle label=\"Online only\" checked={onlineOnly} onCheckedChange={setOnlineOnly} />\n        {onRefresh || onAddServer ? (\n          <div className={styles.actions}>\n            {onRefresh ? <BlockButton onClick={onRefresh}>Refresh</BlockButton> : null}\n            {onAddServer ? (\n              <BlockButton variant=\"grass\" startIcon={<PlusIcon size={16} />} onClick={onAddServer}>\n                Add server\n              </BlockButton>\n            ) : null}\n          </div>\n        ) : null}\n      </div>\n      <p className={styles.count} role=\"status\">\n        {visible.length === 1 ? \"1 server\" : `${visible.length} servers`}\n      </p>\n      {visible.length > 0 ? (\n        <ul className={styles.list} aria-label=\"Servers\">\n          {visible.map(({ id, ...server }) => (\n            <li key={id}>\n              <ServerCard {...server} onJoin={onJoin ? () => onJoin(id) : undefined} />\n            </li>\n          ))}\n        </ul>\n      ) : (\n        <p className={styles.empty}>{emptyText}</p>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,eAAe;CACnB;EAAE,OAAO;EAAW,OAAO;CAAe;CAC1C;EAAE,OAAO;EAAQ,OAAO;CAAc;CACtC;EAAE,OAAO;EAAQ,OAAO;CAAO;AACjC;;;;;AAMA,IAAa,gBAAgB,WAA+C,SAAS,cACnF,EACE,SACA,QACA,WACA,aACA,cAAc,WACd,YAAY,oBACZ,QAAQ,kBACR,WACA,GAAG,QAEL,KACA;CACA,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CACrC,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,CAAC,MAAM,WAAW,SAAqB,WAAW;CACxD,MAAM,UAAU,cAAc,SAAS;EAAE;EAAO;EAAY;CAAK,CAAC;CAElE,OACE,qBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,WAAW,GAAGA,uBAAO,SAAS,SAAS;EACvC,GAAI;EALN,UAAA;GAOE,qBAAC,OAAD;IAAK,WAAWA,uBAAO;IAAvB,UAAA;KACE,oBAAC,YAAD;MACE,MAAK;MACL,OAAM;MACN,OAAO;MACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;MAChD,WAAW,oBAAC,YAAD,EAAY,MAAM,GAAK,CAAA;MAClC,kBAAkBA,uBAAO;KAC1B,CAAA;KACD,oBAAC,aAAD;MACE,OAAM;MACN,OAAO;MACP,WAAW,UAAU,QAAQ,MAAM,OAAO,KAAmB;MAC7D,SAAS;MACT,kBAAkBA,uBAAO;KAC1B,CAAA;KACD,oBAAC,aAAD;MAAa,OAAM;MAAc,SAAS;MAAY,iBAAiB;KAAgB,CAAA;KACtF,aAAa,cACZ,qBAAC,OAAD;MAAK,WAAWA,uBAAO;MAAvB,UAAA,CACG,YAAY,oBAAC,aAAD;OAAa,SAAS;OAAW,UAAA;MAAoB,CAAA,IAAI,MACrE,cACC,oBAAC,aAAD;OAAa,SAAQ;OAAQ,WAAW,oBAAC,UAAD,EAAU,MAAM,GAAK,CAAA;OAAG,SAAS;OAAa,UAAA;MAEzE,CAAA,IACX,IACD;KACH,CAAA,IAAA;IACD;;GACL,oBAAC,KAAD;IAAG,WAAWA,uBAAO;IAAO,MAAK;IAC9B,UAAA,QAAQ,WAAW,IAAI,aAAa,GAAG,QAAQ,OAAO;GACtD,CAAA;GACF,QAAQ,SAAS,IAChB,oBAAC,MAAD;IAAI,WAAWA,uBAAO;IAAM,cAAW;IACpC,UAAA,QAAQ,KAAK,EAAE,IAAI,GAAG,aACrB,oBAAC,MAAD,EAAA,UACE,oBAAC,YAAD;KAAY,GAAI;KAAQ,QAAQ,eAAe,OAAO,EAAE,IAAI,KAAA;IAAY,CAAA,EACtE,GAFK,EAEL,CACL;GACC,CAAA,IAEJ,oBAAC,KAAD;IAAG,WAAWA,uBAAO;IAAQ,UAAA;GAAa,CAAA;EAEzC;;AAET,CAAC"}

package/dist/components/cards/ServerBrowser/ServerBrowser.types.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { ServerCardProps } from "../ServerCard/ServerCard.types";
+export interface ServerEntry extends Omit<ServerCardProps, "onJoin" | "id"> {
+    id: string;
+}
+export type ServerSort = "name" | "players" | "ping";
+export interface ServerBrowserProps extends HTMLAttributes<HTMLDivElement> {
+    servers: ServerEntry[];
+    /** Called with the server id when its Join button is pressed. */
+    onJoin?: (id: string) => void;
+    /** Renders a Refresh button. */
+    onRefresh?: () => void;
+    /** Renders an "Add server" button. */
+    onAddServer?: () => void;
+    /** Initial sort. @default "players" */
+    defaultSort?: ServerSort;
+    /** Shown when no server matches. @default "No servers found" */
+    emptyText?: ReactNode;
+    /** Accessible name. @default "Server browser" */
+    label?: string;
+}
+//# sourceMappingURL=ServerBrowser.types.d.ts.map

package/dist/components/cards/ServerBrowser/ServerBrowser.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerBrowser.types.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/ServerBrowser/ServerBrowser.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEtE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,IAAI,CAAC;IACzE,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAErD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACxE,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,iEAAiE;IACjE,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,uCAAuC;IACvC,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,gEAAgE;IAChE,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/cards/ServerBrowser/ServerBrowser.utils.d.ts

@@ -0,0 +1,8 @@
+import type { ServerEntry, ServerSort } from "./ServerBrowser.types";
+/** Filters by name / MOTD and the online switch, then sorts (offline servers last). */
+export declare function browseServers(servers: ServerEntry[], { query, onlineOnly, sort }: {
+    query: string;
+    onlineOnly: boolean;
+    sort: ServerSort;
+}): ServerEntry[];
+//# sourceMappingURL=ServerBrowser.utils.d.ts.map

package/dist/components/cards/ServerBrowser/ServerBrowser.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerBrowser.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/ServerBrowser/ServerBrowser.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAErE,uFAAuF;AACvF,wBAAgB,aAAa,CAC3B,OAAO,EAAE,WAAW,EAAE,EACtB,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,UAAU,CAAA;CAAE,GACpF,WAAW,EAAE,CAgBf"}

package/dist/components/cards/ServerBrowser/ServerBrowser.utils.js

@@ -0,0 +1,16 @@
+//#region src/components/cards/ServerBrowser/ServerBrowser.utils.ts
+/** Filters by name / MOTD and the online switch, then sorts (offline servers last). */
+function browseServers(servers, { query, onlineOnly, sort }) {
+	const needle = query.trim().toLowerCase();
+	return [...servers.filter((server) => (!onlineOnly || server.online !== false) && (needle === "" || server.name.toLowerCase().includes(needle) || (server.motd ?? "").toLowerCase().includes(needle)))].sort((a, b) => {
+		const offline = Number(a.online === false) - Number(b.online === false);
+		if (offline !== 0) return offline;
+		if (sort === "players") return (b.onlinePlayers ?? 0) - (a.onlinePlayers ?? 0);
+		if (sort === "ping") return (a.ping ?? Infinity) - (b.ping ?? Infinity);
+		return a.name.localeCompare(b.name);
+	});
+}
+//#endregion
+export { browseServers };
+
+//# sourceMappingURL=ServerBrowser.utils.js.map

package/dist/components/cards/ServerBrowser/ServerBrowser.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerBrowser.utils.js","names":[],"sources":["../../../../src/components/cards/ServerBrowser/ServerBrowser.utils.ts"],"sourcesContent":["import type { ServerEntry, ServerSort } from \"./ServerBrowser.types\";\n\n/** Filters by name / MOTD and the online switch, then sorts (offline servers last). */\nexport function browseServers(\n  servers: ServerEntry[],\n  { query, onlineOnly, sort }: { query: string; onlineOnly: boolean; sort: ServerSort },\n): ServerEntry[] {\n  const needle = query.trim().toLowerCase();\n  const visible = servers.filter(\n    (server) =>\n      (!onlineOnly || server.online !== false) &&\n      (needle === \"\" ||\n        server.name.toLowerCase().includes(needle) ||\n        (server.motd ?? \"\").toLowerCase().includes(needle)),\n  );\n  return [...visible].sort((a, b) => {\n    const offline = Number(a.online === false) - Number(b.online === false);\n    if (offline !== 0) return offline;\n    if (sort === \"players\") return (b.onlinePlayers ?? 0) - (a.onlinePlayers ?? 0);\n    if (sort === \"ping\") return (a.ping ?? Infinity) - (b.ping ?? Infinity);\n    return a.name.localeCompare(b.name);\n  });\n}\n"],"mappings":";;AAGA,SAAgB,cACd,SACA,EAAE,OAAO,YAAY,QACN;CACf,MAAM,SAAS,MAAM,KAAK,CAAC,CAAC,YAAY;CAQxC,OAAO,CAAC,GAPQ,QAAQ,QACrB,YACE,CAAC,cAAc,OAAO,WAAW,WACjC,WAAW,MACV,OAAO,KAAK,YAAY,CAAC,CAAC,SAAS,MAAM,MACxC,OAAO,QAAQ,GAAA,CAAI,YAAY,CAAC,CAAC,SAAS,MAAM,EAE5C,CAAO,CAAC,CAAC,MAAM,GAAG,MAAM;EACjC,MAAM,UAAU,OAAO,EAAE,WAAW,KAAK,IAAI,OAAO,EAAE,WAAW,KAAK;EACtE,IAAI,YAAY,GAAG,OAAO;EAC1B,IAAI,SAAS,WAAW,QAAQ,EAAE,iBAAiB,MAAM,EAAE,iBAAiB;EAC5E,IAAI,SAAS,QAAQ,QAAQ,EAAE,QAAQ,aAAa,EAAE,QAAQ;EAC9D,OAAO,EAAE,KAAK,cAAc,EAAE,IAAI;CACpC,CAAC;AACH"}

package/dist/components/cards/ServerBrowser/index.d.ts

@@ -0,0 +1,4 @@
+export { ServerBrowser } from "./ServerBrowser";
+export { browseServers } from "./ServerBrowser.utils";
+export type { ServerBrowserProps, ServerEntry, ServerSort } from "./ServerBrowser.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/cards/ServerBrowser/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/ServerBrowser/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/components/cards/WorldBrowser/WorldBrowser.d.ts

@@ -0,0 +1,4 @@
+import type { WorldBrowserProps } from "./WorldBrowser.types";
+/** Singleplayer world list: search, game-mode filter and sort over `WorldCard`s. */
+export declare const WorldBrowser: import("react").ForwardRefExoticComponent<WorldBrowserProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=WorldBrowser.d.ts.map

package/dist/components/cards/WorldBrowser/WorldBrowser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorldBrowser.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/WorldBrowser/WorldBrowser.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAa,MAAM,sBAAsB,CAAC;AAQzE,oFAAoF;AACpF,eAAO,MAAM,YAAY,8GA+EvB,CAAC"}

package/dist/components/cards/WorldBrowser/WorldBrowser.js

@@ -0,0 +1,101 @@
+import { cx } from "../../../utils/cx.js";
+import { BlockButton } from "../../actions/BlockButton/BlockButton.js";
+import { BlockInput } from "../../forms/BlockInput/BlockInput.js";
+import { BlockSelect } from "../../forms/BlockSelect/BlockSelect.js";
+import { WorldCard } from "../WorldCard/WorldCard.js";
+import browser_module_default from "../browser.module.js";
+import { browseWorlds, gameModes } from "./WorldBrowser.utils.js";
+import { forwardRef, useState } from "react";
+import { PlusIcon, SearchIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/cards/WorldBrowser/WorldBrowser.tsx
+var SORT_OPTIONS = [{
+	value: "recent",
+	label: "Last played"
+}, {
+	value: "name",
+	label: "Name"
+}];
+/** Singleplayer world list: search, game-mode filter and sort over `WorldCard`s. */
+var WorldBrowser = forwardRef(function WorldBrowser({ worlds, onPlay, onCreate, defaultSort = "recent", emptyText = "No worlds yet", label = "World browser", className, ...rest }, ref) {
+	const [query, setQuery] = useState("");
+	const [mode, setMode] = useState("all");
+	const [sort, setSort] = useState(defaultSort);
+	const modes = gameModes(worlds);
+	const visible = browseWorlds(worlds, {
+		query,
+		mode,
+		sort
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "region",
+		"aria-label": label,
+		className: cx(browser_module_default.browser, className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: browser_module_default.toolbar,
+				children: [
+					/* @__PURE__ */ jsx(BlockInput, {
+						type: "search",
+						label: "Search worlds",
+						value: query,
+						onChange: (event) => setQuery(event.target.value),
+						startIcon: /* @__PURE__ */ jsx(SearchIcon, { size: 16 }),
+						wrapperClassName: browser_module_default.search
+					}),
+					modes.length > 1 ? /* @__PURE__ */ jsx(BlockSelect, {
+						label: "Game mode",
+						value: mode,
+						onChange: (event) => setMode(event.target.value),
+						options: [{
+							value: "all",
+							label: "All modes"
+						}, ...modes.map((value) => ({
+							value,
+							label: value
+						}))],
+						wrapperClassName: browser_module_default.filter
+					}) : null,
+					/* @__PURE__ */ jsx(BlockSelect, {
+						label: "Sort by",
+						value: sort,
+						onChange: (event) => setSort(event.target.value),
+						options: SORT_OPTIONS,
+						wrapperClassName: browser_module_default.filter
+					}),
+					onCreate ? /* @__PURE__ */ jsx("div", {
+						className: browser_module_default.actions,
+						children: /* @__PURE__ */ jsx(BlockButton, {
+							variant: "grass",
+							startIcon: /* @__PURE__ */ jsx(PlusIcon, { size: 16 }),
+							onClick: onCreate,
+							children: "Create world"
+						})
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: browser_module_default.count,
+				role: "status",
+				children: visible.length === 1 ? "1 world" : `${visible.length} worlds`
+			}),
+			visible.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				className: browser_module_default.list,
+				"aria-label": "Worlds",
+				children: visible.map(({ id, lastPlayedAt: _lastPlayedAt, ...world }) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(WorldCard, {
+					...world,
+					onPlay: onPlay ? () => onPlay(id) : void 0
+				}) }, id))
+			}) : /* @__PURE__ */ jsx("p", {
+				className: browser_module_default.empty,
+				children: emptyText
+			})
+		]
+	});
+});
+//#endregion
+export { WorldBrowser };
+
+//# sourceMappingURL=WorldBrowser.js.map

package/dist/components/cards/WorldBrowser/WorldBrowser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorldBrowser.js","names":["styles"],"sources":["../../../../src/components/cards/WorldBrowser/WorldBrowser.tsx"],"sourcesContent":["import { PlusIcon, SearchIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef, useState } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport { BlockButton } from \"../../actions/BlockButton/BlockButton\";\nimport { BlockInput } from \"../../forms/BlockInput/BlockInput\";\nimport { BlockSelect } from \"../../forms/BlockSelect/BlockSelect\";\nimport styles from \"../browser.module.css\";\nimport { WorldCard } from \"../WorldCard/WorldCard\";\nimport type { WorldBrowserProps, WorldSort } from \"./WorldBrowser.types\";\nimport { ALL_MODES, browseWorlds, gameModes } from \"./WorldBrowser.utils\";\n\nconst SORT_OPTIONS = [\n  { value: \"recent\", label: \"Last played\" },\n  { value: \"name\", label: \"Name\" },\n];\n\n/** Singleplayer world list: search, game-mode filter and sort over `WorldCard`s. */\nexport const WorldBrowser = forwardRef<HTMLDivElement, WorldBrowserProps>(function WorldBrowser(\n  {\n    worlds,\n    onPlay,\n    onCreate,\n    defaultSort = \"recent\",\n    emptyText = \"No worlds yet\",\n    label = \"World browser\",\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [query, setQuery] = useState(\"\");\n  const [mode, setMode] = useState(ALL_MODES);\n  const [sort, setSort] = useState<WorldSort>(defaultSort);\n  const modes = gameModes(worlds);\n  const visible = browseWorlds(worlds, { query, mode, sort });\n\n  return (\n    <div\n      ref={ref}\n      role=\"region\"\n      aria-label={label}\n      className={cx(styles.browser, className)}\n      {...rest}\n    >\n      <div className={styles.toolbar}>\n        <BlockInput\n          type=\"search\"\n          label=\"Search worlds\"\n          value={query}\n          onChange={(event) => setQuery(event.target.value)}\n          startIcon={<SearchIcon size={16} />}\n          wrapperClassName={styles.search}\n        />\n        {modes.length > 1 ? (\n          <BlockSelect\n            label=\"Game mode\"\n            value={mode}\n            onChange={(event) => setMode(event.target.value)}\n            options={[\n              { value: ALL_MODES, label: \"All modes\" },\n              ...modes.map((value) => ({ value, label: value })),\n            ]}\n            wrapperClassName={styles.filter}\n          />\n        ) : null}\n        <BlockSelect\n          label=\"Sort by\"\n          value={sort}\n          onChange={(event) => setSort(event.target.value as WorldSort)}\n          options={SORT_OPTIONS}\n          wrapperClassName={styles.filter}\n        />\n        {onCreate ? (\n          <div className={styles.actions}>\n            <BlockButton variant=\"grass\" startIcon={<PlusIcon size={16} />} onClick={onCreate}>\n              Create world\n            </BlockButton>\n          </div>\n        ) : null}\n      </div>\n      <p className={styles.count} role=\"status\">\n        {visible.length === 1 ? \"1 world\" : `${visible.length} worlds`}\n      </p>\n      {visible.length > 0 ? (\n        <ul className={styles.list} aria-label=\"Worlds\">\n          {visible.map(({ id, lastPlayedAt: _lastPlayedAt, ...world }) => (\n            <li key={id}>\n              <WorldCard {...world} onPlay={onPlay ? () => onPlay(id) : undefined} />\n            </li>\n          ))}\n        </ul>\n      ) : (\n        <p className={styles.empty}>{emptyText}</p>\n      )}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,eAAe,CACnB;CAAE,OAAO;CAAU,OAAO;AAAc,GACxC;CAAE,OAAO;CAAQ,OAAO;AAAO,CACjC;;AAGA,IAAa,eAAe,WAA8C,SAAS,aACjF,EACE,QACA,QACA,UACA,cAAc,UACd,YAAY,iBACZ,QAAQ,iBACR,WACA,GAAG,QAEL,KACA;CACA,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;CACrC,MAAM,CAAC,MAAM,WAAW,SAAA,KAAkB;CAC1C,MAAM,CAAC,MAAM,WAAW,SAAoB,WAAW;CACvD,MAAM,QAAQ,UAAU,MAAM;CAC9B,MAAM,UAAU,aAAa,QAAQ;EAAE;EAAO;EAAM;CAAK,CAAC;CAE1D,OACE,qBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,WAAW,GAAGA,uBAAO,SAAS,SAAS;EACvC,GAAI;EALN,UAAA;GAOE,qBAAC,OAAD;IAAK,WAAWA,uBAAO;IAAvB,UAAA;KACE,oBAAC,YAAD;MACE,MAAK;MACL,OAAM;MACN,OAAO;MACP,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;MAChD,WAAW,oBAAC,YAAD,EAAY,MAAM,GAAK,CAAA;MAClC,kBAAkBA,uBAAO;KAC1B,CAAA;KACA,MAAM,SAAS,IACd,oBAAC,aAAD;MACE,OAAM;MACN,OAAO;MACP,WAAW,UAAU,QAAQ,MAAM,OAAO,KAAK;MAC/C,SAAS,CACP;OAAE,OAAA;OAAkB,OAAO;MAAY,GACvC,GAAG,MAAM,KAAK,WAAW;OAAE;OAAO,OAAO;MAAM,EAAE,CACnD;MACA,kBAAkBA,uBAAO;KAC1B,CAAA,IACC;KACJ,oBAAC,aAAD;MACE,OAAM;MACN,OAAO;MACP,WAAW,UAAU,QAAQ,MAAM,OAAO,KAAkB;MAC5D,SAAS;MACT,kBAAkBA,uBAAO;KAC1B,CAAA;KACA,WACC,oBAAC,OAAD;MAAK,WAAWA,uBAAO;MACrB,UAAA,oBAAC,aAAD;OAAa,SAAQ;OAAQ,WAAW,oBAAC,UAAD,EAAU,MAAM,GAAK,CAAA;OAAG,SAAS;OAAU,UAAA;MAEtE,CAAA;KACV,CAAA,IACH;IACD;;GACL,oBAAC,KAAD;IAAG,WAAWA,uBAAO;IAAO,MAAK;IAC9B,UAAA,QAAQ,WAAW,IAAI,YAAY,GAAG,QAAQ,OAAO;GACrD,CAAA;GACF,QAAQ,SAAS,IAChB,oBAAC,MAAD;IAAI,WAAWA,uBAAO;IAAM,cAAW;IACpC,UAAA,QAAQ,KAAK,EAAE,IAAI,cAAc,eAAe,GAAG,YAClD,oBAAC,MAAD,EAAA,UACE,oBAAC,WAAD;KAAW,GAAI;KAAO,QAAQ,eAAe,OAAO,EAAE,IAAI,KAAA;IAAY,CAAA,EACpE,GAFK,EAEL,CACL;GACC,CAAA,IAEJ,oBAAC,KAAD;IAAG,WAAWA,uBAAO;IAAQ,UAAA;GAAa,CAAA;EAEzC;;AAET,CAAC"}

package/dist/components/cards/WorldBrowser/WorldBrowser.types.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import type { WorldCardProps } from "../WorldCard/WorldCard.types";
+export interface WorldEntry extends Omit<WorldCardProps, "onPlay" | "id"> {
+    id: string;
+    /** Timestamp (ms) used for "Last played" sorting; `lastPlayed` is the display text. */
+    lastPlayedAt?: number;
+}
+export type WorldSort = "recent" | "name";
+export interface WorldBrowserProps extends Omit<HTMLAttributes<HTMLDivElement>, "onPlay"> {
+    worlds: WorldEntry[];
+    /** Called with the world id when its Play button is pressed. */
+    onPlay?: (id: string) => void;
+    /** Renders a "Create world" button. */
+    onCreate?: () => void;
+    /** Initial sort. @default "recent" */
+    defaultSort?: WorldSort;
+    /** Shown when no world matches. @default "No worlds yet" */
+    emptyText?: ReactNode;
+    /** Accessible name. @default "World browser" */
+    label?: string;
+}
+//# sourceMappingURL=WorldBrowser.types.d.ts.map

package/dist/components/cards/WorldBrowser/WorldBrowser.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorldBrowser.types.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/WorldBrowser/WorldBrowser.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAEnE,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,IAAI,CAAC;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,uFAAuF;IACvF,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE1C,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC;IACvF,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,gEAAgE;IAChE,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,sCAAsC;IACtC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/cards/WorldBrowser/WorldBrowser.utils.d.ts

@@ -0,0 +1,10 @@
+import type { WorldEntry, WorldSort } from "./WorldBrowser.types";
+export declare const ALL_MODES = "all";
+/** Unique game modes in first-seen order. */
+export declare function gameModes(worlds: WorldEntry[]): string[];
+export declare function browseWorlds(worlds: WorldEntry[], { query, mode, sort }: {
+    query: string;
+    mode: string;
+    sort: WorldSort;
+}): WorldEntry[];
+//# sourceMappingURL=WorldBrowser.utils.d.ts.map

package/dist/components/cards/WorldBrowser/WorldBrowser.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorldBrowser.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/WorldBrowser/WorldBrowser.utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAElE,eAAO,MAAM,SAAS,QAAQ,CAAC;AAE/B,6CAA6C;AAC7C,wBAAgB,SAAS,CAAC,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,EAAE,CAExD;AAED,wBAAgB,YAAY,CAC1B,MAAM,EAAE,UAAU,EAAE,EACpB,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,SAAS,CAAA;CAAE,GACtE,UAAU,EAAE,CAYd"}

package/dist/components/cards/WorldBrowser/WorldBrowser.utils.js

@@ -0,0 +1,12 @@
+/** Unique game modes in first-seen order. */
+function gameModes(worlds) {
+	return [...new Set(worlds.flatMap((world) => world.gameMode ? [world.gameMode] : []))];
+}
+function browseWorlds(worlds, { query, mode, sort }) {
+	const needle = query.trim().toLowerCase();
+	return [...worlds.filter((world) => (mode === "all" || world.gameMode === mode) && (needle === "" || world.name.toLowerCase().includes(needle)))].sort((a, b) => sort === "recent" ? (b.lastPlayedAt ?? -Infinity) - (a.lastPlayedAt ?? -Infinity) : a.name.localeCompare(b.name));
+}
+//#endregion
+export { browseWorlds, gameModes };
+
+//# sourceMappingURL=WorldBrowser.utils.js.map

package/dist/components/cards/WorldBrowser/WorldBrowser.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorldBrowser.utils.js","names":[],"sources":["../../../../src/components/cards/WorldBrowser/WorldBrowser.utils.ts"],"sourcesContent":["import type { WorldEntry, WorldSort } from \"./WorldBrowser.types\";\n\nexport const ALL_MODES = \"all\";\n\n/** Unique game modes in first-seen order. */\nexport function gameModes(worlds: WorldEntry[]): string[] {\n  return [...new Set(worlds.flatMap((world) => (world.gameMode ? [world.gameMode] : [])))];\n}\n\nexport function browseWorlds(\n  worlds: WorldEntry[],\n  { query, mode, sort }: { query: string; mode: string; sort: WorldSort },\n): WorldEntry[] {\n  const needle = query.trim().toLowerCase();\n  const visible = worlds.filter(\n    (world) =>\n      (mode === ALL_MODES || world.gameMode === mode) &&\n      (needle === \"\" || world.name.toLowerCase().includes(needle)),\n  );\n  return [...visible].sort((a, b) =>\n    sort === \"recent\"\n      ? (b.lastPlayedAt ?? -Infinity) - (a.lastPlayedAt ?? -Infinity)\n      : a.name.localeCompare(b.name),\n  );\n}\n"],"mappings":";AAKA,SAAgB,UAAU,QAAgC;CACxD,OAAO,CAAC,GAAG,IAAI,IAAI,OAAO,SAAS,UAAW,MAAM,WAAW,CAAC,MAAM,QAAQ,IAAI,CAAC,CAAE,CAAC,CAAC;AACzF;AAEA,SAAgB,aACd,QACA,EAAE,OAAO,MAAM,QACD;CACd,MAAM,SAAS,MAAM,KAAK,CAAC,CAAC,YAAY;CAMxC,OAAO,CAAC,GALQ,OAAO,QACpB,WACE,SAAA,SAAsB,MAAM,aAAa,UACzC,WAAW,MAAM,MAAM,KAAK,YAAY,CAAC,CAAC,SAAS,MAAM,EAEnD,CAAO,CAAC,CAAC,MAAM,GAAG,MAC3B,SAAS,YACJ,EAAE,gBAAgB,cAAc,EAAE,gBAAgB,aACnD,EAAE,KAAK,cAAc,EAAE,IAAI,CACjC;AACF"}

package/dist/components/cards/WorldBrowser/index.d.ts

@@ -0,0 +1,4 @@
+export { WorldBrowser } from "./WorldBrowser";
+export { browseWorlds } from "./WorldBrowser.utils";
+export type { WorldBrowserProps, WorldEntry, WorldSort } from "./WorldBrowser.types";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/cards/WorldBrowser/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/cards/WorldBrowser/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,YAAY,EAAE,iBAAiB,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/cards/browser.module.js

@@ -0,0 +1,23 @@
+//#region src/components/cards/browser.module.css
+var browser = "block-browser-I1wXs";
+var toolbar = "block-toolbar-ScAO4";
+var search = "block-search-Uc1Av";
+var filter = "block-filter-KJVyB";
+var actions = "block-actions-dvQVT";
+var count = "block-count-iZmBJ";
+var list = "block-list-TU-pd";
+var empty = "block-empty-GFa5k";
+var browser_module_default = {
+	browser,
+	toolbar,
+	search,
+	filter,
+	actions,
+	count,
+	list,
+	empty
+};
+//#endregion
+export { actions, browser, count, browser_module_default as default, empty, filter, list, search, toolbar };
+
+//# sourceMappingURL=browser.module.js.map

package/dist/components/cards/browser.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.module.js","names":[],"sources":["../../../src/components/cards/browser.module.css"],"sourcesContent":["/* Shared layout of ServerBrowser and WorldBrowser: toolbar, count and card list. */\n.browser {\n  display: flex;\n  flex-direction: column;\n  gap: var(--block-space-3);\n  width: 100%;\n}\n\n.toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  gap: var(--block-space-3);\n}\n\n.search {\n  flex: 1 1 220px;\n  min-width: 0;\n}\n\n.filter {\n  flex: 0 1 180px;\n}\n\n.actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--block-space-2);\n  margin-left: auto;\n}\n\n.count {\n  margin: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-xs);\n  text-transform: uppercase;\n  color: var(--block-text-muted);\n}\n\n.list {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));\n  gap: var(--block-space-3);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.list > li {\n  display: flex;\n  min-width: 0;\n}\n\n.list > li > * {\n  flex: 1;\n}\n\n.empty {\n  margin: 0;\n  padding: var(--block-space-6);\n  text-align: center;\n  color: var(--block-text-muted);\n  background-color: var(--block-slot);\n  border: var(--block-border-width-thin) dashed var(--block-border);\n}\n"],"mappings":""}

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

@@ -4,4 +4,6 @@ export * from "./AchievementCard";
 export * from "./PlayerCard";
 export * from "./ServerCard";
 export * from "./WorldCard";
+export * from "./ServerBrowser";
+export * from "./WorldBrowser";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/cards/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/cards/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { AnvilProps } from "./Anvil.types";
+/**
+ * Anvil: rename field, two input slots combining into a result, and the
+ * experience cost — red when the player cannot afford it, "Too Expensive!" at the cap.
+ */
+export declare const Anvil: import("react").ForwardRefExoticComponent<AnvilProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Anvil.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Anvil.d.ts","sourceRoot":"","sources":["../../../../src/components/crafting/Anvil/Anvil.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAKhD;;;GAGG;AACH,eAAO,MAAM,KAAK,uGAiFhB,CAAC"}

package/dist/components/crafting/Anvil/Anvil.js

@@ -0,0 +1,94 @@
+import { cx } from "../../../utils/cx.js";
+import { BlockInput } from "../../forms/BlockInput/BlockInput.js";
+import { useControllableState } from "../../../hooks/useControllableState.js";
+import { InventorySlot } from "../../inventory/InventorySlot/InventorySlot.js";
+import { CraftingResult } from "../CraftingResult/CraftingResult.js";
+import Anvil_module_default from "./Anvil.module.js";
+import { anvilCostState } from "./Anvil.utils.js";
+import { forwardRef, useId } from "react";
+import { AnvilIcon, ArrowIcon, PlusIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/crafting/Anvil/Anvil.tsx
+var filled = (node) => node !== void 0 && node !== null && node !== false;
+/**
+* Anvil: rename field, two input slots combining into a result, and the
+* experience cost — red when the player cannot afford it, "Too Expensive!" at the cap.
+*/
+var Anvil = forwardRef(function Anvil({ left, right, result, name, defaultName = "", onNameChange, cost, playerLevel, maxCost = 40, onTakeResult, label = "Anvil", className, ...rest }, ref) {
+	const costId = useId();
+	const [itemName, setItemName] = useControllableState({
+		value: name,
+		defaultValue: defaultName,
+		onChange: onNameChange
+	});
+	const costState = anvilCostState(cost, playerLevel, maxCost);
+	const blocked = costState === "tooExpensive" || costState === "unaffordable";
+	const hasLeft = filled(left);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": label,
+		"data-cost": costState,
+		className: cx(Anvil_module_default.anvil, className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: Anvil_module_default.header,
+				children: [/* @__PURE__ */ jsx("span", {
+					className: Anvil_module_default.icon,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx(AnvilIcon, { size: 32 })
+				}), /* @__PURE__ */ jsx(BlockInput, {
+					label: "Item name",
+					value: itemName,
+					onChange: (event) => setItemName(event.target.value),
+					disabled: !hasLeft,
+					maxLength: 50,
+					wrapperClassName: Anvil_module_default.name
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: Anvil_module_default.layout,
+				children: [
+					/* @__PURE__ */ jsx(InventorySlot, {
+						size: "lg",
+						label: hasLeft ? void 0 : "Item: empty",
+						children: left
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: Anvil_module_default.symbol,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx(PlusIcon, { size: 24 })
+					}),
+					/* @__PURE__ */ jsx(InventorySlot, {
+						size: "lg",
+						label: filled(right) ? void 0 : "Material: empty",
+						children: right
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: Anvil_module_default.symbol,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx(ArrowIcon, { size: 32 })
+					}),
+					/* @__PURE__ */ jsx(CraftingResult, {
+						label: "Result",
+						onTake: blocked ? void 0 : onTakeResult,
+						disabled: blocked,
+						"aria-describedby": costState === "none" ? void 0 : costId,
+						children: result
+					})
+				]
+			}),
+			costState !== "none" ? /* @__PURE__ */ jsx("p", {
+				id: costId,
+				className: Anvil_module_default.cost,
+				"aria-live": "polite",
+				children: costState === "tooExpensive" ? "Too Expensive!" : `Enchantment Cost: ${cost}${costState === "unaffordable" ? " (not enough levels)" : ""}`
+			}) : null
+		]
+	});
+});
+//#endregion
+export { Anvil };
+
+//# sourceMappingURL=Anvil.js.map

package/dist/components/crafting/Anvil/Anvil.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Anvil.js","names":["styles"],"sources":["../../../../src/components/crafting/Anvil/Anvil.tsx"],"sourcesContent":["import { AnvilIcon, ArrowIcon, PlusIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef, useId } from \"react\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { cx } from \"../../../utils/cx\";\nimport { BlockInput } from \"../../forms/BlockInput/BlockInput\";\nimport { InventorySlot } from \"../../inventory/InventorySlot/InventorySlot\";\nimport { CraftingResult } from \"../CraftingResult/CraftingResult\";\nimport styles from \"./Anvil.module.css\";\nimport type { AnvilProps } from \"./Anvil.types\";\nimport { anvilCostState } from \"./Anvil.utils\";\n\nconst filled = (node: unknown) => node !== undefined && node !== null && node !== false;\n\n/**\n * Anvil: rename field, two input slots combining into a result, and the\n * experience cost — red when the player cannot afford it, \"Too Expensive!\" at the cap.\n */\nexport const Anvil = forwardRef<HTMLDivElement, AnvilProps>(function Anvil(\n  {\n    left,\n    right,\n    result,\n    name,\n    defaultName = \"\",\n    onNameChange,\n    cost,\n    playerLevel,\n    maxCost = 40,\n    onTakeResult,\n    label = \"Anvil\",\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const costId = useId();\n  const [itemName, setItemName] = useControllableState({\n    value: name,\n    defaultValue: defaultName,\n    onChange: onNameChange,\n  });\n  const costState = anvilCostState(cost, playerLevel, maxCost);\n  const blocked = costState === \"tooExpensive\" || costState === \"unaffordable\";\n  const hasLeft = filled(left);\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-label={label}\n      data-cost={costState}\n      className={cx(styles.anvil, className)}\n      {...rest}\n    >\n      <div className={styles.header}>\n        <span className={styles.icon} aria-hidden=\"true\">\n          <AnvilIcon size={32} />\n        </span>\n        <BlockInput\n          label=\"Item name\"\n          value={itemName}\n          onChange={(event) => setItemName(event.target.value)}\n          disabled={!hasLeft}\n          maxLength={50}\n          wrapperClassName={styles.name}\n        />\n      </div>\n      <div className={styles.layout}>\n        <InventorySlot size=\"lg\" label={hasLeft ? undefined : \"Item: empty\"}>\n          {left}\n        </InventorySlot>\n        <span className={styles.symbol} aria-hidden=\"true\">\n          <PlusIcon size={24} />\n        </span>\n        <InventorySlot size=\"lg\" label={filled(right) ? undefined : \"Material: empty\"}>\n          {right}\n        </InventorySlot>\n        <span className={styles.symbol} aria-hidden=\"true\">\n          <ArrowIcon size={32} />\n        </span>\n        <CraftingResult\n          label=\"Result\"\n          onTake={blocked ? undefined : onTakeResult}\n          disabled={blocked}\n          aria-describedby={costState === \"none\" ? undefined : costId}\n        >\n          {result}\n        </CraftingResult>\n      </div>\n      {costState !== \"none\" ? (\n        <p id={costId} className={styles.cost} aria-live=\"polite\">\n          {costState === \"tooExpensive\"\n            ? \"Too Expensive!\"\n            : `Enchantment Cost: ${cost}${costState === \"unaffordable\" ? \" (not enough levels)\" : \"\"}`}\n        </p>\n      ) : null}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,UAAU,SAAkB,SAAS,KAAA,KAAa,SAAS,QAAQ,SAAS;;;;;AAMlF,IAAa,QAAQ,WAAuC,SAAS,MACnE,EACE,MACA,OACA,QACA,MACA,cAAc,IACd,cACA,MACA,aACA,UAAU,IACV,cACA,QAAQ,SACR,WACA,GAAG,QAEL,KACA;CACA,MAAM,SAAS,MAAM;CACrB,MAAM,CAAC,UAAU,eAAe,qBAAqB;EACnD,OAAO;EACP,cAAc;EACd,UAAU;CACZ,CAAC;CACD,MAAM,YAAY,eAAe,MAAM,aAAa,OAAO;CAC3D,MAAM,UAAU,cAAc,kBAAkB,cAAc;CAC9D,MAAM,UAAU,OAAO,IAAI;CAE3B,OACE,qBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,aAAW;EACX,WAAW,GAAGA,qBAAO,OAAO,SAAS;EACrC,GAAI;EANN,UAAA;GAQE,qBAAC,OAAD;IAAK,WAAWA,qBAAO;IAAvB,UAAA,CACE,oBAAC,QAAD;KAAM,WAAWA,qBAAO;KAAM,eAAY;KACxC,UAAA,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA;IAClB,CAAA,GACN,oBAAC,YAAD;KACE,OAAM;KACN,OAAO;KACP,WAAW,UAAU,YAAY,MAAM,OAAO,KAAK;KACnD,UAAU,CAAC;KACX,WAAW;KACX,kBAAkBA,qBAAO;IAC1B,CAAA,CACE;;GACL,qBAAC,OAAD;IAAK,WAAWA,qBAAO;IAAvB,UAAA;KACE,oBAAC,eAAD;MAAe,MAAK;MAAK,OAAO,UAAU,KAAA,IAAY;MACnD,UAAA;KACY,CAAA;KACf,oBAAC,QAAD;MAAM,WAAWA,qBAAO;MAAQ,eAAY;MAC1C,UAAA,oBAAC,UAAD,EAAU,MAAM,GAAK,CAAA;KACjB,CAAA;KACN,oBAAC,eAAD;MAAe,MAAK;MAAK,OAAO,OAAO,KAAK,IAAI,KAAA,IAAY;MACzD,UAAA;KACY,CAAA;KACf,oBAAC,QAAD;MAAM,WAAWA,qBAAO;MAAQ,eAAY;MAC1C,UAAA,oBAAC,WAAD,EAAW,MAAM,GAAK,CAAA;KAClB,CAAA;KACN,oBAAC,gBAAD;MACE,OAAM;MACN,QAAQ,UAAU,KAAA,IAAY;MAC9B,UAAU;MACV,oBAAkB,cAAc,SAAS,KAAA,IAAY;MAEpD,UAAA;KACa,CAAA;IACb;;GACJ,cAAc,SACb,oBAAC,KAAD;IAAG,IAAI;IAAQ,WAAWA,qBAAO;IAAM,aAAU;IAC9C,UAAA,cAAc,iBACX,mBACA,qBAAqB,OAAO,cAAc,iBAAiB,yBAAyB;GACvF,CAAA,IACD;EACD;;AAET,CAAC"}

package/dist/components/crafting/Anvil/Anvil.module.js

@@ -0,0 +1,21 @@
+//#region src/components/crafting/Anvil/Anvil.module.css
+var anvil = "block-anvil-jWvPa";
+var header = "block-header-Yvk6R";
+var icon = "block-icon-XFJky";
+var name = "block-name-hNDBk";
+var layout = "block-layout-0WcH9";
+var symbol = "block-symbol-5f6uA";
+var cost = "block-cost-f9Afr";
+var Anvil_module_default = {
+	anvil,
+	header,
+	icon,
+	name,
+	layout,
+	symbol,
+	cost
+};
+//#endregion
+export { anvil, cost, Anvil_module_default as default, header, icon, layout, name, symbol };
+
+//# sourceMappingURL=Anvil.module.js.map

package/dist/components/crafting/Anvil/Anvil.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Anvil.module.js","names":[],"sources":["../../../../src/components/crafting/Anvil/Anvil.module.css"],"sourcesContent":[".anvil {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--block-space-3);\n  width: 100%;\n}\n\n.header {\n  display: flex;\n  align-items: flex-end;\n  gap: var(--block-space-2);\n  width: 100%;\n  max-width: 400px;\n}\n\n.icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  margin-bottom: var(--block-space-1);\n}\n\n.name {\n  flex: 1;\n  min-width: 0;\n}\n\n.layout {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: var(--block-space-3);\n}\n\n.symbol {\n  display: inline-flex;\n  color: var(--block-text-muted);\n}\n\n.cost {\n  margin: 0;\n  font-family: var(--block-font-display);\n  font-size: var(--block-font-size-sm);\n  color: var(--block-emerald-light);\n  text-shadow: var(--block-shadow-text);\n}\n\n.anvil[data-cost=\"unaffordable\"] .cost,\n.anvil[data-cost=\"tooExpensive\"] .cost {\n  color: var(--block-redstone-light);\n}\n\n@media (max-width: 767.98px) {\n  .layout {\n    gap: var(--block-space-2);\n  }\n}\n"],"mappings":""}

package/dist/components/crafting/Anvil/Anvil.types.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface AnvilProps extends HTMLAttributes<HTMLDivElement> {
+    /** Item being repaired or renamed. */
+    left?: ReactNode;
+    /** Sacrifice item, material or enchanted book. */
+    right?: ReactNode;
+    /** Output item. */
+    result?: ReactNode;
+    /** Controlled item name. */
+    name?: string;
+    /** Initial item name when uncontrolled. */
+    defaultName?: string;
+    onNameChange?: (name: string) => void;
+    /** Experience levels the operation costs. */
+    cost?: number;
+    /** Player experience level; a higher cost is shown in red and blocks taking the result. */
+    playerLevel?: number;
+    /** Costs at or above this are "Too Expensive!". @default 40 */
+    maxCost?: number;
+    /** Called when the result is taken. */
+    onTakeResult?: () => void;
+    /** Accessible name. @default "Anvil" */
+    label?: string;
+}
+//# sourceMappingURL=Anvil.types.d.ts.map