@dxos/react-ui-gameboard 0.8.2-main.fbd8ed0 → 0.8.2-staging.4d6ad0f

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -52,17 +52,21 @@ __export(node_exports, {
52
52
  module.exports = __toCommonJS(node_exports);
53
53
  var import_react = require("react");
54
54
  var import_debug = require("@dxos/debug");
55
+ var import_tracking = require("@preact-signals/safe-react/tracking");
55
56
  var import_adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
56
57
  var import_react2 = __toESM(require("react"));
57
58
  var import_log = require("@dxos/log");
58
59
  var import_react_ui_theme = require("@dxos/react-ui-theme");
60
+ var import_tracking2 = require("@preact-signals/safe-react/tracking");
59
61
  var import_react3 = __toESM(require("react"));
60
62
  var import_react_ui_theme2 = require("@dxos/react-ui-theme");
63
+ var import_tracking3 = require("@preact-signals/safe-react/tracking");
61
64
  var import_adapter2 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
62
65
  var import_react4 = __toESM(require("react"));
63
66
  var import_invariant = require("@dxos/invariant");
64
67
  var import_log2 = require("@dxos/log");
65
68
  var import_react_ui_theme3 = require("@dxos/react-ui-theme");
69
+ var import_tracking4 = require("@preact-signals/safe-react/tracking");
66
70
  var import_adapter3 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
67
71
  var import_center_under_pointer = require("@atlaskit/pragmatic-drag-and-drop/element/center-under-pointer");
68
72
  var import_set_custom_native_drag_preview = require("@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview");
@@ -75,18 +79,31 @@ var import_react_ui_theme4 = require("@dxos/react-ui-theme");
75
79
  var import_signals_core = require("@preact/signals-core");
76
80
  var import_chess = require("chess.js");
77
81
  var import_log4 = require("@dxos/log");
82
+ var import_tracking5 = require("@preact-signals/safe-react/tracking");
78
83
  var React5 = __toESM(require("react"));
84
+ var import_tracking6 = require("@preact-signals/safe-react/tracking");
79
85
  var React6 = __toESM(require("react"));
86
+ var import_tracking7 = require("@preact-signals/safe-react/tracking");
80
87
  var React7 = __toESM(require("react"));
88
+ var import_tracking8 = require("@preact-signals/safe-react/tracking");
81
89
  var React8 = __toESM(require("react"));
90
+ var import_tracking9 = require("@preact-signals/safe-react/tracking");
82
91
  var React9 = __toESM(require("react"));
92
+ var import_tracking10 = require("@preact-signals/safe-react/tracking");
83
93
  var React10 = __toESM(require("react"));
94
+ var import_tracking11 = require("@preact-signals/safe-react/tracking");
84
95
  var React11 = __toESM(require("react"));
96
+ var import_tracking12 = require("@preact-signals/safe-react/tracking");
85
97
  var React12 = __toESM(require("react"));
98
+ var import_tracking13 = require("@preact-signals/safe-react/tracking");
86
99
  var React13 = __toESM(require("react"));
100
+ var import_tracking14 = require("@preact-signals/safe-react/tracking");
87
101
  var React14 = __toESM(require("react"));
102
+ var import_tracking15 = require("@preact-signals/safe-react/tracking");
88
103
  var React15 = __toESM(require("react"));
104
+ var import_tracking16 = require("@preact-signals/safe-react/tracking");
89
105
  var React16 = __toESM(require("react"));
106
+ var import_tracking17 = require("@preact-signals/safe-react/tracking");
90
107
  var import_react6 = __toESM(require("react"));
91
108
  var import_react_resize_detector = require("react-resize-detector");
92
109
  var import_react_ui2 = require("@dxos/react-ui");
@@ -117,94 +134,104 @@ var getRelativeBounds = (container, element) => {
117
134
  };
118
135
  };
119
136
  var Container = /* @__PURE__ */ (0, import_react3.forwardRef)(({ children, classNames, style }, forwardedRef) => {
120
- return /* @__PURE__ */ import_react3.default.createElement("div", {
121
- ref: forwardedRef,
122
- style,
123
- className: "flex w-full h-full justify-center overflow-hidden"
124
- }, /* @__PURE__ */ import_react3.default.createElement("div", {
125
- className: (0, import_react_ui_theme2.mx)("max-w-full max-h-full content-center", classNames)
126
- }, children));
137
+ var _effect = (0, import_tracking2.useSignals)();
138
+ try {
139
+ return /* @__PURE__ */ import_react3.default.createElement("div", {
140
+ ref: forwardedRef,
141
+ style,
142
+ className: "flex w-full h-full justify-center overflow-hidden"
143
+ }, /* @__PURE__ */ import_react3.default.createElement("div", {
144
+ className: (0, import_react_ui_theme2.mx)("max-w-full max-h-full content-center", classNames)
145
+ }, children));
146
+ } finally {
147
+ _effect.f();
148
+ }
127
149
  });
128
150
  var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-gameboard/src/Board/Board.tsx";
129
151
  var Root = ({ children, classNames, model, onDrop }) => {
130
- const [dragging, setDragging] = (0, import_react2.useState)(false);
131
- const [promoting, setPromoting] = (0, import_react2.useState)();
132
- const onPromotion = (0, import_react2.useCallback)((move) => {
133
- (0, import_log.log)("onPromotion", {
134
- move
135
- }, {
136
- F: __dxlog_file,
137
- L: 32,
138
- S: void 0,
139
- C: (f, a) => f(...a)
140
- });
141
- setPromoting(void 0);
142
- onDrop?.(move);
143
- }, []);
144
- (0, import_react2.useEffect)(() => {
145
- if (!model) {
146
- return;
147
- }
148
- return (0, import_adapter.monitorForElements)({
149
- onDragStart: ({ source }) => {
150
- (0, import_log.log)("onDragStart", {
151
- source
152
- }, {
153
- F: __dxlog_file,
154
- L: 45,
155
- S: void 0,
156
- C: (f, a) => f(...a)
157
- });
158
- setDragging(true);
159
- },
160
- onDrop: ({ source, location }) => {
161
- (0, import_log.log)("onDrop", {
162
- source,
163
- location
164
- }, {
165
- F: __dxlog_file,
166
- L: 49,
167
- S: void 0,
168
- C: (f, a) => f(...a)
169
- });
170
- const target = location.current.dropTargets[0];
171
- if (!target) {
172
- return;
173
- }
174
- const targetLocation = target.data.location;
175
- const piece = source.data.piece;
176
- if (!isLocation(targetLocation) || !isPiece(piece)) {
177
- return;
178
- }
179
- const move = {
180
- from: piece.location,
181
- to: targetLocation,
182
- piece: piece.type
183
- };
184
- if (model.canPromote?.(move)) {
185
- setPromoting({
186
- ...piece,
187
- location: targetLocation
152
+ var _effect = (0, import_tracking.useSignals)();
153
+ try {
154
+ const [dragging, setDragging] = (0, import_react2.useState)(false);
155
+ const [promoting, setPromoting] = (0, import_react2.useState)();
156
+ const onPromotion = (0, import_react2.useCallback)((move) => {
157
+ (0, import_log.log)("onPromotion", {
158
+ move
159
+ }, {
160
+ F: __dxlog_file,
161
+ L: 32,
162
+ S: void 0,
163
+ C: (f, a) => f(...a)
164
+ });
165
+ setPromoting(void 0);
166
+ onDrop?.(move);
167
+ }, []);
168
+ (0, import_react2.useEffect)(() => {
169
+ if (!model) {
170
+ return;
171
+ }
172
+ return (0, import_adapter.monitorForElements)({
173
+ onDragStart: ({ source }) => {
174
+ (0, import_log.log)("onDragStart", {
175
+ source
176
+ }, {
177
+ F: __dxlog_file,
178
+ L: 45,
179
+ S: void 0,
180
+ C: (f, a) => f(...a)
181
+ });
182
+ setDragging(true);
183
+ },
184
+ onDrop: ({ source, location }) => {
185
+ (0, import_log.log)("onDrop", {
186
+ source,
187
+ location
188
+ }, {
189
+ F: __dxlog_file,
190
+ L: 49,
191
+ S: void 0,
192
+ C: (f, a) => f(...a)
188
193
  });
189
- } else {
190
- onDrop?.(move);
194
+ const target = location.current.dropTargets[0];
195
+ if (!target) {
196
+ return;
197
+ }
198
+ const targetLocation = target.data.location;
199
+ const piece = source.data.piece;
200
+ if (!isLocation(targetLocation) || !isPiece(piece)) {
201
+ return;
202
+ }
203
+ const move = {
204
+ from: piece.location,
205
+ to: targetLocation,
206
+ piece: piece.type
207
+ };
208
+ if (model.canPromote?.(move)) {
209
+ setPromoting({
210
+ ...piece,
211
+ location: targetLocation
212
+ });
213
+ } else {
214
+ onDrop?.(move);
215
+ }
216
+ setDragging(false);
191
217
  }
192
- setDragging(false);
218
+ });
219
+ }, [
220
+ model
221
+ ]);
222
+ return /* @__PURE__ */ import_react2.default.createElement(BoardContext.Provider, {
223
+ value: {
224
+ model,
225
+ dragging,
226
+ promoting,
227
+ onPromotion
193
228
  }
194
- });
195
- }, [
196
- model
197
- ]);
198
- return /* @__PURE__ */ import_react2.default.createElement(BoardContext.Provider, {
199
- value: {
200
- model,
201
- dragging,
202
- promoting,
203
- onPromotion
204
- }
205
- }, /* @__PURE__ */ import_react2.default.createElement(Container, {
206
- classNames: (0, import_react_ui_theme.mx)("aspect-square", classNames)
207
- }, children));
229
+ }, /* @__PURE__ */ import_react2.default.createElement(Container, {
230
+ classNames: (0, import_react_ui_theme.mx)("aspect-square", classNames)
231
+ }, children));
232
+ } finally {
233
+ _effect.f();
234
+ }
208
235
  };
209
236
  Root.displayName = "Board.Root";
210
237
  var Board = {
@@ -212,202 +239,212 @@ var Board = {
212
239
  };
213
240
  var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-gameboard/src/Board/Square.tsx";
214
241
  var Square = /* @__PURE__ */ (0, import_react4.memo)(({ location, bounds, label, classNames }) => {
215
- const ref = (0, import_react4.useRef)(null);
216
- const [state, setState] = (0, import_react4.useState)("idle");
217
- const { model } = useBoardContext();
218
- (0, import_react4.useEffect)(() => {
219
- const el = ref.current;
220
- (0, import_invariant.invariant)(el, void 0, {
221
- F: __dxlog_file2,
222
- L: 32,
223
- S: void 0,
224
- A: [
225
- "el",
226
- ""
227
- ]
228
- });
229
- return (0, import_adapter2.dropTargetForElements)({
230
- element: el,
231
- getData: () => ({
232
- location
233
- }),
234
- canDrop: ({ source }) => {
235
- (0, import_log2.log)("canDrop", {
236
- source: source.data
237
- }, {
238
- F: __dxlog_file2,
239
- L: 38,
240
- S: void 0,
241
- C: (f, a) => f(...a)
242
- });
243
- return true;
244
- },
245
- onDragEnter: ({ source }) => {
246
- (0, import_log2.log)("onDragEnter", {
247
- source: source.data
248
- }, {
249
- F: __dxlog_file2,
250
- L: 42,
251
- S: void 0,
252
- C: (f, a) => f(...a)
253
- });
254
- const piece = source.data.piece;
255
- if (!isPiece(piece)) {
256
- return;
257
- }
258
- if (model?.isValidMove({
259
- from: piece.location,
260
- to: location,
261
- piece: piece.type
262
- })) {
263
- setState("validMove");
264
- } else {
265
- setState("invalidMove");
266
- }
267
- },
268
- onDragLeave: () => setState("idle"),
269
- onDrop: () => setState("idle")
270
- });
271
- }, [
272
- model,
273
- location
274
- ]);
275
- return /* @__PURE__ */ import_react4.default.createElement("div", {
276
- ref,
277
- style: bounds,
278
- className: (0, import_react_ui_theme3.mx)("absolute flex justify-center items-center border-2 box-border select-none", classNames, state === "validMove" ? "border-neutral-800" : "border-transparent")
279
- }, label && /* @__PURE__ */ import_react4.default.createElement("div", {
280
- className: (0, import_react_ui_theme3.mx)("absolute bottom-1 left-1 text-xs text-neutral-500")
281
- }, label));
242
+ var _effect = (0, import_tracking3.useSignals)();
243
+ try {
244
+ const ref = (0, import_react4.useRef)(null);
245
+ const [state, setState] = (0, import_react4.useState)("idle");
246
+ const { model } = useBoardContext();
247
+ (0, import_react4.useEffect)(() => {
248
+ const el = ref.current;
249
+ (0, import_invariant.invariant)(el, void 0, {
250
+ F: __dxlog_file2,
251
+ L: 32,
252
+ S: void 0,
253
+ A: [
254
+ "el",
255
+ ""
256
+ ]
257
+ });
258
+ return (0, import_adapter2.dropTargetForElements)({
259
+ element: el,
260
+ getData: () => ({
261
+ location
262
+ }),
263
+ canDrop: ({ source }) => {
264
+ (0, import_log2.log)("canDrop", {
265
+ source: source.data
266
+ }, {
267
+ F: __dxlog_file2,
268
+ L: 38,
269
+ S: void 0,
270
+ C: (f, a) => f(...a)
271
+ });
272
+ return true;
273
+ },
274
+ onDragEnter: ({ source }) => {
275
+ (0, import_log2.log)("onDragEnter", {
276
+ source: source.data
277
+ }, {
278
+ F: __dxlog_file2,
279
+ L: 42,
280
+ S: void 0,
281
+ C: (f, a) => f(...a)
282
+ });
283
+ const piece = source.data.piece;
284
+ if (!isPiece(piece)) {
285
+ return;
286
+ }
287
+ if (model?.isValidMove({
288
+ from: piece.location,
289
+ to: location,
290
+ piece: piece.type
291
+ })) {
292
+ setState("validMove");
293
+ } else {
294
+ setState("invalidMove");
295
+ }
296
+ },
297
+ onDragLeave: () => setState("idle"),
298
+ onDrop: () => setState("idle")
299
+ });
300
+ }, [
301
+ model,
302
+ location
303
+ ]);
304
+ return /* @__PURE__ */ import_react4.default.createElement("div", {
305
+ ref,
306
+ style: bounds,
307
+ className: (0, import_react_ui_theme3.mx)("absolute flex justify-center items-center border-2 box-border select-none", classNames, state === "validMove" ? "border-neutral-800" : "border-transparent")
308
+ }, label && /* @__PURE__ */ import_react4.default.createElement("div", {
309
+ className: (0, import_react_ui_theme3.mx)("absolute bottom-1 left-1 text-xs text-neutral-500")
310
+ }, label));
311
+ } finally {
312
+ _effect.f();
313
+ }
282
314
  });
283
315
  Square.displayName = "Square";
284
316
  var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-gameboard/src/Board/Piece.tsx";
285
317
  var Piece = /* @__PURE__ */ (0, import_react5.memo)(({ classNames, piece, orientation, bounds, label, Component }) => {
286
- (0, import_react_ui.useTrackProps)({
287
- classNames,
288
- piece,
289
- orientation,
290
- bounds,
291
- label,
292
- Component
293
- }, Piece.displayName, false);
294
- const { model } = useBoardContext();
295
- const { dragging: isDragging, promoting } = useBoardContext();
296
- const promotingRef = (0, import_react_ui.useDynamicRef)(promoting);
297
- const [dragging, setDragging] = (0, import_react5.useState)(false);
298
- const [preview, setPreview] = (0, import_react5.useState)();
299
- const [current, setCurrent] = (0, import_react5.useState)({});
300
- const ref = (0, import_react5.useRef)(null);
301
- (0, import_react5.useEffect)(() => {
302
- const el = ref.current;
303
- (0, import_invariant2.invariant)(el, void 0, {
304
- F: __dxlog_file3,
305
- L: 44,
306
- S: void 0,
307
- A: [
308
- "el",
309
- ""
310
- ]
311
- });
312
- return (0, import_adapter3.draggable)({
313
- element: el,
314
- getInitialData: () => ({
315
- piece
316
- }),
317
- onGenerateDragPreview: ({ nativeSetDragImage, location, source }) => {
318
- (0, import_log3.log)("onGenerateDragPreview", {
319
- source: source.data
320
- }, {
321
- F: __dxlog_file3,
322
- L: 50,
323
- S: void 0,
324
- C: (f, a) => f(...a)
325
- });
326
- (0, import_set_custom_native_drag_preview.setCustomNativeDragPreview)({
327
- getOffset: import_center_under_pointer.centerUnderPointer,
328
- // getOffset: preserveOffsetOnSource({
329
- // element: source.element,
330
- // input: location.current.input,
331
- // }),
332
- render: ({ container }) => {
333
- setPreview(container);
334
- const { width, height } = el.getBoundingClientRect();
335
- container.style.width = width + "px";
336
- container.style.height = height + "px";
337
- return () => {
338
- setPreview(void 0);
339
- };
340
- },
341
- nativeSetDragImage
342
- });
343
- },
344
- canDrag: () => !promotingRef.current && model?.turn === piece.side,
345
- onDragStart: () => setDragging(true),
346
- onDrop: ({ location: { current: current2 } }) => {
347
- const location = current2.dropTargets[0].data.location;
348
- if (isLocation(location)) {
349
- setCurrent((current3) => ({
350
- ...current3,
351
- location
352
- }));
353
- }
354
- setDragging(false);
355
- }
356
- });
357
- }, [
358
- model,
359
- piece
360
- ]);
361
- (0, import_react5.useEffect)(() => {
362
- requestAnimationFrame(() => {
363
- if (!ref.current || !bounds) {
364
- return;
365
- }
366
- if (!current.location || !isEqualLocation(current.location, piece.location)) {
367
- ref.current.style.transition = "top 400ms ease-out, left 400ms ease-out";
368
- ref.current.style.top = bounds.top + "px";
369
- ref.current.style.left = bounds.left + "px";
370
- setCurrent({
371
- location: piece.location,
372
- bounds
373
- });
374
- } else if (current.bounds !== bounds) {
375
- ref.current.style.transition = "none";
376
- ref.current.style.top = bounds.top + "px";
377
- ref.current.style.left = bounds.left + "px";
378
- setCurrent({
379
- location: piece.location,
380
- bounds
381
- });
382
- }
383
- });
384
- }, [
385
- current,
386
- piece.location,
387
- bounds
388
- ]);
389
- return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("div", {
390
- ref,
391
- style: {
392
- width: bounds?.width,
393
- height: bounds?.height
394
- },
395
- className: (0, import_react_ui_theme4.mx)(
396
- "absolute",
318
+ var _effect = (0, import_tracking4.useSignals)();
319
+ try {
320
+ (0, import_react_ui.useTrackProps)({
397
321
  classNames,
398
- // orientation === 'black' && '_rotate-180',
399
- dragging && "opacity-20",
400
- isDragging && "pointer-events-none"
401
- )
402
- }, /* @__PURE__ */ import_react5.default.createElement(Component, {
403
- className: "grow"
404
- }), label && /* @__PURE__ */ import_react5.default.createElement("div", {
405
- className: "absolute inset-1 text-xs text-black"
406
- }, label)), preview && /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react5.default.createElement("div", {
407
- className: (0, import_react_ui_theme4.mx)(classNames)
408
- }, /* @__PURE__ */ import_react5.default.createElement(Component, {
409
- className: "grow"
410
- })), preview));
322
+ piece,
323
+ orientation,
324
+ bounds,
325
+ label,
326
+ Component
327
+ }, Piece.displayName, false);
328
+ const { model } = useBoardContext();
329
+ const { dragging: isDragging, promoting } = useBoardContext();
330
+ const promotingRef = (0, import_react_ui.useDynamicRef)(promoting);
331
+ const [dragging, setDragging] = (0, import_react5.useState)(false);
332
+ const [preview, setPreview] = (0, import_react5.useState)();
333
+ const [current, setCurrent] = (0, import_react5.useState)({});
334
+ const ref = (0, import_react5.useRef)(null);
335
+ (0, import_react5.useEffect)(() => {
336
+ const el = ref.current;
337
+ (0, import_invariant2.invariant)(el, void 0, {
338
+ F: __dxlog_file3,
339
+ L: 44,
340
+ S: void 0,
341
+ A: [
342
+ "el",
343
+ ""
344
+ ]
345
+ });
346
+ return (0, import_adapter3.draggable)({
347
+ element: el,
348
+ getInitialData: () => ({
349
+ piece
350
+ }),
351
+ onGenerateDragPreview: ({ nativeSetDragImage, location, source }) => {
352
+ (0, import_log3.log)("onGenerateDragPreview", {
353
+ source: source.data
354
+ }, {
355
+ F: __dxlog_file3,
356
+ L: 50,
357
+ S: void 0,
358
+ C: (f, a) => f(...a)
359
+ });
360
+ (0, import_set_custom_native_drag_preview.setCustomNativeDragPreview)({
361
+ getOffset: import_center_under_pointer.centerUnderPointer,
362
+ // getOffset: preserveOffsetOnSource({
363
+ // element: source.element,
364
+ // input: location.current.input,
365
+ // }),
366
+ render: ({ container }) => {
367
+ setPreview(container);
368
+ const { width, height } = el.getBoundingClientRect();
369
+ container.style.width = width + "px";
370
+ container.style.height = height + "px";
371
+ return () => {
372
+ setPreview(void 0);
373
+ };
374
+ },
375
+ nativeSetDragImage
376
+ });
377
+ },
378
+ canDrag: () => !promotingRef.current && model?.turn === piece.side,
379
+ onDragStart: () => setDragging(true),
380
+ onDrop: ({ location: { current: current2 } }) => {
381
+ const location = current2.dropTargets[0].data.location;
382
+ if (isLocation(location)) {
383
+ setCurrent((current3) => ({
384
+ ...current3,
385
+ location
386
+ }));
387
+ }
388
+ setDragging(false);
389
+ }
390
+ });
391
+ }, [
392
+ model,
393
+ piece
394
+ ]);
395
+ (0, import_react5.useEffect)(() => {
396
+ requestAnimationFrame(() => {
397
+ if (!ref.current || !bounds) {
398
+ return;
399
+ }
400
+ if (!current.location || !isEqualLocation(current.location, piece.location)) {
401
+ ref.current.style.transition = "top 400ms ease-out, left 400ms ease-out";
402
+ ref.current.style.top = bounds.top + "px";
403
+ ref.current.style.left = bounds.left + "px";
404
+ setCurrent({
405
+ location: piece.location,
406
+ bounds
407
+ });
408
+ } else if (current.bounds !== bounds) {
409
+ ref.current.style.transition = "none";
410
+ ref.current.style.top = bounds.top + "px";
411
+ ref.current.style.left = bounds.left + "px";
412
+ setCurrent({
413
+ location: piece.location,
414
+ bounds
415
+ });
416
+ }
417
+ });
418
+ }, [
419
+ current,
420
+ piece.location,
421
+ bounds
422
+ ]);
423
+ return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("div", {
424
+ ref,
425
+ style: {
426
+ width: bounds?.width,
427
+ height: bounds?.height
428
+ },
429
+ className: (0, import_react_ui_theme4.mx)(
430
+ "absolute",
431
+ classNames,
432
+ // orientation === 'black' && '_rotate-180',
433
+ dragging && "opacity-20",
434
+ isDragging && "pointer-events-none"
435
+ )
436
+ }, /* @__PURE__ */ import_react5.default.createElement(Component, {
437
+ className: "grow"
438
+ }), label && /* @__PURE__ */ import_react5.default.createElement("div", {
439
+ className: "absolute inset-1 text-xs text-black"
440
+ }, label)), preview && /* @__PURE__ */ (0, import_react_dom.createPortal)(/* @__PURE__ */ import_react5.default.createElement("div", {
441
+ className: (0, import_react_ui_theme4.mx)(classNames)
442
+ }, /* @__PURE__ */ import_react5.default.createElement(Component, {
443
+ className: "grow"
444
+ })), preview));
445
+ } finally {
446
+ _effect.f();
447
+ }
411
448
  });
412
449
  Piece.displayName = "Piece";
413
450
  var alpha_exports = {};
@@ -425,146 +462,230 @@ __export2(alpha_exports, {
425
462
  WQ: () => wQ_default,
426
463
  WR: () => wR_default
427
464
  });
428
- var SvgBB = (props) => /* @__PURE__ */ React5.createElement("svg", {
429
- xmlns: "http://www.w3.org/2000/svg",
430
- viewBox: "0 0 2048 2048",
431
- ...props
432
- }, /* @__PURE__ */ React5.createElement("path", {
433
- fill: "#f9f9f9",
434
- d: "M732 1290 628 993l386-417 421 375-132 380 49 152-658-9z"
435
- }), /* @__PURE__ */ React5.createElement("path", {
436
- fill: "#101010",
437
- 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"
438
- }));
465
+ var SvgBB = (props) => {
466
+ var _effect = (0, import_tracking5.useSignals)();
467
+ try {
468
+ return /* @__PURE__ */ React5.createElement("svg", {
469
+ xmlns: "http://www.w3.org/2000/svg",
470
+ viewBox: "0 0 2048 2048",
471
+ ...props
472
+ }, /* @__PURE__ */ React5.createElement("path", {
473
+ fill: "#f9f9f9",
474
+ d: "M732 1290 628 993l386-417 421 375-132 380 49 152-658-9z"
475
+ }), /* @__PURE__ */ React5.createElement("path", {
476
+ fill: "#101010",
477
+ 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"
478
+ }));
479
+ } finally {
480
+ _effect.f();
481
+ }
482
+ };
439
483
  var bB_default = SvgBB;
440
- var SvgBK = (props) => /* @__PURE__ */ React6.createElement("svg", {
441
- xmlns: "http://www.w3.org/2000/svg",
442
- viewBox: "0 0 2048 2048",
443
- ...props
444
- }, /* @__PURE__ */ React6.createElement("path", {
445
- fill: "#f9f9f9",
446
- 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"
447
- }), /* @__PURE__ */ React6.createElement("path", {
448
- fill: "#101010",
449
- 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"
450
- }));
484
+ var SvgBK = (props) => {
485
+ var _effect = (0, import_tracking6.useSignals)();
486
+ try {
487
+ return /* @__PURE__ */ React6.createElement("svg", {
488
+ xmlns: "http://www.w3.org/2000/svg",
489
+ viewBox: "0 0 2048 2048",
490
+ ...props
491
+ }, /* @__PURE__ */ React6.createElement("path", {
492
+ fill: "#f9f9f9",
493
+ 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"
494
+ }), /* @__PURE__ */ React6.createElement("path", {
495
+ fill: "#101010",
496
+ 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"
497
+ }));
498
+ } finally {
499
+ _effect.f();
500
+ }
501
+ };
451
502
  var bK_default = SvgBK;
452
- var SvgBN = (props) => /* @__PURE__ */ React7.createElement("svg", {
453
- xmlns: "http://www.w3.org/2000/svg",
454
- viewBox: "0 0 2048 2048",
455
- ...props
456
- }, /* @__PURE__ */ React7.createElement("path", {
457
- fill: "#f9f9f9",
458
- 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"
459
- }), /* @__PURE__ */ React7.createElement("path", {
460
- fill: "#101010",
461
- 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"
462
- }));
503
+ var SvgBN = (props) => {
504
+ var _effect = (0, import_tracking7.useSignals)();
505
+ try {
506
+ return /* @__PURE__ */ React7.createElement("svg", {
507
+ xmlns: "http://www.w3.org/2000/svg",
508
+ viewBox: "0 0 2048 2048",
509
+ ...props
510
+ }, /* @__PURE__ */ React7.createElement("path", {
511
+ fill: "#f9f9f9",
512
+ 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"
513
+ }), /* @__PURE__ */ React7.createElement("path", {
514
+ fill: "#101010",
515
+ 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"
516
+ }));
517
+ } finally {
518
+ _effect.f();
519
+ }
520
+ };
463
521
  var bN_default = SvgBN;
464
- var SvgBP = (props) => /* @__PURE__ */ React8.createElement("svg", {
465
- xmlns: "http://www.w3.org/2000/svg",
466
- viewBox: "0 0 2048 2048",
467
- ...props
468
- }, /* @__PURE__ */ React8.createElement("path", {
469
- fill: "#101010",
470
- 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"
471
- }));
522
+ var SvgBP = (props) => {
523
+ var _effect = (0, import_tracking8.useSignals)();
524
+ try {
525
+ return /* @__PURE__ */ React8.createElement("svg", {
526
+ xmlns: "http://www.w3.org/2000/svg",
527
+ viewBox: "0 0 2048 2048",
528
+ ...props
529
+ }, /* @__PURE__ */ React8.createElement("path", {
530
+ fill: "#101010",
531
+ 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"
532
+ }));
533
+ } finally {
534
+ _effect.f();
535
+ }
536
+ };
472
537
  var bP_default = SvgBP;
473
- var SvgBQ = (props) => /* @__PURE__ */ React9.createElement("svg", {
474
- xmlns: "http://www.w3.org/2000/svg",
475
- viewBox: "0 0 2048 2048",
476
- ...props
477
- }, /* @__PURE__ */ React9.createElement("path", {
478
- fill: "#f9f9f9",
479
- d: "m520 1801.8 41.5-448.7 474-128.9 458 133.5 34.4 446.4z"
480
- }), /* @__PURE__ */ React9.createElement("path", {
481
- fill: "#101010",
482
- 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"
483
- }));
538
+ var SvgBQ = (props) => {
539
+ var _effect = (0, import_tracking9.useSignals)();
540
+ try {
541
+ return /* @__PURE__ */ React9.createElement("svg", {
542
+ xmlns: "http://www.w3.org/2000/svg",
543
+ viewBox: "0 0 2048 2048",
544
+ ...props
545
+ }, /* @__PURE__ */ React9.createElement("path", {
546
+ fill: "#f9f9f9",
547
+ d: "m520 1801.8 41.5-448.7 474-128.9 458 133.5 34.4 446.4z"
548
+ }), /* @__PURE__ */ React9.createElement("path", {
549
+ fill: "#101010",
550
+ 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"
551
+ }));
552
+ } finally {
553
+ _effect.f();
554
+ }
555
+ };
484
556
  var bQ_default = SvgBQ;
485
- var SvgBR = (props) => /* @__PURE__ */ React10.createElement("svg", {
486
- xmlns: "http://www.w3.org/2000/svg",
487
- viewBox: "0 0 2048 2048",
488
- ...props
489
- }, /* @__PURE__ */ React10.createElement("path", {
490
- fill: "#f9f9f9",
491
- d: "m674 732-76 807 851 14-75-833z"
492
- }), /* @__PURE__ */ React10.createElement("path", {
493
- fill: "#101010",
494
- 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"
495
- }));
557
+ var SvgBR = (props) => {
558
+ var _effect = (0, import_tracking10.useSignals)();
559
+ try {
560
+ return /* @__PURE__ */ React10.createElement("svg", {
561
+ xmlns: "http://www.w3.org/2000/svg",
562
+ viewBox: "0 0 2048 2048",
563
+ ...props
564
+ }, /* @__PURE__ */ React10.createElement("path", {
565
+ fill: "#f9f9f9",
566
+ d: "m674 732-76 807 851 14-75-833z"
567
+ }), /* @__PURE__ */ React10.createElement("path", {
568
+ fill: "#101010",
569
+ 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"
570
+ }));
571
+ } finally {
572
+ _effect.f();
573
+ }
574
+ };
496
575
  var bR_default = SvgBR;
497
- var SvgWB = (props) => /* @__PURE__ */ React11.createElement("svg", {
498
- xmlns: "http://www.w3.org/2000/svg",
499
- viewBox: "0 0 2048 2048",
500
- ...props
501
- }, /* @__PURE__ */ React11.createElement("path", {
502
- fill: "#f9f9f9",
503
- 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"
504
- }), /* @__PURE__ */ React11.createElement("path", {
505
- fill: "#101010",
506
- 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"
507
- }));
576
+ var SvgWB = (props) => {
577
+ var _effect = (0, import_tracking11.useSignals)();
578
+ try {
579
+ return /* @__PURE__ */ React11.createElement("svg", {
580
+ xmlns: "http://www.w3.org/2000/svg",
581
+ viewBox: "0 0 2048 2048",
582
+ ...props
583
+ }, /* @__PURE__ */ React11.createElement("path", {
584
+ fill: "#f9f9f9",
585
+ 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"
586
+ }), /* @__PURE__ */ React11.createElement("path", {
587
+ fill: "#101010",
588
+ 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"
589
+ }));
590
+ } finally {
591
+ _effect.f();
592
+ }
593
+ };
508
594
  var wB_default = SvgWB;
509
- var SvgWK = (props) => /* @__PURE__ */ React12.createElement("svg", {
510
- xmlns: "http://www.w3.org/2000/svg",
511
- viewBox: "0 0 2048 2048",
512
- ...props
513
- }, /* @__PURE__ */ React12.createElement("path", {
514
- fill: "#f9f9f9",
515
- 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"
516
- }), /* @__PURE__ */ React12.createElement("path", {
517
- fill: "#101010",
518
- 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"
519
- }));
595
+ var SvgWK = (props) => {
596
+ var _effect = (0, import_tracking12.useSignals)();
597
+ try {
598
+ return /* @__PURE__ */ React12.createElement("svg", {
599
+ xmlns: "http://www.w3.org/2000/svg",
600
+ viewBox: "0 0 2048 2048",
601
+ ...props
602
+ }, /* @__PURE__ */ React12.createElement("path", {
603
+ fill: "#f9f9f9",
604
+ 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"
605
+ }), /* @__PURE__ */ React12.createElement("path", {
606
+ fill: "#101010",
607
+ 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"
608
+ }));
609
+ } finally {
610
+ _effect.f();
611
+ }
612
+ };
520
613
  var wK_default = SvgWK;
521
- var SvgWN = (props) => /* @__PURE__ */ React13.createElement("svg", {
522
- xmlns: "http://www.w3.org/2000/svg",
523
- viewBox: "0 0 2048 2048",
524
- ...props
525
- }, /* @__PURE__ */ React13.createElement("path", {
526
- fill: "#f9f9f9",
527
- 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"
528
- }), /* @__PURE__ */ React13.createElement("path", {
529
- fill: "#101010",
530
- 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"
531
- }));
614
+ var SvgWN = (props) => {
615
+ var _effect = (0, import_tracking13.useSignals)();
616
+ try {
617
+ return /* @__PURE__ */ React13.createElement("svg", {
618
+ xmlns: "http://www.w3.org/2000/svg",
619
+ viewBox: "0 0 2048 2048",
620
+ ...props
621
+ }, /* @__PURE__ */ React13.createElement("path", {
622
+ fill: "#f9f9f9",
623
+ 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"
624
+ }), /* @__PURE__ */ React13.createElement("path", {
625
+ fill: "#101010",
626
+ 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"
627
+ }));
628
+ } finally {
629
+ _effect.f();
630
+ }
631
+ };
532
632
  var wN_default = SvgWN;
533
- var SvgWP = (props) => /* @__PURE__ */ React14.createElement("svg", {
534
- xmlns: "http://www.w3.org/2000/svg",
535
- viewBox: "0 0 2048 2048",
536
- ...props
537
- }, /* @__PURE__ */ React14.createElement("path", {
538
- fill: "#f9f9f9",
539
- 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"
540
- }), /* @__PURE__ */ React14.createElement("path", {
541
- fill: "#101010",
542
- 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"
543
- }));
633
+ var SvgWP = (props) => {
634
+ var _effect = (0, import_tracking14.useSignals)();
635
+ try {
636
+ return /* @__PURE__ */ React14.createElement("svg", {
637
+ xmlns: "http://www.w3.org/2000/svg",
638
+ viewBox: "0 0 2048 2048",
639
+ ...props
640
+ }, /* @__PURE__ */ React14.createElement("path", {
641
+ fill: "#f9f9f9",
642
+ 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"
643
+ }), /* @__PURE__ */ React14.createElement("path", {
644
+ fill: "#101010",
645
+ 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"
646
+ }));
647
+ } finally {
648
+ _effect.f();
649
+ }
650
+ };
544
651
  var wP_default = SvgWP;
545
- var SvgWQ = (props) => /* @__PURE__ */ React15.createElement("svg", {
546
- xmlns: "http://www.w3.org/2000/svg",
547
- viewBox: "0 0 2048 2048",
548
- ...props
549
- }, /* @__PURE__ */ React15.createElement("path", {
550
- fill: "#f9f9f9",
551
- 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"
552
- }), /* @__PURE__ */ React15.createElement("path", {
553
- fill: "#101010",
554
- 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"
555
- }));
652
+ var SvgWQ = (props) => {
653
+ var _effect = (0, import_tracking15.useSignals)();
654
+ try {
655
+ return /* @__PURE__ */ React15.createElement("svg", {
656
+ xmlns: "http://www.w3.org/2000/svg",
657
+ viewBox: "0 0 2048 2048",
658
+ ...props
659
+ }, /* @__PURE__ */ React15.createElement("path", {
660
+ fill: "#f9f9f9",
661
+ 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"
662
+ }), /* @__PURE__ */ React15.createElement("path", {
663
+ fill: "#101010",
664
+ 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"
665
+ }));
666
+ } finally {
667
+ _effect.f();
668
+ }
669
+ };
556
670
  var wQ_default = SvgWQ;
557
- var SvgWR = (props) => /* @__PURE__ */ React16.createElement("svg", {
558
- xmlns: "http://www.w3.org/2000/svg",
559
- viewBox: "0 0 2048 2048",
560
- ...props
561
- }, /* @__PURE__ */ React16.createElement("path", {
562
- fill: "#f9f9f9",
563
- 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"
564
- }), /* @__PURE__ */ React16.createElement("path", {
565
- fill: "#101010",
566
- 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"
567
- }));
671
+ var SvgWR = (props) => {
672
+ var _effect = (0, import_tracking16.useSignals)();
673
+ try {
674
+ return /* @__PURE__ */ React16.createElement("svg", {
675
+ xmlns: "http://www.w3.org/2000/svg",
676
+ viewBox: "0 0 2048 2048",
677
+ ...props
678
+ }, /* @__PURE__ */ React16.createElement("path", {
679
+ fill: "#f9f9f9",
680
+ 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"
681
+ }), /* @__PURE__ */ React16.createElement("path", {
682
+ fill: "#101010",
683
+ 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"
684
+ }));
685
+ } finally {
686
+ _effect.f();
687
+ }
688
+ };
568
689
  var wR_default = SvgWR;
569
690
  var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-gameboard/src/Chessboard/chess.ts";
570
691
  var ChessPieces = alpha_exports;
@@ -738,149 +859,159 @@ var mapPieces = (before, after) => {
738
859
  return after;
739
860
  };
740
861
  var Chessboard = /* @__PURE__ */ (0, import_react6.memo)(({ orientation, showLabels, debug, rows = 8, cols = 8 }) => {
741
- (0, import_react_ui2.useTrackProps)({
742
- orientation,
743
- showLabels,
744
- debug
745
- }, Chessboard.displayName, false);
746
- const { ref: containerRef, width, height } = (0, import_react_resize_detector.useResizeDetector)({
747
- refreshRate: 200
748
- });
749
- const { model, promoting, onPromotion } = useBoardContext();
750
- const locations = (0, import_react6.useMemo)(() => {
751
- return Array.from({
752
- length: rows
753
- }, (_, i) => orientation === "black" ? i : rows - 1 - i).flatMap((row) => Array.from({
754
- length: cols
755
- }).map((_, col) => [
756
- row,
757
- col
758
- ]));
759
- }, [
760
- orientation,
761
- rows,
762
- cols
763
- ]);
764
- const layout = (0, import_react6.useMemo)(() => {
765
- return locations.map((location) => {
766
- return /* @__PURE__ */ import_react6.default.createElement("div", {
767
- key: locationToString(location),
768
- ["data-location"]: locationToString(location)
769
- });
862
+ var _effect = (0, import_tracking17.useSignals)();
863
+ try {
864
+ (0, import_react_ui2.useTrackProps)({
865
+ orientation,
866
+ showLabels,
867
+ debug
868
+ }, Chessboard.displayName, false);
869
+ const { ref: containerRef, width, height } = (0, import_react_resize_detector.useResizeDetector)({
870
+ refreshRate: 200
770
871
  });
771
- }, [
772
- locations
773
- ]);
774
- const [grid, setGrid] = (0, import_react6.useState)({});
775
- const gridRef = (0, import_react6.useRef)(null);
776
- (0, import_react6.useEffect)(() => {
777
- setGrid(locations.reduce((acc, location) => {
778
- const square = getSquareLocation(gridRef.current, location);
779
- const bounds = getRelativeBounds(gridRef.current, square);
780
- return {
781
- ...acc,
782
- [locationToString(location)]: bounds
783
- };
784
- }, {}));
785
- }, [
786
- locations,
787
- width,
788
- height
789
- ]);
790
- const positions = (0, import_react6.useMemo)(() => {
791
- if (!gridRef.current) {
792
- return [];
793
- }
794
- return Object.values(model?.pieces.value ?? {}).map((piece) => {
795
- if (piece.id === promoting?.id) {
796
- return null;
797
- }
798
- const bounds = grid[locationToString(piece.location)];
799
- return {
800
- piece,
801
- bounds
802
- };
803
- }).filter(import_util.isNotFalsy);
804
- }, [
805
- grid,
806
- model?.pieces.value,
807
- promoting
808
- ]);
809
- return /* @__PURE__ */ import_react6.default.createElement("div", {
810
- ref: containerRef,
811
- className: "relative"
812
- }, /* @__PURE__ */ import_react6.default.createElement("div", {
813
- ref: gridRef,
814
- className: "grid grid-rows-8 grid-cols-8 aspect-square select-none"
815
- }, layout), /* @__PURE__ */ import_react6.default.createElement("div", null, locations.map((location) => /* @__PURE__ */ import_react6.default.createElement(Square, {
816
- key: locationToString(location),
817
- location,
818
- label: showLabels ? locationToPos(location) : void 0,
819
- bounds: grid[locationToString(location)],
820
- classNames: getSquareColor(location)
821
- }))), /* @__PURE__ */ import_react6.default.createElement("div", {
822
- className: (0, import_react_ui_theme5.mx)(promoting && "opacity-50")
823
- }, positions.map(({ bounds, piece }) => /* @__PURE__ */ import_react6.default.createElement(Piece, {
824
- key: piece.id,
825
- piece,
826
- bounds,
827
- label: debug ? piece.id : void 0,
828
- orientation,
829
- Component: ChessPieces[piece.type]
830
- }))), /* @__PURE__ */ import_react6.default.createElement("div", null, promoting && /* @__PURE__ */ import_react6.default.createElement(PromotionSelector, {
831
- grid,
832
- piece: promoting,
833
- onSelect: (piece) => {
834
- onPromotion({
835
- from: Object.values(model.pieces.value).find((p) => p.id === promoting.id).location,
836
- to: piece.location,
837
- piece: promoting.type,
838
- promotion: piece.type
872
+ const { model, promoting, onPromotion } = useBoardContext();
873
+ const locations = (0, import_react6.useMemo)(() => {
874
+ return Array.from({
875
+ length: rows
876
+ }, (_, i) => orientation === "black" ? i : rows - 1 - i).flatMap((row) => Array.from({
877
+ length: cols
878
+ }).map((_, col) => [
879
+ row,
880
+ col
881
+ ]));
882
+ }, [
883
+ orientation,
884
+ rows,
885
+ cols
886
+ ]);
887
+ const layout = (0, import_react6.useMemo)(() => {
888
+ return locations.map((location) => {
889
+ return /* @__PURE__ */ import_react6.default.createElement("div", {
890
+ key: locationToString(location),
891
+ ["data-location"]: locationToString(location)
892
+ });
839
893
  });
840
- }
841
- })));
894
+ }, [
895
+ locations
896
+ ]);
897
+ const [grid, setGrid] = (0, import_react6.useState)({});
898
+ const gridRef = (0, import_react6.useRef)(null);
899
+ (0, import_react6.useEffect)(() => {
900
+ setGrid(locations.reduce((acc, location) => {
901
+ const square = getSquareLocation(gridRef.current, location);
902
+ const bounds = getRelativeBounds(gridRef.current, square);
903
+ return {
904
+ ...acc,
905
+ [locationToString(location)]: bounds
906
+ };
907
+ }, {}));
908
+ }, [
909
+ locations,
910
+ width,
911
+ height
912
+ ]);
913
+ const positions = (0, import_react6.useMemo)(() => {
914
+ if (!gridRef.current) {
915
+ return [];
916
+ }
917
+ return Object.values(model?.pieces.value ?? {}).map((piece) => {
918
+ if (piece.id === promoting?.id) {
919
+ return null;
920
+ }
921
+ const bounds = grid[locationToString(piece.location)];
922
+ return {
923
+ piece,
924
+ bounds
925
+ };
926
+ }).filter(import_util.isNotFalsy);
927
+ }, [
928
+ grid,
929
+ model?.pieces.value,
930
+ promoting
931
+ ]);
932
+ return /* @__PURE__ */ import_react6.default.createElement("div", {
933
+ ref: containerRef,
934
+ className: "relative"
935
+ }, /* @__PURE__ */ import_react6.default.createElement("div", {
936
+ ref: gridRef,
937
+ className: "grid grid-rows-8 grid-cols-8 aspect-square select-none"
938
+ }, layout), /* @__PURE__ */ import_react6.default.createElement("div", null, locations.map((location) => /* @__PURE__ */ import_react6.default.createElement(Square, {
939
+ key: locationToString(location),
940
+ location,
941
+ label: showLabels ? locationToPos(location) : void 0,
942
+ bounds: grid[locationToString(location)],
943
+ classNames: getSquareColor(location)
944
+ }))), /* @__PURE__ */ import_react6.default.createElement("div", {
945
+ className: (0, import_react_ui_theme5.mx)(promoting && "opacity-50")
946
+ }, positions.map(({ bounds, piece }) => /* @__PURE__ */ import_react6.default.createElement(Piece, {
947
+ key: piece.id,
948
+ piece,
949
+ bounds,
950
+ label: debug ? piece.id : void 0,
951
+ orientation,
952
+ Component: ChessPieces[piece.type]
953
+ }))), /* @__PURE__ */ import_react6.default.createElement("div", null, promoting && /* @__PURE__ */ import_react6.default.createElement(PromotionSelector, {
954
+ grid,
955
+ piece: promoting,
956
+ onSelect: (piece) => {
957
+ onPromotion({
958
+ from: Object.values(model.pieces.value).find((p) => p.id === promoting.id).location,
959
+ to: piece.location,
960
+ piece: promoting.type,
961
+ promotion: piece.type
962
+ });
963
+ }
964
+ })));
965
+ } finally {
966
+ _effect.f();
967
+ }
842
968
  });
843
969
  Chessboard.displayName = "Chessboard";
844
970
  var getSquareLocation = (container, location) => {
845
971
  return container.querySelector(`[data-location="${locationToString(location)}"]`);
846
972
  };
847
973
  var PromotionSelector = ({ grid, piece, onSelect }) => {
848
- const positions = [
849
- "Q",
850
- "N",
851
- "R",
852
- "B"
853
- ].map((pieceType, i) => {
854
- const location = [
855
- piece.location[0] + (piece.location[0] === 0 ? i : -i),
856
- piece.location[1]
857
- ];
858
- return {
859
- piece: {
860
- id: `promotion-${pieceType}`,
861
- type: (piece.side === "black" ? "B" : "W") + pieceType,
862
- side: piece.side,
863
- location
864
- },
865
- bounds: grid[locationToString(location)]
866
- };
867
- });
868
- const handleSelect = (selected) => {
869
- onSelect({
870
- ...piece,
871
- type: selected.type
974
+ var _effect = (0, import_tracking17.useSignals)();
975
+ try {
976
+ const positions = [
977
+ "Q",
978
+ "N",
979
+ "R",
980
+ "B"
981
+ ].map((pieceType, i) => {
982
+ const location = [
983
+ piece.location[0] + (piece.location[0] === 0 ? i : -i),
984
+ piece.location[1]
985
+ ];
986
+ return {
987
+ piece: {
988
+ id: `promotion-${pieceType}`,
989
+ type: (piece.side === "black" ? "B" : "W") + pieceType,
990
+ side: piece.side,
991
+ location
992
+ },
993
+ bounds: grid[locationToString(location)]
994
+ };
872
995
  });
873
- };
874
- return /* @__PURE__ */ import_react6.default.createElement("div", null, positions.map(({ piece: piece2, bounds }) => /* @__PURE__ */ import_react6.default.createElement("div", {
875
- key: piece2.id,
876
- style: bounds,
877
- onClick: () => handleSelect(piece2)
878
- }, /* @__PURE__ */ import_react6.default.createElement(Piece, {
879
- piece: piece2,
880
- bounds,
881
- Component: ChessPieces[piece2.type],
882
- classNames: (0, import_react_ui_theme5.mx)("border-2 border-neutral-700 rounded-full", boardStyles.promotion)
883
- }))));
996
+ const handleSelect = (selected) => {
997
+ onSelect({
998
+ ...piece,
999
+ type: selected.type
1000
+ });
1001
+ };
1002
+ return /* @__PURE__ */ import_react6.default.createElement("div", null, positions.map(({ piece: piece2, bounds }) => /* @__PURE__ */ import_react6.default.createElement("div", {
1003
+ key: piece2.id,
1004
+ style: bounds,
1005
+ onClick: () => handleSelect(piece2)
1006
+ }, /* @__PURE__ */ import_react6.default.createElement(Piece, {
1007
+ piece: piece2,
1008
+ bounds,
1009
+ Component: ChessPieces[piece2.type],
1010
+ classNames: (0, import_react_ui_theme5.mx)("border-2 border-neutral-700 rounded-full", boardStyles.promotion)
1011
+ }))));
1012
+ } finally {
1013
+ _effect.f();
1014
+ }
884
1015
  };
885
1016
  // Annotate the CommonJS export names for ESM import in node:
886
1017
  0 && (module.exports = {