# AI_GUIDE · Basiri v2 (App 33)

**Read `RULES.md` first. Every rule in it is mandatory.** Then install and apply the skill at `/.claude/skills/appllama-app-design-skill/` (the Appllama anti-slop and native-fidelity bar). Its research companion is `/.claude/skills/appllama-usage/`.

## Files
| File | Role |
|---|---|
| `App 33 - Basiri v2.html` | Showcase page: live phone, 7 state presets, the 320/390/430 trio, references |
| `src/app.css` | Tokens, type ramp, device, stack pages, nav bar, tab bar, lists, buttons, segmented control, switch, modal, HUD |
| `src/screens.css` | Timeline, week strip, lesson, path, guide, circle |
| `src/icons.jsx` | `Ico`: SF-Symbol look-alikes (the real SF names are in comments) |
| `src/kit.jsx` | `Page` (nav bar + large title), `Stack` (push/pop), `TabBar`, `Modal`, `Hud`, `Seg`, `Switch`, `Avatar`, `fa()` |
| `src/today.jsx` | `Today`, `Lesson`, `CommitForm`, `EvidenceForm`, `ReflectForm` |
| `src/tabs.jsx` | `PathTab`, `Chapter`, `GuideTab`, `Answer`, `CircleTab`, `MeTab`, `Basiri` shell (state, per-tab stacks, modals) |
| `src/page.jsx` | Showcase |
| `dist/app.js` | **Precompiled** bundle loaded by the HTML |
| `RESEARCH.md` · `research/*.jpg` | Reference screens and the patterns adopted |

## Rebuilding after an edit
1. Concatenate `icons, kit, today, tabs, page`, in that order.
2. Run `esbuild --loader:.jsx=jsx --jsx-factory=React.createElement --jsx-fragment=React.Fragment --minify`.
3. Write the result to `dist/app.js`.

## State
- `phase`: 0 lesson → 1 commit → 2 act (plus `acting`) → 3 evidence → 4 reflect → 5 closed.
- `mode`: `morning` | `return`.
- State is persisted per phone under `localStorage['b33:'+id]`.

## Mapping to Expo / SwiftUI
| Web | Expo Router | SwiftUI |
|---|---|---|
| `Page` large title | `Stack.Screen options={{headerLargeTitle:true, headerTransparent:true, headerBlurEffect:'regular'}}` | `.navigationTitle` + `.large` |
| `nav.push` | `router.push` | `NavigationLink` / `navigationDestination` |
| Commit / Reflect modal | `presentation:'modal'`, `headerLeft` «لغو», `headerRight` «ثبت» | `.sheet` + toolbar `cancellationAction` / `confirmationAction` |
| Evidence | `presentation:'formSheet'`, `sheetAllowedDetents:[0.5,1]`, `sheetGrabberVisible` | `.presentationDetents([.medium])` |
| Tab bar | `NativeTabs` (expo-router/unstable-native-tabs), SF Symbols `sun.max`, `point.topleft.down.to.point.bottomright.curvepath`, `text.bubble`, `person.2`, `person.crop.circle` | `TabView` |
| `.list` / `.row` | a `ScrollView` of grouped sections, `borderCurve:'continuous'`, radius 26 | `List` + `.insetGrouped` |
| `.seg` | `@react-native-segmented-control/segmented-control` | `Picker(.segmented)` |
| `.sw` | the RN `Switch` | `Toggle` |
| `.hud` | `burnt` toast | — |
| Haptics | `expo-haptics` `notificationAsync(Success)` on «ثبت» | `.sensoryFeedback(.success)` |
| RTL | `I18nManager.forceRTL(true)` | `.environment(\.layoutDirection,.rightToLeft)` |

## Definition of done (from the skill + RULES §10)
- [ ] You can name the reference pattern for each screen.
- [ ] Push, modal and sheet are chosen per RULES §5. Back never re-enters a committed state.
- [ ] The slop pre-flight counts pass (accents, radii, gradients, emoji, infinite animations, primary buttons).
- [ ] There is no overflow at 320 with long Persian copy.
- [ ] Reduce Motion gives cross-fades; Reduce Transparency gives an opaque tab bar.