@scriptonita/chess-football-ui 0.4.0 → 0.4.2

package/dist/index.cjs

@@ -86,14 +86,14 @@ function GamePiece({ piece, isSelected, hasBall, onClick }) {
       onClick,
       style,
       className: cn(
-        "relative w-[88%] h-[88%] flex items-center justify-center rounded-full cursor-pointer z-10 transition-transform",
+        "relative w-[88%] h-[88%] flex items-center justify-center rounded-full cursor-pointer z-10 transition-transform motion-reduce:transition-none",
         isSelected && "ring-4 ring-primary scale-110 z-30",
         piece.hasMovedThisTurn && "opacity-70"
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(PieceIcon, { type: piece.type, side: piece.side }),
         hasBall && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full ring-2 ring-orange-400 pointer-events-none" }),
-        isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full animate-pulse ring-2 ring-yellow-400 ring-offset-2 ring-offset-transparent" })
+        isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full animate-pulse motion-reduce:animate-none ring-2 ring-yellow-400 ring-offset-2 ring-offset-transparent" })
       ]
     }
   );
@@ -399,7 +399,14 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
                 isDisambiguateTarget && selectedPieceId && /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
-                    className: "absolute z-50 bottom-full mb-1 left-1/2 -translate-x-1/2 flex gap-1 bg-bg-secondary border border-border-subtle rounded-md p-1 shadow-xl pointer-events-auto whitespace-nowrap",
+                    className: cn(
+                      "absolute z-50 flex gap-1 bg-bg-secondary border border-border-subtle rounded-md p-1 shadow-xl pointer-events-auto whitespace-nowrap",
+                      // The board container is `overflow-hidden` (for its rounded
+                      // corners), so a popover that spills past an edge gets clipped.
+                      // Anchor it inside the board on edge columns / the top row.
+                      y === ROWS - 1 ? "top-full mt-1" : "bottom-full mb-1",
+                      x === 0 ? "left-0" : x === COLS - 1 ? "right-0" : "left-1/2 -translate-x-1/2"
+                    ),
                     onClick: (e) => e.stopPropagation(),
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -707,7 +714,7 @@ function PlayerInfo({ name, team, avatarUrl, isActive, actionPoints, maxActionPo
       ), children: name }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1", align === "right" && "flex-row-reverse"), children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] text-fg-muted uppercase", children: team }),
-        isActive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-accent-green animate-pulse", "aria-hidden": "true" })
+        isActive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-accent-green animate-pulse motion-reduce:animate-none", "aria-hidden": "true" })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         ActionPoints,
@@ -1328,7 +1335,7 @@ function HistoryChip({ lastMove, onClick, className }) {
         "bg-bg-surface border border-border-subtle",
         "font-mono text-[11px] text-fg-secondary",
         "hover:text-fg-primary hover:bg-bg-surface-elevated active:scale-95",
-        "transition-all duration-150",
+        "transition-all duration-150 motion-reduce:transition-none",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-green",
         className
       ),