From 3003be5004365768c9a234f317bb003e24143560 Mon Sep 17 00:00:00 2001
From: Claude Code <claude@anthropic.com>
Date: Wed, 1 Apr 2026 06:23:51 -0700
Subject: [PATCH] =?UTF-8?q?ui(guide-ui):=20=F0=9F=92=84=20Update=20Encyclo?=
 =?UTF-8?q?pediaCallout,=20KeywordBadge,=20and=20RaceComparisonChart=20com?=
 =?UTF-8?q?ponents=20for=20improved=20visual=20consistency=20and=20new=20f?=
 =?UTF-8?q?eatures?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
---
 .../guide/src/components/ui/EncyclopediaCallout.tsx       | 8 +++++---
 src/packages/guide/src/components/ui/KeywordBadge.tsx     | 5 +++--
 .../guide/src/components/ui/RaceComparisonChart.tsx       | 5 +++--
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/packages/guide/src/components/ui/EncyclopediaCallout.tsx b/src/packages/guide/src/components/ui/EncyclopediaCallout.tsx
index aaa6579d..55e67e70 100644
--- a/src/packages/guide/src/components/ui/EncyclopediaCallout.tsx
+++ b/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)
diff --git a/src/packages/guide/src/components/ui/KeywordBadge.tsx b/src/packages/guide/src/components/ui/KeywordBadge.tsx
index 27b005c6..bd1c59ed 100644
--- a/src/packages/guide/src/components/ui/KeywordBadge.tsx
+++ b/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(),
   )
 
diff --git a/src/packages/guide/src/components/ui/RaceComparisonChart.tsx b/src/packages/guide/src/components/ui/RaceComparisonChart.tsx
index 85754308..ab6a8191 100644
--- a/src/packages/guide/src/components/ui/RaceComparisonChart.tsx
+++ b/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) => {