# AI_GUIDE · App 32 · Basiri

## Files
| File | Role |
|---|---|
| `App 32 - Basiri.html` | Showcase: the flagship phone with 6 state presets, the 320/390/430 trio, and the key-state strip |
| `Design System V2.html` | Visual board: directions, colour, type, shape, glass, buttons/states, components, imagery, motion, QA |
| `src/basiri.css` | Tokens and primitives (glass, btn, tabbar, seg, toggle, sheet, toast, type scale) |
| `src/screens.css` | Screen components (hero, rail, next move, trace, path, circle, me, sheets) |
| `src/icons.jsx` | `Ico` icon set: SF Symbol look-alikes, with the SF names noted in comments |
| `src/ui.jsx` | `Device`, `TabBar`, `Screen` (large title), `Sheet`, `Toast`, `Seg`, `Toggle`, `HoldButton`, `LoopRail`, `Ring`, `fa()` |
| `src/store.jsx` | Content (PATH, LESSON, COMMIT_OPTS, CIRCLE) and `useBasiri()` state, persisted in localStorage |
| `src/today.jsx` | Today: `TodayHero`, `NextMove`, `FocusTimer`, `CommitMini`, `WeekTrace` |
| `src/flows.jsx` | The Learn, Commit, Evidence and Reflect sheets, and `GuidePanel` |
| `src/tabs.jsx` | The Path, Guide, Circle and Me tabs, and the `BasiriApp` shell |
| `src/page.jsx` | Showcase page (presets, lazy-mounted phones) |
| `dist/basiri.js` | **Precompiled** bundle actually loaded by the HTML (production React) |
| `build.sh` | Rebuilds `dist/` from `src/`. Run it after any JSX edit |

## State model
- `phase`: 0 focus → 1 learned → 2 committed → 3 acting → 4 acted → 5 evidence → 6 reflected.
- `mode`: `morning` | `evening` | `return`.

The next-move card, the loop rail, the hero image and the week trace all derive from `phase` and `mode`.

## Non-negotiables (from the Basiri brief)
- RTL Persian. Bottom nav physical order left→right is **من | هم‌مسیر | راهنما | مسیر من | امروز**: 5 equal items, no centre FAB.
- Today is one hero plus one next move, not a dashboard.
- Guide is context-first, not a blank chat. Circle is not a feed. Me is memory, not settings. My Path is not a catalogue.
- Recovery never guilts and never resets.
- White, never beige. Glass only on navigation, floating controls, sheets and the toast.

## Native mapping (SwiftUI, iOS 26)
| Web | SwiftUI |
|---|---|
| Tab bar | `TabView` with `.tabViewStyle(.sidebarAdaptable)`; the system glass bar is automatic. Tab icons: `sun.max`, `point.topleft.down.to.point.bottomright.curvepath`, `square.on.square`, `person.2`, `person.crop.circle` |
| `.glass` | `.glassEffect(.regular, in: .capsule)` |
| `.btn.pro` | `.buttonStyle(.glassProminent).tint(Color("Green"))` |
| Sheet | `.sheet` + `.presentationDetents([.medium, .large])` |
| Large title | `.navigationTitle` + `.navigationBarTitleDisplayMode(.large)` |
| HoldButton | `onLongPressGesture(minimumDuration: 0.85)` + `.sensoryFeedback(.success)` |
| RTL | `.environment(\.layoutDirection, .rightToLeft)`; fonts registered as Vazirmatn / Estedad |

## React Native
- **Tab bar:** `expo-blur` BlurView, intensity 60, tint `light`.
- **Styles:** use the same tokens from `tokens.json`.
- **RTL:** `I18nManager.forceRTL(true)`.

## Checklist
- [ ] Tab x-coordinates: من is leftmost and امروز is rightmost.
- [ ] All copy is Persian, with Persian digits.
- [ ] Every loop stage is reachable from Today.
- [ ] Reduce Motion and Reduce Transparency work (Me → Settings).
- [ ] Nothing overflows at 320px.