@mediacubeco/expo-template-fsd 2.3.1 → 2.4.0

package/.claude/skills/code-style/SKILL.md

@@ -1 +1,1025 @@
-TODO: fill
+---
+name: code-style
+description: >-
+  Project code style rules: naming (List/Count suffixes, boolean prefixes,
+  plural dictionaries), exports at end of file, mandatory use of @mediacubeco
+  utilities, useXxxStyles pattern, the visual token map (COLORS roles and
+  alpha steps, SIZES spacing rhythm and computed radii, the Text typography
+  scale, Glass/Blur materials, ANIMATIONS timing/spring tokens, Touch press
+  feedback props withRipple / withSpring / withHaptics, the selection-option
+  scaffold), custom React hooks (use-* files, facade hooks), memoization
+  policy, JSX prop conventions, thin route files in src/app (Expo Router, Page
+  components, sheet/web options), the keep-src/app-empty rule, Zustand client
+  state (stores, persist, selectors), the folder-per-page scaffold in
+  src/pages, mandatory pull-to-refresh (onRefresh) on screens with server
+  data, keyboard UX for multi-input forms (useFormFields), the translations
+  workflow (source of truth in ../front/lang, generated assets), and the
+  scaffold for shared UI components in src/shared/ui (atoms, molecules,
+  organisms, templates).
+  Use this skill EVERY time TypeScript/TSX code is written, edited, refactored,
+  or reviewed in this project — new components, hooks, API layers, pages, bug
+  fixes, and small edits alike. Also use when the user asks to create a
+  component or UI element, to add a translation key, to build or edit a form,
+  to add a Zustand store, or to check or fix code style, naming, or
+  consistency.
+---
+
+# Code Style
+
+These rules describe how code is written in this project. They exist so that any
+file reads as if one person wrote it. When editing existing code, follow these
+rules for the code you touch; older code may deviate — the rules win.
+
+## Naming
+
+### Variables
+
+- **Arrays always end with `List`** — variables, props, entity fields, function
+  return names. The suffix tells the reader "iterable" without looking at the type.
+  - ✅ `countryList`, `dataList: string[]`, `getCountryList()`, `snapToOffsetList`
+  - ❌ `countries`, `data: string[]`, `items`
+  - Exception: a generic list component whose element type is the generic
+    parameter keeps the platform-conventional `data: Item[]` prop (matching
+    RN's `FlatList`-style API).
+- **Booleans start with `is` / `can` / `did` / `has` / `should` / `with`** —
+  everywhere: variables, props, fields. `isPending`, `isDisabled`,
+  `didFinalized`, `canSubmit`, `withSpring`, `withHaptics`, `withAvatar`.
+  - Exception: controlled selection components (`Switch`, `Checkbox`, `Radio`)
+    keep the platform-conventional `value?: boolean` prop.
+- **Dictionary/Record objects are plural** — objects whose keys map to a set of
+  same-shaped values: `QUERY_KEYS`, `COLORS`, `BREAKPOINTS`, `TRANSPARENCIES`.
+- **Counters use the `Count` suffix**: `tabCount`, `itemCount`
+  (not `numberOfTabs`, not `length` copies without a name).
+- **Design constants are UPPER_SNAKE_CASE even when computed inside a hook.**
+  Anything that plays the role of a layout/design token — sizes, paddings,
+  widths — keeps the constant casing regardless of where it is derived:
+  `TAB_WIDTH`, `TABS_PADDING`, `SLIDER_ITEM_WIDTH`.
+
+### Functions and props
+
+- Internal handlers: `handleX` (`handlePress`, `handleWrapperLayout`).
+- Callback props: `onX` (`onPress`, `onChange`). A component receives `onX`,
+  wraps it in `handleX`, and passes `handleX` down.
+- A prop that shadows an internal name gets the `init` prefix when destructured:
+  `header: initHeader`, `renderItem: initRenderItem`.
+
+### Types
+
+- Object shapes are described with type aliases only — no `interface`.
+- **`enum` is welcome** for a fixed set of related constants (theme modes,
+  locale codes, transport methods): string values, `PascalCase` name,
+  `PascalCase` members, Russian JSDoc like any other top-level declaration.
+  A union type is for ad-hoc unions of literals/types that don't form a
+  named constant set — don't degrade an `enum` into a union.
+
+  ```ts
+  /** Способ доставки уведомления, выбранный пользователем. */
+  enum NotificationChannel {
+    Push = 'push',
+    Email = 'email',
+    Sms = 'sms',
+  }
+  ```
+- **A constant lookup map is typed by `as const`, never by an explicit
+  `Record<…>` annotation.** Appending `as const` preserves the literal value
+  types and makes the map `readonly`; a `Record<K, V>` annotation widens every
+  value to `V` (losing the literals) and forces you to restate the key set by
+  hand. Let TypeScript infer — the object _is_ the type.
+
+  ```ts
+  // ❌ explicit Record annotation — widens values, restates keys
+  const VALUE_BY_KEY: Record<Key, Value> = {
+    alpha: 'first',
+    beta: 'second',
+    gamma: 'third',
+  }
+
+  // ✅ as const — literal values, inferred keys, readonly
+  const VALUE_BY_KEY = {
+    alpha: 'first',
+    beta: 'second',
+    gamma: 'third',
+  } as const
+  ```
+- Component props: `<Name>Props`. Styles-hook context: `<Name>StylesContext`
+  (plural `Styles`, matching the hook name).
+- Refs are passed via a plain `ref?: Ref<T>` prop (React 19 treats `ref` as a
+  regular prop) — never `forwardRef` (it is deprecated). The component forwards
+  `ref` to the most useful inner element.
+
+### Files
+
+- All files and folders are **kebab-case**: only lowercase letters, digits, and
+  hyphens (`some-name.ts`). No camelCase, PascalCase, or snake_case. Dots only
+  for extensions and config modifiers (`eslint.config.js`).
+- Hooks files start with `use-` (`use-breakpoints.ts`).
+- A shared UI component is a 4-file folder — see "Shared UI components" below.
+
+## Imports and exports
+
+- **All exports live at the very end of the file**, after imports, types, and
+  implementation. Never scatter `export` on declarations (`export const`,
+  `export function`, `export class`) — declare first, then export in one block
+  at the bottom: it makes the file's public API readable at a glance.
+- Order at the bottom: `export { … }` → `export type { … }` →
+  `export default …` last.
+- `export default` only for React components (and Expo Router pages).
+- Type imports are inline: `import { type TextProps } from './text.types'`.
+- Barrel `index.ts` files contain only re-exports (`export … from`), and the
+  lines are sorted **alphabetically by module path**, top to bottom (A→Z / а→я).
+  There is no "newest goes last" — adding an export means inserting it into its
+  alphabetical slot, not appending to the end. This holds for every barrel:
+  segment barrels (`src/shared/ui/<layer>/index.ts`), `hooks/` barrels, and
+  component `index.ts` files alike.
+
+  ```ts
+  export * from './alert'
+  export * from './avatar'
+  export * from './badge'
+  export * from './button'
+  ```
+
+## @mediacubeco libraries
+
+The `@mediacubeco/*` packages are the project's utility belt. **Everything that
+exists there must be imported from there — duplicating or re-implementing it is
+a defect.** The packages evolve between versions, so never rely on a memorized
+list; inspect the installed version:
+
+- Discover the export surface via the DTS indexes in `node_modules`:
+  `@mediacubeco/base` (`dist/index.d.ts`, subpaths `/helpers`, `/services`,
+  `/types`, `/utils`) and `@mediacubeco/base-react-native` (subpaths
+  `/helpers`, `/hooks`, `/utils`). Grep `from '@mediacubeco/` across `src/`
+  to see the patterns in active use.
+- Always import via subpath, never from the package root:
+  `@mediacubeco/base/utils` ✅, `@mediacubeco/base` ❌.
+- **Before hand-rolling any utility hook or helper — layout measurement,
+  keyboard, app-state, debounce, guards, and the like — inspect the library
+  first and use what it already provides; re-implementing what exists there is a
+  defect.** Read the installed exports and their return shapes (per the DTS
+  inspection above) instead of assuming an API — the package evolves, so no
+  specific export is guaranteed to exist: discover it, don't memorize it.
+- Optional callbacks are invoked via the package's callback utility, never
+  `onPress?.(event)`.
+- Never copy source from a `@mediacubeco/*` package into the app. If something
+  is missing, add it to the package first, then import it.
+- ESLint, Prettier, and TypeScript configs extend the corresponding
+  `@mediacubeco/*` config package — never inline equivalent rules.
+
+## Components
+
+- Arrow-function components: `const Name = (props: NameProps) => { ... }`,
+  default-exported at the bottom.
+- **All visual logic lives in `useXxxStyles()`** — not just `StyleSheet.create`,
+  but also layout measurement, shared values, `useAnimatedStyle`, derived design
+  constants, and layout/scroll handlers. The component file keeps only behavior
+  (gestures, callbacks) and markup. This keeps `.tsx` declarative and lets the
+  styles hook be read as the single source of visual truth.
+- All visual values come from theme tokens via `useThemeMode()`. Hardcoding
+  any visual value is forbidden — if it affects how something looks, it comes
+  from a token. Never inline styles in JSX.
+- **Theme and measurement hooks never appear in the component file** —
+  `useTheme`, `useThemeMode`, `useSafeArea`, `useBreakpoints`, `useMixins` and
+  the like are called only inside `useXxxStyles()`. If the component needs a
+  dynamic color or size (e.g. `placeholderTextColor`), the styles hook returns
+  it.
+- The styles hook returns **only what the component actually uses** —
+  `{ styles }` plus animated styles, design constants, handlers, colors as
+  needed. Nothing speculative.
+- **Prefer a parameterless styles hook — `useXxxStyles()` with no arguments.**
+  When a visual variation is a fixed, finite set (sizes, states, variants),
+  build **every** variant inside the hook (e.g. a `stylesBySize` map keyed by
+  the variant) and let the component pick the relevant one by key — don't
+  thread the current variant into the hook as a context. A hook argument
+  (a `<Name>StylesContext`) is justified only when a style depends on a runtime
+  value that _cannot_ be enumerated ahead of time (a measured dimension, a
+  free-form color). If you can pass nothing, pass nothing.
+
+  ```tsx
+  // hook builds all variants, takes no arguments
+  const useCardStyles = () => {
+    const { SIZES } = useThemeMode()
+
+    const stylesBySize = StyleSheet.create({
+      small: { width: SIZES['6XL'], borderRadius: SIZES['6XL'] },
+      large: { width: SIZES['14XL'], borderRadius: SIZES['14XL'] },
+    })
+
+    return { stylesBySize }
+  }
+
+  // component selects the variant by key
+  const Card = ({ size = 'small' }: CardProps) => {
+    const { stylesBySize } = useCardStyles()
+
+    return <View style={stylesBySize[size]} />
+  }
+  ```
+
+### Shared UI components (`src/shared/ui`)
+
+Canonical scaffolds live in `references/components/` — read them before
+creating a component:
+
+- `references/components/post/` — simple custom component: own props, `Text`
+  atom with variants instead of raw RN `Text`, styles only for layout.
+- `references/components/wrap/` — **native wrapper pattern**: extends the
+  native props with `Omit<NativeProps, 'style'>`, swallows `style` in
+  destructuring, exposes the `outerStyle` / `innerStyle` pair (inner `View`
+  wraps children), forwards `ref` to the native element, defaults set in
+  destructuring (`decelerationRate = 'fast'`).
+
+Rules:
+
+- Place at the lowest atomic layer that fits: `atoms/` (single-purpose
+  primitive) → `molecules/` (combines atoms) → `organisms/` (self-contained
+  block) → `templates/` (full-screen scaffold).
+- Four files per component: `<name>.tsx`, `<name>.types.ts`, `<name>.styles.ts`,
+  `index.ts`. The `index.ts` re-exports explicitly:
+  `export { default as <Name> } from './<name>'` and
+  `export type { <Name>Props } from './<name>.types'` — named types only,
+  `*StylesContext` stays internal.
+- Register the component in the parent layer barrel
+  (`src/shared/ui/<layer>/index.ts`), alphabetically.
+- `<name>.types.ts` exports only types. Props type even when empty
+  (`type KeyboardAreaProps = {}`). When the styles hook does take a context
+  (only for non-enumerable runtime values — see "Prefer a parameterless styles
+  hook" above), it is derived from props:
+  `type <Name>StylesContext = Required<Pick<<Name>Props, '…'>> & {}`.
+- **One file, one component — every subcomponent lives in its own file.** A
+  component declared inside another component's file is a defect: extract it.
+  Any subcomponent internal to a component — of **any** layer (atom, molecule,
+  organism, template), not just organisms — lives in a nested `components/`
+  folder (`<name>/components/<subcomponent>/…`), each subcomponent as its own
+  4-file folder with its own `index.ts`; a `components/index.ts` barrel
+  re-exports them alphabetically. Never keep several components in one file.
+- Multi-variant components keep one folder with a file per variant plus shared
+  `<name>.types.ts(x)`, `<name>.styles.ts`, and `<name>.hooks.tsx` for shared
+  prop-building logic.
+- Compose from existing shared atoms (`Text` with a `variant` instead of raw
+  RN `Text`); typography lives in the `Text` atom, not in component styles.
+
+### Memoization
+
+- `useCallback` — **always**, for every handler.
+- `useMemo` — only for genuinely expensive computations (building arrays,
+  gesture configs). Trivial derivations stay plain.
+- `memo()` on components — only for heavy components; not by default.
+
+### JSX
+
+- Prop values are always explicit and braced: `horizontal={true}`,
+  `decelerationRate={'fast'}`. Never bare booleans or quoted strings.
+- **Conditional rendering of a single branch uses `&&`** — a ternary with
+  `: null` is noise. The ternary is reserved for a genuine two-way choice
+  (two real render branches or two values).
+
+  ```tsx
+  // ✅ one branch — &&
+  {
+    value && (
+      <Wrap>
+        <Component />
+      </Wrap>
+    )
+  }
+
+  // ❌ one branch — ternary with null
+  {
+    value ? (
+      <Wrap>
+        <Component />
+      </Wrap>
+    ) : null
+  }
+
+  // ✅ two branches — ternary
+  {
+    isLoading ? <Spinner /> : <Content />
+  }
+  ```
+
+  Guard against accidental `0`/`''` renders by making the condition boolean
+  when the value is a number or string count: `{itemCount > 0 && <Badge />}`.
+
+- Prop order, both in destructuring and in JSX attributes:
+  1. `ref`
+  2. data — within the group ordered by type: strings → numbers → booleans →
+     union values → arrays (`*List`) → objects
+  3. styles (`style`, `outerStyle`, `innerStyle`, `contentContainerStyle`)
+  4. configuration flags
+  5. handlers (`onX`) and render props (`renderItem`) — always last
+
+## Visual tokens
+
+How the design decisions from the `design-style` skill are written down in
+code. Every visual value comes from `useThemeMode()` tokens (read only inside
+`useXxxStyles`); a raw hex/rgba, number, duration, or font in a page, widget,
+or feature is a defect — it silently breaks the second theme and the accent
+system.
+
+### Colors (`COLORS`)
+
+- Roles, not palettes: `BACKGROUND` (screen planes), `FILL` (surfaces),
+  `STROKE` (borders/dividers), `TYPOGRAPHY` (text/icons), plus `BAR` and
+  `INPUT` for their namesake components. Pick the token by what the element
+  _is_.
+- Intensity steps: base → `_WEAK` (80%) → `_HALF` (40%) → `_STRONG` (20%) →
+  `_LIGHT` (10%). A lighter shade of a semantic color is its alpha step,
+  never a new color.
+- `PRIMARY*` is derived from the user-chosen accent through the theme
+  factories — anything accent-colored uses `PRIMARY` tokens.
+- Paired content colors: content on accent uses `PRIMARY_CONTRAST`, on dark
+  surfaces `CONTRAST`, on light surfaces `MATTER` or `TYPOGRAPHY.BASE`.
+- A new color concept is added to the palette and threaded through the
+  light/dark factory functions — never placed beside the system as a local
+  constant. The test: switching theme mode and accent must recolor it with
+  zero extra work at call sites. The single exception — artistic hero-scene
+  colors — are named `UPPER_SNAKE_CASE` constants at the top of the owning
+  styles file with a JSDoc explaining they are deliberate art, defined once
+  (shared scenes share constants).
+- Previews of another theme/accent resolve the actual theme object for that
+  mode/accent and read its `COLORS` — never hand-picked approximations.
+
+### Sizes, radii, and spacing (`SIZES`)
+
+All radii and spacing come from `SIZES` or are computed from `SIZES`-based
+dimensions, as `UPPER_SNAKE_CASE` constants in the styles hook with a JSDoc
+deriving them (see the radii in
+`references/components/payout-speed-option/payout-speed-option.styles.ts`).
+
+- Capsule radius = element height / 2, computed from the same sizes that
+  build the element (icon size + paddings).
+- Concentric nesting: `radius = container radius − gap to the container
+edge`; a frame around rounded content: `content radius + frame padding`.
+- Card radii land at `SIZES['5XL']` and above; `SIZES['3XL']` and smaller
+  belong to _nested_ tiles inside a card, never to the card itself.
+- The spacing rhythm, outermost to innermost:
+
+  | Level           | Token | Use                                                                              |
+  | --------------- | ----- | -------------------------------------------------------------------------------- |
+  | Screen sections | `4XL` | gap between independent blocks on a screen                                       |
+  | Inside a card   | `2XL` | card padding                                                                     |
+  | Row content     | `XL`  | gap between icon / text / trailing control in a row; horizontal insets of labels |
+  | Small stacks    | `L`   | gap between sibling tiles, label-to-card margin                                  |
+  | Text pairs      | `3XS` | value + caption; line height already provides the air                            |
+
+### Typography (`Text`)
+
+All text goes through the `Text` atom — its `type` prop is the entire scale
+(`bigTitle`, `h1`–`h3`, `subtitle`, `body`/`bodySB`,
+`description`/`descriptionSB`, `small`/`smallSB`, `button`), and it already
+carries the tight negative letter-spacing. A raw `fontSize`/`fontFamily` in
+feature styles is a defect. Captions use `variant={'secondary'}`; long
+content uses `lineCount` (cap lines) and `shouldFit` (shrink one-liners).
+
+**A text placeholder is sized from the type it replaces.** A skeleton plate
+standing in for a line of `Text` gets the **exact height of that type's line
+box**: the same `SIZES` token as the type's `fontSize`, times the scale's
+line-height ratio (`* 1.2`) — the identical expression the `Text` scale uses to
+compute its own `lineHeight`. So a `bodySB` line → `SIZES['2XL'] * 1.2`, an
+`outlineSB` line → `SIZES['XL-2XL'] * 1.2`, a `small` line →
+`SIZES['L-XL'] * 1.2`. Width may be approximate (a fraction that reads as a line
+of text); height must equal the line box exactly, so the real text drops in with
+zero vertical reflow (design skill, "Loading" — placeholders match final size).
+Never hardcode a skeleton height in raw pixels: mirror the token and the `* 1.2`
+ratio of the covered type, and the placeholder tracks the scale if that type
+ever changes.
+
+### Materials (`Glass`, `Blur`, `SHADOWS`)
+
+- The `Glass` atom is used only for the floating navigation layer (screen
+  header, bottom bar); the `Blur` atom for scrims and overlays. Everything
+  else is opaque on `FILL`/`BACKGROUND` tokens.
+- Shadows come from `SHADOWS`: `THIN` for barely-lifted elements,
+  `BASE`/`FAT` only for genuinely floating surfaces.
+
+### Motion (`ANIMATIONS`) and press feedback (`Touch`)
+
+- State changes animate over `ANIMATIONS.TIMING.BASE`, micro-feedback uses
+  `SHORT`, `LONG` is reserved for screen-scale transitions; springs use
+  `ANIMATIONS.SPRING.BASE`. `withTiming()`/`withSpring()` may be called
+  without a config (library defaults); when a config **is** passed, its
+  values come from `ANIMATIONS` tokens — a raw duration is a defect.
+- The `Touch` atom provides press feedback; pick the prop by role:
+  `withRipple` for rows inside containers and small utility targets,
+  `withSpring` (scale ~0.95) for self-contained cards and standalone
+  elements, `withHaptics` only for significant actions. `Button` animates
+  itself — never wrap it in extra feedback.
+- Disabled state goes through `DISABLED` tokens and the component's
+  `isDisabled` prop, never a hand-tuned opacity; a disabled element gets no
+  feedback props at all.
+
+### The selection scaffold
+
+Canonical example: `references/components/payout-speed-option/` — the
+project's selection language in code. Every "pick one of N" component follows
+it:
+
+- an animated frame:
+  `interpolateColor(STROKE.TRANSPARENT → STROKE.PRIMARY)` on a shared value
+  driven by `handleActive`/`handleInactive` over `TIMING.BASE`, with a
+  constant `SIZES['S']` border width (color changes, layout never jumps);
+- a check indicator with paired `scale` 0→1 + `opacity` 0→1 on the same
+  shared value;
+- `withHaptics` on the commit.
+
+## Hooks
+
+Canonical example: `references/hooks/use-posts.ts` — a custom domain hook
+showing the full pattern: a private unexported helper hook, a derived
+`postList` in `useMemo`, a `handleX` callback in `useCallback`, and
+composition of an API hook. Read it before writing any custom hook.
+
+- One public hook per file, file named `use-<name>.ts` — the default. Private
+  helper hooks may live unexported in the same file (see the unexported
+  `useSearch` in `references/hooks/use-posts.ts`). Justified exceptions exist —
+  e.g. the API layer groups all hooks of one resource in a single
+  `use-api-<resource>.ts` — but don't invent new ones without a reason.
+- Placement: app-wide reusable hooks → `src/shared/hooks/`; hooks of a shared
+  lib domain → `src/shared/lib/<domain>/hooks/`; domain-specific hooks → the
+  FSD slice that owns the domain. Every `hooks/` folder has an alphabetical
+  barrel `index.ts` of `export * from './use-…'` lines.
+- Same export policy as everywhere: `const useX = () => { … }`, then
+  `export { useX }` at the bottom — hooks are never default-exported.
+- A hook that exposes several things returns a single object, fields ordered
+  like JSX data props (strings → numbers → booleans → arrays → objects,
+  handlers last). A hook whose natural API is one thing returns that thing
+  directly — `useLocalizationText` returns the `t` function,
+  `useNavigationRoute` returns the router facade. Don't force a wrapper
+  object around a single value, and don't hand-write (or `ReturnType`-export)
+  return types TypeScript already derives.
+- Every function returned from a hook is wrapped in `useCallback`; derived
+  arrays/objects in `useMemo` — the same memoization policy as components.
+- Context hooks fail fast outside their provider via `ErrorHandler.throw`
+  from `@mediacubeco/base/helpers`. A context designed with a meaningful
+  default value (e.g. an availability flag defaulting to
+  `{ isAvailable: false }`) may return that default instead of throwing —
+  but that must be a deliberate design, not a forgotten check.
+- Third-party hooks are wrapped in thin project facades instead of being
+  called at use sites: `useNavigationRoute` wraps `useRouter`,
+  `useLocalizationText` wraps `useLocalization`. Call sites depend on project
+  vocabulary, and the dependency can be swapped in one file.
+- Component-scoped hooks stay next to their component — `useXxxStyles` in
+  `<name>.styles.ts`, shared prop-building `useXxxProps` in
+  `<name>.hooks.tsx` — never in a `hooks/` folder.
+- Any work in the API layer (`src/shared/lib/api` — resources, entities,
+  repositories, queries, hooks, mocks) goes through the **api** skill, which owns
+  the data-layer architecture (plain resources in the repository, entities in
+  `select`, `queryOptions` factories, transport options). Don't hand-roll fetch
+  calls, query keys, or TanStack Query wiring.
+
+## State
+
+Client state uses **Zustand** — a small store per concern. There is no central
+store; state is owned by the slice it belongs to. Canonical example:
+`references/store/use-post-draft-store.ts` — read it before adding or touching
+any store.
+
+Pick the smallest tier that fits. Reaching for a store when local state or the
+query cache would do is the most common mistake here:
+
+1. **Server state → TanStack Query.** Anything from the API — lists, entities,
+   mutations, their loading/error — lives in the query cache and goes through
+   the **api** skill. Never copy server data into a store; a store that
+   mirrors the server is a defect.
+2. **Client state that outlives one component _or_ is read/written outside
+   React → a Zustand store** (session tokens, a multi-step form draft,
+   cross-screen UI state).
+3. **Everything else → local `useState` / `useReducer`, or React Context** for
+   DI-style values. Theme, navigation, and websocket already use Context —
+   that is correct, do not migrate them to a store.
+
+### Where a store lives
+
+- Domain state → the **`model/` segment of the owning slice**
+  (`features/<name>/model/`, `entities/<name>/model/`).
+- Cross-cutting / app-global state (e.g. the auth session) → the dedicated
+  **`src/shared/lib/store/`** lib.
+- File is kebab-case `use-<domain>-store.ts`; the hook is `use<Domain>Store`;
+  re-export it from the segment barrel. One store = one concern — small,
+  independent stores rather than one big object.
+
+### Writing a store
+
+- `create<State>()(…)` with a typed state: boolean prefixes and `List`
+  suffixes per the naming rules, actions as methods on the state object,
+  Russian JSDoc on the state type, every field, and every action.
+- Persist **only** state that must survive a restart: `persist` middleware +
+  `createJSONStorage` pointed at the shared adapters from
+  `~shared/lib/storage` — never instantiate MMKV, SecureStore, or AsyncStorage
+  inside a slice. Sensitive data (tokens) → `storageSecureAsync`;
+  non-sensitive → `storageAsync`. Use `partialize` to keep transient fields
+  out of storage (see the reference).
+
+### Consuming a store
+
+- In components — **always through a selector**:
+  `useSessionStore((state) => state.accessToken)`. Never grab the whole store
+  (`const state = useSessionStore()`) — that re-renders on every field change.
+- Outside React — the vanilla store API: `useSessionStore.getState()`,
+  `.setState()`, `.subscribe()`. This is the sanctioned way to reach client
+  state from non-React code (e.g. the API transport attaching the
+  `Authorization` header).
+
+### Boundaries
+
+- **Stores never import each other.** A cross-slice need is composed in a
+  consuming hook that reads both stores; the FSD import direction
+  (`features → entities → shared`) still holds.
+- A store holds **client** state only. If you are tempted to cache a request
+  result in it, that data belongs in TanStack Query.
+
+## Routes (`src/app`, Expo Router)
+
+**`src/app` stays maximally empty.** Files under it only wire routes to
+implementation — screen UI, business logic, state, and helpers live in
+`~pages/*` and lower layers. No extra logic, no extra dependencies, no
+components defined in place: anything beyond a thin wrapper or a navigator
+declaration is a defect. When you notice logic accumulating in `src/app` (or
+are asked to add some), flag it and propose where it belongs instead.
+
+Canonical examples: `references/routes/` (read them before creating or editing
+any `src/app` file):
+
+- `references/routes/_app.tsx` + `share.tsx`, `guide.tsx` — the root stack:
+  `_app.tsx` holds the root Stack with `Stack.Protected` and the root
+  registrations of globally reachable routes; `share.tsx` / `guide.tsx` are
+  the same thin wrappers as the domain ones.
+- `references/routes/(stack)/` — Stack navigator: `_layout.tsx` (component
+  named `Layout`, options via `useNavigationStackOptions()`) plus its screens:
+  `index.tsx` (post list), `details.tsx` (post details), a sheet modal
+  `share.tsx` registered with `sheetOptions`, and a WebView screen `guide.tsx`
+  registered with `webOptions`.
+- `references/routes/(tabs)/` — NativeTabs navigator: `_layout.tsx` with
+  `useNavigationTabBarNativeOptions()` / `useNavigationTabBarOptions()` and
+  the `NavigationTabsNativeProvider` / `NavigationTabsProvider` pair; each tab
+  points to a group folder (`(post-list)/`, `(post-details)/`) holding that
+  tab's own screens.
+- Route screen files (`index.tsx`, `details.tsx`, `[param].tsx`, …):
+  component named `Page`, renders a single root component imported from
+  `~pages/...`, nothing else.
+
+### Screen options
+
+`useNavigationStackOptions()` returns four ready option objects and a
+`createXxxOptions(overrides)` factory for each:
+
+| Options         | Factory                 | Use                                                   |
+| --------------- | ----------------------- | ----------------------------------------------------- |
+| `stackOptions`  | `createStackOptions()`  | the `screenOptions` of a `Stack` navigator            |
+| `screenOptions` | `createScreenOptions()` | a regular push screen                                 |
+| `sheetOptions`  | `createSheetOptions()`  | a sheet modal (`formSheet`, fit-to-contents, grabber) |
+| `webOptions`    | `createWebOptions()`    | a WebView screen (full-height `formSheet`)            |
+
+Pass the ready object when no customization is needed
+(`options={sheetOptions}`); reach for the factory only to override specific
+options in place (`options={createStackOptions({ animation: 'none' })}`).
+
+### Rules
+
+- `_layout.tsx` holds navigation and options only — never content markup.
+- **Every screen is registered explicitly with its own `<Stack.Screen>` in its
+  stack's `_layout.tsx`** — with the options object its role calls for
+  (`screenOptions` for a push screen, `sheetOptions` for a modal, `webOptions`
+  for a web view). Expo Router auto-discovers a route file even without a
+  `<Stack.Screen>` line, so a missing registration does not break navigation —
+  it silently falls back to the navigator's default `stackOptions`, and the
+  screen quietly diverges from its siblings (wrong content background, no
+  animation/gesture config). That silent drift is the defect: a route file with
+  no matching `<Stack.Screen>` in its `_layout.tsx` is incomplete. The layout is
+  the full, readable census of the stack — every route file appears there once,
+  and every registration points at a real route file.
+- **Registrations are sorted alphabetically by `name`**, in one flat list — the
+  same ordering as the route files on disk and the page barrel (no grouping by
+  sub-section, no blank-line blocks). The `_layout` then reads as a mirror of the
+  folder, so a screen is found the same way in both. The only splits allowed are
+  structural navigator branches (`Stack.Protected` guards in the root stack, the
+  `if`/`else` native-vs-JS tab bar) — sort alphabetically **within** each branch,
+  never regroup across one.
+- Routes are named after the business domain: group folders `(post-list)`,
+  titles from the domain's translation namespace (`t('post.list.title')`,
+  `t('post.details.title')`).
+- **A route segment is the screen's own name, not its sub-section.** The route
+  file (`tags.tsx`) and its `Stack.Screen name` (`'tags'`) carry only the
+  screen's own identity — the domain stack's `_layout.tsx` already expresses the
+  section, so `settings-tags.tsx` / `name={'settings-tags'}` is a defect. This
+  mirrors the page-naming rule under "Pages": the same screen is `post-tags/` in
+  `~pages/` and `tags` as a route. Links target that flat segment
+  (`/(post)/tags`), which is what keeps a screen movable between sub-menus
+  without touching its name.
+- Route screen files never duplicate screen markup — only the thin wrapper.
+- **Modals (sheets) and web screens are routes like any other.** There is no
+  global modal registry: the route is registered in the `_layout.tsx` of the
+  domain stack that owns its business logic, next to that domain's screens,
+  with `sheetOptions` (or `webOptions` for WebView screens). This keeps the
+  whole domain — screens, its modals, its web views — discoverable in one
+  layout. The sheet hides the native header, so no `title` is passed.
+- In `~pages/` a modal or web screen is **not** marked in any way — no folder,
+  no name suffix; it is a regular page component of its domain. The only
+  difference is the root element: a `ModalContainer*` template
+  (`ModalContainerScroll` / `ModalContainerList` /
+  `ModalContainerSectionList`) for modals, `WebContainer` for web screens,
+  instead of `ScreenContainer*`.
+- **A route that must open over any context** (push notification, deep link,
+  cross-domain call) — a modal, a web screen, or a regular screen — is
+  _additionally_ registered in the root stack in `_app.tsx`, inside
+  `Stack.Protected`, with the same thin route file and the same options object
+  — no local option overrides on either copy. The two routes are two
+  behaviors, not duplication: the domain route opens in its domain context,
+  the root route opens over whatever screen is current. The root URL is the
+  canonical entry for everything external (pushes, links, analytics);
+  in-domain flows navigate to the domain route.
+- Both `Layout` and `Page` are default-exported at the end of the file
+  (Expo Router requirement, same export policy as everywhere).
+- Special Expo Router files (`+not-found.tsx`, `+html.tsx`, …) follow their own
+  contract from the Expo docs.
+
+### Multi-screen flows: back vs close
+
+A **flow** is a sequence of pushed screens that together complete one task
+(enter phone → confirm code → success). Its screens split into two roles, and
+the header reflects the role:
+
+- **Every step except the last** carries a **back** control — an
+  `ScreenHeaderIconBack` in the header's **`left`** slot. It steps one screen
+  back (`navigation.back()`), letting the user revise the previous step.
+- **The last screen** (the success/result step) carries a **close** control
+  instead — an `ScreenHeaderIconClose` in the header's **`right`** slot, and
+  **no** back on the left. From the end of a flow, stepping back into the
+  just-completed steps is wrong; the screen is terminal. Close dismisses the
+  whole flow at once, back to **the screen the flow started from** (its first
+  screen), via `navigation.dismissTo(firstScreenHref)`.
+
+```tsx
+// last screen of a flow — close (right), no back (left)
+<ScreenContainerScroll
+  screenHeader={<ScreenHeader right={<ScreenHeaderIconClose to={'/(profile)/security'} />} />}
+>
+```
+
+`ScreenHeaderIconClose` takes the flow's first-screen `to` href and collapses
+the stack to it (without a `to` it exits to the stack root); pass the same href
+the flow was launched from. When closing must also do flow cleanup (resetting a
+wizard store), keep that in the screen's own handler rather than the shared
+icon. Back on the left, close on the right — never both, never a back on a
+terminal screen.
+
+## Pages (`src/pages`)
+
+Canonical scaffold: `references/pages/post/` — a domain folder with four pages:
+`post-list/` (with a styles hook), `post-details/` (without one), `post-share/`
+(a modal page on `ModalContainerScroll`), and `post-guide/` (a web page on
+`WebContainer`). Read it before creating or restructuring any page.
+
+- **Every page is a folder, never a flat file.** A page lives at
+  `src/pages/<domain>/<domain>-<name>/` (kebab-case, prefixed with its domain:
+  `post-list`, not `list`). Markup, styles, and future page-local files all
+  live inside that folder — a bare `<domain>-<name>.tsx` next to the domain
+  barrel is a defect.
+- **Name a screen from its domain and itself — never from the sub-section it
+  currently sits in.** The `<name>` part is the screen's own identity, and the
+  prefix is the top-level domain, not the intermediate menu/group the screen
+  happens to live under today. Screens migrate between sub-sections, and a name
+  that bakes in the grouping goes stale the moment they do. A screen that edits
+  a post's tags is `post-tags/` (component `PostTags`, route `tags`) whether it
+  is reached from a "settings" sub-menu or a "security" sub-menu — never
+  `post-settings-tags` / `PostSettingsTags`. The sub-section is expressed by
+  **where** the route is registered and **how** it is reached, not by the name.
+  When two screens would collide under this rule (e.g. a screen and its
+  confirmation modal both reducing to `post-delete`), disambiguate by their
+  distinct role — `post-delete` for the screen, `post-delete-confirm` for the
+  modal — never by re-introducing the sub-section prefix.
+- Files inside the page folder:
+  - `<domain>-<name>.tsx` — the page component, named `<Domain><Name>`
+    (`PostList`), default-exported at the bottom;
+  - `index.ts` — explicit re-export:
+    `export { default as PostList } from './post-list'`;
+  - `<domain>-<name>.styles.ts` — appears together with the first piece of
+    visual logic, holding the `useXxxStyles` hook (same rules as components:
+    no inline styles, tokens only);
+  - `<domain>-<name>.types.ts` — only when the page actually has props;
+    pages normally take none (route params come via `useNavigationParams()`).
+- The domain barrel `src/pages/<domain>/index.ts` contains only
+  `export * from './<domain>-<name>'` lines, sorted alphabetically — like
+  every other barrel.
+
+### The page owns the screen container
+
+**Every page's root element is a screen-scaffold template — never anything
+else.** The page's `return` is exactly one of:
+
+- `ScreenContainerScroll` / `ScreenContainerList` / `ScreenContainerSectionList`
+  (`ScreenContainer*`) — a normal screen;
+- `ModalContainerScroll` / `ModalContainerList` / `ModalContainerSectionList`
+  (`ModalContainer*`) — a modal/sheet page;
+- `WebContainer` — a WebView page;
+- `ScreenAuth` — the auth-screen scaffold (itself a `ScreenContainerScroll`
+  underneath), used only by auth pages.
+
+A page whose root is a widget (`<SomeWidget />`), a feature, an entity, a raw
+`View`, or a fragment (`<>…</>`) is a **defect**. Widgets, features, entities,
+and shared UI are always composed _inside_ the container, never rendered as the
+screen root:
+
+```tsx
+// ✅ page owns the container; the widget is the inner content
+const ProfileEdit = () => (
+  <ScreenContainerScroll screenHeader={<ScreenHeader left={<ScreenHeaderIconBack />} />}>
+    <ProfileEditForm />
+  </ScreenContainerScroll>
+)
+
+// ❌ widget is the screen root — the container is hidden inside the widget
+const ProfileEdit = () => <ProfileEditForm />
+```
+
+**The container and its chrome live in the page, not in a widget.** The
+`ScreenContainer*` element — together with its `screenHeader` / `footer` /
+`onRefresh` / list props — belongs to the page. A widget that renders its own
+`ScreenContainer*` (owning the header, footer, refresh, or the `FlatList`
+itself) is the same defect from the other side: it turns the widget _into_ the
+screen and leaves the page an empty pass-through. Widgets render inner content
+only.
+
+When the header/footer/refresh are data-driven, the page calls the owning hook
+and wires the container from it — passing what the inner widget needs down as
+props, so there is a **single** hook instance. Never duplicate a hook that
+holds local form state (fields would desync from the footer's submit); a hook
+that is purely query/store-backed may be re-read anywhere, since the cache is
+shared.
+
+- Heavy markup belongs to widgets; the page composes them inside the container.
+
+### Pull-to-refresh
+
+**Every screen that shows refetchable server data wires pull-to-refresh** — the
+component that owns the data (the page, or the widget the page composes) passes
+`onRefresh` to its `ScreenContainer*` root. See `handleRefresh` in
+`references/pages/post/post-list/` and `references/hooks/use-posts.ts`.
+
+- The handler follows the standard shape: `handleRefresh` in `useCallback` that
+  `await`s the query's `refetch`. When the page reads data through a domain
+  hook, that hook exposes `handleRefresh` alongside the data.
+- The shared `RefreshControl` tracks its own spinner while the returned promise
+  is pending — the page never keeps an `isRefreshing` state and never renders a
+  `RefreshControl` manually.
+- A screen composed of several queries refreshes **all** of them:
+  `await Promise.all([refetchA(), refetchB()])`.
+- Out of scope: screens without server data (static menus, purely local forms)
+  and `ModalContainer*` modals — the modal templates deliberately do not
+  support pull-to-refresh.
+
+## Forms: keyboard UX
+
+Every form with **two or more text inputs** ships the standard keyboard flow —
+don't reinvent it per form:
+
+- **autofocus** of the first field after the screen transition animation
+  finishes (the keyboard must not fight the native navigation animation);
+- **Enter → next field** (focus moves, keyboard stays up);
+- **Enter on the last field → submit** — the same handler as the form's main
+  button.
+
+The primitives already exist: the `useFormFields` hook (`src/shared/hooks`),
+the extended `Input` (props `returnKeyType` / `submitBehavior` / `onSubmit`),
+and `useNavigationTransitionEnd`, which defers autofocus until the native
+transition ends (`autoFocus`, `setTimeout`, and `InteractionManager` all fire
+during the transition — only the navigation `transitionEnd` signal is
+reliable).
+
+```tsx
+const handleSubmit = useCallback(() => {
+  // the form's main action (request, navigation, …)
+}, [])
+
+const { getFieldProps } = useFormFields(2, { onSubmit: handleSubmit })
+
+<Input {...getFieldProps(0)} value={email} onChange={setEmail} />
+<Input {...getFieldProps(1)} value={password} onChange={setPassword} isSecure={true} />
+<Button title={t('actions.sign_in')} type={'base'} onPress={handleSubmit} />
+```
+
+- `getFieldProps(index)` hands the field `ref`, `shouldFocus`,
+  `returnKeyType`, `submitBehavior`, and `onSubmit`; the field stays fully
+  controlled via its own `value` / `onChange` / `label`.
+- Spread `{...getFieldProps(index)}` **first** among the `Input` props so
+  explicit props can override the navigation ones.
+- `index` is the visual order (0-based, top to bottom) of the **actually
+  rendered** fields; keep `fieldCount` and indices in sync with the render.
+  Dynamically shown fields are simpler left unwired.
+- The submit button and the last field call **the same** handler.
+- Autofocus is on by default; disable with `{ shouldAutoFocus: false }` when
+  the user should read the screen first.
+- Non-`TextInput` fields (`input-select`, `input-phone`, `input-code`) don't
+  take these props — use their own focus/submit mechanisms.
+- A single field needs no form hook: `shouldFocus={true}` directly, or, if
+  immediate focus fights the transition,
+  `useNavigationTransitionEnd(() => ref.current?.focus())`.
+
+## Translations
+
+`src/shared/assets/translations/locales/` is **generated and gitignored —
+never edit it by hand and never commit it.** The source of truth is the web
+app: `../front/lang/<code>.json`, and **only the `mobile` section** of each
+file. `scripts/transfer-translations.mjs` copies `JSON.parse(file).mobile`
+into `.ts` modules; regenerate any time with **`npm run translations`** (also
+runs on `postinstall`).
+
+### Hard rules
+
+1. **New translations go to Russian only** — `../front/lang/ru.json`, under
+   `mobile.*`, and nowhere else. Never add or translate the other languages;
+   those files are parser input.
+2. **Never edit anything outside the `mobile` property.** The rest of every
+   web `lang` file belongs to the web app — not our zone, under any
+   circumstance.
+3. **Do not edit existing web translations on your own.** Only when the user
+   explicitly asks, and always confirm the exact key + new text before
+   writing.
+4. **Reuse before adding.** Prefer an existing key (`actions.*`,
+   `elements.*`, an existing `screens.*`) over a new one. When a string
+   genuinely has no key, collect the proposed `key → Russian text` list and
+   get the user's confirmation before adding.
+5. **Regenerate after any web change** (`npm run translations`), then wire
+   the key(s) in code.
+
+### The `mobile.` prefix
+
+The script strips the `mobile` wrapper: the key in code has **no `mobile.`
+prefix**, the path in the web file (and in the change report) **has it**.
+Web file: `mobile.screens.auth.sign_in.separator` → code:
+`t('screens.auth.sign_in.separator')`.
+
+### Finding and structuring keys
+
+Top-level domains under `mobile`: `screens.<feature>.<screen>.*` (copy scoped
+to one screen), `navigation.*` (tab/section names), `actions.*` (reusable
+button labels — check here first for buttons), `elements.*` (reusable UI
+bits: `elements.fields.<field>.{title,placeholder,…}`, `elements.labels.*`,
+`elements.modals.*`, …), `errors.*` / `validation.*`. Don't memorize keys —
+grep `../front/lang/ru.json` for a distinctive substring of the Russian text.
+
+### Conventions
+
+- Keys and interpolation variables are **snake_case**; interpolation is
+  i18next `{{var}}`: `t('…pending_card_title', { currency })`.
+- Rich text (links/bold inside a sentence) uses angle-bracket tags rendered
+  by `LocalizationTranslate` (re-export of i18next `Trans`) with a
+  `components` map keyed by tag name (`<link-terms>…</link-terms>`).
+- In code: `const t = useLocalizationText()`, then `t('actions.sign_in')`.
+
+### Change report — mandatory
+
+After any task that changed the web files, end the answer with one block per
+changed key, using the full web path (with `mobile.`):
+
+```
+Ключ "mobile.screens.balance.sum"
+Новый перевод: "Сумма, {{currency}}"
+```
+
+## Async
+
+Asynchronous code uses `async/await` — `.then()` / `.catch()` / `.finally()`
+chains are not used. Promise chains nest poorly, hide control flow, and split
+error handling across callbacks; `await` reads top-to-bottom like sync code.
+
+- Always `await` and wrap fallible calls in `try/catch` (use `catch {` without a
+  binding when the error is unused), never `.then(onOk, onErr)` or
+  `.catch(...)`.
+- A sync callback that must return a value (an unsubscribe, a cleanup) but also
+  needs to kick off async work declares a local `async` helper and calls it —
+  the floating call is fine, no `void` operator needed:
+
+  ```ts
+  someListener((set) => {
+    const sync = async () => {
+      try {
+        set(await read())
+      } catch {
+        set(fallback)
+      }
+    }
+
+    sync()
+
+    return () => unsubscribe()
+  })
+  ```
+
+- Run independent awaits concurrently with `await Promise.all([...])`, not
+  sequential `await`s.
+
+## Documentation and comments
+
+JSDoc on the public surface is **mandatory** on every file; ordinary inline comments stay
+discouraged.
+
+**Language:** every JSDoc block is written in **Russian**. Code identifiers (names of
+types, functions, props, constants) keep their original form — translate the prose, never
+the symbols.
+
+### JSDoc — required on the public surface, in Russian
+
+A `/** … */` block sits immediately above every declaration on a file's public /
+top-level surface:
+
+- exported and top-level functions, hooks, components;
+- classes, and each of their methods and fields;
+- exported and top-level types and constants.
+
+```ts
+/** Форматирует сумму в локали пользователя; откатывается к сырому числу. */
+const formatPrice = (amount: number, locale: Locale): string => { … }
+
+/** Постраничный срез результатов плюс курсор на следующую страницу. */
+type Page<Item> = {
+  /** Элементы текущей страницы. */
+  itemList: Item[]
+  /** Курсор следующей страницы; отсутствует на последней. */
+  nextCursor?: string
+}
+```
+
+- Document intent (what-for / why), not a restatement of the signature. Add `@param` /
+  `@returns` only when they carry information the types do not.
+- A single-line `/** … */` is enough when one line says it; expand only when it earns it.
+- Local variables inside a function body get **no** JSDoc.
+
+### Inline comments stay discouraged
+
+Inside a function body, prefer renaming or extracting over a `//` explanation — the code
+must read declaratively. Sanctioned non-JSDoc inline markers remain:
+
+- Figma variant markers in typography styles (`/* big-title */`), kept solely so
+  variants are findable by search.
+- `// auth` / `// no auth` markers on repository methods in the shared API layer
+  (written by the api skill) and the `// config` / `// response` section markers in
+  repository types files.
+
+## Quick self-check before finishing
+
+- Arrays end with `List` (generic list components may keep `data: Item[]`);
+  booleans start with `is/can/did/has/should/with` (controlled selection
+  components keep `value?: boolean`)
+- Dictionaries plural, counters `*Count`, design constants UPPER_SNAKE
+- Files/folders kebab-case; exports collected at end of file; default export
+  only for components
+- `@mediacubeco` utilities used via subpath imports; nothing re-implemented;
+  optional callbacks never called via `?.()`
+- Visual logic in `useXxxStyles`; no inline styles; tokens, never hardcoded
+  visual values; theme and measurement hooks never called in the component
+  file; styles hook takes no arguments when it can (finite variants built
+  inside, picked by key), a context only for non-enumerable runtime values
+- Colors by role with alpha steps; accent via `PRIMARY*`; paired contrast
+  tokens; radii and spacing from `SIZES` (computed `UPPER_SNAKE_CASE`
+  constants with JSDoc; cards at `5XL`+; rhythm table respected)
+- Text only through the `Text` atom's `type` scale; a text skeleton is as tall
+  as the replaced type's line box (`fontSize` token × 1.2), never raw pixels;
+  `Glass`/`Blur` per the materials rules; shadows from `SHADOWS`
+- Animation configs (when passed) only via `ANIMATIONS` tokens; `Touch`
+  feedback prop by role (`withRipple` / `withSpring` / `withHaptics`);
+  disabled via `DISABLED` tokens + `isDisabled`; selection UIs follow
+  `references/components/payout-speed-option/`
+- New component: 4-file folder at the right atomic layer, explicit `index.ts`
+  re-exports, registered alphabetically in the layer barrel
+- Every handler in `useCallback`; `useMemo`/`memo` only where expensive
+- New hook: `use-<name>.ts` in the right `hooks/` folder, registered in its
+  barrel; multi-value hooks return one object, single-value hooks return the
+  value; no hand-written return types
+- New store: Zustand per the State section — slice `model/` (or
+  `src/shared/lib/store/` for cross-cutting), selectors at call sites,
+  persist only what must survive a restart
+- New page: own folder `src/pages/<domain>/<domain>-<name>/` with `index.ts`
+  (+ `.styles.ts` for visual logic); domain barrel alphabetical; no flat page
+  files
+- Page root is a screen scaffold (`ScreenContainer*` / `ModalContainer*` /
+  `WebContainer` / `ScreenAuth`) — never a widget/feature/entity/`View`/fragment;
+  the container and its `screenHeader` / `footer` / `onRefresh` live in the page,
+  never inside a widget; a data-driven container calls one hook instance (props
+  down to the widget — no duplicating a local-state form hook)
+- Flow screens: back (`ScreenHeaderIconBack`, `left`) on every step but the last;
+  the terminal screen uses close (`ScreenHeaderIconClose to={…}`, `right`,
+  `dismissTo` the flow's first screen) with no back
+- `src/app` files stay thin wrappers (`Page` / `Layout`) — no logic, no extra
+  dependencies; sheets via `sheetOptions`, web screens via `webOptions`
+- Screen with server data passes `onRefresh` (a `handleRefresh` awaiting
+  `refetch`) to its `ScreenContainer*`; no manual `isRefreshing` state
+- Form with 2+ text inputs wired through `useFormFields` (autofocus after
+  transition, Enter chain, last field submits)
+- Translations only in `../front/lang/ru.json` (namespace `mobile`, Russian
+  only), then `npm run translations`; generated assets never edited by hand;
+  change report with full `mobile.*` paths
+- JSX props braced and explicit; `&&` for single-branch rendering, ternary
+  only for a real two-way choice; prop order respected
+- Object shapes via `type` (no `interface`); fixed constant sets via string
+  `enum` (PascalCase members); constant lookup maps typed by `as const`, not an
+  explicit `Record<…>` annotation
+- `ref` as a plain prop; never `forwardRef`
+- `async/await` with `try/catch` everywhere; no `.then()`/`.catch()` chains, no
+  `void` operator
+- JSDoc (Russian) on every public/top-level declaration and every class member; intent
+  over signature restatement
+- No explanatory inline `//` inside bodies (Figma `/* … */` markers and API-layer
+  `// auth` / section markers excepted)