@dxos/react-ui-gameboard 0.10.0 → 0.11.0

package/dist/lib/index.mjs

@@ -0,0 +1,854 @@
+import { createContext } from "@radix-ui/react-context";
+import { draggable, dropTargetForElements, monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { log } from "@dxos/log";
+import { mx } from "@dxos/ui-theme";
+import { centerUnderPointer } from "@atlaskit/pragmatic-drag-and-drop/element/center-under-pointer";
+import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
+import { createPortal } from "react-dom";
+import { invariant } from "@dxos/invariant";
+import { useDynamicRef, useForwardedRef } from "@dxos/react-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Atom } from "@effect-atom/atom";
+import { Chess } from "chess.js";
+import { Atom as Atom$1, useAtomValue } from "@effect-atom/atom-react";
+import { useResizeDetector } from "react-resize-detector";
+import { isNonNullable } from "@dxos/util";
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+//#region src/components/Gameboard/types.ts
+var locationToString = (location) => location.join("-");
+var stringToLocation = (str) => str.split("-").map(Number);
+var isPiece = (piece) => piece != null && typeof piece === "object" && "id" in piece && "type" in piece && "location" in piece && isLocation(piece.location);
+var isLocation = (token) => Array.isArray(token) && token.length === 2 && token.every((val) => typeof val === "number");
+var isEqualLocation = (l1, l2) => l1[0] === l2[0] && l1[1] === l2[1];
+//#endregion
+//#region src/components/Gameboard/util.ts
+var getRelativeBounds = (container, element) => {
+	const containerRect = container.getBoundingClientRect();
+	const elementRect = element.getBoundingClientRect();
+	return {
+		top: elementRect.top - containerRect.top,
+		left: elementRect.left - containerRect.left,
+		width: elementRect.width,
+		height: elementRect.height
+	};
+};
+//#endregion
+//#region src/components/Gameboard/GameboardContext.ts
+var [GameboardContextProvider, useRadixGameboardContext] = createContext("Gameboard");
+var useGameboardContext = (consumerName) => {
+	return useRadixGameboardContext(consumerName);
+};
+//#endregion
+//#region src/components/Gameboard/Piece.tsx
+var __dxlog_file$3 = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/components/Gameboard/Piece.tsx";
+var PIECE_NAME = "Piece";
+var Piece = memo(({ classNames, Component, piece, bounds, label, onClick }) => {
+	const { model, dragging: isDragging, promoting } = useGameboardContext(PIECE_NAME);
+	const promotingRef = useDynamicRef(promoting);
+	const [dragging, setDragging] = useState(false);
+	const [preview, setPreview] = useState();
+	const [current, setCurrent] = useState({});
+	const ref = useRef(null);
+	useEffect(() => {
+		if (!model) return;
+		const el = ref.current;
+		invariant(el, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$3,
+			L: 47,
+			S: void 0,
+			A: ["el", ""]
+		});
+		return draggable({
+			element: el,
+			getInitialData: () => ({ piece }),
+			onGenerateDragPreview: ({ nativeSetDragImage, source }) => {
+				log("onGenerateDragPreview", { source: source.data }, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$3,
+					L: 53,
+					S: void 0
+				});
+				setCustomNativeDragPreview({
+					getOffset: centerUnderPointer,
+					render: ({ container }) => {
+						setPreview(container);
+						const { width, height } = el.getBoundingClientRect();
+						container.style.width = width + "px";
+						container.style.height = height + "px";
+						return () => {
+							setPreview(void 0);
+						};
+					},
+					nativeSetDragImage
+				});
+			},
+			canDrag: () => !promotingRef.current && !model.readonly && model.turn === piece.side,
+			onDragStart: () => setDragging(true),
+			onDrop: ({ location: { current } }) => {
+				try {
+					const location = current.dropTargets[0]?.data.location;
+					if (isLocation(location)) setCurrent((current) => ({
+						...current,
+						location
+					}));
+				} catch {}
+				setDragging(false);
+			}
+		});
+	}, [model, piece]);
+	useEffect(() => {
+		requestAnimationFrame(() => {
+			if (!ref.current || !bounds) return;
+			if (!current.location || !isEqualLocation(current.location, piece.location)) {
+				ref.current.style.transition = "top 250ms ease-out, left 250ms ease-out";
+				ref.current.style.top = bounds.top + "px";
+				ref.current.style.left = bounds.left + "px";
+				setCurrent({
+					location: piece.location,
+					bounds
+				});
+			} else if (current.bounds !== bounds) {
+				ref.current.style.transition = "none";
+				ref.current.style.top = bounds.top + "px";
+				ref.current.style.left = bounds.left + "px";
+				setCurrent({
+					location: piece.location,
+					bounds
+				});
+			}
+		});
+	}, [
+		current,
+		piece.location,
+		bounds
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		ref,
+		style: {
+			width: bounds?.width,
+			height: bounds?.height
+		},
+		className: mx("absolute", classNames, dragging && "opacity-20", isDragging && "pointer-events-none"),
+		onClick,
+		children: [/* @__PURE__ */ jsx(Component, { className: "grow" }), label && /* @__PURE__ */ jsx("div", {
+			className: "absolute inset-1 text-xs text-black",
+			children: label
+		})]
+	}), preview && createPortal(/* @__PURE__ */ jsx("div", {
+		className: mx(classNames),
+		children: /* @__PURE__ */ jsx(Component, { className: "grow" })
+	}), preview)] });
+});
+Piece.displayName = PIECE_NAME;
+//#endregion
+//#region src/components/Gameboard/Square.tsx
+var __dxlog_file$2 = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/components/Gameboard/Square.tsx";
+var SQUARE_NAME = "Square";
+var Square = memo(({ location, bounds, label, classNames }) => {
+	const ref = useRef(null);
+	const [state, setState] = useState("idle");
+	const { model } = useGameboardContext(SQUARE_NAME);
+	useEffect(() => {
+		const el = ref.current;
+		invariant(el, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$2,
+			L: 34,
+			S: void 0,
+			A: ["el", ""]
+		});
+		return dropTargetForElements({
+			element: el,
+			getData: () => ({ location }),
+			canDrop: ({ source }) => {
+				log("canDrop", { source: source.data }, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$2,
+					L: 40,
+					S: void 0
+				});
+				return true;
+			},
+			onDragEnter: ({ source }) => {
+				log("onDragEnter", { source: source.data }, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$2,
+					L: 44,
+					S: void 0
+				});
+				const piece = source.data.piece;
+				if (!isPiece(piece)) return;
+				if (model?.isValidMove({
+					from: piece.location,
+					to: location,
+					piece: piece.type
+				})) setState("validMove");
+				else setState("invalidMove");
+			},
+			onDragLeave: () => setState("idle"),
+			onDrop: () => setState("idle")
+		});
+	}, [model, location]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		style: bounds,
+		className: mx("absolute flex justify-center items-center border-2 box-border select-none", classNames, state === "validMove" ? "border-neutral-800" : "border-transparent"),
+		children: label && /* @__PURE__ */ jsx("div", {
+			className: mx("absolute bottom-1 left-1 text-xs text-neutral-500"),
+			children: label
+		})
+	});
+});
+Square.displayName = SQUARE_NAME;
+//#endregion
+//#region src/components/Gameboard/Gameboard.tsx
+var __dxlog_file$1 = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/components/Gameboard/Gameboard.tsx";
+/**
+* Generic board container.
+*/
+var GameboardRoot = ({ children, model, onDrop }) => {
+	const [dragging, setDragging] = useState(false);
+	const [promoting, setPromoting] = useState();
+	const handlePromotion = useCallback((move) => {
+		log("onPromotion", { move }, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file$1,
+			L: 34,
+			S: void 0
+		});
+		setPromoting(void 0);
+		onDrop?.(move);
+	}, []);
+	useEffect(() => {
+		if (!model) return;
+		return monitorForElements({
+			onDragStart: ({ source }) => {
+				log("onDragStart", { source }, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$1,
+					L: 47,
+					S: void 0
+				});
+				setDragging(true);
+			},
+			onDrop: ({ source, location }) => {
+				log("onDrop", {
+					source,
+					location
+				}, {
+					"~LogMeta": "~LogMeta",
+					F: __dxlog_file$1,
+					L: 51,
+					S: void 0
+				});
+				const target = location.current.dropTargets[0];
+				if (!target) return;
+				const targetLocation = target.data.location;
+				const piece = source.data.piece;
+				if (!isLocation(targetLocation) || !isPiece(piece)) return;
+				const move = {
+					from: piece.location,
+					to: targetLocation,
+					piece: piece.type
+				};
+				if (model.isValidMove(move)) if (model.canPromote?.(move)) setPromoting({
+					...piece,
+					location: targetLocation
+				});
+				else onDrop?.(move);
+				setDragging(false);
+			}
+		});
+	}, [model]);
+	return /* @__PURE__ */ jsx(GameboardContextProvider, {
+		model,
+		dragging,
+		promoting,
+		onPromotion: handlePromotion,
+		children
+	});
+};
+GameboardRoot.displayName = "Gameboard.Root";
+var GameboardContent = forwardRef(({ children, classNames, grow, contain }, forwardedRef) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: mx(grow && "dx-size-container dx-expander grid place-content-center", classNames),
+		ref: forwardedRef,
+		children: contain ? /* @__PURE__ */ jsx("div", {
+			className: "w-[min(100cqw,100cqh)] h-[min(100cqw,100cqh)]",
+			children
+		}) : children
+	});
+});
+GameboardContent.displayName = "Gameboard.Content";
+var Gameboard = {
+	Root: GameboardRoot,
+	Content: GameboardContent,
+	Piece,
+	Square
+};
+//#endregion
+//#region src/gen/pieces/chess/alpha/bB.tsx
+var SvgBB = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 2048 2048",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		fill: "#f9f9f9",
+		d: "M732 1290 628 993l386-417 421 375-132 380 49 152-658-9z"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "#101010",
+		d: "M768 1365q-5 39-26 82h564q-18-36-26-82zm495-73 46-73q-142-49-285-47-144-2-285 47l46 73q118-40 239-38 120-2 239 38m-432 227H624q67-116 72-229-114-119-162-223t-6-224q33-96 118-189t312-247q-17-11-46-36t-29-79q0-58 41-96t100-38q58 0 100 38t41 96q0 54-29 79t-46 36q226 153 311 247t119 189q42 119-6 224t-162 223q4 113 72 229h-207l10 16q33 53 70 60t89 7h250q76 0 142 62t65 179h-495q-123 0-223-84t-101-199q0 114-101 199t-223 84H205q0-117 65-179t142-62h250q51 0 88-7t71-60zm146-701h-95v89h95v165h94V907h95v-89h-95V714h-94z"
+	})]
+});
+//#endregion
+//#region src/gen/pieces/chess/alpha/bK.tsx
+var SvgBK = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 2048 2048",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		fill: "#f9f9f9",
+		d: "m553 1485-55 320 1048 5-48-335s324-313 330-467c7-153-35-331-241-406-183-67-372 121-372 121l-182-161-190 160S658 586 587 592a373 373 0 0 0-362 333c10 331 328 560 328 560"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "#101010",
+		d: "M1024 1769h489l-12-73H547l-12 73zm0-921q-25-60-62-111 31-48 62-65 30 17 62 65-38 51-62 111m-97 454q-154 11-303 58-123-108-200-213t-77-202q0-89 74-159t148-70q67 0 135 63t102 130q30 54 75 175t46 218m-350 217-26 156 145-84zm447-907q-47 0-136 121-31-36-50-55 93-140 186-140 92 0 186 140-20 19-50 55-90-121-136-121m0 775q-1-126-42-267t-84-227l-14-27-12-23q-28-43-48-69-51-63-120-105t-134-42q-103 0-208 93T257 949q0 120 99 255t249 259q201-74 419-76m0 456H448l61-365q-325-280-326-535-1-159 125-274t267-116q78 0 159 47t142 119q61 74 99 165t49 150q12-60 49-150t99-165q61-72 142-119t159-47q140 0 266 116t126 274q-2 255-326 535l61 365zm97-541q0-97 45-218t76-175q34-68 102-130t135-63q74 0 148 70t74 159q0 96-77 202t-200 213q-150-47-303-58m350 217-119 72 145 84zm-447-132q217 2 419 76 150-125 249-259t99-255q0-136-105-229t-208-93q-66 0-135 42t-119 105q-21 26-48 69l-12 23-14 27q-44 85-85 227t-41 267m-139 159 139 86 139-84-139-86zm92-1248v-95h94v95h107v95h-107v153q-48-16-94 0V393H870v-95z"
+	})]
+});
+//#endregion
+//#region src/gen/pieces/chess/alpha/bN.tsx
+var SvgBN = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 2048 2048",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		fill: "#f9f9f9",
+		d: "M1658 1806c-408-301-71-920-452-1343l60-16s296 167 320 257c182 468 41 691 135 1077zM972 523l120 176-312-3zM498 981l-93-41 42-93 127 28z"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "#101010",
+		d: "m502 868-52 1-26 64 69 21 46-55zm536-187q34 1-16-68t-80-42L826 680zm-338-98q6-39 116-107t220-144l115-154 96 217q342 172 433 418t47 603q-18 128 5 236t57 190l-1242 1q-9-178 39-301t183-238q50-11 83-39t53-59l63-1 138-29 139-97 66-207q0-17-8-34t-12-37q-62 228-161 289t-191 58q-236-42-292 60l-56 102-217-121 115-82-51-50-122 86-12-297zm981 1192q-102-130-85-308t27-363-50-351-316-276q220 164 253 342t16 351-12 329 167 276"
+	})]
+});
+//#endregion
+//#region src/gen/pieces/chess/alpha/bP.tsx
+var SvgBP = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 2048 2048",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "#101010",
+		d: "M1024 1843H446v-74q-4-80 42-137t125-108q117-91 172-217t78-268H576l284-239q-86-74-86-188 0-103 73-177t177-74q103 0 177 74t73 177q0 114-86 188l284 239h-287q23 141 78 268t172 217q79 51 125 108t42 137v74z"
+	})
+});
+//#endregion
+//#region src/gen/pieces/chess/alpha/bQ.tsx
+var SvgBQ = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 2048 2048",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		fill: "#f9f9f9",
+		d: "m520 1801.8 41.5-448.7 474-128.9 458 133.5 34.4 446.4z"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "#101010",
+		d: "M590 1519q4 72-15 158l134-86zm434 324H441q114-231 57.5-456.5T296 937q-12 2-19 2-54 0-92.5-38.5T146 808t38.5-92.5T277 677t92.5 38.5T408 808q0 20-6 38-4 14-15 33l196 139 100-486q-64-31-72-103-5-44 29-91t88-53q54-5 96 29t48 88q7 68-46 114l198 412 198-412q-54-46-46-114 6-54 48-88t96-29q54 6 87.5 53t29.5 91q-9 72-72 103l100 486 196-139q-12-19-15-33-6-18-6-38 0-54 38.5-92.5T1771 677t92.5 38.5T1902 808t-38.5 92.5T1771 939q-7 0-19-2-147 224-203 449.5t58 456.5zm0-450q109 0 222 28.5t213 67.5q2-41 11-89-108-42-221.5-68t-224.5-26-225 26-221 68q8 48 11 89 99-39 212-67.5t223-28.5m0 376h478q-15-34-24-73H570q-10 39-24 73zm434-250-119 72 134 86q-20-86-15-158m-573 47 139 87 139-84-139-86z"
+	})]
+});
+//#endregion
+//#region src/gen/pieces/chess/alpha/bR.tsx
+var SvgBR = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 2048 2048",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		fill: "#f9f9f9",
+		d: "m674 732-76 807 851 14-75-833z"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "#101010",
+		d: "M1024 1843H383l29-264 159-118 50-659-149-107-17-341h289v147h137V354h286v147h137V354h289l-17 341-149 107 50 659 159 118 29 264zm0-989h333l-6-88H697l-6 88zm0 647h381l-6-87H649l-6 87z"
+	})]
+});
+//#endregion
+//#region src/gen/pieces/chess/alpha/wB.tsx
+var SvgWB = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 2048 2048",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		fill: "#f9f9f9",
+		d: "m948 366 1-139 148-7 1 147zM564 860c114-267 456-443 456-443s392 176 476 502c-9 209-183 332-183 332l27 221-653 6 46-233s-230-171-169-385m-101 790c175 6 355 23 425-142h92s0 190-88 246c-163 103-625 38-625 38s-15-146 196-142m631 37-36-185 102 5s22 153 315 131c381-17 318 153 318 153l-483 5z"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "#101010",
+		d: "M1024 356q66 0 64-66 1-55-64-55-66 0-64 55-3 66 64 66m0 1204q0 114-101 199t-223 84H205q0-117 65-179t142-62h250q51 0 88-7t71-60l10-16h76q-7 21-3 13-45 105-109 125t-146 19H409q-52 0-86 40t-34 53h424q66 0 159-65t93-185H624q67-116 72-229-114-119-162-223t-6-224q33-96 118-189t312-247q-17-11-46-36t-29-79q0-58 41-96t100-38q58 0 100 38t41 96q0 54-29 79t-46 36q226 153 311 247t119 189q42 119-6 224t-162 223q4 113 72 229h-341q0 120 93 185t159 65h424q0-13-34-53t-86-40h-240q-83 0-146-19t-109-125q4 8-3-13h76l10 16q33 53 70 60t89 7h250q76 0 142 62t65 179h-495q-123 0-223-84t-101-199m0-114h283q-28-84-29-154-120-41-254-38-135-3-254 38-2 70-29 154zm0-267q159-1 285 42 189-180 142-346-60-193-427-431-368 238-427 431-48 166 142 346 125-43 285-42m-47-361V714h94v104h95v89h-95v165h-94V907h-95v-89z"
+	})]
+});
+//#endregion
+//#region src/gen/pieces/chess/alpha/wK.tsx
+var SvgWK = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 2048 2048",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		fill: "#f9f9f9",
+		d: "m501.6 1811 48.4-354.4-260-269.2s-166.4-288.2 29.9-481C582.2 448.7 826 727.2 826 727.2l195.6-165.7 184 165.7s216.4-232.5 430.4-76 255.4 317.6 117.4 531.6c-138.1 214-250.9 280.7-250.9 280.7L1558 1811z"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "#101010",
+		d: "M977 298v-95h94v95h107v95h-107v153q-48-16-94 0V393H870v-95zm47 314q-47 0-136 121-31-36-50-55 93-140 186-140 92 0 186 140-20 19-50 55-90-121-136-121m-447 907-26 156 145-84zm410-206q-1-147-36.5-274.5T870 845q-45-88-131.5-153T570 627q-103 0-208 93T257 949q0 109 86.5 236T546 1408q212-88 441-95m37 530H448l61-365q-325-280-326-535-1-159 125-274.5T575 553q78 0 158.5 47T876 719q61 74 98.5 164.5T1024 1034q12-60 49-150.5t99-164.5q61-72 142-119t159-47q140 0 266 115.5T1865 943q-2 255-326 535l61 365zm0-74h489l-50-298q-216-84-439-84t-439 84l-50 298zm447-250 26 156-145-84zm-410-206q229 7 441 95 115-96 202-223t87-236q0-136-105.5-229T1478 627q-83 0-169.5 65T1178 845q-46 66-81.5 193.5T1061 1313m-176 233 141-84 137 86-141 84z"
+	})]
+});
+//#endregion
+//#region src/gen/pieces/chess/alpha/wN.tsx
+var SvgWN = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 2048 2048",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		fill: "#f9f9f9",
+		d: "m352 861 787-569 94 148s336 103 398 388c63 286 51 974 51 974l-1088 9s-37-290 184-460c221-171 221-212 221-212s-226-71-295-16-117 138-117 138l-129-67 74-85-88-97-94 56z"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "#101010",
+		d: "m1151 178-115 154c-74 50-147 98-220 144-73 45-112 81-116 107L304 846l12 297 122-86 51 50-115 82 217 121 56-102c37-68 135-88 292-60l-55 85c-25 37-63 60-115 71a608 608 0 0 0-183 238c-32 82-45 182-39 301h1242c-23-55-42-118-57-190-15-73-17-152-5-237 29-239 13-440-47-603-61-164-205-303-433-418zm-17 145 59 133a664 664 0 0 1 262 188c55 72 100 150 134 234 27 97 40 181 41 253 0 71-3 140-9 205-7 65-11 131-13 199-2 67 9 145 32 234H621c-4-84 12-158 48-223s85-124 146-177c78-22 129-56 152-102s53-90 90-131c13-10 27-15 38-15 10-1 21 0 33-2 52-7 95-36 129-85 33-49 51-104 52-165l-19-67c-37 159-99 245-188 257l-45 6c-16 1-33 10-52 26-41-25-87-35-138-31q-111 9-165 27l-108 73-39 45-47-28 78-65-138-144-64 41-4-125 366-241c15-34 58-74 131-120l208-131zM960 564c-6 0-12 2-18 7L826 671l212 2c23 0 17-21-16-63-24-31-44-46-62-46M502 868l-33 4-33 56 57 26 46-55z"
+	})]
+});
+//#endregion
+//#region src/gen/pieces/chess/alpha/wP.tsx
+var SvgWP = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 2048 2048",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		fill: "#f9f9f9",
+		d: "m734 981 196-193s-189-82-79-288c79-149 303-114 361 50 63 179-113 240-113 240l226 197Zm-235 799s-8-107 50-154c196-173 338-386 371-599l210 2c33 206 182 447 321 561 101 59 99 199 99 199z"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "#101010",
+		d: "M520 1769h1008q8-97-132-182-132-101-196-239t-80-309H928q-15 170-79 309t-197 239q-141 85-132 182m504 74H446v-74q-4-80 42-137t125-108q117-91 172-217t78-268H576l284-239q-86-74-86-188 0-103 73-177t177-74q103 0 177 74t73 177q0 114-86 188l284 239h-287q23 141 78 268t172 217q79 51 125 108t42 137v74zM756 974h536l-225-191q134-31 134-171 0-76-52-126t-125-51q-73 0-125 51t-52 126q0 140 134 171z"
+	})]
+});
+//#endregion
+//#region src/gen/pieces/chess/alpha/wQ.tsx
+var SvgWQ = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 2048 2048",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		fill: "#f9f9f9",
+		d: "m508.5 1815.6 48.4-356.7-216.3-554.6-135.8-20.7-16.1-126.5 112.7-43.8 78.3 73.7-18.4 99 246.2 197.8 112.8-568.3L635 428l78.3-108 112.8 43.7-23 161 223.2 474 244-490-66.8-105.9 92-92 105.9 73.6L1337 534l103.5 529.2 260-161-16-142.7 131-46 57.6 131.1-207 103.6-175 529.2 48.4 308.4z"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "#101010",
+		d: "M1024 1769h478q-53-130-43-280-100-39-213-67.5t-222-28.5q-110 0-223 28.5T589 1489q9 150-43 280zm0-450q111 0 223.5 26.5T1468 1413q17-105 60.5-212.5T1634 988l-220 155-123-601-267 555-267-555-123 601-220-155q61 105 104.5 212.5T580 1413q108-41 220.5-67.5T1024 1319m0 524H441q114-231 57.5-456.5T296 937q-12 2-19 2-54 0-92.5-38.5T146 808t38.5-92.5T277 677t92.5 38.5T408 808q0 20-6 38-4 14-15 33l196 139 100-486q-64-31-72-103-5-44 29-91t88-53q54-5 96 29t48 88q7 68-46 114l198 412 198-412q-54-46-46-114 6-54 48-88t96-29q54 6 87.5 53t29.5 91q-9 72-72 103l100 486 196-139q-12-19-15-33-6-18-6-38 0-54 38.5-92.5T1771 677t92.5 38.5T1902 808t-38.5 92.5T1771 939q-7 0-19-2-147 224-203 449.5t58 456.5zM276 746q-62 0-62 62t62 62q63 0 63-62t-63-62m466-394q-62 0-62 62t62 62 62-62-62-62M590 1519l119 72-134 86q19-86 15-158m1182-773q-63 0-63 62t63 62q62 0 62-62t-62-62m-466-394q-62 0-62 62t62 62 62-62-62-62m152 1167-119 72 134 86q-20-86-15-158m-573 47 139-83 139 86-139 84z"
+	})]
+});
+//#endregion
+//#region src/gen/pieces/chess/alpha/wR.tsx
+var SvgWR = (props) => /* @__PURE__ */ jsxs("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 2048 2048",
+	...props,
+	children: [/* @__PURE__ */ jsx("path", {
+		fill: "#f9f9f9",
+		d: "m435 1804 16-212 152-115 51-688-148-115-7-276 210-2 4 138 198 2 7-140 212-3 14 145 193-4 5-138h204l-7 285-145 106 42 693 172 124 19 207z"
+	}), /* @__PURE__ */ jsx("path", {
+		fill: "#101010",
+		d: "M1024 1501H643l5-74h752l5 74zm0-661H692l5-74h654l5 74zm0 1003H383l29-264 159-118 50-659-149-107-17-341h289v147h137V354h286v147h137V354h289l-17 341-149 107 50 659 159 118 29 264zm0-74h557l-15-149-161-119-54-735 152-109 13-230h-138v148h-285V427H955v148H670V427H532l13 230 152 109-54 735-161 119-15 149z"
+	})]
+});
+//#endregion
+//#region src/gen/pieces/chess/alpha/index.ts
+var alpha_exports = /* @__PURE__ */ __exportAll({
+	BB: () => SvgBB,
+	BK: () => SvgBK,
+	BN: () => SvgBN,
+	BP: () => SvgBP,
+	BQ: () => SvgBQ,
+	BR: () => SvgBR,
+	WB: () => SvgWB,
+	WK: () => SvgWK,
+	WN: () => SvgWN,
+	WP: () => SvgWP,
+	WQ: () => SvgWQ,
+	WR: () => SvgWR
+});
+//#endregion
+//#region src/components/Chessboard/chess.ts
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-gameboard/src/components/Chessboard/chess.ts";
+var ChessPieces = alpha_exports;
+var posToLocation = (pos) => {
+	const col = pos.charCodeAt(0) - "a".charCodeAt(0);
+	return [parseInt(pos[1]) - 1, col];
+};
+var locationToPos = ([row, col]) => {
+	return String.fromCharCode(col + "a".charCodeAt(0)) + (row + 1);
+};
+var getRawPgn = (pgn) => {
+	return pgn.replace(/\[.*?\]/g, "").trim();
+};
+var boardStyles = {
+	neutral: {
+		black: "bg-neutral-50",
+		white: "bg-neutral-200",
+		promotion: "bg-neutral-200 hover:bg-neutral-300 opacity-70 hover:opacity-100"
+	},
+	original: {
+		black: "bg-[#6C95B9]",
+		white: "bg-[#CCD3DB]",
+		promotion: "duration-500 bg-[#CCD3DB] opacity-70 hover:opacity-100"
+	},
+	blue: {
+		black: "bg-[#608BC1]",
+		white: "bg-[#CBDCEB]",
+		promotion: "duration-500 bg-[#CBDCEB] opacity-70 hover:opacity-100"
+	},
+	green: {
+		black: "bg-[#8EB486]",
+		white: "bg-[#FDF7F4]",
+		promotion: "duration-500 bg-[#FDF7F4] opacity-70 hover:opacity-100"
+	}
+}.original;
+var getSquareColor = ([row, col]) => {
+	return (col + row) % 2 === 0 ? boardStyles.black : boardStyles.white;
+};
+var createChess = (pgn) => {
+	const chess = new Chess();
+	if (pgn) try {
+		chess.loadPgn(pgn);
+	} catch {
+		log.warn(pgn, void 0, {
+			"~LogMeta": "~LogMeta",
+			F: __dxlog_file,
+			L: 76,
+			S: void 0
+		});
+	}
+	return chess;
+};
+/**
+* Chess model.
+*/
+var ChessModel = class {
+	_registry;
+	_chess = new Chess();
+	_pieces = Atom.make({});
+	_moveIndex = Atom.make(0);
+	constructor(_registry, pgn) {
+		this._registry = _registry;
+		this.update(pgn);
+	}
+	get readonly() {
+		return this._registry.get(this._moveIndex) !== this._chess.history().length;
+	}
+	get turn() {
+		return this._chess.turn() === "w" ? "white" : "black";
+	}
+	get game() {
+		return this._chess;
+	}
+	get pieces() {
+		return this._pieces;
+	}
+	get moveIndex() {
+		return this._moveIndex;
+	}
+	get fen() {
+		return this._chess.fen();
+	}
+	/**
+	* PGN with headers.
+	*
+	* [Event "?"]
+	* [Site "?"]
+	* [Date "2025.08.05"]
+	* [Round "?"]
+	* [White "?"]
+	* [Black "?"]
+	* [Result "*"]
+	*/
+	get pgn() {
+		return getRawPgn(this._chess.pgn());
+	}
+	setMoveIndex(index) {
+		const temp = new Chess();
+		const history = this._chess.history({ verbose: true });
+		for (let i = 0; i < index && i < history.length; i++) temp.move(history[i]);
+		this._updateBoard(temp);
+	}
+	update(pgn = "") {
+		const previous = this._chess.history();
+		try {
+			this._chess.loadPgn(pgn);
+			this._chess.setHeader("Date", createDate());
+			this._chess.setHeader("Site", "dxos.org");
+		} catch {}
+		if (!isValidNextMove(previous, this._chess.history())) this._registry.set(this._pieces, {});
+		this._updateBoard(this._chess);
+	}
+	isValidMove(move) {
+		return tryMove(new Chess(this._chess.fen()), move) !== null;
+	}
+	canPromote(move) {
+		const isPawnMove = move.piece === "BP" || move.piece === "WP";
+		const isToLastRank = move.to[0] === 0 || move.to[0] === 7;
+		return isPawnMove && isToLastRank;
+	}
+	makeMove(move) {
+		if (!tryMove(this._chess, move)) return false;
+		this._updateBoard(this._chess);
+		return true;
+	}
+	makeRandomMove() {
+		const moves = this._chess.moves();
+		if (!moves.length) return false;
+		const move = moves[Math.floor(Math.random() * moves.length)];
+		this._chess.move(move);
+		this._updateBoard(this._chess);
+		return true;
+	}
+	/**
+	* Update pieces preserving identity.
+	*/
+	_updateBoard(chess) {
+		this._registry.set(this._pieces, createPieceMap(chess));
+		this._registry.set(this._moveIndex, chess.history().length);
+	}
+};
+/**
+* Attempt move.
+*/
+var tryMove = (chess, move) => {
+	const from = locationToPos(move.from);
+	const to = locationToPos(move.to);
+	try {
+		const promotion = move.promotion ? move.promotion[1].toLowerCase() : "q";
+		chess.move({
+			from,
+			to,
+			promotion
+		}, { strict: false });
+		return chess;
+	} catch {
+		return null;
+	}
+};
+var isValidNextMove = (previous, current) => {
+	if (current.length > previous.length + 1) return false;
+	for (let i = 0; i < previous.length; i++) if (previous[i] !== current[i]) return false;
+	return true;
+};
+/**
+* Starting from a new game, assign piece IDs based on their starting position.
+* Then iterate through the history of the provided game and update the piece map.
+*/
+var createPieceMap = (chess) => {
+	const temp = new Chess();
+	let pieces = _createPieceMap(temp);
+	const history = chess.history({ verbose: true });
+	for (let i = 0; i < history.length; i++) {
+		const move = history[i];
+		temp.move(move);
+		pieces = _diffPieces(pieces, _createPieceMap(temp));
+		const test = /* @__PURE__ */ new Set();
+		Object.values(pieces).forEach((piece) => {
+			invariant(!test.has(piece.id), "Duplicate: " + piece.id, {
+				"~LogMeta": "~LogMeta",
+				F: __dxlog_file,
+				L: 255,
+				S: void 0,
+				A: ["!test.has(piece.id)", "'Duplicate: ' + piece.id"]
+			});
+			test.add(piece.id);
+		});
+	}
+	return pieces;
+};
+/**
+* Create a map of pieces from the board positions; assign each piece the ID of the current square.
+*/
+var _createPieceMap = (chess) => {
+	const pieces = {};
+	chess.board().flatMap((row) => row.forEach((record) => {
+		if (!record) return;
+		const { square, type, color } = record;
+		const pieceType = `${color.toUpperCase()}${type.toUpperCase()}`;
+		const location = posToLocation(square);
+		pieces[locationToString(location)] = {
+			id: `${square}-${pieceType}`,
+			type: pieceType,
+			side: color === "w" ? "white" : "black",
+			location
+		};
+	}));
+	return pieces;
+};
+/**
+* Preserve the original piece objects (and IDs).
+*/
+var _diffPieces = (before, after) => {
+	const difference = {
+		removed: {},
+		added: {}
+	};
+	Object.keys(before).forEach((square) => {
+		if (after[square]?.type !== before[square]?.type) difference.removed[square] = before[square];
+	});
+	Object.keys(after).forEach((square) => {
+		if (before[square]?.type !== after[square]?.type) difference.added[square] = after[square];
+		else after[square] = before[square];
+	});
+	for (const piece of Object.values(difference.added)) {
+		const previous = Object.values(difference.removed).find((p) => p.type === piece.type);
+		if (previous) piece.id = previous.id;
+	}
+	return after;
+};
+var createDate = (date = /* @__PURE__ */ new Date()) => date.toISOString().slice(0, 10).replace(/-/g, ".");
+//#endregion
+//#region src/components/Chessboard/Chessboard.tsx
+/** Fallback atom for when model is undefined. */
+var EMPTY_PIECES_ATOM = Atom$1.make({});
+/**
+* Chessboard layout.
+*/
+var CHESSBOARD_NAME = "Chessboard";
+var ChessboardComponent = forwardRef(({ classNames, orientation, showLabels, debug, rows = 8, cols = 8 }, forwardedRef) => {
+	const targetRef = useForwardedRef(forwardedRef);
+	const { width, height } = useResizeDetector({
+		targetRef,
+		refreshRate: 200
+	});
+	const { model, promoting, onPromotion } = useGameboardContext(CHESSBOARD_NAME);
+	const pieces = useAtomValue(model?.pieces ?? EMPTY_PIECES_ATOM);
+	const squares = useMemo(() => {
+		return Array.from({ length: rows }, (_, i) => orientation === "black" ? i : rows - 1 - i).flatMap((row) => Array.from({ length: cols }).map((_, col) => [row, col]));
+	}, [
+		orientation,
+		rows,
+		cols
+	]);
+	const layout = useMemo(() => {
+		return squares.map((location) => {
+			return /* @__PURE__ */ jsx("div", { "data-location": locationToString(location) }, locationToString(location));
+		});
+	}, [squares]);
+	const [grid, setGrid] = useState({});
+	const gridRef = useRef(null);
+	useEffect(() => {
+		setGrid(squares.reduce((acc, location) => {
+			const square = getSquareLocation(gridRef.current, location);
+			const bounds = getRelativeBounds(gridRef.current, square);
+			return {
+				...acc,
+				[locationToString(location)]: bounds
+			};
+		}, {}));
+	}, [
+		squares,
+		width,
+		height
+	]);
+	const positions = useMemo(() => {
+		if (!gridRef.current) return [];
+		return Object.values(pieces).map((piece) => {
+			if (piece.id === promoting?.id) return null;
+			return {
+				piece,
+				bounds: grid[locationToString(piece.location)]
+			};
+		}).filter(isNonNullable);
+	}, [
+		grid,
+		pieces,
+		promoting
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: targetRef,
+		tabIndex: 0,
+		className: mx("dx-expander relative outline-hidden", classNames),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: gridRef,
+				className: "grid grid-rows-8 grid-cols-8 aspect-square select-none",
+				children: layout
+			}),
+			/* @__PURE__ */ jsx("div", { children: squares.map((location) => /* @__PURE__ */ jsx(Gameboard.Square, {
+				location,
+				label: showLabels ? locationToPos(location) : void 0,
+				bounds: grid[locationToString(location)],
+				classNames: getSquareColor(location)
+			}, locationToString(location))) }),
+			/* @__PURE__ */ jsx("div", {
+				className: mx(promoting && "opacity-50"),
+				children: positions.map(({ bounds, piece }) => /* @__PURE__ */ jsx(Gameboard.Piece, {
+					piece,
+					bounds,
+					label: debug ? piece.id : void 0,
+					orientation,
+					Component: ChessPieces[piece.type]
+				}, piece.id))
+			}),
+			promoting && /* @__PURE__ */ jsx(PromotionSelector, {
+				grid,
+				piece: promoting,
+				onSelect: (piece) => {
+					onPromotion({
+						from: Object.values(pieces).find((p) => p.id === promoting.id).location,
+						to: piece.location,
+						piece: promoting.type,
+						promotion: piece.type
+					});
+				}
+			})
+		]
+	});
+});
+ChessboardComponent.displayName = CHESSBOARD_NAME;
+var Chessboard = memo(ChessboardComponent);
+var PromotionSelector = ({ grid, piece, onSelect }) => {
+	const positions = [
+		"Q",
+		"N",
+		"R",
+		"B"
+	].map((pieceType, i) => {
+		const location = [piece.location[0] + (piece.location[0] === 0 ? i : -i), piece.location[1]];
+		return {
+			piece: {
+				id: `promotion-${pieceType}`,
+				type: (piece.side === "black" ? "B" : "W") + pieceType,
+				side: piece.side,
+				location
+			},
+			bounds: grid[locationToString(location)]
+		};
+	});
+	const handleSelect = (selected) => {
+		onSelect({
+			...piece,
+			type: selected.type
+		});
+	};
+	return /* @__PURE__ */ jsx(Fragment, { children: positions.map(({ piece, bounds }) => /* @__PURE__ */ jsx(Gameboard.Piece, {
+		classNames: mx("border-2 border-neutral-700 rounded-full", boardStyles.promotion),
+		piece,
+		bounds,
+		Component: ChessPieces[piece.type],
+		onClick: () => handleSelect(piece)
+	}, piece.id)) });
+};
+var getSquareLocation = (container, location) => {
+	return container.querySelector(`[data-location="${locationToString(location)}"]`);
+};
+//#endregion
+export { ChessModel, ChessPieces, Chessboard, Gameboard, boardStyles, createChess, createPieceMap, getRawPgn, getRelativeBounds, getSquareColor, isEqualLocation, isLocation, isPiece, locationToPos, locationToString, posToLocation, stringToLocation, useGameboardContext };
+
+//# sourceMappingURL=index.mjs.map