@malilion/block-ui-react 0.1.0 → 0.3.0

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Anvil.types.d.ts","sourceRoot":"","sources":["../../../../src/components/crafting/Anvil/Anvil.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,sCAAsC;IACtC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,kDAAkD;IAClD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,mBAAmB;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,4BAA4B;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

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

@@ -0,0 +1,3 @@
+export type AnvilCostState = "none" | "ok" | "unaffordable" | "tooExpensive";
+export declare function anvilCostState(cost: number | undefined, playerLevel: number | undefined, maxCost: number): AnvilCostState;
+//# sourceMappingURL=Anvil.utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Anvil.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/crafting/Anvil/Anvil.utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,IAAI,GAAG,cAAc,GAAG,cAAc,CAAC;AAE7E,wBAAgB,cAAc,CAC5B,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,WAAW,EAAE,MAAM,GAAG,SAAS,EAC/B,OAAO,EAAE,MAAM,GACd,cAAc,CAKhB"}

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

@@ -0,0 +1,11 @@
+//#region src/components/crafting/Anvil/Anvil.utils.ts
+function anvilCostState(cost, playerLevel, maxCost) {
+	if (cost === void 0 || cost <= 0) return "none";
+	if (cost >= maxCost) return "tooExpensive";
+	if (playerLevel !== void 0 && playerLevel < cost) return "unaffordable";
+	return "ok";
+}
+//#endregion
+export { anvilCostState };
+
+//# sourceMappingURL=Anvil.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Anvil.utils.js","names":[],"sources":["../../../../src/components/crafting/Anvil/Anvil.utils.ts"],"sourcesContent":["export type AnvilCostState = \"none\" | \"ok\" | \"unaffordable\" | \"tooExpensive\";\n\nexport function anvilCostState(\n  cost: number | undefined,\n  playerLevel: number | undefined,\n  maxCost: number,\n): AnvilCostState {\n  if (cost === undefined || cost <= 0) return \"none\";\n  if (cost >= maxCost) return \"tooExpensive\";\n  if (playerLevel !== undefined && playerLevel < cost) return \"unaffordable\";\n  return \"ok\";\n}\n"],"mappings":";AAEA,SAAgB,eACd,MACA,aACA,SACgB;CAChB,IAAI,SAAS,KAAA,KAAa,QAAQ,GAAG,OAAO;CAC5C,IAAI,QAAQ,SAAS,OAAO;CAC5B,IAAI,gBAAgB,KAAA,KAAa,cAAc,MAAM,OAAO;CAC5D,OAAO;AACT"}

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

@@ -0,0 +1,5 @@
+export { Anvil } from "./Anvil";
+export { anvilCostState } from "./Anvil.utils";
+export type { AnvilCostState } from "./Anvil.utils";
+export type { AnvilProps } from "./Anvil.types";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/crafting/Anvil/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

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

@@ -0,0 +1,7 @@
+import type { BrewingStandProps } from "./BrewingStand.types";
+/**
+ * Brewing stand: fuel with its gauge, the ingredient on top, a progress bar
+ * filling downwards and three bottle slots. States: idle, brewing, complete, no fuel.
+ */
+export declare const BrewingStand: import("react").ForwardRefExoticComponent<BrewingStandProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=BrewingStand.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BrewingStand.d.ts","sourceRoot":"","sources":["../../../../src/components/crafting/BrewingStand/BrewingStand.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAgB,MAAM,sBAAsB,CAAC;AAY5E;;;GAGG;AACH,eAAO,MAAM,YAAY,8GAmGvB,CAAC"}

package/dist/components/crafting/BrewingStand/BrewingStand.js

@@ -0,0 +1,116 @@
+import { cx } from "../../../utils/cx.js";
+import { clamp } from "../../../utils/number.js";
+import { InventorySlot } from "../../inventory/InventorySlot/InventorySlot.js";
+import BrewingStand_module_default from "./BrewingStand.module.js";
+import { getBrewingState, isFilled } from "./BrewingStand.utils.js";
+import { forwardRef } from "react";
+import { BlazePowderIcon, PotionIcon } from "@malilion/block-ui-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/crafting/BrewingStand/BrewingStand.tsx
+var defaultLabels = {
+	idle: "Idle",
+	brewing: "Brewing",
+	complete: "Complete",
+	noFuel: "No fuel"
+};
+var BOTTLE_NAMES = [
+	"Left bottle",
+	"Middle bottle",
+	"Right bottle"
+];
+/**
+* Brewing stand: fuel with its gauge, the ingredient on top, a progress bar
+* filling downwards and three bottle slots. States: idle, brewing, complete, no fuel.
+*/
+var BrewingStand = forwardRef(function BrewingStand({ ingredient, fuel, bottles = [], progress = 0, fuelLevel = 0, state, statusLabels, label = "Brewing stand", className, ...rest }, ref) {
+	const current = state ?? getBrewingState({
+		ingredient,
+		bottles,
+		progress,
+		fuelLevel
+	});
+	const pct = clamp(progress, 0, 100);
+	const fuelPct = clamp(fuelLevel, 0, 100);
+	const labels = {
+		...defaultLabels,
+		...statusLabels
+	};
+	const statusText = current === "brewing" ? `${labels.brewing} ${Math.round(pct)}%` : labels[current];
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		role: "group",
+		"aria-label": label,
+		"data-state": current,
+		className: cx(BrewingStand_module_default.stand, className),
+		style: {
+			"--block-brew-progress": `${pct}%`,
+			"--block-brew-fuel": `${fuelPct}%`
+		},
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: BrewingStand_module_default.layout,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: BrewingStand_module_default.fuel,
+				children: [/* @__PURE__ */ jsx(InventorySlot, {
+					size: "md",
+					label: isFilled(fuel) ? void 0 : "Fuel: empty",
+					children: fuel ?? /* @__PURE__ */ jsx("span", {
+						className: BrewingStand_module_default.ghost,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx(BlazePowderIcon, { size: 24 })
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					role: "meter",
+					"aria-label": "Fuel",
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-valuenow": Math.round(fuelPct),
+					className: BrewingStand_module_default.gauge,
+					children: /* @__PURE__ */ jsx("span", { className: BrewingStand_module_default.gaugeFill })
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: BrewingStand_module_default.center,
+				children: [
+					/* @__PURE__ */ jsx(InventorySlot, {
+						size: "lg",
+						label: isFilled(ingredient) ? void 0 : "Ingredient: empty",
+						children: ingredient
+					}),
+					/* @__PURE__ */ jsx("div", {
+						role: "progressbar",
+						"aria-label": "Brewing progress",
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						"aria-valuenow": Math.round(pct),
+						className: BrewingStand_module_default.progress,
+						children: /* @__PURE__ */ jsx("span", { className: BrewingStand_module_default.progressFill })
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: BrewingStand_module_default.bottles,
+						children: BOTTLE_NAMES.map((name, index) => {
+							const bottle = bottles[index];
+							return /* @__PURE__ */ jsx(InventorySlot, {
+								size: "lg",
+								label: isFilled(bottle) ? void 0 : `${name}: empty`,
+								className: BrewingStand_module_default.bottle,
+								children: isFilled(bottle) ? bottle : /* @__PURE__ */ jsx("span", {
+									className: BrewingStand_module_default.ghost,
+									"aria-hidden": "true",
+									children: /* @__PURE__ */ jsx(PotionIcon, { size: 32 })
+								})
+							}, name);
+						})
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx("p", {
+			className: BrewingStand_module_default.status,
+			"aria-live": "polite",
+			children: statusText
+		})]
+	});
+});
+//#endregion
+export { BrewingStand };
+
+//# sourceMappingURL=BrewingStand.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BrewingStand.js","names":["styles"],"sources":["../../../../src/components/crafting/BrewingStand/BrewingStand.tsx"],"sourcesContent":["import { BlazePowderIcon, PotionIcon } from \"@malilion/block-ui-icons\";\nimport { forwardRef, type CSSProperties } from \"react\";\nimport { cx } from \"../../../utils/cx\";\nimport { clamp } from \"../../../utils/number\";\nimport { InventorySlot } from \"../../inventory/InventorySlot/InventorySlot\";\nimport styles from \"./BrewingStand.module.css\";\nimport type { BrewingStandProps, BrewingState } from \"./BrewingStand.types\";\nimport { getBrewingState, isFilled } from \"./BrewingStand.utils\";\n\nconst defaultLabels: Record<BrewingState, string> = {\n  idle: \"Idle\",\n  brewing: \"Brewing\",\n  complete: \"Complete\",\n  noFuel: \"No fuel\",\n};\n\nconst BOTTLE_NAMES = [\"Left bottle\", \"Middle bottle\", \"Right bottle\"] as const;\n\n/**\n * Brewing stand: fuel with its gauge, the ingredient on top, a progress bar\n * filling downwards and three bottle slots. States: idle, brewing, complete, no fuel.\n */\nexport const BrewingStand = forwardRef<HTMLDivElement, BrewingStandProps>(function BrewingStand(\n  {\n    ingredient,\n    fuel,\n    bottles = [],\n    progress = 0,\n    fuelLevel = 0,\n    state,\n    statusLabels,\n    label = \"Brewing stand\",\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const current = state ?? getBrewingState({ ingredient, bottles, progress, fuelLevel });\n  const pct = clamp(progress, 0, 100);\n  const fuelPct = clamp(fuelLevel, 0, 100);\n  const labels = { ...defaultLabels, ...statusLabels };\n  const statusText =\n    current === \"brewing\" ? `${labels.brewing} ${Math.round(pct)}%` : labels[current];\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-label={label}\n      data-state={current}\n      className={cx(styles.stand, className)}\n      style={\n        {\n          \"--block-brew-progress\": `${pct}%`,\n          \"--block-brew-fuel\": `${fuelPct}%`,\n        } as CSSProperties\n      }\n      {...rest}\n    >\n      <div className={styles.layout}>\n        <div className={styles.fuel}>\n          <InventorySlot size=\"md\" label={isFilled(fuel) ? undefined : \"Fuel: empty\"}>\n            {fuel ?? (\n              <span className={styles.ghost} aria-hidden=\"true\">\n                <BlazePowderIcon size={24} />\n              </span>\n            )}\n          </InventorySlot>\n          <div\n            role=\"meter\"\n            aria-label=\"Fuel\"\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-valuenow={Math.round(fuelPct)}\n            className={styles.gauge}\n          >\n            <span className={styles.gaugeFill} />\n          </div>\n        </div>\n        <div className={styles.center}>\n          <InventorySlot size=\"lg\" label={isFilled(ingredient) ? undefined : \"Ingredient: empty\"}>\n            {ingredient}\n          </InventorySlot>\n          <div\n            role=\"progressbar\"\n            aria-label=\"Brewing progress\"\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-valuenow={Math.round(pct)}\n            className={styles.progress}\n          >\n            <span className={styles.progressFill} />\n          </div>\n          <div className={styles.bottles}>\n            {BOTTLE_NAMES.map((name, index) => {\n              const bottle = bottles[index];\n              return (\n                <InventorySlot\n                  key={name}\n                  size=\"lg\"\n                  label={isFilled(bottle) ? undefined : `${name}: empty`}\n                  className={styles.bottle}\n                >\n                  {isFilled(bottle) ? (\n                    bottle\n                  ) : (\n                    <span className={styles.ghost} aria-hidden=\"true\">\n                      <PotionIcon size={32} />\n                    </span>\n                  )}\n                </InventorySlot>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n      <p className={styles.status} aria-live=\"polite\">\n        {statusText}\n      </p>\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;AASA,IAAM,gBAA8C;CAClD,MAAM;CACN,SAAS;CACT,UAAU;CACV,QAAQ;AACV;AAEA,IAAM,eAAe;CAAC;CAAe;CAAiB;AAAc;;;;;AAMpE,IAAa,eAAe,WAA8C,SAAS,aACjF,EACE,YACA,MACA,UAAU,CAAC,GACX,WAAW,GACX,YAAY,GACZ,OACA,cACA,QAAQ,iBACR,WACA,GAAG,QAEL,KACA;CACA,MAAM,UAAU,SAAS,gBAAgB;EAAE;EAAY;EAAS;EAAU;CAAU,CAAC;CACrF,MAAM,MAAM,MAAM,UAAU,GAAG,GAAG;CAClC,MAAM,UAAU,MAAM,WAAW,GAAG,GAAG;CACvC,MAAM,SAAS;EAAE,GAAG;EAAe,GAAG;CAAa;CACnD,MAAM,aACJ,YAAY,YAAY,GAAG,OAAO,QAAQ,GAAG,KAAK,MAAM,GAAG,EAAE,KAAK,OAAO;CAE3E,OACE,qBAAC,OAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,cAAY;EACZ,WAAW,GAAGA,4BAAO,OAAO,SAAS;EACrC,OACE;GACE,yBAAyB,GAAG,IAAI;GAChC,qBAAqB,GAAG,QAAQ;EAClC;EAEF,GAAI;EAZN,UAAA,CAcE,qBAAC,OAAD;GAAK,WAAWA,4BAAO;GAAvB,UAAA,CACE,qBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAvB,UAAA,CACE,oBAAC,eAAD;KAAe,MAAK;KAAK,OAAO,SAAS,IAAI,IAAI,KAAA,IAAY;KAC1D,UAAA,QACC,oBAAC,QAAD;MAAM,WAAWA,4BAAO;MAAO,eAAY;MACzC,UAAA,oBAAC,iBAAD,EAAiB,MAAM,GAAK,CAAA;KACxB,CAAA;IAEK,CAAA,GACf,oBAAC,OAAD;KACE,MAAK;KACL,cAAW;KACX,iBAAe;KACf,iBAAe;KACf,iBAAe,KAAK,MAAM,OAAO;KACjC,WAAWA,4BAAO;KAElB,UAAA,oBAAC,QAAD,EAAM,WAAWA,4BAAO,UAAY,CAAA;IACjC,CAAA,CACF;GACL,CAAA,GAAA,qBAAC,OAAD;IAAK,WAAWA,4BAAO;IAAvB,UAAA;KACE,oBAAC,eAAD;MAAe,MAAK;MAAK,OAAO,SAAS,UAAU,IAAI,KAAA,IAAY;MAChE,UAAA;KACY,CAAA;KACf,oBAAC,OAAD;MACE,MAAK;MACL,cAAW;MACX,iBAAe;MACf,iBAAe;MACf,iBAAe,KAAK,MAAM,GAAG;MAC7B,WAAWA,4BAAO;MAElB,UAAA,oBAAC,QAAD,EAAM,WAAWA,4BAAO,aAAe,CAAA;KACpC,CAAA;KACL,oBAAC,OAAD;MAAK,WAAWA,4BAAO;MACpB,UAAA,aAAa,KAAK,MAAM,UAAU;OACjC,MAAM,SAAS,QAAQ;OACvB,OACE,oBAAC,eAAD;QAEE,MAAK;QACL,OAAO,SAAS,MAAM,IAAI,KAAA,IAAY,GAAG,KAAK;QAC9C,WAAWA,4BAAO;QAEjB,UAAA,SAAS,MAAM,IACd,SAEA,oBAAC,QAAD;SAAM,WAAWA,4BAAO;SAAO,eAAY;SACzC,UAAA,oBAAC,YAAD,EAAY,MAAM,GAAK,CAAA;QACnB,CAAA;OAEK,GAZR,IAYQ;MAEnB,CAAC;KACE,CAAA;IACF;GACF,CAAA,CAAA;EACL,CAAA,GAAA,oBAAC,KAAD;GAAG,WAAWA,4BAAO;GAAQ,aAAU;GACpC,UAAA;EACA,CAAA,CACA;;AAET,CAAC"}

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

@@ -0,0 +1,29 @@
+//#region src/components/crafting/BrewingStand/BrewingStand.module.css
+var stand = "block-stand-BRIZQ";
+var layout = "block-layout-9PWQR";
+var fuel = "block-fuel-RmOp7";
+var gauge = "block-gauge-xF-dA";
+var gaugeFill = "block-gaugeFill-Ef3Tz";
+var center = "block-center-ohWeq";
+var progress = "block-progress-PF3zt";
+var progressFill = "block-progressFill-9wVvX";
+var bottles = "block-bottles-LvzD3";
+var ghost = "block-ghost-o5t8r";
+var status = "block-status-XF19N";
+var BrewingStand_module_default = {
+	stand,
+	layout,
+	fuel,
+	gauge,
+	gaugeFill,
+	center,
+	progress,
+	progressFill,
+	bottles,
+	ghost,
+	status
+};
+//#endregion
+export { bottles, center, BrewingStand_module_default as default, fuel, gauge, gaugeFill, ghost, layout, progress, progressFill, stand, status };
+
+//# sourceMappingURL=BrewingStand.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BrewingStand.module.js","names":[],"sources":["../../../../src/components/crafting/BrewingStand/BrewingStand.module.css"],"sourcesContent":[".stand {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--block-space-3);\n  width: 100%;\n}\n\n.layout {\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  gap: var(--block-space-4);\n}\n\n.fuel {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--block-space-1);\n}\n\n.gauge {\n  position: relative;\n  width: 40px;\n  height: 8px;\n  background-color: var(--block-black);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  overflow: hidden;\n}\n\n.gaugeFill {\n  position: absolute;\n  inset: 0 auto 0 0;\n  width: var(--block-brew-fuel);\n  background-color: var(--block-lava);\n  box-shadow: inset 0 2px 0 var(--block-gold-light);\n  transition: width var(--block-duration-normal) steps(4, end);\n}\n\n.center {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--block-space-1);\n}\n\n/* Vertical progress bar that fills top to bottom, like bubbles sinking into the bottles. */\n.progress {\n  position: relative;\n  width: 12px;\n  height: 32px;\n  background-color: var(--block-black);\n  border: var(--block-border-width-thin) solid var(--block-border);\n  overflow: hidden;\n}\n\n.progressFill {\n  position: absolute;\n  inset: 0 0 auto;\n  height: var(--block-brew-progress);\n  background-color: var(--block-text-primary);\n  box-shadow: inset -2px 0 0 var(--block-text-muted);\n  transition: height var(--block-duration-normal) steps(4, end);\n}\n\n.stand[data-state=\"complete\"] .progressFill {\n  background-color: var(--block-gold-light);\n}\n\n.bottles {\n  display: flex;\n  gap: var(--block-space-2);\n}\n\n/* Side bottles sit a little higher, like the stand's arms. */\n.bottles > :first-child,\n.bottles > :last-child {\n  margin-top: calc(-1 * var(--block-space-4));\n}\n\n.ghost {\n  display: inline-flex;\n  color: var(--block-text-muted);\n  opacity: 0.3;\n  filter: grayscale(1);\n}\n\n.status {\n  margin: 0;\n  min-height: 1.4em;\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.stand[data-state=\"noFuel\"] .status {\n  color: var(--block-redstone-light);\n}\n\n.stand[data-state=\"complete\"] .status {\n  color: var(--block-gold-light);\n}\n\n@media (max-width: 767.98px) {\n  .layout {\n    gap: var(--block-space-2);\n  }\n}\n"],"mappings":""}