math in Persian text: lists read right-to-left, every content text goes through MathText, chat input picks its direction per line

Measured by rendering every question, option and several tutor answers in
Chrome and comparing the on-screen x of each number (2026-09-29):
- A list inside a sentence ('از −۳ به −۲، −۱، ۰ می‌رسیم', 'الگویِ ۲، ۵، ۸')
  was locked as one left-to-right run, so all 482 read backwards. '،' and
  '؛' outside brackets now split the run; sets and coordinates in brackets
  stay one run. Locked runs are isolates (isolate-override), otherwise the
  comma between two of them was still pulled left-to-right.
- Without MathText 704 of 931 minus signs and 602 of 983 expressions were
  misplaced; lesson and island titles, the lesson intro, unit blurb,
  notification bodies and ticket messages now go through it.
- The chat box takes its direction from each line's first letter, so a
  line of pure math stays left-to-right while typing. A line that starts
  in Persian can still show its math reordered inside the box; a textarea
  cannot isolate part of its text. The sent message renders correctly.

Four expressions with Persian words inside them ('f(x) = (ریشه دوم x) + ۵۰')
remain ambiguous.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/screens/AskScreen.tsx

@@ -173,6 +173,11 @@ export function AskScreen({ lessonId, questionId, prompt }: { lessonId?: number;
               }
             }}
             rows={1}
+            // جهتِ هر خط از اولین حرفش: «-3 + 5» هنگامِ تایپ چپ‌به‌راست می‌ماند. خطی که با
+            // فارسی شروع شود راست‌به‌چپ است و ریاضیِ وسطش در کادرِ تایپ ممکن است جابه‌جا دیده شود؛
+            // در textarea نمی‌شود تکه‌ای را قفل کرد. پیامِ فرستاده‌شده از MathText رد می‌شود.
+            dir={input ? 'auto' : 'rtl'}
+            style={{ unicodeBidi: 'plaintext', textAlign: 'right' }}
             placeholder="سوالت رو بنویس…"
             className="max-h-28 min-h-10 flex-1 resize-none rounded-3xl bg-soft px-4 py-2.5 text-sm leading-6 text-ink outline-none placeholder:text-faint"
           />

src/screens/HomeScreen.tsx

@@ -10,6 +10,7 @@ import { IslandSheet } from '@/components/IslandSheet';
 import { EmptyState, ErrorState, LoadingState, Screen, Sep } from '@/components/ui';
 import { shade } from '@/lib/color';
 import { toFa } from '@/lib/format';
+import { MathText } from '@/lib/MathText';
 
 /**
  * خانه = خودِ مسیر، مثلِ دولینگو: همه‌ی فصل‌های پایه پشتِ هم، و جزیره‌ی فعلی با
@@ -38,7 +39,7 @@ export function HomeScreen() {
     : !home.units.length
       ? 'هنوز درسی برای این پایه ثبت نشده.'
       : cont
-        ? <>سلام {name}! 👋 نوبتِ جزیره‌ی <b>«{cont.node.title}»</b>ـه. دکمه‌ی <b>شروع</b> رو بزن.</>
+        ? <>سلام {name}! 👋 نوبتِ جزیره‌ی <b>«<MathText text={cont.node.title} />»</b>ـه. دکمه‌ی <b>شروع</b> رو بزن.</>
         : <>آفرین {name}! همه‌ی جزیره‌های این پایه رو تموم کردی 🎉</>;
 
   const stats = [

src/screens/LessonScreen.tsx

@@ -22,7 +22,7 @@ export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?:
   return (
     <Screen>
       <ScreenHeader
-        title={data?.title ?? '…'}
+        title={data ? <MathText text={data.title} /> : '…'}
         color={color}
         back
         mascot={{ char: companion, mood: moodFromServer(data?.mascotAnimation), size: 72 }}
@@ -30,7 +30,7 @@ export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?:
           ref && (
             <span className="inline-flex items-center gap-1.5 rounded-full bg-white/15 px-3 py-1">
               {/* ترتیبِ lessonIds «درسِ بعدی اول» است، نه ترتیبِ کتاب؛ پس شماره‌ی درس از آن درنمی‌آید. */}
-              <Zap size={11} fill="white" /> {ref.node.title}<Sep />{toFa(ref.node.lessonIds.length)} درس
+              <Zap size={11} fill="white" /> <MathText text={ref.node.title} /><Sep />{toFa(ref.node.lessonIds.length)} درس
             </span>
           )
         }
@@ -46,7 +46,7 @@ export function LessonScreen({ lessonId, nodeId }: { lessonId: number; nodeId?:
             <div className="flex items-start gap-3">
               <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">{data.introText}</p>
+                <p className="whitespace-pre-line text-sm leading-[1.95] text-body"><MathText text={data.introText} /></p>
               </div>
             </div>
 

src/screens/NotificationsScreen.tsx

@@ -5,6 +5,7 @@ import { useAsync } from '@/lib/useAsync';
 import { useToast } from '@/components/Toast';
 import { EmptyState, ErrorState, LoadingState, Screen, ScreenHeader } from '@/components/ui';
 import { relativeTime, toFa } from '@/lib/format';
+import { MathText } from '@/lib/MathText';
 
 const STYLE: Record<string, { icon: LucideIcon; color: string; bg: string }> = {
   xp_earned: { icon: Star, color: '#E8A400', bg: '#FFF8E1' },
@@ -83,7 +84,7 @@ export function NotificationsScreen() {
                     </span>
                     <span className="min-w-0 flex-1">
                       <span className={`block text-sm ${n.isRead ? 'text-muted' : 'font-bold text-ink'}`}>{n.title}</span>
-                      {n.body && <span className="mt-0.5 block whitespace-pre-line text-xs leading-6 text-body">{toFa(n.body)}</span>}
+                      {n.body && <span className="mt-0.5 block whitespace-pre-line text-xs leading-6 text-body"><MathText text={toFa(n.body)} /></span>}
                       <span className="mt-1 block text-[10px] text-faint">{relativeTime(n.createdAt)}</span>
                     </span>
                     {!n.isRead && <span className="mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-coral" />}

src/screens/SupportScreen.tsx

@@ -6,6 +6,7 @@ import { useToast } from '@/components/Toast';
 import { InlineError, PrimaryButton, Screen, ScreenBody, ScreenHeader, Sep } from '@/components/ui';
 import { friendlyError } from '@/lib/errors';
 import { toFa } from '@/lib/format';
+import { MathText } from '@/lib/MathText';
 
 const CATEGORIES = [
   { id: 'learning', label: 'درس و سوال‌ها' },
@@ -165,7 +166,7 @@ function TicketCard({ summary }: { summary: TicketSummary }) {
               key={m.id}
               className={`whitespace-pre-line rounded-2xl px-3.5 py-2.5 text-xs leading-6 ${m.sender === 'user' ? 'mr-8 bg-soft text-body' : 'ml-8 bg-[#EEF1FF] text-ink'}`}
             >
-              {m.text}
+              <MathText text={m.text} />
             </div>
           ))}
           {t && status !== 'closed' && (

src/screens/UnitScreen.tsx

@@ -8,6 +8,7 @@ import { IslandPath } from '@/components/IslandPath';
 import { IslandSheet } from '@/components/IslandSheet';
 import { EmptyState, ErrorState, LoadingState, ProgressBar, Screen, ScreenHeader } from '@/components/ui';
 import { toFa } from '@/lib/format';
+import { MathText } from '@/lib/MathText';
 
 /** نقشه‌ی جزیره‌های یک فصل، مثلِ مسیرِ دولینگو. */
 export function UnitScreen({ unitId }: { unitId: string }) {
@@ -34,7 +35,7 @@ export function UnitScreen({ unitId }: { unitId: string }) {
     <Screen className="bg-page">
       <ScreenHeader
         title={unit.title}
-        subtitle={unit.blurb || `${toFa(progress.done)} از ${toFa(progress.total)} جزیره`}
+        subtitle={unit.blurb ? <MathText text={unit.blurb} /> : `${toFa(progress.done)} از ${toFa(progress.total)} جزیره`}
         color={color}
         back
         mascot={{ char: companion, mood: progress.percent >= 50 ? 'happy' : 'idle', size: 72 }}