From 5b211c27869da039deee3cd6cc25fbbdf23f2d93 Mon Sep 17 00:00:00 2001
From: AliReza <zareian.comp@gmail.com>
Date: Wed, 7 Oct 2026 16:26:13 +0330
Subject: [PATCH] Lesson screen: render fixed lesson figures under intro,
 example and steps

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 src/api/types.ts             | 9 +++++++++
 src/screens/LessonScreen.tsx | 9 ++++++++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/api/types.ts b/src/api/types.ts
index 682d4e4..5580e08 100644
--- a/src/api/types.ts
+++ b/src/api/types.ts
@@ -106,10 +106,19 @@ export interface LessonIntro {
   kind: 'quiz' | 'video';
   example: string;
   steps: string[];
+  /** شکل‌های ثابتِ درس (یک بار ساخته و تأییدشده؛ هیچ تولیدِ زنده‌ای نیست). */
+  figures: LessonFigure[];
   videoUrl: string;
   durationMinutes: number | null;
 }
 
+export interface LessonFigure {
+  where: 'intro' | 'example' | 'step';
+  /** فقط برای where='step'، از صفر. */
+  index?: number;
+  diagram: DiagramSpec;
+}
+
 export interface QuestionOption {
   id: string;
   value: string;
diff --git a/src/screens/LessonScreen.tsx b/src/screens/LessonScreen.tsx
index 86e72a0..445bc97 100644
--- a/src/screens/LessonScreen.tsx
+++ b/src/screens/LessonScreen.tsx
@@ -9,6 +9,7 @@ import { moodFromServer } from '@/mascots/seyar';
 import { ErrorState, LoadingState, PrimaryButton, Screen, ScreenBody, ScreenHeader, Sep } from '@/components/ui';
 import { toFa } from '@/lib/format';
 import { MathText } from '@/lib/MathText';
+import { Diagram } from '@/diagram';
 
 /** معرفیِ درس، پیش از تمرین. */
 export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?: string }) {
@@ -18,6 +19,10 @@ export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?:
   const ref = findNode(home, nodeId) ?? findNodeOfLesson(home, lessonId);
   const color = ref ? unitColor(ref.unitIndex) : '#ED6956';
   const data = intro.data;
+  const figs = (where: 'intro' | 'example' | 'step', index?: number) =>
+    (data?.figures ?? [])
+      .filter((f) => f.where === where && (where !== 'step' || f.index === index))
+      .map((f, k) => <Diagram key={k} spec={f.diagram} />);
 
   return (
     <Screen>
@@ -47,6 +52,7 @@ export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?:
               <SeyarMascot char="sigma" mood="idle" size={56} />
               <div className="flex-1 rounded-3xl rounded-tr-sm border border-line bg-white p-4 shadow-sm">
                 <p className="whitespace-pre-line text-sm leading-[1.95] text-body"><MathText text={data.introText} /></p>
+                {figs('intro')}
               </div>
             </div>
 
@@ -58,6 +64,7 @@ export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?:
               <section className="rounded-3xl border border-line bg-white p-4">
                 <h2 className="mb-2 text-xs font-black text-muted">مثال</h2>
                 <p className="whitespace-pre-line text-sm leading-[1.95] text-ink"><MathText text={data.example} /></p>
+                {figs('example')}
               </section>
             )}
 
@@ -70,7 +77,7 @@ export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?:
                       <span className="flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full text-xs font-black text-white" style={{ backgroundColor: color }}>
                         {toFa(i + 1)}
                       </span>
-                      <span className="flex-1 whitespace-pre-line"><MathText text={step} /></span>
+                      <span className="flex-1 whitespace-pre-line"><MathText text={step} />{figs('step', i)}</span>
                     </li>
                   ))}
                 </ol>