ui(guide-ui): 💄 Update EncyclopediaCallout, KeywordBadge, and RaceComparisonChart components for improved visual consistency and new features

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>

src/packages/guide/src/components/ui/EncyclopediaCallout.tsx

@@ -2,7 +2,7 @@ import { useState, type ReactElement } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import styled from 'styled-components'
 import type { EncyclopediaCategory } from '../../types/game-data'
-import { allEncyclopediaEntries } from '@/data'
+import { useGuideData } from '../../contexts/GuideDataContext'
 
 // ─── Category colors ─────────────────────────────────────────────────────────
 
@@ -135,14 +135,16 @@ export function EncyclopediaCallout({ entryId, defaultExpanded = false }: Props)
     setSearchParams(next)
   }
 
-  const entry = allEncyclopediaEntries.find((e) => e.id === entryId)
+  const { encyclopediaEntries } = useGuideData()
+
+  const entry = encyclopediaEntries.find((e) => e.id === entryId)
   if (!entry) return null
 
   const accentColor = CATEGORY_COLOR[entry.category]
 
   // Resolve related entry names
   const relatedEntries = entry.related
-    .map((id) => allEncyclopediaEntries.find((e) => e.id === id))
+    .map((id) => encyclopediaEntries.find((e) => e.id === id))
     .filter((e): e is NonNullable<typeof e> => e != null)
 
   const bodyParagraphs = entry.body.split('\n\n').filter(Boolean)

src/packages/guide/src/components/ui/KeywordBadge.tsx

@@ -1,14 +1,15 @@
 import type { ReactElement } from 'react'
 import { Badge } from '@lilith/ui-primitives'
 import { Tooltip } from '@lilith/ui-feedback'
-import { allKeywords } from '@/data'
+import { useGuideData } from '../../contexts/GuideDataContext'
 
 interface Props {
   keyword: string
 }
 
 export function KeywordBadge({ keyword }: Props): ReactElement {
-  const definition = allKeywords.find(
+  const { keywords } = useGuideData()
+  const definition = keywords.find(
     (k) => k.id === keyword || k.name.toLowerCase() === keyword.toLowerCase(),
   )
 

src/packages/guide/src/components/ui/RaceComparisonChart.tsx

@@ -1,6 +1,6 @@
 import { useState, useMemo, useCallback, useRef, useEffect, type ReactElement } from 'react'
 import styled from 'styled-components'
-import { allRaces } from '@/data'
+import { useGuideData } from '../../contexts/GuideDataContext'
 import type { Race } from '../../types/game-data'
 
 // ─── Constants ──────────────────────────────────────────────────────────────
@@ -434,7 +434,8 @@ export function RaceComparisonChart(): ReactElement {
   const svgRef = useRef<SVGSVGElement>(null)
   const dragRef = useRef<{ startX: number; startRot: number } | null>(null)
 
-  const points = useMemo(() => buildPoints(allRaces), [])
+  const { races } = useGuideData()
+  const points = useMemo(() => buildPoints(races), [races])
 
   const toggleAxis = useCallback((axis: Axis) => {
     setSelectedAxes((prev) => {