@mediacubeco/expo-template-fsd 2.3.1 → 2.4.0

package/.claude/skills/code-style/references/store/use-post-draft-store.ts

@@ -0,0 +1,62 @@
+import { create } from 'zustand'
+import { createJSONStorage, persist } from 'zustand/middleware'
+import { storageAsync } from '~shared/lib/storage'
+
+/** Данные, сохраняемые в черновик при вводе текста поста. */
+type PostDraftPayload = {
+  title: string
+  body: string
+}
+
+/** Состояние черновика нового поста. */
+type PostDraftState = {
+  /** Заголовок черновика: персистится, переживает перезапуск приложения. */
+  title: string
+  /** Текст черновика: персистится, переживает перезапуск приложения. */
+  body: string
+  /** Признак открытого превью: живёт только в памяти, не персистится. */
+  isPreviewVisible: boolean
+  /** Сохранить черновик при вводе текста. */
+  setDraft: (payload: PostDraftPayload) => void
+  /** Переключить превью черновика. */
+  togglePreview: () => void
+  /** Сбросить черновик после публикации или отмены. */
+  clearDraft: () => void
+}
+
+/** Стор черновика поста: текст в MMKV, состояние превью — в памяти. */
+const usePostDraftStore = create<PostDraftState>()(
+  persist(
+    (set) => ({
+      title: '',
+      body: '',
+      isPreviewVisible: false,
+      setDraft: ({ title, body }) =>
+        set({
+          title,
+          body,
+        }),
+      togglePreview: () =>
+        set((state) => ({
+          isPreviewVisible: !state.isPreviewVisible,
+        })),
+      clearDraft: () =>
+        set({
+          title: '',
+          body: '',
+          isPreviewVisible: false,
+        }),
+    }),
+    {
+      name: 'post-draft',
+      storage: createJSONStorage(() => storageAsync),
+      partialize: (state) => ({
+        title: state.title,
+        body: state.body,
+      }),
+    }
+  )
+)
+
+export { usePostDraftStore }
+export type { PostDraftState, PostDraftPayload }

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

@@ -0,0 +1,320 @@
+---
+name: design-style
+description: >-
+  The project's design language for thinking through UI and UX: the target
+  character (fresh, laconic, explicit, fluid — yet strict), color chosen by
+  semantic role with one accent per composition and paired contrast, capsule
+  silhouettes and concentric corner rounding, the airy-but-strict spacing
+  hierarchy, steep-and-shallow typography where content is the ornament,
+  glass reserved for floating navigation, short purposeful motion with press
+  feedback picked by role, the single selection language (frame + check +
+  haptic), reuse-before-invention (grow the design system), show-don't-tell
+  settings, hero scenes, designing every state (loading, empty, error,
+  disabled, pending), UX guardrails, and edge-case resilience.
+  Use this skill EVERY time UI is designed, built, edited, or reviewed in this
+  project — new screens, widgets, components, cards, lists, pickers, forms,
+  settings options, empty states — and whenever colors, spacing, sizes, corner
+  radii, shadows, typography, animations, haptics, or press feedback appear in
+  the work, even for a small tweak. Also use when the user asks to make
+  something beautiful, fresh, modern, laconic, or "in our style", or asks why
+  a screen looks off.
+---
+
+# Design Style
+
+How interfaces look, move, and respond in this project. The target character:
+**fresh, laconic, explicit, fluid — yet strict.** Every rule below serves that
+character; when improvising beyond the rules, optimize for it.
+
+What those words mean operationally:
+
+- **Fresh** — generous rounding, airy spacing, tight modern typography, real
+  data presented beautifully instead of decoration bolted on.
+- **Laconic** — few elements, each earning its place; one accent per
+  composition; no visual noise, no gratuitous ornament.
+- **Explicit** — state is always visible: selection has a frame and a check,
+  pressed things visibly press, disabled things look disabled. The user never
+  guesses.
+- **Fluid yet strict** — everything that changes state animates, but motion is
+  short, purposeful, and never orchestrated into choreography. Movement
+  communicates; it does not entertain (hero scenes are the one exception, see
+  Motion).
+
+This skill is about **decisions** — what the result looks and feels like and
+why. How those decisions are written down (the theme tokens, the shared
+components, the feedback props, the styles-hook layout) lives in the
+`code-style` skill; both apply whenever UI code is written.
+
+## Reuse before invention
+
+The design system is the product of every screen shipped so far. Before
+designing anything new, look for the existing component, pattern, or
+composition that already solves the problem — and prefer extending it over
+inventing a parallel one. A new visual pattern must *earn* its existence by
+doing something no existing pattern can. Two screens that solve the same
+problem differently feel like two apps; every reuse makes the next screen
+cheaper and the whole app more coherent.
+
+The same discipline applies to values: a new color, size, radius, or timing
+is added **into** the system (so the whole app can use it and theming keeps
+working) — never dropped beside it as a local one-off.
+
+## Color
+
+**Color is chosen by role, not by look.** Decide what the element *is* — a
+screen plane, a surface, a border, a piece of text — and its color follows
+from that role in the current theme. Never pick a color because it "looks
+right today": that choice silently breaks the second theme and the accent
+system.
+
+- **Shades are steps, not new colors.** A lighter version of a semantic color
+  is a weaker intensity step of the same role — never a freshly invented
+  neighbor color.
+- **The accent belongs to the user.** Anything accent-colored must follow the
+  user-chosen accent and recolor itself when the accent changes.
+- **Every background has a paired content color.** Content on the accent, on
+  dark surfaces, on light surfaces — each pairing is defined by the system.
+  Never assume "white looks fine here"; it stops being fine one accent later.
+- **One accent per composition.** The accent marks the single most important
+  thing on the screen; spending it twice spends it on nothing.
+- A new color concept (a new accent, a new semantic status) is **built into**
+  the theme system so both themes and every accent handle it with zero extra
+  work at call sites. The single sanctioned exception: **artistic scene
+  colors** — ambient hero backdrops that deliberately ignore the theme,
+  declared once as explicit, documented art.
+
+### Honest previews
+
+When UI previews another theme, accent, or appearance (a theme picker, a mini
+phone mock), draw it with the **real palette of the target** — never with
+hand-picked "looks close" approximations. Real values make previews truthful
+and self-updating when the design system evolves.
+
+## Shape and rounding
+
+The silhouette of this design is **soft and continuous**. Corners are
+generous, and every radius is *reasoned* — derived from the element's own
+anatomy, never picked by eye.
+
+- **Capsule is the default shape for self-contained interactive elements** —
+  buttons, badges, chips, single-row cards. The radius is half the element's
+  height, derived from the same dimensions that build the element, so the
+  shape survives any size change.
+- **Row containers are capsules of one row.** A card that stacks uniform rows
+  (a menu, a list) takes the capsule radius of a single row as its own corner
+  radius. This is the project's ideal card and the reference for "how round
+  is round".
+- **Nested rounding is concentric.** An element inside a rounded container
+  gets the container's radius minus the gap to the container's edge; corners
+  then share a visual center and the margin reads even all the way around.
+  The inverse also holds: a frame *around* rounded content gets the content
+  radius plus the frame padding. Never give a nested element an arbitrary
+  smaller radius — mismatched corners are the fastest way to look cheap.
+- **Cards are never square-ish.** A multi-row card derives its radius from
+  its own anatomy — inner content radius plus card padding, or the capsule
+  radius of its densest row. If a radius "looks fine" but reads flat next to
+  the menu card, it is too small — the menu card is the calibration
+  reference. Screen-level sheets and hero surfaces go larger still. When in
+  doubt, round more, not less.
+
+## Spacing
+
+Spacing carries the "airy but strict" feel. It follows one descending rhythm,
+outermost to innermost — each level visibly airier than the one inside it:
+
+1. **Between independent blocks on a screen** — the widest step; sections
+   must read as separate thoughts.
+2. **Inside a card** — generous padding; content never touches the shell.
+3. **Between the parts of a row** — icon, text, trailing control breathe but
+   clearly belong together.
+4. **Between sibling tiles, label to card** — a small, consistent step.
+5. **Between a value and its caption** — nearly touching; line height already
+   provides the air.
+
+Section labels sit **outside** their card (uppercase, small, secondary,
+aligned with the card's content inset) — the card stays pure content.
+Symmetry is part of strictness: content inset on the left is matched on the
+right; a divider that should align with text starts at the text's inset, not
+at zero. Every derived layout value (tile sizes, divider insets, computed
+radii) must have an auditable derivation — arithmetic, not eyeballing.
+
+## Typography
+
+The app speaks one typographic scale with tight, modern letter-spacing —
+never recreate text styles by hand; always speak the scale.
+
+- **Hierarchy is steep and shallow**: one heading level per screen (usually
+  on the hero), semibold for values, small secondary text for captions.
+  Weight signals importance: bold = headings, semibold = data/emphasis,
+  regular = prose.
+- **The value–caption pair** is the workhorse of informational UI: the datum
+  first, prominent; its label beneath, small and secondary. Data first, label
+  second — the user scans values, not labels.
+- **Long content is planned, not hoped away**: cap multi-line text at a
+  designed line count; shrink critical one-liners (IDs, serials) to fit
+  instead of ellipsizing them into uselessness.
+- **Content is the ornament.** Before adding a decorative element, check
+  whether the data itself can be beautiful: native names, real numbers, a
+  live preview. A screen decorated with its own content ages better than one
+  decorated with clip-art.
+
+## Materials
+
+Three planes, strictly assigned:
+
+1. **Glass — the floating navigation layer only**: the screen header and the
+   bottom bar. Glass signals "this floats above your content"; spending it on
+   content cards dilutes the signal and costs legibility.
+2. **Blur** — scrims and overlays that must hint at what is underneath
+   (behind modals, under progress veils).
+3. **Everything else is opaque.** Content is for reading; translucent content
+   is neither fresh nor strict, just hazy.
+
+Layering in this design is done with fill contrast and rounding, not drop
+shadows — shadows are rare and reserved for genuinely floating surfaces.
+
+## Motion and interactivity
+
+Motion exists to communicate state. The whole app moves on **one shared
+tempo**: a standard beat for state changes, a shorter one for micro-feedback,
+a longer one reserved for screen-scale transitions. An ad-hoc duration
+invented for one animation breaks the tempo — timing is a system decision,
+not a local one.
+
+### Everything pressable responds
+
+A pressable element with no visible reaction is broken feedback. Pick the
+response by the element's role:
+
+- **Rows and small utility targets** (menu items, list rows, header icons) —
+  the surface acknowledges the touch in place; the layout does not move.
+- **Self-contained cards and standalone elements** (promo cards, tiles,
+  floating actions) — the element itself compresses slightly, like a physical
+  object under a finger.
+- **Haptics — sparingly**, only where the action is *significant*: committing
+  a selection, toggling a control, destructive confirmation. Haptics on every
+  tap makes the phone buzz like a toy; scarcity is what makes it read as
+  importance.
+
+### The selection language
+
+Every "pick one of N" UI speaks the same dialect, whatever the content:
+
+- an **animated frame** around the option — the border color fades in while
+  the border width stays constant, so color changes but layout never jumps;
+- a **check or radio indicator** appearing by growing and fading in together;
+- **haptics on the commit**.
+
+Reuse this pattern; do not invent a second selection visual. Two screens that
+select things differently feel like two apps.
+
+### Choreography restraint
+
+One property per state change, elements animating independently. No staggered
+cascades, no multi-step sequences, no bounce for its own sake. If removing an
+animation would lose no information, remove it — except:
+
+### Hero scenes — the sanctioned exception
+
+Showcase screens (sign-in, onboarding, big empty states) may carry **one**
+ambient animated scene: slow, continuous, behind the content, never competing
+with controls. Product screens get none. A hero scene is scenery, not UI — it
+must be beautiful when ignored.
+
+## Show, don't tell
+
+A setting should **demonstrate its result, not describe it**. A theme option
+shows a mini interface in that theme; a language option greets the user in
+that language; an accent option is painted in that accent. If the user must
+read a label to know what the option does, look for a way to make the option
+*be* the answer. This is also why previews use real values (see Color): a
+demonstration must be true.
+
+## Every state is designed
+
+A screen is not one picture — it is a small state machine, and **every state
+the data can reach gets a designed face**. Shipping only the happy path is
+the fastest way to make a polished app feel broken. Before calling any
+surface done, walk its states:
+
+- **Loading** — show structure, not a void: content-shaped placeholders where
+  the layout is known, a spinner only where it is not. A placeholder must match
+  the **exact size of the content it stands in for** — a text skeleton is as
+  tall as that text's rendered line box, a tile skeleton fills the tile — so the
+  real data drops into the same footprint without a single pixel of reflow. A
+  skeleton a different height than its content produces a visible jump the
+  moment data arrives, which reads as broken however smooth the shimmer looks.
+  Screens with server data render cached content immediately and refresh in the
+  background — never hide data the user already saw behind a loader.
+- **Empty** — friendly and actionable: what this place is, why it is empty,
+  and one clear thing to do about it (a CTA when an action exists). An empty
+  screen is a first impression, not an error.
+- **Error** — say what happened in human words and always offer a way out
+  (retry, go back). Danger color used sparingly, so it keeps its alarm value.
+- **Disabled** — visibly inert and completely unresponsive: no ripple, no
+  compression, no haptics. A dead control that still reacts feels glitchy,
+  not strict.
+- **Pending / in-flight** — every action acknowledges instantly: buttons show
+  progress, mutations prefer optimistic updates with rollback on failure. A
+  tap that goes unanswered while the network thinks is perceived as a bug.
+
+Transitions between states animate (a crossfade on the standard tempo) inside
+a stable layout — the state changes, the ground does not. This is the wider
+rule: **the layout never shifts on its own.** A calm interface holds still —
+content stays exactly where the user last saw it, and the only movement is
+deliberate, smooth, and tied to something the user did or a real feature (a
+sheet opening, an item the user just removed collapsing away). Space that will
+be filled is reserved ahead of time; nothing reflows merely because data
+arrived, an image decoded, or a boolean flipped. A jump that no feature asked
+for is a bug, not a transition — the default character is static, fluid, and
+tidy.
+
+## UX guardrails
+
+- **Touch targets stay comfortable.** A small glyph gets a padded pressable
+  area; never make the user aim.
+- **Destructive actions are unmistakable**: danger color, an explicit
+  confirmation step, haptics on the commit.
+- **Nothing moves under the finger.** Content the user is about to tap never
+  shifts because something loaded above it — reserve space or push new
+  content below the fold.
+- **Local pending beats global blocking.** Show progress on the element that
+  is working; never freeze the whole screen for a partial operation.
+- **Pull-to-refresh** exists on every screen with server data.
+- **Forms follow the keyboard rules** from the `forms` skill: autofocus after
+  the transition, Enter walks the fields, Enter on the last field submits.
+
+## Edge cases are part of the design
+
+A design is judged at its worst moment, not its best screenshot:
+
+- **Reserve space for things that change.** Crossfading or swapping content
+  gets a fixed-height stage so the layout never jumps.
+- **Hide what degenerates.** A caption that would duplicate its title, a
+  translation that is missing — render nothing rather than noise.
+- **Respect writing systems.** RTL scripts, non-Latin punctuation, and long
+  German words are inputs to layout, not surprises.
+- **Both themes, all accents, always.** Verify light and dark and at least
+  one light accent (where the accent's paired content color is dark) before
+  calling UI done.
+
+## Self-check before finishing a design
+
+- Existing components and patterns reused; anything new earns its place and
+  is added into the system, not beside it.
+- One accent per composition; every color chosen by role; every background
+  paired with its content color.
+- Radii reasoned from element anatomy: capsules for interactive elements,
+  concentric nesting, the menu card as calibration — when in doubt, rounder.
+- Spacing follows the descending rhythm; insets symmetric; labels outside
+  cards.
+- Typography speaks the scale: one heading per screen, value–caption pairs,
+  long content planned.
+- Every pressable responds according to its role; haptics only on significant
+  actions; selections use the frame + check language.
+- Glass only on the floating navigation; content opaque.
+- Every reachable state designed: loading, empty, error, disabled, pending;
+  overflow and RTL considered; both themes and a contrasting accent checked.
+- Layout holds still: placeholders match the final content's size (a text
+  skeleton as tall as its line box), space reserved for what changes, no reflow
+  on load — motion happens only where a feature calls for it.

package/.env

@@ -1 +1,3 @@
-EXPO_PUBLIC_API_URL=-
+EXPO_PUBLIC_APP_URL=https://mediacube.io
+EXPO_PUBLIC_APP_URL_API=https://mediacube.io/api
+EXPO_PUBLIC_APP_ID_STORAGE=mediacube

package/.env.example

@@ -1 +1,3 @@
-EXPO_PUBLIC_API_URL=-
+EXPO_PUBLIC_APP_URL=-
+EXPO_PUBLIC_APP_URL_API=-
+EXPO_PUBLIC_APP_ID_STORAGE=-

package/CLAUDE.md

@@ -10,7 +10,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 Create `.env.local` with:
 
 ```
-EXPO_PUBLIC_API_URL=https://...
+EXPO_PUBLIC_APP_URL_API=https://...
 ```
 
 Required at startup — `src/shared/constants/environment.ts` throws if is missing or `API_URL` doesn't start with `https://`.
@@ -38,7 +38,7 @@ ApiProvider → ThemeProvider → LocalizationProvider → NavigationProvider
 
 - **ApiProvider** — TanStack Query with AsyncStorage persistence. Queries with `meta.persist = true` survive app restarts.
 - **ThemeProvider** — light/dark/system mode stored in SecureStore. Theme tokens accessed via `useTheme()` / `useThemeMode()`.
-- **LocalizationProvider** — i18next with `en`/`ru` translations in `src/shared/assets/translations/`.
+- **LocalizationProvider** — i18next; the translations workflow lives in the `code-style` skill, section "Translations".
 - **NavigationProvider** — wraps GestureHandler, SafeArea, KeyboardController, and `@react-navigation/native`'s ThemeProvider.
 
 ### API layer (`src/shared/lib/api/`)
@@ -63,19 +63,13 @@ Token constants live in `constants/` (colors, fonts, sizes, shadows, borders, du
 
 Expo Router with file-based routing. Helper hooks:
 
-- `useNavigation()` — thin wrapper around `useRouter()`
+- `useNavigationRoute()` — thin wrapper around `useRouter()`
 - `useNavigationParams()` — typed local params
-- `useNavigationStackOptions()` — returns `createStackOptions()` and `createScreenOptions()` factory functions
-- `useNavigationTabBarOptions()` — returns `createTabBarOptions()` and `createTabOptions()` for native tabs
+- `useNavigationStackOptions()` — ready option objects (`stackOptions`, `screenOptions`, `sheetOptions`, `webOptions`) plus `createXxxOptions(overrides)` factories
+- `useNavigationTabBarOptions()` / `useNavigationTabBarNativeOptions()` — tab bar options (custom / native tabs)
 
 ### Shared UI (`src/shared/ui/`)
 
 Atomic design: `atoms/` → `molecules/` → `organisms/` → `templates/`.
 
 `ScreenContainer` (in `templates/`) is the standard scrollable/list screen wrapper — handles safe area, pull-to-refresh (`RefreshControl`), keyboard avoidance (`KeyboardArea`), and header/footer overflow.
-
-Utility hooks in `src/shared/hooks/`: `useTheme`, `useBreakpoints` (responsive breakpoints), `useMixins` (window-relative sizing), `useSafeArea`, `useAnimated`.
-
-### Secrets
-
-`.secret/` is git-ignored. Keystore and provisioning files go there — see `.secret/README.md` for the expected file list.

package/app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "expo-template-fsd",
     "slug": "expo-template-fsd",
-    "scheme": "application",
+    "scheme": "expo-template-fsd",
     "version": "1.0.0",
     "orientation": "portrait",
     "userInterfaceStyle": "automatic",
@@ -12,6 +12,7 @@
     },
     "ios": {
       "supportsTablet": true,
+      "usesAppleSignIn": true,
       "bundleIdentifier": "com.mediacube.application",
       "icon": "./src/shared/assets/images/logo-ios.png"
     },
@@ -19,7 +20,7 @@
       "predictiveBackGestureEnabled": false,
       "package": "com.mediacube.application",
       "adaptiveIcon": {
-        "backgroundColor": "#ffffff00",
+        "backgroundColor": "#ffffff",
         "foregroundImage": "./src/shared/assets/images/logo-android-foreground.png",
         "backgroundImage": "./src/shared/assets/images/logo-android-background.png",
         "monochromeImage": "./src/shared/assets/images/logo-android-monochrome.png"
@@ -29,14 +30,16 @@
       ["expo-font", {}],
       ["expo-image", {}],
       ["expo-router", {}],
+      ["expo-sharing", {}],
       ["expo-system-ui", {}],
       ["expo-web-browser", {}],
       ["expo-localization", {}],
       ["expo-secure-store", {}],
+      ["expo-build-properties", {}],
       [
         "expo-splash-screen",
         {
-          "backgroundColor": "#ffffff00",
+          "backgroundColor": "#ffffff",
           "android": {
             "image": "./src/shared/assets/images/splash-light.png",
             "dark": {

package/axios.d.ts

@@ -0,0 +1,5 @@
+import 'axios'
+
+declare module 'axios' {
+  interface AxiosRequestConfig {}
+}

package/env.d.ts

@@ -1,7 +1,9 @@
 declare global {
   namespace NodeJS {
     interface ProcessEnv {
-      EXPO_PUBLIC_API_URL: string
+      EXPO_PUBLIC_APP_URL: string
+      EXPO_PUBLIC_APP_URL_API: string
+      EXPO_PUBLIC_APP_ID_STORAGE: string
     }
   }
 }

package/package.json

@@ -1,58 +1,46 @@
 {
   "private": false,
-  "version": "2.3.1",
+  "version": "2.4.0",
   "name": "@mediacubeco/expo-template-fsd",
   "description": "Application by Mediacube developers",
   "license": "MIT",
   "type": "module",
   "main": "expo-router/entry",
-  "files": [
-    ".agents",
-    ".claude",
-    ".husky",
-    ".secret",
-    "src",
-    ".env",
-    ".env.example",
-    ".gitignore",
-    "AGENTS.md",
-    "app.json",
-    "CLAUDE.md",
-    "eas.json",
-    "env.d.ts",
-    "eslint.config.js",
-    "expo-env.d.ts",
-    "i18next.d.ts",
-    "package-lock.json",
-    "package.json",
-    "prettier.config.js",
-    "README.md",
-    "skills-lock.json",
-    "svg.d.ts",
-    "tsconfig.json"
-  ],
   "keywords": [
     "mediacube",
     "mediacubeco",
     "application"
   ],
   "dependencies": {
+    "@dev-plugins/react-native-mmkv": "^0.4.0",
+    "@dev-plugins/react-navigation": "^0.4.0",
+    "@dev-plugins/react-query": "^0.4.0",
     "@tanstack/query-async-storage-persister": "^5.99.0",
     "@tanstack/react-query": "^5.99.0",
     "@tanstack/react-query-persist-client": "^5.99.0",
+    "@sbaiahmed1/react-native-blur": "^4.6.4-beta.1",
+    "@shopify/flash-list": "2.0.2",
+    "@shopify/react-native-skia": "2.6.2",
+    "axios": "^1.18.1",
     "expo": "~56.0.8",
     "expo-blur": "~56.0.3",
+    "expo-build-properties": "~56.0.19",
     "expo-constants": "~56.0.16",
+    "expo-dev-client": "~56.0.20",
     "expo-device": "~56.0.4",
+    "expo-file-system": "~56.0.8",
     "expo-font": "~56.0.5",
     "expo-glass-effect": "~56.0.4",
     "expo-haptics": "~56.0.3",
     "expo-image": "~56.0.9",
+    "expo-linear-gradient": "~56.0.4",
     "expo-linking": "~56.0.13",
     "expo-localization": "~56.0.6",
     "expo-navigation-bar": "~56.0.3",
+    "expo-network": "~56.0.5",
     "expo-router": "~56.2.8",
     "expo-secure-store": "~56.0.4",
+    "expo-sharing": "~56.0.20",
     "expo-splash-screen": "~56.0.10",
     "expo-status-bar": "~56.0.4",
     "expo-symbols": "~56.0.5",
@@ -66,36 +54,41 @@
     "react-native": "0.85.3",
     "react-native-gesture-handler": "~2.31.2",
     "react-native-keyboard-controller": "1.21.6",
+    "react-native-mmkv": "^4.3.1",
+    "react-native-nitro-cookies": "^1.2.0",
+    "react-native-nitro-modules": "^0.35.9",
     "react-native-reanimated": "4.3.1",
     "react-native-safe-area-context": "~5.7.0",
     "react-native-screens": "~4.25.2",
     "react-native-svg": "15.15.4",
     "react-native-web": "^0.21.0",
+    "react-native-webview": "13.16.1",
     "react-native-worklets": "0.8.3",
-    "@mediacubeco/base": "2.3.1",
-    "@mediacubeco/base-react-native": "2.3.1",
-    "@mediacubeco/base-react": "2.3.1"
+    "@mediacubeco/base": "2.4.0",
+    "@mediacubeco/base-react-native": "2.4.0",
+    "@mediacubeco/base-react": "2.4.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.3",
     "eslint": "^9.39.1",
+    "patch-package": "^8.0.1",
     "husky": "^9.1.7",
     "prettier": "^3.8.1",
     "typescript": "^6.0.3",
-    "@mediacubeco/eslint-config": "2.3.1",
-    "@mediacubeco/typescript-config-fsd": "2.3.1",
-    "@mediacubeco/typescript-config-react-native": "2.3.1",
-    "@mediacubeco/prettier-config-fsd": "2.3.1",
-    "@mediacubeco/typescript-config": "2.3.1",
-    "@mediacubeco/eslint-config-fsd": "2.3.1",
-    "@mediacubeco/eslint-config-react": "2.3.1",
-    "@mediacubeco/eslint-config-react-native": "2.3.1",
-    "@mediacubeco/typescript-config-react": "2.3.1",
-    "@mediacubeco/prettier-config": "2.3.1"
+    "@mediacubeco/eslint-config-fsd": "2.4.0",
+    "@mediacubeco/eslint-config": "2.4.0",
+    "@mediacubeco/eslint-config-react": "2.4.0",
+    "@mediacubeco/prettier-config": "2.4.0",
+    "@mediacubeco/eslint-config-react-native": "2.4.0",
+    "@mediacubeco/prettier-config-fsd": "2.4.0",
+    "@mediacubeco/typescript-config-fsd": "2.4.0",
+    "@mediacubeco/typescript-config-react-native": "2.4.0",
+    "@mediacubeco/typescript-config-react": "2.4.0",
+    "@mediacubeco/typescript-config": "2.4.0"
   },
   "scripts": {
-    "postinstall": "npx husky && npx skills update",
+    "postinstall": "patch-package && npm run prebuild && npx skills update",
     "prebuild": "expo prebuild",
     "start": "expo start",
     "android": "expo run:android",