@dxos/react-ui-gameboard 0.8.2-staging.7ac8446 → 0.8.2

package/dist/lib/browser/index.mjs

@@ -32,105 +32,117 @@ var getRelativeBounds = (container, element) => {
 };
 
 // packages/ui/react-ui-gameboard/src/Board/Board.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import React2, { useCallback, useEffect, useState } from "react";
 import { log } from "@dxos/log";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-gameboard/src/Board/Container.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React, { forwardRef } from "react";
 import { mx } from "@dxos/react-ui-theme";
 var Container = /* @__PURE__ */ forwardRef(({ children, classNames, style }, forwardedRef) => {
-  return /* @__PURE__ */ React.createElement("div", {
-    ref: forwardedRef,
-    style,
-    className: "flex w-full h-full justify-center overflow-hidden"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: mx("max-w-full max-h-full content-center", classNames)
-  }, children));
+  var _effect = _useSignals();
+  try {
+    return /* @__PURE__ */ React.createElement("div", {
+      ref: forwardedRef,
+      style,
+      className: "flex w-full h-full justify-center overflow-hidden"
+    }, /* @__PURE__ */ React.createElement("div", {
+      className: mx("max-w-full max-h-full content-center", classNames)
+    }, children));
+  } finally {
+    _effect.f();
+  }
 });
 
 // packages/ui/react-ui-gameboard/src/Board/Board.tsx
 var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-gameboard/src/Board/Board.tsx";
 var Root = ({ children, classNames, model, onDrop }) => {
-  const [dragging, setDragging] = useState(false);
-  const [promoting, setPromoting] = useState();
-  const onPromotion = useCallback((move) => {
-    log("onPromotion", {
-      move
-    }, {
-      F: __dxlog_file,
-      L: 32,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-    setPromoting(void 0);
-    onDrop?.(move);
-  }, []);
-  useEffect(() => {
-    if (!model) {
-      return;
-    }
-    return monitorForElements({
-      onDragStart: ({ source }) => {
-        log("onDragStart", {
-          source
-        }, {
-          F: __dxlog_file,
-          L: 45,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        setDragging(true);
-      },
-      onDrop: ({ source, location }) => {
-        log("onDrop", {
-          source,
-          location
-        }, {
-          F: __dxlog_file,
-          L: 49,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        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.canPromote?.(move)) {
-          setPromoting({
-            ...piece,
-            location: targetLocation
+  var _effect = _useSignals2();
+  try {
+    const [dragging, setDragging] = useState(false);
+    const [promoting, setPromoting] = useState();
+    const onPromotion = useCallback((move) => {
+      log("onPromotion", {
+        move
+      }, {
+        F: __dxlog_file,
+        L: 32,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      setPromoting(void 0);
+      onDrop?.(move);
+    }, []);
+    useEffect(() => {
+      if (!model) {
+        return;
+      }
+      return monitorForElements({
+        onDragStart: ({ source }) => {
+          log("onDragStart", {
+            source
+          }, {
+            F: __dxlog_file,
+            L: 45,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          setDragging(true);
+        },
+        onDrop: ({ source, location }) => {
+          log("onDrop", {
+            source,
+            location
+          }, {
+            F: __dxlog_file,
+            L: 49,
+            S: void 0,
+            C: (f, a) => f(...a)
           });
-        } else {
-          onDrop?.(move);
+          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.canPromote?.(move)) {
+            setPromoting({
+              ...piece,
+              location: targetLocation
+            });
+          } else {
+            onDrop?.(move);
+          }
+          setDragging(false);
         }
-        setDragging(false);
+      });
+    }, [
+      model
+    ]);
+    return /* @__PURE__ */ React2.createElement(BoardContext.Provider, {
+      value: {
+        model,
+        dragging,
+        promoting,
+        onPromotion
       }
-    });
-  }, [
-    model
-  ]);
-  return /* @__PURE__ */ React2.createElement(BoardContext.Provider, {
-    value: {
-      model,
-      dragging,
-      promoting,
-      onPromotion
-    }
-  }, /* @__PURE__ */ React2.createElement(Container, {
-    classNames: mx2("aspect-square", classNames)
-  }, children));
+    }, /* @__PURE__ */ React2.createElement(Container, {
+      classNames: mx2("aspect-square", classNames)
+    }, children));
+  } finally {
+    _effect.f();
+  }
 };
 Root.displayName = "Board.Root";
 var Board = {
@@ -138,6 +150,7 @@ var Board = {
 };
 
 // packages/ui/react-ui-gameboard/src/Board/Square.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import React3, { useRef, useState as useState2, useEffect as useEffect2, memo } from "react";
 import { invariant } from "@dxos/invariant";
@@ -145,77 +158,83 @@ import { log as log2 } from "@dxos/log";
 import { mx as mx3 } from "@dxos/react-ui-theme";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-gameboard/src/Board/Square.tsx";
 var Square = /* @__PURE__ */ memo(({ location, bounds, label, classNames }) => {
-  const ref = useRef(null);
-  const [state, setState] = useState2("idle");
-  const { model } = useBoardContext();
-  useEffect2(() => {
-    const el = ref.current;
-    invariant(el, void 0, {
-      F: __dxlog_file2,
-      L: 32,
-      S: void 0,
-      A: [
-        "el",
-        ""
-      ]
-    });
-    return dropTargetForElements({
-      element: el,
-      getData: () => ({
-        location
-      }),
-      canDrop: ({ source }) => {
-        log2("canDrop", {
-          source: source.data
-        }, {
-          F: __dxlog_file2,
-          L: 38,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        return true;
-      },
-      onDragEnter: ({ source }) => {
-        log2("onDragEnter", {
-          source: source.data
-        }, {
-          F: __dxlog_file2,
-          L: 42,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        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__ */ React3.createElement("div", {
-    ref,
-    style: bounds,
-    className: mx3("absolute flex justify-center items-center border-2 box-border select-none", classNames, state === "validMove" ? "border-neutral-800" : "border-transparent")
-  }, label && /* @__PURE__ */ React3.createElement("div", {
-    className: mx3("absolute bottom-1 left-1 text-xs text-neutral-500")
-  }, label));
+  var _effect = _useSignals3();
+  try {
+    const ref = useRef(null);
+    const [state, setState] = useState2("idle");
+    const { model } = useBoardContext();
+    useEffect2(() => {
+      const el = ref.current;
+      invariant(el, void 0, {
+        F: __dxlog_file2,
+        L: 32,
+        S: void 0,
+        A: [
+          "el",
+          ""
+        ]
+      });
+      return dropTargetForElements({
+        element: el,
+        getData: () => ({
+          location
+        }),
+        canDrop: ({ source }) => {
+          log2("canDrop", {
+            source: source.data
+          }, {
+            F: __dxlog_file2,
+            L: 38,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          return true;
+        },
+        onDragEnter: ({ source }) => {
+          log2("onDragEnter", {
+            source: source.data
+          }, {
+            F: __dxlog_file2,
+            L: 42,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          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__ */ React3.createElement("div", {
+      ref,
+      style: bounds,
+      className: mx3("absolute flex justify-center items-center border-2 box-border select-none", classNames, state === "validMove" ? "border-neutral-800" : "border-transparent")
+    }, label && /* @__PURE__ */ React3.createElement("div", {
+      className: mx3("absolute bottom-1 left-1 text-xs text-neutral-500")
+    }, label));
+  } finally {
+    _effect.f();
+  }
 });
 Square.displayName = "Square";
 
 // packages/ui/react-ui-gameboard/src/Board/Piece.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 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";
@@ -227,131 +246,136 @@ import { useDynamicRef, useTrackProps } from "@dxos/react-ui";
 import { mx as mx4 } from "@dxos/react-ui-theme";
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-gameboard/src/Board/Piece.tsx";
 var Piece = /* @__PURE__ */ memo2(({ classNames, piece, orientation, bounds, label, Component }) => {
-  useTrackProps({
-    classNames,
-    piece,
-    orientation,
-    bounds,
-    label,
-    Component
-  }, Piece.displayName, false);
-  const { model } = useBoardContext();
-  const { dragging: isDragging, promoting } = useBoardContext();
-  const promotingRef = useDynamicRef(promoting);
-  const [dragging, setDragging] = useState3(false);
-  const [preview, setPreview] = useState3();
-  const [current, setCurrent] = useState3({});
-  const ref = useRef2(null);
-  useEffect3(() => {
-    const el = ref.current;
-    invariant2(el, void 0, {
-      F: __dxlog_file3,
-      L: 44,
-      S: void 0,
-      A: [
-        "el",
-        ""
-      ]
-    });
-    return draggable({
-      element: el,
-      getInitialData: () => ({
-        piece
-      }),
-      onGenerateDragPreview: ({ nativeSetDragImage, location, source }) => {
-        log3("onGenerateDragPreview", {
-          source: source.data
-        }, {
-          F: __dxlog_file3,
-          L: 50,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        setCustomNativeDragPreview({
-          getOffset: centerUnderPointer,
-          // getOffset: preserveOffsetOnSource({
-          //   element: source.element,
-          //   input: location.current.input,
-          // }),
-          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?.turn === piece.side,
-      onDragStart: () => setDragging(true),
-      onDrop: ({ location: { current: current2 } }) => {
-        const location = current2.dropTargets[0].data.location;
-        if (isLocation(location)) {
-          setCurrent((current3) => ({
-            ...current3,
-            location
-          }));
-        }
-        setDragging(false);
-      }
-    });
-  }, [
-    model,
-    piece
-  ]);
-  useEffect3(() => {
-    requestAnimationFrame(() => {
-      if (!ref.current || !bounds) {
-        return;
-      }
-      if (!current.location || !isEqualLocation(current.location, piece.location)) {
-        ref.current.style.transition = "top 400ms ease-out, left 400ms 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__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("div", {
-    ref,
-    style: {
-      width: bounds?.width,
-      height: bounds?.height
-    },
-    className: mx4(
-      "absolute",
+  var _effect = _useSignals4();
+  try {
+    useTrackProps({
       classNames,
-      // orientation === 'black' && '_rotate-180',
-      dragging && "opacity-20",
-      isDragging && "pointer-events-none"
-    )
-  }, /* @__PURE__ */ React4.createElement(Component, {
-    className: "grow"
-  }), label && /* @__PURE__ */ React4.createElement("div", {
-    className: "absolute inset-1 text-xs text-black"
-  }, label)), preview && /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement("div", {
-    className: mx4(classNames)
-  }, /* @__PURE__ */ React4.createElement(Component, {
-    className: "grow"
-  })), preview));
+      piece,
+      orientation,
+      bounds,
+      label,
+      Component
+    }, Piece.displayName, false);
+    const { model } = useBoardContext();
+    const { dragging: isDragging, promoting } = useBoardContext();
+    const promotingRef = useDynamicRef(promoting);
+    const [dragging, setDragging] = useState3(false);
+    const [preview, setPreview] = useState3();
+    const [current, setCurrent] = useState3({});
+    const ref = useRef2(null);
+    useEffect3(() => {
+      const el = ref.current;
+      invariant2(el, void 0, {
+        F: __dxlog_file3,
+        L: 44,
+        S: void 0,
+        A: [
+          "el",
+          ""
+        ]
+      });
+      return draggable({
+        element: el,
+        getInitialData: () => ({
+          piece
+        }),
+        onGenerateDragPreview: ({ nativeSetDragImage, location, source }) => {
+          log3("onGenerateDragPreview", {
+            source: source.data
+          }, {
+            F: __dxlog_file3,
+            L: 50,
+            S: void 0,
+            C: (f, a) => f(...a)
+          });
+          setCustomNativeDragPreview({
+            getOffset: centerUnderPointer,
+            // getOffset: preserveOffsetOnSource({
+            //   element: source.element,
+            //   input: location.current.input,
+            // }),
+            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?.turn === piece.side,
+        onDragStart: () => setDragging(true),
+        onDrop: ({ location: { current: current2 } }) => {
+          const location = current2.dropTargets[0].data.location;
+          if (isLocation(location)) {
+            setCurrent((current3) => ({
+              ...current3,
+              location
+            }));
+          }
+          setDragging(false);
+        }
+      });
+    }, [
+      model,
+      piece
+    ]);
+    useEffect3(() => {
+      requestAnimationFrame(() => {
+        if (!ref.current || !bounds) {
+          return;
+        }
+        if (!current.location || !isEqualLocation(current.location, piece.location)) {
+          ref.current.style.transition = "top 400ms ease-out, left 400ms 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__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("div", {
+      ref,
+      style: {
+        width: bounds?.width,
+        height: bounds?.height
+      },
+      className: mx4(
+        "absolute",
+        classNames,
+        // orientation === 'black' && '_rotate-180',
+        dragging && "opacity-20",
+        isDragging && "pointer-events-none"
+      )
+    }, /* @__PURE__ */ React4.createElement(Component, {
+      className: "grow"
+    }), label && /* @__PURE__ */ React4.createElement("div", {
+      className: "absolute inset-1 text-xs text-black"
+    }, label)), preview && /* @__PURE__ */ createPortal(/* @__PURE__ */ React4.createElement("div", {
+      className: mx4(classNames)
+    }, /* @__PURE__ */ React4.createElement(Component, {
+      className: "grow"
+    })), preview));
+  } finally {
+    _effect.f();
+  }
 });
 Piece.displayName = "Piece";
 
@@ -378,180 +402,276 @@ __export(alpha_exports, {
 });
 
 // packages/ui/react-ui-gameboard/src/gen/pieces/chess/alpha/bB.tsx
+import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
 import * as React5 from "react";
-var SvgBB = (props) => /* @__PURE__ */ React5.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 2048 2048",
-  ...props
-}, /* @__PURE__ */ React5.createElement("path", {
-  fill: "#f9f9f9",
-  d: "M732 1290 628 993l386-417 421 375-132 380 49 152-658-9z"
-}), /* @__PURE__ */ React5.createElement("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"
-}));
+var SvgBB = (props) => {
+  var _effect = _useSignals5();
+  try {
+    return /* @__PURE__ */ React5.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 2048 2048",
+      ...props
+    }, /* @__PURE__ */ React5.createElement("path", {
+      fill: "#f9f9f9",
+      d: "M732 1290 628 993l386-417 421 375-132 380 49 152-658-9z"
+    }), /* @__PURE__ */ React5.createElement("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"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
 var bB_default = SvgBB;
 
 // packages/ui/react-ui-gameboard/src/gen/pieces/chess/alpha/bK.tsx
+import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
 import * as React6 from "react";
-var SvgBK = (props) => /* @__PURE__ */ React6.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 2048 2048",
-  ...props
-}, /* @__PURE__ */ React6.createElement("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__ */ React6.createElement("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"
-}));
+var SvgBK = (props) => {
+  var _effect = _useSignals6();
+  try {
+    return /* @__PURE__ */ React6.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 2048 2048",
+      ...props
+    }, /* @__PURE__ */ React6.createElement("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__ */ React6.createElement("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"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
 var bK_default = SvgBK;
 
 // packages/ui/react-ui-gameboard/src/gen/pieces/chess/alpha/bN.tsx
+import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
 import * as React7 from "react";
-var SvgBN = (props) => /* @__PURE__ */ React7.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 2048 2048",
-  ...props
-}, /* @__PURE__ */ React7.createElement("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__ */ React7.createElement("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"
-}));
+var SvgBN = (props) => {
+  var _effect = _useSignals7();
+  try {
+    return /* @__PURE__ */ React7.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 2048 2048",
+      ...props
+    }, /* @__PURE__ */ React7.createElement("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__ */ React7.createElement("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"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
 var bN_default = SvgBN;
 
 // packages/ui/react-ui-gameboard/src/gen/pieces/chess/alpha/bP.tsx
+import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
 import * as React8 from "react";
-var SvgBP = (props) => /* @__PURE__ */ React8.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 2048 2048",
-  ...props
-}, /* @__PURE__ */ React8.createElement("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"
-}));
+var SvgBP = (props) => {
+  var _effect = _useSignals8();
+  try {
+    return /* @__PURE__ */ React8.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 2048 2048",
+      ...props
+    }, /* @__PURE__ */ React8.createElement("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"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
 var bP_default = SvgBP;
 
 // packages/ui/react-ui-gameboard/src/gen/pieces/chess/alpha/bQ.tsx
+import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
 import * as React9 from "react";
-var SvgBQ = (props) => /* @__PURE__ */ React9.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 2048 2048",
-  ...props
-}, /* @__PURE__ */ React9.createElement("path", {
-  fill: "#f9f9f9",
-  d: "m520 1801.8 41.5-448.7 474-128.9 458 133.5 34.4 446.4z"
-}), /* @__PURE__ */ React9.createElement("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"
-}));
+var SvgBQ = (props) => {
+  var _effect = _useSignals9();
+  try {
+    return /* @__PURE__ */ React9.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 2048 2048",
+      ...props
+    }, /* @__PURE__ */ React9.createElement("path", {
+      fill: "#f9f9f9",
+      d: "m520 1801.8 41.5-448.7 474-128.9 458 133.5 34.4 446.4z"
+    }), /* @__PURE__ */ React9.createElement("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"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
 var bQ_default = SvgBQ;
 
 // packages/ui/react-ui-gameboard/src/gen/pieces/chess/alpha/bR.tsx
+import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
 import * as React10 from "react";
-var SvgBR = (props) => /* @__PURE__ */ React10.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 2048 2048",
-  ...props
-}, /* @__PURE__ */ React10.createElement("path", {
-  fill: "#f9f9f9",
-  d: "m674 732-76 807 851 14-75-833z"
-}), /* @__PURE__ */ React10.createElement("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"
-}));
+var SvgBR = (props) => {
+  var _effect = _useSignals10();
+  try {
+    return /* @__PURE__ */ React10.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 2048 2048",
+      ...props
+    }, /* @__PURE__ */ React10.createElement("path", {
+      fill: "#f9f9f9",
+      d: "m674 732-76 807 851 14-75-833z"
+    }), /* @__PURE__ */ React10.createElement("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"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
 var bR_default = SvgBR;
 
 // packages/ui/react-ui-gameboard/src/gen/pieces/chess/alpha/wB.tsx
+import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
 import * as React11 from "react";
-var SvgWB = (props) => /* @__PURE__ */ React11.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 2048 2048",
-  ...props
-}, /* @__PURE__ */ React11.createElement("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__ */ React11.createElement("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"
-}));
+var SvgWB = (props) => {
+  var _effect = _useSignals11();
+  try {
+    return /* @__PURE__ */ React11.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 2048 2048",
+      ...props
+    }, /* @__PURE__ */ React11.createElement("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__ */ React11.createElement("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"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
 var wB_default = SvgWB;
 
 // packages/ui/react-ui-gameboard/src/gen/pieces/chess/alpha/wK.tsx
+import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
 import * as React12 from "react";
-var SvgWK = (props) => /* @__PURE__ */ React12.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 2048 2048",
-  ...props
-}, /* @__PURE__ */ React12.createElement("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__ */ React12.createElement("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"
-}));
+var SvgWK = (props) => {
+  var _effect = _useSignals12();
+  try {
+    return /* @__PURE__ */ React12.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 2048 2048",
+      ...props
+    }, /* @__PURE__ */ React12.createElement("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__ */ React12.createElement("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"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
 var wK_default = SvgWK;
 
 // packages/ui/react-ui-gameboard/src/gen/pieces/chess/alpha/wN.tsx
+import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
 import * as React13 from "react";
-var SvgWN = (props) => /* @__PURE__ */ React13.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 2048 2048",
-  ...props
-}, /* @__PURE__ */ React13.createElement("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__ */ React13.createElement("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"
-}));
+var SvgWN = (props) => {
+  var _effect = _useSignals13();
+  try {
+    return /* @__PURE__ */ React13.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 2048 2048",
+      ...props
+    }, /* @__PURE__ */ React13.createElement("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__ */ React13.createElement("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"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
 var wN_default = SvgWN;
 
 // packages/ui/react-ui-gameboard/src/gen/pieces/chess/alpha/wP.tsx
+import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
 import * as React14 from "react";
-var SvgWP = (props) => /* @__PURE__ */ React14.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 2048 2048",
-  ...props
-}, /* @__PURE__ */ React14.createElement("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__ */ React14.createElement("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"
-}));
+var SvgWP = (props) => {
+  var _effect = _useSignals14();
+  try {
+    return /* @__PURE__ */ React14.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 2048 2048",
+      ...props
+    }, /* @__PURE__ */ React14.createElement("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__ */ React14.createElement("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"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
 var wP_default = SvgWP;
 
 // packages/ui/react-ui-gameboard/src/gen/pieces/chess/alpha/wQ.tsx
+import { useSignals as _useSignals15 } from "@preact-signals/safe-react/tracking";
 import * as React15 from "react";
-var SvgWQ = (props) => /* @__PURE__ */ React15.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 2048 2048",
-  ...props
-}, /* @__PURE__ */ React15.createElement("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__ */ React15.createElement("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"
-}));
+var SvgWQ = (props) => {
+  var _effect = _useSignals15();
+  try {
+    return /* @__PURE__ */ React15.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 2048 2048",
+      ...props
+    }, /* @__PURE__ */ React15.createElement("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__ */ React15.createElement("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"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
 var wQ_default = SvgWQ;
 
 // packages/ui/react-ui-gameboard/src/gen/pieces/chess/alpha/wR.tsx
+import { useSignals as _useSignals16 } from "@preact-signals/safe-react/tracking";
 import * as React16 from "react";
-var SvgWR = (props) => /* @__PURE__ */ React16.createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 2048 2048",
-  ...props
-}, /* @__PURE__ */ React16.createElement("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__ */ React16.createElement("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"
-}));
+var SvgWR = (props) => {
+  var _effect = _useSignals16();
+  try {
+    return /* @__PURE__ */ React16.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 2048 2048",
+      ...props
+    }, /* @__PURE__ */ React16.createElement("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__ */ React16.createElement("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"
+    }));
+  } finally {
+    _effect.f();
+  }
+};
 var wR_default = SvgWR;
 
 // packages/ui/react-ui-gameboard/src/Chessboard/chess.ts
@@ -728,155 +848,166 @@ var mapPieces = (before, after) => {
 };
 
 // packages/ui/react-ui-gameboard/src/Chessboard/Chessboard.tsx
+import { useSignals as _useSignals17 } from "@preact-signals/safe-react/tracking";
 import React17, { useRef as useRef3, useMemo, useEffect as useEffect4, useState as useState4, memo as memo3 } from "react";
 import { useResizeDetector } from "react-resize-detector";
 import { useTrackProps as useTrackProps2 } from "@dxos/react-ui";
 import { mx as mx5 } from "@dxos/react-ui-theme";
 import { isNotFalsy } from "@dxos/util";
 var Chessboard = /* @__PURE__ */ memo3(({ orientation, showLabels, debug, rows = 8, cols = 8 }) => {
-  useTrackProps2({
-    orientation,
-    showLabels,
-    debug
-  }, Chessboard.displayName, false);
-  const { ref: containerRef, width, height } = useResizeDetector({
-    refreshRate: 200
-  });
-  const { model, promoting, onPromotion } = useBoardContext();
-  const locations = 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 locations.map((location) => {
-      return /* @__PURE__ */ React17.createElement("div", {
-        key: locationToString(location),
-        ["data-location"]: locationToString(location)
-      });
+  var _effect = _useSignals17();
+  try {
+    useTrackProps2({
+      orientation,
+      showLabels,
+      debug
+    }, Chessboard.displayName, false);
+    const { ref: containerRef, width, height } = useResizeDetector({
+      refreshRate: 200
     });
-  }, [
-    locations
-  ]);
-  const [grid, setGrid] = useState4({});
-  const gridRef = useRef3(null);
-  useEffect4(() => {
-    setGrid(locations.reduce((acc, location) => {
-      const square = getSquareLocation(gridRef.current, location);
-      const bounds = getRelativeBounds(gridRef.current, square);
-      return {
-        ...acc,
-        [locationToString(location)]: bounds
-      };
-    }, {}));
-  }, [
-    locations,
-    width,
-    height
-  ]);
-  const positions = useMemo(() => {
-    if (!gridRef.current) {
-      return [];
-    }
-    return Object.values(model?.pieces.value ?? {}).map((piece) => {
-      if (piece.id === promoting?.id) {
-        return null;
-      }
-      const bounds = grid[locationToString(piece.location)];
-      return {
-        piece,
-        bounds
-      };
-    }).filter(isNotFalsy);
-  }, [
-    grid,
-    model?.pieces.value,
-    promoting
-  ]);
-  return /* @__PURE__ */ React17.createElement("div", {
-    ref: containerRef,
-    className: "relative"
-  }, /* @__PURE__ */ React17.createElement("div", {
-    ref: gridRef,
-    className: "grid grid-rows-8 grid-cols-8 aspect-square select-none"
-  }, layout), /* @__PURE__ */ React17.createElement("div", null, locations.map((location) => /* @__PURE__ */ React17.createElement(Square, {
-    key: locationToString(location),
-    location,
-    label: showLabels ? locationToPos(location) : void 0,
-    bounds: grid[locationToString(location)],
-    classNames: getSquareColor(location)
-  }))), /* @__PURE__ */ React17.createElement("div", {
-    className: mx5(promoting && "opacity-50")
-  }, positions.map(({ bounds, piece }) => /* @__PURE__ */ React17.createElement(Piece, {
-    key: piece.id,
-    piece,
-    bounds,
-    label: debug ? piece.id : void 0,
-    orientation,
-    Component: ChessPieces[piece.type]
-  }))), /* @__PURE__ */ React17.createElement("div", null, promoting && /* @__PURE__ */ React17.createElement(PromotionSelector, {
-    grid,
-    piece: promoting,
-    onSelect: (piece) => {
-      onPromotion({
-        from: Object.values(model.pieces.value).find((p) => p.id === promoting.id).location,
-        to: piece.location,
-        piece: promoting.type,
-        promotion: piece.type
+    const { model, promoting, onPromotion } = useBoardContext();
+    const locations = 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 locations.map((location) => {
+        return /* @__PURE__ */ React17.createElement("div", {
+          key: locationToString(location),
+          ["data-location"]: locationToString(location)
+        });
       });
-    }
-  })));
+    }, [
+      locations
+    ]);
+    const [grid, setGrid] = useState4({});
+    const gridRef = useRef3(null);
+    useEffect4(() => {
+      setGrid(locations.reduce((acc, location) => {
+        const square = getSquareLocation(gridRef.current, location);
+        const bounds = getRelativeBounds(gridRef.current, square);
+        return {
+          ...acc,
+          [locationToString(location)]: bounds
+        };
+      }, {}));
+    }, [
+      locations,
+      width,
+      height
+    ]);
+    const positions = useMemo(() => {
+      if (!gridRef.current) {
+        return [];
+      }
+      return Object.values(model?.pieces.value ?? {}).map((piece) => {
+        if (piece.id === promoting?.id) {
+          return null;
+        }
+        const bounds = grid[locationToString(piece.location)];
+        return {
+          piece,
+          bounds
+        };
+      }).filter(isNotFalsy);
+    }, [
+      grid,
+      model?.pieces.value,
+      promoting
+    ]);
+    return /* @__PURE__ */ React17.createElement("div", {
+      ref: containerRef,
+      className: "relative"
+    }, /* @__PURE__ */ React17.createElement("div", {
+      ref: gridRef,
+      className: "grid grid-rows-8 grid-cols-8 aspect-square select-none"
+    }, layout), /* @__PURE__ */ React17.createElement("div", null, locations.map((location) => /* @__PURE__ */ React17.createElement(Square, {
+      key: locationToString(location),
+      location,
+      label: showLabels ? locationToPos(location) : void 0,
+      bounds: grid[locationToString(location)],
+      classNames: getSquareColor(location)
+    }))), /* @__PURE__ */ React17.createElement("div", {
+      className: mx5(promoting && "opacity-50")
+    }, positions.map(({ bounds, piece }) => /* @__PURE__ */ React17.createElement(Piece, {
+      key: piece.id,
+      piece,
+      bounds,
+      label: debug ? piece.id : void 0,
+      orientation,
+      Component: ChessPieces[piece.type]
+    }))), /* @__PURE__ */ React17.createElement("div", null, promoting && /* @__PURE__ */ React17.createElement(PromotionSelector, {
+      grid,
+      piece: promoting,
+      onSelect: (piece) => {
+        onPromotion({
+          from: Object.values(model.pieces.value).find((p) => p.id === promoting.id).location,
+          to: piece.location,
+          piece: promoting.type,
+          promotion: piece.type
+        });
+      }
+    })));
+  } finally {
+    _effect.f();
+  }
 });
 Chessboard.displayName = "Chessboard";
 var getSquareLocation = (container, location) => {
   return container.querySelector(`[data-location="${locationToString(location)}"]`);
 };
 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
+  var _effect = _useSignals17();
+  try {
+    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)]
+      };
     });
-  };
-  return /* @__PURE__ */ React17.createElement("div", null, positions.map(({ piece: piece2, bounds }) => /* @__PURE__ */ React17.createElement("div", {
-    key: piece2.id,
-    style: bounds,
-    onClick: () => handleSelect(piece2)
-  }, /* @__PURE__ */ React17.createElement(Piece, {
-    piece: piece2,
-    bounds,
-    Component: ChessPieces[piece2.type],
-    classNames: mx5("border-2 border-neutral-700 rounded-full", boardStyles.promotion)
-  }))));
+    const handleSelect = (selected) => {
+      onSelect({
+        ...piece,
+        type: selected.type
+      });
+    };
+    return /* @__PURE__ */ React17.createElement("div", null, positions.map(({ piece: piece2, bounds }) => /* @__PURE__ */ React17.createElement("div", {
+      key: piece2.id,
+      style: bounds,
+      onClick: () => handleSelect(piece2)
+    }, /* @__PURE__ */ React17.createElement(Piece, {
+      piece: piece2,
+      bounds,
+      Component: ChessPieces[piece2.type],
+      classNames: mx5("border-2 border-neutral-700 rounded-full", boardStyles.promotion)
+    }))));
+  } finally {
+    _effect.f();
+  }
 };
 export {
   Board,